feat: refine session workflow with global state, quick tasting, and statistics

src/components/TastingNoteForm.tsx

@@ -2,9 +2,10 @@
 
 import React, { useState, useEffect } from 'react';
 import { saveTasting } from '@/services/save-tasting';
-import { Loader2, Send, Star, Users, Check } from 'lucide-react';
+import { Loader2, Send, Star, Users, Check, Sparkles, Droplets } from 'lucide-react';
 import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
 import { useI18n } from '@/i18n/I18nContext';
+import { useSession } from '@/context/SessionContext';
 
 interface Buddy {
     id: string;
@@ -28,6 +29,9 @@ export default function TastingNoteForm({ bottleId, sessionId }: TastingNoteForm
     const [error, setError] = useState<string | null>(null);
     const [buddies, setBuddies] = useState<Buddy[]>([]);
     const [selectedBuddyIds, setSelectedBuddyIds] = useState<string[]>([]);
+    const { activeSession } = useSession();
+
+    const effectiveSessionId = sessionId || activeSession?.id;
 
     useEffect(() => {
         const fetchData = async () => {
@@ -36,19 +40,21 @@ export default function TastingNoteForm({ bottleId, sessionId }: TastingNoteForm
             setBuddies(buddiesData || []);
 
             // If Session ID, fetch session participants and pre-select them
-            if (sessionId) {
+            if (effectiveSessionId) {
                 const { data: participants } = await supabase
                     .from('session_participants')
                     .select('buddy_id')
-                    .eq('session_id', sessionId);
+                    .eq('session_id', effectiveSessionId);
 
                 if (participants) {
                     setSelectedBuddyIds(participants.map(p => p.buddy_id));
                 }
+            } else {
+                setSelectedBuddyIds([]);
             }
         };
         fetchData();
-    }, [sessionId]);
+    }, [effectiveSessionId]);
 
     const toggleBuddy = (id: string) => {
         setSelectedBuddyIds(prev =>
@@ -64,7 +70,7 @@ export default function TastingNoteForm({ bottleId, sessionId }: TastingNoteForm
         try {
             const result = await saveTasting({
                 bottle_id: bottleId,
-                session_id: sessionId,
+                session_id: effectiveSessionId,
                 rating,
                 nose_notes: nose,
                 palate_notes: palate,
@@ -91,6 +97,18 @@ export default function TastingNoteForm({ bottleId, sessionId }: TastingNoteForm
 
     return (
         <form onSubmit={handleSubmit} className="space-y-6">
+            {activeSession && (
+                <div className="p-3 bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-900/30 rounded-2xl flex items-center gap-3 animate-in fade-in slide-in-from-top-2">
+                    <div className="bg-amber-600 text-white p-2 rounded-xl">
+                        <Sparkles size={16} />
+                    </div>
+                    <div className="min-w-0">
+                        <p className="text-[10px] font-black uppercase tracking-wider text-amber-700 dark:text-amber-400">Recording for Session</p>
+                        <p className="text-xs font-bold text-amber-900 dark:text-amber-200 truncate">{activeSession.name}</p>
+                    </div>
+                </div>
+            )}
+
             <div className="space-y-4">
                 <div className="flex items-center justify-between">
                     <label className="text-[11px] font-black text-zinc-400 uppercase tracking-widest flex items-center gap-2">