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

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'),