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

feat: session deletion, improved tasting deletion visibility, and PWA login loop fix

Browse Source
This commit is contained in:
robin
2025-12-18 21:02:44 +01:00
parent a4a9d79c4c
commit a64e8f17a1
8 changed files with 174 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/TastingList.tsx
View File

@@ -24,13 +24,15 @@ interface Tasting {
id: string;
name: string;
};
user_id: string;
}
interface TastingListProps {
initialTastings: Tasting[];
currentUserId?: string;
}
export default function TastingList({ initialTastings }: TastingListProps) {
export default function TastingList({ initialTastings, currentUserId }: TastingListProps) {
const [sortBy, setSortBy] = useState<'date-desc' | 'date-asc' | 'rating-desc' | 'rating-asc'>('date-desc');
const [isDeleting, setIsDeleting] = useState<string | null>(null);
@@ -100,8 +102,8 @@ export default function TastingList({ initialTastings }: TastingListProps) {
key={note.id}
className="bg-white dark:bg-zinc-900 p-6 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-4 hover:border-amber-500/30 transition-all hover:shadow-md group"
>
<div className="flex justify-between items-center">
<div className="flex items-center gap-3">
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
<div className="bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 px-3 py-1.5 rounded-2xl text-sm font-black ring-1 ring-amber-500/20 flex items-center gap-1.5">
<Star size={14} fill="currentColor" className="text-amber-500" />
{note.rating}/100
@@ -113,38 +115,41 @@ export default function TastingList({ initialTastings }: TastingListProps) {
{note.is_sample ? 'Sample' : 'Bottle'}
</span>
<div className="text-[10px] text-zinc-500 font-bold bg-zinc-100 dark:bg-zinc-800 px-2 py-1 rounded-lg flex items-center gap-1">
<Clock size={10} />
{new Date(note.created_at).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
</div>
{note.tasting_sessions && (
<Link
href={`/sessions/${note.tasting_sessions.id}`}
className="text-[10px] text-zinc-500 font-bold bg-amber-50 dark:bg-amber-900/20 px-2 py-1 rounded-lg flex items-center gap-1 border border-amber-200/50 dark:border-amber-800/50 transition-all hover:bg-amber-100 dark:hover:bg-amber-900/40"
className="text-[10px] text-zinc-500 font-bold bg-amber-50 dark:bg-amber-900/20 px-2 py-1 rounded-lg flex items-center gap-1 border border-amber-200/50 dark:border-amber-800/50 transition-all hover:bg-amber-100 dark:hover:bg-amber-900/40 truncate max-w-[120px] sm:max-w-none"
>
<GlassWater size={10} className="text-amber-600" />
{note.tasting_sessions.name}
</Link>
)}
</div>
<div className="flex items-center gap-4">
<div className="flex items-center justify-between w-full sm:w-auto gap-4">
<div className="text-[10px] text-zinc-400 font-black tracking-widest uppercase flex items-center gap-1">
<Calendar size={12} />
{new Date(note.created_at).toLocaleDateString('de-DE')}
</div>
<button
onClick={() => handleDelete(note.id, note.bottle_id)}
disabled={!!isDeleting}
className="px-3 py-1.5 text-zinc-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-all disabled:opacity-50 flex items-center gap-2 border border-transparent hover:border-red-200 dark:hover:border-red-900/30 font-black text-[9px] uppercase tracking-widest"
title="Tasting löschen"
>
{isDeleting === note.id ? (
<Loader2 size={14} className="animate-spin" />
) : (
<>
<Trash2 size={14} />
<span className="opacity-0 group-hover:opacity-100 transition-opacity">Löschen</span>
</>
)}
</button>
{(!currentUserId || note.user_id === currentUserId) && (
<button
onClick={() => handleDelete(note.id, note.bottle_id)}
disabled={!!isDeleting}
className="px-3 py-1.5 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 rounded-xl transition-all disabled:opacity-50 flex items-center gap-2 border border-red-100 dark:border-red-900/30 font-black text-[10px] uppercase tracking-widest shadow-sm hover:bg-red-600 hover:text-white dark:hover:bg-red-600 dark:hover:text-white"
title="Tasting löschen"
>
{isDeleting === note.id ? (
<Loader2 size={14} className="animate-spin" />
) : (
<>
<Trash2 size={14} fill="currentColor" />
<span>Löschen</span>
</>
)}
</button>
)}
</div>
</div>