ben/calendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
ben
2026-08-19 12:10:02 +02:00
parent bfab69cbb4
commit 8fae1ffb3d
5 changed files with 127 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend(experimental)/newchat/components/event-detail-dialog.tsx
+66 -26
View File
@@ -46,6 +46,7 @@ export function EventDetailDialog({
}: EventDetailDialogProps) {
const [busy, setBusy] = useState<string | null>(null)
const [error, setError] = useState<string | null>(null)
const [deleteConfirming, setDeleteConfirming] = useState(false)
const { data: responses, mutate: mutateResponses } = useSWR(
["responses", event.id],
@@ -171,32 +172,71 @@ export function EventDetailDialog({
{/* Management actions */}
{canManage && (
<div className="flex flex-wrap gap-2 border-t border-white/15 pt-4">
{event.status !== "confirmed" && event.status !== "cancelled" && (
<button
onClick={() => run("confirm", () => api.confirmEvent(event.id))}
disabled={busy !== null}
className="flex items-center gap-1.5 rounded-xl bg-emerald-500/80 px-3 py-2 text-sm font-medium transition-colors hover:bg-emerald-500 disabled:opacity-70"
>
<CheckCircle2 className="h-4 w-4" /> Confirm
</button>
)}
{event.status !== "cancelled" && (
<button
onClick={() => run("cancel", () => api.cancelEvent(event.id))}
disabled={busy !== null}
className="flex items-center gap-1.5 rounded-xl bg-white/10 px-3 py-2 text-sm font-medium transition-colors hover:bg-white/20 disabled:opacity-70"
>
<Ban className="h-4 w-4" /> Cancel
</button>
)}
<button
onClick={() => run("delete", () => api.deleteEvent(event.id))}
disabled={busy !== null}
className="ml-auto flex items-center gap-1.5 rounded-xl bg-red-500/80 px-3 py-2 text-sm font-medium transition-colors hover:bg-red-500 disabled:opacity-70"
>
<Trash2 className="h-4 w-4" /> Delete
</button>
<div className="flex flex-col gap-3 border-t border-white/15 pt-4">
<div className="flex flex-wrap gap-2">
{event.status !== "confirmed" && event.status !== "cancelled" && (
<button
onClick={() => run("confirm", () => api.confirmEvent(event.id))}
disabled={busy !== null}
className="flex items-center gap-1.5 rounded-xl bg-emerald-500/80 px-3 py-2 text-sm font-medium transition-colors hover:bg-emerald-500 disabled:opacity-70"
>
<CheckCircle2 className="h-4 w-4" /> Confirm
</button>
)}
{event.status !== "cancelled" && (
<button
onClick={() => run("cancel", () => api.cancelEvent(event.id))}
disabled={busy !== null}
className="flex items-center gap-1.5 rounded-xl bg-white/10 px-3 py-2 text-sm font-medium transition-colors hover:bg-white/20 disabled:opacity-70"
>
<Ban className="h-4 w-4" /> Cancel
</button>
)}
</div>
{/* Delete lives in its own fixed spot, separate from Confirm/Cancel,
so its position never shifts depending on which of those show. */}
<div className="border-t border-white/10 pt-3">
{!deleteConfirming ? (
<button
onClick={() => setDeleteConfirming(true)}
disabled={busy !== null}
className="flex items-center gap-1.5 rounded-xl border border-red-400/30 bg-red-500/10 px-3 py-2 text-sm font-medium text-red-200 transition-colors hover:bg-red-500/20 disabled:opacity-70"
>
<Trash2 className="h-4 w-4" /> Delete event
</button>
) : (
<div className="rounded-xl border border-red-400/40 bg-red-500/10 p-3">
<p className="mb-3 text-sm text-white/90">
Weet je zeker dat je dit evenement wilt verwijderen? Dit kan niet ongedaan
worden gemaakt.
</p>
<div className="flex flex-col gap-2">
{/* Destructive action sits on top, off the "usual" spot. */}
<button
onClick={() => run("delete", () => api.deleteEvent(event.id))}
disabled={busy !== null}
className="flex items-center justify-center gap-1.5 rounded-xl bg-red-500 px-3 py-2.5 text-sm font-medium transition-colors hover:bg-red-600 disabled:opacity-70"
>
{busy === "delete" ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<Trash2 className="h-4 w-4" />
)}
Ja, verwijderen
</button>
{/* Safe action sits below, in the spot people click fast out of habit. */}
<button
onClick={() => setDeleteConfirming(false)}
disabled={busy !== null}
className="rounded-xl border border-white/20 bg-white/10 px-3 py-2.5 text-sm font-medium text-white transition-colors hover:bg-white/20 disabled:opacity-70"
>
OK, annuleren
</button>
</div>
</div>
)}
</div>
</div>
)}
</div>