Implement shopping cart functionality with UI components and API integration

- Added CartItem, CartSummary, CartEmpty, CartSidebar, and CartSheet components for managing cart display and interactions.
- Integrated useCart and useCartUI composables for cart state management and UI control.
- Implemented API endpoints for cart operations, including fetching, adding, updating, and removing items.
- Enhanced user experience with loading states and notifications using vue-sonner for cart actions.
- Configured session management for guest and authenticated users, ensuring cart persistence across sessions.

This commit completes the shopping cart feature, enabling users to add items, view their cart, and proceed to checkout.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

app/components/Cart/CartEmpty.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ShoppingBag } from 'lucide-vue-next'
+import { cn } from '~/lib/utils'
+
+interface Props {
+  /**
+   * Additional CSS classes
+   */
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <Card :class="cn('', props.class)">
+    <div class="flex flex-col items-center justify-center py-16 px-6 text-center space-y-6">
+      <!-- Shopping Bag Icon -->
+      <div
+        class="flex items-center justify-center w-24 h-24 rounded-full bg-white/5 border-2 border-white/20"
+      >
+        <ShoppingBag class="w-12 h-12 text-white/60" stroke-width="1.5" />
+      </div>
+
+      <!-- Text Content -->
+      <div class="space-y-2">
+        <h2 class="text-2xl font-bold text-white">Dein Warenkorb ist leer</h2>
+        <p class="text-white/70 max-w-md">
+          Entdecke unsere Produkte und füge deine Favoriten zum Warenkorb hinzu.
+        </p>
+      </div>
+
+      <!-- CTA Button -->
+      <Button
+        as-child
+        class="mt-4 bg-gradient-button bg-size-300 bg-left hover:bg-right transition-all duration-300 font-bold text-white shadow-lg hover:shadow-2xl"
+        size="lg"
+      >
+        <NuxtLink to="/products">
+          Produkte entdecken
+        </NuxtLink>
+      </Button>
+    </div>
+  </Card>
+</template>

app/components/Cart/CartItem.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { Minus, Plus, Trash2 } from 'lucide-vue-next'
+import { cn } from '~/lib/utils'
+import type { CartItemWithProduct } from '~/types/cart'
+
+interface Props {
+  /**
+   * Cart item with product details
+   */
+  item: CartItemWithProduct
+  /**
+   * Loading state for update/remove operations
+   */
+  loading?: boolean
+  /**
+   * Additional CSS classes
+   */
+  class?: string
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:quantity': [quantity: number]
+  remove: []
+}>()
+
+// Format price as EUR currency
+const formatPrice = (price: string | number) => {
+  const numPrice = typeof price === 'string' ? Number.parseFloat(price) : price
+  return new Intl.NumberFormat('de-DE', {
+    style: 'currency',
+    currency: 'EUR',
+  }).format(numPrice)
+}
+
+// Format subtotal
+const formattedSubtotal = computed(() => formatPrice(props.item.subtotal))
+const formattedUnitPrice = computed(() => formatPrice(props.item.product.price))
+
+// Local quantity for input binding
+const localQuantity = ref(props.item.quantity)
+
+// Watch for prop changes
+watch(
+  () => props.item.quantity,
+  (newQuantity) => {
+    localQuantity.value = newQuantity
+  }
+)
+
+// Handle quantity decrease
+const decreaseQuantity = () => {
+  if (localQuantity.value > 1) {
+    localQuantity.value--
+    emit('update:quantity', localQuantity.value)
+  }
+}
+
+// Handle quantity increase
+const increaseQuantity = () => {
+  if (localQuantity.value < props.item.product.stockQuantity) {
+    localQuantity.value++
+    emit('update:quantity', localQuantity.value)
+  }
+}
+
+// Handle manual quantity input
+const handleQuantityInput = (event: Event) => {
+  const input = event.target as HTMLInputElement
+  const value = Number.parseInt(input.value, 10)
+
+  // Validate input
+  if (Number.isNaN(value) || value < 1) {
+    localQuantity.value = 1
+  } else if (value > props.item.product.stockQuantity) {
+    localQuantity.value = props.item.product.stockQuantity
+  } else {
+    localQuantity.value = value
+  }
+
+  // Update input value to match validated value
+  input.value = String(localQuantity.value)
+
+  // Emit update
+  emit('update:quantity', localQuantity.value)
+}
+
+// Handle remove item
+const handleRemove = () => {
+  emit('remove')
+}
+
+// Placeholder image for products without images
+const placeholderImage = '/img/makerspace-jk-2025.jpg'
+</script>
+
+<template>
+  <Card :class="cn('relative overflow-hidden', props.class)">
+    <div class="p-4">
+      <!-- Top Row: Image + Title/Description + Remove Button -->
+      <div class="flex gap-4">
+        <!-- Product Image -->
+        <div class="flex-shrink-0">
+          <div class="relative h-20 w-20 overflow-hidden rounded-lg bg-purple-dark/50 sm:h-24 sm:w-24">
+            <img :src="item.product.imageUrl || placeholderImage" :alt="item.product.name"
+              class="h-full w-full object-cover" loading="lazy" />
+          </div>
+        </div>
+
+        <!-- Product Details -->
+        <div class="flex flex-1 flex-col gap-1 min-w-0">
+          <div class="flex items-start justify-between gap-2">
+            <h3 class="font-bold text-white text-sm sm:text-base leading-tight line-clamp-2 flex-1">
+              {{ item.product.name }}
+            </h3>
+
+            <!-- Remove Button (Desktop) -->
+            <Button variant="ghost" size="icon"
+              class="hidden sm:flex text-white/60 hover:text-red hover:bg-red/10 flex-shrink-0 h-8 w-8" :disabled="loading"
+              @click="handleRemove">
+              <Trash2 class="h-4 w-4" />
+            </Button>
+          </div>
+
+          <p v-if="item.product.description" class="text-xs text-white/70 line-clamp-2">
+            {{ item.product.description }}
+          </p>
+        </div>
+      </div>
+
+      <!-- Bottom Row: Quantity Controls (left) + Subtotal (right) -->
+      <div class="flex items-center justify-between mt-4">
+        <!-- Quantity Controls -->
+        <div class="flex items-center gap-2">
+          <!-- Decrease Button -->
+          <Button variant="outline" size="icon" class="h-8 w-8 text-white border-white/20 hover:bg-white/10"
+            :disabled="loading || localQuantity <= 1" @click="decreaseQuantity">
+            <Minus class="h-4 w-4" />
+          </Button>
+
+          <!-- Quantity Display -->
+          <div class="flex h-8 w-16 items-center justify-center rounded-md border border-white/20 bg-white/5 text-sm font-medium text-white">
+            {{ localQuantity }}
+          </div>
+
+          <!-- Increase Button -->
+          <Button variant="outline" size="icon" class="h-8 w-8 text-white border-white/20 hover:bg-white/10"
+            :disabled="loading || localQuantity >= item.product.stockQuantity" @click="increaseQuantity">
+            <Plus class="h-4 w-4" />
+          </Button>
+        </div>
+
+        <!-- Subtotal + Remove Button -->
+        <div class="flex items-center gap-2">
+          <!-- Subtotal -->
+          <div class="flex flex-col text-right">
+            <div class="text-xs text-white/60 uppercase tracking-wide">
+              Summe
+            </div>
+            <div class="text-base font-bold text-experimenta-accent sm:text-lg">
+              {{ formattedSubtotal }}
+            </div>
+          </div>
+
+          <!-- Remove Button (Mobile) -->
+          <Button variant="ghost" size="icon" class="sm:hidden text-white/60 hover:text-red hover:bg-red/10 h-8 w-8"
+            :disabled="loading" @click="handleRemove">
+            <Trash2 class="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Loading Overlay -->
+    <div v-if="loading" class="absolute inset-0 bg-purple-darkest/80 backdrop-blur-sm flex items-center justify-center">
+      <div class="animate-spin rounded-full h-8 w-8 border-4 border-white/20 border-t-experimenta-accent" />
+    </div>
+  </Card>
+</template>

app/components/Cart/CartSheet.vue

@@ -0,0 +1,77 @@
+<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/CartSidebar.vue

@@ -0,0 +1,77 @@
+<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="right" class="w-full sm:w-[400px] 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/CartSummary.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils'
+import type { CartItemWithProduct } from '~/types/cart'
+
+interface Props {
+  /**
+   * Cart items for summary calculation
+   */
+  items: CartItemWithProduct[]
+  /**
+   * Total amount in EUR
+   */
+  total: number
+  /**
+   * Loading state (e.g., during checkout)
+   */
+  loading?: boolean
+  /**
+   * Additional CSS classes
+   */
+  class?: string
+}
+
+const props = defineProps<Props>()
+
+// Format currency in EUR
+const formatCurrency = (amount: number) => {
+  return new Intl.NumberFormat('de-DE', {
+    style: 'currency',
+    currency: 'EUR',
+  }).format(amount)
+}
+
+// Calculate item count
+const itemCount = computed(() => {
+  return props.items.reduce((sum, item) => sum + item.quantity, 0)
+})
+
+// Calculate VAT (7% already included in total)
+// Formula: VAT = total * (VAT_rate / (1 + VAT_rate))
+const vatAmount = computed(() => {
+  return props.total * (0.07 / 1.07)
+})
+
+// Format values
+const formattedSubtotal = computed(() => formatCurrency(props.total))
+const formattedVat = computed(() => formatCurrency(vatAmount.value))
+const formattedTotal = computed(() => formatCurrency(props.total))
+
+// Item count text (singular/plural)
+const itemCountText = computed(() => {
+  return itemCount.value === 1 ? '1 Artikel' : `${itemCount.value} Artikel`
+})
+</script>
+
+<template>
+  <Card :class="cn('sticky top-4', props.class)">
+    <div class="p-6 space-y-4">
+      <!-- Header -->
+      <div>
+        <h2 class="text-xl font-bold text-white">Zusammenfassung</h2>
+        <p class="text-sm text-white/60 mt-1">{{ itemCountText }}</p>
+      </div>
+
+      <Separator class="bg-white/20" />
+
+      <!-- Price Breakdown -->
+      <div class="space-y-3">
+        <!-- Subtotal -->
+        <div class="flex items-center justify-between text-white/80">
+          <span class="text-sm">Zwischensumme</span>
+          <span class="font-medium">{{ formattedSubtotal }}</span>
+        </div>
+
+        <!-- VAT (included) -->
+        <div class="flex items-center justify-between text-white/60 text-sm">
+          <span>inkl. MwSt. (7%)</span>
+          <span>{{ formattedVat }}</span>
+        </div>
+      </div>
+
+      <Separator class="bg-white/20" />
+
+      <!-- Total -->
+      <div class="flex items-center justify-between">
+        <span class="text-lg font-bold text-white">Gesamt</span>
+        <span class="text-2xl font-bold text-experimenta-accent">
+          {{ formattedTotal }}
+        </span>
+      </div>
+
+      <!-- Checkout Button -->
+      <Button
+        class="w-full bg-gradient-button bg-size-300 bg-left hover:bg-right transition-all duration-300 font-bold text-white shadow-lg hover:shadow-2xl"
+        size="lg" :disabled="loading || items.length === 0" @click="$emit('checkout')">
+        <span v-if="!loading">Zur Kasse</span>
+        <span v-else class="flex items-center gap-2">
+          <div class="animate-spin rounded-full h-4 w-4 border-2 border-white/20 border-t-white" />
+          Wird verarbeitet...
+        </span>
+      </Button>
+
+      <!-- Additional Info -->
+      <!-- <div class="pt-2 space-y-2 text-xs text-white/60">
+        <p class="flex items-start gap-2">
+          <span class="text-experimenta-accent">✓</span>
+          <span>Sichere Zahlung mit PayPal</span>
+        </p>
+        <p class="flex items-start gap-2">
+          <span class="text-experimenta-accent">✓</span>
+          <span>Versandkostenfrei</span>
+        </p>
+      </div> -->
+    </div>
+  </Card>
+</template>

app/components/Cart/index.ts

@@ -0,0 +1,6 @@
+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'

app/components/navigation/AreaTabs.vue

@@ -66,11 +66,11 @@ function navigateToArea(area: ProductArea) {
   <div class="w-full">
     <!-- Desktop: Tabs -->
     <Tabs :model-value="currentArea" class="hidden md:block">
-      <TabsList class="h-auto p-1 bg-muted/50">
+      <TabsList class="h-auto p-1.5 bg-white/5">
         <TabsTrigger v-for="area in areas.filter(area => area.visible)" :key="area.id" :value="area.id"
           :disabled="!area.enabled" :class="[
-            'gap-2 data-[state=active]:bg-white dark:data-[state=active]:bg-zinc-900',
-            !area.enabled && 'opacity-60 cursor-not-allowed',
+            'gap-2 data-[state=active]:bg-accent data-[state=active]:text-white data-[state=active]:shadow-md',
+            !area.enabled && 'opacity-50 cursor-not-allowed',
           ]" @click="navigateToArea(area)">
           <component :is="area.icon" class="h-4 w-4" />
           <span>{{ area.label }}</span>
@@ -81,20 +81,19 @@ function navigateToArea(area: ProductArea) {
       </TabsList>
     </Tabs>
 
-    <!-- Mobile: Horizontal scroll with cards -->
+    <!-- Mobile: Horizontal scroll with cards (matching desktop styling) -->
     <div class="md:hidden overflow-x-auto scrollbar-hide">
-      <div class="flex gap-2 p-1 min-w-max">
+      <div class="inline-flex h-auto items-center justify-center rounded-[35px] bg-white/5 p-1.5 min-w-max">
         <button v-for="area in areas.filter(area => area.visible)" :key="area.id" :disabled="!area.enabled" :class="[
-          'flex items-center gap-2 px-4 py-2 rounded-lg border-2 transition-all whitespace-nowrap',
+          'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[25px] px-4 py-[10px] text-lg font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-0',
           currentArea === area.id
-            ? 'bg-purple-600 text-white border-purple-600'
-            : 'bg-white dark:bg-zinc-900 border-border hover:border-purple-300',
-          !area.enabled && 'opacity-60 cursor-not-allowed',
+            ? 'bg-accent text-white shadow-md'
+            : 'text-white/70 hover:text-white',
+          !area.enabled && 'opacity-50 cursor-not-allowed',
         ]" @click="navigateToArea(area)">
-          <component :is="area.icon" :class="['h-4 w-4', currentArea === area.id ? 'text-white' : '']" />
-          <span class="font-medium">{{ area.label }}</span>
-          <Badge v-if="area.badge" :variant="currentArea === area.id ? 'secondary' : 'outline'"
-            class="text-[10px] px-1.5 py-0">
+          <component :is="area.icon" class="h-4 w-4" />
+          <span>{{ area.label }}</span>
+          <Badge v-if="area.badge" variant="secondary" class="ml-1 text-[10px] px-1.5 py-0">
             {{ area.badge }}
           </Badge>
         </button>

app/components/navigation/CartButton.vue

@@ -26,12 +26,12 @@ function handleClick(e: Event) {
   <!-- Desktop cart button (visible only on lg and up) -->
   <button
     @click="handleClick"
-    class="hidden lg:flex items-center gap-2 rounded-lg px-4 py-2 transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 focus:ring-offset-transparent"
+    class="relative hidden lg:flex items-center gap-5 rounded-[25px] px-[30px] py-[10px] transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 focus:ring-offset-transparent"
     aria-label="Warenkorb öffnen"
   >
     <!-- Cart icon with item count badge -->
-    <div class="relative inline-flex">
-      <ShoppingCart class="h-6 w-6 text-white" />
+    <div class="relative inline-flex items-center justify-center">
+      <ShoppingCart class="h-6 w-6 text-white" strokeWidth="2" />
 
       <!-- Item count badge -->
       <Transition
@@ -44,7 +44,7 @@ function handleClick(e: Event) {
       >
         <Badge
           v-if="hasItems"
-          class="absolute -top-2 -right-2 h-5 min-w-[20px] px-1 flex items-center justify-center bg-red-500 text-white text-xs font-bold border-2 border-white"
+          class="absolute -top-2.5 -right-3.5 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"
         >
           {{ itemCount > 99 ? '99+' : itemCount }}
         </Badge>
@@ -52,14 +52,13 @@ function handleClick(e: Event) {
     </div>
 
     <!-- Total price (desktop only) -->
-    <span class="text-sm font-semibold text-white">
+    <span class="text-base font-bold text-white tabular-nums">
       {{ formattedTotal }}
     </span>
 
-    <!-- Pulse animation when items are added -->
+    <!-- Static background -->
     <span
-      v-if="hasItems"
-      class="absolute inset-0 rounded-lg bg-experimenta-accent/20 animate-pulse opacity-50"
+      class="absolute inset-0 rounded-[25px] bg-white/10"
       aria-hidden="true"
     />
   </button>

app/components/ui/scroll-area/ScrollArea.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { ScrollAreaRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+
+  ScrollAreaViewport,
+} from "reka-ui"
+import { cn } from '~/lib/utils'
+import ScrollBar from "./ScrollBar.vue"
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>

app/components/ui/scroll-area/ScrollBar.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ScrollAreaScrollbarProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui"
+import { cn } from '~/lib/utils'
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes["class"] }>(), {
+  orientation: "vertical",
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    v-bind="delegatedProps"
+    :class="
+      cn('flex touch-none select-none transition-colors',
+         orientation === 'vertical'
+           && 'h-full w-2.5 border-l border-l-transparent p-px',
+         orientation === 'horizontal'
+           && 'h-2.5 flex-col border-t border-t-transparent p-px',
+         props.class)"
+  >
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaScrollbar>
+</template>

app/components/ui/scroll-area/index.ts

@@ -0,0 +1,2 @@
+export { default as ScrollArea } from "./ScrollArea.vue"
+export { default as ScrollBar } from "./ScrollBar.vue"

app/components/ui/separator/Separator.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from 'vue'
-import { SeparatorRoot, type SeparatorRootProps } from 'reka-ui'
+import { Separator as SeparatorPrimitive } from 'reka-ui'
 import { cn } from '@/lib/utils'
 
+interface SeparatorProps {
+  orientation?: 'horizontal' | 'vertical'
+  decorative?: boolean
+  class?: HTMLAttributes['class']
+}
+
 const props = withDefaults(
-  defineProps<SeparatorRootProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<SeparatorProps>(),
   {
     orientation: 'horizontal',
     decorative: true,
@@ -19,7 +25,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <SeparatorRoot
+  <SeparatorPrimitive
     v-bind="delegatedProps"
     :class="
       cn(

app/components/ui/sheet/Sheet.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>

app/components/ui/sheet/SheetClose.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>

app/components/ui/sheet/SheetContent.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { SheetVariants } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from '~/lib/utils'
+import { sheetVariants } from "."
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes["class"]
+  side?: SheetVariants["side"]
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<SheetContentProps>()
+
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "side")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      :class="cn(sheetVariants({ side }), props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+      >
+        <X class="w-4 h-4 text-muted-foreground" />
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

app/components/ui/sheet/SheetDescription.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription } from "reka-ui"
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogDescription
+    :class="cn('text-sm text-muted-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>

app/components/ui/sheet/SheetFooter.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/sheet/SheetHeader.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/sheet/SheetTitle.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle } from "reka-ui"
+import { cn } from '~/lib/utils'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogTitle
+    :class="cn('text-lg font-semibold text-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>

app/components/ui/sheet/SheetTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>

app/components/ui/sheet/index.ts

@@ -0,0 +1,32 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Sheet } from "./Sheet.vue"
+export { default as SheetClose } from "./SheetClose.vue"
+export { default as SheetContent } from "./SheetContent.vue"
+export { default as SheetDescription } from "./SheetDescription.vue"
+export { default as SheetFooter } from "./SheetFooter.vue"
+export { default as SheetHeader } from "./SheetHeader.vue"
+export { default as SheetTitle } from "./SheetTitle.vue"
+export { default as SheetTrigger } from "./SheetTrigger.vue"
+
+export const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+            "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+)
+
+export type SheetVariants = VariantProps<typeof sheetVariants>

app/components/ui/sonner/Sonner.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { ToasterProps } from "vue-sonner"
+import { Toaster as Sonner } from "vue-sonner"
+
+const props = defineProps<ToasterProps>()
+</script>
+
+<template>
+  <Sonner
+    class="toaster group"
+    v-bind="props"
+    :toast-options="{
+      classes: {
+        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+        description: 'group-[.toast]:text-muted-foreground',
+        actionButton:
+          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+        cancelButton:
+          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+      },
+    }"
+  />
+</template>

app/components/ui/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from "./Sonner.vue"

app/composables/useCart.ts

@@ -0,0 +1,178 @@
+// composables/useCart.ts
+
+import type { CartSummary } from '~/types/cart'
+
+/**
+ * Shopping Cart composable
+ *
+ * Manages cart state and provides methods for cart operations
+ *
+ * Features:
+ * - Reactive cart state (cart, items, total, itemCount)
+ * - Auto-fetch cart on mount
+ * - Add, update, and remove items
+ * - Loading states for async operations
+ * - Error handling with notifications for removed items
+ *
+ * Usage:
+ * const { cart, items, total, itemCount, loading, addItem, updateItem, removeItem, fetchCart } = useCart()
+ */
+
+// Global cart state (shared across all components)
+const cartState = ref<CartSummary | null>(null)
+const loading = ref(false)
+const initialized = ref(false)
+
+export function useCart() {
+  // Computed reactive properties
+  const cart = computed(() => cartState.value?.cart ?? null)
+  const items = computed(() => cartState.value?.items ?? [])
+  const total = computed(() => cartState.value?.total ?? 0)
+  const itemCount = computed(() => cartState.value?.itemCount ?? 0)
+
+  /**
+   * Fetch cart from server
+   * Auto-cleans unavailable products and returns removed items
+   */
+  async function fetchCart() {
+    loading.value = true
+    try {
+      const data = await $fetch<CartSummary>('/api/cart', {
+        method: 'GET',
+      })
+
+      cartState.value = data
+
+      // Show notification if products were removed
+      if (data.removedItems && data.removedItems.length > 0) {
+        // TODO: Show toast notification when toast composable is implemented
+        // For now, log to console
+        console.warn('Products removed from cart:', data.removedItems)
+      }
+
+      return data
+    } catch (error) {
+      console.error('Failed to fetch cart:', error)
+      // Set to null on error
+      cartState.value = null
+      throw error
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /**
+   * Add item to cart
+   *
+   * @param productId - Product UUID
+   * @param quantity - Quantity to add (default: 1)
+   */
+  async function addItem(productId: string, quantity: number = 1) {
+    loading.value = true
+    try {
+      await $fetch('/api/cart/items', {
+        method: 'POST',
+        body: {
+          productId,
+          quantity,
+        },
+      })
+
+      // Refresh cart to get updated state
+      await fetchCart()
+    } catch (error) {
+      console.error('Failed to add item to cart:', error)
+      throw error
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /**
+   * Update cart item quantity
+   *
+   * @param itemId - Cart item UUID
+   * @param quantity - New quantity (must be >= 1)
+   */
+  async function updateItem(itemId: string, quantity: number) {
+    if (quantity < 1) {
+      throw new Error('Quantity must be at least 1')
+    }
+
+    loading.value = true
+    try {
+      await $fetch(`/api/cart/items/${itemId}`, {
+        method: 'PATCH',
+        body: {
+          quantity,
+        },
+      })
+
+      // Refresh cart to get updated state
+      await fetchCart()
+    } catch (error) {
+      console.error('Failed to update cart item:', error)
+      throw error
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /**
+   * Remove item from cart
+   *
+   * @param itemId - Cart item UUID
+   */
+  async function removeItem(itemId: string) {
+    loading.value = true
+    try {
+      await $fetch(`/api/cart/items/${itemId}`, {
+        method: 'DELETE',
+      })
+
+      // Refresh cart to get updated state
+      await fetchCart()
+    } catch (error) {
+      console.error('Failed to remove cart item:', error)
+      throw error
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /**
+   * Clear all items from cart
+   * For future use (not implemented in API yet)
+   */
+  async function clearCart() {
+    // TODO: Implement when API endpoint is ready
+    console.warn('clearCart() not yet implemented')
+  }
+
+  /**
+   * Initialize cart on mount
+   * Only fetches once per session
+   */
+  onMounted(async () => {
+    if (!initialized.value) {
+      await fetchCart()
+      initialized.value = true
+    }
+  })
+
+  return {
+    // State
+    cart,
+    items,
+    total,
+    itemCount,
+    loading,
+
+    // Methods
+    fetchCart,
+    addItem,
+    updateItem,
+    removeItem,
+    clearCart,
+  }
+}

app/composables/useCartUI.ts

@@ -0,0 +1,104 @@
+// composables/useCartUI.ts
+
+import { useMediaQuery } from '@vueuse/core'
+
+/**
+ * Cart UI composable
+ *
+ * Manages cart sidebar/sheet UI state and responsive behavior
+ *
+ * Features:
+ * - Sidebar/sheet open/close state
+ * - Responsive detection (mobile vs desktop)
+ * - Body scroll lock when cart is open
+ * - Global state (shared across all components)
+ *
+ * Usage:
+ * const { isOpen, isMobile, open, close, toggle } = useCartUI()
+ */
+
+// Global cart UI state (shared across all components)
+const isOpen = ref(false)
+
+export function useCartUI() {
+  // Responsive breakpoint: mobile = width < 1024px (lg breakpoint)
+  const isMobile = useMediaQuery('(max-width: 1023px)')
+
+  /**
+   * Open cart sidebar/sheet
+   */
+  function open() {
+    isOpen.value = true
+    lockBodyScroll()
+  }
+
+  /**
+   * Close cart sidebar/sheet
+   */
+  function close() {
+    isOpen.value = false
+    unlockBodyScroll()
+  }
+
+  /**
+   * Toggle cart sidebar/sheet
+   */
+  function toggle() {
+    if (isOpen.value) {
+      close()
+    } else {
+      open()
+    }
+  }
+
+  /**
+   * Lock body scroll (prevent scrolling when cart is open)
+   */
+  function lockBodyScroll() {
+    if (import.meta.client) {
+      document.body.style.overflow = 'hidden'
+    }
+  }
+
+  /**
+   * Unlock body scroll
+   */
+  function unlockBodyScroll() {
+    if (import.meta.client) {
+      document.body.style.overflow = ''
+    }
+  }
+
+  /**
+   * Clean up: Ensure body scroll is unlocked when component unmounts
+   */
+  onUnmounted(() => {
+    unlockBodyScroll()
+  })
+
+  /**
+   * Watch for route changes: Close cart when navigating
+   */
+  if (import.meta.client) {
+    const route = useRoute()
+    watch(
+      () => route.path,
+      () => {
+        if (isOpen.value) {
+          close()
+        }
+      }
+    )
+  }
+
+  return {
+    // State
+    isOpen: readonly(isOpen),
+    isMobile: readonly(isMobile),
+
+    // Methods
+    open,
+    close,
+    toggle,
+  }
+}

app/layouts/default.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import AppHeader from '~/components/navigation/AppHeader.vue'
 import BottomNav from '~/components/navigation/BottomNav.vue'
+import CartFAB from '~/components/Cart/CartFAB.vue'
+import CartSidebar from '~/components/Cart/CartSidebar.vue'
+import CartSheet from '~/components/Cart/CartSheet.vue'
+import { Toaster } from '~/components/ui/sonner'
+
+// Determine which cart UI to show based on screen size
+const { isMobile } = useCartUI()
 </script>
 
 <template>
@@ -18,6 +25,18 @@ import BottomNav from '~/components/navigation/BottomNav.vue'
 
     <!-- Mobile Bottom Navigation -->
     <BottomNav />
+
+    <!-- Floating Action Button (FAB) for Cart on Product Pages -->
+    <CartFAB />
+
+    <!-- Cart Sidebar (Desktop: >= 1024px) -->
+    <CartSidebar v-if="!isMobile" />
+
+    <!-- Cart Sheet (Mobile: < 1024px) -->
+    <CartSheet v-if="isMobile" />
+
+    <!-- Toast Notifications -->
+    <Toaster position="top-center" :duration="3000" rich-colors />
   </div>
 </template>
 

app/pages/products/[id].vue

@@ -3,10 +3,11 @@
  * Product Detail Page
  *
  * Displays full details for a single product with large image and description.
- * Includes placeholder "Add to Cart" functionality for future implementation.
+ * Includes functional "Add to Cart" functionality with notifications and cart UI integration.
  */
 
-import { ArrowLeft, CheckCircle } from 'lucide-vue-next'
+import { ArrowLeft, CheckCircle, Loader2 } from 'lucide-vue-next'
+import { toast } from 'vue-sonner'
 
 // Page metadata
 definePageMeta({
@@ -43,10 +44,54 @@ const formattedPrice = computed(() => {
   }).format(Number(product.value.price))
 })
 
-// Handle "Add to Cart" action (placeholder for future implementation)
-const handleAddToCart = () => {
-  // TODO: Implement cart functionality in future phase
-  alert('Add to Cart funktioniert noch nicht. Diese Funktion wird in einer späteren Phase implementiert.')
+// Cart composables
+const { addItem, loading: cartLoading, items } = useCart()
+const { open: openCart } = useCartUI()
+
+// Local loading state for this specific button
+const isAddingToCart = ref(false)
+
+// Check if product is already in cart
+const isInCart = computed(() => {
+  if (!product.value) return false
+  return items.value.some((item) => item.productId === product.value.id)
+})
+
+// Handle "Add to Cart" action
+const handleAddToCart = async () => {
+  if (!product.value) return
+
+  // Prevent adding if out of stock
+  if (product.value.stockQuantity === 0) {
+    toast.error('Nicht verfügbar', {
+      description: 'Dieses Produkt ist derzeit nicht auf Lager.',
+    })
+    return
+  }
+
+  isAddingToCart.value = true
+
+  try {
+    // Add item to cart (quantity: 1)
+    await addItem(product.value.id, 1)
+
+    // Show success notification
+    toast.success('In den Warenkorb gelegt', {
+      description: `${product.value.name} wurde zu deinem Warenkorb hinzugefügt.`,
+    })
+
+    // Open cart sidebar/sheet to show added item
+    openCart()
+  } catch (error) {
+    console.error('Failed to add item to cart:', error)
+
+    // Show error notification
+    toast.error('Fehler beim Hinzufügen', {
+      description: 'Das Produkt konnte nicht in den Warenkorb gelegt werden. Bitte versuche es erneut.',
+    })
+  } finally {
+    isAddingToCart.value = false
+  }
 }
 </script>
 
@@ -175,16 +220,35 @@ const handleAddToCart = () => {
               <Button
                 variant="experimenta"
                 size="experimenta"
-                class="flex-1"
-                :disabled="product.stockQuantity === 0"
+                class="flex-1 relative"
+                :disabled="product.stockQuantity === 0 || isAddingToCart"
                 @click="handleAddToCart"
               >
-                {{ product.stockQuantity > 0 ? 'In den Warenkorb' : 'Nicht verfügbar' }}
+                <!-- Loading spinner -->
+                <Loader2
+                  v-if="isAddingToCart"
+                  :size="20"
+                  class="mr-2 animate-spin"
+                />
+
+                <!-- Button text -->
+                <span v-if="isAddingToCart">Wird hinzugefügt...</span>
+                <span v-else-if="product.stockQuantity === 0">Nicht verfügbar</span>
+                <span v-else>In den Warenkorb</span>
               </Button>
+
               <NuxtLink to="/products" class="btn-secondary flex-1 text-center">
                 Weitere Produkte ansehen
               </NuxtLink>
             </div>
+
+            <!-- Already in cart hint -->
+            <div
+              v-if="isInCart && product.stockQuantity > 0"
+              class="mt-2 text-center text-sm text-white/70"
+            >
+              Dieses Produkt befindet sich bereits in deinem Warenkorb.
+            </div>
           </div>
         </div>
       </div>

app/types/cart.ts

@@ -0,0 +1,43 @@
+/**
+ * Shared cart types for client and server
+ * These types mirror the server-side types from server/utils/cart-helpers.ts
+ */
+
+/**
+ * Cart item with product details and computed subtotal
+ */
+export interface CartItemWithProduct {
+  id: string
+  cartId: string
+  productId: string
+  quantity: number
+  addedAt: Date
+  product: {
+    id: string
+    name: string
+    description: string | null
+    price: string
+    stockQuantity: number
+    active: boolean
+    category: string | null
+    imageUrl: string | null
+  }
+  subtotal: number
+}
+
+/**
+ * Cart summary with items and totals
+ */
+export interface CartSummary {
+  cart: {
+    id: string
+    userId: string | null
+    sessionId: string
+    createdAt: Date
+    updatedAt: Date
+  }
+  items: CartItemWithProduct[]
+  total: number
+  itemCount: number
+  removedItems?: string[] // Names of products that were removed due to unavailability
+}