feat: ✨ Add preferences page

pages/preferences/[page].vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="md:px-8 px-4 py-2 max-w-7xl mx-auto w-full">
+        <h1 class="scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl capitalize">
+            {{ page }}
+        </h1>   
+        <div class="grid grid-cols-1 2xl:grid-cols-2 gap-4 mt-6">
+            <template v-for="[id, setting] of settingEntries">
+                <SwitchPreference v-if="setting.type === SettingType.Boolean" :setting="(setting as BooleanSetting)" @update:setting="updateSetting(id, setting)" />
+            </template>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import SwitchPreference from "~/components/preferences/switch.vue";
+import {
+    type BooleanSetting,
+    type Setting,
+    type SettingIds,
+    type SettingPages,
+    SettingType,
+} from "~/settings.ts";
+
+definePageMeta({
+    layout: "app",
+});
+
+const route = useRoute();
+
+const page = route.params.page as SettingPages;
+const settingEntries = computed(() =>
+    (Object.entries(settings.value) as [SettingIds, Setting][]).filter(
+        ([, s]) => s.page === page && !s.notImplemented,
+    ),
+);
+
+const updateSetting = (id: SettingIds, setting: Setting) => {
+    settings.value = {
+        ...settings.value,
+        [id]: setting,
+    };
+};
+</script>

pages/preferences/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+    layout: "app",
+});
+</script>