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

feat: refine session workflow with global state, quick tasting, and statistics

Browse Source
This commit is contained in:
robin
2025-12-18 17:19:38 +01:00
parent 7f600698e4
commit ca1621e765
14 changed files with 399 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/SessionList.tsx
View File

@@ -2,15 +2,17 @@
import React, { useState, useEffect } from 'react';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
import { Calendar, Plus, GlassWater, Loader2, ChevronRight, Users } from 'lucide-react';
import { Calendar, Plus, GlassWater, Loader2, ChevronRight, Users, Check } from 'lucide-react';
import Link from 'next/link';
import { useI18n } from '@/i18n/I18nContext';
import { useSession } from '@/context/SessionContext';
interface Session {
id: string;
name: string;
scheduled_at: string;
participant_count?: number;
whisky_count?: number;
}
export default function SessionList() {
@@ -20,6 +22,7 @@ export default function SessionList() {
const [isLoading, setIsLoading] = useState(true);
const [isCreating, setIsCreating] = useState(false);
const [newName, setNewName] = useState('');
const { activeSession, setActiveSession } = useSession();
useEffect(() => {
fetchSessions();
@@ -30,7 +33,8 @@ export default function SessionList() {
.from('tasting_sessions')
.select(`
*,
session_participants (count)
session_participants (count),
tastings (count)
`)
.order('scheduled_at', { ascending: false });
@@ -39,7 +43,8 @@ export default function SessionList() {
} else {
setSessions(data.map(s => ({
...s,
participant_count: s.session_participants[0]?.count || 0
participant_count: s.session_participants[0]?.count || 0,
whisky_count: s.tastings[0]?.count || 0
})) || []);
}
setIsLoading(false);
@@ -64,6 +69,7 @@ export default function SessionList() {
} else {
setSessions(prev => [data, ...prev]);
setNewName('');
setActiveSession({ id: data.id, name: data.name });
}
setIsCreating(false);
};
@@ -103,14 +109,18 @@ export default function SessionList() {
) : (
<div className="space-y-3">
{sessions.map((session) => (
<Link
<div
key={session.id}
href={`/sessions/${session.id}`}
className="flex items-center justify-between p-4 bg-zinc-50 dark:bg-zinc-800/50 rounded-2xl border border-zinc-100 dark:border-zinc-800 group hover:border-amber-500/30 transition-all"
className={`flex items-center justify-between p-4 rounded-2xl border group transition-all ${activeSession?.id === session.id
? 'bg-amber-600 border-amber-600 shadow-lg shadow-amber-600/20'
: 'bg-zinc-50 dark:bg-zinc-800/50 border-zinc-100 dark:border-zinc-800 hover:border-amber-500/30'
}`}
>
<div className="space-y-1">
<div className="font-bold text-zinc-800 dark:text-zinc-100">{session.name}</div>
<div className="flex items-center gap-4 text-[10px] font-black uppercase tracking-widest text-zinc-400">
<Link href={`/sessions/${session.id}`} className="flex-1 space-y-1 min-w-0">
<div className={`font-bold truncate ${activeSession?.id === session.id ? 'text-white' : 'text-zinc-800 dark:text-zinc-100'}`}>
{session.name}
</div>
<div className={`flex items-center gap-4 text-[10px] font-black uppercase tracking-widest ${activeSession?.id === session.id ? 'text-white/80' : 'text-zinc-400'}`}>
<span className="flex items-center gap-1">
<Calendar size={12} />
{new Date(session.scheduled_at).toLocaleDateString(locale === 'de' ? 'de-DE' : 'en-US')}
@@ -121,13 +131,35 @@ export default function SessionList() {
{session.participant_count} {t('tasting.participants')}
</span>
)}
{session.whisky_count! > 0 && (
<span className="flex items-center gap-1">
<GlassWater size={12} />
{session.whisky_count} Whiskys
</span>
)}
</div>
</Link>
<div className="flex items-center gap-2">
{activeSession?.id !== session.id ? (
<button
onClick={() => setActiveSession({ id: session.id, name: session.name })}
className="p-2 bg-white dark:bg-zinc-700 text-amber-600 rounded-xl shadow-sm border border-zinc-200 dark:border-zinc-600 hover:scale-110 transition-transform"
title="Start Session"
>
<GlassWater size={18} />
</button>
) : (
<div className="p-2 bg-white/20 text-white rounded-xl">
<Check size={18} />
</div>
)}
<ChevronRight size={20} className={activeSession?.id === session.id ? 'text-white/50' : 'text-zinc-300'} />
</div>
<ChevronRight size={20} className="text-zinc-300 group-hover:text-amber-500 transition-colors" />
</Link>
))}
</div>
</div>
))
}
</div >
)}
</div>
</div >
);
}