robin/Dramlog-Prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: optimize scan flow with WebP compression and fix admin metrics visibility

Browse Source
This commit is contained in:
robin
2025-12-22 10:15:29 +01:00
parent f0588418c8
commit 5e35710b67
19 changed files with 477 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/bottles/[id]/page.tsx
View File

@@ -41,7 +41,7 @@ export default function BottlePage() {
if (!bottleId) return null;
return (
<main className="min-h-screen bg-zinc-50 dark:bg-black p-4 md:p-12 lg:p-24 space-y-6">
<main className="min-h-screen bg-zinc-950 p-4 md:p-12 lg:p-24 space-y-6">
<div className="max-w-4xl mx-auto flex justify-end">
<OfflineIndicator />
</div>

12
src/app/globals.css
View File

@@ -25,6 +25,18 @@ body {
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}
/* Global Input Text Fix */
input,
textarea,
select {
@apply bg-zinc-950 text-white border-zinc-800 focus:ring-1 focus:ring-orange-600 outline-none transition-all;
}
input::placeholder,
textarea::placeholder {
@apply text-zinc-600;
}
h1,
h2,
h3,

23
src/app/page.tsx
View File

@@ -12,7 +12,7 @@ import LanguageSwitcher from "@/components/LanguageSwitcher";
import OfflineIndicator from "@/components/OfflineIndicator";
import { useI18n } from "@/i18n/I18nContext";
import { useSession } from "@/context/SessionContext";
import { Sparkles, X } from "lucide-react";
import { Sparkles, X, Loader2 } from "lucide-react";
import { BottomNavigation } from '@/components/BottomNavigation';
import ScanAndTasteFlow from '@/components/ScanAndTasteFlow';
@@ -25,10 +25,15 @@ export default function Home() {
const { t } = useI18n();
const { activeSession } = useSession();
const [isFlowOpen, setIsFlowOpen] = useState(false);
const [capturedImage, setCapturedImage] = useState<string | null>(null);
const [capturedFile, setCapturedFile] = useState<File | null>(null);
const [hasMounted, setHasMounted] = useState(false);
const handleImageSelected = (base64: string) => {
setCapturedImage(base64);
useEffect(() => {
setHasMounted(true);
}, []);
const handleImageSelected = (file: File) => {
setCapturedFile(file);
setIsFlowOpen(true);
};
@@ -149,6 +154,14 @@ export default function Home() {
await supabase.auth.signOut();
};
if (!hasMounted) {
return (
<main className="flex min-h-screen flex-col items-center justify-center bg-zinc-950">
<Loader2 className="animate-spin text-orange-600" size={40} />
</main>
);
}
if (!user) {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-6 bg-zinc-950">
@@ -257,7 +270,7 @@ export default function Home() {
<ScanAndTasteFlow
isOpen={isFlowOpen}
onClose={() => setIsFlowOpen(false)}
base64Image={capturedImage}
imageFile={capturedFile}
/>
</main>
);

66
src/app/sessions/[id]/page.tsx
View File

@@ -188,29 +188,29 @@ export default function SessionDetailPage() {
if (isLoading) {
return (
<div className="min-h-screen flex items-center justify-center bg-zinc-50 dark:bg-black">
<Loader2 size={48} className="animate-spin text-amber-600" />
<div className="min-h-screen flex items-center justify-center bg-zinc-950">
<Loader2 size={48} className="animate-spin text-orange-600" />
</div>
);
}
if (!session) {
return (
<div className="min-h-screen flex flex-col items-center justify-center gap-4 bg-zinc-50 dark:bg-black p-6">
<h1 className="text-2xl font-bold">Session nicht gefunden</h1>
<Link href="/" className="text-amber-600 font-bold">Zurück zum Start</Link>
<div className="min-h-screen flex flex-col items-center justify-center gap-4 bg-zinc-950 p-6">
<h1 className="text-2xl font-bold text-zinc-50">Session nicht gefunden</h1>
<Link href="/" className="text-orange-600 font-bold">Zurück zum Start</Link>
</div>
);
}
return (
<main className="min-h-screen bg-zinc-50 dark:bg-black p-4 md:p-12 lg:p-24">
<main className="min-h-screen bg-zinc-950 p-4 md:p-12 lg:p-24">
<div className="max-w-4xl mx-auto space-y-8">
{/* Back Button */}
<div className="flex justify-between items-center">
<Link
href="/"
className="inline-flex items-center gap-2 text-zinc-400 hover:text-amber-600 transition-colors font-bold uppercase text-[10px] tracking-[0.2em]"
className="inline-flex items-center gap-2 text-zinc-500 hover:text-orange-600 transition-colors font-bold uppercase text-[10px] tracking-[0.2em]"
>
<ChevronLeft size={16} />
Alle Sessions
@@ -219,7 +219,7 @@ export default function SessionDetailPage() {
</div>
{/* Hero */}
<header className="bg-white dark:bg-zinc-900 rounded-3xl p-8 border border-zinc-200 dark:border-zinc-800 shadow-xl relative overflow-hidden group">
<header className="bg-zinc-900 rounded-3xl p-8 border border-zinc-800 shadow-xl relative overflow-hidden group">
{/* Visual Eyecatcher: Background Glow */}
{tastings.length > 0 && tastings[0].bottles.image_url && (
<div className="absolute top-0 right-0 w-1/2 h-full opacity-20 dark:opacity-30 pointer-events-none">
@@ -239,7 +239,7 @@ export default function SessionDetailPage() {
{/* Visual Eyecatcher: Bottle Preview */}
{tastings.length > 0 && tastings[0].bottles.image_url && (
<div className="shrink-0 relative">
<div className="w-20 h-20 md:w-24 md:h-24 rounded-2xl bg-white dark:bg-zinc-800 border-2 border-amber-500/20 shadow-2xl overflow-hidden relative group-hover:rotate-3 transition-transform duration-500">
<div className="w-20 h-20 md:w-24 md:h-24 rounded-2xl bg-zinc-800 border-2 border-orange-500/20 shadow-2xl overflow-hidden relative group-hover:rotate-3 transition-transform duration-500">
<img
src={tastings[0].bottles.image_url}
alt={tastings[0].bottles.name}
@@ -247,7 +247,7 @@ export default function SessionDetailPage() {
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
</div>
<div className="absolute -bottom-2 -right-2 bg-amber-600 text-white text-[10px] font-black px-2 py-1 rounded-lg shadow-lg rotate-12">
<div className="absolute -bottom-2 -right-2 bg-orange-600 text-white text-[10px] font-black px-2 py-1 rounded-lg shadow-lg rotate-12">
LATEST
</div>
</div>
@@ -255,7 +255,7 @@ export default function SessionDetailPage() {
<div className="space-y-2">
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 text-amber-600 font-black uppercase text-[10px] tracking-widest">
<div className="flex items-center gap-2 text-orange-600 font-black uppercase text-[10px] tracking-widest">
<Sparkles size={14} />
Tasting Session
</div>
@@ -263,23 +263,23 @@ export default function SessionDetailPage() {
<span className="bg-zinc-100 dark:bg-zinc-800 text-zinc-500 text-[8px] font-black px-2 py-0.5 rounded-md uppercase tracking-widest border border-zinc-200 dark:border-zinc-700">Abgeschlossen</span>
)}
</div>
<h1 className="text-4xl md:text-5xl font-black text-zinc-900 dark:text-white tracking-tighter">
<h1 className="text-4xl md:text-5xl font-black text-zinc-50 tracking-tighter">
{session.name}
</h1>
<div className="flex flex-wrap items-center gap-3 sm:gap-6 text-zinc-500 font-bold text-sm">
<span className="flex items-center gap-1.5 bg-zinc-50 dark:bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
<Calendar size={16} className="text-amber-600" />
<span className="flex items-center gap-1.5 bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-800 shadow-sm">
<Calendar size={16} className="text-orange-600" />
{new Date(session.scheduled_at).toLocaleDateString('de-DE')}
</span>
{participants.length > 0 && (
<div className="flex items-center gap-2 bg-zinc-50 dark:bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
<Users size={16} className="text-amber-600" />
<div className="flex items-center gap-2 bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-800 shadow-sm">
<Users size={16} className="text-orange-600" />
<AvatarStack names={participants.map(p => p.buddies.name)} limit={5} />
</div>
)}
{tastings.length > 0 && (
<span className="flex items-center gap-1.5 bg-zinc-50 dark:bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm transition-all animate-in fade-in slide-in-from-left-2">
<GlassWater size={16} className="text-amber-600" />
<span className="flex items-center gap-1.5 bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-800 shadow-sm transition-all animate-in fade-in slide-in-from-left-2">
<GlassWater size={16} className="text-orange-600" />
{tastings.length} {tastings.length === 1 ? 'Whisky' : 'Whiskys'}
</span>
)}
@@ -292,7 +292,7 @@ export default function SessionDetailPage() {
activeSession?.id !== session.id ? (
<button
onClick={() => setActiveSession({ id: session.id, name: session.name })}
className="px-6 py-3 bg-amber-600 hover:bg-amber-700 text-white rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 transition-all shadow-xl shadow-amber-600/20"
className="px-6 py-3 bg-orange-600 hover:bg-orange-700 text-white rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 transition-all shadow-xl shadow-orange-950/20"
>
<Play size={18} fill="currentColor" />
Starten
@@ -301,7 +301,7 @@ export default function SessionDetailPage() {
<button
onClick={handleCloseSession}
disabled={isClosing}
className="px-6 py-3 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 border border-zinc-200 dark:border-zinc-800 hover:bg-red-600 hover:text-white dark:hover:bg-red-600 dark:hover:text-white transition-all group"
className="px-6 py-3 bg-zinc-100 text-zinc-900 rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 border border-zinc-800 hover:bg-red-600 hover:text-white transition-all group"
>
{isClosing ? <Loader2 size={18} className="animate-spin" /> : <Square size={18} className="text-red-500 group-hover:text-white transition-colors" fill="currentColor" />}
Beenden
@@ -313,7 +313,7 @@ export default function SessionDetailPage() {
onClick={handleDeleteSession}
disabled={isDeleting}
title="Session löschen"
className="p-3 bg-red-50 dark:bg-red-900/10 text-red-600 dark:text-red-400 rounded-2xl hover:bg-red-600 hover:text-white dark:hover:bg-red-600 dark:hover:text-white transition-all border border-red-100 dark:border-red-900/20 disabled:opacity-50"
className="p-3 bg-red-900/10 text-red-400 rounded-2xl hover:bg-red-600 hover:text-white transition-all border border-red-900/20 disabled:opacity-50"
>
{isDeleting ? <Loader2 size={20} className="animate-spin" /> : <Trash2 size={20} />}
</button>
@@ -324,9 +324,9 @@ export default function SessionDetailPage() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{/* Sidebar: Participants */}
<aside className="md:col-span-1 space-y-6">
<div className="bg-white dark:bg-zinc-900 rounded-3xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-lg">
<h3 className="text-sm font-black uppercase tracking-widest text-zinc-400 mb-6 flex items-center gap-2">
<Users size={16} className="text-amber-600" />
<div className="bg-zinc-900 rounded-3xl p-6 border border-zinc-800 shadow-lg">
<h3 className="text-sm font-black uppercase tracking-widest text-zinc-500 mb-6 flex items-center gap-2">
<Users size={16} className="text-orange-600" />
Teilnehmer
</h3>
@@ -336,10 +336,10 @@ export default function SessionDetailPage() {
) : (
participants.map((p) => (
<div key={p.buddy_id} className="flex items-center justify-between group">
<span className="text-sm font-bold text-zinc-700 dark:text-zinc-300">{p.buddies.name}</span>
<span className="text-sm font-bold text-zinc-300">{p.buddies.name}</span>
<button
onClick={() => handleRemoveParticipant(p.buddy_id)}
className="text-zinc-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all"
className="text-zinc-600 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all"
>
<Trash2 size={14} />
</button>
@@ -348,14 +348,14 @@ export default function SessionDetailPage() {
)}
</div>
<div className="border-t border-zinc-100 dark:border-zinc-800 pt-6">
<label className="text-[10px] font-black uppercase tracking-widest text-zinc-400 block mb-3">Buddy hinzufügen</label>
<div className="border-t border-zinc-800 pt-6">
<label className="text-[10px] font-black uppercase tracking-widest text-zinc-500 block mb-3">Buddy hinzufügen</label>
<select
onChange={(e) => {
if (e.target.value) handleAddParticipant(e.target.value);
e.target.value = "";
}}
className="w-full bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl px-3 py-2 text-xs font-bold outline-none focus:ring-2 focus:ring-amber-500/50"
className="w-full bg-zinc-800 border border-zinc-700 rounded-xl px-3 py-2 text-xs font-bold text-zinc-300 outline-none focus:ring-2 focus:ring-orange-500/50"
>
<option value="">Auswählen...</option>
{allBuddies
@@ -382,15 +382,15 @@ export default function SessionDetailPage() {
{/* Main Content: Bottle List */}
<section className="md:col-span-2 space-y-6">
<div className="bg-white dark:bg-zinc-900 rounded-3xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-lg">
<div className="bg-zinc-900 rounded-3xl p-6 border border-zinc-800 shadow-lg">
<div className="flex justify-between items-center mb-8">
<h3 className="text-sm font-black uppercase tracking-widest text-zinc-400 flex items-center gap-2">
<GlassWater size={16} className="text-amber-600" />
<h3 className="text-sm font-black uppercase tracking-widest text-zinc-500 flex items-center gap-2">
<GlassWater size={16} className="text-orange-600" />
Verkostete Flaschen
</h3>
<Link
href={`/?session_id=${id}`} // Redirect to home with context
className="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-xl text-xs font-black uppercase tracking-widest flex items-center gap-2 transition-all shadow-lg shadow-amber-600/20"
className="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-xl text-xs font-black uppercase tracking-widest flex items-center gap-2 transition-all shadow-lg shadow-orange-600/20"
>
<Plus size={16} />
Flasche hinzufügen