From 6f32bfa17fe37c754de86878b8d2293787d84af7 Mon Sep 17 00:00:00 2001
From: robin <robin@fluffigewolke.de>
Date: Thu, 18 Dec 2025 21:38:10 +0100
Subject: [PATCH] feat: add visual eyecatcher to session detail header

---
 src/app/sessions/[id]/page.tsx | 88 +++++++++++++++++++++++-----------
 1 file changed, 60 insertions(+), 28 deletions(-)

diff --git a/src/app/sessions/[id]/page.tsx b/src/app/sessions/[id]/page.tsx
index 083e039..860dbb9 100644
--- a/src/app/sessions/[id]/page.tsx
+++ b/src/app/sessions/[id]/page.tsx
@@ -35,6 +35,7 @@ interface SessionTasting {
         id: string;
         name: string;
         distillery: string;
+        image_url?: string | null;
     };
 }
 
@@ -83,8 +84,9 @@ export default function SessionDetailPage() {
             // Fetch Tastings in this session
             const { data: tastingData } = await supabase
                 .from('tastings')
-                .select('id, rating, bottles(id, name, distillery)')
-                .eq('session_id', id);
+                .select('id, rating, bottles(id, name, distillery, image_url)')
+                .eq('session_id', id)
+                .order('created_at', { ascending: false });
 
             setTastings((tastingData as any)?.map((t: any) => ({
                 id: t.id,
@@ -181,36 +183,66 @@ export default function SessionDetailPage() {
                 </Link>
 
                 {/* Hero */}
-                <header className="bg-white dark:bg-zinc-900 rounded-3xl p-8 border border-zinc-200 dark:border-zinc-800 shadow-xl relative overflow-hidden">
-                    <div className="absolute top-0 right-0 p-8 opacity-5">
+                <header className="bg-white dark:bg-zinc-900 rounded-3xl p-8 border border-zinc-200 dark:border-zinc-800 shadow-xl relative overflow-hidden group">
+                    {/* Visual Eyecatcher: Background Glow */}
+                    {tastings.length > 0 && tastings[0].bottles.image_url && (
+                        <div className="absolute top-0 right-0 w-1/2 h-full opacity-20 dark:opacity-30 pointer-events-none">
+                            <div
+                                className="absolute inset-0 bg-cover bg-center scale-150 blur-3xl transition-all duration-1000 group-hover:scale-125"
+                                style={{ backgroundImage: `url(${tastings[0].bottles.image_url})` }}
+                            />
+                        </div>
+                    )}
+
+                    <div className="absolute top-0 right-0 p-8 opacity-5 text-zinc-400">
                         <GlassWater size={120} />
                     </div>
-                    <div className="relative z-10 flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
-                        <div className="space-y-2">
-                            <div className="flex items-center gap-2 text-amber-600 font-black uppercase text-[10px] tracking-widest">
-                                <Sparkles size={14} />
-                                Tasting Session
-                            </div>
-                            <h1 className="text-4xl md:text-5xl font-black text-zinc-900 dark:text-white tracking-tighter">
-                                {session.name}
-                            </h1>
-                            <div className="flex flex-wrap items-center gap-3 sm:gap-6 text-zinc-500 font-bold text-sm">
-                                <span className="flex items-center gap-1.5 bg-zinc-50 dark:bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
-                                    <Calendar size={16} className="text-amber-600" />
-                                    {new Date(session.scheduled_at).toLocaleDateString('de-DE')}
-                                </span>
-                                {participants.length > 0 && (
-                                    <div className="flex items-center gap-2 bg-zinc-50 dark:bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
-                                        <Users size={16} className="text-amber-600" />
-                                        <AvatarStack names={participants.map(p => p.buddies.name)} limit={5} />
+
+                    <div className="relative z-10 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
+                        <div className="flex-1 flex flex-col md:flex-row gap-6 items-start md:items-center">
+                            {/* Visual Eyecatcher: Bottle Preview */}
+                            {tastings.length > 0 && tastings[0].bottles.image_url && (
+                                <div className="shrink-0 relative">
+                                    <div className="w-20 h-20 md:w-24 md:h-24 rounded-2xl bg-white dark:bg-zinc-800 border-2 border-amber-500/20 shadow-2xl overflow-hidden relative group-hover:rotate-3 transition-transform duration-500">
+                                        <img
+                                            src={tastings[0].bottles.image_url}
+                                            alt={tastings[0].bottles.name}
+                                            className="w-full h-full object-cover"
+                                        />
+                                        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
                                     </div>
-                                )}
-                                {tastings.length > 0 && (
-                                    <span className="flex items-center gap-1.5 bg-zinc-50 dark:bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm transition-all animate-in fade-in slide-in-from-left-2">
-                                        <GlassWater size={16} className="text-amber-600" />
-                                        {tastings.length} {tastings.length === 1 ? 'Whisky' : 'Whiskys'}
+                                    <div className="absolute -bottom-2 -right-2 bg-amber-600 text-white text-[10px] font-black px-2 py-1 rounded-lg shadow-lg rotate-12">
+                                        LATEST
+                                    </div>
+                                </div>
+                            )}
+
+                            <div className="space-y-2">
+                                <div className="flex items-center gap-2 text-amber-600 font-black uppercase text-[10px] tracking-widest">
+                                    <Sparkles size={14} />
+                                    Tasting Session
+                                </div>
+                                <h1 className="text-4xl md:text-5xl font-black text-zinc-900 dark:text-white tracking-tighter">
+                                    {session.name}
+                                </h1>
+                                <div className="flex flex-wrap items-center gap-3 sm:gap-6 text-zinc-500 font-bold text-sm">
+                                    <span className="flex items-center gap-1.5 bg-zinc-50 dark:bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
+                                        <Calendar size={16} className="text-amber-600" />
+                                        {new Date(session.scheduled_at).toLocaleDateString('de-DE')}
                                     </span>
-                                )}
+                                    {participants.length > 0 && (
+                                        <div className="flex items-center gap-2 bg-zinc-50 dark:bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
+                                            <Users size={16} className="text-amber-600" />
+                                            <AvatarStack names={participants.map(p => p.buddies.name)} limit={5} />
+                                        </div>
+                                    )}
+                                    {tastings.length > 0 && (
+                                        <span className="flex items-center gap-1.5 bg-zinc-50 dark:bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm transition-all animate-in fade-in slide-in-from-left-2">
+                                            <GlassWater size={16} className="text-amber-600" />
+                                            {tastings.length} {tastings.length === 1 ? 'Whisky' : 'Whiskys'}
+                                        </span>
+                                    )}
+                                </div>
                             </div>
                         </div>