feat(#22): Add settings page with language switcher

legalconsenthub/app/pages/settings.vue

@@ -0,0 +1,135 @@
+<template>
+  <UDashboardPanel id="settings">
+    <template #header>
+      <UDashboardNavbar :title="$t('settings.title')">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+      </UDashboardNavbar>
+    </template>
+
+    <template #body>
+      <div class="flex flex-col gap-6 w-full lg:max-w-4xl mx-auto p-6">
+        <!-- Language Section -->
+        <UCard>
+          <template #header>
+            <div>
+              <h3 class="text-lg font-semibold text-highlighted">{{ $t('settings.language.title') }}</h3>
+              <p class="text-sm text-muted mt-1">{{ $t('settings.language.description') }}</p>
+            </div>
+          </template>
+          <ULocaleSelect
+            :model-value="locale"
+            :locales="[de, en]"
+            class="w-full max-w-xs"
+            size="md"
+            @update:model-value="handleLocaleChange"
+          />
+        </UCard>
+
+        <!-- Appearance Section -->
+        <UCard>
+          <template #header>
+            <div>
+              <h3 class="text-lg font-semibold text-highlighted">{{ $t('settings.appearance.title') }}</h3>
+              <p class="text-sm text-muted mt-1">{{ $t('settings.appearance.description') }}</p>
+            </div>
+          </template>
+          <URadioGroup v-model="selectedColorMode" :items="colorModeOptions" class="gap-4" />
+        </UCard>
+
+        <!-- Theme Colors Section -->
+        <UCard>
+          <template #header>
+            <div>
+              <h3 class="text-lg font-semibold text-highlighted">{{ $t('settings.theme.title') }}</h3>
+              <p class="text-sm text-muted mt-1">{{ $t('settings.theme.description') }}</p>
+            </div>
+          </template>
+
+          <div class="space-y-6">
+            <!-- Primary Color -->
+            <div>
+              <h4 class="text-sm font-medium text-highlighted mb-3">{{ $t('settings.theme.primary') }}</h4>
+              <div class="grid grid-cols-10 gap-2">
+                <button
+                  v-for="color in colors"
+                  :key="color"
+                  type="button"
+                  :class="[
+                    'w-10 h-10 rounded-md transition-all',
+                    appConfig.ui.colors.primary === color
+                      ? 'ring-2 ring-offset-2 ring-offset-background'
+                      : 'hover:scale-110'
+                  ]"
+                  :style="{
+                    backgroundColor: `var(--color-${color}-500)`,
+                    '--tw-ring-color': `var(--color-${color}-500)`
+                  }"
+                  @click="appConfig.ui.colors.primary = color"
+                />
+              </div>
+            </div>
+          </div>
+        </UCard>
+      </div>
+    </template>
+  </UDashboardPanel>
+</template>
+
+<script setup lang="ts">
+import { de, en } from '@nuxt/ui/locale'
+
+definePageMeta({
+  layout: 'default'
+})
+
+const { t: $t, locale, setLocale } = useI18n()
+const colorMode = useColorMode()
+const appConfig = useAppConfig()
+
+const colors = [
+  'red',
+  'orange',
+  'amber',
+  'yellow',
+  'lime',
+  'green',
+  'emerald',
+  'teal',
+  'cyan',
+  'sky',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'fuchsia',
+  'pink'
+]
+
+function handleLocaleChange(newLocale: string | undefined) {
+  if (newLocale) {
+    setLocale(newLocale as 'de' | 'en')
+  }
+}
+
+const colorModeOptions = computed(() => [
+  {
+    value: 'light',
+    label: $t('settings.appearance.light'),
+    icon: 'i-lucide-sun'
+  },
+  {
+    value: 'dark',
+    label: $t('settings.appearance.dark'),
+    icon: 'i-lucide-moon'
+  }
+])
+
+const selectedColorMode = computed({
+  get: () => colorMode.value,
+  set: (value) => {
+    colorMode.preference = value as 'light' | 'dark'
+  }
+})
+</script>