✨ Add timetable group settings

src/views/SettingsView.vue

@@ -3,6 +3,7 @@ import ScrollableContainer from "@/components/scrollable-container.vue";
 import PageCard from "@/components/settings/page-card.vue";
 import {
   FilterIcon,
+  CopyCheckIcon,
   PaletteIcon,
   InfoIcon,
   ChevronLeft,
@@ -18,6 +19,11 @@ import {
           :icon="FilterIcon"
           route="settings/filtering"
         />
+        <PageCard
+          :name="$t('title.settings.groups')"
+          :icon="CopyCheckIcon"
+          route="settings/groups"
+        />
         <PageCard
           :name="$t('title.settings.appearance')"
           :icon="PaletteIcon"

src/views/settings/TimetableGroupSettings.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { possibleTimetableGroups, timetableGroups } from "@/store";
+import MultiselectButtons from "@/components/settings/multiselect-buttons.vue";
+</script>
+
+<template>
+  <h2>{{ $t("settings.heading.timetableGroups") }}</h2>
+  <p>{{ $t("settings.text.timetableGroups") }}</p>
+  <MultiselectButtons
+    :options="possibleTimetableGroups"
+    :values="possibleTimetableGroups"
+    v-model="timetableGroups"
+  />
+</template>
+
+<style scoped>
+h2 {
+  margin: 0px;
+}
+
+p {
+  margin: 5px 0px;
+}
+</style>