From 4cb0589a6459aea7aad976f5d49f6d65ef061776 Mon Sep 17 00:00:00 2001
From: Denis Lugowski <denis.lugowski@gmail.com>
Date: Sat, 22 Nov 2025 08:56:15 +0100
Subject: [PATCH] feat(#22): Add settings page with language switcher

---
 CLAUDE.md                                     |   2 +
 legalconsenthub/app/app.vue                   |  10 +-
 .../app/components/DeleteModal.vue            |   2 +-
 legalconsenthub/app/components/UserMenu.vue   | 115 +--------------
 legalconsenthub/app/pages/settings.vue        | 135 ++++++++++++++++++
 legalconsenthub/i18n/locales/de.json          |  30 ++--
 legalconsenthub/i18n/locales/en.json          |  30 ++--
 legalconsenthub/nuxt.config.ts                |   1 +
 8 files changed, 190 insertions(+), 135 deletions(-)
 create mode 100644 legalconsenthub/app/pages/settings.vue

diff --git a/CLAUDE.md b/CLAUDE.md
index 9a220dd..66d06c5 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -231,6 +231,8 @@ legalconsenthub/
 │   │   ├── permissions.global.ts       # Authorization check
 │   │   └── refreshToken.global.ts      # Token refresh logic
 │   ├── pages/                          # Route pages
+│   │   ├── settings.vue               # User settings page (language, theme, appearance)
+│   │   ├── administration.vue         # Admin template editor
 │   │   ├── application-forms/
 │   │   ├── callback.vue               # OAuth callback
 │   │   ├── create.vue
diff --git a/legalconsenthub/app/app.vue b/legalconsenthub/app/app.vue
index 57b60a6..df7550f 100644
--- a/legalconsenthub/app/app.vue
+++ b/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
   }
 })
 
diff --git a/legalconsenthub/app/components/DeleteModal.vue b/legalconsenthub/app/components/DeleteModal.vue
index 29594fb..e8658c0 100644
--- a/legalconsenthub/app/components/DeleteModal.vue
+++ b/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)" />
diff --git a/legalconsenthub/app/components/UserMenu.vue b/legalconsenthub/app/components/UserMenu.vue
index b85e67f..752dbbf 100644
--- a/legalconsenthub/app/components/UserMenu.vue
+++ b/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'),
diff --git a/legalconsenthub/app/pages/settings.vue b/legalconsenthub/app/pages/settings.vue
new file mode 100644
index 0000000..8976497
--- /dev/null
+++ b/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>
diff --git a/legalconsenthub/i18n/locales/de.json b/legalconsenthub/i18n/locales/de.json
index e575e66..730c569 100644
--- a/legalconsenthub/i18n/locales/de.json
+++ b/legalconsenthub/i18n/locales/de.json
@@ -6,7 +6,7 @@
     "noPermission": "Keine Berechtigung",
     "noPermissionDescription": "Sie haben keine Berechtigung zum Erstellen von Anträgen.",
     "backToOverview": "Zurück zur Übersicht",
-    "deleteConfirm": "Möchten Sie wirklich den Mitbestimmungsantrag <strong>{name}</strong> löschen?",
+    "deleteConfirm": "Möchten Sie wirklich den Mitbestimmungsantrag \"{name}\" löschen?",
     "deleteTitle": "Mitbestimmungsantrag löschen",
     "lastEditedBy": "Zuletzt bearbeitet von",
     "createdBy": "Erstellt von",
@@ -102,16 +102,28 @@
     "accessDenied": "Zugriff verweigert"
   },
   "user": {
-    "profile": "Profil",
     "administration": "Administration",
     "settings": "Einstellungen",
-    "logout": "Abmelden",
-    "theme": "Design",
-    "themePrimary": "Primärfarbe",
-    "themeNeutral": "Neutralfarbe",
-    "appearance": "Erscheinungsbild",
-    "light": "Hell",
-    "dark": "Dunkel"
+    "logout": "Abmelden"
+  },
+  "settings": {
+    "title": "Einstellungen",
+    "language": {
+      "title": "Sprache",
+      "description": "Wählen Sie Ihre bevorzugte Sprache"
+    },
+    "appearance": {
+      "title": "Erscheinungsbild",
+      "description": "Wählen Sie zwischen hellem und dunklem Modus",
+      "light": "Hell",
+      "dark": "Dunkel"
+    },
+    "theme": {
+      "title": "Farbschema",
+      "description": "Passen Sie die Farben der Anwendung an",
+      "primary": "Primärfarbe",
+      "neutral": "Neutralfarbe"
+    }
   },
   "organization": {
     "current": "Aktuelle Organisation"
diff --git a/legalconsenthub/i18n/locales/en.json b/legalconsenthub/i18n/locales/en.json
index 80389c6..15dd78d 100644
--- a/legalconsenthub/i18n/locales/en.json
+++ b/legalconsenthub/i18n/locales/en.json
@@ -6,7 +6,7 @@
     "noPermission": "No Permission",
     "noPermissionDescription": "You do not have permission to create applications.",
     "backToOverview": "Back to Overview",
-    "deleteConfirm": "Do you really want to delete the co-determination application <strong>{name}</strong>?",
+    "deleteConfirm": "Do you really want to delete the co-determination application \"{name}\"?",
     "deleteTitle": "Delete Co-determination Application",
     "lastEditedBy": "Last edited by",
     "createdBy": "Created by",
@@ -102,16 +102,28 @@
     "accessDenied": "Access denied"
   },
   "user": {
-    "profile": "Profile",
     "administration": "Administration",
     "settings": "Settings",
-    "logout": "Log out",
-    "theme": "Theme",
-    "themePrimary": "Primary Color",
-    "themeNeutral": "Neutral Color",
-    "appearance": "Appearance",
-    "light": "Light",
-    "dark": "Dark"
+    "logout": "Log out"
+  },
+  "settings": {
+    "title": "Settings",
+    "language": {
+      "title": "Language",
+      "description": "Choose your preferred language"
+    },
+    "appearance": {
+      "title": "Appearance",
+      "description": "Choose between light and dark mode",
+      "light": "Light",
+      "dark": "Dark"
+    },
+    "theme": {
+      "title": "Color Theme",
+      "description": "Customize the application colors",
+      "primary": "Primary Color",
+      "neutral": "Neutral Color"
+    }
   },
   "organization": {
     "current": "Current Organization"
diff --git a/legalconsenthub/nuxt.config.ts b/legalconsenthub/nuxt.config.ts
index 176bce4..b7b17fe 100644
--- a/legalconsenthub/nuxt.config.ts
+++ b/legalconsenthub/nuxt.config.ts
@@ -28,6 +28,7 @@ export default defineNuxtConfig({
   ],
   i18n: {
     defaultLocale: 'de',
+    strategy: 'no_prefix',
     locales: [
       { code: 'en', name: 'English', file: 'en.json' },
       { code: 'de', name: 'Deutsch', file: 'de.json' }