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

resources/js/layouts/settings/Layout.vue

@@ -1,9 +1,14 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
+import {
+    GitBranch,
+    KeyRound,
+    Palette,
+    Settings2,
+    ShieldCheck,
+    UserRound,
+} from 'lucide-vue-next';
 import { computed } from 'vue';
-import Heading from '@/components/Heading.vue';
-import { Button } from '@/components/ui/button';
-import { Separator } from '@/components/ui/separator';
 import { useCurrentUrl } from '@/composables/useCurrentUrl';
 import { useLocalization } from '@/composables/useLocalization';
 import { toUrl } from '@/lib/utils';
@@ -19,22 +24,27 @@ const sidebarNavItems = computed<NavItem[]>(() => [
     {
         title: t('navigation.profile'),
         href: editProfile(),
+        icon: UserRound,
     },
     {
         title: t('navigation.security'),
         href: editSecurity(),
+        icon: ShieldCheck,
     },
     {
         title: t('navigation.gitConnections'),
         href: editGitConnections(),
+        icon: GitBranch,
     },
     {
         title: t('navigation.applications'),
         href: editApplications(),
+        icon: KeyRound,
     },
     {
         title: t('navigation.appearance'),
         href: editAppearance(),
+        icon: Palette,
     },
 ]);
 
@@ -42,47 +52,60 @@ const { isCurrentOrParentUrl } = useCurrentUrl();
 </script>
 
 <template>
-    <div class="px-4 py-6">
-        <Heading
-            :title="t('navigation.settings')"
-            :description="t('navigation.settingsDescription')"
-        />
+    <div
+        class="gap-page md:p-page mx-auto flex w-full min-w-0 max-w-6xl flex-1 flex-col p-4"
+    >
+        <header class="gap-stack grid min-w-0">
+            <div class="text-primary flex items-center gap-2">
+                <Settings2 class="size-4" aria-hidden="true" />
+                <p class="text-label text-muted-foreground uppercase">
+                    {{ t('settings.eyebrow') }}
+                </p>
+            </div>
+            <h1 class="text-headline-mobile md:text-headline break-words">
+                {{ t('navigation.settings') }}
+            </h1>
+            <p class="text-muted-foreground max-w-2xl">
+                {{ t('navigation.settingsDescription') }}
+            </p>
+        </header>
 
-        <div class="flex min-w-0 flex-col gap-6 lg:flex-row lg:gap-12">
-            <aside class="w-full min-w-0 lg:w-52 lg:shrink-0">
+        <div
+            class="bg-card grid min-w-0 overflow-hidden rounded-xl border shadow-sm lg:grid-cols-[15rem_minmax(0,1fr)]"
+        >
+            <aside
+                class="bg-muted/35 border-b p-3 lg:border-b-0 lg:border-r lg:p-4"
+            >
                 <nav
-                    class="flex gap-1 overflow-x-auto lg:flex-col"
+                    class="flex gap-2 overflow-x-auto pb-1 lg:flex-col lg:overflow-visible lg:pb-0"
                     :aria-label="t('navigation.settings')"
                 >
-                    <Button
+                    <Link
                         v-for="item in sidebarNavItems"
                         :key="toUrl(item.href)"
-                        variant="ghost"
+                        :href="item.href"
+                        :aria-current="
+                            isCurrentOrParentUrl(item.href) ? 'page' : undefined
+                        "
                         :class="[
-                            'shrink-0 justify-start lg:w-full',
-                            { 'bg-muted': isCurrentOrParentUrl(item.href) },
+                            'text-body focus-visible:ring-ring/40 flex min-h-11 shrink-0 items-center gap-2 rounded-lg border px-3 font-medium outline-none transition-colors focus-visible:ring-2 lg:w-full',
+                            isCurrentOrParentUrl(item.href)
+                                ? 'border-primary/25 bg-accent text-accent-foreground shadow-xs'
+                                : 'text-muted-foreground hover:border-border hover:bg-background hover:text-foreground border-transparent',
                         ]"
-                        as-child
                     >
-                        <Link
-                            :href="item.href"
-                            :aria-current="
-                                isCurrentOrParentUrl(item.href)
-                                    ? 'page'
-                                    : undefined
-                            "
-                        >
-                            <component :is="item.icon" class="h-4 w-4" />
-                            {{ item.title }}
-                        </Link>
-                    </Button>
+                        <component
+                            :is="item.icon"
+                            class="size-4 shrink-0"
+                            aria-hidden="true"
+                        />
+                        <span class="whitespace-nowrap">{{ item.title }}</span>
+                    </Link>
                 </nav>
             </aside>
 
-            <Separator class="lg:hidden" />
-
-            <div class="min-w-0 flex-1 md:max-w-2xl">
-                <section class="max-w-xl space-y-12">
+            <div class="min-w-0 p-4 sm:p-6 lg:p-8">
+                <section class="mx-auto grid max-w-3xl gap-8">
                     <slot />
                 </section>
             </div>