init

src/app/auth/callback/route.ts

@@ -0,0 +1,16 @@
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
+import { cookies } from 'next/headers';
+import { NextResponse } from 'next/server';
+
+export async function GET(request: Request) {
+    const requestUrl = new URL(request.url);
+    const code = requestUrl.searchParams.get('code');
+
+    if (code) {
+        const supabase = createRouteHandlerClient({ cookies });
+        await supabase.auth.exchangeCodeForSession(code);
+    }
+
+    // URL to redirect to after sign in process completes
+    return NextResponse.redirect(requestUrl.origin);
+}

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

@@ -0,0 +1,190 @@
+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 TastingNoteForm from '@/components/TastingNoteForm';
+import StatusSwitcher from '@/components/StatusSwitcher';
+
+export default async function BottlePage({ params }: { params: { id: string } }) {
+    const supabase = createServerComponentClient({ cookies });
+
+    const { data: bottle } = await supabase
+        .from('bottles')
+        .select('*')
+        .eq('id', params.id)
+        .single();
+
+    if (!bottle) {
+        notFound();
+    }
+
+    const { data: tastings } = await supabase
+        .from('tastings')
+        .select('*')
+        .eq('bottle_id', params.id)
+        .order('created_at', { ascending: false });
+
+    return (
+        <main className="min-h-screen bg-zinc-50 dark:bg-black p-6 md:p-12 lg:p-24">
+            <div className="max-w-4xl mx-auto space-y-12">
+                {/* Back Button */}
+                <Link
+                    href="/"
+                    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>
+
+                {/* 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">
+                        <img
+                            src={bottle.image_url}
+                            alt={bottle.name}
+                            className="w-full h-full object-cover"
+                        />
+                    </div>
+
+                    <div className="space-y-6">
+                        <div>
+                            <h1 className="text-4xl font-black text-zinc-900 dark:text-white tracking-tight leading-tight">
+                                {bottle.name}
+                            </h1>
+                            <p className="text-xl text-amber-600 font-bold mt-1 uppercase tracking-widest">{bottle.distillery}</p>
+
+                            {bottle.whiskybase_id && (
+                                <div className="mt-4">
+                                    <a
+                                        href={`https://www.whiskybase.com/whiskies/whisky/${bottle.whiskybase_id}`}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="inline-flex items-center gap-2 px-4 py-2 bg-[#db0000] text-white rounded-xl text-sm font-bold shadow-lg shadow-red-600/20 hover:scale-[1.05] transition-transform"
+                                    >
+                                        <ExternalLink size={16} />
+                                        Whiskybase ID: {bottle.whiskybase_id}
+                                    </a>
+                                </div>
+                            )}
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm flex flex-col justify-between">
+                                <div>
+                                    <div className="flex items-center gap-2 text-zinc-400 text-xs font-bold uppercase mb-1">
+                                        <Tag size={14} /> Kategorie
+                                    </div>
+                                    <div className="font-semibold dark:text-zinc-200">{bottle.category || '-'}</div>
+                                </div>
+                            </div>
+                            <div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
+                                <div className="flex items-center gap-2 text-zinc-400 text-xs font-bold uppercase mb-1">
+                                    <Droplets size={14} /> Alkoholgehalt
+                                </div>
+                                <div className="font-semibold dark:text-zinc-200">{bottle.abv}% Vol.</div>
+                            </div>
+                            <div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
+                                <div className="flex items-center gap-2 text-zinc-400 text-xs font-bold uppercase mb-1">
+                                    <Award size={14} /> Alter
+                                </div>
+                                <div className="font-semibold dark:text-zinc-200">{bottle.age ? `${bottle.age} Jahre` : '-'}</div>
+                            </div>
+                            <div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
+                                <div className="flex items-center gap-2 text-zinc-400 text-xs font-bold uppercase mb-1">
+                                    <Calendar size={14} /> Zuletzt verkostet
+                                </div>
+                                <div className="font-semibold dark:text-zinc-200">
+                                    {tastings && tastings.length > 0
+                                        ? new Date(tastings[0].created_at).toLocaleDateString('de-DE')
+                                        : 'Noch nie'}
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="pt-2">
+                            <StatusSwitcher bottleId={bottle.id} currentStatus={bottle.status} />
+                        </div>
+                    </div>
+                </section>
+
+                <hr className="border-zinc-200 dark:border-zinc-800" />
+
+                {/* Tasting Notes Section */}
+                <section className="space-y-8">
+                    <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
+                        <div>
+                            <h2 className="text-3xl font-black text-zinc-900 dark:text-white tracking-tight">Tasting Notes</h2>
+                            <p className="text-zinc-500 mt-1">Hier findest du deine bisherigen Eindrücke.</p>
+                        </div>
+                    </div>
+
+                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
+                        {/* Form */}
+                        <div className="lg:col-span-1 border border-zinc-200 dark:border-zinc-800 rounded-3xl p-6 bg-white dark:bg-zinc-900/50 sticky top-24">
+                            <h3 className="text-lg font-bold mb-6 flex items-center gap-2 text-amber-600">
+                                <Droplets size={20} /> Neu Verkosten
+                            </h3>
+                            <TastingNoteForm bottleId={bottle.id} />
+                        </div>
+
+                        {/* List */}
+                        <div className="lg:col-span-2 space-y-6">
+                            {!tastings || tastings.length === 0 ? (
+                                <div className="text-center py-12 bg-zinc-100 dark:bg-zinc-900/30 rounded-3xl border-2 border-dashed border-zinc-200 dark:border-zinc-800">
+                                    <p className="text-zinc-400 italic">Noch keine Tasting Notes vorhanden. Zeit für ein Glas? 🥃</p>
+                                </div>
+                            ) : (
+                                tastings.map((note) => (
+                                    <div key={note.id} className="bg-white dark:bg-zinc-900 p-6 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-4 hover:border-amber-500/30 transition-colors">
+                                        <div className="flex justify-between items-center">
+                                            <div className="flex items-center gap-3">
+                                                <div className="bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 px-3 py-1 rounded-full text-sm font-black ring-1 ring-amber-500/20">
+                                                    {note.rating}/100
+                                                </div>
+                                                <span className={`text-[10px] font-black px-2 py-0.5 rounded uppercase tracking-tighter ${note.is_sample
+                                                    ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
+                                                    : 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+                                                    }`}>
+                                                    {note.is_sample ? 'Sample' : 'Bottle'}
+                                                </span>
+                                                <div className="text-xs text-zinc-500 font-bold bg-zinc-100 dark:bg-zinc-800 px-2 py-1 rounded">
+                                                    {new Date(note.created_at).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
+                                                </div>
+                                            </div>
+                                            <div className="text-xs text-zinc-400 font-black tracking-widest uppercase flex items-center gap-1">
+                                                <Calendar size={12} />
+                                                {new Date(note.created_at).toLocaleDateString('de-DE')}
+                                            </div>
+                                        </div>
+
+                                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                                            {note.nose_notes && (
+                                                <div>
+                                                    <div className="text-xs font-bold text-zinc-400 uppercase tracking-tighter mb-1">Nose</div>
+                                                    <p className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed italic">"{note.nose_notes}"</p>
+                                                </div>
+                                            )}
+                                            {note.palate_notes && (
+                                                <div>
+                                                    <div className="text-xs font-bold text-zinc-400 uppercase tracking-tighter mb-1">Palate</div>
+                                                    <p className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed italic">"{note.palate_notes}"</p>
+                                                </div>
+                                            )}
+                                            {note.finish_notes && (
+                                                <div>
+                                                    <div className="text-xs font-bold text-zinc-400 uppercase tracking-tighter mb-1">Finish</div>
+                                                    <p className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed italic">"{note.finish_notes}"</p>
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                ))
+                            )}
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </main>
+    );
+}

src/app/globals.css

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}

src/app/layout.tsx

@@ -0,0 +1,23 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+    title: "Whisky Vault",
+    description: "Your digital whisky collection",
+    manifest: "/manifest.json",
+};
+
+export default function RootLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <html lang="en">
+            <body className={inter.className}>{children}</body>
+        </html>
+    );
+}

src/app/page.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
+import CameraCapture from "@/components/CameraCapture";
+import BottleGrid from "@/components/BottleGrid";
+import AuthForm from "@/components/AuthForm";
+
+export default function Home() {
+    const supabase = createClientComponentClient();
+    const [bottles, setBottles] = useState<any[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [user, setUser] = useState<any>(null); // Added user state
+
+    useEffect(() => {
+        // Check session
+        const checkUser = async () => {
+            const { data: { session } } = await supabase.auth.getSession();
+            setUser(session?.user ?? null);
+            if (session?.user) {
+                fetchCollection();
+            } else {
+                setIsLoading(false);
+            }
+        };
+
+        checkUser();
+
+        // Listen for auth changes
+        const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
+            setUser(session?.user ?? null);
+            if (session?.user) {
+                fetchCollection();
+            } else {
+                setBottles([]);
+            }
+        });
+
+        return () => subscription.unsubscribe();
+    }, []);
+
+    const fetchCollection = async () => {
+        setIsLoading(true);
+        try {
+            // Fetch bottles with their latest tasting date
+            const { data, error } = await supabase
+                .from('bottles')
+                .select(`
+          *,
+          tastings (
+            created_at
+          )
+        `)
+                .order('created_at', { ascending: false });
+
+            if (error) throw error;
+
+            // Process data to get the absolute latest tasting date for each bottle
+            const processedBottles = (data || []).map(bottle => {
+                const lastTasted = bottle.tastings && bottle.tastings.length > 0
+                    ? bottle.tastings.reduce((latest: string, current: any) =>
+                        new Date(current.created_at) > new Date(latest) ? current.created_at : latest,
+                        bottle.tastings[0].created_at
+                    )
+                    : null;
+
+                return {
+                    ...bottle,
+                    last_tasted: lastTasted
+                };
+            });
+
+            setBottles(processedBottles);
+        } catch (err) {
+            console.error('Error fetching collection:', err);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleLogout = async () => {
+        await supabase.auth.signOut();
+    };
+
+    if (!user) {
+        return (
+            <main className="flex min-h-screen flex-col items-center justify-center p-6 bg-zinc-50 dark:bg-black">
+                <div className="mb-12 text-center">
+                    <h1 className="text-5xl font-black text-zinc-900 dark:text-white tracking-tighter mb-4">
+                        WHISKY<span className="text-amber-600">VAULT</span>
+                    </h1>
+                    <p className="text-zinc-500 max-w-sm mx-auto">Scanne deine Flaschen, tracke deine Tastings und verwalte deinen Keller.</p>
+                </div>
+                <AuthForm />
+            </main>
+        );
+    }
+
+    return (
+        <main className="flex min-h-screen flex-col items-center gap-12 p-6 md:p-24 bg-zinc-50 dark:bg-black">
+            <div className="z-10 max-w-5xl w-full flex flex-col items-center gap-8">
+                <header className="w-full flex justify-between items-center">
+                    <h1 className="text-4xl font-black text-zinc-900 dark:text-white tracking-tighter">
+                        WHISKY<span className="text-amber-600">VAULT</span>
+                    </h1>
+                    <button
+                        onClick={handleLogout}
+                        className="text-sm font-medium text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-300 transition-colors"
+                    >
+                        Abmelden
+                    </button>
+                </header>
+
+                <CameraCapture onSaveComplete={fetchCollection} />
+
+                <div className="w-full mt-12">
+                    <h2 className="text-2xl font-bold mb-6 text-zinc-800 dark:text-zinc-100 flex items-center gap-3">
+                        Deine Sammlung
+                        <span className="text-sm font-normal text-zinc-500 bg-zinc-100 dark:bg-zinc-800 px-3 py-1 rounded-full">
+                            {bottles.length}
+                        </span>
+                    </h2>
+
+                    {isLoading ? (
+                        <div className="flex justify-center py-12">
+                            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-amber-600"></div>
+                        </div>
+                    ) : (
+                        <BottleGrid bottles={bottles} />
+                    )}
+                </div>
+            </div>
+        </main>
+    );
+}

src/components/AuthForm.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import React, { useState } from 'react';
+import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
+import { LogIn, UserPlus, Mail, Lock, Loader2, AlertCircle } from 'lucide-react';
+
+export default function AuthForm() {
+    const supabase = createClientComponentClient();
+    const [isLogin, setIsLogin] = useState(true);
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [message, setMessage] = useState<string | null>(null);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setLoading(true);
+        setError(null);
+        setMessage(null);
+
+        try {
+            if (isLogin) {
+                const { error } = await supabase.auth.signInWithPassword({ email, password });
+                if (error) throw error;
+            } else {
+                const { error } = await supabase.auth.signUp({
+                    email,
+                    password,
+                    options: {
+                        emailRedirectTo: `${window.location.origin}/auth/callback`,
+                    }
+                });
+                if (error) throw error;
+                setMessage('Checke deine E-Mails, um dein Konto zu bestätigen!');
+            }
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="w-full max-w-md p-8 bg-white dark:bg-zinc-900 rounded-3xl shadow-2xl border border-zinc-200 dark:border-zinc-800">
+            <div className="flex flex-col items-center mb-8">
+                <div className="w-16 h-16 bg-amber-100 dark:bg-amber-900/30 rounded-2xl flex items-center justify-center mb-4">
+                    {isLogin ? <LogIn className="text-amber-600" size={32} /> : <UserPlus className="text-amber-600" size={32} />}
+                </div>
+                <h2 className="text-3xl font-black text-zinc-900 dark:text-white tracking-tight">
+                    {isLogin ? 'Willkommen zurück' : 'Vault erstellen'}
+                </h2>
+                <p className="text-zinc-500 dark:text-zinc-400 mt-2 text-center text-sm">
+                    {isLogin
+                        ? 'Logge dich ein, um auf deine Sammlung zuzugreifen.'
+                        : 'Starte heute mit deinem digitalen Whisky-Vault.'}
+                </p>
+            </div>
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+                <div className="space-y-2">
+                    <label className="text-sm font-semibold text-zinc-700 dark:text-zinc-300 ml-1">E-Mail</label>
+                    <div className="relative">
+                        <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={18} />
+                        <input
+                            type="email"
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                            placeholder="name@beispiel.de"
+                            required
+                            className="w-full pl-10 pr-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none transition-all dark:text-white"
+                        />
+                    </div>
+                </div>
+
+                <div className="space-y-2">
+                    <label className="text-sm font-semibold text-zinc-700 dark:text-zinc-300 ml-1">Passwort</label>
+                    <div className="relative">
+                        <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={18} />
+                        <input
+                            type="password"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            placeholder="••••••••"
+                            required
+                            className="w-full pl-10 pr-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none transition-all dark:text-white"
+                        />
+                    </div>
+                </div>
+
+                {error && (
+                    <div className="flex items-center gap-2 p-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-sm rounded-lg border border-red-100 dark:border-red-900/50">
+                        <AlertCircle size={16} />
+                        {error}
+                    </div>
+                )}
+
+                {message && (
+                    <div className="p-3 bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 text-sm rounded-lg border border-green-100 dark:border-green-900/50">
+                        {message}
+                    </div>
+                )}
+
+                <button
+                    type="submit"
+                    disabled={loading}
+                    className="w-full py-4 bg-amber-600 hover:bg-amber-700 text-white font-bold rounded-xl shadow-lg shadow-amber-600/20 transition-all active:scale-[0.98] disabled:opacity-50 flex items-center justify-center gap-2"
+                >
+                    {loading ? <Loader2 className="animate-spin" size={20} /> : (isLogin ? 'Einloggen' : 'Konto erstellen')}
+                </button>
+            </form>
+
+            <div className="mt-6 text-center">
+                <button
+                    onClick={() => setIsLogin(!isLogin)}
+                    className="text-sm font-medium text-amber-600 hover:text-amber-700 transition-colors"
+                >
+                    {isLogin ? 'Noch kein Konto? Registrieren' : 'Bereits ein Konto? Einloggen'}
+                </button>
+            </div>
+        </div>
+    );
+}

src/components/BottleGrid.tsx

@@ -0,0 +1,248 @@
+'use client';
+
+import React, { useState, useMemo } from 'react';
+import Link from 'next/link';
+import { Search, Filter, X, Calendar, Clock, Package, Lock, Unlock, Ghost, FlaskConical } from 'lucide-react';
+
+interface BottleCardProps {
+    bottle: any;
+}
+
+function BottleCard({ bottle }: BottleCardProps) {
+    return (
+        <Link href={`/bottles/${bottle.id}`} className="block">
+            <div className="bg-white dark:bg-zinc-900 rounded-2xl overflow-hidden border border-zinc-200 dark:border-zinc-800 shadow-md transition-all hover:scale-[1.02] hover:shadow-xl group relative">
+                <div className="aspect-[3/2] overflow-hidden bg-zinc-100 dark:bg-zinc-800 relative">
+                    <img
+                        src={bottle.image_url}
+                        alt={bottle.name}
+                        className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+                    />
+                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors" />
+
+                    {bottle.last_tasted && (
+                        <div className="absolute top-3 right-3 bg-zinc-900/80 backdrop-blur-md text-white text-[10px] font-bold px-2 py-1 rounded-md flex items-center gap-1 border border-white/10">
+                            <Calendar size={10} />
+                            ZULETZT: {new Date(bottle.last_tasted).toLocaleDateString('de-DE')}
+                        </div>
+                    )}
+
+                    <div className={`absolute bottom-3 left-3 px-2 py-1 rounded-md text-[10px] font-black uppercase flex items-center gap-1.5 backdrop-blur-md border ${bottle.status === 'open'
+                        ? 'bg-amber-500/80 text-white border-amber-400/50'
+                        : bottle.status === 'sampled'
+                            ? 'bg-purple-500/80 text-white border-purple-400/50'
+                            : bottle.status === 'empty'
+                                ? 'bg-zinc-500/80 text-white border-zinc-400/50'
+                                : 'bg-blue-600/80 text-white border-blue-400/50'
+                        }`}>
+                        {bottle.status === 'open' ? <Unlock size={10} /> : bottle.status === 'sampled' ? <FlaskConical size={10} /> : bottle.status === 'empty' ? <Ghost size={10} /> : <Lock size={10} />}
+                        {bottle.status}
+                    </div>
+                </div>
+                <div className="p-4">
+                    <h3 className="font-bold text-lg text-zinc-800 dark:text-zinc-100 truncate">{bottle.name}</h3>
+                    <p className="text-zinc-500 text-sm truncate">{bottle.distillery}</p>
+
+                    <div className="mt-2 flex items-center gap-1.5 text-[10px] font-bold text-zinc-400 uppercase tracking-tight">
+                        <Clock size={12} />
+                        Hinzugefügt am {new Date(bottle.created_at).toLocaleDateString('de-DE')}
+                    </div>
+
+                    <div className="mt-3 flex items-center justify-between">
+                        <span className="px-2 py-1 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 text-xs font-semibold rounded-md">
+                            {bottle.category}
+                        </span>
+                        <span className="text-xs text-zinc-400">
+                            {bottle.abv}% Vol.
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </Link>
+    );
+}
+
+interface BottleGridProps {
+    bottles: any[];
+}
+
+export default function BottleGrid({ bottles }: BottleGridProps) {
+    const [searchQuery, setSearchQuery] = useState('');
+    const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+    const [selectedDistillery, setSelectedDistillery] = useState<string | null>(null);
+    const [selectedStatus, setSelectedStatus] = useState<string | null>(null);
+    const [sortBy, setSortBy] = useState<'name' | 'last_tasted' | 'created_at'>('created_at');
+
+    const categories = useMemo(() => {
+        const cats = new Set(bottles.map(b => b.category).filter(Boolean));
+        return Array.from(cats).sort() as string[];
+    }, [bottles]);
+
+    const distilleries = useMemo(() => {
+        const dists = new Set(bottles.map(b => b.distillery).filter(Boolean));
+        return Array.from(dists).sort() as string[];
+    }, [bottles]);
+
+    const filteredBottles = useMemo(() => {
+        let result = bottles.filter((bottle) => {
+            const matchesSearch =
+                bottle.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                bottle.distillery?.toLowerCase().includes(searchQuery.toLowerCase());
+
+            const matchesCategory = !selectedCategory || bottle.category === selectedCategory;
+            const matchesDistillery = !selectedDistillery || bottle.distillery === selectedDistillery;
+            const matchesStatus = !selectedStatus || bottle.status === selectedStatus;
+
+            return matchesSearch && matchesCategory && matchesDistillery && matchesStatus;
+        });
+
+        // Sorting logic
+        return result.sort((a, b) => {
+            if (sortBy === 'name') {
+                return (a.name || '').localeCompare(b.name || '');
+            } else if (sortBy === 'last_tasted') {
+                const dateA = a.last_tasted ? new Date(a.last_tasted).getTime() : 0;
+                const dateB = b.last_tasted ? new Date(b.last_tasted).getTime() : 0;
+                return dateB - dateA;
+            } else { // sortBy === 'created_at'
+                return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
+            }
+        });
+    }, [bottles, searchQuery, selectedCategory, selectedDistillery, sortBy]);
+
+    if (!bottles || bottles.length === 0) {
+        return (
+            <div className="text-center py-12 p-8 bg-zinc-50 dark:bg-zinc-900/50 rounded-3xl border-2 border-dashed border-zinc-200 dark:border-zinc-800">
+                <p className="text-zinc-500">Noch keine Flaschen im Vault. Zeit für den ersten Scan! 🥃</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="w-full space-y-8">
+            {/* Search and Filters */}
+            <div className="w-full max-w-6xl mx-auto px-4 space-y-6">
+                <div className="flex flex-col md:flex-row gap-4">
+                    <div className="relative flex-1">
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={18} />
+                        <input
+                            type="text"
+                            placeholder="Suchen nach Name oder Distille..."
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                            className="w-full pl-10 pr-4 py-3 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl focus:ring-2 focus:ring-amber-500 outline-none transition-all"
+                        />
+                        {searchQuery && (
+                            <button
+                                onClick={() => setSearchQuery('')}
+                                className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600"
+                            >
+                                <X size={16} />
+                            </button>
+                        )}
+                    </div>
+
+                    <select
+                        value={sortBy}
+                        onChange={(e) => setSortBy(e.target.value as any)}
+                        className="px-4 py-3 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl text-sm font-medium focus:ring-2 focus:ring-amber-500 outline-none cursor-pointer"
+                    >
+                        <option value="created_at">Neueste zuerst</option>
+                        <option value="last_tasted">Zuletzt verkostet</option>
+                        <option value="name">Alphabetisch</option>
+                    </select>
+                </div>
+
+                <div className="space-y-4">
+                    {/* Category Filter */}
+                    <div className="flex flex-col gap-2">
+                        <span className="text-[10px] font-black uppercase tracking-widest text-zinc-400 px-1">Kategorie</span>
+                        <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
+                            <button
+                                onClick={() => setSelectedCategory(null)}
+                                className={`px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all border ${selectedCategory === null
+                                    ? 'bg-amber-600 border-amber-600 text-white shadow-lg shadow-amber-600/20'
+                                    : 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400'
+                                    }`}
+                            >
+                                ALLE
+                            </button>
+                            {categories.map((cat) => (
+                                <button
+                                    key={cat}
+                                    onClick={() => setSelectedCategory(cat)}
+                                    className={`px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all border ${selectedCategory === cat
+                                        ? 'bg-amber-600 border-amber-600 text-white shadow-lg shadow-amber-600/20'
+                                        : 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400'
+                                        }`}
+                                >
+                                    {cat.toUpperCase()}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* Distillery Filter */}
+                    <div className="flex flex-col gap-2">
+                        <span className="text-[10px] font-black uppercase tracking-widest text-zinc-400 px-1">Distillery</span>
+                        <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
+                            <button
+                                onClick={() => setSelectedDistillery(null)}
+                                className={`px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all border ${selectedDistillery === null
+                                    ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 border-zinc-900 dark:border-white'
+                                    : 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400'
+                                    }`}
+                            >
+                                ALLE
+                            </button>
+                            {distilleries.map((dist) => (
+                                <button
+                                    key={dist}
+                                    onClick={() => setSelectedDistillery(dist)}
+                                    className={`px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all border ${selectedDistillery === dist
+                                        ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 border-zinc-900 dark:border-white'
+                                        : 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400'
+                                        }`}
+                                >
+                                    {dist.toUpperCase()}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* Status Filter */}
+                    <div className="flex flex-col gap-2">
+                        <span className="text-[10px] font-black uppercase tracking-widest text-zinc-400 px-1">Status</span>
+                        <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
+                            {['sealed', 'open', 'sampled', 'empty'].map((status) => (
+                                <button
+                                    key={status}
+                                    onClick={() => setSelectedStatus(selectedStatus === status ? null : status)}
+                                    className={`px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all border ${selectedStatus === status
+                                        ? status === 'open' ? 'bg-amber-500 border-amber-500 text-white' : status === 'sampled' ? 'bg-purple-500 border-purple-500 text-white' : status === 'empty' ? 'bg-zinc-500 border-zinc-500 text-white' : 'bg-blue-600 border-blue-600 text-white'
+                                        : 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400'
+                                        }`}
+                                >
+                                    {status.toUpperCase()}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Grid */}
+            {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} />
+                    ))}
+                </div>
+            ) : (
+                <div className="text-center py-12">
+                    <p className="text-zinc-500 italic">Keine Flaschen gefunden, die deinen Filtern entsprechen. 🔎</p>
+                </div>
+            )}
+        </div>
+    );
+}

src/components/CameraCapture.tsx

@@ -0,0 +1,236 @@
+'use client';
+
+import React, { useRef, useState } from 'react';
+import { Camera, Upload, CheckCircle2, AlertCircle, Sparkles } from 'lucide-react';
+import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
+import { analyzeBottle } from '@/services/analyze-bottle';
+import { saveBottle } from '@/services/save-bottle';
+import { BottleMetadata } from '@/types/whisky';
+
+interface CameraCaptureProps {
+    onImageCaptured?: (base64Image: string) => void;
+    onAnalysisComplete?: (data: BottleMetadata) => void;
+    onSaveComplete?: () => void;
+}
+
+export default function CameraCapture({ onImageCaptured, onAnalysisComplete, onSaveComplete }: CameraCaptureProps) {
+    const supabase = createClientComponentClient();
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+    const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [analysisResult, setAnalysisResult] = useState<BottleMetadata | null>(null);
+
+    const handleCapture = async (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (!file) return;
+
+        setIsProcessing(true);
+        setError(null);
+        setAnalysisResult(null);
+
+        try {
+            const compressedBase64 = await compressImage(file);
+            setPreviewUrl(compressedBase64);
+
+            if (onImageCaptured) {
+                onImageCaptured(compressedBase64);
+            }
+
+            const response = await analyzeBottle(compressedBase64);
+
+            if (response.success && response.data) {
+                setAnalysisResult(response.data);
+                if (onAnalysisComplete) {
+                    onAnalysisComplete(response.data);
+                }
+            } else {
+                setError(response.error || 'Analyse fehlgeschlagen.');
+            }
+        } catch (err) {
+            console.error('Processing failed:', err);
+            setError('Verarbeitung fehlgeschlagen. Bitte erneut versuchen.');
+        } finally {
+            setIsProcessing(false);
+        }
+    };
+
+    const handleSave = async () => {
+        if (!analysisResult || !previewUrl) return;
+
+        setIsSaving(true);
+        setError(null);
+
+        try {
+            // Get current user (simple check for now, can be improved with Auth)
+            const { data: { user } } = await supabase.auth.getUser();
+            if (!user) {
+                throw new Error('Bitte melde dich an, um Flaschen zu speichern.');
+            }
+
+            const response = await saveBottle(analysisResult, previewUrl, user.id);
+
+            if (response.success) {
+                setPreviewUrl(null);
+                setAnalysisResult(null);
+                if (onSaveComplete) onSaveComplete();
+                // Optionale Erfolgsmeldung oder Redirect
+            } else {
+                setError(response.error || 'Speichern fehlgeschlagen.');
+            }
+        } catch (err) {
+            console.error('Save failed:', err);
+            setError(err instanceof Error ? err.message : 'Speichern fehlgeschlagen.');
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    const compressImage = (file: File): Promise<string> => {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = (event) => {
+                const img = new Image();
+                img.src = event.target?.result as string;
+                img.onload = () => {
+                    const canvas = document.createElement('canvas');
+                    const MAX_WIDTH = 1024;
+                    let width = img.width;
+                    let height = img.height;
+
+                    if (width > MAX_WIDTH) {
+                        height = (height * MAX_WIDTH) / width;
+                        width = MAX_WIDTH;
+                    }
+
+                    canvas.width = width;
+                    canvas.height = height;
+
+                    const ctx = canvas.getContext('2d');
+                    if (!ctx) {
+                        reject(new Error('Canvas context not available'));
+                        return;
+                    }
+
+                    ctx.drawImage(img, 0, 0, width, height);
+                    const base64 = canvas.toDataURL('image/jpeg', 0.8);
+                    resolve(base64);
+                };
+                img.onerror = reject;
+            };
+            reader.onerror = reject;
+        });
+    };
+
+    const triggerUpload = () => {
+        fileInputRef.current?.click();
+    };
+
+    return (
+        <div className="flex flex-col items-center gap-6 w-full max-w-md mx-auto p-6 bg-white dark:bg-zinc-900 rounded-3xl shadow-2xl border border-zinc-200 dark:border-zinc-800 transition-all hover:shadow-whisky-amber/20">
+            <h2 className="text-2xl font-bold text-zinc-800 dark:text-zinc-100 italic">Magic Shot</h2>
+
+            <div
+                className="relative group cursor-pointer w-full aspect-square rounded-2xl border-2 border-dashed border-zinc-300 dark:border-zinc-700 overflow-hidden flex items-center justify-center bg-zinc-50 dark:bg-zinc-800/50 hover:border-amber-500 transition-colors"
+                onClick={triggerUpload}
+            >
+                {previewUrl ? (
+                    <img src={previewUrl} alt="Preview" className="w-full h-full object-cover" />
+                ) : (
+                    <div className="flex flex-col items-center gap-2 text-zinc-400 group-hover:text-amber-500 transition-colors">
+                        <Camera size={48} strokeWidth={1.5} />
+                        <span className="text-sm font-medium">Flasche scannen</span>
+                    </div>
+                )}
+
+                {isProcessing && (
+                    <div className="absolute inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center">
+                        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white"></div>
+                    </div>
+                )}
+            </div>
+
+            <input
+                type="file"
+                accept="image/*"
+                capture="environment"
+                ref={fileInputRef}
+                onChange={handleCapture}
+                className="hidden"
+            />
+
+            <button
+                onClick={previewUrl && analysisResult ? handleSave : triggerUpload}
+                disabled={isProcessing || isSaving}
+                className="w-full py-4 px-6 bg-amber-600 hover:bg-amber-700 text-white rounded-xl font-semibold flex items-center justify-center gap-2 transition-all active:scale-[0.98] shadow-lg shadow-amber-600/20 disabled:opacity-50"
+            >
+                {isSaving ? (
+                    <>
+                        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
+                        Wird gespeichert...
+                    </>
+                ) : previewUrl && analysisResult ? (
+                    <>
+                        <CheckCircle2 size={20} />
+                        Im Vault speichern
+                    </>
+                ) : previewUrl ? (
+                    <>
+                        <Upload size={20} />
+                        Neu aufnehmen
+                    </>
+                ) : (
+                    <>
+                        <Camera size={20} />
+                        Kamera öffnen
+                    </>
+                )}
+            </button>
+
+            {error && (
+                <div className="flex items-center gap-2 text-red-500 text-sm bg-red-50 dark:bg-red-900/10 p-3 rounded-lg w-full">
+                    <AlertCircle size={16} />
+                    {error}
+                </div>
+            )}
+
+            {previewUrl && !isProcessing && !error && (
+                <div className="flex flex-col gap-3 w-full animate-in fade-in slide-in-from-top-4 duration-500">
+                    <div className="flex items-center gap-2 text-green-500 text-sm bg-green-50 dark:bg-green-900/10 p-3 rounded-lg w-full">
+                        <CheckCircle2 size={16} />
+                        Bild erfolgreich analysiert
+                    </div>
+
+                    {analysisResult && (
+                        <div className="p-4 bg-zinc-50 dark:bg-zinc-800/50 rounded-2xl border border-zinc-200 dark:border-zinc-700">
+                            <div className="flex items-center gap-2 mb-3 text-amber-600 dark:text-amber-500">
+                                <Sparkles size={18} />
+                                <span className="font-bold text-sm uppercase tracking-wider">Ergebnisse</span>
+                            </div>
+                            <div className="space-y-2">
+                                <div className="flex justify-between text-sm">
+                                    <span className="text-zinc-500">Name:</span>
+                                    <span className="font-semibold">{analysisResult.name || '-'}</span>
+                                </div>
+                                <div className="flex justify-between text-sm">
+                                    <span className="text-zinc-500">Distille:</span>
+                                    <span className="font-semibold">{analysisResult.distillery || '-'}</span>
+                                </div>
+                                <div className="flex justify-between text-sm">
+                                    <span className="text-zinc-500">Kategorie:</span>
+                                    <span className="font-semibold">{analysisResult.category || '-'}</span>
+                                </div>
+                                <div className="flex justify-between text-sm">
+                                    <span className="text-zinc-500">ABV:</span>
+                                    <span className="font-semibold">{analysisResult.abv ? `${analysisResult.abv}%` : '-'}</span>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

src/components/StatusSwitcher.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import React, { useState } from 'react';
+import { updateBottleStatus } from '@/services/update-bottle-status';
+import { Loader2, Package, Play, CheckCircle, FlaskConical } from 'lucide-react';
+
+interface StatusSwitcherProps {
+    bottleId: string;
+    currentStatus: 'sealed' | 'open' | 'sampled' | 'empty';
+}
+
+export default function StatusSwitcher({ bottleId, currentStatus }: StatusSwitcherProps) {
+    const [status, setStatus] = useState(currentStatus);
+    const [loading, setLoading] = useState(false);
+
+    const handleStatusChange = async (newStatus: 'sealed' | 'open' | 'sampled' | 'empty') => {
+        if (newStatus === status || loading) return;
+
+        setLoading(true);
+        try {
+            const result = await updateBottleStatus(bottleId, newStatus);
+            if (result.success) {
+                setStatus(newStatus);
+            } else {
+                alert(result.error || 'Fehler beim Aktualisieren des Status');
+            }
+        } catch (err) {
+            alert('Ein unerwarteter Fehler ist aufgetreten');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const options = [
+        { id: 'sealed', label: 'Versiegelt', icon: Package, color: 'hover:bg-blue-500' },
+        { id: 'open', label: 'Offen', icon: Play, color: 'hover:bg-amber-500' },
+        { id: 'sampled', label: 'Sampled', icon: FlaskConical, color: 'hover:bg-purple-500' },
+        { id: 'empty', label: 'Leer', icon: CheckCircle, color: 'hover:bg-zinc-500' },
+    ] as const;
+
+    return (
+        <div className="space-y-3">
+            <div className="flex items-center justify-between">
+                <label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">Status</label>
+                {loading && <Loader2 className="animate-spin text-amber-600" size={14} />}
+            </div>
+            <div className="grid grid-cols-3 gap-2 p-1 bg-zinc-100 dark:bg-zinc-800 rounded-xl relative">
+                {options.map((opt) => {
+                    const Icon = opt.icon;
+                    const isActive = status === opt.id;
+                    return (
+                        <button
+                            key={opt.id}
+                            type="button"
+                            disabled={loading}
+                            onClick={() => handleStatusChange(opt.id)}
+                            className={`flex flex-col items-center gap-1.5 py-3 px-2 rounded-lg text-[10px] font-black uppercase transition-all border-2 ${isActive
+                                ? 'bg-white dark:bg-zinc-700 border-amber-500 text-amber-600 shadow-sm'
+                                : 'border-transparent text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200'
+                                }`}
+                        >
+                            <Icon size={18} className={isActive ? 'text-amber-500' : 'text-zinc-400'} />
+                            {opt.label}
+                        </button>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}

src/components/TastingNoteForm.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import React, { useState } from 'react';
+import { saveTasting } from '@/services/save-tasting';
+import { Loader2, Send } from 'lucide-react';
+
+interface TastingNoteFormProps {
+    bottleId: string;
+}
+
+export default function TastingNoteForm({ bottleId }: TastingNoteFormProps) {
+    const [rating, setRating] = useState(85);
+    const [nose, setNose] = useState('');
+    const [palate, setPalate] = useState('');
+    const [finish, setFinish] = useState('');
+    const [isSample, setIsSample] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setLoading(true);
+        setError(null);
+
+        try {
+            const result = await saveTasting({
+                bottle_id: bottleId,
+                rating,
+                nose_notes: nose,
+                palate_notes: palate,
+                finish_notes: finish,
+                is_sample: isSample,
+            });
+
+            if (result.success) {
+                setNose('');
+                setPalate('');
+                setFinish('');
+                // We don't need to manually refresh because of revalidatePath in the server action
+            } else {
+                setError(result.error || 'Fehler beim Speichern');
+            }
+        } catch (err) {
+            setError('Ein unerwarteter Fehler ist aufgetreten');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="space-y-3">
+                <label className="block text-sm font-bold text-zinc-700 dark:text-zinc-300 flex justify-between">
+                    Rating <span>{rating}/100</span>
+                </label>
+                <input
+                    type="range"
+                    min="0"
+                    max="100"
+                    value={rating}
+                    onChange={(e) => setRating(parseInt(e.target.value))}
+                    className="w-full h-2 bg-zinc-200 dark:bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-amber-600"
+                />
+                <div className="flex justify-between text-[10px] text-zinc-400 font-bold uppercase tracking-widest">
+                    <span>Swill</span>
+                    <span>Dram</span>
+                    <span>Legendary</span>
+                </div>
+            </div>
+
+            <div className="space-y-2">
+                <label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">Art der Probe</label>
+                <div className="grid grid-cols-2 gap-2 p-1 bg-zinc-100 dark:bg-zinc-800 rounded-xl">
+                    <button
+                        type="button"
+                        onClick={() => setIsSample(false)}
+                        className={`py-2 px-4 rounded-lg text-sm font-bold transition-all ${!isSample
+                            ? 'bg-white dark:bg-zinc-700 text-amber-600 shadow-sm'
+                            : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
+                            }`}
+                    >
+                        Bottle
+                    </button>
+                    <button
+                        type="button"
+                        onClick={() => setIsSample(true)}
+                        className={`py-2 px-4 rounded-lg text-sm font-bold transition-all ${isSample
+                            ? 'bg-white dark:bg-zinc-700 text-amber-600 shadow-sm'
+                            : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
+                            }`}
+                    >
+                        Sample
+                    </button>
+                </div>
+            </div>
+
+            <div className="space-y-2">
+                <label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">Nose</label>
+                <textarea
+                    value={nose}
+                    onChange={(e) => setNose(e.target.value)}
+                    placeholder="Aromen in der Nase..."
+                    rows={2}
+                    className="w-full p-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:ring-2 focus:ring-amber-500 outline-none resize-none transition-all dark:text-zinc-200"
+                />
+            </div>
+
+            <div className="space-y-2">
+                <label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">Palate</label>
+                <textarea
+                    value={palate}
+                    onChange={(e) => setPalate(e.target.value)}
+                    placeholder="Geschmack am Gaumen..."
+                    rows={2}
+                    className="w-full p-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:ring-2 focus:ring-amber-500 outline-none resize-none transition-all dark:text-zinc-200"
+                />
+            </div>
+
+            <div className="space-y-2">
+                <label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">Finish</label>
+                <textarea
+                    value={finish}
+                    onChange={(e) => setFinish(e.target.value)}
+                    placeholder="Nachhall..."
+                    rows={2}
+                    className="w-full p-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:ring-2 focus:ring-amber-500 outline-none resize-none transition-all dark:text-zinc-200"
+                />
+            </div>
+
+            {error && (
+                <div className="p-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs rounded-lg border border-red-100 dark:border-red-900/50">
+                    {error}
+                </div>
+            )}
+
+            <button
+                type="submit"
+                disabled={loading}
+                className="w-full py-4 bg-zinc-900 dark:bg-zinc-100 text-zinc-100 dark:text-zinc-900 font-bold rounded-2xl flex items-center justify-center gap-2 hover:bg-amber-600 dark:hover:bg-amber-600 hover:text-white transition-all active:scale-[0.98] disabled:opacity-50 shadow-lg"
+            >
+                {loading ? <Loader2 className="animate-spin" size={20} /> : (
+                    <>
+                        <Send size={18} />
+                        Note Speichern
+                    </>
+                )}
+            </button>
+        </form>
+    );
+}

src/lib/gemini.ts

@@ -0,0 +1,30 @@
+import { GoogleGenerativeAI } from '@google/generative-ai';
+
+const apiKey = process.env.GEMINI_API_KEY!;
+
+const genAI = new GoogleGenerativeAI(apiKey);
+
+export const geminiModel = genAI.getGenerativeModel({
+  model: 'gemini-3-flash-preview',
+  generationConfig: {
+    responseMimeType: 'application/json',
+  },
+});
+
+export const SYSTEM_INSTRUCTION = `
+You are a sommelier and database clerk. Analyze the whisky bottle image. Extract precise metadata. 
+If a value is not visible, use null. 
+Infer the 'Category' (e.g., Islay Single Malt) based on the Distillery if possible. 
+Search specifically for a "Whiskybase ID" or "WB ID" on the label. 
+Output raw JSON matching the following schema:
+{
+  "name": string | null,
+  "distillery": string | null,
+  "category": string | null,
+  "abv": number | null,
+  "age": number | null,
+  "vintage": string | null,
+  "bottleCode": string | null,
+  "whiskybaseId": string | null
+}
+`;

src/lib/supabase.ts

@@ -0,0 +1,6 @@
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
+const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey);

src/middleware.ts

@@ -0,0 +1,26 @@
+import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs';
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export async function middleware(req: NextRequest) {
+    const res = NextResponse.next();
+    const supabase = createMiddlewareClient({ req, res });
+
+    // Refresh session if expired - required for Server Components/Actions
+    await supabase.auth.getSession();
+
+    return res;
+}
+
+export const config = {
+    matcher: [
+        /*
+         * Match all request paths except for the ones starting with:
+         * - _next/static (static files)
+         * - _next/image (image optimization files)
+         * - favicon.ico (favicon file)
+         * Feel free to modify this pattern to include more paths.
+         */
+        '/((?!_next/static|_next/image|favicon.ico).*)',
+    ],
+};

src/services/analyze-bottle.ts

@@ -0,0 +1,91 @@
+'use server';
+
+import { geminiModel, SYSTEM_INSTRUCTION } from '@/lib/gemini';
+import { BottleMetadataSchema, AnalysisResponse } from '@/types/whisky';
+import { createServerActionClient } from '@supabase/auth-helpers-nextjs';
+import { cookies } from 'next/headers';
+import { createHash } from 'crypto';
+
+export async function analyzeBottle(base64Image: string): Promise<AnalysisResponse> {
+    const supabase = createServerActionClient({ cookies });
+
+    if (!process.env.GEMINI_API_KEY) {
+        return { success: false, error: 'GEMINI_API_KEY is not configured.' };
+    }
+
+    try {
+        // Ensure user is authenticated for tracking/billing
+        const { data: { session } } = await supabase.auth.getSession();
+        if (!session) {
+            return { success: false, error: 'Nicht autorisiert oder Session abgelaufen.' };
+        }
+
+        // 1. Generate Hash for Caching
+        const base64Data = base64Image.split(',')[1] || base64Image;
+        const imageHash = createHash('sha256').update(base64Data).digest('hex');
+        console.log(`[AI Cache] Checking hash: ${imageHash}`);
+
+        // 2. Check Cache
+        const { data: cachedResult } = await supabase
+            .from('vision_cache')
+            .select('result')
+            .eq('hash', imageHash)
+            .maybeSingle();
+
+        if (cachedResult) {
+            console.log(`[AI Cache] Hit! hash: ${imageHash}`);
+            return {
+                success: true,
+                data: cachedResult.result as any,
+            };
+        }
+
+        console.log(`[AI Cache] Miss. Calling Gemini...`);
+
+        // 3. AI Analysis
+        const result = await geminiModel.generateContent([
+            {
+                inlineData: {
+                    data: base64Data,
+                    mimeType: 'image/jpeg',
+                },
+            },
+            { text: SYSTEM_INSTRUCTION },
+        ]);
+
+        const responseText = result.response.text();
+        let jsonData = JSON.parse(responseText);
+
+        if (Array.isArray(jsonData)) {
+            jsonData = jsonData[0];
+        }
+
+        if (!jsonData) {
+            throw new Error('Keine Daten in der KI-Antwort gefunden.');
+        }
+
+        const validatedData = BottleMetadataSchema.parse(jsonData);
+
+        // 4. Store in Cache
+        const { error: storeError } = await supabase
+            .from('vision_cache')
+            .insert({ hash: imageHash, result: validatedData });
+
+        if (storeError) {
+            console.warn(`[AI Cache] Storage failed: ${storeError.message}`);
+        } else {
+            console.log(`[AI Cache] Stored new result for hash: ${imageHash}`);
+        }
+
+        return {
+            success: true,
+            data: validatedData,
+        };
+    } catch (error) {
+        console.error('Gemini Analysis Error:', error);
+        return {
+            success: false,
+            error: error instanceof Error ? error.message : 'An unknown error occurred during analysis.',
+        };
+    }
+}

src/services/save-bottle.ts

@@ -0,0 +1,70 @@
+'use server';
+
+import { createServerActionClient } from '@supabase/auth-helpers-nextjs';
+import { cookies } from 'next/headers';
+import { BottleMetadata } from '@/types/whisky';
+import { v4 as uuidv4 } from 'uuid';
+
+export async function saveBottle(
+    metadata: BottleMetadata,
+    base64Image: string,
+    _ignoredUserId: string // Keeping for signature compatibility if needed, but using session internally
+) {
+    const supabase = createServerActionClient({ cookies });
+
+    try {
+        // Verify user session and get ID from the server side (secure)
+        const { data: { session } } = await supabase.auth.getSession();
+        if (!session) {
+            throw new Error('Nicht autorisiert oder Session abgelaufen.');
+        }
+
+        const userId = session.user.id;
+
+        // 1. Upload Image to Storage
+        const base64Data = base64Image.split(',')[1] || base64Image;
+        const buffer = Buffer.from(base64Data, 'base64');
+        const fileName = `${userId}/${uuidv4()}.jpg`;
+
+        const { data: uploadData, error: uploadError } = await supabase.storage
+            .from('bottles')
+            .upload(fileName, buffer, {
+                contentType: 'image/jpeg',
+                upsert: true,
+            });
+
+        if (uploadError) throw new Error(`Upload Error: ${uploadError.message}`);
+
+        // Get Public URL
+        const { data: { publicUrl } } = supabase.storage
+            .from('bottles')
+            .getPublicUrl(fileName);
+
+        // 2. Save Metadata to Database
+        const { data: bottleData, error: dbError } = await supabase
+            .from('bottles')
+            .insert({
+                user_id: userId,
+                name: metadata.name,
+                distillery: metadata.distillery,
+                category: metadata.category,
+                abv: metadata.abv,
+                age: metadata.age,
+                whiskybase_id: metadata.whiskybaseId,
+                image_url: publicUrl,
+                status: 'sealed', // Default status
+            })
+            .select()
+            .single();
+
+        if (dbError) throw new Error(`Database Error: ${dbError.message}`);
+
+        return { success: true, data: bottleData };
+    } catch (error) {
+        console.error('Save Bottle Error:', error);
+        return {
+            success: false,
+            error: error instanceof Error ? error.message : 'An unknown error occurred while saving.',
+        };
+    }
+}

src/services/save-tasting.ts

@@ -0,0 +1,47 @@
+'use server';
+
+import { createServerActionClient } from '@supabase/auth-helpers-nextjs';
+import { cookies } from 'next/headers';
+import { revalidatePath } from 'next/cache';
+
+export async function saveTasting(data: {
+    bottle_id: string;
+    rating: number;
+    nose_notes?: string;
+    palate_notes?: string;
+    finish_notes?: string;
+    is_sample?: boolean;
+}) {
+    const supabase = createServerActionClient({ cookies });
+
+    try {
+        const { data: { session } } = await supabase.auth.getSession();
+        if (!session) throw new Error('Nicht autorisiert');
+
+        const { data: tasting, error } = await supabase
+            .from('tastings')
+            .insert({
+                bottle_id: data.bottle_id,
+                user_id: session.user.id,
+                rating: data.rating,
+                nose_notes: data.nose_notes,
+                palate_notes: data.palate_notes,
+                finish_notes: data.finish_notes,
+                is_sample: data.is_sample || false,
+            })
+            .select()
+            .single();
+
+        if (error) throw error;
+
+        revalidatePath(`/bottles/${data.bottle_id}`);
+
+        return { success: true, data: tasting };
+    } catch (error) {
+        console.error('Save Tasting Error:', error);
+        return {
+            success: false,
+            error: error instanceof Error ? error.message : 'Fehler beim Speichern der Tasting Note',
+        };
+    }
+}

src/services/update-bottle-status.ts

@@ -0,0 +1,33 @@
+'use server';
+
+import { createServerActionClient } from '@supabase/auth-helpers-nextjs';
+import { cookies } from 'next/headers';
+import { revalidatePath } from 'next/cache';
+
+export async function updateBottleStatus(bottleId: string, status: 'sealed' | 'open' | 'sampled' | 'empty') {
+    const supabase = createServerActionClient({ cookies });
+
+    try {
+        const { data: { session } } = await supabase.auth.getSession();
+        if (!session) throw new Error('Nicht autorisiert');
+
+        const { error } = await supabase
+            .from('bottles')
+            .update({ status, updated_at: new Date().toISOString() })
+            .eq('id', bottleId)
+            .eq('user_id', session.user.id);
+
+        if (error) throw error;
+
+        revalidatePath(`/bottles/${bottleId}`);
+        revalidatePath('/');
+
+        return { success: true };
+    } catch (error) {
+        console.error('Update Status Error:', error);
+        return {
+            success: false,
+            error: error instanceof Error ? error.message : 'Fehler beim Aktualisieren des Status',
+        };
+    }
+}

src/types/whisky.ts

@@ -0,0 +1,20 @@
+import { z } from 'zod';
+
+export const BottleMetadataSchema = z.object({
+    name: z.string().nullable(),
+    distillery: z.string().nullable(),
+    category: z.string().nullable(),
+    abv: z.number().nullable(),
+    age: z.number().nullable(),
+    vintage: z.string().nullable(),
+    bottleCode: z.string().nullable(),
+    whiskybaseId: z.string().nullable(),
+});
+
+export type BottleMetadata = z.infer<typeof BottleMetadataSchema>;
+
+export interface AnalysisResponse {
+    success: boolean;
+    data?: BottleMetadata;
+    error?: string;
+}