@atmo-dev/events-ui 0.1.0

package/dist/editor/LinksSection.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+	import { Button, Input, PopoverContent, PopoverRoot, PopoverTrigger } from '@foxui/core';
+	import { validateLink } from '../cal/helper.js';
+
+	type Link = { uri: string; name: string };
+
+	let { links = $bindable() }: { links: Link[] } = $props();
+
+	let showPopup = $state(false);
+	let newUri = $state('');
+	let newName = $state('');
+	let error = $state('');
+
+	function addLink() {
+		const raw = newUri.trim();
+		if (!raw) return;
+		const uri = validateLink(raw);
+		if (!uri) {
+			error = 'Please enter a valid URL';
+			return;
+		}
+		links.push({ uri, name: newName.trim() });
+		newUri = '';
+		newName = '';
+		error = '';
+		showPopup = false;
+	}
+
+	function removeLink(index: number) {
+		links.splice(index, 1);
+	}
+
+	function cancel() {
+		showPopup = false;
+		error = '';
+		newUri = '';
+		newName = '';
+	}
+</script>
+
+<div>
+	<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
+					variant="ghost"
+					size="iconSm"
+					onclick={() => removeLink(i)}
+					class="ml-auto shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+				>
+					<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="mt-3">
+		<PopoverRoot bind:open={showPopup}>
+			<PopoverTrigger>
+				<Button size="sm">
+					<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>
+			</PopoverTrigger>
+			<PopoverContent side="bottom" sideOffset={8} class="w-64 p-3">
+				<Input
+					type="url"
+					bind:value={newUri}
+					placeholder="https://..."
+					variant="secondary"
+					class="mb-2"
+					onkeydown={(e) => {
+						if (e.key === 'Enter') {
+							e.preventDefault();
+							addLink();
+						}
+					}}
+				/>
+				<Input
+					type="text"
+					bind:value={newName}
+					placeholder="Label (optional)"
+					variant="secondary"
+					class="mb-2"
+					onkeydown={(e) => {
+						if (e.key === 'Enter') {
+							e.preventDefault();
+							addLink();
+						}
+					}}
+				/>
+				{#if error}
+					<p class="mb-2 text-xs text-red-500">{error}</p>
+				{/if}
+				<div class="flex justify-end gap-2">
+					<Button variant="ghost" size="sm" onclick={cancel}>Cancel</Button>
+					<Button onclick={addLink} size="sm" disabled={!newUri.trim()}>Add</Button>
+				</div>
+			</PopoverContent>
+		</PopoverRoot>
+	</div>
+</div>

package/dist/editor/LinksSection.svelte.d.ts

@@ -0,0 +1,10 @@
+type Link = {
+    uri: string;
+    name: string;
+};
+type $$ComponentProps = {
+    links: Link[];
+};
+declare const LinksSection: import("svelte").Component<$$ComponentProps, {}, "links">;
+type LinksSection = ReturnType<typeof LinksSection>;
+export default LinksSection;

package/dist/editor/LocationSection.svelte

@@ -0,0 +1,215 @@
+<script lang="ts">
+	import { Button, Input, Modal } from '@foxui/core';
+	import { getLocationDisplayString, type EventLocation } from './types';
+
+	let {
+		location = $bindable(),
+		locationChanged = $bindable()
+	}: {
+		location: EventLocation | null;
+		locationChanged: boolean;
+	} = $props();
+
+	let showModal = $state(false);
+	let searchText = $state('');
+	let searching = $state(false);
+	let error = $state('');
+	let result: { displayName: string; location: EventLocation } | null = $state(null);
+
+	async function search() {
+		const q = searchText.trim();
+		if (!q) return;
+		error = '';
+		searching = true;
+		result = null;
+
+		try {
+			const response = await fetch('/api/geocoding?q=' + encodeURIComponent(q));
+			if (!response.ok) throw new Error('response not ok');
+			const data: Record<string, unknown> = await response.json();
+			if (!data || data.error) throw new Error('no results');
+
+			const addr = (data.address || {}) as Record<string, string>;
+			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 || '';
+
+			result = {
+				displayName: (data.display_name as string) || q,
+				location: {
+					...(street && { street }),
+					...(locality && { locality }),
+					...(region && { region }),
+					...(country && { country })
+				}
+			};
+		} catch {
+			error = "Couldn't find that location.";
+		} finally {
+			searching = false;
+		}
+	}
+
+	function confirm() {
+		if (result) {
+			location = result.location;
+			locationChanged = true;
+		}
+		showModal = false;
+		searchText = '';
+		result = null;
+		error = '';
+	}
+
+	function remove() {
+		location = null;
+		locationChanged = true;
+	}
+</script>
+
+{#if location}
+	<div class="mb-6 flex items-center gap-4">
+		<div
+			class="border-base-200 dark:border-base-700 bg-base-100 dark:bg-base-950/30 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 variant="ghost" size="iconSm" onclick={remove} class="shrink-0">
+			<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>
+{:else}
+	<div class="mb-6">
+		<Button variant="secondary" onclick={() => (showModal = true)}>
+			<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="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>
+			Add location
+		</Button>
+	</div>
+{/if}
+
+<Modal bind:open={showModal}>
+	<p class="text-base-900 dark:text-base-50 text-lg font-semibold">Add location</p>
+	<form
+		onsubmit={(e) => {
+			e.preventDefault();
+			search();
+		}}
+		class="mt-2"
+	>
+		<div class="flex gap-2">
+			<Input type="text" class="flex-1" bind:value={searchText} />
+			<Button type="submit" disabled={searching || !searchText.trim()}>
+				{searching ? 'Searching...' : 'Search'}
+			</Button>
+		</div>
+	</form>
+
+	{#if error}
+		<p class="mt-3 text-sm text-red-600 dark:text-red-400">{error}</p>
+	{/if}
+
+	{#if result}
+		<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(result.location)}
+					</p>
+					<p class="text-base-500 dark:text-base-400 mt-0.5 truncate text-xs">
+						{result.displayName}
+					</p>
+				</div>
+			</div>
+			<div class="mt-4 flex justify-end">
+				<Button onclick={confirm}>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>

package/dist/editor/LocationSection.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type EventLocation } from './types';
+type $$ComponentProps = {
+    location: EventLocation | null;
+    locationChanged: boolean;
+};
+declare const LocationSection: import("svelte").Component<$$ComponentProps, {}, "location" | "locationChanged">;
+type LocationSection = ReturnType<typeof LocationSection>;
+export default LocationSection;

package/dist/editor/RecurringModal.svelte

@@ -0,0 +1,270 @@
+<script lang="ts">
+	import { Button, Checkbox, Input, Modal, ToggleGroup, ToggleGroupItem } from '@foxui/core';
+	import { parseDateTime } from '@internationalized/date';
+	import * as TID from '@atcute/tid';
+	import type { FlatEventRecord } from '../contrail.js';
+	import type { EventLocation, EventMode } from './types';
+	import { buildThumbnailMedia, renderPresetThumbnail } from './save';
+	import { hashSeed } from '../thumbnails/designs.js';
+	import type { EditorAdapter, EditorViewer } from './adapter';
+
+	let {
+		open = $bindable(),
+		rkey,
+		eventData,
+		isNew,
+		name,
+		startsAt,
+		endsAt,
+		mode,
+		timezone,
+		description,
+		links,
+		location,
+		thumbnailDateStr,
+		thumbnailFile,
+		thumbnailChanged,
+		selectedPreset,
+		accent,
+		adapter,
+		viewer
+	}: {
+		open: boolean;
+		rkey: string;
+		eventData: FlatEventRecord | null;
+		isNew: boolean;
+		name: string;
+		startsAt: string;
+		endsAt: string;
+		mode: EventMode;
+		timezone: string;
+		description: string;
+		links: Array<{ uri: string; name: string }>;
+		location: EventLocation | null;
+		thumbnailDateStr: string;
+		thumbnailFile: File | null;
+		thumbnailChanged: boolean;
+		selectedPreset: string | null;
+		accent: string;
+		adapter: EditorAdapter;
+		viewer: EditorViewer;
+	} = $props();
+
+	let interval = $state(1);
+	let unit: 'days' | 'weeks' | 'months' | 'years' = $state('weeks');
+	let count = $state(4);
+	let numberInTitle = $state(false);
+	let creating = $state(false);
+	let errorMsg: string | null = $state(null);
+	let created = $state(0);
+
+	let titleNumberMatch = $derived(name.match(/#?(\d+)\s*$/));
+	let detectedStartNumber = $derived(titleNumberMatch ? parseInt(titleNumberMatch[1]) : null);
+
+	$effect(() => {
+		if (detectedStartNumber !== null) numberInTitle = true;
+	});
+
+	async function handleCreate() {
+		if (!name.trim() || !startsAt || !viewer.isLoggedIn || !viewer.did) return;
+
+		creating = true;
+		errorMsg = null;
+		created = 0;
+
+		try {
+			// Recurring instances advance by wall-clock duration (e.g. "every week
+			// at 10am"), so operate on CalendarDateTime — not absolute instants —
+			// to preserve the wall time across DST transitions.
+			const baseStart = parseDateTime(startsAt);
+			const baseEnd = endsAt ? parseDateTime(endsAt) : null;
+			const durationMs = baseEnd
+				? baseEnd.toDate(timezone).getTime() - baseStart.toDate(timezone).getTime()
+				: 0;
+			const baseName =
+				numberInTitle && titleNumberMatch
+					? name.replace(/#?\d+\s*$/, '').trimEnd()
+					: name.trim();
+			const startNum = detectedStartNumber ?? 1;
+			const hasHash = titleNumberMatch ? titleNumberMatch[0].includes('#') : false;
+
+			// Generate thumbnail from preset if selected and no custom upload.
+			let fileForUpload = thumbnailFile;
+			let hasNewThumbnail = thumbnailChanged;
+			if (selectedPreset && !fileForUpload) {
+				const rendered = await renderPresetThumbnail({
+					design: selectedPreset,
+					seed: hashSeed(rkey),
+					name,
+					dateStr: thumbnailDateStr,
+					accent
+				});
+				if (rendered) {
+					fileForUpload = rendered;
+					hasNewThumbnail = true;
+				}
+			}
+
+			const existingMedia = (eventData?.media ?? []) as Array<Record<string, unknown>>;
+			const media = await buildThumbnailMedia({
+				isNew,
+				thumbnailChanged: hasNewThumbnail,
+				thumbnailFile: fileForUpload,
+				existingMedia,
+				uploadBlob: (blob) =>
+					adapter.uploadBlob(blob) as unknown as Promise<Record<string, unknown>>
+			});
+
+			const parentUri = `at://${viewer.did}/community.lexicon.calendar.event/${rkey}`;
+
+			for (let i = 0; i < count; i++) {
+				const offset = i + 1;
+				const step = offset * interval;
+				const eventStart =
+					unit === 'days'
+						? baseStart.add({ days: step })
+						: unit === 'weeks'
+							? baseStart.add({ weeks: step })
+							: unit === 'months'
+								? baseStart.add({ months: step })
+								: baseStart.add({ years: step });
+
+				const eventStartIso = eventStart.toDate(timezone).toISOString();
+				// Preserve the original absolute duration (handles events that
+				// span midnight or odd wall-clock lengths correctly).
+				const eventEndIso = durationMs
+					? new Date(eventStart.toDate(timezone).getTime() + durationMs).toISOString()
+					: null;
+
+				let eventName = baseName;
+				if (numberInTitle) {
+					const num = startNum + (i + 1);
+					eventName = hasHash ? `${baseName} #${num}` : `${baseName} ${num}`;
+				}
+
+				const newRkey = TID.now();
+				const record: Record<string, unknown> = {
+					$type: 'community.lexicon.calendar.event',
+					createdWith: 'https://atmo.rsvp',
+					name: eventName,
+					mode: `community.lexicon.calendar.event#${mode}`,
+					status: 'community.lexicon.calendar.event#scheduled',
+					startsAt: eventStartIso,
+					timezone,
+					createdAt: new Date().toISOString(),
+					recurringEventOf: parentUri
+				};
+
+				const trimmedDescription = description.trim();
+				if (trimmedDescription) record.description = trimmedDescription;
+				if (eventEndIso) record.endsAt = eventEndIso;
+				if (media) record.media = media;
+				if (links.length > 0) record.uris = links;
+				if (location) {
+					record.locations = [
+						{
+							$type: 'community.lexicon.location.address',
+							...location
+						}
+					];
+				}
+
+				try {
+					const result = await adapter.putRecord({
+						collection: 'community.lexicon.calendar.event',
+						rkey: newRkey,
+						record
+					});
+					await adapter.notifyUpdate?.(result.uri);
+					created = i + 1;
+				} catch {
+					errorMsg = `Failed to create event ${i + 1}. Stopping.`;
+					return;
+				}
+			}
+
+			open = false;
+		} catch (e) {
+			console.error('Failed to create recurring events:', e);
+			errorMsg = 'Failed to create recurring events. Please try again.';
+		} finally {
+			creating = false;
+		}
+	}
+</script>
+
+<Modal bind:open>
+	<p class="text-base-900 dark:text-base-50 text-lg font-semibold">Add recurring events</p>
+	<p class="text-base-500 dark:text-base-400 mt-1 text-sm">
+		Create multiple copies of this event at regular intervals.
+	</p>
+
+	<div class="mt-4 space-y-4">
+		<div>
+			<!-- svelte-ignore a11y_label_has_associated_control -->
+			<label class="text-base-700 dark:text-base-300 mb-1 block text-sm font-medium">
+				Number of events to create
+			</label>
+			<Input type="number" bind:value={count} min={1} max={52} class="w-24" />
+		</div>
+
+		<div>
+			<!-- svelte-ignore a11y_label_has_associated_control -->
+			<label class="text-base-700 dark:text-base-300 mb-1 block text-sm font-medium">
+				Repeat every
+			</label>
+			<div class="flex items-center gap-2">
+				<Input type="number" bind:value={interval} min={1} max={99} class="w-20" />
+				<ToggleGroup type="single" bind:value={unit}>
+					<ToggleGroupItem value="days">days</ToggleGroupItem>
+					<ToggleGroupItem value="weeks">weeks</ToggleGroupItem>
+					<ToggleGroupItem value="months">months</ToggleGroupItem>
+					<ToggleGroupItem value="years">years</ToggleGroupItem>
+				</ToggleGroup>
+			</div>
+		</div>
+
+		<div>
+			<div class="flex items-center gap-2">
+				<Checkbox bind:checked={numberInTitle} sizeVariant="sm" />
+				<span class="text-base-700 dark:text-base-300 text-sm font-medium">Number in title</span>
+			</div>
+			<p class="text-base-500 dark:text-base-400 mt-1 text-xs">
+				{#if numberInTitle && detectedStartNumber !== null}
+					Titles will count up from #{detectedStartNumber + 1}
+				{:else if numberInTitle}
+					A number will be appended to each title
+				{:else}
+					Append a number to each event title
+				{/if}
+			</p>
+		</div>
+	</div>
+
+	{#if errorMsg}
+		<p class="mt-4 text-sm text-red-600 dark:text-red-400">{errorMsg}</p>
+	{/if}
+
+	{#if creating && created > 0}
+		<p class="text-base-500 dark:text-base-400 mt-4 text-sm">
+			Created {created} of {count} events...
+		</p>
+	{/if}
+
+	{#if created > 0 && !creating}
+		<p class="mt-4 text-sm text-green-600 dark:text-green-400">
+			Successfully created {created} recurring events!
+		</p>
+	{/if}
+
+	<div class="mt-4 flex justify-end gap-2">
+		<Button variant="secondary" onclick={() => (open = false)} disabled={creating}>
+			{created > 0 && !creating ? 'Close' : 'Cancel'}
+		</Button>
+		{#if !created || creating}
+			<Button onclick={handleCreate} disabled={creating || count < 1}>
+				{creating ? `Creating...` : `Create ${count} event${count === 1 ? '' : 's'}`}
+			</Button>
+		{/if}
+	</div>
+</Modal>

package/dist/editor/RecurringModal.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { FlatEventRecord } from '../contrail.js';
+import type { EventLocation, EventMode } from './types';
+import type { EditorAdapter, EditorViewer } from './adapter';
+type $$ComponentProps = {
+    open: boolean;
+    rkey: string;
+    eventData: FlatEventRecord | null;
+    isNew: boolean;
+    name: string;
+    startsAt: string;
+    endsAt: string;
+    mode: EventMode;
+    timezone: string;
+    description: string;
+    links: Array<{
+        uri: string;
+        name: string;
+    }>;
+    location: EventLocation | null;
+    thumbnailDateStr: string;
+    thumbnailFile: File | null;
+    thumbnailChanged: boolean;
+    selectedPreset: string | null;
+    accent: string;
+    adapter: EditorAdapter;
+    viewer: EditorViewer;
+};
+declare const RecurringModal: import("svelte").Component<$$ComponentProps, {}, "open">;
+type RecurringModal = ReturnType<typeof RecurringModal>;
+export default RecurringModal;