feat: refine Scan & Taste UI, fix desktop scrolling, and resolve production login fetch error
- 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).
This commit is contained in:
421
src/components/TastingEditor.tsx
Normal file
421
src/components/TastingEditor.tsx
Normal file
@@ -0,0 +1,421 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user