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

src/components/ActiveSessionBanner.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import React from 'react';
+import { useSession } from '@/context/SessionContext';
+import { GlassWater, X, ArrowRight, Sparkles } from 'lucide-react';
+import Link from 'next/link';
+import { useI18n } from '@/i18n/I18nContext';
+
+export default function ActiveSessionBanner() {
+    const { activeSession, setActiveSession } = useSession();
+    const { t } = useI18n();
+
+    if (!activeSession) return null;
+
+    return (
+        <div className="fixed top-0 left-0 right-0 z-[100] animate-in slide-in-from-top duration-500">
+            <div className="bg-amber-600 text-white px-4 py-2 flex items-center justify-between shadow-lg">
+                <Link
+                    href={`/sessions/${activeSession.id}`}
+                    className="flex items-center gap-3 flex-1 min-w-0"
+                >
+                    <div className="bg-white/20 p-1.5 rounded-lg shrink-0">
+                        <Sparkles size={16} className="text-white animate-pulse" />
+                    </div>
+                    <div className="min-w-0">
+                        <p className="text-[10px] font-black uppercase tracking-wider opacity-90 leading-none mb-1">{t('session.activeSession')}</p>
+                        <p className="text-sm font-bold truncate leading-none">{activeSession.name}</p>
+                    </div>
+                    <ArrowRight size={14} className="opacity-50 ml-2" />
+                </Link>
+
+                <button
+                    onClick={() => setActiveSession(null)}
+                    className="ml-4 p-2 hover:bg-white/10 rounded-full transition-colors"
+                    title="End Session"
+                >
+                    <X size={20} />
+                </button>
+            </div>
+        </div>
+    );
+}