From e6cfa74de7d063e7247c4c2ee8f787ab1793a063 Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Tue, 5 May 2026 00:48:50 +0200
Subject: [PATCH] add event creation and event view pages

---
 src/lib/cards/social/EventCard/index.ts       | 51 +++++----------
 .../UpcomingEventsCard.svelte                 | 26 ++------
 src/lib/embed/AtmoEmbed.svelte                | 37 ++++++++++-
 .../event/create/+page.server.ts              | 11 ++++
 .../[[actor=actor]]/event/create/+page.svelte | 40 ++++++++++++
 .../event/r/[rkey]/+page.server.ts            | 11 ++++
 .../event/r/[rkey]/+page.svelte               | 63 +++++++++++++++++++
 7 files changed, 182 insertions(+), 57 deletions(-)
 create mode 100644 src/routes/[[actor=actor]]/event/create/+page.server.ts
 create mode 100644 src/routes/[[actor=actor]]/event/create/+page.svelte
 create mode 100644 src/routes/[[actor=actor]]/event/r/[rkey]/+page.server.ts
 create mode 100644 src/routes/[[actor=actor]]/event/r/[rkey]/+page.svelte

diff --git a/src/lib/cards/social/EventCard/index.ts b/src/lib/cards/social/EventCard/index.ts
index 3df1db7..caba18d 100644
--- a/src/lib/cards/social/EventCard/index.ts
+++ b/src/lib/cards/social/EventCard/index.ts
@@ -1,8 +1,6 @@
-import { parseUri, getRecord } from '$lib/atproto';
 import type { CardDefinition } from '../../types';
 import CreateEventCardModal from './CreateEventCardModal.svelte';
 import EventCard from './EventCard.svelte';
-import type { Did } from '@atcute/lexicons';
 
 const EVENT_COLLECTION = 'community.lexicon.calendar.event';
 
@@ -58,35 +56,20 @@ export const EventCardDefinition = {
 		card.mobileH = 6;
 	},
 
-	loadData: async (items) => {
-		const eventDataMap: Record<string, EventData> = {};
-
-		for (const item of items) {
-			const uri = item.cardData?.uri;
-			if (!uri) continue;
-
-			const parsedUri = parseUri(uri);
-			if (!parsedUri || !parsedUri.rkey || !parsedUri.repo) continue;
-
-			try {
-				const record = await getRecord({
-					did: parsedUri.repo as Did,
-					collection: EVENT_COLLECTION,
-					rkey: parsedUri.rkey
-				});
-
-				if (record?.value) {
-					eventDataMap[item.id] = record.value as EventData;
-				}
-			} catch (error) {
-				console.error('Failed to fetch event data:', error);
-			}
+	onUrlHandler: (url, item) => {
+		// Match atmo.rsvp URLs: https://atmo.rsvp/p/{didOrHandle}/e/{rkey}
+		const atmoMatch = url.match(/^https?:\/\/atmo\.rsvp\/p\/([^/]+)\/e\/([^/?#]+)/);
+		if (atmoMatch) {
+			const [, repo, rkey] = atmoMatch;
+			item.w = 4;
+			item.h = 4;
+			item.mobileW = 8;
+			item.mobileH = 6;
+			item.cardType = 'event';
+			item.cardData.uri = `at://${repo}/${EVENT_COLLECTION}/${rkey}`;
+			return item;
 		}
 
-		return eventDataMap;
-	},
-
-	onUrlHandler: (url, item) => {
 		// Match smokesignal.events URLs: https://smokesignal.events/{did}/{rkey}
 		const smokesignalMatch = url.match(/^https?:\/\/smokesignal\.events\/(did:[^/]+)\/([^/?#]+)/);
 		if (smokesignalMatch) {
@@ -100,17 +83,17 @@ export const EventCardDefinition = {
 			return item;
 		}
 
-		// Match AT URIs: at://{did}/community.lexicon.calendar.event/{rkey}
-		const atUriMatch = url.match(/^at:\/\/(did:[^/]+)\/([^/]+)\/([^/?#]+)/);
+		// Match AT URIs: at://{didOrHandle}/community.lexicon.calendar.event/{rkey}
+		const atUriMatch = url.match(/^at:\/\/([^/]+)\/([^/]+)\/([^/?#]+)/);
 		if (atUriMatch) {
-			const [, did, collection, rkey] = atUriMatch;
+			const [, repo, collection, rkey] = atUriMatch;
 			if (collection === EVENT_COLLECTION) {
 				item.w = 4;
 				item.h = 4;
 				item.mobileW = 8;
 				item.mobileH = 6;
 				item.cardType = 'event';
-				item.cardData.uri = `at://${did}/${collection}/${rkey}`;
+				item.cardData.uri = `at://${repo}/${collection}/${rkey}`;
 				return item;
 			}
 		}
@@ -122,7 +105,7 @@ export const EventCardDefinition = {
 
 	name: 'Event',
 
-	keywords: ['calendar', 'meetup', 'schedule', 'date', 'rsvp', 'smokesignal'],
+	keywords: ['calendar', 'meetup', 'schedule', 'date', 'rsvp', 'atmo', 'smokesignal'],
 	groups: ['Social'],
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" /></svg>`
 } as CardDefinition & { type: 'event' };
diff --git a/src/lib/cards/social/UpcomingEventsCard/UpcomingEventsCard.svelte b/src/lib/cards/social/UpcomingEventsCard/UpcomingEventsCard.svelte
index 3e49506..cd61ff2 100644
--- a/src/lib/cards/social/UpcomingEventsCard/UpcomingEventsCard.svelte
+++ b/src/lib/cards/social/UpcomingEventsCard/UpcomingEventsCard.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { Badge, Button, Modal } from '@foxui/core';
+	import { Badge } from '@foxui/core';
 	import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
 	import type { ContentComponentProps } from '../../types';
 	import { UpcomingEventsCardDefinition } from '.';
 	import type { EventData } from '../EventCard';
 	import { user } from '$lib/atproto';
 	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
-	let showCreateModal = $state(false);
 
 	let { item }: ContentComponentProps = $props();
 
@@ -143,8 +142,10 @@
 						/>
 					</svg>
 				</button>
-				<button
-					onclick={() => (showCreateModal = true)}
+				<a
+					href="/event/create"
+					target="_blank"
+					rel="noopener"
 					title="Create new event"
 					class="bg-base-100 hover:bg-base-200 dark:bg-base-800 dark:hover:bg-base-700 accent:bg-accent-400/30 accent:hover:bg-accent-400/50 text-base-700 dark:text-base-300 z-50 flex size-7 cursor-pointer items-center justify-center rounded-lg transition-colors"
 				>
@@ -158,7 +159,7 @@
 					>
 						<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
 					</svg>
-				</button>
+				</a>
 			</div>
 		{/if}
 	</div>
@@ -251,18 +252,3 @@
 		{/if}
 	</div>
 </div>
-
-<Modal bind:open={showCreateModal}>
-	<div class="flex flex-col gap-4">
-		<h3 class="text-lg font-semibold">Create Event</h3>
-		<p class="text-base-600 dark:text-base-400 text-sm">
-			Create events on atmo.rsvp, these events will show up here (might take a few minutes).
-		</p>
-		<div class="flex justify-end gap-2">
-			<Button variant="ghost" onclick={() => (showCreateModal = false)}>Cancel</Button>
-			<Button href="https://atmo.rsvp" target="_blank" onclick={() => (showCreateModal = false)}>
-				Go to atmo.rsvp
-			</Button>
-		</div>
-	</div>
-</Modal>
diff --git a/src/lib/embed/AtmoEmbed.svelte b/src/lib/embed/AtmoEmbed.svelte
index a301cc1..5f5f807 100644
--- a/src/lib/embed/AtmoEmbed.svelte
+++ b/src/lib/embed/AtmoEmbed.svelte
@@ -19,6 +19,7 @@
 		height?: number;
 		minHeight?: number;
 		maxHeight?: number;
+		fill?: boolean;
 		title?: string;
 		class?: string;
 		onnotify?: (name: string, payload: unknown) => void;
@@ -31,6 +32,7 @@
 		height = 400,
 		minHeight = 80,
 		maxHeight = 20000,
+		fill = false,
 		title = 'Embedded content',
 		class: className = '',
 		onnotify
@@ -48,6 +50,7 @@
 	let iframeEl: HTMLIFrameElement | null = $state(null);
 	let resizedHeight: number | null = $state(null);
 	let displayHeight = $derived(resizedHeight ?? height);
+	let heightStyle = $derived(fill ? '100%' : `${displayHeight}px`);
 	let handshakeDone = $state(false);
 
 	const session: Session = $derived.by<Session>(() => {
@@ -91,6 +94,10 @@
 
 	function postToIframe(message: unknown) {
 		if (!iframeEl?.contentWindow) return;
+		if (browser && import.meta.env.DEV) {
+			const m = message as { type?: unknown; id?: unknown; ok?: unknown };
+			console.debug('[AtmoEmbed] →', m.type ?? `response#${m.id} ok=${m.ok}`, message);
+		}
 		iframeEl.contentWindow.postMessage(message, origin);
 	}
 
@@ -173,13 +180,37 @@
 	}
 
 	function handleMessage(ev: MessageEvent) {
+		if (browser && import.meta.env.DEV) {
+			console.debug('[AtmoEmbed] raw message', {
+				origin: ev.origin,
+				sourceMatches: !!iframeEl && ev.source === iframeEl.contentWindow,
+				data: ev.data
+			});
+		}
 		if (!iframeEl) return;
 		if (ev.source !== iframeEl.contentWindow) return;
-		if (ev.origin !== origin) return;
+		if (ev.origin !== origin) {
+			console.warn('[AtmoEmbed] dropped message: origin mismatch', {
+				expected: origin,
+				received: ev.origin
+			});
+			return;
+		}
 
 		const data = ev.data;
 		if (!data || typeof data !== 'object') return;
-		if (data.v !== PROTOCOL_VERSION) return;
+		if (data.v !== PROTOCOL_VERSION) {
+			console.warn('[AtmoEmbed] dropped message: version mismatch', {
+				expected: PROTOCOL_VERSION,
+				received: (data as { v?: unknown }).v,
+				type: (data as { type?: unknown }).type
+			});
+			return;
+		}
+
+		if (browser && import.meta.env.DEV) {
+			console.debug('[AtmoEmbed] ←', data.type ?? '(response)', data);
+		}
 
 		if (data.type === 'hello') {
 			handshakeDone = true;
@@ -240,7 +271,7 @@
 	bind:this={iframeEl}
 	{title}
 	class={className}
-	style:height="{displayHeight}px"
+	style:height={heightStyle}
 	style:width="100%"
 	style:border="0"
 	style:display="block"
diff --git a/src/routes/[[actor=actor]]/event/create/+page.server.ts b/src/routes/[[actor=actor]]/event/create/+page.server.ts
new file mode 100644
index 0000000..08cc0b9
--- /dev/null
+++ b/src/routes/[[actor=actor]]/event/create/+page.server.ts
@@ -0,0 +1,11 @@
+import { env as publicEnv } from '$env/dynamic/public';
+import { redirect } from '@sveltejs/kit';
+
+export async function load({ locals, request }) {
+	if (!locals.did) {
+		const customDomain = request.headers.get('X-Custom-Domain');
+		const canonical = publicEnv.PUBLIC_DOMAIN || 'https://blento.app';
+		redirect(303, customDomain ? `${canonical}/login` : '/login');
+	}
+	return { authDid: locals.did };
+}
diff --git a/src/routes/[[actor=actor]]/event/create/+page.svelte b/src/routes/[[actor=actor]]/event/create/+page.svelte
new file mode 100644
index 0000000..30d96c7
--- /dev/null
+++ b/src/routes/[[actor=actor]]/event/create/+page.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import AtmoEmbed from '$lib/embed/AtmoEmbed.svelte';
+
+	function handleNotify(name: string, payload: unknown) {
+		console.debug('[event/create] notify', name, payload);
+		if (name === 'event-created') {
+			const uri = (payload as { uri?: string } | undefined)?.uri;
+			if (typeof uri === 'string') {
+				const match = uri.match(/^at:\/\/([^/]+)\/[^/]+\/([^/?#]+)$/);
+				if (match) {
+					const [, repo, rkey] = match;
+					goto(`/${repo}/event/r/${rkey}?created=true`);
+					return;
+				}
+			}
+			goto('/');
+			return;
+		}
+		if (name === 'cancel') {
+			history.back();
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Create event · Blento</title>
+</svelte:head>
+
+<main class="fixed inset-0 flex flex-col">
+	<AtmoEmbed
+		origin="https://atmo.rsvp"
+		path="/embed/create"
+		allowedCollectionPrefixes={['community.lexicon.calendar.', 'app.bsky.feed.post']}
+		fill
+		title="Create event"
+		class="flex-1"
+		onnotify={handleNotify}
+	/>
+</main>
diff --git a/src/routes/[[actor=actor]]/event/r/[rkey]/+page.server.ts b/src/routes/[[actor=actor]]/event/r/[rkey]/+page.server.ts
new file mode 100644
index 0000000..58d5ff2
--- /dev/null
+++ b/src/routes/[[actor=actor]]/event/r/[rkey]/+page.server.ts
@@ -0,0 +1,11 @@
+import { error } from '@sveltejs/kit';
+import { getActor } from '$lib/actor';
+
+export async function load({ params, request, platform }) {
+	if (!params.rkey) error(404, 'Event URL missing rkey');
+
+	const actor = await getActor({ request, paramActor: params.actor, platform });
+	if (!actor) error(404, 'Could not resolve actor');
+
+	return { actor, rkey: params.rkey };
+}
diff --git a/src/routes/[[actor=actor]]/event/r/[rkey]/+page.svelte b/src/routes/[[actor=actor]]/event/r/[rkey]/+page.svelte
new file mode 100644
index 0000000..789c1a1
--- /dev/null
+++ b/src/routes/[[actor=actor]]/event/r/[rkey]/+page.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import { page } from '$app/state';
+	import { SvelteURLSearchParams } from 'svelte/reactivity';
+	import AtmoEmbed from '$lib/embed/AtmoEmbed.svelte';
+
+	let { data }: { data: { actor: string; rkey: string } } = $props();
+
+	let ogImage = $derived(`https://atmo.rsvp/p/${data.actor}/e/${data.rkey}/og.png`);
+
+	let created = $derived(page.url.searchParams.get('created') === 'true');
+
+	let path = $derived.by(() => {
+		const params = new SvelteURLSearchParams();
+		if (browser) {
+			const isCustomDomain = !!page.data?.customDomain;
+			const eventPath = isCustomDomain
+				? `/event/r/${data.rkey}`
+				: `/${data.actor}/event/r/${data.rkey}`;
+			params.set('share_url', `${window.location.origin}${eventPath}`);
+		}
+		if (created) params.set('created', 'true');
+		const qs = params.toString();
+		return `/embed/full/${data.actor}/${data.rkey}${qs ? `?${qs}` : ''}`;
+	});
+
+	onMount(() => {
+		const url = new URL(window.location.href);
+		if (url.searchParams.has('created')) {
+			url.searchParams.delete('created');
+			history.replaceState(history.state, '', url.toString());
+		}
+	});
+
+	function handleNotify(name: string, payload: unknown) {
+		console.debug('[event/r] notify', name, payload);
+		if (name === 'close' || name === 'cancel') {
+			history.back();
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Event · Blento</title>
+	<meta property="og:title" content="Event" />
+	<meta property="og:type" content="article" />
+	<meta property="og:image" content={ogImage} />
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:image" content={ogImage} />
+</svelte:head>
+
+<main class="fixed inset-0 flex flex-col">
+	<AtmoEmbed
+		origin="https://atmo.rsvp"
+		{path}
+		allowedCollectionPrefixes={['community.lexicon.calendar.', 'app.bsky.feed.post']}
+		fill
+		title="Event"
+		class="flex-1"
+		onnotify={handleNotify}
+	/>
+</main>
-- 
2.51.2