eval fix

src/components/TastingList.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import React, { useState, useMemo } from 'react';
-import { Calendar, Star, ArrowUpDown, Clock } from 'lucide-react';
+import { Calendar, Star, ArrowUpDown, Clock, Trash2, Loader2 } from 'lucide-react';
+import { deleteTasting } from '@/services/delete-tasting';
 
 interface Tasting {
     id: string;
@@ -10,6 +11,7 @@ interface Tasting {
     palate_notes?: string;
     finish_notes?: string;
     is_sample?: boolean;
+    bottle_id: string;
     created_at: string;
 }
 
@@ -19,6 +21,23 @@ interface TastingListProps {
 
 export default function TastingList({ initialTastings }: TastingListProps) {
     const [sortBy, setSortBy] = useState<'date-desc' | 'date-asc' | 'rating-desc' | 'rating-asc'>('date-desc');
+    const [isDeleting, setIsDeleting] = useState<string | null>(null);
+
+    const handleDelete = async (tastingId: string, bottleId: string) => {
+        if (!confirm('Bist du sicher, dass du diese Notiz löschen möchtest?')) return;
+
+        setIsDeleting(tastingId);
+        try {
+            const res = await deleteTasting(tastingId, bottleId);
+            if (!res.success) {
+                alert(res.error || 'Fehler beim Löschen');
+            }
+        } catch (err) {
+            alert('Löschen fehlgeschlagen');
+        } finally {
+            setIsDeleting(null);
+        }
+    };
 
     const sortedTastings = useMemo(() => {
         const result = [...initialTastings];
@@ -87,9 +106,23 @@ export default function TastingList({ initialTastings }: TastingListProps) {
                                     {new Date(note.created_at).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
                                 </div>
                             </div>
-                            <div className="text-[10px] text-zinc-400 font-black tracking-widest uppercase flex items-center gap-1">
-                                <Calendar size={12} />
-                                {new Date(note.created_at).toLocaleDateString('de-DE')}
+                            <div className="flex items-center gap-4">
+                                <div className="text-[10px] text-zinc-400 font-black tracking-widest uppercase flex items-center gap-1">
+                                    <Calendar size={12} />
+                                    {new Date(note.created_at).toLocaleDateString('de-DE')}
+                                </div>
+                                <button
+                                    onClick={() => handleDelete(note.id, note.bottle_id)}
+                                    disabled={!!isDeleting}
+                                    className="p-2 text-zinc-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-all disabled:opacity-50"
+                                    title="Tasting löschen"
+                                >
+                                    {isDeleting === note.id ? (
+                                        <Loader2 size={14} className="animate-spin" />
+                                    ) : (
+                                        <Trash2 size={14} />
+                                    )}
+                                </button>
                             </div>
                         </div>