🚧 💄 Implement new settings menu and 3 subpages

- Implement new main settings menu
- Implement "filtering" page
- Implement "appearance" page
- Implement "about" page
- Make the Git hash a link to the Git repo

src/views/SettingsView.vue

@@ -2,126 +2,71 @@
 import ScrollableContainer from "@/components/scrollable-container.vue";
 import PageCard from "@/components/settings/page-card.vue";
 import {
-  classList,
-  classFilter,
-  possibleTimetableGroups,
-  timetableGroups,
-  theme,
-} from "../store";
-import { language } from "../i18n";
-
-// eslint-disable-next-line no-undef
-const gitHash = GITVERSION;
+  FilterIcon,
+  PaletteIcon,
+  InfoIcon,
+  ChevronLeft,
+} from "lucide-vue-next";
 </script>
 
 <template>
   <ScrollableContainer class="settings">
-    <!-- Filtering -->
-    <h2>{{ $t("settings.heading.filtering") }}</h2>
-    <p>{{ $t("settings.text.filtering") }}</p>
-    <select v-model="classFilter">
-      <option value="none">{{ $t("timetable.setup.prompt") }}</option>
-      <option
-        v-for="option in classList.length > 0 ? classList : [classFilter]"
-        :value="option"
-        :key="option"
-      >
-        {{ option }}
-      </option>
-      <option value="other">{{ $t("settings.other") }}</option>
-    </select>
-    <div class="spacer"></div>
-
-    <!-- Timetable Groups -->
-    <h2>{{ $t("settings.heading.timetableGroups") }}</h2>
-    <p>{{ $t("settings.text.timetableGroups") }}</p>
-    <select v-model="timetableGroups" multiple>
-      <option value="none">{{ $t("settings.none") }}</option>
-      <option
-        v-for="option in possibleTimetableGroups"
-        :value="option"
-        :key="option"
-      >
-        {{ option }}
-      </option>
-    </select>
-    <div class="spacer"></div>
-
-    <!-- Language -->
-    <h2>{{ $t("settings.heading.language") }}</h2>
-    <p>{{ $t("settings.text.language") }}</p>
-    <select v-model="language">
-      <option
-        v-for="locale in $i18n.availableLocales"
-        :key="`locale-${locale}`"
-        :value="locale"
-      >
-        {{ locale }}
-      </option>
-    </select>
-    <div class="spacer"></div>
-
-    <!-- Theme -->
-    <h2>{{ $t("settings.heading.theme") }}</h2>
-    <p>{{ $t("settings.text.theme") }}</p>
-    <select v-model="theme">
-      <option value="auto">{{ $t("settings.theme.auto") }}</option>
-      <option value="dark">{{ $t("settings.theme.dark") }}</option>
-      <option value="light">{{ $t("settings.theme.light") }}</option>
-    </select>
-    <div class="spacer"></div>
-
-    <!-- About -->
-    <h2>{{ $t("settings.heading.about") }}</h2>
-    <p>{{ $t("settings.text.about") }}</p>
-    <div class="spacer"></div>
-    <p class="gray">{{ $t("settings.version") }}: {{ gitHash }}</p>
+    <div class="wrapper" v-if="$route.name == 'title.settings.main'">
+      <div class="cards">
+        <PageCard
+          :name="$t('title.settings.filtering')"
+          :icon="FilterIcon"
+          route="settings/filtering"
+        />
+        <PageCard
+          :name="$t('title.settings.appearance')"
+          :icon="PaletteIcon"
+          route="settings/appearance"
+        />
+        <PageCard
+          :name="$t('title.settings.about')"
+          :icon="InfoIcon"
+          route="settings/about"
+        />
+      </div>
+    </div>
+    <div class="subroute" v-else>
+      <RouterLink to="/settings" class="back">
+        <ChevronLeft />
+        <span>{{ $t("settings.back") }}</span>
+      </RouterLink>
+      <RouterView />
+    </div>
   </ScrollableContainer>
 </template>
 
 <style scoped>
 .settings {
-  padding: 15px 10px 0px 10px;
+  padding: 20px 10px 0px 10px;
 }
 
-h2 {
-  margin: 0px;
+.wrapper {
+  flex-direction: column;
+  align-items: center;
+  display: flex;
 }
 
-p {
-  margin: 5px 0px;
+.cards {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 500px;
+  gap: 10px;
 }
 
-select {
-  padding: 5px 0px;
-  margin: 5px 0px;
-  outline: none;
-  border: 2px solid var(--element-border-input);
-  border-radius: 5px;
-  background-color: var(--element-color);
-  transition: 0.2s;
-  transition-property: background-color border-color;
-  color: var(--text-color);
-}
-
-select:hover {
-  background-color: var(--element-color-hover);
-}
-
-select:focus {
-  border-color: var(--element-border-focus);
-}
-
-select[multiple] {
-  min-width: 90px;
-}
-
-.spacer {
-  display: block;
-  margin: 15px 0;
-}
-
-.gray {
-  opacity: 0.5;
+.back {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  width: max-content;
+  text-decoration: unset;
+  color: unset;
+  margin-bottom: 8px;
 }
 </style>