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

src/app/sessions/[id]/page.tsx

@@ -2,9 +2,11 @@
 
 import React, { useState, useEffect } from 'react';
 import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
-import { ChevronLeft, Users, Calendar, GlassWater, Plus, Trash2, Loader2, Sparkles, ChevronRight } from 'lucide-react';
+import { ChevronLeft, Users, Calendar, GlassWater, Plus, Trash2, Loader2, Sparkles, ChevronRight, Play } from 'lucide-react';
 import Link from 'next/link';
+import { useSession } from '@/context/SessionContext';
 import { useParams, useRouter } from 'next/navigation';
+import { useI18n } from '@/i18n/I18nContext';
 
 interface Buddy {
     id: string;
@@ -35,6 +37,7 @@ interface SessionTasting {
 }
 
 export default function SessionDetailPage() {
+    const { t } = useI18n();
     const { id } = useParams();
     const router = useRouter();
     const supabase = createClientComponentClient();
@@ -43,6 +46,7 @@ export default function SessionDetailPage() {
     const [tastings, setTastings] = useState<SessionTasting[]>([]);
     const [allBuddies, setAllBuddies] = useState<Buddy[]>([]);
     const [isLoading, setIsLoading] = useState(true);
+    const { activeSession, setActiveSession } = useSession();
     const [isAddingParticipant, setIsAddingParticipant] = useState(false);
 
     useEffect(() => {
@@ -175,8 +179,31 @@ export default function SessionDetailPage() {
                                     <Calendar size={16} className="text-zinc-400" />
                                     {new Date(session.scheduled_at).toLocaleDateString('de-DE')}
                                 </span>
+                                {tastings.length > 0 && (
+                                    <span className="flex items-center gap-1.5 transition-all animate-in fade-in slide-in-from-left-2">
+                                        <GlassWater size={16} className="text-zinc-400" />
+                                        {tastings.length} {tastings.length === 1 ? 'Whisky' : 'Whiskys'}
+                                    </span>
+                                )}
                             </div>
                         </div>
+
+                        <div className="flex gap-2">
+                            {activeSession?.id !== session.id ? (
+                                <button
+                                    onClick={() => setActiveSession({ id: session.id, name: session.name })}
+                                    className="px-6 py-3 bg-amber-600 hover:bg-amber-700 text-white rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 transition-all shadow-xl shadow-amber-600/20"
+                                >
+                                    <Play size={18} fill="currentColor" />
+                                    Session Starten
+                                </button>
+                            ) : (
+                                <div className="px-6 py-3 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 border border-zinc-200 dark:border-zinc-800">
+                                    <Sparkles size={18} className="text-amber-500" />
+                                    Aktiv
+                                </div>
+                            )}
+                        </div>
                     </div>
                 </header>
 
@@ -275,8 +302,8 @@ export default function SessionDetailPage() {
                         </div>
                     </section>
                 </div>
-            </div>
-        </main>
+            </div >
+        </main >
     );
 }