@atmo-dev/kit 0.3.0 → 0.5.0

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;