🚧 💄 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/components/settings/page-card.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { RouterLink } from "vue-router";
+
+defineProps({
+  name: {
+    required: true,
+  },
+  icon: {
+    required: true,
+  },
+  route: {
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <RouterLink :to="route" class="card">
+    <component :is="icon" /><span>{{ name }}</span>
+  </RouterLink>
+</template>
+
+<style scoped>
+.card {
+  text-decoration: unset;
+  color: unset;
+  display: flex;
+  background-color: var(--element-color);
+  padding: 15px;
+  border-radius: 8px;
+  font-size: 18px;
+  gap: 15px;
+  transition: 0.2s;
+  cursor: pointer;
+  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
+}
+
+.card:hover {
+  background-color: var(--element-color-hover);
+}
+</style>

src/components/settings/radio-buttons.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { CircleIcon, CheckCircleIcon } from "lucide-vue-next";
+
+defineProps(["options", "values", "modelValue"]);
+defineEmits(["update:modelValue"]);
+</script>
+
+<template>
+  <div
+    class="button"
+    v-for="(value, index) in values"
+    :key="value"
+    @click="$emit('update:modelValue', value)"
+  >
+    <CheckCircleIcon v-if="modelValue == value" />
+    <CircleIcon v-else />
+
+    <span class="text">{{ options[index] }}</span>
+  </div>
+</template>
+
+<style scoped>
+.button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 5px;
+  cursor: pointer;
+}
+</style>

src/components/titlebar-element.vue

@@ -9,8 +9,8 @@ const router = useRouter();
 const routeName = computed(() => route.name);
 function goBack() {
   if (!routeName.value.startsWith("title.settings")) return;
-  if (lastDataRoute.value.name) router.push(lastDataRoute.value.path);
-  else router.push("/timetable");
+  if (lastDataRoute.value) router.push(lastDataRoute.value.path);
+  else router.push("/");
 }
 </script>