commandbar changes

src/app.css

···
 @plugin '@tailwindcss/forms';
 @plugin '@tailwindcss/typography';
 
+@plugin 'tailwindcss-animate';
+
 @source '../node_modules/@foxui';
 
 @custom-variant dark (&:where(.dark, .dark *):not(:where(.light, .light *)));

src/lib/cards/ATProtoCollectionsCard/ATProtoCollectionsCard.svelte

···
 			<Badge size="md" class="accent:text-accent-950">{collections.length}</Badge>
 		{/if}
 	</div>
-	<div class="flex w-full flex-wrap gap-2 overflow-x-hidden overflow-y-scroll px-4">
-		{#each collections ?? [] as collection (collection)}
-			<Button target="_blank" href={getLink(collection)} size="sm">{collection}</Button>
-		{/each}
-	</div>
+	{#if collections && collections.length > 0}
+		<div class="flex w-full flex-wrap gap-2 overflow-x-hidden overflow-y-scroll px-4">
+			{#each collections as collection (collection)}
+				<Button target="_blank" href={getLink(collection)} size="sm">{collection}</Button>
+			{/each}
+		</div>
+	{:else if collections}
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
+		>
+			No collections found.
+		</div>
+	{:else}
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
+		>
+			Loading collections...
+		</div>
+	{/if}
 </div>

src/lib/cards/ATProtoCollectionsCard/index.ts

···
 		item.w = 4;
 		item.mobileW = 8;
 	},
-	sidebarButtonText: 'Atmosphere Collections'
+	sidebarButtonText: 'Atmosphere Collections',
+
+	name: 'ATProto Collections',
+
+	groups: ['Social'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" /></svg>`
 } as CardDefinition & { type: 'atprotocollections' };

src/lib/cards/BigSocialCard/index.ts

···
 		return item;
 	},
 	urlHandlerPriority: 1,
-	canHaveLabel: true
+	canHaveLabel: true,
+
+	groups: ['Social'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" /></svg>`
 } as CardDefinition & { type: 'bigsocial' };
 
 import {

src/lib/cards/BlueskyMediaCard/index.ts

···
 	createNew: () => {},
 	creationModalComponent: CreateBlueskyMediaCardModal,
 	sidebarButtonText: 'Bluesky Media',
-	canHaveLabel: true
+	canHaveLabel: true,
+
+	groups: ['Media'],
+
+	name: 'Video/Image from Bluesky',
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h1.5C5.496 19.5 6 18.996 6 18.375m-3.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-1.5A1.125 1.125 0 0 1 18 18.375M20.625 4.5H3.375m17.25 0c.621 0 1.125.504 1.125 1.125M20.625 4.5h-1.5C18.504 4.5 18 5.004 18 5.625m3.75 0v1.5c0 .621-.504 1.125-1.125 1.125M3.375 4.5c-.621 0-1.125.504-1.125 1.125M3.375 4.5h1.5C5.496 4.5 6 5.004 6 5.625m-3.75 0v1.5c0 .621.504 1.125 1.125 1.125m0 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m1.5-3.75C5.496 8.25 6 7.746 6 7.125v-1.5M4.875 8.25C5.496 8.25 6 8.754 6 9.375v1.5m0-5.25v5.25m0-5.25C6 5.004 6.504 4.5 7.125 4.5h9.75c.621 0 1.125.504 1.125 1.125m1.125 2.625h1.5m-1.5 0A1.125 1.125 0 0 1 18 7.125v-1.5m1.125 2.625c-.621 0-1.125.504-1.125 1.125v1.5m2.625-2.625c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125M18 5.625v5.25M7.125 12h9.75m-9.75 0A1.125 1.125 0 0 1 6 10.875M7.125 12C6.504 12 6 12.504 6 13.125m0-2.25C6 11.496 5.496 12 4.875 12M18 10.875c0 .621-.504 1.125-1.125 1.125M18 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m-12 5.25v-5.25m0 5.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125m-12 0v-1.5c0-.621-.504-1.125-1.125-1.125M18 18.375v-5.25m0 5.25v-1.5c0-.621.504-1.125 1.125-1.125M18 13.125v1.5c0 .621.504 1.125 1.125 1.125M18 13.125c0-.621.504-1.125 1.125-1.125M6 13.125v1.5c0 .621-.504 1.125-1.125 1.125M6 13.125C6 12.504 5.496 12 4.875 12m-1.5 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M19.125 12h1.5m0 0c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h1.5m14.25 0h1.5" /></svg>`
 } as CardDefinition & { type: 'blueskyMedia' };

src/lib/cards/BlueskyPostCard/index.ts

···
 		return postsMap;
 	},
 	minW: 4,
-	name: 'Bluesky Post'
+	name: 'Bluesky Post',
+
+	groups: ['Social'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" /></svg>`
 } as CardDefinition & { type: 'blueskyPost' };

src/lib/cards/ButtonCard/index.ts

···
 	minW: 2,
 	minH: 1,
 	maxW: 8,
-	maxH: 4
+	maxH: 4,
+
+	groups: ['Utilities'],
+	name: 'Button',
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672 13.684 16.6m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672ZM12 2.25V4.5m5.834.166-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243-1.59-1.59" /></svg>`
 };

src/lib/cards/ClockCard/ClockCard.svelte

···
+<script lang="ts">
+	import NumberFlow, { NumberFlowGroup } from '@number-flow/svelte';
+	import type { ContentComponentProps } from '../types';
+	import type { ClockCardData } from './index';
+	import { onMount } from 'svelte';
+
+	let { item }: ContentComponentProps = $props();
+
+	let cardData = $derived(item.cardData as ClockCardData);
+
+	let now = $state(new Date());
+
+	onMount(() => {
+		const interval = setInterval(() => {
+			now = new Date();
+		}, 1000);
+		return () => clearInterval(interval);
+	});
+
+	let clockParts = $derived.by(() => {
+		try {
+			return new Intl.DateTimeFormat('en-US', {
+				timeZone: cardData.timezone || 'UTC',
+				hour: '2-digit',
+				minute: '2-digit',
+				second: '2-digit',
+				hour12: false
+			}).formatToParts(now);
+		} catch {
+			return null;
+		}
+	});
+
+	let clockHours = $derived(
+		clockParts ? parseInt(clockParts.find((p) => p.type === 'hour')?.value || '0') : 0
+	);
+	let clockMinutes = $derived(
+		clockParts ? parseInt(clockParts.find((p) => p.type === 'minute')?.value || '0') : 0
+	);
+	let clockSeconds = $derived(
+		clockParts ? parseInt(clockParts.find((p) => p.type === 'second')?.value || '0') : 0
+	);
+
+	let timezoneDisplay = $derived.by(() => {
+		if (!cardData.timezone) return '';
+		try {
+			const formatter = new Intl.DateTimeFormat('en-US', {
+				timeZone: cardData.timezone,
+				timeZoneName: 'short'
+			});
+			const parts = formatter.formatToParts(now);
+			return parts.find((p) => p.type === 'timeZoneName')?.value || cardData.timezone;
+		} catch {
+			return cardData.timezone;
+		}
+	});
+</script>
+
+<div class="@container flex h-full w-full flex-col items-center justify-center p-4">
+	<NumberFlowGroup>
+		<div
+			class="text-base-900 dark:text-base-100 accent:text-base-900 flex items-center text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
+			style="font-variant-numeric: tabular-nums;"
+		>
+			<NumberFlow value={clockHours} format={{ minimumIntegerDigits: 2 }} />
+			<span class="text-base-400 dark:text-base-500 accent:text-accent-950 mx-0.5">:</span>
+			<NumberFlow
+				value={clockMinutes}
+				format={{ minimumIntegerDigits: 2 }}
+				digits={{ 1: { max: 5 } }}
+				trend={1}
+			/>
+			<span class="text-base-400 dark:text-base-500 accent:text-accent-950 mx-0.5">:</span>
+			<NumberFlow
+				value={clockSeconds}
+				format={{ minimumIntegerDigits: 2 }}
+				digits={{ 1: { max: 5 } }}
+				trend={1}
+			/>
+		</div>
+	</NumberFlowGroup>
+	{#if timezoneDisplay}
+		<div class="text-base-500 dark:text-base-400 accent:text-base-600 mt-1 text-xs @sm:text-sm">
+			{timezoneDisplay}
+		</div>
+	{/if}
+</div>

src/lib/cards/ClockCard/ClockCardSettings.svelte

···
+<script lang="ts">
+	import type { Item } from '$lib/types';
+	import { Button, Label } from '@foxui/core';
+	import type { ClockCardData } from './index';
+	import { onMount } from 'svelte';
+
+	let { item }: { item: Item; onclose: () => void } = $props();
+
+	let cardData = $derived(item.cardData as ClockCardData);
+
+	const timezoneOptions = [
+		{ value: 'Pacific/Midway', label: 'UTC-11 (Midway)' },
+		{ value: 'Pacific/Honolulu', label: 'UTC-10 (Honolulu)' },
+		{ value: 'America/Anchorage', label: 'UTC-9 (Anchorage)' },
+		{ value: 'America/Los_Angeles', label: 'UTC-8 (Los Angeles)' },
+		{ value: 'America/Denver', label: 'UTC-7 (Denver)' },
+		{ value: 'America/Chicago', label: 'UTC-6 (Chicago)' },
+		{ value: 'America/New_York', label: 'UTC-5 (New York)' },
+		{ value: 'America/Halifax', label: 'UTC-4 (Halifax)' },
+		{ value: 'America/Sao_Paulo', label: 'UTC-3 (São Paulo)' },
+		{ value: 'Atlantic/South_Georgia', label: 'UTC-2 (South Georgia)' },
+		{ value: 'Atlantic/Azores', label: 'UTC-1 (Azores)' },
+		{ value: 'UTC', label: 'UTC+0 (London)' },
+		{ value: 'Europe/Paris', label: 'UTC+1 (Paris)' },
+		{ value: 'Europe/Helsinki', label: 'UTC+2 (Helsinki)' },
+		{ value: 'Europe/Moscow', label: 'UTC+3 (Moscow)' },
+		{ value: 'Asia/Dubai', label: 'UTC+4 (Dubai)' },
+		{ value: 'Asia/Karachi', label: 'UTC+5 (Karachi)' },
+		{ value: 'Asia/Kolkata', label: 'UTC+5:30 (Mumbai)' },
+		{ value: 'Asia/Dhaka', label: 'UTC+6 (Dhaka)' },
+		{ value: 'Asia/Bangkok', label: 'UTC+7 (Bangkok)' },
+		{ value: 'Asia/Shanghai', label: 'UTC+8 (Shanghai)' },
+		{ value: 'Asia/Tokyo', label: 'UTC+9 (Tokyo)' },
+		{ value: 'Australia/Sydney', label: 'UTC+10 (Sydney)' },
+		{ value: 'Pacific/Noumea', label: 'UTC+11 (Noumea)' },
+		{ value: 'Pacific/Auckland', label: 'UTC+12 (Auckland)' }
+	];
+
+	onMount(() => {
+		if (!cardData.timezone) {
+			try {
+				item.cardData.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+			} catch {
+				item.cardData.timezone = 'UTC';
+			}
+		}
+	});
+
+	function useLocalTimezone() {
+		try {
+			item.cardData.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+		} catch {
+			item.cardData.timezone = 'UTC';
+		}
+	}
+</script>
+
+<div class="flex flex-col gap-4">
+	<div class="flex flex-col gap-2">
+		<Label>Timezone</Label>
+		<div class="flex gap-2">
+			<select
+				value={cardData.timezone || 'UTC'}
+				onchange={(e) => (item.cardData.timezone = e.currentTarget.value)}
+				class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 text-base-900 dark:text-base-100 flex-1 rounded-xl border px-3 py-2"
+			>
+				{#each timezoneOptions as tz (tz.value)}
+					<option value={tz.value}>{tz.label}</option>
+				{/each}
+			</select>
+			<Button size="sm" variant="ghost" onclick={useLocalTimezone}>Local</Button>
+		</div>
+	</div>
+</div>

src/lib/cards/ClockCard/index.ts

···
+import type { CardDefinition } from '../types';
+import ClockCard from './ClockCard.svelte';
+import ClockCardSettings from './ClockCardSettings.svelte';
+
+export type ClockCardData = {
+	timezone?: string;
+};
+
+export const ClockCardDefinition = {
+	type: 'clock',
+	contentComponent: ClockCard,
+	settingsComponent: ClockCardSettings,
+
+	createNew: (card) => {
+		card.w = 4;
+		card.h = 2;
+		card.mobileW = 8;
+		card.mobileH = 3;
+		card.cardData = {
+			timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
+		} as ClockCardData;
+	},
+
+	allowSetColor: true,
+	name: 'Clock',
+	minW: 4,
+	canHaveLabel: true,
+	groups: ['Utilities'],
+	keywords: ['time', 'timezone', 'watch'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><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>`
+} as CardDefinition & { type: 'clock' };

src/lib/cards/CountdownCard/CountdownCard.svelte

···
+<script lang="ts">
+	import NumberFlow, { NumberFlowGroup } from '@number-flow/svelte';
+	import type { ContentComponentProps } from '../types';
+	import type { CountdownCardData } from './index';
+	import { onMount } from 'svelte';
+
+	let { item }: ContentComponentProps = $props();
+
+	let cardData = $derived(item.cardData as CountdownCardData);
+
+	let now = $state(new Date());
+
+	onMount(() => {
+		const interval = setInterval(() => {
+			now = new Date();
+		}, 1000);
+		return () => clearInterval(interval);
+	});
+
+	// Countdown to target date
+	let eventDiff = $derived.by(() => {
+		if (!cardData.targetDate) return null;
+		const target = new Date(cardData.targetDate);
+		return Math.max(0, target.getTime() - now.getTime());
+	});
+
+	let eventDays = $derived(eventDiff !== null ? Math.floor(eventDiff / (1000 * 60 * 60 * 24)) : 0);
+	let eventHours = $derived(
+		eventDiff !== null ? Math.floor((eventDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) : 0
+	);
+	let eventMinutes = $derived(
+		eventDiff !== null ? Math.floor((eventDiff % (1000 * 60 * 60)) / (1000 * 60)) : 0
+	);
+	let eventSeconds = $derived(
+		eventDiff !== null ? Math.floor((eventDiff % (1000 * 60)) / 1000) : 0
+	);
+
+	// Check if event is in the past (elapsed mode)
+	let isEventPast = $derived.by(() => {
+		if (!cardData.targetDate) return false;
+		return now.getTime() > new Date(cardData.targetDate).getTime();
+	});
+
+	// Elapsed time since past event
+	let elapsedDiff = $derived.by(() => {
+		if (!isEventPast || !cardData.targetDate) return null;
+		return now.getTime() - new Date(cardData.targetDate).getTime();
+	});
+
+	let elapsedYears = $derived(
+		elapsedDiff !== null ? Math.floor(elapsedDiff / (1000 * 60 * 60 * 24 * 365)) : 0
+	);
+	let elapsedDays = $derived(
+		elapsedDiff !== null
+			? Math.floor((elapsedDiff % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24))
+			: 0
+	);
+	let elapsedHours = $derived(
+		elapsedDiff !== null ? Math.floor((elapsedDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) : 0
+	);
+	let elapsedMinutes = $derived(
+		elapsedDiff !== null ? Math.floor((elapsedDiff % (1000 * 60 * 60)) / (1000 * 60)) : 0
+	);
+	let elapsedSeconds = $derived(
+		elapsedDiff !== null ? Math.floor((elapsedDiff % (1000 * 60)) / 1000) : 0
+	);
+</script>
+
+<div class="@container flex h-full w-full flex-col items-center justify-center p-4">
+	{#if isEventPast && elapsedDiff !== null}
+		<!-- Elapsed time since past event -->
+		<NumberFlowGroup>
+			<div
+				class="text-base-900 dark:text-base-100 accent:text-base-900 flex items-baseline gap-4 text-center @sm:gap-6 @md:gap-8"
+				style="font-variant-numeric: tabular-nums;"
+			>
+				{#if elapsedYears > 0}
+					<div class="flex flex-col items-center">
+						<NumberFlow
+							value={elapsedYears}
+							trend={1}
+							class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
+						/>
+						<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs"
+							>{elapsedYears === 1 ? 'year' : 'years'}</span
+						>
+					</div>
+				{/if}
+				{#if elapsedYears > 0 || elapsedDays > 0}
+					<div class="flex flex-col items-center">
+						<NumberFlow
+							value={elapsedDays}
+							trend={1}
+							class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
+						/>
+						<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs"
+							>{elapsedDays === 1 ? 'day' : 'days'}</span
+						>
+					</div>
+				{/if}
+				<div class="flex flex-col items-center">
+					<NumberFlow
+						value={elapsedHours}
+						trend={1}
+						format={{ minimumIntegerDigits: 2 }}
+						class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
+					/>
+					<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs">hrs</span>
+				</div>
+				<div class="flex flex-col items-center">
+					<NumberFlow
+						value={elapsedMinutes}
+						trend={1}
+						format={{ minimumIntegerDigits: 2 }}
+						digits={{ 1: { max: 5 } }}
+						class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
+					/>
+					<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs">min</span>
+				</div>
+				<div class="flex flex-col items-center">
+					<NumberFlow
+						value={elapsedSeconds}
+						trend={1}
+						format={{ minimumIntegerDigits: 2 }}
+						digits={{ 1: { max: 5 } }}
+						class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
+					/>
+					<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs">sec</span>
+				</div>
+			</div>
+		</NumberFlowGroup>
+	{:else if eventDiff !== null}
+		<!-- Countdown to future event -->
+		<NumberFlowGroup>
+			<div
+				class="text-base-900 dark:text-base-100 accent:text-base-900 flex items-baseline gap-4 text-center @sm:gap-6 @md:gap-8"
+				style="font-variant-numeric: tabular-nums;"
+			>
+				{#if eventDays > 0}
+					<div class="flex flex-col items-center">
+						<NumberFlow
+							value={eventDays}
+							trend={-1}
+							class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
+						/>
+						<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs"
+							>{eventDays === 1 ? 'day' : 'days'}</span
+						>
+					</div>
+				{/if}
+				<div class="flex flex-col items-center">
+					<NumberFlow
+						value={eventHours}
+						trend={-1}
+						format={{ minimumIntegerDigits: 2 }}
+						class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
+					/>
+					<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs">hrs</span>
+				</div>
+				<div class="flex flex-col items-center">
+					<NumberFlow
+						value={eventMinutes}
+						trend={-1}
+						format={{ minimumIntegerDigits: 2 }}
+						digits={{ 1: { max: 5 } }}
+						class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
+					/>
+					<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs">min</span>
+				</div>
+				<div class="flex flex-col items-center">
+					<NumberFlow
+						value={eventSeconds}
+						trend={-1}
+						format={{ minimumIntegerDigits: 2 }}
+						digits={{ 1: { max: 5 } }}
+						class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
+					/>
+					<span class="text-base-500 dark:text-base-400 accent:text-accent-950 text-xs">sec</span>
+				</div>
+			</div>
+		</NumberFlowGroup>
+	{:else}
+		<div class="text-base-500 text-sm">Set a target date in settings</div>
+	{/if}
+</div>

src/lib/cards/CountdownCard/CountdownCardSettings.svelte

···
+<script lang="ts">
+	import type { Item } from '$lib/types';
+	import { Input, Label } from '@foxui/core';
+	import type { CountdownCardData } from './index';
+
+	let { item }: { item: Item; onclose: () => void } = $props();
+
+	let cardData = $derived(item.cardData as CountdownCardData);
+
+	let targetDateValue = $derived.by(() => {
+		if (!cardData.targetDate) return '';
+		return new Date(cardData.targetDate).toISOString().split('T')[0];
+	});
+
+	let targetTimeValue = $derived.by(() => {
+		if (!cardData.targetDate) return '12:00';
+		return new Date(cardData.targetDate).toTimeString().slice(0, 5);
+	});
+
+	function updateTargetDate(dateStr: string, timeStr: string) {
+		if (!dateStr) return;
+		item.cardData.targetDate = new Date(`${dateStr}T${timeStr}`).toISOString();
+	}
+</script>
+
+<div class="flex flex-col gap-4">
+	<div class="flex flex-col gap-2">
+		<Label>Target Date & Time</Label>
+		<div class="flex gap-2">
+			<Input
+				type="date"
+				value={targetDateValue}
+				onchange={(e) => updateTargetDate(e.currentTarget.value, targetTimeValue)}
+				class="flex-1"
+			/>
+			<Input
+				type="time"
+				value={targetTimeValue}
+				onchange={(e) => updateTargetDate(targetDateValue, e.currentTarget.value)}
+				class="w-28"
+			/>
+		</div>
+	</div>
+</div>

src/lib/cards/CountdownCard/index.ts

···
+import type { CardDefinition } from '../types';
+import CountdownCard from './CountdownCard.svelte';
+import CountdownCardSettings from './CountdownCardSettings.svelte';
+
+export type CountdownCardData = {
+	targetDate?: string;
+};
+
+export const CountdownCardDefinition = {
+	type: 'countdown',
+	contentComponent: CountdownCard,
+	settingsComponent: CountdownCardSettings,
+
+	createNew: (card) => {
+		card.w = 4;
+		card.h = 2;
+		card.mobileW = 8;
+		card.mobileH = 3;
+		card.cardData = {} as CountdownCardData;
+	},
+
+	allowSetColor: true,
+	name: 'Countdown',
+	minW: 4,
+	canHaveLabel: true,
+	groups: ['Utilities'],
+	keywords: ['timer', 'event', 'date', 'countdown'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><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 M19.5 4.5l-1.5 1.5M4.5 4.5l1.5 1.5M12 2.25V3.75M9 2.25h6" /></svg>`
+} as CardDefinition & { type: 'countdown' };

src/lib/cards/DrawCard/index.ts

···
 			strokeWidth: 1,
 			locked: true
 		};
-	}
+	},
+
+	groups: ['Visual'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" /></svg>`
 } as CardDefinition & { type: 'draw' };

src/lib/cards/EmbedCard/index.ts

···
 	// change: (item) => {
 	// 	return item;
 	// },
-	name: 'Embed Card'
+	name: 'Embed',
+	groups: ['Media'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" /></svg>`
 } as CardDefinition & { type: 'embed' };

src/lib/cards/EventCard/index.ts

···
 
 	urlHandlerPriority: 5,
 
-	name: 'Event Card'
+	name: 'Event',
+
+	groups: ['Social'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" 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>`
 } as CardDefinition & { type: 'event' };

src/lib/cards/FluidTextCard/index.ts

···
 	sidebarButtonText: 'Fluid Text',
 	defaultColor: 'transparent',
 	allowSetColor: true,
-	minW: 2
+	minW: 2,
+
+	groups: ['Visual'],
+	name: 'Fluid Text',
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" /></svg>`
 } as CardDefinition & { type: 'fluid-text' };

src/lib/cards/GIFCard/index.ts

···
 		return null;
 	},
 	urlHandlerPriority: 5,
-	name: 'GIF'
+	name: 'GIF',
+
+	groups: ['Media'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M12.75 8.25v7.5m-6-3.75h3v3.75m-3-7.5h3M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" /></svg>`
 } as CardDefinition & { type: 'gif' };

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

···
 		card.mobileH = 6;
 		card.cardData = {};
 	},
-	canHaveLabel: true
+	canHaveLabel: true,
+
+	groups: ['Games'],
+	name: 'Dino Game',
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 0 1-.657.643 48.491 48.491 0 0 1-4.163-.3c-1.228-.158-2.33.895-2.33 2.134v0c0 1.26 1.09 2.22 2.34 2.14a48.089 48.089 0 0 1 3.27-.108c.43 0 .78.348.78.78v0c0 .22-.09.422-.234.577a8.398 8.398 0 0 0-2.07 4.238c-.19 1.14.513 2.163 1.578 2.428a2.07 2.07 0 0 0 2.478-1.41c.203-.636.37-1.294.524-1.947.128-.537.612-.898 1.16-.84 1.378.15 2.782.18 4.17.076 1.156-.087 2.03-1.09 1.883-2.24a8.52 8.52 0 0 0-1.568-3.7A2.01 2.01 0 0 1 18 8.053v0c0-1.064.82-1.98 1.88-2.08A48.678 48.678 0 0 0 24 5.328v0" /></svg>`
 } as CardDefinition & { type: 'dino-game' };

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

···
 		card.cardData = {};
 	},
 	maxH: 10,
-	canHaveLabel: true
+	canHaveLabel: true,
+
+	groups: ['Games'],
+
+	name: 'Tetris',
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M14 4h-4v4H6v4h4v4h4v-4h4V8h-4V4Z" /></svg>`
 } as CardDefinition & { type: 'tetris' };

src/lib/cards/GitHubProfileCard/CreateGitHubProfileCardModal.svelte

···
+<script lang="ts">
+	import { Button, Input, Modal, Subheading } from '@foxui/core';
+	import type { CreationModalComponentProps } from '../types';
+
+	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+
+	let errorMessage = $state('');
+</script>
+
+<Modal open={true} closeButton={false}>
+	<form
+		onsubmit={() => {
+			let input = item.cardData.href?.trim();
+			if (!input) return;
+
+			let username: string | undefined;
+
+			// Try parsing as URL first
+			try {
+				const parsed = new URL(input);
+				if (/^(www\.)?github\.com$/.test(parsed.hostname)) {
+					const segments = parsed.pathname.split('/').filter(Boolean);
+					if (
+						segments.length === 1 &&
+						/^[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,37}[a-zA-Z0-9])?$/.test(segments[0])
+					) {
+						username = segments[0];
+					}
+				}
+			} catch {
+				// Not a URL, try as plain username
+				if (/^[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,37}[a-zA-Z0-9])?$/.test(input)) {
+					username = input;
+				}
+			}
+
+			if (!username) {
+				errorMessage = 'Please enter a valid GitHub username or profile URL';
+				return;
+			}
+
+			item.cardData.user = username;
+			item.cardData.href = `https://github.com/${username}`;
+
+			item.w = 6;
+			item.mobileW = 8;
+			item.h = 3;
+			item.mobileH = 6;
+
+			oncreate?.();
+		}}
+		class="flex flex-col gap-2"
+	>
+		<Subheading>Enter a GitHub username or profile URL</Subheading>
+		<Input
+			bind:value={item.cardData.href}
+			placeholder="username or https://github.com/username"
+			class="mt-4"
+		/>
+
+		{#if errorMessage}
+			<p class="mt-2 text-sm text-red-600">{errorMessage}</p>
+		{/if}
+
+		<div class="mt-4 flex justify-end gap-2">
+			<Button onclick={oncancel} variant="ghost">Cancel</Button>
+			<Button type="submit">Create</Button>
+		</div>
+	</form>
+</Modal>

src/lib/cards/GitHubProfileCard/index.ts

···
 import type { CardDefinition } from '../types';
+import CreateGitHubProfileCardModal from './CreateGitHubProfileCardModal.svelte';
 import type GithubContributionsGraph from './GithubContributionsGraph.svelte';
 import GitHubProfileCard from './GitHubProfileCard.svelte';
 import type { GitHubContributionsData } from './types';
···
 export const GithubProfileCardDefitition = {
 	type: 'githubProfile',
 	contentComponent: GitHubProfileCard,
+	creationModalComponent: CreateGitHubProfileCardModal,
 
 	loadData: async (items) => {
 		const githubData: Record<string, GithubContributionsGraph> = {};
···
 
 		return item;
 	},
-	name: 'Github Profile'
+	name: 'Github Profile',
+
+	groups: ['Social'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" /></svg>`
 } as CardDefinition & { type: 'githubProfile' };
 
 function getGitHubUsername(url: string | undefined): string | undefined {

src/lib/cards/GuestbookCard/index.ts

···
 
 		return results;
 	},
-	name: 'Guestbook'
+	name: 'Guestbook',
+	groups: ['Social'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" /></svg>`
 } as CardDefinition & { type: 'guestbook' };

src/lib/cards/ImageCard/index.ts

···
 	},
 	urlHandlerPriority: 3,
 
-	name: 'Image Card',
+	name: 'Image',
+
+	canHaveLabel: true,
+
+	groups: ['Core'],
 
-	canHaveLabel: true
+	icon: `<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="2"
+					stroke="currentColor"
+					class="size-4"
+				>
+					<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.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+					/>
+				</svg>`
 } as CardDefinition & { type: 'image' };

src/lib/cards/LatestBlueskyPostCard/index.ts

···
 
 		return JSON.parse(JSON.stringify(authorFeed));
 	},
-	minW: 4
+	minW: 4,
+
+	name: 'Latest Bluesky Post',
+
+	groups: ['Social'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4"><path d="M6.335 3.836a47.2 47.2 0 0 1 5.354 4.94c.088.093.165.18.232.26a18 18 0 0 1 .232-.26 47.2 47.2 0 0 1 5.355-4.94C18.882 2.687 21.46 1.37 22.553 2.483c.986 1.003.616 4.264.305 5.857-.567 2.902-2.018 4.274-3.703 4.542 2.348.386 4.678 1.96 3.13 5.602-1.97 4.636-7.065 1.763-9.795-.418a3 3 0 0 1-.18-.15 3 3 0 0 1-.18.15c-2.73 2.18-7.825 5.054-9.795.418-1.548-3.643.782-5.216 3.13-5.602C3.98 12.631 2.529 11.26 1.962 8.357c-.311-1.593-.681-4.854.305-5.857C3.361 1.37 5.94 2.687 6.335 3.836Z" /></svg>`
 } as CardDefinition & { type: 'latestPost' };

src/lib/cards/LinkCard/CreateLinkCardModal.svelte

···
+<script lang="ts">
+	import { Button, Input, Modal, Subheading } from '@foxui/core';
+	import type { CreationModalComponentProps } from '../types';
+	import { validateLink } from '$lib/helper';
+
+	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+
+	let isFetchingLocation = $state(false);
+
+	let errorMessage = $state('');
+</script>
+
+<Modal open={true} closeButton={false}>
+	<form
+		onsubmit={() => {
+			if (!item.cardData.href.trim()) return;
+
+			let link = validateLink(item.cardData.href);
+			if (!link) {
+				errorMessage = 'Invalid link';
+				return;
+			}
+
+			item.cardData.href = link;
+			item.cardData.domain = new URL(link).hostname;
+			item.cardData.hasFetched = false;
+
+			oncreate?.();
+		}}
+		class="flex flex-col gap-2"
+	>
+		<Subheading>Enter a link</Subheading>
+		<Input bind:value={item.cardData.href} class="mt-4" />
+
+		{#if errorMessage}
+			<p class="mt-2 text-sm text-red-600">{errorMessage}</p>
+		{/if}
+
+		<div class="mt-4 flex justify-end gap-2">
+			<Button onclick={oncancel} variant="ghost">Cancel</Button>
+			<Button type="submit" disabled={isFetchingLocation}>Create</Button>
+		</div>
+	</form>
+</Modal>

src/lib/cards/LinkCard/index.ts

···
 import { checkAndUploadImage, validateLink } from '$lib/helper';
 import type { CardDefinition } from '../types';
+import CreateLinkCardModal from './CreateLinkCardModal.svelte';
 import EditingLinkCard from './EditingLinkCard.svelte';
 import LinkCard from './LinkCard.svelte';
 import LinkCardSettings from './LinkCardSettings.svelte';
···
 	},
 	settingsComponent: LinkCardSettings,
 
-	name: 'Link Card',
+	creationModalComponent: CreateLinkCardModal,
+
+	name: 'Link',
 	canChange: (item) => Boolean(validateLink(item.cardData?.href)),
 	change: (item) => {
 		const href = validateLink(item.cardData?.href);
···
 		await checkAndUploadImage(item.cardData, 'favicon');
 		return item;
 	},
-	urlHandlerPriority: 0
+	urlHandlerPriority: 0,
+
+	groups: ['Core'],
+
+	icon: `<svg
+xmlns="http://www.w3.org/2000/svg"
+fill="none"
+viewBox="-2 -2 28 28"
+stroke-width="2"
+stroke="currentColor"
+class="size-4"
+>
+<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>`
 } as CardDefinition & { type: 'link' };

src/lib/cards/LivestreamCard/index.ts

···
 
 	urlHandlerPriority: 5,
 
-	name: 'stream.place Card'
+	name: 'Latest Livestream (stream.place)',
+	groups: ['Media'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" /></svg>`
 } as CardDefinition & { type: 'latestLivestream' };
 
 export const LivestreamEmbedCardDefitition = {

src/lib/cards/MapCard/index.ts

···
 	creationModalComponent: CreateMapCardModal,
 	allowSetColor: false,
 	canHaveLabel: true,
-	settingsComponent: MapCardSettings
+	settingsComponent: MapCardSettings,
+
+	groups: ['Core'],
+
+	name: 'Map',
+
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z" />
+</svg>
+`
 } as CardDefinition & { type: 'mapLocation' };
 
 export function getZoomLevel(type: string | undefined): number {

src/lib/cards/PopfeedReviews/PopfeedReviewsCard.svelte

···
 </script>
 
 <div class="z-10 flex h-full gap-4 overflow-x-scroll p-4">
-	{#each feed ?? [] as review (review.uri)}
-		{#if review.value.rating !== undefined && review.value.posterUrl}
-			<a
-				rel="noopener noreferrer"
-				target="_blank"
-				class="flex"
-				href="https://popfeed.social/review/{review.uri}"
-			>
-				<div
-					class="relative flex aspect-[2/3] h-full flex-col items-center justify-end overflow-hidden rounded-xl p-1"
+	{#if feed && feed.length > 0}
+		{#each feed as review (review.uri)}
+			{#if review.value.rating !== undefined && review.value.posterUrl}
+				<a
+					rel="noopener noreferrer"
+					target="_blank"
+					class="flex"
+					href="https://popfeed.social/review/{review.uri}"
 				>
-					<img
-						src={review.value.posterUrl}
-						alt=""
-						class="bg-base-200 absolute inset-0 -z-10 h-full w-full object-cover"
-					/>
-
 					<div
-						class="from-base-900/80 absolute right-0 bottom-0 left-0 h-1/3 bg-gradient-to-t via-transparent"
-					></div>
+						class="relative flex aspect-[2/3] h-full flex-col items-center justify-end overflow-hidden rounded-xl p-1"
+					>
+						<img
+							src={review.value.posterUrl}
+							alt=""
+							class="bg-base-200 absolute inset-0 -z-10 h-full w-full object-cover"
+						/>
 
-					<Rating class="z-10 text-lg" rating={review.value.rating} />
-				</div>
-			</a>
-		{/if}
-	{/each}
+						<div
+							class="from-base-900/80 absolute right-0 bottom-0 left-0 h-1/3 bg-gradient-to-t via-transparent"
+						></div>
+
+						<Rating class="z-10 text-lg" rating={review.value.rating} />
+					</div>
+				</a>
+			{/if}
+		{/each}
+	{:else if feed}
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full w-full items-center justify-center text-center text-sm"
+		>
+			No reviews yet.
+		</div>
+	{:else}
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full w-full items-center justify-center text-center text-sm"
+		>
+			Loading reviews...
+		</div>
+	{/if}
 </div>

src/lib/cards/PopfeedReviews/index.ts

···
 	},
 	minH: 3,
 	sidebarButtonText: 'Popfeed Reviews',
-	canHaveLabel: true
+	canHaveLabel: true,
+
+	groups: ['Media'],
+	name: 'Movie and TV Reviews',
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" 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>`
 } as CardDefinition & { type: 'recentPopfeedReviews' };

src/lib/cards/SectionCard/index.ts

···
 	defaultColor: 'transparent',
 	maxH: 1,
 	canResize: false,
-	settingsComponent: SectionCardSettings
+	settingsComponent: SectionCardSettings,
+
+	name: 'Heading',
+	groups: ['Core'],
+
+	icon: `<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="size-4"
+	><path d="M6 12h12" /><path d="M6 20V4" /><path d="M18 20V4" /></svg
+>`
 } as CardDefinition & { type: 'section' };
 
 export const textAlignClasses: Record<string, string> = {

src/lib/cards/SpotifyCard/index.ts

···
 	name: 'Spotify Embed',
 	canResize: true,
 	minW: 4,
-	minH: 5
+	minH: 5,
+
+	groups: ['Media'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z" /></svg>`
 } as CardDefinition & { type: typeof cardType };
 
 // Match Spotify album and playlist URLs

src/lib/cards/StandardSiteDocumentListCard/StandardSiteDocumentListCard.svelte

···
 </script>
 
 <div class="flex h-full flex-col gap-10 overflow-y-scroll p-8">
-	{#each feed ?? [] as document (document.uri)}
-		<BlogEntry
-			title={document.value.title}
-			description={document.value.description}
-			date={document.value.publishedAt}
-			href={document.value.href}
-		/>
-	{/each}
+	{#if feed && feed.length > 0}
+		{#each feed as document (document.uri)}
+			<BlogEntry
+				title={document.value.title}
+				description={document.value.description}
+				date={document.value.publishedAt}
+				href={document.value.href}
+			/>
+		{/each}
+	{:else if feed}
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full flex-col items-center justify-center gap-2 text-center text-sm"
+		>
+			<span>No blog posts found.</span>
+			<span>
+				Create some on <a
+					href="https://leaflet.pub"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="underline">Leaflet</a
+				>
+				or
+				<a href="https://pckt.pub" target="_blank" rel="noopener noreferrer" class="underline"
+					>Pckt</a
+				>
+			</span>
+		</div>
+	{:else}
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
+		>
+			Loading blog posts...
+		</div>
+	{/if}
 </div>

src/lib/cards/StandardSiteDocumentListCard/index.ts

···
 		return records;
 	},
 
-	sidebarButtonText: 'site.standard.document list'
+	sidebarButtonText: 'site.standard.document list',
+
+	name: 'Blog Posts',
+
+	groups: ['Content'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" /></svg>`
 } as CardDefinition & { type: 'site.standard.document list' };

src/lib/cards/StatusphereCard/index.ts

···
 			item.cardData.label = item.cardData.title;
 		}
 	},
-	canHaveLabel: true
+	canHaveLabel: true,
+
+	name: 'Emoji',
+	groups: ['Media'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" /></svg>`
 } as CardDefinition & { type: 'statusphere' };
 
 export function emojiToNotoAnimatedWebp(emoji: string | undefined): string | undefined {

src/lib/cards/TealFMPlaysCard/TealFMPlaysCard.svelte

···
 {/snippet}
 
 <div class="z-10 flex h-full w-full flex-col gap-4 overflow-y-scroll p-4">
-	{#each feed ?? [] as play (play.uri)}
-		{#if play.value.originUrl}
-			<a href={play.value.originUrl} target="_blank" rel="noopener noreferrer" class="w-full">
+	{#if feed && feed.length > 0}
+		{#each feed as play (play.uri)}
+			{#if play.value.originUrl}
+				<a href={play.value.originUrl} target="_blank" rel="noopener noreferrer" class="w-full">
+					{@render musicItem(play)}
+				</a>
+			{:else}
 				{@render musicItem(play)}
-			</a>
-		{:else}
-			{@render musicItem(play)}
-		{/if}
-	{/each}
+			{/if}
+		{/each}
+	{:else if feed}
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
+		>
+			No recent plays found.
+		</div>
+	{:else}
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
+		>
+			Loading plays...
+		</div>
+	{/if}
 </div>

src/lib/cards/TealFMPlaysCard/index.ts

···
 	},
 	minW: 4,
 	sidebarButtonText: 'teal.fm Plays',
-	canHaveLabel: true
+	canHaveLabel: true,
+
+	name: 'Teal.fm Plays',
+
+	groups: ['Media'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 1 1-.99-3.467l2.31-.66a2.25 2.25 0 0 0 1.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 0 1-.99-3.467l2.31-.66A2.25 2.25 0 0 0 9 15.553Z" /></svg>`
 } as CardDefinition & { type: 'recentTealFMPlays' };

src/lib/cards/TextCard/index.ts

···
 		};
 	},
 
-	settingsComponent: TextCardSettings
+	settingsComponent: TextCardSettings,
+
+	name: 'Text',
+
+	groups: ['Core'],
+
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4"
+					><path
+						fill="none"
+						stroke="currentColor"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="m15 16l2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16m-6.303-2h5.606M2 16l4.039-9.69a.5.5 0 0 1 .923 0L11 16m-7.696-3h6.392"
+					/></svg
+				>`
 } as CardDefinition & { type: 'text' };
 
 export const textAlignClasses: Record<string, string> = {

src/lib/cards/TimerCard/index.ts

···
 	type: 'timer',
 	contentComponent: TimerCard,
 	settingsComponent: TimerCardSettings,
-	sidebarButtonText: 'Timer',
 
 	createNew: (card) => {
 		card.w = 4;
···
 	},
 
 	allowSetColor: true,
-	name: 'Timer Card',
 	minW: 4,
-	canHaveLabel: true
+	canHaveLabel: true,
+
+	migrate: (item) => {
+		const data = item.cardData as TimerCardData;
+		if (data.mode === 'event') {
+			item.cardType = 'countdown';
+			item.cardData = { targetDate: data.targetDate };
+		} else {
+			item.cardType = 'clock';
+			item.cardData = { timezone: data.timezone };
+		}
+		if (data.label) {
+			item.cardData.label = data.label;
+		}
+	}
 } as CardDefinition & { type: 'timer' };

src/lib/cards/VCardCard/index.ts

···
 
 	sidebarButtonText: 'vCard',
 	allowSetColor: true,
-	name: 'vCard Card'
+	name: 'vCard Card',
+	groups: ['Social'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z" /></svg>`
 } as CardDefinition & { type: 'vcard' };

src/lib/cards/VideoCard/index.ts

···
 	},
 	settingsComponent: VideoCardSettings,
 
-	name: 'Video Card'
+	name: 'Video',
+	groups: ['Media'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" /></svg>`
 } as CardDefinition & { type: 'video' };

src/lib/cards/YoutubeVideoCard/CreateYoutubeCardModal.svelte

···
+<script lang="ts">
+	import { Button, Input, Modal, Subheading } from '@foxui/core';
+	import type { CreationModalComponentProps } from '../types';
+	import { matcher } from './index';
+
+	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+
+	let errorMessage = $state('');
+</script>
+
+<Modal open={true} closeButton={false}>
+	<form
+		onsubmit={() => {
+			const url = item.cardData.href?.trim();
+			if (!url) return;
+
+			const id = matcher(url);
+			if (!id) {
+				errorMessage = 'Please enter a valid YouTube URL';
+				return;
+			}
+
+			item.cardData.youtubeId = id;
+			item.cardData.poster = `https://i.ytimg.com/vi/${id}/hqdefault.jpg`;
+			item.cardData.showInline = true;
+
+			item.w = 4;
+			item.mobileW = 8;
+			item.h = 3;
+			item.mobileH = 5;
+
+			oncreate?.();
+		}}
+		class="flex flex-col gap-2"
+	>
+		<Subheading>Enter a YouTube URL</Subheading>
+		<Input
+			bind:value={item.cardData.href}
+			placeholder="https://youtube.com/watch?v=..."
+			class="mt-4"
+		/>
+
+		{#if errorMessage}
+			<p class="mt-2 text-sm text-red-600">{errorMessage}</p>
+		{/if}
+
+		<div class="mt-4 flex justify-end gap-2">
+			<Button onclick={oncancel} variant="ghost">Cancel</Button>
+			<Button type="submit">Create</Button>
+		</div>
+	</form>
+</Modal>

src/lib/cards/YoutubeVideoCard/index.ts

···
 import type { CardDefinition } from '../types';
+import CreateYoutubeCardModal from './CreateYoutubeCardModal.svelte';
 import YoutubeCard from './YoutubeCard.svelte';
 import YoutubeCardSettings from './YoutubeCardSettings.svelte';
 
···
 	type: 'youtubeVideo',
 	contentComponent: YoutubeCard,
 	settingsComponent: YoutubeCardSettings,
+	creationModalComponent: CreateYoutubeCardModal,
 	createNew: (card) => {
 		card.cardType = 'youtubeVideo';
 		card.cardData = {};
···
 
 		return item;
 	},
-	name: 'Youtube Video'
+	name: 'Youtube Video',
+
+	groups: ['Media'],
+
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-3" viewBox="0 0 256 180"
+			><path
+				fill="currentColor"
+				d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134"
+			/><path fill="currentColor" class="invert" d="m102.421 128.06l66.328-38.418l-66.328-38.418z" /></svg
+		>`
 } as CardDefinition & { type: 'youtubeVideo' };
 
 // Thanks to eleventy-plugin-youtube-embed

src/lib/cards/index.ts

···
 import { VCardCardDefinition } from './VCardCard';
 import { DrawCardDefinition } from './DrawCard';
 import { TimerCardDefinition } from './TimerCard';
+import { ClockCardDefinition } from './ClockCard';
+import { CountdownCardDefinition } from './CountdownCard';
 import { SpotifyCardDefinition } from './SpotifyCard';
 import { ButtonCardDefinition } from './ButtonCard';
 import { GuestbookCardDefinition } from './GuestbookCard';
···
 	VCardCardDefinition,
 	DrawCardDefinition,
 	TimerCardDefinition,
+	ClockCardDefinition,
+	CountdownCardDefinition,
 	SpotifyCardDefinition
 	// Model3DCardDefinition
 ] as const;

src/lib/cards/types.ts

···
 	canHaveLabel?: boolean;
 
 	migrate?: (item: Item) => void;
+
+	groups?: string[];
+
+	keywords?: string[];
+
+	icon?: string;
 };

src/lib/components/card-command/CardCommand.svelte

···
+<script lang="ts">
+	import { AllCardDefinitions } from '$lib/cards';
+	import type { CardDefinition } from '$lib/cards/types';
+	import { Command, Dialog } from 'bits-ui';
+	import { isTyping } from '$lib/helper';
+
+	const CardDefGroups = [
+		'Core',
+		...Array.from(
+			new Set(
+				AllCardDefinitions.map((cardDef) => cardDef.groups)
+					.flat()
+					.filter((g) => g)
+			)
+		)
+			.sort()
+			.filter((g) => g !== 'Core')
+	];
+
+	let {
+		open = $bindable(false),
+		onselect,
+		onlink
+	}: {
+		open: boolean;
+		onselect: (cardDef: CardDefinition) => void;
+		onlink?: (url: string, cardDef: CardDefinition) => void;
+	} = $props();
+
+	let searchValue = $state('');
+
+	let normalizedUrl = $derived.by(() => {
+		if (!searchValue || searchValue.length < 8) return '';
+		try {
+			const val = searchValue.trim();
+			const urlStr = val.startsWith('http') ? val : `https://${val}`;
+			const url = new URL(urlStr);
+			if (!url.hostname.includes('.')) return '';
+			return urlStr;
+		} catch {
+			return '';
+		}
+	});
+
+	let urlMatchingCards = $derived.by(() => {
+		if (!normalizedUrl) return [];
+		return AllCardDefinitions.filter((d) => d.onUrlHandler)
+			.filter((d) => {
+				try {
+					const testItem = { cardData: {} };
+					return d.onUrlHandler!(normalizedUrl, testItem as any);
+				} catch {
+					return false;
+				}
+			})
+			.toSorted((a, b) => (b.urlHandlerPriority ?? 0) - (a.urlHandlerPriority ?? 0));
+	});
+
+	function selectUrl(cardDef: CardDefinition) {
+		const url = normalizedUrl;
+		open = false;
+		searchValue = '';
+		onlink?.(url, cardDef);
+	}
+
+	function commandFilter(value: string, search: string, keywords?: string[]): number {
+		if (value.startsWith('url:')) return 1;
+		const s = search.toLowerCase();
+		for (const t of [value, ...(keywords ?? [])]) {
+			if (t.toLowerCase().includes(s)) return 1;
+		}
+		return 0;
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			open = true;
+		}
+		if (e.key === '+' && !isTyping()) {
+			e.preventDefault();
+			open = true;
+		}
+	}
+</script>
+
+<svelte:document onkeydown={handleKeydown} />
+
+<Dialog.Root bind:open>
+	<Dialog.Portal>
+		<Dialog.Overlay
+			class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
+		/>
+		<Dialog.Content
+			class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-36 left-[50%] z-50 w-full max-w-[94%] translate-x-[-50%] outline-hidden sm:max-w-lg md:w-full"
+		>
+			<Dialog.Title class="sr-only">Command Menu</Dialog.Title>
+			<Dialog.Description class="sr-only">
+				This is the command menu. Use the arrow keys to navigate and press ⌘K to open the search
+				bar.
+			</Dialog.Description>
+			<Command.Root
+				filter={commandFilter}
+				class="border-base-200 dark:border-base-800 mx-auto flex h-full w-full max-w-[90vw] flex-col overflow-hidden rounded-2xl border bg-white dark:bg-black"
+			>
+				<Command.Input
+					class="focus-override placeholder:text-base-900/50 dark:placeholder:text-base-50/50 border-base-200 dark:border-base-800 bg-base-100 mx-1 mt-1 inline-flex truncate rounded-2xl rounded-tl-2xl px-4 text-sm transition-colors focus:ring-0 focus:outline-hidden dark:bg-black"
+					placeholder="Search for a card or paste a link..."
+					oninput={(e) => {
+						searchValue = e.currentTarget.value;
+					}}
+				/>
+
+				<Command.List
+					class="focus:outline-accent-500/50 max-h-[50vh] overflow-x-hidden overflow-y-auto rounded-br-2xl rounded-bl-2xl bg-white px-2 pb-2 focus:border-0 dark:bg-black"
+				>
+					<Command.Viewport>
+						<Command.Empty
+							class="text-base-900 dark:text-base-100 flex w-full items-center justify-center pt-8 pb-6 text-sm"
+						>
+							No results found.
+						</Command.Empty>
+
+						{#if urlMatchingCards.length > 0}
+							<Command.Group>
+								<Command.GroupHeading
+									class="text-base-600 dark:text-base-400 px-3 pt-3 pb-2 text-xs"
+								>
+									Add from link
+								</Command.GroupHeading>
+								<Command.GroupItems>
+									{#each urlMatchingCards as cardDef (cardDef.type)}
+										<Command.Item
+											value="url:{cardDef.type}"
+											onSelect={() => {
+												selectUrl(cardDef);
+											}}
+											class="rounded-button data-selected:bg-accent-500/10 flex h-10 cursor-pointer items-center gap-2 rounded-xl px-3 py-2.5 text-sm outline-hidden select-none"
+										>
+											{#if cardDef.icon}
+												<div class="text-base-700 dark:text-base-300">
+													{@html cardDef.icon}
+												</div>
+											{/if}
+											{cardDef.name}
+										</Command.Item>
+									{/each}
+								</Command.GroupItems>
+							</Command.Group>
+							<Command.Separator class="bg-base-900/5 dark:bg-base-50/5 my-1 h-px w-full" />
+						{/if}
+
+						{#each CardDefGroups as group, index (group)}
+							{#if group && AllCardDefinitions.some((cardDef) => cardDef.groups?.includes(group))}
+								<Command.Group>
+									<Command.GroupHeading
+										class="text-base-600 dark:text-base-400 px-3 pt-4 pb-2 text-xs"
+									>
+										{group}
+									</Command.GroupHeading>
+									<Command.GroupItems>
+										{#each AllCardDefinitions.filter( (cardDef) => cardDef.groups?.includes(group) ) as cardDef (cardDef.type)}
+											<Command.Item
+												onSelect={() => {
+													open = false;
+													searchValue = '';
+													onselect(cardDef);
+												}}
+												class="rounded-button data-selected:bg-accent-500/10 flex h-10 cursor-pointer items-center gap-2 rounded-xl px-3 py-2.5 text-sm outline-hidden select-none"
+												keywords={[group, cardDef.type, ...(cardDef.keywords || [])]}
+											>
+												{#if cardDef.icon}
+													<div class="text-base-700 dark:text-base-300">
+														{@html cardDef.icon}
+													</div>
+												{/if}
+												{cardDef.name}
+											</Command.Item>
+										{/each}
+									</Command.GroupItems>
+								</Command.Group>
+								{#if index < CardDefGroups.length - 1}
+									<Command.Separator class="bg-base-900/5 dark:bg-base-50/5 my-1 h-px w-full" />
+								{/if}
+							{/if}
+						{/each}
+					</Command.Viewport>
+				</Command.List>
+			</Command.Root>
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>

src/lib/website/EditBar.svelte

···
 	import { dev } from '$app/environment';
 	import { user } from '$lib/atproto';
 	import type { WebsiteData } from '$lib/types';
-	import { Button, Input, Navbar, Popover, Toggle, toast } from '@foxui/core';
+	import { Button, Navbar, Toggle, toast } from '@foxui/core';
 
 	let {
 		data,
-		linkValue = $bindable(),
-		newCard,
-		addLink,
 
 		showingMobileView = $bindable(),
 		isSaving = $bindable(),
···
 
 		save,
 
-		handleImageInputChange,
-		handleVideoInputChange
+		showCardCommand
 	}: {
 		data: WebsiteData;
-		linkValue: string;
-		newCard: (type: string) => void;
-		addLink: (url: string) => void;
 
 		showingMobileView: boolean;
 
···
 
 		save: () => Promise<void>;
 
-		handleImageInputChange: (evt: Event) => void;
-		handleVideoInputChange: (evt: Event) => void;
+		showCardCommand: () => void;
 	} = $props();
-
-	let linkPopoverOpen = $state(false);
-
-	let imageInputRef: HTMLInputElement | undefined = $state();
-	let videoInputRef: HTMLInputElement | undefined = $state();
 
 	function getShareUrl() {
 		const base = typeof window !== 'undefined' ? window.location.origin : '';
···
 	}
 </script>
 
-<input
-	type="file"
-	accept="image/*"
-	onchange={handleImageInputChange}
-	class="hidden"
-	multiple
-	bind:this={imageInputRef}
-/>
-
-<input
-	type="file"
-	accept="video/*"
-	onchange={handleVideoInputChange}
-	class="hidden"
-	multiple
-	bind:this={videoInputRef}
-/>
-
 {#if dev || (user.isLoggedIn && user.profile?.did === data.did)}
 	<Navbar
 		class={[
···
 		]}
 	>
 		<div class="flex items-center gap-2">
-			<Button
-				size="iconLg"
-				variant="ghost"
-				class="backdrop-blur-none"
-				onclick={() => {
-					newCard('section');
-				}}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					><path d="M6 12h12" /><path d="M6 20V4" /><path d="M18 20V4" /></svg
-				>
-			</Button>
-
-			<Button
-				size="iconLg"
-				variant="ghost"
-				class="backdrop-blur-none"
-				onclick={() => {
-					newCard('text');
-				}}
-			>
-				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
-					><path
-						fill="none"
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="m15 16l2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16m-6.303-2h5.606M2 16l4.039-9.69a.5.5 0 0 1 .923 0L11 16m-7.696-3h6.392"
-					/></svg
-				>
-			</Button>
-
-			<Popover sideOffset={16} bind:open={linkPopoverOpen} class="bg-base-100 dark:bg-base-900">
-				{#snippet child({ props })}
-					<Button
-						size="iconLg"
-						variant="ghost"
-						class="backdrop-blur-none"
-						onclick={() => {
-							newCard('link');
-						}}
-						{...props}
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="-2 -2 28 28"
-							stroke-width="2"
-							stroke="currentColor"
-						>
-							<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>
-					</Button>
-				{/snippet}
-				<Input
-					spellcheck={false}
-					type="url"
-					bind:value={linkValue}
-					onkeydown={(event) => {
-						if (event.code === 'Enter') {
-							addLink(linkValue);
-							event.preventDefault();
-						}
-					}}
-					placeholder="Enter link"
-				/>
-				<Button onclick={() => addLink(linkValue)} size="icon"
-					><svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="2"
-						stroke="currentColor"
-						class="size-6"
-					>
-						<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
-					</svg>
-				</Button>
-			</Popover>
-
-			<Button
-				size="iconLg"
-				variant="ghost"
-				class="backdrop-blur-none"
-				onclick={() => {
-					imageInputRef?.click();
-				}}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke-width="2"
-					stroke="currentColor"
-				>
-					<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.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
-					/>
-				</svg>
-			</Button>
-
-			{#if dev}
-				<Button
-					size="iconLg"
-					variant="ghost"
-					class="backdrop-blur-none"
-					onclick={() => {
-						videoInputRef?.click();
-					}}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"
-						/>
-					</svg>
-				</Button>
-			{/if}
-
-			<Button size="iconLg" variant="ghost" class="backdrop-blur-none" popovertarget="mobile-menu">
+			<Button size="iconLg" variant="ghost" class="backdrop-blur-none" onclick={showCardCommand}>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					fill="none"

src/lib/website/EditableWebsite.svelte

···
 	import EditingCard from '../cards/Card/EditingCard.svelte';
 	import { AllCardDefinitions, CardDefinitionsByType } from '../cards';
 	import { tick, type Component } from 'svelte';
-	import type { CreationModalComponentProps } from '../cards/types';
+	import type { CardDefinition, CreationModalComponentProps } from '../cards/types';
 	import { dev } from '$app/environment';
 	import { setIsMobile } from './context';
 	import BaseEditingCard from '../cards/BaseCard/BaseEditingCard.svelte';
···
 	import { user } from '$lib/atproto';
 	import { launchConfetti } from '@foxui/visual';
 	import Controls from './Controls.svelte';
+	import CardCommand from '$lib/components/card-command/CardCommand.svelte';
 
 	let {
 		data
···
 		return { x: gridX, y: gridY, swapWithId, placement };
 	}
 
-	let linkValue = $state('');
-
-	function addLink(url: string) {
+	function addLink(url: string, specificCardDef?: CardDefinition) {
 		let link = validateLink(url);
 		if (!link) {
 			toast.error('invalid link');
···
 		}
 		let item = createEmptyCard(data.page);
 
+		if (specificCardDef?.onUrlHandler?.(link, item)) {
+			item.cardType = specificCardDef.type;
+			newItem.item = item;
+			saveNewItem();
+			toast(specificCardDef.name + ' added!');
+			return;
+		}
+
 		for (const cardDef of AllCardDefinitions.toSorted(
 			(a, b) => (b.urlHandlerPriority ?? 0) - (a.urlHandlerPriority ?? 0)
 		)) {
···
 				break;
 			}
 		}
-
-		if (linkValue === url) {
-			linkValue = '';
-		}
 	}
 
 	function getImageDimensions(src: string): Promise<{ width: number; height: number }> {
···
 	}
 
 	// $inspect(items);
+
+	let showCardCommand = $state(true);
 </script>
 
 <svelte:body
···
 		</div>
 	{/if}
 
+	<CardCommand
+		bind:open={showCardCommand}
+		onselect={(cardDef: CardDefinition) => {
+			if (cardDef.type === 'image') {
+				const input = document.getElementById('image-input') as HTMLInputElement;
+				if (input) {
+					input.click();
+					return;
+				}
+			} else if (cardDef.type === 'video') {
+				const input = document.getElementById('video-input') as HTMLInputElement;
+				if (input) {
+					input.click();
+					return;
+				}
+			} else {
+				newCard(cardDef.type);
+			}
+		}}
+		onlink={(url, cardDef) => {
+			addLink(url, cardDef);
+		}}
+	/>
+
 	<Controls bind:data />
 
 	{#if showingMobileView}
···
 		</div>
 	</Sidebar>
 
+	<input
+		type="file"
+		accept="image/*"
+		onchange={handleImageInputChange}
+		class="hidden"
+		id="image-input"
+		multiple
+	/>
+
+	<input
+		type="file"
+		accept="video/*"
+		onchange={handleVideoInputChange}
+		class="hidden"
+		id="video-input"
+		multiple
+	/>
+
 	<EditBar
 		{data}
-		bind:linkValue
 		bind:isSaving
 		bind:showingMobileView
 		{hasUnsavedChanges}
-		{newCard}
-		{addLink}
 		{save}
-		{handleImageInputChange}
-		{handleVideoInputChange}
+		showCardCommand={() => {
+			showCardCommand = true;
+		}}
 	/>
 
 	<Toaster />