Use subject chip select field

aleksis/apps/chronos/frontend/components/amendLesson.graphql

@@ -2,6 +2,8 @@ query gqlSubjects {
   amendableSubjects: subjects {
     id
     name
+    colourFg
+    colourBg
   }
 }
 

aleksis/apps/chronos/frontend/components/substitutions/SubstitutionCard.vue

 <script setup>
 import SubstitutionInformation from "./SubstitutionInformation.vue";
 import TeacherField from "aleksis.apps.cursus/components/TeacherField.vue";
-import SubjectField from "aleksis.apps.cursus/components/SubjectField.vue";
+import SubjectChipSelectField from "aleksis.apps.cursus/components/SubjectChipSelectField.vue";
 
-import { gqlRooms } from "../amendLesson.graphql";
+import { gqlRooms, gqlSubjects } from "../amendLesson.graphql";
 
 import createOrPatchMixin from "aleksis.core/mixins/createOrPatchMixin.js";
 import deleteMixin from "aleksis.core/mixins/deleteMixin.js";
@@ -23,14 +23,10 @@ import deleteMixin from "aleksis.core/mixins/deleteMixin.js";
 
       <v-spacer />
 
-      <subject-field
-        :enable-create="false"
-        dense
-        outlined
-        hide-details
+      <subject-chip-select-field
         :value="subject"
         :disabled="loading"
-        :label="$t('chronos.substitutions.overview.subject.label')"
+        :items="amendableSubjects"
         @input="subjectInput"
       />
 
@@ -396,6 +392,7 @@ export default {
   },
   apollo: {
     amendableRooms: gqlRooms,
+    amendableSubjects: gqlSubjects,
   },
 };
 </script>