Added native os notifications

2026-07-02 00:33:28 +10:00
parent 84379baf6a
commit 027437dc9b
13 changed files with 451 additions and 117 deletions
@@ -2,9 +2,9 @@
 import MainLayout from "@/Layouts/MainLayout.vue"
 import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue"
 import { Head } from "@inertiajs/vue3"
-import { ref, watch } from "vue"
+import { computed, ref, watch } from "vue"
 import type { SettingField } from "@/Types/types"
-import GeneralSettings from "@/Pages/Settings/GeneralSettings.vue"
+import CategorySettingsForm from "@/Components/CategorySettingsForm.vue"
 import FollowerSettings from "@/Pages/Settings/FollowerSettings.vue"

 defineOptions({ layout: MainLayout })
@@ -17,28 +17,69 @@ const props = defineProps<{

 const tab = ref(props.defaultTab)

+function slugify(name: string) {
+    return name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/(^-|-$)/g, '')
+}
+
+const groupedFields = computed(() =>
+    props.fields.reduce((groups: Record<string, SettingField[]>, field) => {
+        const cat = field.category ?? 'General'
+        ;(groups[cat] ??= []).push(field)
+        return groups
+    }, {} as Record<string, SettingField[]>)
+)
+
+const categoryTabs = computed(() =>
+    Object.entries(groupedFields.value).map(([name, fields]) => ({
+        name,
+        slug: slugify(name),
+        description: props.categories[name] ?? null,
+        fields,
+    }))
+)
+
 watch(tab, (value) => {
-    const path = value === 'general' ? '/settings' : `/settings/${value}`
+    const path = value === props.defaultTab ? '/settings' : `/settings/${value}`
    window.history.replaceState(window.history.state, '', path)
 })
 </script>

 <template>
    <Head title="Settings" />
-    <GlassBox title="Your Settings">
-        <v-tabs v-model="tab" class="mb-4">
-            <v-tab value="general">General</v-tab>
-            <v-tab value="followers">Followers</v-tab>
-        </v-tabs>
+    <GlassBox wide title="Your Settings">
+        <v-row>
+            <v-col cols="12" md="3">
+                <v-tabs
+                    v-model="tab"
+                    direction="vertical"
+                    color="primary"
+                >
+                    <v-tab
+                        v-for="cat in categoryTabs"
+                        :key="cat.slug"
+                        :value="cat.slug"
+                        class="justify-start"
+                    >
+                        {{ cat.name }}
+                    </v-tab>
+                    <v-tab value="followers" class="justify-start">Followers</v-tab>
+                </v-tabs>
+            </v-col>

-        <v-window v-model="tab">
-            <v-window-item value="general">
-                <GeneralSettings :fields="fields" :categories="categories" />
-            </v-window-item>
+            <v-col cols="12" md="9">
+                <v-window v-model="tab">
+                    <v-window-item v-for="cat in categoryTabs" :key="cat.slug" :value="cat.slug">
+                        <CategorySettingsForm :fields="cat.fields" :description="cat.description" />
+                    </v-window-item>

-            <v-window-item value="followers">
-                <FollowerSettings />
-            </v-window-item>
-        </v-window>
+                    <v-window-item value="followers">
+                        <FollowerSettings />
+                    </v-window-item>
+                </v-window>
+            </v-col>
+        </v-row>
    </GlassBox>
 </template>