feat: implement buddies and tasting sessions features

src/components/TastingNoteForm.tsx

@@ -1,14 +1,22 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { saveTasting } from '@/services/save-tasting';
-import { Loader2, Send, Star } from 'lucide-react';
+import { Loader2, Send, Star, Users, Check } from 'lucide-react';
+import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
+
+interface Buddy {
+    id: string;
+    name: string;
+}
 
 interface TastingNoteFormProps {
     bottleId: string;
+    sessionId?: string;
 }
 
-export default function TastingNoteForm({ bottleId }: TastingNoteFormProps) {
+export default function TastingNoteForm({ bottleId, sessionId }: TastingNoteFormProps) {
+    const supabase = createClientComponentClient();
     const [rating, setRating] = useState(85);
     const [nose, setNose] = useState('');
     const [palate, setPalate] = useState('');
@@ -16,6 +24,35 @@ export default function TastingNoteForm({ bottleId }: TastingNoteFormProps) {
     const [isSample, setIsSample] = useState(false);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
+    const [buddies, setBuddies] = useState<Buddy[]>([]);
+    const [selectedBuddyIds, setSelectedBuddyIds] = useState<string[]>([]);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            // Fetch All Buddies
+            const { data: buddiesData } = await supabase.from('buddies').select('id, name').order('name');
+            setBuddies(buddiesData || []);
+
+            // If Session ID, fetch session participants and pre-select them
+            if (sessionId) {
+                const { data: participants } = await supabase
+                    .from('session_participants')
+                    .select('buddy_id')
+                    .eq('session_id', sessionId);
+
+                if (participants) {
+                    setSelectedBuddyIds(participants.map(p => p.buddy_id));
+                }
+            }
+        };
+        fetchData();
+    }, [sessionId]);
+
+    const toggleBuddy = (id: string) => {
+        setSelectedBuddyIds(prev =>
+            prev.includes(id) ? prev.filter(bid => bid !== id) : [...prev, id]
+        );
+    };
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
@@ -25,17 +62,20 @@ export default function TastingNoteForm({ bottleId }: TastingNoteFormProps) {
         try {
             const result = await saveTasting({
                 bottle_id: bottleId,
+                session_id: sessionId,
                 rating,
                 nose_notes: nose,
                 palate_notes: palate,
                 finish_notes: finish,
                 is_sample: isSample,
+                buddy_ids: selectedBuddyIds,
             });
 
             if (result.success) {
                 setNose('');
                 setPalate('');
                 setFinish('');
+                setSelectedBuddyIds([]);
                 // We don't need to manually refresh because of revalidatePath in the server action
             } else {
                 setError(result.error || 'Fehler beim Speichern');
@@ -131,6 +171,31 @@ export default function TastingNoteForm({ bottleId }: TastingNoteFormProps) {
                 />
             </div>
 
+            {buddies.length > 0 && (
+                <div className="space-y-3">
+                    <label className="text-[11px] font-black text-zinc-400 uppercase tracking-widest flex items-center gap-2">
+                        <Users size={14} className="text-amber-500" />
+                        Gekostet mit (Buddies)
+                    </label>
+                    <div className="flex flex-wrap gap-2">
+                        {buddies.map((buddy) => (
+                            <button
+                                key={buddy.id}
+                                type="button"
+                                onClick={() => toggleBuddy(buddy.id)}
+                                className={`px-3 py-1.5 rounded-full text-[10px] font-black uppercase transition-all flex items-center gap-1.5 border shadow-sm ${selectedBuddyIds.includes(buddy.id)
+                                    ? 'bg-amber-600 border-amber-600 text-white shadow-amber-600/20'
+                                    : 'bg-white dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700 text-zinc-500 dark:text-zinc-400 hover:border-amber-500/50'
+                                    }`}
+                            >
+                                {selectedBuddyIds.includes(buddy.id) && <Check size={10} />}
+                                {buddy.name}
+                            </button>
+                        ))}
+                    </div>
+                </div>
+            )}
+
             {error && (
                 <div className="p-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs rounded-lg border border-red-100 dark:border-red-900/50">
                     {error}