@atmo-dev/kit 0.4.0 → 0.6.0

package/dist/events/EventAttendees.svelte

@@ -0,0 +1,199 @@
+<script lang="ts" module>
+	export interface AttendeeCounts {
+		goingCount: number;
+		interestedCount: number;
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { AttendeeInfo } from './contrail.js';
+	import { Avatar } from '../index.js';
+	import { scale } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+	import { Modal } from '../index.js';
+
+	let {
+		going = [],
+		interested = [],
+		goingCount: initialGoingCount = going.length,
+		interestedCount: initialInterestedCount = interested.length,
+		footer
+	}: {
+		going?: AttendeeInfo[];
+		interested?: AttendeeInfo[];
+		goingCount?: number;
+		interestedCount?: number;
+		footer?: Snippet<[AttendeeCounts]>;
+	} = $props();
+
+	let goingCountOverride: number | null = $state(null);
+	let interestedCountOverride: number | null = $state(null);
+	let goingAttendeesOverride: AttendeeInfo[] | null = $state(null);
+	let interestedAttendeesOverride: AttendeeInfo[] | null = $state(null);
+
+	let modalOpen = $state(false);
+	let modalGroup: 'going' | 'interested' = $state('going');
+
+	const MAX_AVATARS = 18;
+
+	let goingCount = $derived(goingCountOverride ?? initialGoingCount);
+	let interestedCount = $derived(interestedCountOverride ?? initialInterestedCount);
+	let goingAttendees = $derived(goingAttendeesOverride ?? going);
+	let interestedAttendees = $derived(interestedAttendeesOverride ?? interested);
+
+	let totalCount = $derived(goingCount + interestedCount);
+
+	let goingDisplay = $derived(goingAttendees.slice(0, MAX_AVATARS));
+	let goingOverflow = $derived(goingCount - goingDisplay.length);
+
+	let interestedDisplay = $derived(interestedAttendees.slice(0, MAX_AVATARS));
+	let interestedOverflow = $derived(interestedCount - interestedDisplay.length);
+
+	let modalAttendees = $derived(modalGroup === 'going' ? goingAttendees : interestedAttendees);
+	let modalTitle = $derived(modalGroup === 'going' ? 'Going' : 'Interested');
+
+	function openModal(group: 'going' | 'interested') {
+		modalGroup = group;
+		modalOpen = true;
+	}
+
+	export function addAttendee(attendee: AttendeeInfo) {
+		const wasGoing = goingAttendees.some((a) => a.did === attendee.did);
+		const wasInterested = interestedAttendees.some((a) => a.did === attendee.did);
+		const nextGoing = goingAttendees.filter((a) => a.did !== attendee.did);
+		const nextInterested = interestedAttendees.filter((a) => a.did !== attendee.did);
+
+		// Remove from both lists first (in case of status change)
+		if (attendee.status === 'going') {
+			goingAttendeesOverride = [attendee, ...nextGoing];
+			interestedAttendeesOverride = nextInterested;
+			goingCountOverride = goingCount + (wasGoing ? 0 : 1);
+			interestedCountOverride = interestedCount - (wasInterested ? 1 : 0);
+		} else if (attendee.status === 'interested') {
+			goingAttendeesOverride = nextGoing;
+			interestedAttendeesOverride = [attendee, ...nextInterested];
+			goingCountOverride = goingCount - (wasGoing ? 1 : 0);
+			interestedCountOverride = interestedCount + (wasInterested ? 0 : 1);
+		}
+	}
+
+	function thumbnail(url: string | undefined) {
+		return url?.replace('/avatar/', '/avatar_thumbnail/');
+	}
+
+	export function removeAttendee(did: string) {
+		const wasGoing = goingAttendees.some((a) => a.did === did);
+		const wasInterested = interestedAttendees.some((a) => a.did === did);
+		goingAttendeesOverride = goingAttendees.filter((a) => a.did !== did);
+		interestedAttendeesOverride = interestedAttendees.filter((a) => a.did !== did);
+		if (wasGoing) goingCountOverride = goingCount - 1;
+		if (wasInterested) interestedCountOverride = interestedCount - 1;
+	}
+</script>
+
+{#if totalCount > 0}
+	<div class="mb-2">
+		{#if goingCount > 0}
+			<button
+				type="button"
+				class="-mx-2 block w-full cursor-pointer rounded-xl px-2 py-2 text-left transition-colors hover:bg-base-100 dark:hover:bg-base-800/50"
+				onclick={() => openModal('going')}
+			>
+				<p class="mb-2 text-sm text-base-900 dark:text-base-50">
+					<span class="font-bold">{goingCount}</span>
+					<span class="text-xs font-semibold tracking-wider text-muted uppercase">Going</span>
+				</p>
+				<div class="flex items-center">
+					<div class="flex flex-wrap -space-y-2 -space-x-4 pr-4">
+						{#each goingDisplay as person (person.did)}
+							<div
+								animate:flip={{ duration: 300 }}
+								in:scale={{ duration: 300, start: 0.5 }}
+								out:scale={{ duration: 200, start: 0.5 }}
+							>
+								<Avatar
+									src={thumbnail(person.avatar)}
+									name={person.name}
+									class="size-12 border-2"
+								/>
+							</div>
+						{/each}
+						{#if goingOverflow > 0}
+							<span
+								class="z-10 inline-flex size-12 items-center justify-center rounded-full border-2 border-base-100 bg-base-200 text-sm font-semibold text-base-950 dark:border-base-800 dark:bg-base-800 dark:text-base-100"
+							>
+								+{goingOverflow}
+							</span>
+						{/if}
+					</div>
+				</div>
+			</button>
+		{/if}
+
+		{#if interestedCount > 0}
+			<button
+				type="button"
+				class="-mx-2 mt-4 block w-full cursor-pointer rounded-xl px-2 py-2 text-left transition-colors hover:bg-base-100 dark:hover:bg-base-800/50"
+				onclick={() => openModal('interested')}
+			>
+				<p class="mb-2 text-sm text-base-900 dark:text-base-50">
+					<span class="font-bold">{interestedCount}</span>
+					<span class="text-xs font-semibold tracking-wider text-muted uppercase">Interested</span>
+				</p>
+				<div class="flex items-center">
+					<div class="flex flex-wrap -space-y-2 -space-x-4 pr-4">
+						{#each interestedDisplay as person (person.did)}
+							<div
+								animate:flip={{ duration: 300 }}
+								in:scale={{ duration: 300, start: 0.5 }}
+								out:scale={{ duration: 200, start: 0.5 }}
+							>
+								<Avatar
+									src={thumbnail(person.avatar)}
+									name={person.name}
+									class="size-12 border-2"
+								/>
+							</div>
+						{/each}
+						{#if interestedOverflow > 0}
+							<span
+								class="z-10 inline-flex size-12 items-center justify-center rounded-full border-2 border-base-100 bg-base-200 text-sm font-semibold text-base-950 dark:border-base-800 dark:bg-base-800 dark:text-base-100"
+							>
+								+{interestedOverflow}
+							</span>
+						{/if}
+					</div>
+				</div>
+			</button>
+		{/if}
+		{@render footer?.({ goingCount, interestedCount })}
+	</div>
+{/if}
+
+<Modal bind:open={modalOpen} title={`${modalTitle} (${modalAttendees.length})`}>
+	<div
+		class="mx-4 mb-4 max-h-80 space-y-1 overflow-y-auto rounded-xl bg-base-200/30 p-2 dark:bg-base-900/50"
+	>
+		{#each modalAttendees as person (person.did)}
+			<a
+				href={person.url}
+				target={person.url?.startsWith('/') ? undefined : '_blank'}
+				rel={person.url?.startsWith('/') ? undefined : 'noopener noreferrer'}
+				class="flex items-center gap-3 rounded-xl px-2 py-2 transition-colors hover:bg-base-200 dark:hover:bg-base-900"
+			>
+				<Avatar src={thumbnail(person.avatar)} name={person.name} class="size-10 shrink-0" />
+				<div class="min-w-0">
+					<p class="truncate text-sm font-medium text-base-900 dark:text-base-50">
+						{person.name}
+					</p>
+					{#if person.handle}
+						<p class="truncate text-xs text-muted">
+							@{person.handle}
+						</p>
+					{/if}
+				</div>
+			</a>
+		{/each}
+	</div>
+</Modal>

package/dist/events/EventAttendees.svelte.d.ts

@@ -0,0 +1,19 @@
+export interface AttendeeCounts {
+    goingCount: number;
+    interestedCount: number;
+}
+import type { Snippet } from 'svelte';
+import type { AttendeeInfo } from './contrail.js';
+type $$ComponentProps = {
+    going?: AttendeeInfo[];
+    interested?: AttendeeInfo[];
+    goingCount?: number;
+    interestedCount?: number;
+    footer?: Snippet<[AttendeeCounts]>;
+};
+declare const EventAttendees: import("svelte").Component<$$ComponentProps, {
+    addAttendee: (attendee: AttendeeInfo) => void;
+    removeAttendee: (did: string) => void;
+}, "">;
+type EventAttendees = ReturnType<typeof EventAttendees>;
+export default EventAttendees;

package/dist/events/EventCard.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+	import { getCDNImageBlobUrl } from './atproto-helpers.js';
+	import { getEventThumbnail } from './event-media.js';
+	import { eventUrl, isEventOngoing, type FlatEventRecord } from './contrail.js';
+	import Avatar from 'svelte-boring-avatars';
+	import { Badge, Icon } from '../index.js';
+	import { CalendarDays, MapPin } from '@sketchyicons/svelte';
+	import { getLocations, getLocationSummary } from './event-view/locations.js';
+
+	let {
+		event,
+		actor
+	}: {
+		event: FlatEventRecord;
+		actor?: string;
+	} = $props();
+
+	function formatDateTime(dateStr: string): string {
+		return new Date(dateStr).toLocaleDateString('en-US', {
+			weekday: 'short',
+			month: 'short',
+			day: 'numeric',
+			hour: 'numeric',
+			minute: '2-digit'
+		});
+	}
+
+	/**
+	 * What a card says about an event ALREADY UNDER WAY: when it finishes, not when
+	 * it began. A "Live" badge beside "Wed, Jul 1" reads as a bug, and in a list
+	 * sorted by finishing time the start dates look shuffled. Day and weekday are
+	 * dropped when it ends today, since the only thing a reader wants then is how
+	 * long they have left.
+	 */
+	function formatEndsAt(endsAt: string): string {
+		const end = new Date(endsAt);
+		const now = new Date();
+		const endsToday = end.toDateString() === now.toDateString();
+		// Carry the YEAR when it is not this one. Long-running events are exactly
+		// what this band surfaces — a year-long journey ending 2027-07-04 rendered
+		// as "Ends Sun, Jul 4", which reads as a date three days ago.
+		const endsThisYear = end.getFullYear() === now.getFullYear();
+		return end.toLocaleTimeString('en-US', {
+			...(endsToday
+				? {}
+				: {
+						weekday: 'short',
+						month: 'short',
+						day: 'numeric',
+						...(endsThisYear ? {} : { year: 'numeric' })
+					}),
+			hour: 'numeric',
+			minute: '2-digit'
+		});
+	}
+
+	function getModeLabel(mode: string | undefined): string | undefined {
+		if (!mode) return undefined;
+		if (mode.includes('virtual')) return 'Virtual';
+		if (mode.includes('hybrid')) return 'Hybrid';
+		if (mode.includes('inperson')) return 'In-Person';
+		return 'Event';
+	}
+
+	function getThumbnail(event: FlatEventRecord): { url: string; alt: string } | null {
+		const media = getEventThumbnail(event.media);
+		if (media?.content) {
+			const url = getCDNImageBlobUrl({ did: event.did, blob: media.content });
+			if (url) return { url, alt: media.alt || event.name };
+		}
+
+		const banner = event.media?.find((m) => m.role === 'header');
+		if (banner?.content) {
+			const url = getCDNImageBlobUrl({ did: event.did, blob: banner.content });
+			if (url) return { url, alt: banner.alt || event.name };
+		}
+
+		return null;
+	}
+
+	let thumbnail = $derived(getThumbnail(event));
+	let location = $derived(getLocationSummary(getLocations(event.locations)));
+	let mode = $derived(getModeLabel(event.mode));
+	let isOngoing = $derived(isEventOngoing(event.startsAt, event.endsAt));
+</script>
+
+<a
+	href={eventUrl(event, actor)}
+	class="group grid grid-cols-[5rem_minmax(0,1fr)] gap-3 rounded-ui outline-offset-4 transition-colors focus-visible:outline-2 focus-visible:outline-focus sm:grid-cols-[6rem_minmax(0,1fr)] sm:gap-3.5"
+>
+	<div class="w-full">
+		{#if thumbnail}
+			<img
+				src={thumbnail.url}
+				alt={thumbnail.alt}
+				loading="lazy"
+				class="block aspect-square w-full rounded-[14px_12px_15px_13px] border border-line object-cover"
+			/>
+		{:else}
+			<div
+				class="aspect-square w-full overflow-hidden rounded-[14px_12px_15px_13px] border border-line [&>svg]:h-full [&>svg]:w-full"
+			>
+				<Avatar
+					size={96}
+					name={event.rkey}
+					variant="marble"
+					colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']}
+					square
+				/>
+			</div>
+		{/if}
+	</div>
+
+	<div class="min-w-0 self-center">
+		<p class="flex items-center gap-1.5 text-xs font-medium text-muted">
+			<Icon img={CalendarDays} size={14} class="shrink-0" />
+			{#if isOngoing && event.endsAt}
+				Ends {formatEndsAt(event.endsAt)}
+			{:else}
+				{formatDateTime(event.startsAt)}
+			{/if}
+			{#if isOngoing}
+				<Badge class="gap-1 px-1.5 py-0 text-[10px]">
+					<span class="size-1.5 animate-pulse rounded-full bg-accent-500"></span>
+					Live
+				</Badge>
+			{/if}
+		</p>
+		<h3
+			class="mt-0.5 flex items-start gap-1.5 text-sm leading-snug font-semibold text-base-900 transition-colors group-hover:text-base-700 sm:text-base dark:text-base-50 dark:group-hover:text-base-200"
+		>
+			<span class="line-clamp-2">{event.name}</span>
+		</h3>
+		{#if location || mode}
+			<p class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted">
+				{#if location}
+					<span class="inline-flex max-w-full min-w-0 items-center gap-1.5" title={location}>
+						<Icon img={MapPin} size={14} class="shrink-0" />
+						<span class="truncate">{location}</span>
+					</span>
+				{/if}
+				{#if mode}
+					<Badge variant="outline" class="shrink-0 px-1.5 py-0 text-[10px]">{mode}</Badge>
+				{/if}
+			</p>
+		{/if}
+	</div>
+</a>

package/dist/events/EventCard.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type FlatEventRecord } from './contrail.js';
+type $$ComponentProps = {
+    event: FlatEventRecord;
+    actor?: string;
+};
+declare const EventCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type EventCard = ReturnType<typeof EventCard>;
+export default EventCard;

package/dist/events/EventComments.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { NestedComments, blueskyPostToPostData, type PostData } from '../index.js';
+
+	import { socialClientInfo, socialPostUrl, type PreferredSocialClient } from '../social.js';
+
+	let {
+		postUri,
+		socialClient
+	}: {
+		postUri: string;
+		socialClient?: PreferredSocialClient | null;
+	} = $props();
+
+	let comments = $state<PostData[]>([]);
+	let loading = $state(true);
+	let errorMessage = $state<string | null>(null);
+
+	function threadToComments(replies: unknown[]): PostData[] {
+		return (replies as Array<{ $type?: string; post?: unknown; replies?: unknown[] }>)
+			.filter((r) => r.$type === 'app.bsky.feed.defs#threadViewPost' && r.post)
+			.map((r) => {
+				const postData = blueskyPostToPostData(
+					r.post as Parameters<typeof blueskyPostToPostData>[0]
+				);
+				if (r.replies?.length) {
+					postData.replies = threadToComments(r.replies);
+				}
+				return postData;
+			});
+	}
+
+	async function loadThread(uri: string, signal: AbortSignal) {
+		loading = true;
+		errorMessage = null;
+		try {
+			const res = await fetch(
+				`https://public.api.bsky.app/xrpc/app.bsky.feed.getPostThread?uri=${encodeURIComponent(uri)}&depth=6`,
+				{ signal }
+			);
+			if (!res.ok) throw new Error(`Failed to load thread (${res.status})`);
+			const data = (await res.json()) as { thread?: { replies?: unknown[] } };
+			const thread = data.thread;
+			if (!signal.aborted)
+				comments = thread?.replies?.length ? threadToComments(thread.replies) : [];
+		} catch (err) {
+			if (signal.aborted) return;
+			console.error('EventComments: load failed', err);
+			errorMessage = err instanceof Error ? err.message : 'Failed to load comments';
+			comments = [];
+		} finally {
+			if (!signal.aborted) loading = false;
+		}
+	}
+
+	// Only a new thread URI should refetch; changing the viewer's client just changes links.
+	let threadUri = $derived(postUri);
+	$effect(() => {
+		const controller = new AbortController();
+		if (threadUri) loadThread(threadUri, controller.signal);
+		return () => controller.abort();
+	});
+
+	let replyUrl = $derived(socialPostUrl(postUri, socialClient));
+	let clientLabel = $derived(socialClientInfo(socialClient).label);
+</script>
+
+<div>
+	{#if replyUrl}
+		<div class="mb-4 text-sm">
+			<a
+				href={replyUrl}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="font-medium text-accent-600 hover:text-accent-700 dark:text-accent-400 dark:hover:text-accent-300"
+			>
+				Add a comment on {clientLabel} &rarr;
+			</a>
+		</div>
+	{/if}
+
+	{#if loading}
+		<p class="text-sm text-muted">Loading comments…</p>
+	{:else if errorMessage}
+		<p class="text-sm text-muted">{errorMessage}</p>
+	{:else if comments.length === 0}
+		<p class="text-sm text-muted">No comments yet.</p>
+	{:else}
+		<div class="not-prose comments-no-divider">
+			<NestedComments {comments} {socialClient} />
+		</div>
+	{/if}
+</div>
+
+<style>
+	.comments-no-divider :global(> div) {
+		border-top-width: 0;
+	}
+</style>

package/dist/events/EventComments.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type PreferredSocialClient } from '../social.js';
+type $$ComponentProps = {
+    postUri: string;
+    socialClient?: PreferredSocialClient | null;
+};
+declare const EventComments: import("svelte").Component<$$ComponentProps, {}, "">;
+type EventComments = ReturnType<typeof EventComments>;
+export default EventComments;