feat: social UI optimization, collapsible sections, and admin fixes

src/app/admin/page.tsx

@@ -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';

src/app/admin/plans/page.tsx

@@ -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';

src/app/admin/users/page.tsx

@@ -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';

src/app/sessions/[id]/page.tsx

@@ -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">
+                            <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">
+                                <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-zinc-400" />
+                                    <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">
+                                    <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-zinc-400" />
+                                        <GlassWater size={16} className="text-amber-600" />
                                         {tastings.length} {tastings.length === 1 ? 'Whisky' : 'Whiskys'}
                                     </span>
                                 )}

src/components/AvatarStack.tsx

@@ -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>
+    );
+}

src/components/BuddyList.tsx

@@ -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">
+        <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">
-            <h3 className="text-xl font-bold mb-6 flex items-center gap-2 text-zinc-800 dark:text-zinc-100 italic">
+            <div className="flex items-center justify-between mb-6">
-                <Users size={24} className="text-amber-600" />
+                <h3 className="text-xl font-bold flex items-center gap-2 text-zinc-800 dark:text-zinc-100 italic">
-                {t('buddy.title')}
+                    <Users size={24} className="text-amber-600" />
-            </h3>
+                    {t('buddy.title')}
-
+                    {!isCollapsed && buddies.length > 0 && (
-            <form onSubmit={handleAddBuddy} className="flex gap-2 mb-6">
+                        <span className="text-sm font-normal text-zinc-400 not-italic ml-2">({buddies.length})</span>
-                <input
+                    )}
-                    type="text"
+                </h3>
-                    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"
+                    onClick={handleToggleCollapse}
-                    disabled={isAdding || !newName.trim()}
+                    className="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-xl transition-colors text-zinc-400 hover:text-amber-600"
-                    className="bg-amber-600 hover:bg-amber-700 text-white p-2 rounded-xl transition-all disabled:opacity-50"
+                    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 ? (
+            {!isCollapsed && (
-                <div className="flex justify-center py-8 text-zinc-400">
+                <>
-                    <Loader2 size={24} className="animate-spin" />
+                    <form onSubmit={handleAddBuddy} className="flex gap-2 mb-6">
-                </div>
+                        <input
-            ) : buddies.length === 0 ? (
+                            type="text"
-                <div className="text-center py-8 text-zinc-500 text-sm">
+                            value={newName}
-                    {t('buddy.noBuddies')}
+                            onChange={(e) => setNewName(e.target.value)}
-                </div>
+                            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="space-y-2 max-h-[300px] overflow-y-auto scrollbar-hide">
+                        />
-                    {buddies.map((buddy) => (
+                        <button
-                        <div
+                            type="submit"
-                            key={buddy.id}
+                            disabled={isAdding || !newName.trim()}
-                            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"
+                            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">
+                            {isAdding ? <Loader2 size={20} className="animate-spin" /> : <UserPlus size={20} />}
-                                <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">
+                        </button>
-                                    <User size={16} />
+                    </form>
-                                </div>
+
-                                <div>
+                    {isLoading ? (
-                                    <span className="font-semibold text-zinc-800 dark:text-zinc-200 text-sm">{buddy.name}</span>
+                        <div className="flex justify-center py-8 text-zinc-400">
-                                    {buddy.buddy_profile_id && (
+                            <Loader2 size={24} className="animate-spin" />
-                                        <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>
                         </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>

src/components/SessionList.tsx

@@ -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">
+        <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">
-            <h3 className="text-xl font-bold mb-6 flex items-center gap-2 text-zinc-800 dark:text-zinc-100 italic">
+            <div className="flex items-center justify-between mb-6">
-                <GlassWater size={24} className="text-amber-600" />
+                <h3 className="text-xl font-bold flex items-center gap-2 text-zinc-800 dark:text-zinc-100 italic">
-                {t('session.title')}
+                    <Calendar size={24} className="text-amber-600" />
-            </h3>
+                    {t('session.title')}
-
+                    {!isCollapsed && sessions.length > 0 && (
-            <form onSubmit={handleCreateSession} className="flex gap-2 mb-6">
+                        <span className="text-sm font-normal text-zinc-400 not-italic ml-2">({sessions.length})</span>
-                <input
+                    )}
-                    type="text"
+                </h3>
-                    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"
+                    onClick={handleToggleCollapse}
-                    disabled={isCreating || !newName.trim()}
+                    className="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-xl transition-colors text-zinc-400 hover:text-amber-600"
-                    className="bg-amber-600 hover:bg-amber-700 text-white p-2 rounded-xl transition-all disabled:opacity-50"
+                    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 ? (
+            {!isCollapsed && (
-                <div className="flex justify-center py-8 text-zinc-400">
+                <>
-                    <Loader2 size={24} className="animate-spin" />
+                    <form onSubmit={handleCreateSession} className="flex gap-2 mb-6">
-                </div>
+                        <input
-            ) : sessions.length === 0 ? (
+                            type="text"
-                <div className="text-center py-8 text-zinc-500 text-sm">
+                            value={newName}
-                    {t('session.noSessions')}
+                            onChange={(e) => setNewName(e.target.value)}
-                </div>
+                            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="space-y-3">
+                        />
-                    {sessions.map((session) => (
+                        <button
-                        <div
+                            type="submit"
-                            key={session.id}
+                            disabled={isCreating || !newName.trim()}
-                            className={`flex items-center justify-between p-4 rounded-2xl border group transition-all ${activeSession?.id === session.id
+                            className="bg-amber-600 hover:bg-amber-700 text-white p-2 rounded-xl transition-all disabled:opacity-50"
-                                ? '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">
+                            {isCreating ? <Loader2 size={20} className="animate-spin" /> : <Plus size={20} />}
-                                <div className={`font-bold truncate ${activeSession?.id === session.id ? 'text-white' : 'text-zinc-800 dark:text-zinc-100'}`}>
+                        </button>
-                                    {session.name}
+                    </form>
-                                </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'}`}>
+                    {isLoading ? (
-                                    <span className="flex items-center gap-1">
+                        <div className="flex justify-center py-8 text-zinc-400">
-                                        <Calendar size={12} />
+                            <Loader2 size={24} className="animate-spin" />
-                                        {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>
                         </div>
-                    ))
+                    ) : sessions.length === 0 ? (
-                    }
+                        <div className="text-center py-8 text-zinc-500 text-sm">
-                </div >
+                            {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>
     );
 }

src/components/TastingList.tsx

@@ -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">
+                            <div className="pt-3 flex items-center justify-between 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">
+                                <div className="flex items-center gap-2">
-                                    <Users size={12} className="text-amber-500" />
+                                    <span className="text-[10px] font-black text-zinc-400 uppercase tracking-widest flex items-center gap-1.5 mr-1">
-                                    Gekostet mit:
+                                        <Users size={12} className="text-amber-500" />
-                                </span>
+                                        {t('tasting.with') || 'Mit'}:
-                                {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}
                                     </span>
-                                ))}
+                                    <AvatarStack names={note.tasting_tags.map(tag => tag.buddies.name)} />
+                                </div>
                             </div>
                         )}
                     </div>