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

resources/js/pages/settings/Appearance.vue

@@ -1,35 +1,42 @@
 <script setup lang="ts">
 import { Head } from '@inertiajs/vue3';
 import AppearanceTabs from '@/components/AppearanceTabs.vue';
-import Heading from '@/components/Heading.vue';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { useLocalization } from '@/composables/useLocalization';
 import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/settings/Layout.vue';
 import { edit } from '@/routes/appearance/index';
 import type { BreadcrumbItem } from '@/types';
+import { computed } from 'vue';
 
-const breadcrumbItems: BreadcrumbItem[] = [
+const { t } = useLocalization();
+const breadcrumbItems = computed<BreadcrumbItem[]>(() => [
     {
-        title: 'Appearance settings',
+        title: t('navigation.appearance'),
         href: edit(),
     },
-];
+]);
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbItems">
-        <Head title="Appearance settings" />
-
-        <h1 class="sr-only">Appearance settings</h1>
+        <Head :title="t('appearance.title')" />
 
         <SettingsLayout>
-            <div class="space-y-6">
-                <Heading
-                    variant="small"
-                    title="Appearance settings"
-                    description="Update your account's appearance settings"
-                />
-                <AppearanceTabs />
-            </div>
+            <Card class="gap-0 overflow-hidden rounded-xl py-0 shadow-none">
+                <CardHeader class="gap-stack border-b p-5 sm:p-6">
+                    <h2 class="text-title">{{ t('appearance.title') }}</h2>
+                    <p class="text-muted-foreground">
+                        {{ t('appearance.description') }}
+                    </p>
+                </CardHeader>
+                <CardContent class="gap-column grid p-5 sm:p-6">
+                    <AppearanceTabs />
+                    <p class="text-caption text-muted-foreground">
+                        {{ t('appearance.persistenceHint') }}
+                    </p>
+                </CardContent>
+            </Card>
         </SettingsLayout>
     </AppLayout>
 </template>