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

feat: Complete Flight Recorder with Session Closing and UI feedback

Browse Source
This commit is contained in:
robin
2025-12-19 21:06:16 +01:00
parent 822dc18bfc
commit fdc1dd01e5
3 changed files with 95 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,6 +6,7 @@ import { ChevronLeft, Users, Calendar, GlassWater, Plus, Trash2, Loader2, Sparkl
import Link from 'next/link';
import AvatarStack from '@/components/AvatarStack';
import { deleteSession } from '@/services/delete-session';
import { closeSession } from '@/services/close-session';
import { useSession } from '@/context/SessionContext';
import { useParams, useRouter } from 'next/navigation';
import { useI18n } from '@/i18n/I18nContext';
@@ -28,6 +29,7 @@ interface Session {
id: string;
name: string;
scheduled_at: string;
ended_at?: string;
}
interface SessionTasting {
@@ -62,6 +64,7 @@ export default function SessionDetailPage() {
const { activeSession, setActiveSession } = useSession();
const [isAddingParticipant, setIsAddingParticipant] = useState(false);
const [isDeleting, setIsDeleting] = useState(false);
const [isClosing, setIsClosing] = useState(false);
useEffect(() => {
fetchSessionData();
@@ -148,6 +151,23 @@ export default function SessionDetailPage() {
}
};
const handleCloseSession = async () => {
if (!confirm('Möchtest du diese Session wirklich abschließen?')) return;
setIsClosing(true);
const result = await closeSession(id as string);
if (result.success) {
if (activeSession?.id === id) {
setActiveSession(null);
}
fetchSessionData();
} else {
alert(result.error);
}
setIsClosing(false);
};
const handleDeleteSession = async () => {
if (!confirm('Möchtest du diese Session wirklich löschen? Alle Verknüpfungen gehen verloren.')) return;
@@ -230,9 +250,14 @@ export default function SessionDetailPage() {
)}
<div className="space-y-2">
<div className="flex items-center gap-2 text-amber-600 font-black uppercase text-[10px] tracking-widest">
<Sparkles size={14} />
Tasting Session
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 text-amber-600 font-black uppercase text-[10px] tracking-widest">
<Sparkles size={14} />
Tasting Session
</div>
{session.ended_at && (
<span className="bg-zinc-100 dark:bg-zinc-800 text-zinc-500 text-[8px] font-black px-2 py-0.5 rounded-md uppercase tracking-widest border border-zinc-200 dark:border-zinc-700">Abgeschlossen</span>
)}
</div>
<h1 className="text-4xl md:text-5xl font-black text-zinc-900 dark:text-white tracking-tighter">
{session.name}
@@ -259,22 +284,25 @@ export default function SessionDetailPage() {
</div>
<div className="flex gap-2">
{activeSession?.id !== session.id ? (
<button
onClick={() => setActiveSession({ id: session.id, name: session.name })}
className="px-6 py-3 bg-amber-600 hover:bg-amber-700 text-white rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 transition-all shadow-xl shadow-amber-600/20"
>
<Play size={18} fill="currentColor" />
Session Starten
</button>
) : (
<button
onClick={() => setActiveSession(null)}
className="px-6 py-3 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 border border-zinc-200 dark:border-zinc-800 hover:bg-red-600 hover:text-white dark:hover:bg-red-600 dark:hover:text-white transition-all group"
>
<Square size={18} className="text-red-500 group-hover:text-white transition-colors" fill="currentColor" />
Session Stoppen
</button>
{!session.ended_at && (
activeSession?.id !== session.id ? (
<button
onClick={() => setActiveSession({ id: session.id, name: session.name })}
className="px-6 py-3 bg-amber-600 hover:bg-amber-700 text-white rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 transition-all shadow-xl shadow-amber-600/20"
>
<Play size={18} fill="currentColor" />
Starten
</button>
) : (
<button
onClick={handleCloseSession}
disabled={isClosing}
className="px-6 py-3 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 border border-zinc-200 dark:border-zinc-800 hover:bg-red-600 hover:text-white dark:hover:bg-red-600 dark:hover:text-white transition-all group"
>
{isClosing ? <Loader2 size={18} className="animate-spin" /> : <Square size={18} className="text-red-500 group-hover:text-white transition-colors" fill="currentColor" />}
Beenden
</button>
)
)}
<button