From 0c875af73c3562668e4f3d4bc4d26bfa7152db4e Mon Sep 17 00:00:00 2001
From: Bastian Masanek <bastian.masanek@experimenta.science>
Date: Sat, 1 Nov 2025 20:18:20 +0100
Subject: [PATCH] Refactor RoleSwitcher component for improved clarity and
 consistency

- Updated role descriptions for clarity by removing unnecessary phrases.
- Enhanced template structure for better readability and consistency in styling.
- Adjusted dropdown menu width for improved layout and user experience.
---
 app/components/navigation/RoleSwitcher.vue | 59 ++++++++--------------
 1 file changed, 20 insertions(+), 39 deletions(-)

diff --git a/app/components/navigation/RoleSwitcher.vue b/app/components/navigation/RoleSwitcher.vue
index 42246b8..c8b2db2 100644
--- a/app/components/navigation/RoleSwitcher.vue
+++ b/app/components/navigation/RoleSwitcher.vue
@@ -28,7 +28,7 @@ const roles: RoleOption[] = [
   {
     value: 'individual',
     label: 'Privatperson',
-    description: 'für mich',
+    description: 'Privatperson',
     icon: User,
     color: 'text-purple-600',
     enabled: true,
@@ -36,7 +36,7 @@ const roles: RoleOption[] = [
   {
     value: 'educator',
     label: 'Pädagoge',
-    description: 'für Schule/Kita',
+    description: 'Pädagoge',
     icon: GraduationCap,
     color: 'text-orange-500',
     enabled: false,
@@ -45,7 +45,7 @@ const roles: RoleOption[] = [
   {
     value: 'company',
     label: 'Firma',
-    description: 'für Unternehmen',
+    description: 'Firma',
     icon: Building2,
     color: 'text-blue-600',
     enabled: false,
@@ -70,60 +70,41 @@ function switchRole(role: UserRole) {
 
 <template>
   <DropdownMenu>
-    <DropdownMenuTrigger as-child>
-      <Button
-        variant="outline"
+    <dropdownMenuTrigger as-child>
+      <Button variant="outline"
         class="gap-2 border-2 border-white/30 bg-white/5 text-white hover:bg-white/10 hover:border-white/50 transition-all duration-200 group"
-        title="Rolle wechseln"
-      >
+        title="Rolle wechseln">
         <!-- Context label + role -->
         <span class="text-xs text-white/70 font-normal hidden md:inline">Du kaufst als:</span>
         <component :is="currentRoleData.icon" class="h-4 w-4 text-white" />
         <span class="font-medium text-white">{{ currentRoleData.label }}</span>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="ml-1 opacity-70 text-white group-hover:opacity-100 transition-opacity"
-        >
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="ml-1 opacity-70 text-white group-hover:opacity-100 transition-opacity">
           <polyline points="6 9 12 15 18 9" />
         </svg>
       </Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent align="start" class="w-64">
+    </dropdownMenuTrigger>
+    <DropdownMenuContent align="start" class="w-[312px]">
       <DropdownMenuLabel class="text-sm font-normal text-muted-foreground py-3">
-        Für wen kaufst du?
+        Ich kaufe als...
       </DropdownMenuLabel>
       <DropdownMenuSeparator />
 
-      <DropdownMenuItem
-        v-for="role in roles"
-        :key="role.value"
-        :disabled="!role.enabled"
-        :class="[
-          'gap-3 py-3 cursor-pointer group',
-          !role.enabled && 'opacity-60 cursor-not-allowed',
-          currentRole === role.value && 'bg-purple-50 dark:bg-purple-950',
-        ]"
-        @click="switchRole(role.value)"
-      >
+      <DropdownMenuItem v-for="role in roles" :key="role.value" :disabled="!role.enabled" :class="[
+        'gap-3 py-3 cursor-pointer group',
+        !role.enabled && 'opacity-60 cursor-not-allowed',
+        currentRole === role.value && 'bg-purple-50 dark:bg-purple-950',
+      ]" @click="switchRole(role.value)">
         <component :is="role.icon" :class="['h-5 w-5', role.color]" />
 
         <div class="flex-1 flex flex-col gap-1">
           <span class="text-sm font-semibold">{{ role.label }}</span>
-          <span class="text-sm text-muted-foreground group-hover:text-foreground/80 transition-colors">{{ role.description }}</span>
+          <span class="text-sm text-muted-foreground group-hover:text-foreground/80 transition-colors">{{
+            role.description }}</span>
         </div>
 
-        <Check
-          v-if="currentRole === role.value"
-          class="h-5 w-5 text-green-600 flex-shrink-0"
-        />
+        <Check v-if="currentRole === role.value" class="h-5 w-5 text-green-600 flex-shrink-0" />
 
         <Badge v-if="role.badge" variant="secondary" class="text-xs px-2 py-0.5 flex-shrink-0">
           {{ role.badge }}