feat: Improve Sessions and Buddies pages with modern UI
- Rename 'Events' to 'Tastings' in nav - Sessions page: Create, list, delete sessions with sticky header - Buddies page: Add, search, delete buddies with linked/unlinked sections - Both pages match new home view design language
This commit is contained in:
@@ -1,37 +1,287 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { ArrowLeft, Calendar, Plus } from 'lucide-react';
|
||||
import SessionList from '@/components/SessionList';
|
||||
import { ArrowLeft, Calendar, Plus, GlassWater, Loader2, ChevronRight, Users, Sparkles, Clock, Trash2 } from 'lucide-react';
|
||||
import { useI18n } from '@/i18n/I18nContext';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { createClient } from '@/lib/supabase/client';
|
||||
import Link from 'next/link';
|
||||
import { useSession } from '@/context/SessionContext';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
import { deleteSession } from '@/services/delete-session';
|
||||
import AvatarStack from '@/components/AvatarStack';
|
||||
|
||||
interface Session {
|
||||
id: string;
|
||||
name: string;
|
||||
scheduled_at: string;
|
||||
ended_at?: string;
|
||||
participant_count?: number;
|
||||
whisky_count?: number;
|
||||
participants?: string[];
|
||||
}
|
||||
|
||||
export default function SessionsPage() {
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const { t, locale } = useI18n();
|
||||
const supabase = createClient();
|
||||
const { activeSession, setActiveSession } = useSession();
|
||||
const { user, isLoading: isAuthLoading } = useAuth();
|
||||
|
||||
const [sessions, setSessions] = useState<Session[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState<string | null>(null);
|
||||
const [newName, setNewName] = useState('');
|
||||
const [showCreateForm, setShowCreateForm] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAuthLoading && user) {
|
||||
fetchSessions();
|
||||
}
|
||||
}, [user, isAuthLoading]);
|
||||
|
||||
const fetchSessions = async () => {
|
||||
setIsLoading(true);
|
||||
const { data, error } = await supabase
|
||||
.from('tasting_sessions')
|
||||
.select(`
|
||||
*,
|
||||
session_participants (buddies(name)),
|
||||
tastings (count)
|
||||
`)
|
||||
.order('scheduled_at', { ascending: false });
|
||||
|
||||
if (error) {
|
||||
console.error('Error fetching sessions:', error);
|
||||
// Fallback without tastings join
|
||||
const { data: fallbackData } = await supabase
|
||||
.from('tasting_sessions')
|
||||
.select(`*, session_participants (buddies(name))`)
|
||||
.order('scheduled_at', { ascending: false });
|
||||
|
||||
if (fallbackData) {
|
||||
setSessions(fallbackData.map(s => {
|
||||
const participants = (s.session_participants as any[])?.filter(p => p.buddies).map(p => p.buddies.name) || [];
|
||||
return { ...s, participant_count: participants.length, participants, whisky_count: 0 };
|
||||
}));
|
||||
}
|
||||
} else {
|
||||
setSessions(data?.map(s => {
|
||||
const participants = (s.session_participants as any[])?.filter(p => p.buddies).map(p => p.buddies.name) || [];
|
||||
return {
|
||||
...s,
|
||||
participant_count: participants.length,
|
||||
participants,
|
||||
whisky_count: (s.tastings as any[])?.[0]?.count || 0
|
||||
};
|
||||
}) || []);
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
const handleCreateSession = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!newName.trim()) return;
|
||||
|
||||
setIsCreating(true);
|
||||
const { data, error } = await supabase
|
||||
.from('tasting_sessions')
|
||||
.insert({ name: newName.trim(), scheduled_at: new Date().toISOString() })
|
||||
.select()
|
||||
.single();
|
||||
|
||||
if (!error && data) {
|
||||
setSessions(prev => [{ ...data, participant_count: 0, whisky_count: 0 }, ...prev]);
|
||||
setNewName('');
|
||||
setShowCreateForm(false);
|
||||
setActiveSession({ id: data.id, name: data.name });
|
||||
}
|
||||
setIsCreating(false);
|
||||
};
|
||||
|
||||
const handleDeleteSession = async (id: string) => {
|
||||
setIsDeleting(id);
|
||||
const result = await deleteSession(id);
|
||||
if (result.success) {
|
||||
setSessions(prev => prev.filter(s => s.id !== id));
|
||||
if (activeSession?.id === id) {
|
||||
setActiveSession(null);
|
||||
}
|
||||
}
|
||||
setIsDeleting(null);
|
||||
};
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
return new Date(date).toLocaleDateString(locale === 'de' ? 'de-DE' : 'en-US', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
const activeSessions = sessions.filter(s => !s.ended_at);
|
||||
const pastSessions = sessions.filter(s => s.ended_at);
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-zinc-950 p-4 pb-24">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<main className="min-h-screen bg-zinc-950 pb-24">
|
||||
{/* Header */}
|
||||
<div className="sticky top-0 z-20 bg-zinc-950/95 backdrop-blur-md border-b border-zinc-900">
|
||||
<div className="max-w-2xl mx-auto px-4 py-4 flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="p-2 rounded-xl bg-zinc-900 border border-zinc-800 text-zinc-400 hover:text-white hover:border-zinc-700 transition-colors"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">
|
||||
<div className="flex-1">
|
||||
<h1 className="text-xl font-bold text-white">
|
||||
{t('session.title')}
|
||||
</h1>
|
||||
<p className="text-sm text-zinc-500">
|
||||
Manage your tasting events
|
||||
<p className="text-xs text-zinc-500">
|
||||
{sessions.length} Sessions
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCreateForm(!showCreateForm)}
|
||||
className="p-2.5 bg-orange-600 hover:bg-orange-700 rounded-xl text-white transition-colors"
|
||||
>
|
||||
<Plus size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Session List */}
|
||||
<SessionList />
|
||||
<div className="max-w-2xl mx-auto px-4 pt-6">
|
||||
{/* Create Form */}
|
||||
{showCreateForm && (
|
||||
<form onSubmit={handleCreateSession} className="mb-6 p-4 bg-zinc-900 rounded-2xl border border-zinc-800 animate-in fade-in slide-in-from-top-2">
|
||||
<input
|
||||
type="text"
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
placeholder={t('session.sessionName')}
|
||||
className="w-full bg-zinc-950 border border-zinc-800 rounded-xl px-4 py-3 text-white placeholder-zinc-600 focus:outline-none focus:border-orange-600 mb-3"
|
||||
autoFocus
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowCreateForm(false)}
|
||||
className="flex-1 py-2 bg-zinc-800 text-zinc-400 rounded-xl text-sm font-bold"
|
||||
>
|
||||
{t('common.cancel')}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isCreating || !newName.trim()}
|
||||
className="flex-1 py-2 bg-orange-600 hover:bg-orange-700 text-white rounded-xl text-sm font-bold disabled:opacity-50 flex items-center justify-center gap-2"
|
||||
>
|
||||
{isCreating ? <Loader2 size={16} className="animate-spin" /> : <Sparkles size={16} />}
|
||||
Start Session
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{/* Active Session Banner */}
|
||||
{activeSession && (
|
||||
<Link href={`/sessions/${activeSession.id}`}>
|
||||
<div className="mb-6 p-4 bg-gradient-to-r from-orange-600/20 to-orange-500/10 rounded-2xl border border-orange-600/30 flex items-center gap-4 group hover:border-orange-500/50 transition-colors">
|
||||
<div className="relative">
|
||||
<div className="w-12 h-12 rounded-xl bg-orange-600/20 flex items-center justify-center">
|
||||
<Sparkles size={24} className="text-orange-500" />
|
||||
</div>
|
||||
<span className="absolute -top-1 -right-1 w-3 h-3 bg-orange-500 rounded-full animate-pulse" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-orange-500/80">
|
||||
Live Session
|
||||
</p>
|
||||
<p className="text-lg font-bold text-white">
|
||||
{activeSession.name}
|
||||
</p>
|
||||
</div>
|
||||
<ChevronRight size={20} className="text-orange-500 group-hover:translate-x-1 transition-transform" />
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{/* Sessions List */}
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center py-20">
|
||||
<Loader2 size={32} className="animate-spin text-orange-600" />
|
||||
</div>
|
||||
) : sessions.length === 0 ? (
|
||||
<div className="text-center py-20">
|
||||
<div className="w-16 h-16 mx-auto rounded-2xl bg-zinc-900 flex items-center justify-center mb-4">
|
||||
<Calendar size={32} className="text-zinc-600" />
|
||||
</div>
|
||||
<p className="text-lg font-bold text-white mb-2">No Sessions Yet</p>
|
||||
<p className="text-sm text-zinc-500 max-w-xs mx-auto">
|
||||
Start your first tasting session to track what you're drinking.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{sessions.map(session => (
|
||||
<div
|
||||
key={session.id}
|
||||
className={`p-4 bg-zinc-900 rounded-2xl border transition-all group ${activeSession?.id === session.id
|
||||
? 'border-orange-600/50'
|
||||
: 'border-zinc-800 hover:border-zinc-700'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`w-12 h-12 rounded-xl flex items-center justify-center ${session.ended_at
|
||||
? 'bg-zinc-800 text-zinc-500'
|
||||
: 'bg-orange-600/20 text-orange-500'
|
||||
}`}>
|
||||
<GlassWater size={24} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<Link href={`/sessions/${session.id}`}>
|
||||
<h3 className="font-bold text-white truncate hover:text-orange-500 transition-colors">
|
||||
{session.name}
|
||||
</h3>
|
||||
</Link>
|
||||
<div className="flex items-center gap-3 text-xs text-zinc-500 mt-0.5">
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock size={12} />
|
||||
{formatDate(session.scheduled_at)}
|
||||
</span>
|
||||
{session.whisky_count ? (
|
||||
<span>{session.whisky_count} Whiskys</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{session.participants && session.participants.length > 0 && (
|
||||
<AvatarStack names={session.participants} maxShow={3} size="sm" />
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => handleDeleteSession(session.id)}
|
||||
disabled={isDeleting === session.id}
|
||||
className="p-2 text-zinc-600 hover:text-red-500 hover:bg-zinc-800 rounded-lg opacity-0 group-hover:opacity-100 transition-all"
|
||||
>
|
||||
{isDeleting === session.id ? (
|
||||
<Loader2 size={16} className="animate-spin" />
|
||||
) : (
|
||||
<Trash2 size={16} />
|
||||
)}
|
||||
</button>
|
||||
<Link href={`/sessions/${session.id}`}>
|
||||
<button className="p-2 text-zinc-500 hover:text-white hover:bg-zinc-800 rounded-lg transition-colors">
|
||||
<ChevronRight size={18} />
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user