From e3af71c5848ddde6ab6bf1b2c9084d7092035dd5 Mon Sep 17 00:00:00 2001
From: robin <robin@fluffigewolke.de>
Date: Thu, 18 Dec 2025 12:08:24 +0100
Subject: [PATCH] feat: complete bottle-to-session integration flow

---
 src/app/bottles/[id]/page.tsx | 16 ++++++++++++++--
 src/components/BottleGrid.tsx | 23 +++++++++++++++++++----
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/app/bottles/[id]/page.tsx b/src/app/bottles/[id]/page.tsx
index 0ac0770..235c94e 100644
--- a/src/app/bottles/[id]/page.tsx
+++ b/src/app/bottles/[id]/page.tsx
@@ -2,7 +2,7 @@ import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
 import { cookies } from 'next/headers';
 import { notFound } from 'next/navigation';
 import Link from 'next/link';
-import { ChevronLeft, Calendar, Award, Droplets, MapPin, Tag, ExternalLink, Package } from 'lucide-react';
+import { ChevronLeft, Calendar, Award, Droplets, MapPin, Tag, ExternalLink, Package, PlusCircle } from 'lucide-react';
 import { getStorageUrl } from '@/lib/supabase';
 import TastingNoteForm from '@/components/TastingNoteForm';
 import StatusSwitcher from '@/components/StatusSwitcher';
@@ -48,13 +48,25 @@ export default async function BottlePage({
             <div className="max-w-4xl mx-auto space-y-6 md:space-y-12">
                 {/* Back Button */}
                 <Link
-                    href="/"
+                    href={`/${sessionId ? `?session_id=${sessionId}` : ''}`}
                     className="inline-flex items-center gap-2 text-zinc-500 hover:text-amber-600 transition-colors font-medium mb-4"
                 >
                     <ChevronLeft size={20} />
                     Zurück zur Sammlung
                 </Link>
 
+                {sessionId && (
+                    <div className="bg-amber-600/10 border border-amber-600/20 p-4 rounded-2xl flex items-center gap-4 text-amber-700 dark:text-amber-400 animate-in slide-in-from-top-4 duration-500">
+                        <div className="bg-amber-600 text-white p-2 rounded-xl">
+                            <PlusCircle size={20} />
+                        </div>
+                        <div>
+                            <p className="font-bold">Session Aktiv!</p>
+                            <p className="text-sm opacity-80">Jede Tasting Note, die du jetzt speicherst, wird automatisch deiner Session zugeordnet. 🥃</p>
+                        </div>
+                    </div>
+                )}
+
                 {/* Hero Section */}
                 <section className="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
                     <div className="aspect-[4/5] rounded-3xl overflow-hidden shadow-2xl border border-zinc-200 dark:border-zinc-800">
diff --git a/src/components/BottleGrid.tsx b/src/components/BottleGrid.tsx
index e313572..41f9272 100644
--- a/src/components/BottleGrid.tsx
+++ b/src/components/BottleGrid.tsx
@@ -2,8 +2,9 @@
 
 import React, { useState, useMemo } from 'react';
 import Link from 'next/link';
-import { Search, Filter, X, Calendar, Clock, Package, Lock, Unlock, Ghost, FlaskConical, AlertCircle, Trash2, AlertTriangle } from 'lucide-react';
+import { Search, Filter, X, Calendar, Clock, Package, Lock, Unlock, Ghost, FlaskConical, AlertCircle, Trash2, AlertTriangle, PlusCircle } from 'lucide-react';
 import { getStorageUrl } from '@/lib/supabase';
+import { useSearchParams } from 'next/navigation';
 
 interface Bottle {
     id: string;
@@ -22,9 +23,10 @@ interface Bottle {
 
 interface BottleCardProps {
     bottle: Bottle;
+    sessionId?: string | null;
 }
 
-function BottleCard({ bottle }: BottleCardProps) {
+function BottleCard({ bottle, sessionId }: BottleCardProps) {
     const statusConfig = {
         open: { icon: Unlock, color: 'bg-amber-500/80 border-amber-400/50', label: 'Offen' },
         sampled: { icon: FlaskConical, color: 'bg-purple-500/80 border-purple-400/50', label: 'Sample' },
@@ -36,7 +38,10 @@ function BottleCard({ bottle }: BottleCardProps) {
     const statusStyle = statusConfig[bottle.status as keyof typeof statusConfig] || statusConfig.sealed;
 
     return (
-        <Link href={`/bottles/${bottle.id}`} className="block h-full group">
+        <Link
+            href={`/bottles/${bottle.id}${sessionId ? `?session_id=${sessionId}` : ''}`}
+            className="block h-full group"
+        >
             <div className="h-full bg-white dark:bg-zinc-900 rounded-[2rem] overflow-hidden border border-zinc-200 dark:border-zinc-800 shadow-sm transition-all duration-300 hover:shadow-2xl hover:shadow-amber-900/10 hover:-translate-y-1 group-hover:border-amber-500/30">
                 <div className="aspect-[4/3] overflow-hidden bg-zinc-100 dark:bg-zinc-800 relative">
                     <img
@@ -46,6 +51,13 @@ function BottleCard({ bottle }: BottleCardProps) {
                     />
                     <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
 
+                    {sessionId && (
+                        <div className="absolute top-3 left-3 bg-amber-600 text-white text-[9px] font-black px-2 py-1.5 rounded-xl flex items-center gap-1.5 border border-amber-400 shadow-xl animate-in slide-in-from-left-4 duration-500">
+                            <PlusCircle size={12} strokeWidth={3} />
+                            ZU SESSION HINZUFÜGEN
+                        </div>
+                    )}
+
                     {bottle.last_tasted && (
                         <div className="absolute top-3 right-3 bg-zinc-900/80 backdrop-blur-md text-white text-[9px] font-black px-2 py-1 rounded-lg flex items-center gap-1 border border-white/10 ring-1 ring-black/5">
                             <Clock size={10} />
@@ -101,6 +113,9 @@ interface BottleGridProps {
 }
 
 export default function BottleGrid({ bottles }: BottleGridProps) {
+    const searchParams = useSearchParams();
+    const sessionId = searchParams.get('session_id');
+
     const [searchQuery, setSearchQuery] = useState('');
     const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
     const [selectedDistillery, setSelectedDistillery] = useState<string | null>(null);
@@ -269,7 +284,7 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
             {filteredBottles.length > 0 ? (
                 <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 w-full max-w-6xl mx-auto px-4">
                     {filteredBottles.map((bottle) => (
-                        <BottleCard key={bottle.id} bottle={bottle} />
+                        <BottleCard key={bottle.id} bottle={bottle} sessionId={sessionId} />
                     ))}
                 </div>
             ) : (