init

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>
+    );
+}