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

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

Browse Source
This commit is contained in:
robin
2025-12-18 21:16:09 +01:00
parent a64e8f17a1
commit 7008bbfd84
8 changed files with 326 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/sessions/[id]/page.tsx
View File

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