Refactor UserMenu and navigation components for improved user experience

- Enhanced UserMenu.vue by implementing an extended user type for better user data handling and updated user initials logic.
- Adjusted AppHeader.vue and AreaTabs.vue for improved layout and spacing, ensuring a more cohesive design.
- Updated CartButton.vue and Tabs components for consistent styling and better responsiveness.

These changes aim to enhance the overall usability and visual appeal of the application, providing a smoother user experience.

app/components/UserMenu.vue

@@ -16,17 +16,27 @@ import {
 
 const { user, loggedIn, logout } = useAuth()
 
+// Extended user type with all profile fields
+type ExtendedUser = typeof user.value & {
+  id?: string
+  firstName?: string
+  lastName?: string
+  email?: string
+}
+
+const extendedUser = computed(() => user.value as ExtendedUser)
+
 /**
  * Get user initials for Avatar fallback
  * Example: "Bastian Masanek" → "BM"
  */
 const userInitials = computed(() => {
-  if (!user.value) return '?'
+  if (!extendedUser.value) return '?'
 
-  const first = user.value.firstName?.charAt(0)?.toUpperCase() || ''
-  const last = user.value.lastName?.charAt(0)?.toUpperCase() || ''
+  const first = extendedUser.value.firstName?.charAt(0)?.toUpperCase() || ''
+  const last = extendedUser.value.lastName?.charAt(0)?.toUpperCase() || ''
 
-  return first + last || user.value.email?.charAt(0)?.toUpperCase() || '?'
+  return first + last || extendedUser.value.email?.charAt(0)?.toUpperCase() || '?'
 })
 
 /**
@@ -44,13 +54,9 @@ async function handleLogout() {
 <template>
   <!-- Not logged in: Show login prompt -->
   <NuxtLink v-if="!loggedIn" to="/auth"
-    class="flex items-center gap-2 px-4 py-2 rounded-[35px] border-2 border-dashed border-muted-foreground/30 hover:border-experimenta-accent hover:bg-experimenta-accent/10 transition-all"
+    class="btn-secondary flex items-center gap-2 px-4 py-2.5"
     aria-label="Anmelden oder Registrieren">
-    <Avatar class="h-10 w-10 border-2 border-muted-foreground/30 rounded-2xl">
-      <AvatarFallback class="bg-muted text-muted-foreground rounded-2xl">
-        <User class="h-5 w-5" />
-      </AvatarFallback>
-    </Avatar>
+    <User class="h-5 w-5" />
     <span class="font-medium hidden sm:inline">Anmelden</span>
   </NuxtLink>
 
@@ -62,13 +68,13 @@ async function handleLogout() {
         aria-label="Benutzermenü öffnen">
         <!-- Greeting text (Desktop only) -->
         <span class="hidden md:inline font-medium text-white pl-2">
-          Hallo, {{ user?.firstName }}
+          Hallo, {{ extendedUser?.firstName }}
         </span>
 
         <!-- Avatar with status ring (logged in indicator) -->
         <Avatar
           class="h-10 w-10 md:h-12 md:w-12 border-3 border-experimenta-purple shadow-lg bg-experimenta-accent ring-2 ring-experimenta-accent ring-offset-2 ring-offset-white dark:ring-offset-zinc-950">
-          <AvatarImage :src="undefined" :alt="user?.firstName" />
+          <AvatarImage :src="undefined" :alt="extendedUser?.firstName || ''" />
           <AvatarFallback
             class="bg-experimenta-accent text-white font-bold text-sm md:text-base flex items-center justify-center w-full h-full">
             {{ userInitials }}
@@ -82,10 +88,10 @@ async function handleLogout() {
       <DropdownMenuLabel class="font-normal py-3">
         <div class="flex flex-col space-y-1.5">
           <p class="text-base font-semibold leading-none">
-            {{ user?.firstName }} {{ user?.lastName }}
+            {{ extendedUser?.firstName }} {{ extendedUser?.lastName }}
           </p>
           <p class="text-sm leading-none text-muted-foreground">
-            {{ user?.email }}
+            {{ extendedUser?.email }}
           </p>
         </div>
       </DropdownMenuLabel>