feat(KAN-36): rebuild profile and appearance settings

2026-09-14 17:36:41 +02:00
parent 2409c3b18f
commit 1377ee8510
11 changed files with 1004 additions and 322 deletions
@@ -1,39 +1,80 @@
 <script setup lang="ts">
-import { Monitor, Moon, Sun } from 'lucide-vue-next';
+import { Check, Monitor, Moon, Sun } from 'lucide-vue-next';
+import { computed } from 'vue';
 import { useAppearance } from '@/composables/useAppearance';
 import { useLocalization } from '@/composables/useLocalization';

 const { appearance, updateAppearance } = useAppearance();
 const { t } = useLocalization();

-const tabs = [
-    { value: 'light', Icon: Sun, label: 'appearance.light' },
-    { value: 'dark', Icon: Moon, label: 'appearance.dark' },
-    { value: 'system', Icon: Monitor, label: 'appearance.system' },
-] as const;
+const tabs = computed(() => [
+    {
+        value: 'light' as const,
+        Icon: Sun,
+        label: t('appearance.light'),
+        description: t('appearance.lightDescription'),
+    },
+    {
+        value: 'dark' as const,
+        Icon: Moon,
+        label: t('appearance.dark'),
+        description: t('appearance.darkDescription'),
+    },
+    {
+        value: 'system' as const,
+        Icon: Monitor,
+        label: t('appearance.system'),
+        description: t('appearance.systemDescription'),
+    },
+]);
 </script>

 <template>
-    <div
-        role="group"
-        :aria-label="t('appearance.label')"
-        class="border-border bg-muted inline-flex max-w-full gap-1 rounded-lg border p-1"
-    >
-        <button
-            v-for="{ value, Icon, label } in tabs"
-            :key="value"
-            type="button"
-            :aria-pressed="appearance === value"
-            @click="updateAppearance(value)"
-            :class="[
-                'min-h-control text-body focus-visible:outline-ring flex min-w-0 items-center justify-center gap-1.5 rounded-md px-3 font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2',
-                appearance === value
-                    ? 'bg-primary text-primary-foreground'
-                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
-            ]"
-        >
-            <component :is="Icon" class="size-4 shrink-0" aria-hidden="true" />
-            <span>{{ t(label) }}</span>
-        </button>
-    </div>
+    <fieldset class="min-w-0">
+        <legend class="sr-only">{{ t('appearance.label') }}</legend>
+        <div class="grid min-w-0 gap-3 sm:grid-cols-3">
+            <label
+                v-for="{ value, Icon, label, description } in tabs"
+                :key="value"
+                class="relative min-w-0"
+            >
+                <input
+                    type="radio"
+                    name="appearance"
+                    :value="value"
+                    :checked="appearance === value"
+                    :aria-describedby="`appearance-${value}-description`"
+                    class="peer sr-only"
+                    @change="updateAppearance(value)"
+                />
+                <span
+                    class="peer-checked:border-primary peer-checked:bg-accent/50 peer-focus-visible:ring-ring/40 gap-stack bg-background hover:border-primary/50 flex h-full min-h-32 cursor-pointer flex-col rounded-lg border p-4 transition-colors peer-focus-visible:ring-2"
+                >
+                    <span class="flex items-center justify-between gap-3">
+                        <span
+                            class="bg-accent text-primary flex size-10 items-center justify-center rounded-lg"
+                        >
+                            <component
+                                :is="Icon"
+                                class="size-5"
+                                aria-hidden="true"
+                            />
+                        </span>
+                        <Check
+                            v-if="appearance === value"
+                            class="text-primary size-5"
+                            aria-hidden="true"
+                        />
+                    </span>
+                    <span class="font-semibold">{{ label }}</span>
+                    <span
+                        :id="`appearance-${value}-description`"
+                        class="text-caption text-muted-foreground"
+                    >
+                        {{ description }}
+                    </span>
+                </span>
+            </label>
+        </div>
+    </fieldset>
 </template>