robin
b57f5dc2ad
- Reverted theme from gold to amber and restored legacy typography. - Refactored ScanAndTasteFlow and TastingEditor for robust desktop scrolling. - Hotfixed sw.js to completely bypass Supabase Auth/API requests to fix 'Failed to fetch' in production. - Integrated full tasting note persistence (tags, buddies, sessions).
422 lines
24 KiB
TypeScript
422 lines
24 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { ChevronDown, Wind, Utensils, Droplets, Sparkles, Send, Users, Star, AlertTriangle, Check, Zap } from 'lucide-react';
|
|
import { BottleMetadata } from '@/types/whisky';
|
|
import TagSelector from './TagSelector';
|
|
import { useLiveQuery } from 'dexie-react-hooks';
|
|
import { db } from '@/lib/db';
|
|
import { createClient } from '@/lib/supabase/client';
|
|
import { useI18n } from '@/i18n/I18nContext';
|
|
|
|
interface TastingEditorProps {
|
|
bottleMetadata: BottleMetadata;
|
|
image: string | null;
|
|
onSave: (data: any) => void;
|
|
onOpenSessions: () => void;
|
|
activeSessionName?: string;
|
|
activeSessionId?: string;
|
|
}
|
|
|
|
export default function TastingEditor({ bottleMetadata, image, onSave, onOpenSessions, activeSessionName, activeSessionId }: TastingEditorProps) {
|
|
const { t } = useI18n();
|
|
const supabase = createClient();
|
|
const [rating, setRating] = useState(85);
|
|
const [noseNotes, setNoseNotes] = useState('');
|
|
const [palateNotes, setPalateNotes] = useState('');
|
|
const [finishNotes, setFinishNotes] = useState('');
|
|
const [isSample, setIsSample] = useState(false);
|
|
|
|
// Sliders for evaluation
|
|
const [noseScore, setNoseScore] = useState(50);
|
|
const [tasteScore, setTasteScore] = useState(50);
|
|
const [finishScore, setFinishScore] = useState(50);
|
|
const [complexityScore, setComplexityScore] = useState(75);
|
|
const [balanceScore, setBalanceScore] = useState(85);
|
|
|
|
const [noseTagIds, setNoseTagIds] = useState<string[]>([]);
|
|
const [palateTagIds, setPalateTagIds] = useState<string[]>([]);
|
|
const [finishTagIds, setFinishTagIds] = useState<string[]>([]);
|
|
const [textureTagIds, setTextureTagIds] = useState<string[]>([]);
|
|
const [selectedBuddyIds, setSelectedBuddyIds] = useState<string[]>([]);
|
|
|
|
const buddies = useLiveQuery(() => db.cache_buddies.toArray(), [], [] as any[]);
|
|
const [lastDramInSession, setLastDramInSession] = useState<{ name: string; isSmoky: boolean; timestamp: number } | null>(null);
|
|
const [showPaletteWarning, setShowPaletteWarning] = useState(false);
|
|
|
|
const suggestedTags = bottleMetadata.suggested_tags || [];
|
|
const suggestedCustomTags = bottleMetadata.suggested_custom_tags || [];
|
|
|
|
// Session-based pre-fill and Palette Checker
|
|
useEffect(() => {
|
|
const fetchSessionData = async () => {
|
|
if (activeSessionId) {
|
|
const { data: participants } = await supabase
|
|
.from('session_participants')
|
|
.select('buddy_id')
|
|
.eq('session_id', activeSessionId);
|
|
|
|
if (participants) {
|
|
setSelectedBuddyIds(participants.map(p => p.buddy_id));
|
|
}
|
|
|
|
const { data: lastTastings } = await supabase
|
|
.from('tastings')
|
|
.select(`
|
|
id,
|
|
tasted_at,
|
|
bottles(name, category),
|
|
tasting_tags(tags(name))
|
|
`)
|
|
.eq('session_id', activeSessionId)
|
|
.order('tasted_at', { ascending: false })
|
|
.limit(1);
|
|
|
|
if (lastTastings && lastTastings.length > 0) {
|
|
const last = lastTastings[0];
|
|
const tags = (last as any).tasting_tags?.map((t: any) => t.tags.name) || [];
|
|
const category = (last as any).bottles?.category || '';
|
|
const text = (tags.join(' ') + ' ' + category).toLowerCase();
|
|
const smokyKeywords = ['rauch', 'torf', 'smoke', 'peat', 'islay', 'ash', 'lagerfeuer'];
|
|
const isSmoky = smokyKeywords.some(kw => text.includes(kw));
|
|
|
|
setLastDramInSession({
|
|
name: (last as any).bottles?.name || 'Unbekannt',
|
|
isSmoky,
|
|
timestamp: new Date(last.tasted_at).getTime()
|
|
});
|
|
}
|
|
}
|
|
};
|
|
fetchSessionData();
|
|
}, [activeSessionId, supabase]);
|
|
|
|
useEffect(() => {
|
|
if (lastDramInSession?.isSmoky) {
|
|
const now = Date.now();
|
|
const diffMin = (now - lastDramInSession.timestamp) / (1000 * 60);
|
|
if (diffMin < 20) setShowPaletteWarning(true);
|
|
}
|
|
}, [lastDramInSession]);
|
|
|
|
const toggleBuddy = (id: string) => {
|
|
setSelectedBuddyIds(prev => prev.includes(id) ? prev.filter(bid => bid !== id) : [...prev, id]);
|
|
};
|
|
|
|
const handleInternalSave = () => {
|
|
onSave({
|
|
rating,
|
|
nose_notes: noseNotes,
|
|
palate_notes: palateNotes,
|
|
finish_notes: finishNotes,
|
|
is_sample: isSample,
|
|
buddy_ids: selectedBuddyIds,
|
|
tag_ids: [...noseTagIds, ...palateTagIds, ...finishTagIds, ...textureTagIds],
|
|
// Visual data for ResultCard
|
|
nose: noseScore,
|
|
taste: tasteScore,
|
|
finish: finishScore,
|
|
complexity: complexityScore,
|
|
balance: balanceScore
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="flex-1 flex flex-col w-full bg-[#0F1014] h-full overflow-hidden">
|
|
{/* Top Context Bar - Flex Child 1 */}
|
|
<button
|
|
onClick={onOpenSessions}
|
|
className="w-full p-6 bg-black/40 backdrop-blur-md border-b border-white/10 flex items-center justify-between group shrink-0"
|
|
>
|
|
<div className="text-left">
|
|
<p className="text-[10px] font-black uppercase tracking-widest text-amber-500">Kontext</p>
|
|
<p className="font-bold text-white leading-none mt-1">{activeSessionName || 'Trinkst du in Gesellschaft?'}</p>
|
|
</div>
|
|
<ChevronDown size={20} className="text-amber-500 group-hover:translate-y-1 transition-transform" />
|
|
</button>
|
|
|
|
{/* Main Scrollable Content - Flex Child 2 */}
|
|
<div className="flex-1 overflow-y-auto overflow-x-hidden px-6 py-8 space-y-12">
|
|
{/* Palette Warning */}
|
|
{showPaletteWarning && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="p-5 bg-amber-500/10 border border-amber-500/20 rounded-3xl flex items-start gap-3"
|
|
>
|
|
<AlertTriangle size={24} className="text-amber-500 shrink-0 mt-0.5" />
|
|
<div className="space-y-1">
|
|
<p className="text-[10px] font-black uppercase tracking-wider text-amber-500">Palette-Checker</p>
|
|
<p className="text-xs font-bold text-white leading-relaxed">
|
|
Dein letzter Dram "{lastDramInSession?.name}" war torfig. Trink etwas Wasser!
|
|
</p>
|
|
<button onClick={() => setShowPaletteWarning(false)} className="text-[10px] font-black uppercase text-amber-500 underline mt-2 block">Verstanden</button>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* Hero Section */}
|
|
<div className="flex items-center gap-6">
|
|
<div className="w-24 h-32 bg-white/5 rounded-2xl border border-white/10 flex items-center justify-center overflow-hidden shrink-0 shadow-2xl relative">
|
|
{image ? (
|
|
<img src={image} alt="Bottle Preview" className="w-full h-full object-cover" />
|
|
) : (
|
|
<div className="text-[10px] text-white/20 uppercase font-black rotate-[-15deg]">No Photo</div>
|
|
)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h1 className="text-3xl font-black text-amber-600 mb-1 truncate leading-none uppercase tracking-tight">
|
|
{bottleMetadata.distillery || 'Destillerie'}
|
|
</h1>
|
|
<p className="text-white text-xl font-bold truncate mb-2">{bottleMetadata.name || 'Unbekannter Malt'}</p>
|
|
<p className="text-white/40 text-[10px] font-black uppercase tracking-widest leading-none">
|
|
{bottleMetadata.category || 'Whisky'} {bottleMetadata.abv ? `• ${bottleMetadata.abv}%` : ''} {bottleMetadata.age ? `• ${bottleMetadata.age}y` : ''}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Rating Slider */}
|
|
<div className="space-y-6 bg-white/5 p-8 rounded-[40px] border border-white/10 shadow-inner relative overflow-hidden">
|
|
<div className="absolute top-0 right-0 p-4 opacity-5 pointer-events-none">
|
|
<Zap size={120} className="text-amber-500" />
|
|
</div>
|
|
<div className="flex items-center justify-between relative z-10">
|
|
<label className="text-xs font-black text-white/40 uppercase tracking-[0.2em] flex items-center gap-2">
|
|
<Star size={14} className="text-amber-500 fill-amber-500" />
|
|
{t('tasting.rating')}
|
|
</label>
|
|
<span className="text-4xl font-black text-amber-600 tracking-tighter">{rating}<span className="text-white/20 text-sm ml-1">/100</span></span>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
value={rating}
|
|
onChange={(e) => setRating(parseInt(e.target.value))}
|
|
className="w-full h-2 bg-zinc-800 rounded-full appearance-none cursor-pointer accent-amber-600 transition-all"
|
|
/>
|
|
<div className="flex justify-between text-[10px] text-zinc-500 font-black uppercase tracking-widest px-1 relative z-10">
|
|
<span>Swill</span>
|
|
<span>Dram</span>
|
|
<span>Legendary</span>
|
|
</div>
|
|
|
|
<div className="flex gap-3 pt-2 relative z-10">
|
|
{['Bottle', 'Sample'].map(type => (
|
|
<button
|
|
key={type}
|
|
onClick={() => setIsSample(type === 'Sample')}
|
|
className={`flex-1 py-4 rounded-2xl text-[10px] font-black uppercase tracking-widest border transition-all ${(type === 'Sample' ? isSample : !isSample)
|
|
? 'bg-zinc-100 border-zinc-100 text-zinc-900 shadow-lg'
|
|
: 'bg-transparent border-white/10 text-white/40 hover:border-white/30'
|
|
}`}
|
|
>
|
|
{type}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Evaluation Sliders Area */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<CustomSlider label="Complexity" value={complexityScore} onChange={setComplexityScore} icon={<Sparkles size={18} />} />
|
|
<CustomSlider label="Balance" value={balanceScore} onChange={setBalanceScore} icon={<Check size={18} />} />
|
|
</div>
|
|
|
|
{/* Sections */}
|
|
<div className="space-y-12 pb-12">
|
|
{/* Nose Section */}
|
|
<div className="space-y-8 bg-zinc-900/50 p-8 rounded-[40px] border border-white/5">
|
|
<div className="flex items-center gap-5">
|
|
<div className="w-14 h-14 rounded-3xl bg-amber-500/10 flex items-center justify-center text-amber-500 shrink-0 border border-amber-500/20 shadow-xl">
|
|
<Wind size={28} />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-black text-white uppercase tracking-widest leading-none">{t('tasting.nose')}</h3>
|
|
<p className="text-[10px] text-white/30 font-black uppercase tracking-widest mt-2 px-0.5">Aroma & Bouquet</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<CustomSlider label="Nose Intensity" value={noseScore} onChange={setNoseScore} icon={<Sparkles size={16} />} />
|
|
|
|
<div className="space-y-3">
|
|
<p className="text-[10px] font-black text-white/20 uppercase tracking-widest px-1">Tags</p>
|
|
<TagSelector
|
|
category="nose"
|
|
selectedTagIds={noseTagIds}
|
|
onToggleTag={(id) => setNoseTagIds(prev => prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id])}
|
|
suggestedTagNames={suggestedTags}
|
|
suggestedCustomTagNames={suggestedCustomTags}
|
|
/>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<p className="text-[10px] font-black text-white/20 uppercase tracking-widest px-1">Eigene Notizen</p>
|
|
<textarea
|
|
value={noseNotes}
|
|
onChange={(e) => setNoseNotes(e.target.value)}
|
|
placeholder={t('tasting.notesPlaceholder') || "Wie riecht er?..."}
|
|
className="w-full p-6 bg-zinc-900 border-none rounded-3xl text-sm text-zinc-200 focus:ring-2 focus:ring-amber-500 outline-none min-h-[120px] resize-none transition-all placeholder:text-zinc-600 shadow-inner"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Palate Section */}
|
|
<div className="space-y-8 bg-zinc-900/50 p-8 rounded-[40px] border border-white/5">
|
|
<div className="flex items-center gap-5">
|
|
<div className="w-14 h-14 rounded-3xl bg-amber-500/10 flex items-center justify-center text-amber-500 shrink-0 border border-amber-500/20 shadow-xl">
|
|
<Utensils size={28} />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-black text-white uppercase tracking-widest leading-none">{t('tasting.palate')}</h3>
|
|
<p className="text-[10px] text-white/30 font-black uppercase tracking-widest mt-2 px-0.5">Geschmack & Textur</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<CustomSlider label="Taste Impact" value={tasteScore} onChange={setTasteScore} icon={<Sparkles size={16} />} />
|
|
|
|
<div className="space-y-3">
|
|
<p className="text-[10px] font-black text-white/20 uppercase tracking-widest px-1">Tags</p>
|
|
<TagSelector
|
|
category="taste"
|
|
selectedTagIds={palateTagIds}
|
|
onToggleTag={(id) => setPalateTagIds(prev => prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id])}
|
|
suggestedTagNames={suggestedTags}
|
|
suggestedCustomTagNames={suggestedCustomTags}
|
|
/>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<p className="text-[10px] font-black text-white/20 uppercase tracking-widest px-1">Eigene Notizen</p>
|
|
<textarea
|
|
value={palateNotes}
|
|
onChange={(e) => setPalateNotes(e.target.value)}
|
|
placeholder={t('tasting.notesPlaceholder') || "Wie schmeckt er?..."}
|
|
className="w-full p-6 bg-zinc-900 border-none rounded-3xl text-sm text-zinc-200 focus:ring-2 focus:ring-amber-500 outline-none min-h-[120px] resize-none transition-all placeholder:text-zinc-600 shadow-inner"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Finish Section */}
|
|
<div className="space-y-8 bg-zinc-900/50 p-8 rounded-[40px] border border-white/5">
|
|
<div className="flex items-center gap-5">
|
|
<div className="w-14 h-14 rounded-3xl bg-amber-500/10 flex items-center justify-center text-amber-500 shrink-0 border border-amber-500/20 shadow-xl">
|
|
<Droplets size={28} />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-black text-white uppercase tracking-widest leading-none">{t('tasting.finish')}</h3>
|
|
<p className="text-[10px] text-white/30 font-black uppercase tracking-widest mt-2 px-0.5">Abgang & Nachklang</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<CustomSlider label="Finish Duration" value={finishScore} onChange={setFinishScore} icon={<Sparkles size={16} />} />
|
|
|
|
<div className="space-y-6 pt-4 border-t border-white/5">
|
|
<div className="space-y-3">
|
|
<p className="text-[10px] font-black text-white/20 uppercase tracking-widest px-1">Aroma Tags</p>
|
|
<TagSelector
|
|
category="finish"
|
|
selectedTagIds={finishTagIds}
|
|
onToggleTag={(id) => setFinishTagIds(prev => prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id])}
|
|
suggestedTagNames={suggestedTags}
|
|
suggestedCustomTagNames={suggestedCustomTags}
|
|
/>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<p className="text-[10px] font-black text-white/20 uppercase tracking-widest px-1">Gefühl & Textur</p>
|
|
<TagSelector
|
|
category="texture"
|
|
selectedTagIds={textureTagIds}
|
|
onToggleTag={(id) => setTextureTagIds(prev => prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id])}
|
|
suggestedTagNames={suggestedTags}
|
|
suggestedCustomTagNames={suggestedCustomTags}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<p className="text-[10px] font-black text-white/20 uppercase tracking-widest px-1">Eigene Notizen</p>
|
|
<textarea
|
|
value={finishNotes}
|
|
onChange={(e) => setFinishNotes(e.target.value)}
|
|
placeholder={t('tasting.notesPlaceholder') || "Der bleibende Eindruck..."}
|
|
className="w-full p-6 bg-zinc-900 border-none rounded-3xl text-sm text-zinc-200 focus:ring-2 focus:ring-amber-500 outline-none min-h-[120px] resize-none transition-all placeholder:text-zinc-600 shadow-inner"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Buddy Selection */}
|
|
{buddies && buddies.length > 0 && (
|
|
<div className="space-y-8 bg-zinc-900/50 p-8 rounded-[40px] border border-white/5">
|
|
<div className="flex items-center gap-5">
|
|
<div className="w-14 h-14 rounded-3xl bg-amber-500/10 flex items-center justify-center text-amber-500 shrink-0 border border-amber-500/20 shadow-xl">
|
|
<Users size={28} />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-black text-white uppercase tracking-widest leading-none">Mit wem trinkst du?</h3>
|
|
<p className="text-[10px] text-white/30 font-black uppercase tracking-widest mt-2 px-0.5">Gesellschaft & Buddies</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{buddies.map(buddy => (
|
|
<button
|
|
key={buddy.id}
|
|
onClick={() => toggleBuddy(buddy.id)}
|
|
className={`px-5 py-3 rounded-2xl text-[10px] font-black uppercase transition-all border flex items-center gap-2 ${selectedBuddyIds.includes(buddy.id)
|
|
? 'bg-amber-600 border-amber-600 text-white shadow-lg'
|
|
: 'bg-transparent border-white/10 text-white/40 hover:border-white/30'
|
|
}`}
|
|
>
|
|
{selectedBuddyIds.includes(buddy.id) && <Check size={14} />}
|
|
{buddy.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sticky Footer - Flex Child 3 */}
|
|
<div className="w-full p-8 bg-black/60 backdrop-blur-xl border-t border-white/10 shrink-0">
|
|
<button
|
|
onClick={handleInternalSave}
|
|
className="w-full py-5 bg-amber-600 text-white rounded-3xl font-black uppercase tracking-widest text-xs flex items-center justify-center gap-4 shadow-xl active:scale-[0.98] transition-all"
|
|
>
|
|
<Send size={20} />
|
|
{t('tasting.saveTasting')}
|
|
<div className="ml-auto bg-black/20 px-3 py-1 rounded-full text-[10px] font-black text-amber-200">{rating}</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CustomSlider({ label, value, onChange, icon }: any) {
|
|
return (
|
|
<div className="space-y-4 bg-zinc-900/50 p-6 rounded-3xl border border-white/5 shadow-inner">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3 text-white/40">
|
|
<div className="p-2 rounded-xl bg-amber-500/10 text-amber-500">
|
|
{icon}
|
|
</div>
|
|
<span className="text-[10px] font-black uppercase tracking-[0.2em]">{label}</span>
|
|
</div>
|
|
<span className="text-2xl font-black text-amber-600 tracking-tighter">{value}</span>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
value={value}
|
|
onChange={(e) => onChange(parseInt(e.target.value))}
|
|
className="w-full h-1.5 bg-zinc-800 rounded-full appearance-none cursor-pointer accent-amber-600 transition-all"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|