Refactor Cart UI to Enhance Responsiveness and User Experience

- Replaced CartSheet and CartSidebar components with a new CartResponsive component that adapts to screen size, providing a unified cart experience.
- Implemented responsive animations for the cart, allowing it to slide in from the right on desktop and from the bottom on mobile.
- Updated styles and layout in tailwind.css to support new animation effects for the cart component.

app/components/Cart/CartResponsive.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
 import {
   Sheet,
   SheetContent,
@@ -14,6 +15,17 @@ import CartSummary from './CartSummary.vue'
 const { items, itemCount, total, loading, updateItem, removeItem } = useCart()
 const { isOpen, close } = useCartUI()
 
+// Detect mobile viewport (< 640px = Tailwind sm breakpoint)
+const isMobile = useMediaQuery('(max-width: 639px)')
+
+// Responsive side prop: bottom for mobile, right for desktop
+const side = computed(() => isMobile.value ? 'bottom' : 'right')
+
+// Responsive sizing classes
+const sizeClasses = computed(() =>
+  isMobile.value ? 'h-[90vh]' : 'w-full sm:w-[400px]'
+)
+
 // Handle quantity update
 async function handleUpdateQuantity(itemId: string, quantity: number) {
   await updateItem(itemId, quantity)
@@ -33,7 +45,7 @@ function handleCheckout() {
 
 <template>
   <Sheet :open="isOpen" @update:open="(open) => !open && close()">
-    <SheetContent side="right" class="w-full sm:w-[400px] p-0 flex flex-col">
+    <SheetContent :side="side" :class="[sizeClasses, 'p-0 flex flex-col']">
       <!-- Header -->
       <SheetHeader class="px-6 py-4 border-b">
         <SheetTitle class="text-xl font-bold">

app/components/Cart/CartSheet.vue

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import CartEmpty from './CartEmpty.vue'
-import CartItem from './CartItem.vue'
-import CartSummary from './CartSummary.vue'
-
-// Get cart state and UI controls
-const { items, itemCount, total, loading, updateItem, removeItem } = useCart()
-const { isOpen, close } = useCartUI()
-
-// Handle quantity update
-async function handleUpdateQuantity(itemId: string, quantity: number) {
-  await updateItem(itemId, quantity)
-}
-
-// Handle item removal
-async function handleRemoveItem(itemId: string) {
-  await removeItem(itemId)
-}
-
-// Navigate to checkout
-function handleCheckout() {
-  close()
-  navigateTo('/checkout')
-}
-</script>
-
-<template>
-  <Sheet :open="isOpen" @update:open="(open) => !open && close()">
-    <SheetContent side="bottom" class="h-[90vh] p-0 flex flex-col">
-      <!-- Header -->
-      <SheetHeader class="px-6 py-4 border-b">
-        <SheetTitle class="text-xl font-bold">
-          Warenkorb ({{ itemCount }})
-        </SheetTitle>
-      </SheetHeader>
-
-      <!-- Empty State -->
-      <div v-if="itemCount === 0" class="flex-1 flex items-center justify-center px-6">
-        <CartEmpty />
-      </div>
-
-      <!-- Cart Items + Summary -->
-      <template v-else>
-        <!-- Scrollable Items List -->
-        <ScrollArea class="flex-1 px-6">
-          <div class="space-y-4 py-4">
-            <CartItem v-for="item in items" :key="item.id" :item="item" :loading="loading"
-              @update:quantity="(qty) => handleUpdateQuantity(item.id, qty)" @remove="handleRemoveItem(item.id)" />
-          </div>
-        </ScrollArea>
-
-        <!-- Sticky Footer with Summary -->
-        <div class="border-t px-6 py-4 bg-background">
-          <CartSummary :items="items" :total="total" :loading="loading" @checkout="handleCheckout" />
-        </div>
-      </template>
-    </SheetContent>
-  </Sheet>
-</template>

app/components/Cart/index.ts

@@ -2,5 +2,4 @@ export { default as CartItem } from './CartItem.vue'
 export { default as CartSummary } from './CartSummary.vue'
 export { default as CartEmpty } from './CartEmpty.vue'
 export { default as CartFAB } from './CartFAB.vue'
-export { default as CartSidebar } from './CartSidebar.vue'
-export { default as CartSheet } from './CartSheet.vue'
+export { default as CartResponsive } from './CartResponsive.vue'