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
@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import axios from 'axios'
+import type { SettingField } from "@/Types/types"
+
+const props = defineProps<{
+    fields: SettingField[],
+    description?: string | null
+}>()
+
+const values = reactive(
+    Object.fromEntries(props.fields.map(f => [f.key, f.value]))
+)
+const saving = ref(false)
+const saved  = ref(false)
+const error  = ref(false)
+
+async function save() {
+    saving.value = true
+    error.value  = false
+    try {
+        await axios.patch('/settings', { settings: values })
+        saved.value = true
+        setTimeout(() => saved.value = false, 3000)
+    } catch {
+        error.value = true
+    } finally {
+        saving.value = false
+    }
+}
+</script>
+
+<template>
+    <v-form @submit.prevent="save">
+        <small v-if="description" class="text-body-2 text-medium-emphasis mb-3 d-block">
+            {{ description }}
+        </small>
+
+        <template v-for="field in fields" :key="field.key">
+
+            <v-select
+                v-if="field.type === 'select'"
+                v-model="values[field.key]"
+                :label="field.label"
+                :items="field.options"
+                item-title="label"
+                item-value="value"
+                variant="outlined"
+                density="comfortable"
+                class="mb-2"
+            />
+
+            <v-text-field
+                v-else-if="field.type === 'text'"
+                v-model="values[field.key]"
+                :label="field.label"
+                variant="outlined"
+                density="comfortable"
+                class="mb-2"
+            />
+
+            <v-checkbox
+                v-else-if="field.type === 'checkbox'"
+                v-model="values[field.key]"
+                :label="field.label"
+                color="primary"
+                density="comfortable"
+                hide-details
+                class="mb-2"
+            />
+
+            <v-select
+                v-else-if="field.type === 'multiselect'"
+                v-model="values[field.key]"
+                :label="field.label"
+                :items="field.options"
+                item-title="label"
+                item-value="value"
+                variant="outlined"
+                density="comfortable"
+                chips
+                multiple
+                closable-chips
+                clearable
+                class="mb-2"
+            />
+
+        </template>
+
+        <v-divider class="my-4" />
+
+        <div class="d-flex align-center gap-3">
+            <v-btn
+                type="submit"
+                color="primary"
+                variant="elevated"
+                :loading="saving"
+                min-width="140"
+            >
+                Save settings
+            </v-btn>
+
+            <v-fade-transition>
+                <div v-if="saved" class="d-flex align-center gap-1 text-success">
+                    <v-icon size="18">mdi-check-circle</v-icon>
+                    <span class="text-body-2">Saved</span>
+                </div>
+            </v-fade-transition>
+
+            <v-fade-transition>
+                <div v-if="error" class="d-flex align-center gap-1 text-error">
+                    <v-icon size="18">mdi-alert-circle</v-icon>
+                    <span class="text-body-2">Something went wrong</span>
+                </div>
+            </v-fade-transition>
+        </div>
+    </v-form>
+</template>
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-defineProps<{
-    title?: string;
-    blurb?: string;
-}>();
+withDefaults(defineProps<{
+    title: string,
+    wide?: boolean,
+    blurb?: string
+}>(), { wide: false })
 </script>

 <template>
-    <div class="glass-box glass glass-border">
+    <div class="glass glass-border glass-box" :class="{ 'glass-box--wide': wide }">
        <h2 v-if="title">{{ title }}</h2>
        <p v-if="blurb">{{ blurb }}</p>
        <slot />
@@ -21,6 +22,10 @@ defineProps<{
    margin: 2em;
 }

+.glass-box--wide {
+    width: clamp(280px, 100%, 960px);
+}
+
 h2 {
    font-size: 2rem;
    text-align: center;