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

legalconsenthub/app/app.vue

@@ -1,5 +1,5 @@
 <template>
-  <UApp>
+  <UApp :locale="locales[locale]">
     <NuxtLoadingIndicator />
 
     <NuxtLayout>
@@ -11,9 +11,14 @@
 </template>
 
 <script setup lang="ts">
+import * as locales from '@nuxt/ui/locale'
+
+const { locale } = useI18n()
 const colorMode = useColorMode()
 
 const color = computed(() => (colorMode.value === 'dark' ? '#111827' : 'white'))
+const lang = computed(() => locales[locale.value].code)
+const dir = computed(() => locales[locale.value].dir)
 
 useHead({
   meta: [
@@ -23,7 +28,8 @@ useHead({
   ],
   link: [{ rel: 'icon', href: '/favicon.ico' }],
   htmlAttrs: {
-    lang: 'en'
+    lang,
+    dir
   }
 })
 

legalconsenthub/app/components/DeleteModal.vue

@@ -1,7 +1,7 @@
 <template>
   <UModal :open="isOpen" :title="$t('applicationForms.deleteTitle')" @update:open="$emit('update:isOpen', $event)">
     <template #body>
-      <span v-html="$t('applicationForms.deleteConfirm', { name: applicationFormToDelete.name })"></span>
+      {{ $t('applicationForms.deleteConfirm', { name: applicationFormToDelete.name }) }}
     </template>
     <template #footer>
       <UButton :label="$t('common.cancel')" color="neutral" variant="outline" @click="$emit('update:isOpen', false)" />

legalconsenthub/app/components/UserMenu.vue

@@ -14,18 +14,11 @@
       variant="ghost"
       block
       :square="collapsed"
-      class="data-[state=open]:bg-(--ui-bg-elevated)"
+      class="data-[state=open]:bg-elevated"
       :ui="{
         trailingIcon: 'text-(--ui-text-dimmed)'
       }"
     />
-
-    <template #chip-leading="{ item }">
-      <span
-        :style="{ '--chip': `var(--color-${(item as any).chip}-400)` }"
-        class="ms-0.5 size-2 rounded-full bg-(--chip)"
-      />
-    </template>
   </UDropdownMenu>
 </template>
 
@@ -37,30 +30,6 @@ defineProps<{
   collapsed?: boolean
 }>()
 
-const colorMode = useColorMode()
-const appConfig = useAppConfig()
-
-const colors = [
-  'red',
-  'orange',
-  'amber',
-  'yellow',
-  'lime',
-  'green',
-  'emerald',
-  'teal',
-  'cyan',
-  'sky',
-  'blue',
-  'indigo',
-  'violet',
-  'purple',
-  'fuchsia',
-  'pink',
-  'rose'
-]
-const neutrals = ['slate', 'gray', 'zinc', 'neutral', 'stone']
-
 const userStore = useUserStore()
 const { user: keyCloakUser } = storeToRefs(userStore)
 
@@ -82,10 +51,6 @@ const items = computed<DropdownMenuItem[][]>(() => [
     }
   ],
   [
-    {
-      label: $t('user.profile'),
-      icon: 'i-lucide-user'
-    },
     {
       label: $t('user.administration'),
       icon: 'i-lucide-shield',
@@ -97,84 +62,6 @@ const items = computed<DropdownMenuItem[][]>(() => [
       to: '/settings'
     }
   ],
-  [
-    {
-      label: $t('user.theme'),
-      icon: 'i-lucide-palette',
-      children: [
-        {
-          label: $t('user.themePrimary'),
-          slot: 'chip',
-          chip: appConfig.ui.colors.primary,
-          content: {
-            align: 'center',
-            collisionPadding: 16
-          },
-          children: colors.map((color) => ({
-            label: color,
-            chip: color,
-            slot: 'chip',
-            checked: appConfig.ui.colors.primary === color,
-            type: 'checkbox',
-            onSelect: (e) => {
-              e.preventDefault()
-              appConfig.ui.colors.primary = color
-            }
-          }))
-        },
-        {
-          label: $t('user.themeNeutral'),
-          slot: 'chip',
-          chip: appConfig.ui.colors.neutral,
-          content: {
-            align: 'end',
-            collisionPadding: 16
-          },
-          children: neutrals.map((color) => ({
-            label: color,
-            chip: color,
-            slot: 'chip',
-            type: 'checkbox',
-            checked: appConfig.ui.colors.neutral === color,
-            onSelect: (e) => {
-              e.preventDefault()
-              appConfig.ui.colors.neutral = color
-            }
-          }))
-        }
-      ]
-    },
-    {
-      label: $t('user.appearance'),
-      icon: 'i-lucide-sun-moon',
-      children: [
-        {
-          label: $t('user.light'),
-          icon: 'i-lucide-sun',
-          type: 'checkbox',
-          checked: colorMode.value === 'light',
-          onSelect(e: Event) {
-            e.preventDefault()
-            colorMode.preference = 'light'
-          }
-        },
-        {
-          label: $t('user.dark'),
-          icon: 'i-lucide-moon',
-          type: 'checkbox',
-          checked: colorMode.value === 'dark',
-          onUpdateChecked(checked: boolean) {
-            if (checked) {
-              colorMode.preference = 'dark'
-            }
-          },
-          onSelect(e: Event) {
-            e.preventDefault()
-          }
-        }
-      ]
-    }
-  ],
   [
     {
       label: $t('user.logout'),

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>