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:
@@ -2,28 +2,37 @@
|
||||
@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) {
|
||||
@layer base {
|
||||
:root {
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
--background-start-rgb: 0, 0, 0;
|
||||
--background-end-rgb: 0, 0, 0;
|
||||
--background: #0F1014;
|
||||
--surface: #1A1B20;
|
||||
--primary: #C89D46;
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: linear-gradient(to bottom,
|
||||
transparent,
|
||||
rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
|
||||
@apply bg-[#0F1014] text-white antialiased;
|
||||
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
.font-display {
|
||||
font-family: var(--font-playfair), serif;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.glass {
|
||||
@apply backdrop-blur-md bg-white/5 border border-white/10;
|
||||
}
|
||||
|
||||
.glass-dark {
|
||||
@apply backdrop-blur-md bg-black/40 border border-white/5;
|
||||
}
|
||||
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -11,7 +11,10 @@ import MainContentWrapper from "@/components/MainContentWrapper";
|
||||
import AuthListener from "@/components/AuthListener";
|
||||
import SyncHandler from "@/components/SyncHandler";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
const inter = Inter({ subsets: ["latin"], variable: '--font-inter' });
|
||||
const playfair = Playfair_Display({ subsets: ["latin"], variable: '--font-playfair' });
|
||||
|
||||
import { Playfair_Display } from "next/font/google";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
@@ -45,7 +48,7 @@ export default function RootLayout({
|
||||
}>) {
|
||||
return (
|
||||
<html lang="de">
|
||||
<body className={inter.className}>
|
||||
<body className={`${inter.variable} ${playfair.variable} font-sans`}>
|
||||
<I18nProvider>
|
||||
<SessionProvider>
|
||||
<AuthListener />
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { createClient } from '@/lib/supabase/client';
|
||||
import CameraCapture from "@/components/CameraCapture";
|
||||
import BottleGrid from "@/components/BottleGrid";
|
||||
import AuthForm from "@/components/AuthForm";
|
||||
import BuddyList from "@/components/BuddyList";
|
||||
@@ -13,7 +12,9 @@ import LanguageSwitcher from "@/components/LanguageSwitcher";
|
||||
import OfflineIndicator from "@/components/OfflineIndicator";
|
||||
import { useI18n } from "@/i18n/I18nContext";
|
||||
import { useSession } from "@/context/SessionContext";
|
||||
import { Sparkles } from "lucide-react";
|
||||
import { Sparkles, Camera } from "lucide-react";
|
||||
import FloatingScannerButton from '@/components/FloatingScannerButton';
|
||||
import ScanAndTasteFlow from '@/components/ScanAndTasteFlow';
|
||||
|
||||
export default function Home() {
|
||||
const supabase = createClient();
|
||||
@@ -23,6 +24,13 @@ export default function Home() {
|
||||
const [fetchError, setFetchError] = useState<string | null>(null);
|
||||
const { t } = useI18n();
|
||||
const { activeSession } = useSession();
|
||||
const [isFlowOpen, setIsFlowOpen] = useState(false);
|
||||
const [capturedImage, setCapturedImage] = useState<string | null>(null);
|
||||
|
||||
const handleImageSelected = (base64: string) => {
|
||||
setCapturedImage(base64);
|
||||
setIsFlowOpen(true);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Check session
|
||||
@@ -200,7 +208,6 @@ export default function Home() {
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-5xl">
|
||||
<div className="flex flex-col gap-8">
|
||||
<CameraCapture onSaveComplete={fetchCollection} />
|
||||
<SessionList />
|
||||
</div>
|
||||
<div>
|
||||
@@ -232,10 +239,17 @@ export default function Home() {
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<BottleGrid bottles={bottles} />
|
||||
bottles.length > 0 && <BottleGrid bottles={bottles} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FloatingScannerButton onImageSelected={handleImageSelected} />
|
||||
<ScanAndTasteFlow
|
||||
isOpen={isFlowOpen}
|
||||
onClose={() => setIsFlowOpen(false)}
|
||||
base64Image={capturedImage}
|
||||
/>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
65
src/components/FloatingScannerButton.tsx
Normal file
65
src/components/FloatingScannerButton.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Camera } from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
interface FloatingScannerButtonProps {
|
||||
onImageSelected: (base64Image: string) => void;
|
||||
}
|
||||
|
||||
export default function FloatingScannerButton({ onImageSelected }: FloatingScannerButtonProps) {
|
||||
const fileInputRef = React.useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
const base64String = reader.result as string;
|
||||
onImageSelected(base64String);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50">
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={handleFileChange}
|
||||
accept="image/*"
|
||||
capture="environment"
|
||||
className="hidden"
|
||||
/>
|
||||
<motion.button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
whileHover={{ scale: 1.1, translateY: -4 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
initial={{ y: 100, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
className="relative group p-6 rounded-full bg-[#C89D46] text-black shadow-[0_0_30px_rgba(200,157,70,0.4)] hover:shadow-[0_0_40px_rgba(200,157,70,0.6)] transition-all overflow-hidden"
|
||||
>
|
||||
{/* Shine Animation */}
|
||||
<motion.div
|
||||
animate={{
|
||||
x: ['-100%', '100%'],
|
||||
}}
|
||||
transition={{
|
||||
duration: 2,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
repeatDelay: 3
|
||||
}}
|
||||
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent skew-x-12 -z-0"
|
||||
/>
|
||||
|
||||
<Camera size={32} strokeWidth={2.5} className="relative z-10" />
|
||||
|
||||
{/* Pulse ring */}
|
||||
<span className="absolute inset-0 rounded-full border-4 border-[#C89D46] animate-ping opacity-20" />
|
||||
</motion.button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
109
src/components/ResultCard.tsx
Normal file
109
src/components/ResultCard.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Share2, Sparkles, Award } from 'lucide-react';
|
||||
import { Radar, RadarChart, PolarGrid, PolarAngleAxis, ResponsiveContainer } from 'recharts';
|
||||
|
||||
interface ResultCardProps {
|
||||
data: {
|
||||
nose: number;
|
||||
taste: number;
|
||||
finish: number;
|
||||
rating: number;
|
||||
complexity?: number;
|
||||
balance?: number;
|
||||
};
|
||||
bottleName: string;
|
||||
image: string | null;
|
||||
onShare: () => void;
|
||||
}
|
||||
|
||||
export default function ResultCard({ data, bottleName, image, onShare }: ResultCardProps) {
|
||||
const chartData = [
|
||||
{ subject: 'Nose', A: data.nose, fullMark: 100 },
|
||||
{ subject: 'Taste', A: data.taste, fullMark: 100 },
|
||||
{ subject: 'Finish', A: data.finish, fullMark: 100 },
|
||||
{ subject: 'Balance', A: data.balance || 85, fullMark: 100 },
|
||||
{ subject: 'Complexity', A: data.complexity || 75, fullMark: 100 },
|
||||
];
|
||||
|
||||
const displayScore = data.rating;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0, rotateY: 30 }}
|
||||
animate={{ scale: 1, opacity: 1, rotateY: 0 }}
|
||||
transition={{ type: 'spring', damping: 15 }}
|
||||
className="flex flex-col items-center gap-8 w-full max-w-sm"
|
||||
>
|
||||
{/* The Trading Card */}
|
||||
<div className="relative w-full aspect-[9/16] rounded-[32px] overflow-hidden shadow-[0_20px_60px_rgba(0,0,0,0.8)] border border-white/20 bg-gradient-to-b from-[#1A1B20] to-black group">
|
||||
{/* Bottle Image with Vignette */}
|
||||
<div className="absolute inset-0">
|
||||
{image ? (
|
||||
<img src={image} alt={bottleName} className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<div className="absolute inset-0 bg-white/5 flex items-center justify-center opacity-20 text-[20px] font-black uppercase tracking-[1em] rotate-90">No Image</div>
|
||||
)}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent opacity-80" />
|
||||
</div>
|
||||
|
||||
{/* Content Overlay */}
|
||||
<div className="absolute inset-x-0 bottom-0 p-8 space-y-6">
|
||||
<div className="space-y-1">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.3em] text-amber-500">Tasting Record</p>
|
||||
<h2 className="text-4xl font-black text-white truncate uppercase tracking-tight leading-none">{bottleName}</h2>
|
||||
</div>
|
||||
|
||||
{/* Radar Chart Area */}
|
||||
<div className="h-64 w-full glass-dark rounded-3xl p-4 flex flex-col items-center justify-center">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<RadarChart cx="50%" cy="50%" outerRadius="80%" data={chartData}>
|
||||
<PolarGrid stroke="rgba(255,255,255,0.1)" />
|
||||
<PolarAngleAxis
|
||||
dataKey="subject"
|
||||
tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 10, fontWeight: 900 }}
|
||||
/>
|
||||
<Radar
|
||||
name="Whisky Profile"
|
||||
dataKey="A"
|
||||
stroke="#D97706"
|
||||
fill="#D97706"
|
||||
fillOpacity={0.5}
|
||||
/>
|
||||
</RadarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles size={16} className="text-amber-500" />
|
||||
<span className="text-xs font-black uppercase tracking-widest text-white/40">Verified Report</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Score Badge */}
|
||||
<div className="absolute top-8 right-8 w-20 h-20 glass rounded-2xl flex flex-col items-center justify-center border-amber-500/40 shadow-xl">
|
||||
<span className="text-2xl font-black text-amber-500">{displayScore}</span>
|
||||
<span className="text-[8px] font-black uppercase tracking-widest text-white/40">Score</span>
|
||||
</div>
|
||||
|
||||
{/* Decorative Elements */}
|
||||
<div className="absolute top-8 left-8 p-2 rounded-xl bg-amber-600 text-white shadow-lg shadow-amber-600/40">
|
||||
<Award size={20} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Share Button */}
|
||||
<button
|
||||
onClick={onShare}
|
||||
className="w-full py-5 bg-zinc-900 hover:bg-zinc-800 border border-white/10 text-white rounded-3xl font-black uppercase tracking-widest text-xs flex items-center justify-center gap-3 transition-all"
|
||||
>
|
||||
<Share2 size={18} />
|
||||
Share Report
|
||||
</button>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
255
src/components/ScanAndTasteFlow.tsx
Normal file
255
src/components/ScanAndTasteFlow.tsx
Normal file
@@ -0,0 +1,255 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { X, Loader2, Sparkles, AlertCircle } from 'lucide-react';
|
||||
import TastingEditor from './TastingEditor';
|
||||
import SessionBottomSheet from './SessionBottomSheet';
|
||||
import ResultCard from './ResultCard';
|
||||
import { useSession } from '@/context/SessionContext';
|
||||
import { magicScan } from '@/services/magic-scan';
|
||||
import { saveBottle } from '@/services/save-bottle';
|
||||
import { saveTasting } from '@/services/save-tasting';
|
||||
import { BottleMetadata } from '@/types/whisky';
|
||||
import { useI18n } from '@/i18n/I18nContext';
|
||||
import { createClient } from '@/lib/supabase/client';
|
||||
|
||||
type FlowState = 'IDLE' | 'SCANNING' | 'EDITOR' | 'RESULT' | 'ERROR';
|
||||
|
||||
interface ScanAndTasteFlowProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
base64Image: string | null;
|
||||
}
|
||||
|
||||
export default function ScanAndTasteFlow({ isOpen, onClose, base64Image }: ScanAndTasteFlowProps) {
|
||||
const [state, setState] = useState<FlowState>('IDLE');
|
||||
const [isSessionsOpen, setIsSessionsOpen] = useState(false);
|
||||
const { activeSession } = useSession();
|
||||
const [tastingData, setTastingData] = useState<any>(null);
|
||||
const [bottleMetadata, setBottleMetadata] = useState<BottleMetadata | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const { locale } = useI18n();
|
||||
const supabase = createClient();
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && base64Image) {
|
||||
handleScan(base64Image);
|
||||
} else if (!isOpen) {
|
||||
setState('IDLE');
|
||||
setTastingData(null);
|
||||
setBottleMetadata(null);
|
||||
setError(null);
|
||||
setIsSaving(false);
|
||||
}
|
||||
}, [isOpen, base64Image]);
|
||||
|
||||
const handleScan = async (image: string) => {
|
||||
setState('SCANNING');
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const cleanBase64 = image.split(',')[1] || image;
|
||||
const result = await magicScan(cleanBase64, 'gemini', locale);
|
||||
|
||||
if (result.success && result.data) {
|
||||
setBottleMetadata(result.data);
|
||||
setState('EDITOR');
|
||||
} else {
|
||||
throw new Error(result.error || 'Flasche konnte nicht erkannt werden.');
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
setState('ERROR');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveTasting = async (formData: any) => {
|
||||
if (!bottleMetadata || !base64Image) return;
|
||||
|
||||
setIsSaving(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const { data: { user } = {} } = await supabase.auth.getUser();
|
||||
if (!user) throw new Error('Nicht autorisiert');
|
||||
|
||||
// 1. Save Bottle
|
||||
const bottleResult = await saveBottle(bottleMetadata, base64Image, user.id);
|
||||
if (!bottleResult.success || !bottleResult.data) {
|
||||
throw new Error(bottleResult.error || 'Fehler beim Speichern der Flasche');
|
||||
}
|
||||
|
||||
const bottleId = bottleResult.data.id;
|
||||
|
||||
// 2. Save Tasting
|
||||
const tastingNote = {
|
||||
...formData,
|
||||
bottle_id: bottleId,
|
||||
};
|
||||
|
||||
const tastingResult = await saveTasting(tastingNote);
|
||||
if (!tastingResult.success) {
|
||||
throw new Error(tastingResult.error || 'Fehler beim Speichern des Tastings');
|
||||
}
|
||||
|
||||
setTastingData(tastingNote);
|
||||
setState('RESULT');
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
setState('ERROR');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleShare = async () => {
|
||||
if (navigator.share) {
|
||||
try {
|
||||
await navigator.share({
|
||||
title: `My Tasting: ${bottleMetadata?.name || 'Whisky'}`,
|
||||
text: `Check out my tasting results for ${bottleMetadata?.distillery} ${bottleMetadata?.name}!`,
|
||||
url: window.location.href,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Share failed:', err);
|
||||
}
|
||||
} else {
|
||||
alert('Sharing is not supported on this browser.');
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-[60] bg-[#0F1014] flex flex-col h-[100dvh] w-screen overflow-hidden overscroll-none"
|
||||
>
|
||||
{/* Close Button */}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-6 right-6 z-[70] p-2 rounded-full bg-white/5 border border-white/10 text-white/60 hover:text-white transition-colors"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
|
||||
<div className="flex-1 w-full h-full flex flex-col relative min-h-0">
|
||||
{state === 'SCANNING' && (
|
||||
<div className="flex-1 flex flex-col items-center justify-center">
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
className="flex flex-col items-center gap-6"
|
||||
>
|
||||
<div className="relative">
|
||||
<motion.div
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
|
||||
className="w-32 h-32 rounded-full border-2 border-dashed border-amber-500/30"
|
||||
/>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<Loader2 size={48} className="animate-spin text-amber-500" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<h2 className="text-2xl font-black text-white uppercase tracking-tight">Analysiere Etikett...</h2>
|
||||
<p className="text-amber-500 font-black uppercase tracking-widest text-[10px] flex items-center justify-center gap-2">
|
||||
<Sparkles size={12} /> KI-gestütztes Scanning
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{state === 'ERROR' && (
|
||||
<div className="flex-1 flex flex-col items-center justify-center">
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
className="flex flex-col items-center gap-6 p-8 text-center"
|
||||
>
|
||||
<div className="w-20 h-20 rounded-full bg-red-500/10 flex items-center justify-center text-red-500">
|
||||
<AlertCircle size={40} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-2xl font-black text-white uppercase tracking-tight">Ups! Da lief was schief.</h2>
|
||||
<p className="text-white/60 text-sm max-w-xs mx-auto">{error || 'Wir konnten die Flasche leider nicht erkennen. Bitte versuch es mit einem anderen Foto.'}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-8 py-4 bg-white/5 border border-white/10 rounded-2xl text-white font-black uppercase tracking-widest text-[10px] hover:bg-white/10 transition-all"
|
||||
>
|
||||
Schließen
|
||||
</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{state === 'EDITOR' && bottleMetadata && (
|
||||
<motion.div
|
||||
key="editor"
|
||||
initial={{ y: 50, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
exit={{ y: -50, opacity: 0 }}
|
||||
className="flex-1 w-full h-full flex flex-col min-h-0"
|
||||
>
|
||||
<TastingEditor
|
||||
bottleMetadata={bottleMetadata}
|
||||
image={base64Image}
|
||||
onSave={handleSaveTasting}
|
||||
onOpenSessions={() => setIsSessionsOpen(true)}
|
||||
activeSessionName={activeSession?.name}
|
||||
activeSessionId={activeSession?.id}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{(isSaving) && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="absolute inset-0 z-[80] bg-[#0F1014]/80 backdrop-blur-sm flex flex-col items-center justify-center gap-6"
|
||||
>
|
||||
<Loader2 size={48} className="animate-spin text-amber-500" />
|
||||
<h2 className="text-xl font-black text-white uppercase tracking-tight">Speichere Tasting...</h2>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{state === 'RESULT' && tastingData && bottleMetadata && (
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="min-h-full flex flex-col items-center justify-center py-20 px-6">
|
||||
<motion.div
|
||||
key="result"
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
className="w-full max-w-sm"
|
||||
>
|
||||
<ResultCard
|
||||
data={{
|
||||
...tastingData,
|
||||
complexity: tastingData.complexity || 75,
|
||||
balance: tastingData.balance || 85,
|
||||
}}
|
||||
bottleName={bottleMetadata.name || 'Unknown Whisky'}
|
||||
image={base64Image}
|
||||
onShare={handleShare}
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<SessionBottomSheet
|
||||
isOpen={isSessionsOpen}
|
||||
onClose={() => setIsSessionsOpen(false)}
|
||||
/>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
144
src/components/SessionBottomSheet.tsx
Normal file
144
src/components/SessionBottomSheet.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Plus, Check, ChevronRight, Loader2 } from 'lucide-react';
|
||||
import { useSession } from '@/context/SessionContext';
|
||||
import { createClient } from '@/lib/supabase/client';
|
||||
|
||||
interface Session {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface SessionBottomSheetProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function SessionBottomSheet({ isOpen, onClose }: SessionBottomSheetProps) {
|
||||
const { activeSession, setActiveSession } = useSession();
|
||||
const [sessions, setSessions] = useState<Session[]>([]);
|
||||
const [newSessionName, setNewSessionName] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const supabase = createClient();
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
fetchSessions();
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const fetchSessions = async () => {
|
||||
setIsLoading(true);
|
||||
const { data, error } = await supabase
|
||||
.from('tasting_sessions')
|
||||
.select('id, name')
|
||||
.order('scheduled_at', { ascending: false })
|
||||
.limit(10);
|
||||
|
||||
if (!error && data) {
|
||||
setSessions(data);
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
const handleCreateSession = async () => {
|
||||
if (!newSessionName.trim()) return;
|
||||
setIsCreating(true);
|
||||
|
||||
const { data: { user } } = await supabase.auth.getUser();
|
||||
if (!user) return;
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('tasting_sessions')
|
||||
.insert([{ name: newSessionName.trim(), user_id: user.id }])
|
||||
.select()
|
||||
.single();
|
||||
|
||||
if (!error && data) {
|
||||
setSessions(prev => [data, ...prev]);
|
||||
setNewSessionName('');
|
||||
setActiveSession({ id: data.id, name: data.name });
|
||||
onClose();
|
||||
}
|
||||
setIsCreating(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={onClose}
|
||||
className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[80]"
|
||||
/>
|
||||
|
||||
{/* Sheet */}
|
||||
<motion.div
|
||||
initial={{ y: '100%' }}
|
||||
animate={{ y: 0 }}
|
||||
exit={{ y: '100%' }}
|
||||
transition={{ type: 'spring', damping: 25, stiffness: 200 }}
|
||||
className="fixed bottom-0 left-0 right-0 bg-[#1A1B20] border-t border-white/10 rounded-t-[32px] z-[90] p-8 pb-12 max-h-[80vh] overflow-y-auto shadow-[0_-10px_40px_rgba(0,0,0,0.5)]"
|
||||
>
|
||||
{/* Drag Handle */}
|
||||
<div className="w-12 h-1.5 bg-white/10 rounded-full mx-auto mb-8" />
|
||||
|
||||
<h2 className="text-2xl font-bold mb-6 font-display text-white">Tasting Session</h2>
|
||||
|
||||
{/* New Session Input */}
|
||||
<div className="relative mb-8">
|
||||
<input
|
||||
type="text"
|
||||
value={newSessionName}
|
||||
onChange={(e) => setNewSessionName(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleCreateSession()}
|
||||
placeholder="Neue Session erstellen..."
|
||||
className="w-full bg-white/5 border border-white/10 rounded-2xl py-4 px-6 text-white focus:outline-none focus:border-[#C89D46] transition-colors"
|
||||
/>
|
||||
<button
|
||||
onClick={handleCreateSession}
|
||||
disabled={isCreating || !newSessionName.trim()}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 p-2 bg-[#C89D46] text-black rounded-xl disabled:opacity-50"
|
||||
>
|
||||
{isCreating ? <Loader2 size={20} className="animate-spin" /> : <Plus size={20} />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Session List */}
|
||||
<div className="space-y-4">
|
||||
<p className="text-xs font-black uppercase tracking-widest text-white/40 mb-2">Aktuelle Sessions</p>
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<Loader2 size={24} className="animate-spin text-white/20" />
|
||||
</div>
|
||||
) : sessions.length > 0 ? (
|
||||
sessions.map((s) => (
|
||||
<button
|
||||
key={s.id}
|
||||
onClick={() => {
|
||||
setActiveSession({ id: s.id, name: s.name });
|
||||
onClose();
|
||||
}}
|
||||
className={`w-full flex items-center justify-between p-4 rounded-2xl border transition-all ${activeSession?.id === s.id ? 'bg-[#C89D46]/10 border-[#C89D46] text-[#C89D46]' : 'bg-white/5 border-white/5 hover:border-white/20 text-white'}`}
|
||||
>
|
||||
<span className="font-bold">{s.name}</span>
|
||||
{activeSession?.id === s.id ? <Check size={20} /> : <ChevronRight size={20} className="text-white/20" />}
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center py-8 text-white/30 italic">Keine aktiven Sessions gefunden</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
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