From 489b975911b5cdd1d5ea5ef1294a0f64f9dd2453 Mon Sep 17 00:00:00 2001
From: robin <robin@fluffigewolke.de>
Date: Sun, 18 Jan 2026 21:24:53 +0100
Subject: [PATCH] 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
---
 src/app/buddies/page.tsx  | 247 ++++++++++++++++++++++++++++++++--
 src/app/sessions/page.tsx | 276 ++++++++++++++++++++++++++++++++++++--
 src/i18n/de.ts            |   2 +-
 src/i18n/en.ts            |   2 +-
 4 files changed, 499 insertions(+), 28 deletions(-)

diff --git a/src/app/buddies/page.tsx b/src/app/buddies/page.tsx
index 3003f89..dd8e51e 100644
--- a/src/app/buddies/page.tsx
+++ b/src/app/buddies/page.tsx
@@ -1,38 +1,259 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
-import { ArrowLeft, Users } from 'lucide-react';
-import BuddyList from '@/components/BuddyList';
+import { ArrowLeft, Users, UserPlus, Loader2, Trash2, Link2, Search } from 'lucide-react';
 import { useI18n } from '@/i18n/I18nContext';
+import { useEffect, useState } from 'react';
+import { createClient } from '@/lib/supabase/client';
+import { useAuth } from '@/context/AuthContext';
+import { addBuddy, deleteBuddy } from '@/services/buddy';
+import BuddyHandshake from '@/components/BuddyHandshake';
+
+interface Buddy {
+    id: string;
+    name: string;
+    buddy_profile_id: string | null;
+}
 
 export default function BuddiesPage() {
     const router = useRouter();
     const { t } = useI18n();
+    const supabase = createClient();
+    const { user, isLoading: isAuthLoading } = useAuth();
+
+    const [buddies, setBuddies] = useState<Buddy[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isAdding, setIsAdding] = useState(false);
+    const [newName, setNewName] = useState('');
+    const [searchQuery, setSearchQuery] = useState('');
+    const [isHandshakeOpen, setIsHandshakeOpen] = useState(false);
+
+    useEffect(() => {
+        if (!isAuthLoading && user) {
+            fetchBuddies();
+        }
+    }, [user, isAuthLoading]);
+
+    const fetchBuddies = async () => {
+        setIsLoading(true);
+        const { data, error } = await supabase
+            .from('buddies')
+            .select('*')
+            .order('name');
+
+        if (!error) {
+            setBuddies(data || []);
+        }
+        setIsLoading(false);
+    };
+
+    const handleAddBuddy = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!newName.trim()) return;
+
+        setIsAdding(true);
+        const result = await addBuddy({ name: newName.trim() });
+
+        if (result.success && result.data) {
+            setBuddies(prev => [...[result.data], ...prev].sort((a, b) => a.name.localeCompare(b.name)));
+            setNewName('');
+        }
+        setIsAdding(false);
+    };
+
+    const handleDeleteBuddy = async (id: string) => {
+        const result = await deleteBuddy(id);
+        if (result.success) {
+            setBuddies(prev => prev.filter(b => b.id !== id));
+        }
+    };
+
+    const filteredBuddies = buddies.filter(b =>
+        b.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    const linkedBuddies = filteredBuddies.filter(b => b.buddy_profile_id);
+    const unlinkedBuddies = filteredBuddies.filter(b => !b.buddy_profile_id);
 
     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('buddy.title')}
                         </h1>
-                        <p className="text-sm text-zinc-500">
-                            Your tasting companions
+                        <p className="text-xs text-zinc-500">
+                            {buddies.length} Buddies
                         </p>
                     </div>
+                    <button
+                        onClick={() => setIsHandshakeOpen(true)}
+                        className="p-2.5 bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 hover:border-orange-600/50 rounded-xl text-orange-500 transition-colors"
+                    >
+                        <Link2 size={20} />
+                    </button>
                 </div>
-
-                {/* Buddy List */}
-                <BuddyList />
             </div>
+
+            <div className="max-w-2xl mx-auto px-4 pt-6">
+                {/* Add Buddy Form */}
+                <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-900 border border-zinc-800 rounded-xl px-4 py-3 text-white placeholder-zinc-600 focus:outline-none focus:border-orange-600 transition-colors"
+                    />
+                    <button
+                        type="submit"
+                        disabled={isAdding || !newName.trim()}
+                        className="px-4 bg-orange-600 hover:bg-orange-700 text-white rounded-xl transition-all disabled:opacity-50 flex items-center gap-2"
+                    >
+                        {isAdding ? (
+                            <Loader2 size={20} className="animate-spin" />
+                        ) : (
+                            <>
+                                <UserPlus size={20} />
+                                <span className="hidden sm:inline text-sm font-bold">Add</span>
+                            </>
+                        )}
+                    </button>
+                </form>
+
+                {/* Search */}
+                {buddies.length > 5 && (
+                    <div className="relative mb-6">
+                        <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500" />
+                        <input
+                            type="text"
+                            placeholder="Search buddies..."
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                            className="w-full pl-9 pr-4 py-2.5 bg-zinc-900 border border-zinc-800 rounded-xl text-sm text-white placeholder-zinc-600 focus:outline-none focus:border-orange-600/50"
+                        />
+                    </div>
+                )}
+
+                {/* Buddies List */}
+                {isLoading ? (
+                    <div className="flex justify-center py-20">
+                        <Loader2 size={32} className="animate-spin text-orange-600" />
+                    </div>
+                ) : buddies.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">
+                            <Users size={32} className="text-zinc-600" />
+                        </div>
+                        <p className="text-lg font-bold text-white mb-2">{t('buddy.noBuddies')}</p>
+                        <p className="text-sm text-zinc-500 max-w-xs mx-auto">
+                            Add your tasting friends to share sessions and compare notes.
+                        </p>
+                    </div>
+                ) : (
+                    <div className="space-y-6">
+                        {/* Linked Buddies */}
+                        {linkedBuddies.length > 0 && (
+                            <div>
+                                <h3 className="text-[10px] font-bold uppercase tracking-widest text-orange-500/80 mb-3 flex items-center gap-2">
+                                    <Link2 size={12} />
+                                    Linked Accounts
+                                </h3>
+                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                                    {linkedBuddies.map(buddy => (
+                                        <BuddyCard
+                                            key={buddy.id}
+                                            buddy={buddy}
+                                            onDelete={handleDeleteBuddy}
+                                        />
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+
+                        {/* Unlinked Buddies */}
+                        {unlinkedBuddies.length > 0 && (
+                            <div>
+                                {linkedBuddies.length > 0 && (
+                                    <h3 className="text-[10px] font-bold uppercase tracking-widest text-zinc-500 mb-3">
+                                        Other Buddies
+                                    </h3>
+                                )}
+                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                                    {unlinkedBuddies.map(buddy => (
+                                        <BuddyCard
+                                            key={buddy.id}
+                                            buddy={buddy}
+                                            onDelete={handleDeleteBuddy}
+                                        />
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
+
+            {/* Buddy Handshake Dialog */}
+            <BuddyHandshake
+                isOpen={isHandshakeOpen}
+                onClose={() => setIsHandshakeOpen(false)}
+                onSuccess={() => {
+                    setIsHandshakeOpen(false);
+                    fetchBuddies();
+                }}
+            />
         </main>
     );
 }
+
+function BuddyCard({ buddy, onDelete }: { buddy: Buddy; onDelete: (id: string) => void }) {
+    const { t } = useI18n();
+    const [isDeleting, setIsDeleting] = useState(false);
+
+    const handleDelete = async () => {
+        setIsDeleting(true);
+        await onDelete(buddy.id);
+        setIsDeleting(false);
+    };
+
+    return (
+        <div className="flex items-center justify-between p-4 bg-zinc-900 rounded-2xl border border-zinc-800 group hover:border-zinc-700 transition-all">
+            <div className="flex items-center gap-3">
+                <div className={`w-11 h-11 rounded-xl flex items-center justify-center font-bold text-lg ${buddy.buddy_profile_id
+                        ? 'bg-orange-600/20 text-orange-500 border border-orange-600/30'
+                        : 'bg-zinc-800 text-zinc-400 border border-zinc-700'
+                    }`}>
+                    {buddy.name[0].toUpperCase()}
+                </div>
+                <div>
+                    <p className="font-bold text-white">{buddy.name}</p>
+                    {buddy.buddy_profile_id && (
+                        <p className="text-[9px] font-bold uppercase tracking-widest text-orange-500/80">
+                            {t('common.link')}
+                        </p>
+                    )}
+                </div>
+            </div>
+            <button
+                onClick={handleDelete}
+                disabled={isDeleting}
+                className="p-2 text-zinc-600 hover:text-red-500 hover:bg-zinc-800 rounded-xl opacity-0 group-hover:opacity-100 transition-all"
+            >
+                {isDeleting ? (
+                    <Loader2 size={16} className="animate-spin" />
+                ) : (
+                    <Trash2 size={16} />
+                )}
+            </button>
+        </div>
+    );
+}
diff --git a/src/app/sessions/page.tsx b/src/app/sessions/page.tsx
index 432ad83..0649496 100644
--- a/src/app/sessions/page.tsx
+++ b/src/app/sessions/page.tsx
@@ -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>
     );
diff --git a/src/i18n/de.ts b/src/i18n/de.ts
index 1f16efa..6e30547 100644
--- a/src/i18n/de.ts
+++ b/src/i18n/de.ts
@@ -199,7 +199,7 @@ export const de: TranslationKeys = {
         activity: 'Aktivität',
         search: 'Suchen',
         profile: 'Profil',
-        sessions: 'Events',
+        sessions: 'Tastings',
         buddies: 'Buddies',
         stats: 'Statistik',
         wishlist: 'Wunschliste',
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index 541643a..9c075c4 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -199,7 +199,7 @@ export const en: TranslationKeys = {
         activity: 'Activity',
         search: 'Search',
         profile: 'Profile',
-        sessions: 'Events',
+        sessions: 'Tastings',
         buddies: 'Buddies',
         stats: 'Stats',
         wishlist: 'Wishlist',