Merge branch 'main' of github.com:flo-bit/blento into feat/links-qrcode

CLAUDE.md

···
 **Card System (`src/lib/cards/`):**
 
 - `CardDefinition` type in `types.ts` defines the interface for card types
-- Each card type exports a definition with: `type`, `contentComponent`, optional `editingContentComponent`, `creationModalComponent`, `sidebarComponent`, `loadData`, `upload` (see more info and description in `src/lib/cards/types.ts`)
+- Each card type exports a definition with: `type`, `contentComponent`, optional `editingContentComponent`, `creationModalComponent`, `sidebarButtonText`, `loadData`, `upload` (see more info and description in `src/lib/cards/types.ts`)
 - Card types include Text, Link, Image, Bluesky, Embed, Map, Livestream, ATProto collections, and special cards (see `src/lib/cards`).
 - `AllCardDefinitions` and `CardDefinitionsByType` in `index.ts` aggregate all card types
 - See e.g. `src/lib/cards/EmbedCard/` and `src/lib/cards/LivestreamCard/` for examples of implementation.

src/lib/cards/ATProtoCollectionsCard/SidebarItemATProtoCollectionsCard.svelte

···
-<script lang="ts">
-	import { Button } from '@foxui/core';
-
-	let { onclick }: { onclick: () => void } = $props();
-</script>
-
-<Button {onclick} variant="ghost" class="w-full justify-start">
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		fill="currentColor"
-		class="text-accent-600 dark:text-accent-400"
-	>
-		<path
-			d="M21 6.375c0 2.692-4.03 4.875-9 4.875S3 9.067 3 6.375 7.03 1.5 12 1.5s9 2.183 9 4.875Z"
-		/>
-		<path
-			d="M12 12.75c2.685 0 5.19-.586 7.078-1.609a8.283 8.283 0 0 0 1.897-1.384c.016.121.025.244.025.368C21 12.817 16.97 15 12 15s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.285 8.285 0 0 0 1.897 1.384C6.809 12.164 9.315 12.75 12 12.75Z"
-		/>
-		<path
-			d="M12 16.5c2.685 0 5.19-.586 7.078-1.609a8.282 8.282 0 0 0 1.897-1.384c.016.121.025.244.025.368 0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.284 8.284 0 0 0 1.897 1.384C6.809 15.914 9.315 16.5 12 16.5Z"
-		/>
-		<path
-			d="M12 20.25c2.685 0 5.19-.586 7.078-1.609a8.282 8.282 0 0 0 1.897-1.384c.016.121.025.244.025.368 0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.284 8.284 0 0 0 1.897 1.384C6.809 19.664 9.315 20.25 12 20.25Z"
-		/>
-	</svg>
-
-	AT Proto Collections
-</Button>

src/lib/cards/ATProtoCollectionsCard/index.ts

···
 import { describeRepo } from '$lib/atproto';
 import type { CardDefinition } from '../types';
 import ATProtoCollectionsCard from './ATProtoCollectionsCard.svelte';
-import SidebarItemATProtoCollectionsCard from './SidebarItemATProtoCollectionsCard.svelte';
 
 export const ATProtoCollectionsCardDefinition = {
 	type: 'atprotocollections',
···
 		item.w = 4;
 		item.mobileW = 8;
 	},
-	sidebarComponent: SidebarItemATProtoCollectionsCard
+	sidebarButtonText: 'Atmosphere Collections'
 } as CardDefinition & { type: 'atprotocollections' };

src/lib/cards/BlueskyMediaCard/SidebarItemBlueskyMediaCard.svelte

···
-<script lang="ts">
-	import { Button } from '@foxui/core';
-
-	let { onclick }: { onclick: () => void } = $props();
-</script>
-
-<Button {onclick} variant="ghost" class="w-full justify-start">
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		class="text-accent-600 dark:text-accent-400"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		><path d="m22 11-1.296-1.296a2.4 2.4 0 0 0-3.408 0L11 16" /><path
-			d="M4 8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2"
-		/><circle cx="13" cy="7" r="1" fill="currentColor" /><rect
-			x="8"
-			y="2"
-			width="14"
-			height="14"
-			rx="2"
-		/></svg
-	>
-
-	Bluesky media
-</Button>

src/lib/cards/BlueskyMediaCard/index.ts

···
 import type { CardDefinition } from '../types';
 import BlueskyMediaCard from './BlueskyMediaCard.svelte';
 import CreateBlueskyMediaCardModal from './CreateBlueskyMediaCardModal.svelte';
-import SidebarItemBlueskyMediaCard from './SidebarItemBlueskyMediaCard.svelte';
 
 export const BlueskyMediaCardDefinition = {
 	type: 'blueskyMedia',
···
 	createNew: () => {},
 	creationModalComponent: CreateBlueskyMediaCardModal,
 	sidebarButtonText: 'Bluesky Media',
-	sidebarComponent: SidebarItemBlueskyMediaCard,
 	canHaveLabel: true
 } as CardDefinition & { type: 'blueskyMedia' };

src/lib/cards/BlueskyPostCard/index.ts

···
 		card.h = 4;
 		card.mobileH = 8;
 	},
-	sidebarComponent: SidebarItemBlueskyPostCard,
+	sidebarButtonText: 'Latest Bluesky Post',
 	loadData: async (items, { did }) => {
 		const authorFeed = await getAuthorFeed({ did, filter: 'posts_no_replies', limit: 2 });
 

src/lib/cards/EventCard/CreateEventCardModal.svelte

···
+<script lang="ts">
+	import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
+	import type { CreationModalComponentProps } from '../types';
+
+	const EVENT_COLLECTION = 'community.lexicon.calendar.event';
+
+	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+
+	let isValidating = $state(false);
+	let errorMessage = $state('');
+	let eventUrl = $state('');
+
+	function parseEventUrl(url: string): { did: string; rkey: string } | null {
+		// Match smokesignal.events URLs: https://smokesignal.events/{did}/{rkey}
+		const smokesignalMatch = url.match(/^https?:\/\/smokesignal\.events\/(did:[^/]+)\/([^/?#]+)/);
+		if (smokesignalMatch) {
+			return { did: smokesignalMatch[1], rkey: smokesignalMatch[2] };
+		}
+
+		// Match AT URIs: at://{did}/community.lexicon.calendar.event/{rkey}
+		const atUriMatch = url.match(/^at:\/\/(did:[^/]+)\/([^/]+)\/([^/?#]+)/);
+		if (atUriMatch && atUriMatch[2] === EVENT_COLLECTION) {
+			return { did: atUriMatch[1], rkey: atUriMatch[3] };
+		}
+
+		return null;
+	}
+
+	async function validateAndCreate() {
+		errorMessage = '';
+		isValidating = true;
+
+		try {
+			const parsed = parseEventUrl(eventUrl.trim());
+
+			if (!parsed) {
+				throw new Error('Invalid URL format');
+			}
+
+			// Validate the event exists by fetching it
+			const response = await fetch(
+				`https://smokesignal.events/xrpc/community.lexicon.calendar.GetEvent?repository=${encodeURIComponent(parsed.did)}&record_key=${encodeURIComponent(parsed.rkey)}`
+			);
+
+			if (!response.ok) {
+				throw new Error('Event not found');
+			}
+
+			// Store as AT URI
+			item.cardData.uri = `at://${parsed.did}/${EVENT_COLLECTION}/${parsed.rkey}`;
+
+			return true;
+		} catch (err) {
+			errorMessage =
+				err instanceof Error && err.message === 'Event not found'
+					? "Couldn't find that event. Please check the URL and try again."
+					: 'Invalid URL. Please enter a valid smokesignal.events URL or AT URI.';
+			return false;
+		} finally {
+			isValidating = false;
+		}
+	}
+</script>
+
+<Modal open={true} closeButton={false}>
+	<form
+		onsubmit={async () => {
+			if (await validateAndCreate()) oncreate();
+		}}
+		class="flex flex-col gap-2"
+	>
+		<Subheading>Enter a Smoke Signal event URL</Subheading>
+		<Input
+			bind:value={eventUrl}
+			placeholder="https://smokesignal.events/did:.../..."
+			class="mt-4"
+		/>
+
+		{#if errorMessage}
+			<Alert type="error" title="Failed to create event card"><span>{errorMessage}</span></Alert>
+		{/if}
+
+		<p class="text-base-500 dark:text-base-400 mt-2 text-xs">
+			Paste a URL from <a
+				href="https://smokesignal.events"
+				class="text-accent-800 dark:text-accent-300"
+				target="_blank">smokesignal.events</a
+			> or an AT URI for a calendar event.
+		</p>
+
+		<div class="mt-4 flex justify-end gap-2">
+			<Button onclick={oncancel} variant="ghost">Cancel</Button>
+			<Button type="submit" disabled={isValidating || !eventUrl.trim()}
+				>{isValidating ? 'Creating...' : 'Create'}</Button
+			>
+		</div>
+	</form>
+</Modal>

src/lib/cards/EventCard/EventCard.svelte

···
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Badge, Button } from '@foxui/core';
+	import { getAdditionalUserData, getIsMobile } from '$lib/website/context';
+	import type { ContentComponentProps } from '../types';
+	import { CardDefinitionsByType } from '..';
+	import type { EventData } from '.';
+	import { parseUri } from '$lib/atproto';
+	import { browser } from '$app/environment';
+
+	let { item }: ContentComponentProps = $props();
+
+	let isMobile = getIsMobile();
+	let isLoaded = $state(false);
+	let fetchedEventData = $state<EventData | undefined>(undefined);
+
+	const data = getAdditionalUserData();
+
+	let eventData = $derived(
+		fetchedEventData ||
+			((data[item.cardType] as Record<string, EventData> | undefined)?.[item.id] as
+				| EventData
+				| undefined)
+	);
+
+	let parsedUri = $derived(item.cardData?.uri ? parseUri(item.cardData.uri) : null);
+
+	onMount(async () => {
+		if (!eventData && item.cardData?.uri) {
+			const loadedData = (await CardDefinitionsByType[item.cardType]?.loadData?.([item], {
+				did: parsedUri?.did ?? ('' as `did:${string}:${string}`),
+				handle: ''
+			})) as Record<string, EventData> | undefined;
+
+			if (loadedData?.[item.id]) {
+				fetchedEventData = loadedData[item.id];
+				if (!data[item.cardType]) {
+					data[item.cardType] = {};
+				}
+				(data[item.cardType] as Record<string, EventData>)[item.id] = fetchedEventData;
+			}
+		}
+		isLoaded = true;
+	});
+
+	function formatDate(dateStr: string): string {
+		const date = new Date(dateStr);
+		return date.toLocaleDateString('en-US', {
+			weekday: 'short',
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric'
+		});
+	}
+
+	function formatTime(dateStr: string): string {
+		const date = new Date(dateStr);
+		return date.toLocaleTimeString('en-US', {
+			hour: 'numeric',
+			minute: '2-digit'
+		});
+	}
+
+	function getModeLabel(mode: string): string {
+		if (mode.includes('virtual')) return 'Virtual';
+		if (mode.includes('hybrid')) return 'Hybrid';
+		if (mode.includes('inperson')) return 'In-Person';
+		return 'Event';
+	}
+
+	function getModeColor(mode: string): string {
+		if (mode.includes('virtual')) return 'blue';
+		if (mode.includes('hybrid')) return 'purple';
+		if (mode.includes('inperson')) return 'green';
+		return 'gray';
+	}
+
+	function getLocationString(
+		locations:
+			| Array<{ address?: { locality?: string; region?: string; country?: string } }>
+			| undefined
+	): string | undefined {
+		if (!locations || locations.length === 0) return undefined;
+		const loc = locations[0]?.address;
+		if (!loc) return undefined;
+
+		const parts = [loc.locality, loc.region, loc.country].filter(Boolean);
+		return parts.length > 0 ? parts.join(', ') : undefined;
+	}
+
+	let eventUrl = $derived(() => {
+		if (eventData?.url) return eventData.url;
+		if (parsedUri) {
+			return `https://smokesignal.events/${parsedUri.did}/${parsedUri.rkey}`;
+		}
+		return '#';
+	});
+
+	let location = $derived(getLocationString(eventData?.locations));
+
+	let headerImage = $derived(() => {
+		if (!eventData?.media || !parsedUri) return null;
+		const header = eventData.media.find((m) => m.role === 'header');
+		if (!header?.content?.ref?.$link) return null;
+		return {
+			url: `https://cdn.bsky.app/img/feed_thumbnail/plain/${parsedUri.did}/${header.content.ref.$link}@jpeg`,
+			alt: header.alt || eventData.name
+		};
+	});
+
+	let showImage = $derived(
+		browser && headerImage() && ((isMobile() && item.mobileH >= 8) || (!isMobile() && item.h >= 4))
+	);
+</script>
+
+<div class="flex h-full flex-col justify-between overflow-hidden p-4">
+	{#if eventData}
+		<div class="min-w-0 flex-1 overflow-hidden">
+			<div class="mb-2 flex items-center justify-between gap-2">
+				<div class="flex items-center gap-2">
+					<div
+						class="bg-base-100 border-base-300 accent:bg-accent-100/50 accent:border-accent-200 dark:border-base-800 dark:bg-base-900 flex size-8 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-4"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
+							/>
+						</svg>
+					</div>
+					<Badge size="sm" color={getModeColor(eventData.mode)}>
+						<span class="accent:text-base-900">{getModeLabel(eventData.mode)}</span>
+					</Badge>
+				</div>
+
+				{#if isMobile() ? item.mobileW > 4 : item.w > 2}
+					<Button href={eventUrl()} target="_blank" rel="noopener noreferrer" class="z-50"
+						>View event</Button
+					>
+				{/if}
+			</div>
+
+			<h3 class="text-base-900 dark:text-base-50 mb-2 line-clamp-2 text-lg leading-tight font-bold">
+				{eventData.name}
+			</h3>
+
+			<div class="text-base-600 dark:text-base-400 accent:text-base-800 mb-2 text-sm">
+				<div class="flex items-center gap-1">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="size-4 shrink-0"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+						/>
+					</svg>
+					<span class="truncate">
+						{formatDate(eventData.startsAt)} at {formatTime(eventData.startsAt)}
+						{#if eventData.endsAt}
+							- {formatDate(eventData.endsAt)}
+						{/if}
+					</span>
+				</div>
+			</div>
+
+			{#if location}
+				<div
+					class="text-base-600 dark:text-base-400 accent:text-base-800 mb-2 flex items-center gap-1 text-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 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>
+					<span class="truncate">{location}</span>
+				</div>
+			{/if}
+
+			{#if eventData.description && ((isMobile() && item.mobileH >= 5) || (!isMobile() && item.h >= 3))}
+				<p class="text-base-500 dark:text-base-400 accent:text-base-900 mb-3 line-clamp-3 text-sm">
+					{eventData.description}
+				</p>
+			{/if}
+
+			{#if (eventData.countGoing !== undefined || eventData.countInterested !== undefined) && ((isMobile() && item.mobileH >= 4) || (!isMobile() && item.h >= 3))}
+				<div
+					class="text-base-600 dark:text-base-400 accent:text-base-800 flex flex-wrap gap-3 text-xs"
+				>
+					{#if eventData.countGoing !== undefined}
+						<div class="flex items-center gap-1">
+							<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="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+								/>
+							</svg>
+							<span>{eventData.countGoing} going</span>
+						</div>
+					{/if}
+					{#if eventData.countInterested !== undefined}
+						<div class="flex items-center gap-1">
+							<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="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
+								/>
+							</svg>
+							<span>{eventData.countInterested} interested</span>
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+
+		{#if showImage}
+			{@const img = headerImage()}
+			{#if img}
+				<img src={img.url} alt={img.alt} class="mt-3 aspect-3/1 w-full rounded-xl object-cover" />
+			{/if}
+		{/if}
+
+		<a
+			href={eventUrl()}
+			class="absolute inset-0 h-full w-full"
+			target="_blank"
+			rel="noopener noreferrer"
+		>
+			<span class="sr-only">View event on smokesignal.events</span>
+		</a>
+	{:else if isLoaded}
+		<div class="flex h-full w-full items-center justify-center">
+			<span class="text-base-500 dark:text-base-400">Event not found</span>
+		</div>
+	{:else}
+		<div class="flex h-full w-full items-center justify-center">
+			<span class="text-base-500 dark:text-base-400">Loading event...</span>
+		</div>
+	{/if}
+</div>

src/lib/cards/EventCard/index.ts

···
+import { parseUri } from '$lib/atproto';
+import type { CardDefinition } from '../types';
+import CreateEventCardModal from './CreateEventCardModal.svelte';
+import EventCard from './EventCard.svelte';
+
+const EVENT_COLLECTION = 'community.lexicon.calendar.event';
+
+export type EventData = {
+	mode: string;
+	name: string;
+	status: string;
+	startsAt: string;
+	endsAt?: string;
+	description?: string;
+	locations?: Array<{
+		address?: {
+			locality?: string;
+			region?: string;
+			country?: string;
+		};
+	}>;
+	media?: Array<{
+		alt?: string;
+		role?: string;
+		content?: {
+			ref?: {
+				$link: string;
+			};
+			mimeType?: string;
+		};
+		aspect_ratio?: {
+			width: number;
+			height: number;
+		};
+	}>;
+	countGoing?: number;
+	countInterested?: number;
+	url: string;
+};
+
+export const EventCardDefinition = {
+	type: 'event',
+	contentComponent: EventCard,
+	creationModalComponent: CreateEventCardModal,
+	sidebarButtonText: 'Event',
+
+	createNew: (card) => {
+		card.w = 4;
+		card.h = 4;
+		card.mobileW = 8;
+		card.mobileH = 6;
+	},
+
+	loadData: async (items) => {
+		const eventDataMap: Record<string, EventData> = {};
+
+		for (const item of items) {
+			const uri = item.cardData?.uri;
+			if (!uri) continue;
+
+			const { did, rkey } = parseUri(uri);
+
+			try {
+				const response = await fetch(
+					`https://smokesignal.events/xrpc/community.lexicon.calendar.GetEvent?repository=${encodeURIComponent(did)}&record_key=${encodeURIComponent(rkey)}`
+				);
+
+				if (response.ok) {
+					const data = await response.json();
+					eventDataMap[item.id] = data as EventData;
+				}
+			} catch (error) {
+				console.error('Failed to fetch event data:', error);
+			}
+		}
+
+		return eventDataMap;
+	},
+
+	onUrlHandler: (url, item) => {
+		// Match smokesignal.events URLs: https://smokesignal.events/{did}/{rkey}
+		const smokesignalMatch = url.match(/^https?:\/\/smokesignal\.events\/(did:[^/]+)\/([^/?#]+)/);
+		if (smokesignalMatch) {
+			const [, did, rkey] = smokesignalMatch;
+			item.w = 4;
+			item.h = 4;
+			item.mobileW = 8;
+			item.mobileH = 6;
+			item.cardType = 'event';
+			item.cardData.uri = `at://${did}/${EVENT_COLLECTION}/${rkey}`;
+			return item;
+		}
+
+		// Match AT URIs: at://{did}/community.lexicon.calendar.event/{rkey}
+		const atUriMatch = url.match(/^at:\/\/(did:[^/]+)\/([^/]+)\/([^/?#]+)/);
+		if (atUriMatch) {
+			const [, did, collection, rkey] = atUriMatch;
+			if (collection === EVENT_COLLECTION) {
+				item.w = 4;
+				item.h = 4;
+				item.mobileW = 8;
+				item.mobileH = 6;
+				item.cardType = 'event';
+				item.cardData.uri = `at://${did}/${collection}/${rkey}`;
+				return item;
+			}
+		}
+
+		return null;
+	},
+
+	urlHandlerPriority: 5,
+
+	name: 'Event Card'
+} as CardDefinition & { type: 'event' };

src/lib/cards/GameCards/DinoGameCard/SidebarItemDinoGameCard.svelte

···
-<script lang="ts">
-	import { Button } from '@foxui/core';
-
-	let { onclick }: { onclick: () => void } = $props();
-</script>
-
-<Button {onclick} variant="ghost" class="w-full justify-start">
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		fill="currentColor"
-		class="text-accent-600 dark:text-accent-400"
-	>
-		<!-- Dino silhouette -->
-		<path
-			d="M18 4h-2v2h-2v2h-2V6h-2V4H8v2H6v2H4v2H2v8h2v2h2v-2h2v-2h2v2h2v-2h2v2h2v-2h2V8h-2V6h-2V4zm-8 8H8v-2h2v2zm4 0h-2v-2h2v2z"
-		/>
-	</svg>
-
-	Dino Game</Button
->

src/lib/cards/GameCards/DinoGameCard/index.ts

···
 import type { CardDefinition, ContentComponentProps } from '$lib/cards/types';
 import type { Component } from 'svelte';
 import DinoGameCard from './DinoGameCard.svelte';
-import SidebarItemDinoGameCard from './SidebarItemDinoGameCard.svelte';
 
 export const DinoGameCardDefinition = {
 	type: 'dino-game',
 	contentComponent: DinoGameCard as unknown as Component<ContentComponentProps>,
-	sidebarComponent: SidebarItemDinoGameCard,
+	sidebarButtonText: 'Dino Game',
 	allowSetColor: true,
 	createNew: (card) => {
 		card.w = 4;

src/lib/cards/GameCards/TetrisCard/SidebarItemTetrisCard.svelte

···
-<script lang="ts">
-	import { Button } from '@foxui/core';
-
-	let { onclick }: { onclick: () => void } = $props();
-</script>
-
-<Button {onclick} variant="ghost" class="w-full justify-start">
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		fill="currentColor"
-		class="text-accent-600 dark:text-accent-400"
-	>
-		<!-- Tetris blocks -->
-		<rect x="4" y="4" width="5" height="5" />
-		<rect x="9" y="4" width="5" height="5" />
-		<rect x="9" y="9" width="5" height="5" />
-		<rect x="14" y="9" width="5" height="5" />
-		<rect x="4" y="14" width="5" height="5" />
-		<rect x="9" y="14" width="5" height="5" />
-		<rect x="14" y="14" width="5" height="5" />
-	</svg>
-
-	Tetris</Button
->

src/lib/cards/GameCards/TetrisCard/index.ts

···
 
 import type { CardDefinition, ContentComponentProps } from '../../types';
 import TetrisCard from './TetrisCard.svelte';
-import SidebarItemTetrisCard from './SidebarItemTetrisCard.svelte';
 import type { Component } from 'svelte';
 
 export const TetrisCardDefinition = {
 	type: 'tetris',
 	contentComponent: TetrisCard as unknown as Component<ContentComponentProps>,
-	sidebarComponent: SidebarItemTetrisCard,
+	sidebarButtonText: 'Tetris',
 	allowSetColor: true,
 	defaultColor: 'accent',
 	createNew: (card) => {

src/lib/cards/LivestreamCard/SidebarItemEmbedLivestreamCard.svelte

···
-<script lang="ts">
-	import { Button } from '@foxui/core';
-	import Icon from './Icon.svelte';
-
-	let { onclick }: { onclick: () => void } = $props();
-</script>
-
-<Button {onclick} variant="ghost" class="w-full justify-start">
-	<Icon class="size-4" />
-
-	Embed stream.place
-</Button>

src/lib/cards/LivestreamCard/SidebarItemLivestreamCard.svelte

···
-<script lang="ts">
-	import { Button } from '@foxui/core';
-	import Icon from './Icon.svelte';
-
-	let { onclick }: { onclick: () => void } = $props();
-</script>
-
-<Button {onclick} variant="ghost" class="w-full justify-start">
-	<Icon class="size-4" />
-
-	Latest stream.place
-</Button>

src/lib/cards/LivestreamCard/index.ts

···
 import type { CardDefinition } from '../types';
 import LivestreamCard from './LivestreamCard.svelte';
 import LivestreamEmbedCard from './LivestreamEmbedCard.svelte';
-import SidebarItemLivestreamCard from './SidebarItemLivestreamCard.svelte';
 
 export const LivestreamCardDefitition = {
 	type: 'latestLivestream',
 	contentComponent: LivestreamCard,
-	sidebarComponent: SidebarItemLivestreamCard,
+	sidebarButtonText: 'stream.place info',
 	createNew: (card) => {
 		card.w = 4;
 		card.h = 4;

src/lib/cards/MapCard/SidebarItemMapCard.svelte

···
-<script lang="ts">
-	import { Button } from '@foxui/core';
-
-	let { onclick }: { onclick: () => void } = $props();
-</script>
-
-<Button {onclick} variant="ghost" class="w-full justify-start">
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		fill="currentColor"
-		class="text-accent-600 dark:text-accent-400"
-	>
-		<path
-			fill-rule="evenodd"
-			d="M8.161 2.58a1.875 1.875 0 0 1 1.678 0l4.993 2.498c.106.052.23.052.336 0l3.869-1.935A1.875 1.875 0 0 1 21.75 4.82v12.485c0 .71-.401 1.36-1.037 1.677l-4.875 2.437a1.875 1.875 0 0 1-1.676 0l-4.994-2.497a.375.375 0 0 0-.336 0l-3.868 1.935A1.875 1.875 0 0 1 2.25 19.18V6.695c0-.71.401-1.36 1.036-1.677l4.875-2.437ZM9 6a.75.75 0 0 1 .75.75V15a.75.75 0 0 1-1.5 0V6.75A.75.75 0 0 1 9 6Zm6.75 3a.75.75 0 0 0-1.5 0v8.25a.75.75 0 0 0 1.5 0V9Z"
-			clip-rule="evenodd"
-		/>
-	</svg>
-
-	Map with Location
-</Button>

src/lib/cards/MapCard/index.ts

···
 import CreateMapCardModal from './CreateMapCardModal.svelte';
 import MapCard from './MapCard.svelte';
 import MapCardSettings from './MapCardSettings.svelte';
-import SidebarItemMapCard from './SidebarItemMapCard.svelte';
 
 export const MapCardDefinition = {
 	type: 'mapLocation',
 	contentComponent: MapCard,
-	sidebarButtonText: 'map',
+	sidebarButtonText: 'Map',
 	createNew: (item) => {
 		item.w = 4;
 		item.h = 4;
···
 		item.mobileW = 8;
 	},
 
-	sidebarComponent: SidebarItemMapCard,
 	creationModalComponent: CreateMapCardModal,
 	allowSetColor: false,
 	canHaveLabel: true,

src/lib/cards/index.ts

···
 import { PhotoGalleryCardDefinition } from './PhotoGalleryCard';
 import { StandardSiteDocumentListCardDefinition } from './StandardSiteDocumentListCard';
 import { StatusphereCardDefinition } from './StatusphereCard';
+import { EventCardDefinition } from './EventCard';
 
 export const AllCardDefinitions = [
 	ImageCardDefinition,
···
 	TealFMPlaysCardDefinition,
 	PhotoGalleryCardDefinition,
 	StandardSiteDocumentListCardDefinition,
-	StatusphereCardDefinition
+	StatusphereCardDefinition,
+	EventCardDefinition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(

src/lib/cards/types.ts

···
 
 	upload?: (item: Item) => Promise<Item>; // optionally upload some other data needed for this card
 
-	// one of those two has to be set for a card to appear in the sidebar
-	sidebarComponent?: Component<SidebarComponentProps>;
+	// has to be set for a card to appear in the sidebar
 	sidebarButtonText?: string;
 
 	// if this component exists, a settings button with a popover will be shown containing this component

src/lib/website/EditableWebsite.svelte

···
 		}
 	}
 
-	const sidebarItems = AllCardDefinitions.filter(
-		(cardDef) => cardDef.sidebarComponent || cardDef.sidebarButtonText
-	);
+	const sidebarItems = AllCardDefinitions.filter((cardDef) => cardDef.sidebarButtonText);
 
 	let showSettings = $state(false);
 
···
 
 							fixCollisions(items, item, isMobile);
 						}}
-						ondragstart={(e) => {
+						ondragstart={(e: DragEvent) => {
 							const target = e.currentTarget as HTMLDivElement;
 							activeDragElement.element = target;
 							activeDragElement.w = item.w;
···
 	<Sidebar mobileOnly mobileClasses="lg:block p-4 gap-4">
 		<div class="flex flex-col gap-2">
 			{#each sidebarItems as cardDef (cardDef.type)}
-				{#if cardDef.sidebarComponent}
-					<cardDef.sidebarComponent onclick={() => newCard(cardDef.type)} />
-				{:else if cardDef.sidebarButtonText}
-					<Button onclick={() => newCard(cardDef.type)} variant="ghost" class="w-full justify-start"
-						>{cardDef.sidebarButtonText}</Button
-					>
-				{/if}
+				<Button onclick={() => newCard(cardDef.type)} variant="ghost" class="w-full justify-start"
+					>{cardDef.sidebarButtonText}</Button
+				>
 			{/each}
 		</div>
 	</Sidebar>