Merge pull request #214 from flo-bit/more-events-stuff-maybe-blogs

More events stuff maybe blogs

src/routes/[[actor=actor]]/blog/+page.svelte

···
 	<meta name="twitter:description" content="Blog posts by {hostName}" />
 </svelte:head>
 
-<div class="bg-base-50 dark:bg-base-950 min-h-screen px-6 py-12">
-	<div class="mx-auto max-w-4xl">
+<div class="min-h-screen px-6 py-12">
+	<div class="mx-auto max-w-2xl">
 		<!-- Header -->
 		<div class="mb-8">
 			<div class="flex items-center justify-between gap-4">

src/routes/[[actor=actor]]/blog/[rkey]/+page.svelte

···
 	{/if}
 </svelte:head>
 
-<div class="bg-base-50 dark:bg-base-950 min-h-screen px-6 py-12">
-	<div class="mx-auto max-w-3xl">
+<div class="min-h-screen px-6 py-12">
+	<div class="mx-auto max-w-2xl">
 		<!-- Cover image -->
 		{#if coverUrl}
 			<img src={coverUrl} alt={title} class="mb-8 aspect-video w-full rounded-2xl object-cover" />

src/routes/[[actor=actor]]/blog/new/+page.svelte

···
 	<title>Create Blog Post</title>
 </svelte:head>
 
-<div class="bg-base-50 dark:bg-base-950 min-h-screen px-6 py-12">
-	<div class="mx-auto max-w-3xl">
+<div class="min-h-screen px-6 py-12">
+	<div class="mx-auto max-w-2xl">
 		{#if user.isInitializing || !draftRestored}
 			<div class="flex items-center gap-3">
 				<div class="bg-base-300 dark:bg-base-700 size-5 animate-pulse rounded-full"></div>

src/routes/[[actor=actor]]/events/+page.svelte

···
 		return { url, alt: media.alt || event.name };
 	}
 
-	let actorPrefix = $derived(data.hostProfile?.handle ? `/${data.hostProfile.handle}` : `/${did}`);
 	let isOwner = $derived(user.isLoggedIn && user.did === did);
 </script>
 
···
 	<meta name="twitter:description" content="Events hosted by {hostName}" />
 </svelte:head>
 
-<div class="bg-base-50 dark:bg-base-950 min-h-screen px-6 py-12 sm:py-12">
-	<div class="mx-auto max-w-4xl">
+<div class="min-h-screen px-6 py-12 sm:py-12">
+	<div class="mx-auto max-w-2xl">
 		<!-- Header -->
 		<div class="mb-8 flex items-start justify-between">
 			<div>
···
 				</div>
 			</div>
 			{#if isOwner}
-				<Button href="{actorPrefix}/events/new" variant="primary">New event</Button>
+				<Button href="./events/new" variant="primary">New event</Button>
 			{/if}
 		</div>
 
···
 					{@const location = getLocationString(event.locations)}
 					{@const rkey = event.rkey}
 					<a
-						href="{actorPrefix}/events/{rkey}"
-						class="border-base-200 dark:border-base-800 hover:border-base-300 dark:hover:border-base-700 group bg-base-100 dark:bg-base-900 block overflow-hidden rounded-2xl border transition-colors"
+						href="./events/{rkey}"
+						class="border-base-200 dark:border-base-800 hover:border-base-300 dark:hover:border-base-700 group bg-base-100 dark:bg-base-950 block overflow-hidden rounded-2xl border transition-colors"
 					>
 						<!-- Thumbnail -->
 						<div class="p-4">

src/routes/[[actor=actor]]/events/[rkey]/+page.svelte

···
 <script lang="ts">
 	import type { EventData } from '$lib/cards/social/EventCard';
 	import { getCDNImageBlobUrl } from '$lib/atproto';
-	import { Avatar as FoxAvatar, Badge } from '@foxui/core';
+	import { user } from '$lib/atproto/auth.svelte';
+	import { Avatar as FoxAvatar, Badge, Button } from '@foxui/core';
 	import Avatar from 'svelte-boring-avatars';
 	import EventRsvp from './EventRsvp.svelte';
+	import EventAttendees from './EventAttendees.svelte';
 	import { page } from '$app/state';
 	import { segmentize, type Facet } from '@atcute/bluesky-richtext-segmenter';
 	import { sanitize } from '$lib/sanitize';
···
 	let eventUri = $derived(`at://${did}/community.lexicon.calendar.event/${rkey}`);
 
 	let ogImageUrl = $derived(`${page.url.origin}${page.url.pathname}/og.png`);
+
+	let isOwner = $derived(user.isLoggedIn && user.did === did);
 </script>
 
 <svelte:head>
···
 	<meta name="twitter:image" content={ogImageUrl} />
 </svelte:head>
 
-<div class="bg-base-50 dark:bg-base-950 min-h-screen px-6 py-12 sm:py-12">
-	<div class="mx-auto max-w-4xl">
+<div class="min-h-screen px-6 py-12 sm:py-12">
+	<div class="mx-auto max-w-2xl">
 		<!-- Banner image (full width, only when no thumbnail) -->
 		{#if isBannerOnly && displayImage}
 			<img
···
 
 			<!-- Right column: event details -->
 			<div class="order-2 min-w-0 md:order-0 md:col-start-2 md:row-span-5 md:row-start-1">
-				<h1
-					class="text-base-900 dark:text-base-50 mb-2 text-4xl leading-tight font-bold sm:text-5xl"
-				>
-					{eventData.name}
-				</h1>
+				<div class="mb-2 flex items-start justify-between gap-4">
+					<h1
+						class="text-base-900 dark:text-base-50 text-4xl leading-tight font-bold sm:text-5xl"
+					>
+						{eventData.name}
+					</h1>
+					{#if isOwner}
+						<Button href="./edit" variant="ghost" size="sm" class="shrink-0">Edit</Button>
+					{/if}
+				</div>
 
 				<!-- Mode badge -->
 				{#if eventData.mode}
···
 
 				<EventRsvp {eventUri} eventCid={data.eventCid} />
 
+				{#if isOwner}
+					<div class="mt-4">
+						<Button href="./edit" variant="secondary" size="sm">Edit event</Button>
+					</div>
+				{/if}
+
 				<!-- About Event -->
 				{#if descriptionHtml}
 					<div class="mt-8 mb-8">
···
 					</div>
 				</div>
 			{/if}
+
+			<!-- Attendees -->
+			<!-- <div class="order-5 md:order-0 md:col-start-1">
+				<EventAttendees {eventUri} {did} />
+			</div> -->
 
 			<!-- View on Smoke Signal link -->
 			<a

src/routes/[[actor=actor]]/events/[rkey]/EventAttendees.svelte

···
+<script lang="ts">
+	import { Avatar as FoxAvatar } from '@foxui/core';
+	import { onMount } from 'svelte';
+	import { fetchEventBacklinks } from './api.remote';
+
+	let { eventUri, did }: { eventUri: string; did: string } = $props();
+
+	let goingCount = $state(0);
+	let interestedCount = $state(0);
+	let goingAvatars: Array<{ did: string; avatar?: string; name: string }> = $state([]);
+	let interestedAvatars: Array<{ did: string; avatar?: string; name: string }> = $state([]);
+	let loading = $state(true);
+
+	onMount(() => {
+		fetchEventBacklinks(eventUri)
+			.then((records) => {
+				console.log(records);
+				if (!records) return;
+				let going = 0;
+				let interested = 0;
+				const goingAvatarList: Array<{ did: string; avatar?: string; name: string }> = [];
+				const interestedAvatarList: Array<{ did: string; avatar?: string; name: string }> = [];
+
+				for (const raw of records) {
+					const record = raw as {
+						did: string;
+						value?: { status?: string };
+						author?: { avatar?: string; displayName?: string; handle?: string };
+					};
+					const status = record.value?.status || '';
+					const author = record.author;
+					const avatarInfo = {
+						did: record.did,
+						avatar: author?.avatar,
+						name: author?.displayName || author?.handle || record.did
+					};
+
+					if (status.includes('#going')) {
+						going++;
+						goingAvatarList.push(avatarInfo);
+					} else if (status.includes('#interested')) {
+						interested++;
+						interestedAvatarList.push(avatarInfo);
+					}
+				}
+
+				goingCount = going;
+				interestedCount = interested;
+				goingAvatars = goingAvatarList;
+				interestedAvatars = interestedAvatarList;
+			})
+			.catch((err) => {
+				console.error('Failed to fetch event attendees:', err);
+			})
+			.finally(() => {
+				loading = false;
+			});
+	});
+
+	let totalCount = $derived(goingCount + interestedCount);
+	let allAvatars = $derived([...goingAvatars, ...interestedAvatars]);
+	let displayAvatars = $derived(allAvatars.slice(0, 8));
+	let overflowCount = $derived(allAvatars.length - displayAvatars.length);
+</script>
+
+{#if loading}
+	<div class="flex items-center gap-3">
+		<div class="bg-base-300 dark:bg-base-700 h-3 w-24 animate-pulse rounded"></div>
+	</div>
+{:else if totalCount > 0}
+	<div>
+		<p class="text-base-500 dark:text-base-400 mb-3 text-xs font-semibold tracking-wider uppercase">
+			Attendees
+		</p>
+
+		<!-- Avatar stack -->
+		{#if displayAvatars.length > 0}
+			<div class="mb-3 flex items-center">
+				<div class="flex -space-x-2">
+					{#each displayAvatars as person (person.did)}
+						<FoxAvatar
+							src={person.avatar}
+							alt={person.name}
+							class="ring-base-50 dark:ring-base-950 size-7 ring-2"
+						/>
+					{/each}
+				</div>
+				{#if overflowCount > 0}
+					<span class="text-base-500 dark:text-base-400 ml-2 text-xs">
+						+{overflowCount}
+					</span>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Counts -->
+		<div class="text-base-600 dark:text-base-400 flex items-center gap-3 text-sm">
+			{#if goingCount > 0}
+				<span class="flex items-center gap-1.5">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 20 20"
+						fill="currentColor"
+						class="size-3.5 text-green-500"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+					{goingCount} going
+				</span>
+			{/if}
+			{#if interestedCount > 0}
+				<span class="flex items-center gap-1.5">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 20 20"
+						fill="currentColor"
+						class="size-3.5 text-amber-500"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+					{interestedCount} interested
+				</span>
+			{/if}
+		</div>
+	</div>
+{/if}

src/routes/[[actor=actor]]/events/[rkey]/EventRsvp.svelte

···
 </script>
 
 <div
-	class="border-base-200 dark:border-base-800 bg-base-100 items-between dark:bg-base-900/50 mt-8 mb-2 flex h-25 flex-col justify-center rounded-2xl border p-4"
+	class="border-base-200 dark:border-base-800 bg-base-100 items-between dark:bg-base-950/50 mt-8 mb-2 flex h-25 flex-col justify-center rounded-2xl border p-4"
 >
 	{#if user.isInitializing || rsvpLoading}
 		<div class="flex items-center gap-3">

src/routes/[[actor=actor]]/events/[rkey]/api.remote.ts

···
+import { query } from '$app/server';
+
+export const fetchEventBacklinks = query('unchecked', async (eventUri: string) => {
+	const allRecords: Record<string, unknown>[] = [];
+	let cursor: string | undefined;
+
+	do {
+		const params: Record<string, unknown> = {
+			subject: eventUri,
+			source: 'community.lexicon.calendar.rsvp:subject.uri'
+		};
+		if (cursor) params.cursor = cursor;
+
+		const res = await fetch(
+			'https://slingshot.microcosm.blue/xrpc/com.bad-example.proxy.hydrateQueryResponse',
+			{
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					atproto_proxy: 'did:web:constellation.microcosm.blue#constellation',
+					hydration_sources: [
+						{
+							path: 'records[]',
+							shape: 'at-uri-parts'
+						}
+					],
+					params,
+					xrpc: 'blue.microcosm.links.getBacklinks'
+				})
+			}
+		);
+
+		if (!res.ok) break;
+
+		const data = await res.json();
+		const output = data.output;
+		if (!output) break;
+
+		if (output.records && Array.isArray(output.records)) {
+			allRecords.push(...output.records);
+		}
+
+		cursor = output.cursor || undefined;
+	} while (cursor);
+
+	return allRecords;
+});

src/routes/[[actor=actor]]/events/[rkey]/edit/+page.server.ts

···
+import { error } from '@sveltejs/kit';
+import type { EventData } from '$lib/cards/social/EventCard';
+import { getBlentoOrBskyProfile, getRecord } from '$lib/atproto/methods.js';
+import { createCache, type CachedProfile } from '$lib/cache';
+import type { Did } from '@atcute/lexicons';
+import { getActor } from '$lib/actor';
+
+export async function load({ params, platform, request }) {
+	const { rkey } = params;
+
+	const cache = createCache(platform);
+
+	const did = await getActor({ request, paramActor: params.actor, platform });
+
+	if (!did || !rkey) {
+		throw error(404, 'Event not found');
+	}
+
+	try {
+		const [eventRecord, hostProfile] = await Promise.all([
+			getRecord({
+				did: did as Did,
+				collection: 'community.lexicon.calendar.event',
+				rkey
+			}),
+			cache
+				? cache.getProfile(did as Did).catch(() => null)
+				: getBlentoOrBskyProfile({ did: did as Did })
+						.then(
+							(p): CachedProfile => ({
+								did: p.did as string,
+								handle: p.handle as string,
+								displayName: p.displayName as string | undefined,
+								avatar: p.avatar as string | undefined,
+								hasBlento: p.hasBlento,
+								url: p.url
+							})
+						)
+						.catch(() => null)
+		]);
+
+		if (!eventRecord?.value) {
+			throw error(404, 'Event not found');
+		}
+
+		const eventData: EventData = eventRecord.value as EventData;
+
+		return {
+			eventData,
+			did,
+			rkey,
+			hostProfile: hostProfile ?? null,
+			eventCid: (eventRecord.cid as string) ?? null
+		};
+	} catch (e) {
+		if (e && typeof e === 'object' && 'status' in e) throw e;
+		throw error(404, 'Event not found');
+	}
+}

src/routes/[[actor=actor]]/events/[rkey]/edit/+page.svelte

···
+<script lang="ts">
+	import { user } from '$lib/atproto/auth.svelte';
+	import { loginModalState } from '$lib/atproto/UI/LoginModal.svelte';
+	import { uploadBlob, putRecord, resolveHandle } from '$lib/atproto/methods';
+	import { getCDNImageBlobUrl } from '$lib/atproto';
+	import { compressImage } from '$lib/atproto/image-helper';
+	import { Avatar as FoxAvatar, Badge, Button, ToggleGroup, ToggleGroupItem } from '@foxui/core';
+	import { goto } from '$app/navigation';
+	import { tokenize, type Token } from '@atcute/bluesky-richtext-parser';
+	import type { Handle } from '@atcute/lexicons';
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import { putImage, getImage, deleteImage } from '$lib/components/image-store';
+	import Modal from '$lib/components/modal/Modal.svelte';
+
+	let { data } = $props();
+
+	let rkey: string = $derived(data.rkey);
+	let DRAFT_KEY = $derived(`blento-event-edit-${rkey}`);
+
+	type EventMode = 'inperson' | 'virtual' | 'hybrid';
+
+	interface EventLocation {
+		street?: string;
+		locality?: string;
+		region?: string;
+		country?: string;
+	}
+
+	interface EventDraft {
+		name: string;
+		description: string;
+		startsAt: string;
+		endsAt: string;
+		links: Array<{ uri: string; name: string }>;
+		mode?: EventMode;
+		thumbnailKey?: string;
+		thumbnailChanged?: boolean;
+		location?: EventLocation | null;
+		locationChanged?: boolean;
+	}
+
+	let thumbnailKey: string | null = $state(null);
+	let thumbnailChanged = $state(false);
+
+	let name = $state('');
+	let description = $state('');
+	let startsAt = $state('');
+	let endsAt = $state('');
+	let mode: EventMode = $state('inperson');
+	let thumbnailFile: File | null = $state(null);
+	let thumbnailPreview: string | null = $state(null);
+	let submitting = $state(false);
+	let error: string | null = $state(null);
+
+	let location: EventLocation | null = $state(null);
+	let locationChanged = $state(false);
+	let showLocationModal = $state(false);
+	let locationSearch = $state('');
+	let locationSearching = $state(false);
+	let locationError = $state('');
+	let locationResult: { displayName: string; location: EventLocation } | null = $state(null);
+
+	let links: Array<{ uri: string; name: string }> = $state([]);
+	let showLinkPopup = $state(false);
+	let newLinkUri = $state('');
+	let newLinkName = $state('');
+
+	let hasDraft = $state(false);
+	let draftLoaded = $state(false);
+
+	function isoToDatetimeLocal(iso: string): string {
+		const date = new Date(iso);
+		const pad = (n: number) => n.toString().padStart(2, '0');
+		return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+	}
+
+	function stripModePrefix(modeStr: string): EventMode {
+		const stripped = modeStr.replace('community.lexicon.calendar.event#', '');
+		if (stripped === 'virtual' || stripped === 'hybrid' || stripped === 'inperson') return stripped;
+		return 'inperson';
+	}
+
+	function populateFromEventData() {
+		const eventData = data.eventData;
+		name = eventData.name || '';
+		description = eventData.description || '';
+		startsAt = eventData.startsAt ? isoToDatetimeLocal(eventData.startsAt) : '';
+		endsAt = eventData.endsAt ? isoToDatetimeLocal(eventData.endsAt) : '';
+		mode = eventData.mode ? stripModePrefix(eventData.mode) : 'inperson';
+		links = eventData.uris ? eventData.uris.map((l) => ({ uri: l.uri, name: l.name || '' })) : [];
+
+		// Load existing location
+		if (eventData.locations && eventData.locations.length > 0) {
+			const loc = eventData.locations.find((v) => v.$type === 'community.lexicon.location.address');
+			if (loc) {
+				const flat = loc as Record<string, unknown>;
+				const nested = loc.address;
+				const street = (flat.street as string) || undefined;
+				const locality = (flat.locality as string) || nested?.locality;
+				const region = (flat.region as string) || nested?.region;
+				const country = (flat.country as string) || nested?.country;
+				location = {
+					...(street && { street }),
+					...(locality && { locality }),
+					...(region && { region }),
+					...(country && { country })
+				};
+			}
+		}
+		locationChanged = false;
+
+		// Load existing thumbnail from CDN
+		if (eventData.media && eventData.media.length > 0) {
+			const media = eventData.media.find((m) => m.role === 'thumbnail');
+			if (media?.content) {
+				const url = getCDNImageBlobUrl({ did: data.did, blob: media.content, type: 'jpeg' });
+				if (url) {
+					thumbnailPreview = url;
+					thumbnailChanged = false;
+				}
+			}
+		}
+	}
+
+	onMount(async () => {
+		const saved = localStorage.getItem(DRAFT_KEY);
+		if (saved) {
+			try {
+				const draft: EventDraft = JSON.parse(saved);
+				name = draft.name || '';
+				description = draft.description || '';
+				startsAt = draft.startsAt || '';
+				endsAt = draft.endsAt || '';
+				links = draft.links || [];
+				mode = draft.mode || 'inperson';
+				locationChanged = draft.locationChanged || false;
+				if (draft.locationChanged) {
+					location = draft.location || null;
+				}
+				thumbnailChanged = draft.thumbnailChanged || false;
+
+				if (draft.thumbnailKey) {
+					const img = await getImage(draft.thumbnailKey);
+					if (img) {
+						thumbnailKey = draft.thumbnailKey;
+						thumbnailFile = new File([img.blob], img.name, { type: img.blob.type });
+						thumbnailPreview = URL.createObjectURL(img.blob);
+						thumbnailChanged = true;
+					}
+				} else if (!thumbnailChanged) {
+					// No new thumbnail in draft, show existing one from event data
+					if (data.eventData.media && data.eventData.media.length > 0) {
+						const media = data.eventData.media.find((m) => m.role === 'thumbnail');
+						if (media?.content) {
+							const url = getCDNImageBlobUrl({
+								did: data.did,
+								blob: media.content,
+								type: 'jpeg'
+							});
+							if (url) {
+								thumbnailPreview = url;
+							}
+						}
+					}
+				}
+
+				hasDraft = true;
+			} catch {
+				localStorage.removeItem(DRAFT_KEY);
+				populateFromEventData();
+			}
+		} else {
+			populateFromEventData();
+		}
+		draftLoaded = true;
+	});
+
+	let saveDraftTimeout: ReturnType<typeof setTimeout> | undefined;
+
+	function saveDraft() {
+		if (!draftLoaded || !browser) return;
+		clearTimeout(saveDraftTimeout);
+		saveDraftTimeout = setTimeout(() => {
+			const draft: EventDraft = {
+				name,
+				description,
+				startsAt,
+				endsAt,
+				links,
+				mode,
+				thumbnailChanged,
+				locationChanged
+			};
+			if (locationChanged) draft.location = location;
+			if (thumbnailKey) draft.thumbnailKey = thumbnailKey;
+			localStorage.setItem(DRAFT_KEY, JSON.stringify(draft));
+			hasDraft = true;
+		}, 500);
+	}
+
+	$effect(() => {
+		// track all draft fields by reading them
+		void [
+			name,
+			description,
+			startsAt,
+			endsAt,
+			mode,
+			JSON.stringify(links),
+			JSON.stringify(location)
+		];
+		saveDraft();
+	});
+
+	function deleteDraft() {
+		localStorage.removeItem(DRAFT_KEY);
+		if (thumbnailKey) deleteImage(thumbnailKey);
+		thumbnailKey = null;
+		thumbnailChanged = false;
+		populateFromEventData();
+		hasDraft = false;
+	}
+
+	async function searchLocation() {
+		const q = locationSearch.trim();
+		if (!q) return;
+		locationError = '';
+		locationSearching = true;
+		locationResult = null;
+
+		try {
+			const response = await fetch('/api/geocoding?q=' + encodeURIComponent(q));
+			if (!response.ok) throw new Error('response not ok');
+			const data = await response.json();
+			if (!data || data.error) throw new Error('no results');
+
+			const addr = data.address || {};
+			const road = addr.road || '';
+			const houseNumber = addr.house_number || '';
+			const street = road ? (houseNumber ? `${road} ${houseNumber}` : road) : '';
+			const locality =
+				addr.city || addr.town || addr.village || addr.municipality || addr.hamlet || '';
+			const region = addr.state || addr.county || '';
+			const country = addr.country || '';
+
+			locationResult = {
+				displayName: data.display_name || q,
+				location: {
+					...(street && { street }),
+					...(locality && { locality }),
+					...(region && { region }),
+					...(country && { country })
+				}
+			};
+		} catch {
+			locationError = "Couldn't find that location.";
+		} finally {
+			locationSearching = false;
+		}
+	}
+
+	function confirmLocation() {
+		if (locationResult) {
+			location = locationResult.location;
+			locationChanged = true;
+		}
+		showLocationModal = false;
+		locationSearch = '';
+		locationResult = null;
+		locationError = '';
+	}
+
+	function removeLocation() {
+		location = null;
+		locationChanged = true;
+	}
+
+	function getLocationDisplayString(loc: EventLocation): string {
+		return [loc.street, loc.locality, loc.region, loc.country].filter(Boolean).join(', ');
+	}
+
+	function addLink() {
+		const uri = newLinkUri.trim();
+		if (!uri) return;
+		links.push({ uri, name: newLinkName.trim() });
+		newLinkUri = '';
+		newLinkName = '';
+		showLinkPopup = false;
+	}
+
+	function removeLink(index: number) {
+		links.splice(index, 1);
+	}
+
+	let fileInput: HTMLInputElement | undefined = $state();
+
+	let hostName = $derived(user.profile?.displayName || user.profile?.handle || user.did || '');
+
+	async function setThumbnail(file: File) {
+		thumbnailFile = file;
+		thumbnailChanged = true;
+		if (thumbnailPreview) URL.revokeObjectURL(thumbnailPreview);
+		thumbnailPreview = URL.createObjectURL(file);
+
+		if (thumbnailKey) await deleteImage(thumbnailKey);
+		thumbnailKey = crypto.randomUUID();
+		await putImage(thumbnailKey, file, file.name);
+		saveDraft();
+	}
+
+	async function onFileChange(e: Event) {
+		const input = e.target as HTMLInputElement;
+		const file = input.files?.[0];
+		if (!file) return;
+		setThumbnail(file);
+	}
+
+	let isDragOver = $state(false);
+
+	function onDragOver(e: DragEvent) {
+		e.preventDefault();
+		isDragOver = true;
+	}
+
+	function onDragLeave(e: DragEvent) {
+		e.preventDefault();
+		isDragOver = false;
+	}
+
+	function onDrop(e: DragEvent) {
+		e.preventDefault();
+		isDragOver = false;
+		const file = e.dataTransfer?.files?.[0];
+		if (file?.type.startsWith('image/')) {
+			setThumbnail(file);
+		}
+	}
+
+	function removeThumbnail() {
+		thumbnailFile = null;
+		thumbnailChanged = true;
+		if (thumbnailPreview) {
+			URL.revokeObjectURL(thumbnailPreview);
+			thumbnailPreview = null;
+		}
+		if (thumbnailKey) {
+			deleteImage(thumbnailKey);
+			thumbnailKey = null;
+		}
+		if (fileInput) fileInput.value = '';
+		saveDraft();
+	}
+
+	function formatMonth(date: Date): string {
+		return date.toLocaleDateString('en-US', { month: 'short' }).toUpperCase();
+	}
+
+	function formatDay(date: Date): number {
+		return date.getDate();
+	}
+
+	function formatWeekday(date: Date): string {
+		return date.toLocaleDateString('en-US', { weekday: 'long' });
+	}
+
+	function formatFullDate(date: Date): string {
+		const options: Intl.DateTimeFormatOptions = { month: 'long', day: 'numeric' };
+		if (date.getFullYear() !== new Date().getFullYear()) {
+			options.year = 'numeric';
+		}
+		return date.toLocaleDateString('en-US', options);
+	}
+
+	function formatTime(date: Date): string {
+		return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
+	}
+
+	let startDate = $derived(startsAt ? new Date(startsAt) : null);
+	let endDate = $derived(endsAt ? new Date(endsAt) : null);
+	let isSameDay = $derived(
+		startDate &&
+			endDate &&
+			startDate.getFullYear() === endDate.getFullYear() &&
+			startDate.getMonth() === endDate.getMonth() &&
+			startDate.getDate() === endDate.getDate()
+	);
+
+	async function tokensToFacets(tokens: Token[]): Promise<Record<string, unknown>[]> {
+		const encoder = new TextEncoder();
+		const facets: Record<string, unknown>[] = [];
+		let byteOffset = 0;
+
+		for (const token of tokens) {
+			const tokenBytes = encoder.encode(token.raw);
+			const byteStart = byteOffset;
+			const byteEnd = byteOffset + tokenBytes.length;
+
+			if (token.type === 'mention') {
+				try {
+					const did = await resolveHandle({ handle: token.handle as Handle });
+					if (did) {
+						facets.push({
+							index: { byteStart, byteEnd },
+							features: [{ $type: 'app.bsky.richtext.facet#mention', did }]
+						});
+					}
+				} catch {
+					// skip unresolvable mentions
+				}
+			} else if (token.type === 'autolink') {
+				facets.push({
+					index: { byteStart, byteEnd },
+					features: [{ $type: 'app.bsky.richtext.facet#link', uri: token.url }]
+				});
+			} else if (token.type === 'topic') {
+				facets.push({
+					index: { byteStart, byteEnd },
+					features: [{ $type: 'app.bsky.richtext.facet#tag', tag: token.name }]
+				});
+			}
+
+			byteOffset = byteEnd;
+		}
+
+		return facets;
+	}
+
+	async function handleSubmit() {
+		error = null;
+
+		if (!name.trim()) {
+			error = 'Name is required.';
+			return;
+		}
+		if (!startsAt) {
+			error = 'Start date is required.';
+			return;
+		}
+		if (!user.client || !user.did) {
+			error = 'You must be logged in.';
+			return;
+		}
+
+		submitting = true;
+
+		try {
+			let media: Array<Record<string, unknown>> | undefined;
+
+			if (thumbnailChanged) {
+				if (thumbnailFile) {
+					const compressed = await compressImage(thumbnailFile);
+					const blobRef = await uploadBlob({ blob: compressed.blob });
+					if (blobRef) {
+						media = [
+							{
+								role: 'thumbnail',
+								content: blobRef,
+								aspect_ratio: {
+									width: compressed.aspectRatio.width,
+									height: compressed.aspectRatio.height
+								}
+							}
+						];
+					}
+				}
+				// If thumbnailChanged but no thumbnailFile, media stays undefined (thumbnail removed)
+			} else {
+				// Thumbnail not changed — reuse original media from eventData
+				if (data.eventData.media && data.eventData.media.length > 0) {
+					media = data.eventData.media as Array<Record<string, unknown>>;
+				}
+			}
+
+			// Preserve original createdAt
+			const originalCreatedAt =
+				(data.eventData as Record<string, unknown>).createdAt || new Date().toISOString();
+
+			const record: Record<string, unknown> = {
+				$type: 'community.lexicon.calendar.event',
+				name: name.trim(),
+				mode: `community.lexicon.calendar.event#${mode}`,
+				status: 'community.lexicon.calendar.event#scheduled',
+				startsAt: new Date(startsAt).toISOString(),
+				createdAt: originalCreatedAt
+			};
+
+			const trimmedDescription = description.trim();
+			if (trimmedDescription) {
+				record.description = trimmedDescription;
+				const tokens = tokenize(trimmedDescription);
+				const facets = await tokensToFacets(tokens);
+				if (facets.length > 0) {
+					record.facets = facets;
+				}
+			}
+			if (endsAt) {
+				record.endsAt = new Date(endsAt).toISOString();
+			}
+			if (media) {
+				record.media = media;
+			}
+			if (links.length > 0) {
+				record.uris = links;
+			}
+			if (locationChanged) {
+				if (location) {
+					record.locations = [
+						{
+							$type: 'community.lexicon.location.address',
+							...location
+						}
+					];
+				}
+				// If locationChanged but no location, locations stays undefined (removed)
+			} else if (data.eventData.locations && data.eventData.locations.length > 0) {
+				record.locations = data.eventData.locations;
+			}
+
+			const response = await putRecord({
+				collection: 'community.lexicon.calendar.event',
+				rkey,
+				record
+			});
+
+			if (response.ok) {
+				localStorage.removeItem(DRAFT_KEY);
+				if (thumbnailKey) deleteImage(thumbnailKey);
+				const handle =
+					user.profile?.handle && user.profile.handle !== 'handle.invalid'
+						? user.profile.handle
+						: user.did;
+				goto(`/${handle}/events/${rkey}`);
+			} else {
+				error = 'Failed to save event. Please try again.';
+			}
+		} catch (e) {
+			console.error('Failed to save event:', e);
+			error = 'Failed to save event. Please try again.';
+		} finally {
+			submitting = false;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Edit Event</title>
+</svelte:head>
+
+<div class="min-h-screen px-6 py-12 sm:py-12">
+	<div class="mx-auto max-w-2xl">
+		{#if user.isInitializing}
+			<div class="flex items-center gap-3">
+				<div class="bg-base-300 dark:bg-base-700 size-5 animate-pulse rounded-full"></div>
+				<div class="bg-base-300 dark:bg-base-700 h-4 w-48 animate-pulse rounded"></div>
+			</div>
+		{:else if !user.isLoggedIn}
+			<div
+				class="border-base-200 dark:border-base-800 bg-base-100 dark:bg-base-900/50 rounded-2xl border p-8 text-center"
+			>
+				<p class="text-base-600 dark:text-base-400 mb-4">Log in to edit this event.</p>
+				<Button onclick={() => loginModalState.show()}>Log in</Button>
+			</div>
+		{:else}
+			<div class="mb-6 flex items-center gap-3">
+				<Badge size="sm">Local edit</Badge>
+				{#if hasDraft}
+					<button
+						type="button"
+						onclick={deleteDraft}
+						class="text-base-500 dark:text-base-400 cursor-pointer text-xs hover:text-red-500 hover:underline"
+					>
+						Discard changes
+					</button>
+				{/if}
+			</div>
+
+			<form
+				onsubmit={(e) => {
+					e.preventDefault();
+					handleSubmit();
+				}}
+			>
+				<!-- Two-column layout mirroring detail page -->
+				<div
+					class="grid grid-cols-1 gap-8 md:grid-cols-[14rem_1fr] md:gap-x-10 md:gap-y-6 lg:grid-cols-[16rem_1fr]"
+				>
+					<!-- Thumbnail (left column) -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						class="order-1 max-w-sm md:order-0 md:col-start-1 md:max-w-none"
+						ondragover={onDragOver}
+						ondragleave={onDragLeave}
+						ondrop={onDrop}
+					>
+						<input
+							bind:this={fileInput}
+							type="file"
+							accept="image/*"
+							onchange={onFileChange}
+							class="hidden"
+						/>
+						{#if thumbnailPreview}
+							<div class="relative">
+								<button type="button" onclick={() => fileInput?.click()} class="w-full">
+									<img
+										src={thumbnailPreview}
+										alt="Thumbnail preview"
+										class="border-base-200 dark:border-base-800 aspect-square w-full cursor-pointer rounded-2xl border object-cover"
+									/>
+								</button>
+								<button
+									type="button"
+									onclick={removeThumbnail}
+									aria-label="Remove thumbnail"
+									class="bg-base-900/70 absolute top-2 right-2 flex size-7 items-center justify-center rounded-full text-white hover:bg-red-600"
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+										class="size-4"
+									>
+										<path
+											d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
+										/>
+									</svg>
+								</button>
+							</div>
+						{:else}
+							<button
+								type="button"
+								onclick={() => fileInput?.click()}
+								class="border-base-300 dark:border-base-700 hover:border-base-400 dark:hover:border-base-600 text-base-500 dark:text-base-400 flex aspect-square w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed transition-colors {isDragOver
+									? 'border-accent-500 bg-accent-50 dark:bg-accent-950 text-accent-500'
+									: ''}"
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="1.5"
+									stroke="currentColor"
+									class="mb-1 size-6"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z"
+									/>
+								</svg>
+								<span class="text-sm">Add image</span>
+							</button>
+						{/if}
+					</div>
+
+					<!-- Right column: event details -->
+					<div class="order-2 min-w-0 md:order-0 md:col-start-2 md:row-span-5 md:row-start-1">
+						<!-- Name -->
+						<input
+							type="text"
+							bind:value={name}
+							required
+							placeholder="Event name"
+							class="text-base-900 dark:text-base-50 placeholder:text-base-300 dark:placeholder:text-base-700 mb-2 w-full border-0 bg-transparent text-4xl leading-tight font-bold focus:border-0 focus:ring-0 focus:outline-none sm:text-5xl"
+						/>
+
+						<!-- Mode toggle -->
+						<div class="mb-8">
+							<ToggleGroup
+								type="single"
+								bind:value={
+									() => {
+										return mode;
+									},
+									(val) => {
+										if (val) mode = val;
+									}
+								}
+								class="w-fit"
+							>
+								<ToggleGroupItem size="sm" value="inperson">In Person</ToggleGroupItem>
+								<ToggleGroupItem size="sm" value="virtual">Virtual</ToggleGroupItem>
+								<ToggleGroupItem size="sm" value="hybrid">Hybrid</ToggleGroupItem>
+							</ToggleGroup>
+						</div>
+
+						<!-- Date row -->
+						<div class="mb-4 flex items-center gap-4">
+							<div
+								class="border-base-200 dark:border-base-700 flex size-12 shrink-0 flex-col items-center justify-center overflow-hidden rounded-xl border"
+							>
+								{#if startDate}
+									<span
+										class="text-base-500 dark:text-base-400 text-[9px] leading-none font-semibold"
+									>
+										{formatMonth(startDate)}
+									</span>
+									<span class="text-base-900 dark:text-base-50 text-lg leading-tight font-bold">
+										{formatDay(startDate)}
+									</span>
+								{:else}
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										class="text-base-400 dark:text-base-500 size-5"
+									>
+										<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>
+								{/if}
+							</div>
+							<div class="flex-1">
+								{#if startDate}
+									<p class="text-base-900 dark:text-base-50 font-semibold">
+										{formatWeekday(startDate)}, {formatFullDate(startDate)}
+										{#if endDate && !isSameDay}
+											- {formatWeekday(endDate)}, {formatFullDate(endDate)}
+										{/if}
+									</p>
+									<p class="text-base-500 dark:text-base-400 text-sm">
+										{formatTime(startDate)}
+										{#if endDate && isSameDay}
+											- {formatTime(endDate)}
+										{/if}
+									</p>
+								{/if}
+								<div class="mt-1 flex flex-wrap gap-3">
+									<label class="flex items-center gap-1.5">
+										<span class="text-base-500 dark:text-base-400 text-xs">Start</span>
+										<input
+											type="datetime-local"
+											bind:value={startsAt}
+											required
+											class="text-base-700 dark:text-base-300 bg-transparent text-xs focus:outline-none"
+										/>
+									</label>
+									<label class="flex items-center gap-1.5">
+										<span class="text-base-500 dark:text-base-400 text-xs">End</span>
+										<input
+											type="datetime-local"
+											bind:value={endsAt}
+											class="text-base-700 dark:text-base-300 bg-transparent text-xs focus:outline-none"
+										/>
+									</label>
+								</div>
+							</div>
+						</div>
+
+						<!-- Location row -->
+						{#if location}
+							<div class="mb-6 flex items-center gap-4">
+								<div
+									class="border-base-200 dark:border-base-700 flex size-12 shrink-0 items-center justify-center rounded-xl border"
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										class="text-base-900 dark:text-base-200 size-5"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+										/>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"
+										/>
+									</svg>
+								</div>
+								<p class="text-base-900 dark:text-base-50 flex-1 font-semibold">
+									{getLocationDisplayString(location)}
+								</p>
+								<button
+									type="button"
+									onclick={removeLocation}
+									class="text-base-400 shrink-0 hover:text-red-500"
+									aria-label="Remove location"
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+										class="size-4"
+									>
+										<path
+											d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
+										/>
+									</svg>
+								</button>
+							</div>
+						{:else}
+							<button
+								type="button"
+								onclick={() => (showLocationModal = true)}
+								class="text-base-500 dark:text-base-400 hover:text-base-700 dark:hover:text-base-200 mb-6 flex items-center gap-4 transition-colors"
+							>
+								<div
+									class="border-base-200 dark:border-base-700 flex size-12 shrink-0 items-center justify-center rounded-xl border"
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										class="size-5"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+										/>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"
+										/>
+									</svg>
+								</div>
+								<span class="text-sm">Add location</span>
+							</button>
+						{/if}
+
+						<!-- About Event -->
+						<div class="mt-8 mb-8">
+							<p
+								class="text-base-500 dark:text-base-400 mb-3 text-xs font-semibold tracking-wider uppercase"
+							>
+								About
+							</p>
+							<textarea
+								bind:value={description}
+								rows={4}
+								placeholder="What's this event about? @mentions, #hashtags and links will be detected automatically."
+								class="text-base-700 dark:text-base-300 placeholder:text-base-300 dark:placeholder:text-base-700 w-full resize-none border-0 bg-transparent leading-relaxed focus:border-0 focus:ring-0 focus:outline-none"
+							></textarea>
+						</div>
+
+						{#if error}
+							<p class="mb-4 text-sm text-red-600 dark:text-red-400">{error}</p>
+						{/if}
+
+						<Button type="submit" disabled={submitting}>
+							{submitting ? 'Saving...' : 'Save Changes'}
+						</Button>
+					</div>
+
+					<!-- Hosted By -->
+					<div class="order-3 md:order-0 md:col-start-1">
+						<p
+							class="text-base-500 dark:text-base-400 mb-3 text-xs font-semibold tracking-wider uppercase"
+						>
+							Hosted By
+						</p>
+						<div class="flex items-center gap-2.5">
+							<FoxAvatar src={user.profile?.avatar} alt={hostName} class="size-8 shrink-0" />
+							<span class="text-base-900 dark:text-base-100 truncate text-sm font-medium">
+								{hostName}
+							</span>
+						</div>
+					</div>
+
+					<!-- Links -->
+					<div class="order-4 md:order-0 md:col-start-1">
+						<p
+							class="text-base-500 dark:text-base-400 mb-4 text-xs font-semibold tracking-wider uppercase"
+						>
+							Links
+						</p>
+						<div class="space-y-3">
+							{#each links as link, i (i)}
+								<div class="group flex items-center gap-1.5">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										class="text-base-700 dark:text-base-300 size-3.5 shrink-0"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+										/>
+									</svg>
+									<span class="text-base-700 dark:text-base-300 truncate text-sm">
+										{link.name || link.uri.replace(/^https?:\/\//, '')}
+									</span>
+									<button
+										type="button"
+										onclick={() => removeLink(i)}
+										class="text-base-400 ml-auto shrink-0 opacity-0 transition-opacity group-hover:opacity-100 hover:text-red-500"
+										aria-label="Remove link"
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 20 20"
+											fill="currentColor"
+											class="size-3.5"
+										>
+											<path
+												d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
+											/>
+										</svg>
+									</button>
+								</div>
+							{/each}
+						</div>
+
+						<div class="relative mt-3">
+							<button
+								type="button"
+								onclick={() => (showLinkPopup = !showLinkPopup)}
+								class="text-base-500 dark:text-base-400 hover:text-base-700 dark:hover:text-base-200 flex items-center gap-1.5 text-sm transition-colors"
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="1.5"
+									stroke="currentColor"
+									class="size-4"
+								>
+									<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+								</svg>
+								Add link
+							</button>
+
+							{#if showLinkPopup}
+								<div
+									class="border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-900 absolute top-full left-0 z-10 mt-2 w-64 rounded-xl border p-3 shadow-lg"
+								>
+									<input
+										type="url"
+										bind:value={newLinkUri}
+										placeholder="https://..."
+										class="border-base-300 dark:border-base-700 bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100 placeholder:text-base-400 dark:placeholder:text-base-600 mb-2 w-full rounded-lg border px-2.5 py-1.5 text-sm focus:outline-none"
+									/>
+									<input
+										type="text"
+										bind:value={newLinkName}
+										placeholder="Label (optional)"
+										class="border-base-300 dark:border-base-700 bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100 placeholder:text-base-400 dark:placeholder:text-base-600 mb-3 w-full rounded-lg border px-2.5 py-1.5 text-sm focus:outline-none"
+									/>
+									<div class="flex justify-end gap-2">
+										<button
+											type="button"
+											onclick={() => (showLinkPopup = false)}
+											class="text-base-500 dark:text-base-400 text-xs hover:underline"
+										>
+											Cancel
+										</button>
+										<button
+											type="button"
+											onclick={addLink}
+											disabled={!newLinkUri.trim()}
+											class="bg-base-900 dark:bg-base-100 text-base-50 dark:text-base-900 disabled:bg-base-300 dark:disabled:bg-base-700 rounded-lg px-3 py-1 text-xs font-medium disabled:cursor-not-allowed"
+										>
+											Add
+										</button>
+									</div>
+								</div>
+							{/if}
+						</div>
+					</div>
+				</div>
+			</form>
+		{/if}
+	</div>
+</div>
+
+<!-- Location modal -->
+<Modal bind:open={showLocationModal}>
+	<p class="text-base-900 dark:text-base-50 text-lg font-semibold">Add location</p>
+	<form
+		onsubmit={(e) => {
+			e.preventDefault();
+			searchLocation();
+		}}
+		class="mt-2"
+	>
+		<div class="flex gap-2">
+			<input
+				type="text"
+				bind:value={locationSearch}
+				placeholder="Search for a city or address..."
+				class="border-base-300 dark:border-base-700 bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100 placeholder:text-base-400 dark:placeholder:text-base-600 flex-1 rounded-lg border px-3 py-2 text-sm focus:outline-none"
+			/>
+			<Button type="submit" disabled={locationSearching || !locationSearch.trim()}>
+				{locationSearching ? 'Searching...' : 'Search'}
+			</Button>
+		</div>
+	</form>
+
+	{#if locationError}
+		<p class="mt-3 text-sm text-red-600 dark:text-red-400">{locationError}</p>
+	{/if}
+
+	{#if locationResult}
+		<div
+			class="border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-900 mt-4 overflow-hidden rounded-xl border p-4"
+		>
+			<div class="flex items-start gap-3">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					class="text-base-500 mt-0.5 size-5 shrink-0"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+					/>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"
+					/>
+				</svg>
+				<div class="min-w-0 flex-1">
+					<p class="text-base-900 dark:text-base-50 font-medium">
+						{getLocationDisplayString(locationResult.location)}
+					</p>
+					<p class="text-base-500 dark:text-base-400 mt-0.5 truncate text-xs">
+						{locationResult.displayName}
+					</p>
+				</div>
+			</div>
+			<div class="mt-4 flex justify-end">
+				<Button onclick={confirmLocation}>Use this location</Button>
+			</div>
+		</div>
+	{/if}
+
+	<p class="text-base-400 dark:text-base-500 mt-4 text-xs">
+		Geocoding by <a
+			href="https://nominatim.openstreetmap.org/"
+			class="hover:text-base-600 dark:hover:text-base-400 underline"
+			target="_blank">Nominatim</a
+		>
+		/ &copy;
+		<a
+			href="https://www.openstreetmap.org/copyright"
+			class="hover:text-base-600 dark:hover:text-base-400 underline"
+			target="_blank">OpenStreetMap contributors</a
+		>
+	</p>
+</Modal>

src/routes/[[actor=actor]]/events/new/+page.svelte

···
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
 	import { putImage, getImage, deleteImage } from '$lib/components/image-store';
+	import Modal from '$lib/components/modal/Modal.svelte';
 
 	const DRAFT_KEY = 'blento-event-draft';
 
 	type EventMode = 'inperson' | 'virtual' | 'hybrid';
 
+	interface EventLocation {
+		street?: string;
+		locality?: string;
+		region?: string;
+		country?: string;
+	}
+
 	interface EventDraft {
 		name: string;
 		description: string;
···
 		links: Array<{ uri: string; name: string }>;
 		mode?: EventMode;
 		thumbnailKey?: string;
+		location?: EventLocation;
 	}
 
 	let thumbnailKey: string | null = $state(null);
···
 	let submitting = $state(false);
 	let error: string | null = $state(null);
 
+	let location: EventLocation | null = $state(null);
+	let showLocationModal = $state(false);
+	let locationSearch = $state('');
+	let locationSearching = $state(false);
+	let locationError = $state('');
+	let locationResult: { displayName: string; location: EventLocation } | null = $state(null);
+
 	let links: Array<{ uri: string; name: string }> = $state([]);
 	let showLinkPopup = $state(false);
 	let newLinkUri = $state('');
···
 				endsAt = draft.endsAt || '';
 				links = draft.links || [];
 				mode = draft.mode || 'inperson';
+				location = draft.location || null;
 
 				if (draft.thumbnailKey) {
 					const img = await getImage(draft.thumbnailKey);
···
 		saveDraftTimeout = setTimeout(() => {
 			const draft: EventDraft = { name, description, startsAt, endsAt, links, mode };
 			if (thumbnailKey) draft.thumbnailKey = thumbnailKey;
-			const hasContent = name || description || startsAt || endsAt || links.length > 0;
+			if (location) draft.location = location;
+			const hasContent = name || description || startsAt || endsAt || links.length > 0 || location;
 			if (hasContent) {
 				localStorage.setItem(DRAFT_KEY, JSON.stringify(draft));
 				hasDraft = true;
···
 
 	$effect(() => {
 		// track all draft fields by reading them
-		void [name, description, startsAt, endsAt, mode, JSON.stringify(links)];
+		void [
+			name,
+			description,
+			startsAt,
+			endsAt,
+			mode,
+			JSON.stringify(links),
+			JSON.stringify(location)
+		];
 		saveDraft();
 	});
 
···
 		endsAt = '';
 		links = [];
 		mode = 'inperson';
+		location = null;
 		thumbnailFile = null;
 		if (thumbnailPreview) URL.revokeObjectURL(thumbnailPreview);
 		thumbnailPreview = null;
···
 		hasDraft = false;
 	}
 
+	async function searchLocation() {
+		const q = locationSearch.trim();
+		if (!q) return;
+		locationError = '';
+		locationSearching = true;
+		locationResult = null;
+
+		try {
+			const response = await fetch('/api/geocoding?q=' + encodeURIComponent(q));
+			if (!response.ok) throw new Error('response not ok');
+			const data = await response.json();
+			if (!data || data.error) throw new Error('no results');
+
+			const addr = data.address || {};
+			const road = addr.road || '';
+			const houseNumber = addr.house_number || '';
+			const street = road ? (houseNumber ? `${road} ${houseNumber}` : road) : '';
+			const locality =
+				addr.city || addr.town || addr.village || addr.municipality || addr.hamlet || '';
+			const region = addr.state || addr.county || '';
+			const country = addr.country || '';
+
+			locationResult = {
+				displayName: data.display_name || q,
+				location: {
+					...(street && { street }),
+					...(locality && { locality }),
+					...(region && { region }),
+					...(country && { country })
+				}
+			};
+		} catch {
+			locationError = "Couldn't find that location.";
+		} finally {
+			locationSearching = false;
+		}
+	}
+
+	function confirmLocation() {
+		if (locationResult) {
+			location = locationResult.location;
+		}
+		showLocationModal = false;
+		locationSearch = '';
+		locationResult = null;
+		locationError = '';
+	}
+
+	function removeLocation() {
+		location = null;
+	}
+
+	function getLocationDisplayString(loc: EventLocation): string {
+		return [loc.street, loc.locality, loc.region, loc.country].filter(Boolean).join(', ');
+	}
+
 	function addLink() {
 		const uri = newLinkUri.trim();
 		if (!uri) return;
···
 			if (links.length > 0) {
 				record.uris = links;
 			}
+			if (location) {
+				record.locations = [
+					{
+						$type: 'community.lexicon.location.address',
+						...location
+					}
+				];
+			}
 
 			const response = await user.client.post('com.atproto.repo.createRecord', {
 				input: {
···
 	<title>Create Event</title>
 </svelte:head>
 
-<div class="bg-base-50 dark:bg-base-950 min-h-screen px-6 py-12 sm:py-12">
-	<div class="mx-auto max-w-4xl">
+<div class="min-h-screen px-6 py-12 sm:py-12">
+	<div class="mx-auto max-w-2xl">
 		{#if user.isInitializing}
 			<div class="flex items-center gap-3">
 				<div class="bg-base-300 dark:bg-base-700 size-5 animate-pulse rounded-full"></div>
···
 							</div>
 						</div>
 
+						<!-- Location row -->
+						{#if location}
+							<div class="mb-6 flex items-center gap-4">
+								<div
+									class="border-base-200 dark:border-base-700 flex size-12 shrink-0 items-center justify-center rounded-xl border"
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										class="text-base-900 dark:text-base-200 size-5"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+										/>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"
+										/>
+									</svg>
+								</div>
+								<p class="text-base-900 dark:text-base-50 flex-1 font-semibold">
+									{getLocationDisplayString(location)}
+								</p>
+								<button
+									type="button"
+									onclick={removeLocation}
+									class="text-base-400 shrink-0 hover:text-red-500"
+									aria-label="Remove location"
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+										class="size-4"
+									>
+										<path
+											d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
+										/>
+									</svg>
+								</button>
+							</div>
+						{:else}
+							<button
+								type="button"
+								onclick={() => (showLocationModal = true)}
+								class="text-base-500 dark:text-base-400 hover:text-base-700 dark:hover:text-base-200 mb-6 flex items-center gap-4 transition-colors"
+							>
+								<div
+									class="border-base-200 dark:border-base-700 flex size-12 shrink-0 items-center justify-center rounded-xl border"
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										class="size-5"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+										/>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"
+										/>
+									</svg>
+								</div>
+								<span class="text-sm">Add location</span>
+							</button>
+						{/if}
+
 						<!-- About Event -->
 						<div class="mt-8 mb-8">
 							<p
···
 		{/if}
 	</div>
 </div>
+
+<!-- Location modal -->
+<Modal bind:open={showLocationModal}>
+	<p class="text-base-900 dark:text-base-50 text-lg font-semibold">Add location</p>
+	<form
+		onsubmit={(e) => {
+			e.preventDefault();
+			searchLocation();
+		}}
+		class="mt-2"
+	>
+		<div class="flex gap-2">
+			<input
+				type="text"
+				bind:value={locationSearch}
+				placeholder="Search for a city or address..."
+				class="border-base-300 dark:border-base-700 bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100 placeholder:text-base-400 dark:placeholder:text-base-600 flex-1 rounded-lg border px-3 py-2 text-sm focus:outline-none"
+			/>
+			<Button type="submit" disabled={locationSearching || !locationSearch.trim()}>
+				{locationSearching ? 'Searching...' : 'Search'}
+			</Button>
+		</div>
+	</form>
+
+	{#if locationError}
+		<p class="mt-3 text-sm text-red-600 dark:text-red-400">{locationError}</p>
+	{/if}
+
+	{#if locationResult}
+		<div
+			class="border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-900 mt-4 overflow-hidden rounded-xl border p-4"
+		>
+			<div class="flex items-start gap-3">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					class="text-base-500 mt-0.5 size-5 shrink-0"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+					/>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"
+					/>
+				</svg>
+				<div class="min-w-0 flex-1">
+					<p class="text-base-900 dark:text-base-50 font-medium">
+						{getLocationDisplayString(locationResult.location)}
+					</p>
+					<p class="text-base-500 dark:text-base-400 mt-0.5 truncate text-xs">
+						{locationResult.displayName}
+					</p>
+				</div>
+			</div>
+			<div class="mt-4 flex justify-end">
+				<Button onclick={confirmLocation}>Use this location</Button>
+			</div>
+		</div>
+	{/if}
+
+	<p class="text-base-400 dark:text-base-500 mt-4 text-xs">
+		Geocoding by <a
+			href="https://nominatim.openstreetmap.org/"
+			class="hover:text-base-600 dark:hover:text-base-400 underline"
+			target="_blank">Nominatim</a
+		>
+		/ &copy;
+		<a
+			href="https://www.openstreetmap.org/copyright"
+			class="hover:text-base-600 dark:hover:text-base-400 underline"
+			target="_blank">OpenStreetMap contributors</a
+		>
+	</p>
+</Modal>

src/routes/api/geocoding/+server.ts

···
 	}
 
 	const nomUrl =
-		'https://nominatim.openstreetmap.org/search?format=json&q=' + encodeURIComponent(q);
+		'https://nominatim.openstreetmap.org/search?format=json&addressdetails=1&q=' +
+		encodeURIComponent(q);
 
 	try {
 		const data = await fetch(nomUrl, {