Merge pull request #1 from flo-bit/next

Next update

.claude/settings.local.json

···
 			"Bash(pnpm exec svelte-kit:*)",
 			"Bash(pnpm build:*)",
 			"Bash(pnpm remove:*)",
-			"Bash(grep:*)"
+			"Bash(grep:*)",
+			"Bash(find:*)",
+			"Bash(npx prettier:*)"
 		]
 	}
 }

src/lib/cards/ATProtoCollectionsCard/index.ts

···
 		item.w = 4;
 		item.mobileW = 8;
 	},
-	sidebarButtonText: 'Atmosphere Collections',
-
 	name: 'ATProto Collections',
 
+	keywords: ['bluesky', 'records', 'pds', 'data'],
 	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

···
 	urlHandlerPriority: 1,
 	canHaveLabel: true,
 
+	keywords: [
+		'twitter',
+		'instagram',
+		'tiktok',
+		'youtube',
+		'github',
+		'discord',
+		'linkedin',
+		'mastodon'
+	],
 	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

···
 	contentComponent: BlueskyMediaCard,
 	createNew: () => {},
 	creationModalComponent: CreateBlueskyMediaCardModal,
-	sidebarButtonText: 'Bluesky Media',
 	canHaveLabel: true,
 
+	keywords: ['bsky', 'atproto', 'media', 'feed'],
 	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

···
 	type: 'blueskyPost',
 	contentComponent: BlueskyPostCard,
 	creationModalComponent: CreateBlueskyPostCardModal,
-	sidebarButtonText: 'Bluesky Post',
 	createNew: (card) => {
 		card.cardType = 'blueskyPost';
 		card.w = 4;
···
 	minW: 4,
 	name: 'Bluesky Post',
 
+	keywords: ['skeet', 'bsky', 'atproto', '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/BlueskyProfileCard/index.ts

···
 export const BlueskyProfileCardDefinition = {
 	type: 'blueskyProfile',
 	contentComponent: BlueskyProfileCard,
+	keywords: ['bsky', 'atproto', 'account', 'user'],
 	createNew: () => {}
 } as CardDefinition & { type: 'blueskyProfile' };

src/lib/cards/ButtonCard/index.ts

···
 	contentComponent: ButtonCard,
 	editingContentComponent: EditingButtonCard,
 	settingsComponent: ButtonCardSettings,
-	sidebarButtonText: 'Button',
-
 	createNew: (card) => {
 		card.cardData = {
 			text: 'Click me'
···
 	maxW: 8,
 	maxH: 4,
 
+	keywords: ['cta', 'action', 'click', 'link'],
 	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/DrawCard/index.ts

···
 	name: 'Drawing',
 	contentComponent: DrawCard,
 	editingContentComponent: EditingDrawCard,
-	sidebarButtonText: 'Draw',
 	defaultColor: 'base',
 	allowSetColor: true,
 	minW: 2,
···
 		};
 	},
 
+	keywords: ['paint', 'sketch', 'doodle', 'canvas', 'art'],
 	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

···
 	// 	return item;
 	// },
 	name: 'Embed',
+	keywords: ['iframe', 'widget', 'html', 'website'],
 	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

···
 	type: 'event',
 	contentComponent: EventCard,
 	creationModalComponent: CreateEventCardModal,
-	sidebarButtonText: 'Event',
-
 	createNew: (card) => {
 		card.w = 4;
 		card.h = 4;
···
 
 	name: 'Event',
 
+	keywords: ['calendar', 'meetup', 'schedule', 'date', 'rsvp'],
 	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

···
 	},
 	creationModalComponent: CreateFluidTextCardModal,
 	settingsComponent: FluidTextCardSettings,
-	sidebarButtonText: 'Fluid Text',
 	defaultColor: 'transparent',
 	allowSetColor: true,
 	minW: 2,
 
+	keywords: ['animated', 'big text', 'headline', 'display'],
 	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/FriendsCard/FriendsCard.svelte

···
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { ContentComponentProps } from '../types';
+	import { getAdditionalUserData, getCanEdit, getIsMobile } from '$lib/website/context';
+	import { getBlentoOrBskyProfile } from '$lib/atproto/methods';
+	import type { FriendsProfile } from '.';
+	import type { Did } from '@atcute/lexicons';
+	import { Avatar } from '@foxui/core';
+
+	let { item }: ContentComponentProps = $props();
+
+	const isMobile = getIsMobile();
+	const canEdit = getCanEdit();
+	const additionalData = getAdditionalUserData();
+
+	let dids: string[] = $derived(item.cardData.friends ?? []);
+
+	let serverProfiles: FriendsProfile[] = $derived(
+		(additionalData[item.cardType] as FriendsProfile[]) ?? []
+	);
+
+	let clientProfiles: FriendsProfile[] = $state([]);
+
+	let profiles = $derived.by(() => {
+		if (serverProfiles.length > 0) {
+			return dids
+				.map((did) => serverProfiles.find((p) => p.did === did))
+				.filter((p): p is FriendsProfile => !!p);
+		}
+		return dids
+			.map((did) => clientProfiles.find((p) => p.did === did))
+			.filter((p): p is FriendsProfile => !!p);
+	});
+
+	onMount(() => {
+		if (serverProfiles.length === 0 && dids.length > 0) {
+			loadProfiles();
+		}
+	});
+
+	async function loadProfiles() {
+		const results = await Promise.all(
+			dids.map((did) => getBlentoOrBskyProfile({ did: did as Did }).catch(() => undefined))
+		);
+		clientProfiles = results.filter(
+			(p): p is FriendsProfile => !!p && p.handle !== 'handle.invalid'
+		);
+	}
+
+	// Reload when dids change in editing mode
+	$effect(() => {
+		if (canEdit() && dids.length > 0) {
+			loadProfiles();
+		}
+	});
+
+	let sizeClass = $derived.by(() => {
+		const w = isMobile() ? item.mobileW / 2 : item.w;
+		if (w < 3) return 'sm';
+		if (w < 5) return 'md';
+		return 'lg';
+	});
+
+	function getLink(profile: FriendsProfile): string {
+		if (profile.hasBlento && profile.handle && profile.handle !== 'handle.invalid') {
+			return `/${profile.handle}`;
+		}
+		if (profile.handle && profile.handle !== 'handle.invalid') {
+			return `https://bsky.app/profile/${profile.handle}`;
+		}
+		return `https://bsky.app/profile/${profile.did}`;
+	}
+</script>
+
+<div class="flex h-full w-full items-center justify-center overflow-hidden px-2">
+	{#if dids.length === 0}
+		{#if canEdit()}
+			<span class="text-base-400 dark:text-base-500 accent:text-accent-300 text-sm">
+				Add friends in settings
+			</span>
+		{/if}
+	{:else}
+		{@const olX = sizeClass === 'sm' ? 12 : sizeClass === 'md' ? 20 : 24}
+		{@const olY = sizeClass === 'sm' ? 8 : sizeClass === 'md' ? 12 : 16}
+		<div class="">
+			<div class="flex flex-wrap items-center justify-center" style="padding: {olY}px 0 0 {olX}px;">
+				{#each profiles as profile (profile.did)}
+					<a
+						href={getLink(profile)}
+						class="accent:ring-accent-500 relative block rounded-full ring-2 ring-white transition-transform hover:scale-110 dark:ring-neutral-900"
+						style="margin: -{olY}px 0 0 -{olX}px;"
+					>
+						<Avatar
+							src={profile.avatar}
+							alt={profile.handle}
+							class={sizeClass === 'sm' ? 'size-12' : sizeClass === 'md' ? 'size-16' : 'size-20'}
+						/>
+					</a>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>

src/lib/cards/FriendsCard/FriendsCardSettings.svelte

···
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { Item } from '$lib/types';
+	import type { SettingsComponentProps } from '../types';
+	import type { AppBskyActorDefs } from '@atcute/bluesky';
+	import type { Did } from '@atcute/lexicons';
+	import type { FriendsProfile } from '.';
+	import { getBlentoOrBskyProfile } from '$lib/atproto/methods';
+	import HandleInput from '$lib/atproto/UI/HandleInput.svelte';
+	import { Avatar, Button } from '@foxui/core';
+
+	let { item = $bindable<Item>() }: SettingsComponentProps = $props();
+
+	let handleValue = $state('');
+	let inputRef: HTMLInputElement | null = $state(null);
+	let profiles: FriendsProfile[] = $state([]);
+
+	let dids: string[] = $derived(item.cardData.friends ?? []);
+
+	onMount(() => {
+		loadProfiles();
+	});
+
+	async function loadProfiles() {
+		const results = await Promise.all(
+			dids.map((did) => getBlentoOrBskyProfile({ did: did as Did }).catch(() => undefined))
+		);
+		profiles = results.filter((p): p is FriendsProfile => !!p && p.handle !== 'handle.invalid');
+	}
+
+	function addFriend(actor: AppBskyActorDefs.ProfileViewBasic) {
+		if (!item.cardData.friends) item.cardData.friends = [];
+		if (item.cardData.friends.includes(actor.did)) return;
+		item.cardData.friends = [...item.cardData.friends, actor.did];
+		profiles = [
+			...profiles,
+			{
+				did: actor.did,
+				handle: actor.handle,
+				displayName: actor.displayName || actor.handle,
+				avatar: actor.avatar,
+				hasBlento: false
+			} as FriendsProfile
+		];
+		requestAnimationFrame(() => {
+			handleValue = '';
+			if (inputRef) inputRef.value = '';
+		});
+	}
+
+	function removeFriend(did: string) {
+		item.cardData.friends = item.cardData.friends.filter((d: string) => d !== did);
+		profiles = profiles.filter((p) => p.did !== did);
+	}
+
+	function getProfile(did: string): FriendsProfile | undefined {
+		return profiles.find((p) => p.did === did);
+	}
+</script>
+
+<div class="flex flex-col gap-3">
+	<HandleInput bind:value={handleValue} onselected={addFriend} bind:ref={inputRef} />
+
+	{#if dids.length > 0}
+		<div class="flex flex-col gap-1.5">
+			{#each dids as did (did)}
+				{@const profile = getProfile(did)}
+				<div class="flex items-center gap-2">
+					<Avatar src={profile?.avatar} alt={profile?.handle ?? did} class="size-6 rounded-full" />
+					<span class="min-w-0 flex-1 truncate text-sm">
+						{profile?.handle ?? did}
+					</span>
+					<Button
+						variant="ghost"
+						size="icon"
+						class="size-6 min-w-6"
+						onclick={() => removeFriend(did)}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="2"
+							stroke="currentColor"
+							class="size-3.5"
+						>
+							<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+						</svg>
+					</Button>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>

src/lib/cards/FriendsCard/index.ts

···
+import type { CardDefinition } from '../types';
+import type { Did } from '@atcute/lexicons';
+import { getBlentoOrBskyProfile } from '$lib/atproto/methods';
+import FriendsCard from './FriendsCard.svelte';
+import FriendsCardSettings from './FriendsCardSettings.svelte';
+
+export type FriendsProfile = Awaited<ReturnType<typeof getBlentoOrBskyProfile>>;
+
+export const FriendsCardDefinition = {
+	type: 'friends',
+	contentComponent: FriendsCard,
+	settingsComponent: FriendsCardSettings,
+	createNew: (card) => {
+		card.w = 4;
+		card.h = 2;
+		card.mobileW = 8;
+		card.mobileH = 4;
+		card.cardData.friends = [];
+	},
+	loadData: async (items) => {
+		const allDids = new Set<Did>();
+		for (const item of items) {
+			for (const did of item.cardData.friends ?? []) {
+				allDids.add(did as Did);
+			}
+		}
+		if (allDids.size === 0) return [];
+
+		const profiles = await Promise.all(
+			Array.from(allDids).map((did) => getBlentoOrBskyProfile({ did }).catch(() => undefined))
+		);
+		return profiles.filter((p) => p && p.handle !== 'handle.invalid');
+	},
+	allowSetColor: true,
+	defaultColor: 'base',
+	minW: 2,
+	minH: 2,
+	name: 'Friends',
+	groups: ['Social'],
+	keywords: ['friends', 'avatars', 'people', 'community', 'blentos'],
+	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 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" /></svg>`
+} as CardDefinition & { type: 'friends' };

src/lib/cards/GIFCard/index.ts

···
 		card.mobileH = 4;
 	},
 	settingsComponent: GifCardSettings,
-	sidebarButtonText: 'GIF',
 	defaultColor: 'transparent',
 	allowSetColor: false,
 	minW: 1,
···
 	urlHandlerPriority: 5,
 	name: 'GIF',
 
+	keywords: ['animation', 'giphy', 'meme', 'tenor'],
 	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

···
 export const DinoGameCardDefinition = {
 	type: 'dino-game',
 	contentComponent: DinoGameCard as unknown as Component<ContentComponentProps>,
-	sidebarButtonText: 'Dino Game',
 	allowSetColor: true,
 	createNew: (card) => {
 		card.w = 4;
···
 	},
 	canHaveLabel: true,
 
+	keywords: ['chrome', 'dinosaur', 'runner', 'fun'],
 	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

···
 export const TetrisCardDefinition = {
 	type: 'tetris',
 	contentComponent: TetrisCard as unknown as Component<ContentComponentProps>,
-	sidebarButtonText: 'Tetris',
 	allowSetColor: true,
 	defaultColor: 'accent',
 	createNew: (card) => {
···
 	maxH: 10,
 	canHaveLabel: true,
 
+	keywords: ['blocks', 'puzzle', 'game', 'fun'],
 	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/index.ts

···
 	},
 	name: 'Github Profile',
 
+	keywords: ['developer', 'code', 'repos', 'contributions'],
 	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

···
 	type: 'guestbook',
 	contentComponent: GuestbookCard,
 	creationModalComponent: CreateGuestbookCardModal,
-	sidebarButtonText: 'Guestbook',
 	createNew: (card) => {
 		card.w = 4;
 		card.h = 6;
···
 		return results;
 	},
 	name: 'Guestbook',
+	keywords: ['comments', 'visitors', 'message', 'sign'],
 	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

···
 
 	canHaveLabel: true,
 
+	keywords: ['photo', 'picture', 'upload', 'png', 'jpg'],
 	groups: ['Core'],
 
 	icon: `<svg

src/lib/cards/LatestBlueskyPostCard/index.ts

···
 		card.h = 4;
 		card.mobileH = 8;
 	},
-	sidebarButtonText: 'Latest Bluesky Post',
 	loadData: async (items, { did }) => {
 		const authorFeed = await getAuthorFeed({ did, filter: 'posts_no_replies', limit: 2 });
 
···
 
 	name: 'Latest Bluesky Post',
 
+	keywords: ['bsky', 'atproto', 'recent', 'feed'],
 	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/index.ts

···
 	},
 	urlHandlerPriority: 0,
 
+	keywords: ['url', 'website', 'href', 'webpage'],
 	groups: ['Core'],
 
 	icon: `<svg

src/lib/cards/LivestreamCard/index.ts

···
 export const LivestreamCardDefitition = {
 	type: 'latestLivestream',
 	contentComponent: LivestreamCard,
-	sidebarButtonText: 'stream.place info',
 	createNew: (card) => {
 		card.w = 4;
 		card.h = 4;
···
 	urlHandlerPriority: 5,
 
 	name: 'Latest Livestream (stream.place)',
+	keywords: ['stream', 'live', 'broadcast', '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: 'latestLivestream' };
 
 export const LivestreamEmbedCardDefitition = {

src/lib/cards/MapCard/index.ts

···
 export const MapCardDefinition = {
 	type: 'mapLocation',
 	contentComponent: MapCard,
-	sidebarButtonText: 'Map',
 	createNew: (item) => {
 		item.w = 4;
 		item.h = 4;
···
 	canHaveLabel: true,
 	settingsComponent: MapCardSettings,
 
+	keywords: ['location', 'place', 'address', 'geo'],
 	groups: ['Core'],
 
 	name: 'Map',

src/lib/cards/Model3DCard/index.ts

···
 	type: 'model3d',
 	contentComponent: Model3DCard,
 	creationModalComponent: CreateModel3DCardModal,
-	sidebarButtonText: '3D Model',
-
 	createNew: (card) => {
 		card.w = 4;
 		card.h = 4;

src/lib/cards/PhotoGalleryCard/PhotoGalleryCard.svelte

···
 	});
 
 	let images = $derived(
-		feed
+		(feed
 			?.toSorted((a: PhotoItem, b: PhotoItem) => {
 				return (a.value.position ?? 0) - (b.value.position ?? 0);
 			})
···
 					position: i.value.position ?? 0
 				};
 			})
+			.filter((i) => i.src !== undefined) || []) as {
+			src: string;
+			name: string;
+			width: number;
+			height: number;
+			position: number;
+		}[]
 	);
 
 	let isMobile = getIsMobile();

src/lib/cards/PhotoGalleryCard/index.ts

···
 
 		return itemsData;
 	},
+	keywords: ['album', 'photos', 'slideshow', 'images', 'carousel'],
 	minW: 4
-	//sidebarButtonText: 'Photo Gallery'
 } as CardDefinition & { type: 'photoGallery' };

src/lib/cards/PopfeedReviews/index.ts

···
 		return data;
 	},
 	minH: 3,
-	sidebarButtonText: 'Popfeed Reviews',
 	canHaveLabel: true,
 
+	keywords: ['movies', 'tv', 'film', 'reviews', 'ratings', 'popfeed'],
 	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

···
 	settingsComponent: SectionCardSettings,
 
 	name: 'Heading',
+	keywords: ['title', 'section', 'header', 'divider'],
 	groups: ['Core'],
 
 	icon: `<svg

src/lib/cards/SpecialCards/UpdatedBlentos/index.ts

···
 export const UpdatedBlentosCardDefitition = {
 	type: 'updatedBlentos',
 	contentComponent: UpdatedBlentosCard,
+	keywords: ['feed', 'updates', 'recent', 'activity'],
 	loadData: async (items, { cache }) => {
 		try {
 			const response = await fetch(

src/lib/cards/SpotifyCard/index.ts

···
 	type: cardType,
 	contentComponent: SpotifyCard,
 	creationModalComponent: CreateSpotifyCardModal,
-	sidebarButtonText: 'Spotify Embed',
-
 	createNew: (item) => {
 		item.cardType = cardType;
 		item.cardData = {};
···
 	minW: 4,
 	minH: 5,
 
+	keywords: ['music', 'song', 'playlist', 'album', 'podcast'],
 	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/index.ts

···
 		return records;
 	},
 
-	sidebarButtonText: 'site.standard.document list',
-
 	name: 'Blog Posts',
 
+	keywords: ['articles', 'writing', 'blog', 'posts', 'frontpage'],
 	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

···
 
 		return data[0];
 	},
-	sidebarButtonText: 'Statusphere',
-
 	upload: async (item) => {
 		if (item.cardData.hasUpdate) {
 			await putRecord({
···
 	canHaveLabel: true,
 
 	name: 'Emoji',
+	keywords: ['status', 'mood', 'reaction', 'statusphere'],
 	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/index.ts

···
 		return data;
 	},
 	minW: 4,
-	sidebarButtonText: 'teal.fm Plays',
 	canHaveLabel: true,
 
+	keywords: ['music', 'scrobble', 'listening', 'songs'],
 	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

···
 
 	name: 'Text',
 
+	keywords: ['paragraph', 'note', 'write', 'content', 'description', 'bio'],
 	groups: ['Core'],
 
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4"

src/lib/cards/TimerCard/index.ts

···
 		} as TimerCardData;
 	},
 
+	keywords: ['stopwatch', 'clock', 'time'],
 	allowSetColor: true,
 	minW: 4,
 	canHaveLabel: true,
···
 			item.cardData.label = data.label;
 		}
 	}
-
 } as CardDefinition & { type: 'timer' };

src/lib/cards/VCardCard/index.ts

···
 		card.cardData.displayName = displayName;
 	},
 
-	sidebarButtonText: 'vCard',
 	allowSetColor: true,
 	name: 'vCard Card',
+	keywords: ['contact', 'phone', 'email', 'address', 'business 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/VideoCard.svelte

···
-<script lang="ts">
-	import { getDidContext } from '$lib/website/context';
-	import { getBlobURL } from '$lib/atproto';
-	import { onMount } from 'svelte';
-	import type { ContentComponentProps } from '../types';
-
-	let { item = $bindable() }: ContentComponentProps = $props();
-
-	const did = getDidContext();
-
-	let element: HTMLVideoElement | undefined = $state();
-
-	onMount(async () => {
-		const el = element;
-		if (!el) return;
-
-		el.muted = true;
-
-		// If we already have an objectUrl (preview before upload), use it directly
-		if (item.cardData.objectUrl) {
-			el.src = item.cardData.objectUrl;
-			el.play().catch((e) => {
-				console.error('Video play error:', e);
-			});
-			return;
-		}
-
-		// Fetch the video blob from the PDS
-		if (item.cardData.video?.video && typeof item.cardData.video.video === 'object') {
-			try {
-				const blobUrl = await getBlobURL({ did, blob: item.cardData.video.video });
-				const res = await fetch(blobUrl);
-				if (!res.ok) throw new Error(res.statusText);
-				const blob = await res.blob();
-				const url = URL.createObjectURL(blob);
-				el.src = url;
-				el.play().catch((e) => {
-					console.error('Video play error:', e);
-				});
-			} catch (e) {
-				console.error('Failed to load video:', e);
-			}
-		}
-	});
-</script>
-
-{#key item.cardData.video || item.cardData.objectUrl}
-	<video
-		bind:this={element}
-		muted
-		loop
-		autoplay
-		playsinline
-		class={[
-			'absolute inset-0 h-full w-full object-cover opacity-100 transition-transform duration-300 ease-in-out',
-			item.cardData.href ? 'group-hover:scale-102' : ''
-		]}
-	></video>
-{/key}
-{#if item.cardData.href}
-	<a
-		href={item.cardData.href}
-		class="absolute inset-0 h-full w-full"
-		target="_blank"
-		rel="noopener noreferrer"
-	>
-		<span class="sr-only">
-			{item.cardData.hrefText ?? 'Learn more'}
-		</span>
-
-		<div
-			class="bg-base-800/30 border-base-900/30 absolute top-2 right-2 rounded-full border p-1 text-white opacity-50 backdrop-blur-lg group-focus-within:opacity-100 group-hover:opacity-100"
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke-width="2.5"
-				stroke="currentColor"
-				class="size-4"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
-				/>
-			</svg>
-		</div>
-	</a>
-{/if}

src/lib/cards/VideoCard/VideoCardSettings.svelte

···
-<script lang="ts">
-	import { validateLink } from '$lib/helper';
-	import type { Item } from '$lib/types';
-	import { Button, Input, toast } from '@foxui/core';
-
-	let { item, onclose }: { item: Item; onclose: () => void } = $props();
-
-	let linkValue = $derived(
-		item.cardData.href?.replace('https://', '').replace('http://', '') ?? ''
-	);
-
-	function updateLink() {
-		if (!linkValue.trim()) {
-			item.cardData.href = '';
-			item.cardData.domain = '';
-		}
-
-		let link = validateLink(linkValue);
-		if (!link) {
-			toast.error('Invalid link');
-			return;
-		}
-
-		item.cardData.href = link;
-		item.cardData.domain = new URL(link).hostname;
-
-		onclose?.();
-	}
-</script>
-
-<Input
-	spellcheck={false}
-	type="url"
-	bind:value={linkValue}
-	onkeydown={(event) => {
-		if (event.code === 'Enter') {
-			updateLink();
-			event.preventDefault();
-		}
-	}}
-	placeholder="Enter link"
-/>
-<Button onclick={updateLink} size="icon"
-	><svg
-		xmlns="http://www.w3.org/2000/svg"
-		fill="none"
-		viewBox="0 0 24 24"
-		stroke-width="1.5"
-		stroke="currentColor"
-		class="size-6"
-	>
-		<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
-	</svg>
-</Button>

src/lib/cards/VideoCard/index.ts

···
-import { uploadBlob } from '$lib/atproto';
-import type { CardDefinition } from '../types';
-import VideoCard from './VideoCard.svelte';
-import VideoCardSettings from './VideoCardSettings.svelte';
-
-async function getAspectRatio(videoBlob: Blob): Promise<{ width: number; height: number }> {
-	return new Promise((resolve, reject) => {
-		const video = document.createElement('video');
-		video.preload = 'metadata';
-
-		video.onloadedmetadata = () => {
-			URL.revokeObjectURL(video.src);
-			resolve({
-				width: video.videoWidth,
-				height: video.videoHeight
-			});
-		};
-
-		video.onerror = () => {
-			URL.revokeObjectURL(video.src);
-			reject(new Error('Failed to load video metadata'));
-		};
-
-		video.src = URL.createObjectURL(videoBlob);
-	});
-}
-
-export const VideoCardDefinition = {
-	type: 'video',
-	contentComponent: VideoCard,
-	createNew: (card) => {
-		card.cardType = 'video';
-		card.cardData = {
-			video: null,
-			href: ''
-		};
-	},
-	upload: async (item) => {
-		if (item.cardData.blob) {
-			const blob = item.cardData.blob;
-			const aspectRatio = await getAspectRatio(blob);
-			const uploadedBlob = await uploadBlob({ blob });
-
-			item.cardData.video = {
-				$type: 'app.bsky.embed.video',
-				video: uploadedBlob,
-				aspectRatio
-			};
-
-			delete item.cardData.blob;
-		}
-
-		if (item.cardData.objectUrl) {
-			URL.revokeObjectURL(item.cardData.objectUrl);
-			delete item.cardData.objectUrl;
-		}
-
-		return item;
-	},
-	settingsComponent: VideoCardSettings,
-
-	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/index.ts

···
 	},
 	name: 'Youtube Video',
 
+	keywords: ['video', 'yt', 'stream', 'watch'],
 	groups: ['Media'],
 
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-3" viewBox="0 0 256 180"

src/lib/cards/index.ts

···
 import { UpdatedBlentosCardDefitition } from './SpecialCards/UpdatedBlentos';
 import { TextCardDefinition } from './TextCard';
 import type { CardDefinition } from './types';
-import { VideoCardDefinition } from './VideoCard';
 import { YoutubeCardDefinition } from './YoutubeVideoCard';
 import { BlueskyProfileCardDefinition } from './BlueskyProfileCard';
 import { GithubProfileCardDefitition } from './GitHubProfileCard';
···
 import { SpotifyCardDefinition } from './SpotifyCard';
 import { ButtonCardDefinition } from './ButtonCard';
 import { GuestbookCardDefinition } from './GuestbookCard';
+import { FriendsCardDefinition } from './FriendsCard';
 // import { Model3DCardDefinition } from './Model3DCard';
 
 export const AllCardDefinitions = [
 	GuestbookCardDefinition,
 	ButtonCardDefinition,
 	ImageCardDefinition,
-	VideoCardDefinition,
 	TextCardDefinition,
 	LinkCardDefinition,
 	BigSocialCardDefinition,
···
 	LatestBlueskyPostCardDefinition,
 	LivestreamCardDefitition,
 	LivestreamEmbedCardDefitition,
-	EmbedCardDefinition,
+	// EmbedCardDefinition,
 	MapCardDefinition,
 	ATProtoCollectionsCardDefinition,
 	SectionCardDefinition,
···
 	TimerCardDefinition,
 	ClockCardDefinition,
 	CountdownCardDefinition,
-	SpotifyCardDefinition
+	SpotifyCardDefinition,
 	// Model3DCardDefinition
+	FriendsCardDefinition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(

src/lib/cards/types.ts

···
 	onclose: () => void;
 };
 
-export type SidebarComponentProps = {
-	onclick: () => void;
-};
-
 export type ContentComponentProps = {
 	item: Item;
 	isEditing?: boolean;
···
 	creationModalComponent?: Component<CreationModalComponentProps>;
 
 	upload?: (item: Item) => Promise<Item>; // optionally upload some other data needed for this card
-
-	// 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
 	settingsComponent?: Component<SettingsComponentProps>;

src/lib/website/EditBar.svelte

···
 				</Button>
 			</div>
 		{:else}
-			<!-- Normal add-card controls -->
 			<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>
-
 				<Button size="iconLg" variant="ghost" class="backdrop-blur-none" onclick={showCardCommand}>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"

src/lib/website/EditableWebsite.svelte

···
 		compactItems,
 		createEmptyCard,
 		findValidPosition,
+		fixAllCollisions,
 		fixCollisions,
 		getHideProfileSection,
 		getProfilePosition,
···
 	import EditBar from './EditBar.svelte';
 	import SaveModal from './SaveModal.svelte';
 	import FloatingEditButton from './FloatingEditButton.svelte';
-	import { user } from '$lib/atproto';
+	import { user, resolveHandle, listRecords, getCDNImageBlobUrl } from '$lib/atproto';
+	import * as TID from '@atcute/tid';
 	import { launchConfetti } from '@foxui/visual';
 	import Controls from './Controls.svelte';
 	import CardCommand from '$lib/components/card-command/CardCommand.svelte';
 	import { shouldMirror, mirrorLayout } from './layout-mirror';
+	import { SvelteMap } from 'svelte/reactivity';
 
 	let {
 		data
···
 		}
 	}
 
-	const sidebarItems = AllCardDefinitions.filter((cardDef) => cardDef.sidebarButtonText);
+	const sidebarItems = AllCardDefinitions.filter((cardDef) => cardDef.name);
+
+	function addAllCardTypes() {
+		const groupOrder = ['Core', 'Social', 'Media', 'Content', 'Visual', 'Utilities', 'Games'];
+		const grouped = new SvelteMap<string, CardDefinition[]>();
+
+		for (const def of AllCardDefinitions) {
+			if (!def.name) continue;
+			const group = def.groups?.[0] ?? 'Other';
+			if (!grouped.has(group)) grouped.set(group, []);
+			grouped.get(group)!.push(def);
+		}
+
+		// Sort groups by predefined order, unknowns at end
+		const sortedGroups = [...grouped.keys()].sort((a, b) => {
+			const ai = groupOrder.indexOf(a);
+			const bi = groupOrder.indexOf(b);
+			return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi);
+		});
+
+		// Sample data for cards that would otherwise render empty
+		const sampleData: Record<string, Record<string, unknown>> = {
+			text: { text: 'The quick brown fox jumps over the lazy dog. This is a sample text card.' },
+			link: {
+				href: 'https://bsky.app',
+				title: 'Bluesky',
+				domain: 'bsky.app',
+				description: 'Social networking that gives you choice',
+				hasFetched: true
+			},
+			image: {
+				image: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=600',
+				alt: 'Mountain landscape'
+			},
+			button: { text: 'Visit Bluesky', href: 'https://bsky.app' },
+			bigsocial: { platform: 'bluesky', href: 'https://bsky.app', color: '0085ff' },
+			blueskyPost: {
+				uri: 'at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.post/3jt64kgkbbs2y',
+				href: 'https://bsky.app/profile/bsky.app/post/3jt64kgkbbs2y'
+			},
+			blueskyProfile: {
+				handle: 'bsky.app',
+				displayName: 'Bluesky',
+				avatar:
+					'https://cdn.bsky.app/img/avatar/plain/did:plc:z72i7hdynmk6r22z27h6tvur/bafkreihagr2cmvl2jt4mgx3sppwe2it3fwolkrbtjrhcnwjk4pcnbaq53m@jpeg'
+			},
+			blueskyMedia: {},
+			latestPost: {},
+			youtubeVideo: {
+				youtubeId: 'dQw4w9WgXcQ',
+				poster: 'https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg',
+				href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+				showInline: true
+			},
+			'spotify-list-embed': {
+				spotifyType: 'album',
+				spotifyId: '4aawyAB9vmqN3uQ7FjRGTy',
+				href: 'https://open.spotify.com/album/4aawyAB9vmqN3uQ7FjRGTy'
+			},
+			latestLivestream: {},
+			livestreamEmbed: {
+				href: 'https://stream.place/',
+				embed: 'https://stream.place/embed/'
+			},
+			mapLocation: { lat: 48.8584, lon: 2.2945, zoom: 13, name: 'Eiffel Tower, Paris' },
+			gif: { url: 'https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.mp4', alt: 'Cat typing' },
+			event: {
+				uri: 'at://did:plc:257wekqxg4hyapkq6k47igmp/community.lexicon.calendar.event/3mcsoqzy7gm2q'
+			},
+			guestbook: { label: 'Guestbook' },
+			githubProfile: { user: 'sveltejs', href: 'https://github.com/sveltejs' },
+			photoGallery: {
+				galleryUri: 'at://did:plc:tas6hj2xjrqben5653v5kohk/social.grain.gallery/3mclhsljs6h2w'
+			},
+			atprotocollections: {},
+			publicationList: {},
+			recentPopfeedReviews: {},
+			recentTealFMPlays: {},
+			statusphere: { emoji: '✨' },
+			vcard: {},
+			'fluid-text': { text: 'Hello World' },
+			draw: { strokesJson: '[]', viewBox: '', strokeWidth: 1, locked: true },
+			clock: {},
+			countdown: { targetDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString() },
+			timer: {},
+			'dino-game': {},
+			tetris: {},
+			updatedBlentos: {}
+		};
+
+		// Labels for cards that support canHaveLabel
+		const sampleLabels: Record<string, string> = {
+			image: 'Mountain Landscape',
+			mapLocation: 'Eiffel Tower',
+			gif: 'Cat Typing',
+			bigsocial: 'Bluesky',
+			guestbook: 'Guestbook',
+			statusphere: 'My Status',
+			recentPopfeedReviews: 'My Reviews',
+			recentTealFMPlays: 'Recently Played',
+			clock: 'Local Time',
+			countdown: 'Launch Day',
+			timer: 'Timer',
+			'dino-game': 'Dino Game',
+			tetris: 'Tetris',
+			blueskyMedia: 'Bluesky Media'
+		};
+
+		const newItems: Item[] = [];
+		let cursorY = 0;
+		let mobileCursorY = 0;
+
+		for (const group of sortedGroups) {
+			const defs = grouped.get(group)!;
+
+			// Add a section heading for the group
+			const heading = createEmptyCard(data.page);
+			heading.cardType = 'section';
+			heading.cardData = { text: group, verticalAlign: 'bottom', textSize: 1 };
+			heading.w = COLUMNS;
+			heading.h = 1;
+			heading.x = 0;
+			heading.y = cursorY;
+			heading.mobileW = COLUMNS;
+			heading.mobileH = 2;
+			heading.mobileX = 0;
+			heading.mobileY = mobileCursorY;
+			newItems.push(heading);
+			cursorY += 1;
+			mobileCursorY += 2;
+
+			// Place cards in rows
+			let rowX = 0;
+			let rowMaxH = 0;
+			let mobileRowX = 0;
+			let mobileRowMaxH = 0;
+
+			for (const def of defs) {
+				if (def.type === 'section' || def.type === 'embed') continue;
+
+				const item = createEmptyCard(data.page);
+				item.cardType = def.type;
+				item.cardData = {};
+				def.createNew?.(item);
+
+				// Merge in sample data (without overwriting createNew defaults)
+				const extra = sampleData[def.type];
+				if (extra) {
+					item.cardData = { ...item.cardData, ...extra };
+				}
+
+				// Set item-level color for cards that need it
+				if (def.type === 'button') {
+					item.color = 'transparent';
+				}
+
+				// Add label if card supports it
+				const label = sampleLabels[def.type];
+				if (label && def.canHaveLabel) {
+					item.cardData.label = label;
+				}
+
+				// Desktop layout
+				if (rowX + item.w > COLUMNS) {
+					cursorY += rowMaxH;
+					rowX = 0;
+					rowMaxH = 0;
+				}
+				item.x = rowX;
+				item.y = cursorY;
+				rowX += item.w;
+				rowMaxH = Math.max(rowMaxH, item.h);
+
+				// Mobile layout
+				if (mobileRowX + item.mobileW > COLUMNS) {
+					mobileCursorY += mobileRowMaxH;
+					mobileRowX = 0;
+					mobileRowMaxH = 0;
+				}
+				item.mobileX = mobileRowX;
+				item.mobileY = mobileCursorY;
+				mobileRowX += item.mobileW;
+				mobileRowMaxH = Math.max(mobileRowMaxH, item.mobileH);
+
+				newItems.push(item);
+			}
+
+			// Move cursor past last row
+			cursorY += rowMaxH;
+			mobileCursorY += mobileRowMaxH;
+		}
+
+		items = newItems;
+		onLayoutChanged();
+	}
+
+	let copyInput = $state('');
+	let isCopying = $state(false);
+
+	async function copyPageFrom() {
+		const input = copyInput.trim();
+		if (!input) return;
+
+		isCopying = true;
+		try {
+			// Parse "handle" or "handle/page"
+			const parts = input.split('/');
+			const handle = parts[0];
+			const pageName = parts[1] || 'self';
+
+			const did = await resolveHandle({ handle: handle as `${string}.${string}` });
+			if (!did) throw new Error('Could not resolve handle');
+
+			const records = await listRecords({ did, collection: 'app.blento.card' });
+			const targetPage = 'blento.' + pageName;
+
+			const copiedCards: Item[] = records
+				.map((r) => ({ ...r.value }) as Item)
+				.filter((card) => {
+					// v0/v1 cards without page field belong to blento.self
+					if (!card.page) return targetPage === 'blento.self';
+					return card.page === targetPage;
+				})
+				.map((card) => {
+					// Apply v0→v1 migration (coords were halved in old format)
+					if (!card.version) {
+						card.x *= 2;
+						card.y *= 2;
+						card.h *= 2;
+						card.w *= 2;
+						card.mobileX *= 2;
+						card.mobileY *= 2;
+						card.mobileH *= 2;
+						card.mobileW *= 2;
+						card.version = 1;
+					}
+
+					// Convert blob refs to CDN URLs using source DID
+					if (card.cardData) {
+						for (const key of Object.keys(card.cardData)) {
+							const val = card.cardData[key];
+							if (val && typeof val === 'object' && val.$type === 'blob') {
+								const url = getCDNImageBlobUrl({ did, blob: val });
+								if (url) card.cardData[key] = url;
+							}
+						}
+					}
+
+					// Regenerate ID and assign to current page
+					card.id = TID.now();
+					card.page = data.page;
+					return card;
+				});
+
+			if (copiedCards.length === 0) {
+				toast.error('No cards found on that page');
+				return;
+			}
+
+			fixAllCollisions(copiedCards);
+			fixAllCollisions(copiedCards, true);
+			compactItems(copiedCards);
+			compactItems(copiedCards, true);
+
+			items = copiedCards;
+			onLayoutChanged();
+			toast.success(`Copied ${copiedCards.length} cards from ${handle}`);
+		} catch (e) {
+			console.error('Failed to copy page:', e);
+			toast.error('Failed to copy page');
+		} finally {
+			isCopying = false;
+		}
+	}
 
 	let debugPoint = $state({ x: 0, y: 0 });
 
···
 <Account {data} />
 
 <Context {data}>
-	{#if !dev}
-		<div
-			class="bg-base-200 dark:bg-base-800 fixed inset-0 z-50 inline-flex h-full w-full items-center justify-center p-4 text-center lg:hidden"
-		>
-			Editing on mobile is not supported yet. Please use a desktop browser.
-		</div>
-	{/if}
-
 	<CardCommand
 		bind:open={showCardCommand}
 		onselect={(cardDef: CardDefinition) => {
···
 		>
 			<div class="pointer-events-none"></div>
 			<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
-			<!-- svelte-ignore a11y_click_events_have_key_events -->
 			<div
 				bind:this={container}
 				onclick={(e) => {
···
 
 	{#if dev}
 		<div
-			class="bg-base-900/70 text-base-100 fixed top-2 right-2 z-50 rounded px-2 py-1 font-mono text-xs"
+			class="bg-base-900/70 text-base-100 fixed top-2 right-2 z-50 flex items-center gap-2 rounded px-2 py-1 font-mono text-xs"
 		>
-			editedOn: {editedOn}
+			<span>editedOn: {editedOn}</span>
+			<button class="underline" onclick={addAllCardTypes}>+ all cards</button>
+			<input
+				bind:value={copyInput}
+				placeholder="handle/page"
+				class="bg-base-800 text-base-100 w-32 rounded px-1 py-0.5"
+				onkeydown={(e) => {
+					if (e.key === 'Enter') copyPageFrom();
+				}}
+			/>
+			<button class="underline" onclick={copyPageFrom} disabled={isCopying}>
+				{isCopying ? 'copying...' : 'copy'}
+			</button>
 		</div>
 	{/if}
 </Context>

src/lib/website/layout-mirror.ts

···
 	if (fromMobile) {
 		// Mobile → Desktop: reflow items to use the full grid width.
 		// Sort by mobile position so items are placed in reading order.
-		const sorted = items.toSorted(
-			(a, b) => a.mobileY - b.mobileY || a.mobileX - b.mobileX
-		);
+		const sorted = items.toSorted((a, b) => a.mobileY - b.mobileY || a.mobileX - b.mobileX);
 
 		// Place each item into the first available spot on the desktop grid
 		const placed: Item[] = [];
···
 	} else {
 		// Desktop → Mobile: proportional positions
 		for (const item of items) {
-			item.mobileX = clamp(
-				Math.floor((item.x * 2) / 2) * 2,
-				0,
-				COLUMNS - item.mobileW
-			);
+			item.mobileX = clamp(Math.floor((item.x * 2) / 2) * 2, 0, COLUMNS - item.mobileW);
 			item.mobileY = Math.max(0, Math.round(item.y * 2));
 		}
 		fixAllCollisions(items, true);