Refactor CartFAB and CartSidebar components for improved UI and functionality

- Simplified Transition component structure in CartFAB.vue for better readability.
- Enhanced FAB button size and adjusted ShoppingCart icon scale for improved visibility.
- Updated Badge component styling for better alignment and visual appeal.
- Modified CartSidebar.vue to adjust empty state layout, improving user experience when the cart is empty.

These changes aim to enhance the overall user interface and interaction within the shopping cart components.

.claude/settings.local.json

@@ -71,7 +71,8 @@
       "Bash(pnpm shadcn-nuxt add:*)",
       "Bash(npm run:*)",
       "Bash(pnpm exec eslint:*)",
-      "Bash(npx -y vue-tsc:*)"
+      "Bash(npx -y vue-tsc:*)",
+      "Bash(awk:*)"
     ],
     "deny": [],
     "ask": []

app/components/Cart/CartFAB.vue

@@ -34,42 +34,32 @@ function handleClick() {
 </script>
 
 <template>
-  <Transition
+  <Transition enter-active-class="transition-all duration-200 ease-out" enter-from-class="scale-0 opacity-0"
-    enter-active-class="transition-all duration-200 ease-out"
+    enter-to-class="scale-100 opacity-100" leave-active-class="transition-all duration-150 ease-in"
-    enter-from-class="scale-0 opacity-0"
+    leave-from-class="scale-100 opacity-100" leave-to-class="scale-0 opacity-0">
-    enter-to-class="scale-100 opacity-100"
-    leave-active-class="transition-all duration-150 ease-in"
-    leave-from-class="scale-100 opacity-100"
-    leave-to-class="scale-0 opacity-0"
-  >
     <div v-if="isVisible" class="fixed bottom-20 right-4 z-40">
       <!-- FAB Button -->
-      <Button
+      <Button @click="handleClick"
-        @click="handleClick"
+        class="h-16 w-16 rounded-full shadow-gray-900 shadow-lg transition-all duration-200 hover:scale-110 active:scale-95"
-        class="h-14 w-14 rounded-full shadow-lg transition-all duration-200 hover:scale-110 active:scale-95"
+        variant="default" size="icon" aria-label="Warenkorb öffnen">
-        variant="default"
-        size="icon"
-        aria-label="Warenkorb öffnen"
-      >
         <!-- Cart icon with relative positioning for badge -->
         <div class="relative">
-          <ShoppingCart class="h-6 w-6" />
+          <ShoppingCart class="h-6 w-6 scale-150" />
 
           <!-- Item count badge -->
           <Badge
-            class="absolute -top-2 -right-2 h-5 min-w-[20px] px-0.5 flex items-center justify-center bg-experimenta-accent text-white text-xs font-bold border border-white dark:border-zinc-950"
+            class="absolute -top-4 -right-4 h-5.5 min-w-[22px] px-1.5 flex items-center justify-center bg-experimenta-accent text-white text-xs font-bold border-2 border-purple-darkest shadow-lg scale-75">
-          >
             {{ itemCount > 99 ? '99+' : itemCount }}
           </Badge>
         </div>
       </Button>
 
       <!-- Price text below button -->
-      <div class="mt-2 text-center">
+      <!-- <div class="mt-2 text-center">
         <p class="text-xs font-semibold text-foreground whitespace-nowrap">
           {{ formattedTotal }}
         </p>
-      </div>
+      </div> -->
     </div>
   </Transition>
 </template>

app/components/Cart/CartSidebar.vue

@@ -42,7 +42,7 @@ function handleCheckout() {
       </SheetHeader>
 
       <!-- Empty State -->
-      <div v-if="itemCount === 0" class="flex-1 flex items-center justify-center px-6">
+      <div v-if="itemCount === 0" class="flex-1 flex items-start justify-center px-6 pt-8">
         <CartEmpty />
       </div>