From 05f4da5db3e397d939e73655a69fd59adb94ae20 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Fri, 10 Apr 2026 17:36:40 +0200
Subject: [PATCH] feat(events): wire workbench detail overlay via ViewProps

Events ListView and DetailView now use the standard ViewProps interface
(navigate/goBack/params) instead of the custom onOpenEvent callback.
Adds paramKey to the events app registration so the workbench overlay
knows which param carries the event ID. Clicking an event card now
opens the detail overlay with prev/next sibling navigation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../apps/web/src/lib/app-registry/apps.ts     |  1 +
 .../src/lib/modules/events/ListView.svelte    | 31 +++++++------------
 .../modules/events/views/DetailView.svelte    | 14 +++------
 .../web/src/routes/(app)/events/+page.svelte  | 12 +++++--
 .../src/routes/(app)/events/[id]/+page.svelte | 12 +++++--
 5 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/apps/mana/apps/web/src/lib/app-registry/apps.ts b/apps/mana/apps/web/src/lib/app-registry/apps.ts
index 2434180db..ec98ea6ff 100644
--- a/apps/mana/apps/web/src/lib/app-registry/apps.ts
+++ b/apps/mana/apps/web/src/lib/app-registry/apps.ts
@@ -715,6 +715,7 @@ registerApp({
 		list: { load: () => import('$lib/modules/events/ListView.svelte') },
 		detail: { load: () => import('$lib/modules/events/views/DetailView.svelte') },
 	},
+	paramKey: 'eventId',
 });
 
 registerApp({
diff --git a/apps/mana/apps/web/src/lib/modules/events/ListView.svelte b/apps/mana/apps/web/src/lib/modules/events/ListView.svelte
index d6fb74ef3..a530690fb 100644
--- a/apps/mana/apps/web/src/lib/modules/events/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/events/ListView.svelte
@@ -5,12 +5,9 @@
 	import { drainTombstones } from './tombstones';
 	import EventCard from './components/EventCard.svelte';
 	import type { SocialEvent } from './types';
+	import type { ViewProps } from '$lib/app-registry';
 
-	interface Props {
-		onOpenEvent?: (id: string) => void;
-	}
-
-	let { onOpenEvent }: Props = $props();
+	let { navigate, goBack, params }: ViewProps = $props();
 
 	const upcoming = useUpcomingEvents();
 	const past = usePastEvents();
@@ -44,12 +41,17 @@
 			newDate = '';
 			newLocation = '';
 			showCreate = false;
-			onOpenEvent?.(result.id);
+			open({ id: result.id } as SocialEvent);
 		}
 	}
 
 	function open(event: SocialEvent) {
-		onOpenEvent?.(event.id);
+		const ids = [...(upcoming.value ?? []), ...(past.value ?? [])].map((e) => e.id);
+		navigate('detail', {
+			eventId: event.id,
+			_siblingIds: ids,
+			_siblingKey: 'eventId',
+		});
 	}
 </script>
 
@@ -59,12 +61,9 @@
 
 <div class="events-page">
 	<header class="events-header">
-		<div>
-			<h1 class="page-title">Events</h1>
-			<p class="page-subtitle">
-				{(upcoming.value ?? []).length} bevorstehend · {(past.value ?? []).length} vergangen
-			</p>
-		</div>
+		<p class="page-subtitle">
+			{(upcoming.value ?? []).length} bevorstehend · {(past.value ?? []).length} vergangen
+		</p>
 		<button class="new-btn" onclick={() => (showCreate = !showCreate)}>
 			{showCreate ? 'Abbrechen' : '+ Neues Event'}
 		</button>
@@ -127,12 +126,6 @@
 		align-items: flex-start;
 		justify-content: space-between;
 	}
-	.page-title {
-		margin: 0;
-		font-size: 1.5rem;
-		font-weight: 700;
-		color: hsl(var(--color-foreground));
-	}
 	.page-subtitle {
 		margin: 0.25rem 0 0;
 		font-size: 0.875rem;
diff --git a/apps/mana/apps/web/src/lib/modules/events/views/DetailView.svelte b/apps/mana/apps/web/src/lib/modules/events/views/DetailView.svelte
index 9ee23151e..09789eab4 100644
--- a/apps/mana/apps/web/src/lib/modules/events/views/DetailView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/events/views/DetailView.svelte
@@ -5,13 +5,11 @@
 	import RsvpSummaryView from '../components/RsvpSummary.svelte';
 	import PublicRsvpList from '../components/PublicRsvpList.svelte';
 	import BringListEditor from '../components/BringListEditor.svelte';
+	import type { ViewProps } from '$lib/app-registry';
 
-	interface Props {
-		eventId: string;
-		onBack?: () => void;
-	}
+	let { navigate, goBack, params }: ViewProps = $props();
 
-	let { eventId, onBack }: Props = $props();
+	let eventId = $derived((params.eventId as string) ?? '');
 
 	const eventQuery = useEvent(() => eventId);
 	const guests = useEventGuests(() => eventId);
@@ -84,7 +82,7 @@
 		if (!event) return;
 		if (!confirm(`Event "${event.title}" wirklich löschen?`)) return;
 		await eventsStore.deleteEvent(event.id);
-		onBack?.();
+		goBack();
 	}
 
 	function copyShareLink() {
@@ -99,9 +97,7 @@
 {:else}
 	<div class="detail">
 		<header class="detail-header">
-			{#if onBack}
-				<button class="back-btn" onclick={onBack}>← Zurück</button>
-			{/if}
+			<button class="back-btn" onclick={goBack}>← Zurück</button>
 			<div class="header-actions">
 				<button class="action-btn" onclick={startEdit}>Bearbeiten</button>
 				<button class="action-btn danger" onclick={handleDelete}>Löschen</button>
diff --git a/apps/mana/apps/web/src/routes/(app)/events/+page.svelte b/apps/mana/apps/web/src/routes/(app)/events/+page.svelte
index 5df10220c..676ec4f5f 100644
--- a/apps/mana/apps/web/src/routes/(app)/events/+page.svelte
+++ b/apps/mana/apps/web/src/routes/(app)/events/+page.svelte
@@ -2,9 +2,15 @@
 	import { goto } from '$app/navigation';
 	import ListView from '$lib/modules/events/ListView.svelte';
 
-	function handleOpen(id: string) {
-		goto(`/events/${id}`);
+	function navigate(viewName: string, params: Record<string, unknown> = {}) {
+		if (viewName === 'detail' && params.eventId) {
+			goto(`/events/${params.eventId}`);
+		}
+	}
+
+	function goBack() {
+		goto('/events');
 	}
 </script>
 
-<ListView onOpenEvent={handleOpen} />
+<ListView {navigate} {goBack} params={{}} />
diff --git a/apps/mana/apps/web/src/routes/(app)/events/[id]/+page.svelte b/apps/mana/apps/web/src/routes/(app)/events/[id]/+page.svelte
index 4b558dbfe..be51d52b8 100644
--- a/apps/mana/apps/web/src/routes/(app)/events/[id]/+page.svelte
+++ b/apps/mana/apps/web/src/routes/(app)/events/[id]/+page.svelte
@@ -5,9 +5,17 @@
 
 	const eventId = $derived($page.params.id ?? '');
 
-	function handleBack() {
+	function navigate(viewName: string, navParams: Record<string, unknown> = {}) {
+		if (viewName === 'detail' && navParams.eventId) {
+			goto(`/events/${navParams.eventId}`);
+		} else if (viewName === 'list') {
+			goto('/events');
+		}
+	}
+
+	function goBack() {
 		goto('/events');
 	}
 </script>
 
-<DetailView {eventId} onBack={handleBack} />
+<DetailView {navigate} {goBack} params={{ eventId }} />