feat: social UI optimization, collapsible sections, and admin fixes
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
export const dynamic = 'force-dynamic';
|
||||
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
|
||||
import { cookies } from 'next/headers';
|
||||
import { redirect } from 'next/navigation';
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
export const dynamic = 'force-dynamic';
|
||||
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
|
||||
import { cookies } from 'next/headers';
|
||||
import { redirect } from 'next/navigation';
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
export const dynamic = 'force-dynamic';
|
||||
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
|
||||
import { cookies } from 'next/headers';
|
||||
import { redirect } from 'next/navigation';
|
||||
|
||||
@@ -4,6 +4,7 @@ import React, { useState, useEffect } from 'react';
|
||||
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
|
||||
import { ChevronLeft, Users, Calendar, GlassWater, Plus, Trash2, Loader2, Sparkles, ChevronRight, Play, Square } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import AvatarStack from '@/components/AvatarStack';
|
||||
import { deleteSession } from '@/services/delete-session';
|
||||
import { useSession } from '@/context/SessionContext';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
@@ -193,14 +194,20 @@ export default function SessionDetailPage() {
|
||||
<h1 className="text-4xl md:text-5xl font-black text-zinc-900 dark:text-white tracking-tighter">
|
||||
{session.name}
|
||||
</h1>
|
||||
<div className="flex items-center gap-4 text-zinc-500 font-bold text-sm">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Calendar size={16} className="text-zinc-400" />
|
||||
<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" />
|
||||
{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" />
|
||||
<AvatarStack names={participants.map(p => p.buddies.name)} limit={5} />
|
||||
</div>
|
||||
)}
|
||||
{tastings.length > 0 && (
|
||||
<span className="flex items-center gap-1.5 transition-all animate-in fade-in slide-in-from-left-2">
|
||||
<GlassWater size={16} className="text-zinc-400" />
|
||||
<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" />
|
||||
{tastings.length} {tastings.length === 1 ? 'Whisky' : 'Whiskys'}
|
||||
</span>
|
||||
)}
|
||||
|
||||
56
src/components/AvatarStack.tsx
Normal file
56
src/components/AvatarStack.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
interface AvatarStackProps {
|
||||
names: string[];
|
||||
limit?: number;
|
||||
size?: 'sm' | 'md';
|
||||
}
|
||||
|
||||
export default function AvatarStack({ names, limit = 3, size = 'sm' }: AvatarStackProps) {
|
||||
if (!names || names.length === 0) return null;
|
||||
|
||||
const visibleNames = names.slice(0, limit);
|
||||
const extraCount = names.length - limit;
|
||||
|
||||
const sizeClasses = size === 'sm' ? 'w-6 h-6 text-[10px]' : 'w-8 h-8 text-xs';
|
||||
|
||||
const getInitials = (name: string) => {
|
||||
return name
|
||||
.split(' ')
|
||||
.map(n => n[0])
|
||||
.slice(0, 2)
|
||||
.join('')
|
||||
.toUpperCase();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center -space-x-2">
|
||||
{visibleNames.map((name, i) => (
|
||||
<div
|
||||
key={`${name}-${i}`}
|
||||
className={`${sizeClasses} rounded-full bg-amber-100 dark:bg-amber-900/30 border-2 border-white dark:border-zinc-900 flex items-center justify-center text-amber-700 dark:text-amber-400 font-black ring-1 ring-amber-500/10 shadow-sm relative group`}
|
||||
title={name}
|
||||
>
|
||||
{getInitials(name)}
|
||||
{/* Tooltip on hover */}
|
||||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-zinc-900 text-white text-[10px] rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
|
||||
{name}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{extraCount > 0 && (
|
||||
<div
|
||||
className={`${sizeClasses} rounded-full bg-zinc-100 dark:bg-zinc-800 border-2 border-white dark:border-zinc-900 flex items-center justify-center text-zinc-500 dark:text-zinc-400 font-black ring-1 ring-zinc-500/10 shadow-sm relative group`}
|
||||
title={`${extraCount} weitere Personen`}
|
||||
>
|
||||
+{extraCount}
|
||||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-zinc-900 text-white text-[10px] rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
|
||||
{names.slice(limit).join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
|
||||
import { Users, UserPlus, Trash2, User, Loader2 } from 'lucide-react';
|
||||
import { Users, UserPlus, Trash2, User, Loader2, ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import { useI18n } from '@/i18n/I18nContext';
|
||||
|
||||
interface Buddy {
|
||||
@@ -18,6 +18,12 @@ export default function BuddyList() {
|
||||
const [newName, setNewName] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isAdding, setIsAdding] = useState(false);
|
||||
const [isCollapsed, setIsCollapsed] = useState(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
return localStorage.getItem('whisky-buddies-collapsed') === 'true';
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
fetchBuddies();
|
||||
@@ -40,6 +46,12 @@ export default function BuddyList() {
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
const handleToggleCollapse = () => {
|
||||
const nextState = !isCollapsed;
|
||||
setIsCollapsed(nextState);
|
||||
localStorage.setItem('whisky-buddies-collapsed', String(nextState));
|
||||
};
|
||||
|
||||
const handleAddBuddy = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!newName.trim()) return;
|
||||
@@ -76,63 +88,97 @@ export default function BuddyList() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-3xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-xl">
|
||||
<h3 className="text-xl font-bold mb-6 flex items-center gap-2 text-zinc-800 dark:text-zinc-100 italic">
|
||||
<Users size={24} className="text-amber-600" />
|
||||
{t('buddy.title')}
|
||||
</h3>
|
||||
|
||||
<form onSubmit={handleAddBuddy} className="flex gap-2 mb-6">
|
||||
<input
|
||||
type="text"
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
placeholder={t('buddy.placeholder')}
|
||||
className="flex-1 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
|
||||
/>
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-3xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-xl transition-all duration-300">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-xl font-bold flex items-center gap-2 text-zinc-800 dark:text-zinc-100 italic">
|
||||
<Users size={24} className="text-amber-600" />
|
||||
{t('buddy.title')}
|
||||
{!isCollapsed && buddies.length > 0 && (
|
||||
<span className="text-sm font-normal text-zinc-400 not-italic ml-2">({buddies.length})</span>
|
||||
)}
|
||||
</h3>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isAdding || !newName.trim()}
|
||||
className="bg-amber-600 hover:bg-amber-700 text-white p-2 rounded-xl transition-all disabled:opacity-50"
|
||||
onClick={handleToggleCollapse}
|
||||
className="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-xl transition-colors text-zinc-400 hover:text-amber-600"
|
||||
title={isCollapsed ? 'Aufklappen' : 'Einklappen'}
|
||||
>
|
||||
{isAdding ? <Loader2 size={20} className="animate-spin" /> : <UserPlus size={20} />}
|
||||
{isCollapsed ? <ChevronDown size={20} /> : <ChevronUp size={20} />}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center py-8 text-zinc-400">
|
||||
<Loader2 size={24} className="animate-spin" />
|
||||
</div>
|
||||
) : buddies.length === 0 ? (
|
||||
<div className="text-center py-8 text-zinc-500 text-sm">
|
||||
{t('buddy.noBuddies')}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2 max-h-[300px] overflow-y-auto scrollbar-hide">
|
||||
{buddies.map((buddy) => (
|
||||
<div
|
||||
key={buddy.id}
|
||||
className="flex items-center justify-between p-3 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"
|
||||
{!isCollapsed && (
|
||||
<>
|
||||
<form onSubmit={handleAddBuddy} className="flex gap-2 mb-6">
|
||||
<input
|
||||
type="text"
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
placeholder={t('buddy.placeholder')}
|
||||
className="flex-1 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isAdding || !newName.trim()}
|
||||
className="bg-amber-600 hover:bg-amber-700 text-white p-2 rounded-xl transition-all disabled:opacity-50"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center text-amber-700 dark:text-amber-500">
|
||||
<User size={16} />
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-semibold text-zinc-800 dark:text-zinc-200 text-sm">{buddy.name}</span>
|
||||
{buddy.buddy_profile_id && (
|
||||
<span className="ml-2 inline-block px-1.5 py-0.5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-500 text-[8px] font-black uppercase rounded">{t('common.link')}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDeleteBuddy(buddy.id)}
|
||||
className="text-zinc-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all p-1"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
{isAdding ? <Loader2 size={20} className="animate-spin" /> : <UserPlus size={20} />}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center py-8 text-zinc-400">
|
||||
<Loader2 size={24} className="animate-spin" />
|
||||
</div>
|
||||
))}
|
||||
) : buddies.length === 0 ? (
|
||||
<div className="text-center py-8 text-zinc-500 text-sm">
|
||||
{t('buddy.noBuddies')}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[400px] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-zinc-200 dark:scrollbar-thumb-zinc-800">
|
||||
{buddies.map((buddy) => (
|
||||
<div
|
||||
key={buddy.id}
|
||||
className="flex items-center justify-between p-4 bg-white dark:bg-zinc-800/40 rounded-3xl border border-zinc-100 dark:border-zinc-800 group hover:border-amber-500/30 hover:shadow-md transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-2xl bg-amber-50 dark:bg-amber-900/20 flex items-center justify-center text-amber-600 dark:text-amber-500 font-bold shadow-inner">
|
||||
{buddy.name[0].toUpperCase()}
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-bold text-zinc-800 dark:text-zinc-100 text-sm tracking-tight">{buddy.name}</span>
|
||||
{buddy.buddy_profile_id && (
|
||||
<span className="text-[9px] font-black uppercase text-green-600 dark:text-green-500 tracking-widest">{t('common.link')}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDeleteBuddy(buddy.id)}
|
||||
className="text-zinc-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all p-2 hover:bg-red-50 dark:hover:bg-red-900/10 rounded-xl"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isCollapsed && buddies.length > 0 && (
|
||||
<div className="flex items-center gap-2 animate-in fade-in slide-in-from-top-1">
|
||||
<div className="flex -space-x-1.5 overflow-hidden">
|
||||
{buddies.slice(0, 5).map((b, i) => (
|
||||
<div key={b.id} className="w-7 h-7 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200/50 dark:border-amber-800/50 flex items-center justify-center text-[10px] font-black text-amber-600 dark:text-amber-500 shadow-sm">
|
||||
{b.name[0].toUpperCase()}
|
||||
</div>
|
||||
))}
|
||||
{buddies.length > 5 && (
|
||||
<div className="w-7 h-7 rounded-lg bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 flex items-center justify-center text-[8px] font-black text-zinc-500 shadow-sm">
|
||||
+{buddies.length - 5}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-[10px] text-zinc-400 font-black uppercase tracking-widest ml-1">{buddies.length} Buddies</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -2,8 +2,9 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
|
||||
import { Calendar, Plus, GlassWater, Loader2, ChevronRight, Users, Check, Trash2 } from 'lucide-react';
|
||||
import { Calendar, Plus, GlassWater, Loader2, ChevronRight, Users, Check, Trash2, ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import AvatarStack from './AvatarStack';
|
||||
import { deleteSession } from '@/services/delete-session';
|
||||
import { useI18n } from '@/i18n/I18nContext';
|
||||
import { useSession } from '@/context/SessionContext';
|
||||
@@ -14,6 +15,7 @@ interface Session {
|
||||
scheduled_at: string;
|
||||
participant_count?: number;
|
||||
whisky_count?: number;
|
||||
participants?: string[];
|
||||
}
|
||||
|
||||
export default function SessionList() {
|
||||
@@ -23,6 +25,12 @@ export default function SessionList() {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState<string | null>(null);
|
||||
const [isCollapsed, setIsCollapsed] = useState(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
return localStorage.getItem('whisky-sessions-collapsed') === 'true';
|
||||
}
|
||||
return false;
|
||||
});
|
||||
const [newName, setNewName] = useState('');
|
||||
const { activeSession, setActiveSession } = useSession();
|
||||
|
||||
@@ -35,7 +43,10 @@ export default function SessionList() {
|
||||
.from('tasting_sessions')
|
||||
.select(`
|
||||
*,
|
||||
session_participants (count),
|
||||
session_participants (
|
||||
count,
|
||||
buddies (name)
|
||||
),
|
||||
tastings (count)
|
||||
`)
|
||||
.order('scheduled_at', { ascending: false });
|
||||
@@ -57,6 +68,7 @@ export default function SessionList() {
|
||||
setSessions(fallbackData.map(s => ({
|
||||
...s,
|
||||
participant_count: s.session_participants[0]?.count || 0,
|
||||
participants: (s.session_participants as any[])?.filter(p => p.buddies).map(p => p.buddies.name) || [],
|
||||
whisky_count: 0
|
||||
})) || []);
|
||||
}
|
||||
@@ -64,12 +76,19 @@ export default function SessionList() {
|
||||
setSessions(data.map(s => ({
|
||||
...s,
|
||||
participant_count: s.session_participants[0]?.count || 0,
|
||||
participants: (s.session_participants as any[])?.filter(p => p.buddies).map(p => p.buddies.name) || [],
|
||||
whisky_count: s.tastings[0]?.count || 0
|
||||
})) || []);
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
const handleToggleCollapse = () => {
|
||||
const nextState = !isCollapsed;
|
||||
setIsCollapsed(nextState);
|
||||
localStorage.setItem('whisky-sessions-collapsed', String(nextState));
|
||||
};
|
||||
|
||||
const handleCreateSession = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!newName.trim()) return;
|
||||
@@ -115,106 +134,138 @@ export default function SessionList() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-3xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-xl">
|
||||
<h3 className="text-xl font-bold mb-6 flex items-center gap-2 text-zinc-800 dark:text-zinc-100 italic">
|
||||
<GlassWater size={24} className="text-amber-600" />
|
||||
{t('session.title')}
|
||||
</h3>
|
||||
|
||||
<form onSubmit={handleCreateSession} className="flex gap-2 mb-6">
|
||||
<input
|
||||
type="text"
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
placeholder={t('session.sessionName')}
|
||||
className="flex-1 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
|
||||
/>
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-3xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-xl transition-all duration-300">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-xl font-bold flex items-center gap-2 text-zinc-800 dark:text-zinc-100 italic">
|
||||
<Calendar size={24} className="text-amber-600" />
|
||||
{t('session.title')}
|
||||
{!isCollapsed && sessions.length > 0 && (
|
||||
<span className="text-sm font-normal text-zinc-400 not-italic ml-2">({sessions.length})</span>
|
||||
)}
|
||||
</h3>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isCreating || !newName.trim()}
|
||||
className="bg-amber-600 hover:bg-amber-700 text-white p-2 rounded-xl transition-all disabled:opacity-50"
|
||||
onClick={handleToggleCollapse}
|
||||
className="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-xl transition-colors text-zinc-400 hover:text-amber-600"
|
||||
title={isCollapsed ? 'Aufklappen' : 'Einklappen'}
|
||||
>
|
||||
{isCreating ? <Loader2 size={20} className="animate-spin" /> : <Plus size={20} />}
|
||||
{isCollapsed ? <ChevronDown size={20} /> : <ChevronUp size={20} />}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center py-8 text-zinc-400">
|
||||
<Loader2 size={24} className="animate-spin" />
|
||||
</div>
|
||||
) : sessions.length === 0 ? (
|
||||
<div className="text-center py-8 text-zinc-500 text-sm">
|
||||
{t('session.noSessions')}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{sessions.map((session) => (
|
||||
<div
|
||||
key={session.id}
|
||||
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'
|
||||
}`}
|
||||
{!isCollapsed && (
|
||||
<>
|
||||
<form onSubmit={handleCreateSession} className="flex gap-2 mb-6">
|
||||
<input
|
||||
type="text"
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
placeholder={t('session.sessionName')}
|
||||
className="flex-1 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isCreating || !newName.trim()}
|
||||
className="bg-amber-600 hover:bg-amber-700 text-white p-2 rounded-xl transition-all disabled:opacity-50"
|
||||
>
|
||||
<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')}
|
||||
</span>
|
||||
{session.participant_count! > 0 && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Users size={12} />
|
||||
{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'} />
|
||||
<button
|
||||
onClick={(e) => handleDeleteSession(e, session.id)}
|
||||
disabled={!!isDeleting}
|
||||
className={`p-2 rounded-xl transition-all ${activeSession?.id === session.id
|
||||
? 'text-white/40 hover:text-white hover:bg-white/10'
|
||||
: 'text-zinc-300 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/10'
|
||||
}`}
|
||||
title="Session löschen"
|
||||
>
|
||||
{isDeleting === session.id ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : (
|
||||
<Trash2 size={18} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{isCreating ? <Loader2 size={20} className="animate-spin" /> : <Plus size={20} />}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center py-8 text-zinc-400">
|
||||
<Loader2 size={24} className="animate-spin" />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div >
|
||||
) : sessions.length === 0 ? (
|
||||
<div className="text-center py-8 text-zinc-500 text-sm">
|
||||
{t('session.noSessions')}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{sessions.map((session) => (
|
||||
<div
|
||||
key={session.id}
|
||||
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'
|
||||
}`}
|
||||
>
|
||||
<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')}
|
||||
</span>
|
||||
{session.whisky_count! > 0 && (
|
||||
<span className="flex items-center gap-1">
|
||||
<GlassWater size={12} />
|
||||
{session.whisky_count} Whiskys
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{session.participants && session.participants.length > 0 && (
|
||||
<div className="pt-1">
|
||||
<AvatarStack names={session.participants} limit={5} />
|
||||
</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'} />
|
||||
<button
|
||||
onClick={(e) => handleDeleteSession(e, session.id)}
|
||||
disabled={!!isDeleting}
|
||||
className={`p-2 rounded-xl transition-all ${activeSession?.id === session.id
|
||||
? 'text-white/40 hover:text-white hover:bg-white/10'
|
||||
: 'text-zinc-300 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/10'
|
||||
}`}
|
||||
title="Session löschen"
|
||||
>
|
||||
{isDeleting === session.id ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : (
|
||||
<Trash2 size={18} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div >
|
||||
|
||||
{isCollapsed && sessions.length > 0 && (
|
||||
<div className="flex items-center gap-2 animate-in fade-in slide-in-from-top-1">
|
||||
<div className="flex -space-x-1.5 overflow-hidden">
|
||||
{sessions.slice(0, 3).map((s, i) => (
|
||||
<div key={s.id} className="w-7 h-7 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200/50 dark:border-amber-800/50 flex items-center justify-center text-[10px] font-black text-amber-600 dark:text-amber-500 shadow-sm">
|
||||
{s.name[0].toUpperCase()}
|
||||
</div>
|
||||
))}
|
||||
{sessions.length > 3 && (
|
||||
<div className="w-7 h-7 rounded-lg bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 flex items-center justify-center text-[8px] font-black text-zinc-500 shadow-sm">
|
||||
+{sessions.length - 3}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-[10px] text-zinc-400 font-black uppercase tracking-widest ml-1">{sessions.length} Sessions</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { Calendar, Star, ArrowUpDown, Clock, Trash2, Loader2, Users, GlassWater } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import AvatarStack from './AvatarStack';
|
||||
import { useI18n } from '@/i18n/I18nContext';
|
||||
import { deleteTasting } from '@/services/delete-tasting';
|
||||
|
||||
interface Tasting {
|
||||
@@ -33,6 +35,7 @@ interface TastingListProps {
|
||||
}
|
||||
|
||||
export default function TastingList({ initialTastings, currentUserId }: TastingListProps) {
|
||||
const { t } = useI18n();
|
||||
const [sortBy, setSortBy] = useState<'date-desc' | 'date-asc' | 'rating-desc' | 'rating-asc'>('date-desc');
|
||||
const [isDeleting, setIsDeleting] = useState<string | null>(null);
|
||||
|
||||
@@ -185,16 +188,14 @@ export default function TastingList({ initialTastings, currentUserId }: TastingL
|
||||
</div>
|
||||
|
||||
{note.tasting_tags && note.tasting_tags.length > 0 && (
|
||||
<div className="pt-3 flex flex-wrap gap-2 border-t border-zinc-100 dark:border-zinc-800">
|
||||
<span className="text-[10px] font-black text-zinc-400 uppercase tracking-widest flex items-center gap-1.5 mr-1">
|
||||
<Users size={12} className="text-amber-500" />
|
||||
Gekostet mit:
|
||||
</span>
|
||||
{note.tasting_tags.map((tag) => (
|
||||
<span key={tag.buddies.id} className="text-[10px] font-bold text-zinc-600 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800/80 px-2 py-0.5 rounded-full">
|
||||
{tag.buddies.name}
|
||||
<div className="pt-3 flex items-center justify-between border-t border-zinc-100 dark:border-zinc-800">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[10px] font-black text-zinc-400 uppercase tracking-widest flex items-center gap-1.5 mr-1">
|
||||
<Users size={12} className="text-amber-500" />
|
||||
{t('tasting.with') || 'Mit'}:
|
||||
</span>
|
||||
))}
|
||||
<AvatarStack names={note.tasting_tags.map(tag => tag.buddies.name)} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user