added tags. deleted videocard. deleted sidebarbutton.

.claude/settings.local.json

···
 {
-	"permissions": {
-		"allow": [
-			"Bash(pnpm check:*)",
-			"mcp__ide__getDiagnostics",
-			"mcp__plugin_svelte_svelte__svelte-autofixer",
-			"mcp__plugin_svelte_svelte__list-sections",
-			"Bash(pkill:*)",
-			"Bash(timeout 8 pnpm dev:*)",
-			"Bash(git checkout:*)",
-			"Bash(npx svelte-kit:*)",
-			"Bash(ls:*)",
-			"Bash(pnpm format:*)",
-			"Bash(pnpm add:*)",
-			"WebSearch",
-			"WebFetch(domain:github.com)",
-			"WebFetch(domain:flipclockjs.com)",
-			"WebFetch(domain:codepen.io)",
-			"WebFetch(domain:flo-bit.dev)",
-			"Bash(pnpm install)",
-			"Bash(pnpm install:*)",
-			"Bash(pnpm config:*)",
-			"Bash(lsof:*)",
-			"Bash(pnpm dev)",
-			"Bash(pnpm exec svelte-kit:*)",
-			"Bash(pnpm build:*)",
-			"Bash(pnpm remove:*)",
-			"Bash(grep:*)"
-		]
-	}
+  "permissions": {
+    "allow": [
+      "Bash(pnpm check:*)",
+      "mcp__ide__getDiagnostics",
+      "mcp__plugin_svelte_svelte__svelte-autofixer",
+      "mcp__plugin_svelte_svelte__list-sections",
+      "Bash(pkill:*)",
+      "Bash(timeout 8 pnpm dev:*)",
+      "Bash(git checkout:*)",
+      "Bash(npx svelte-kit:*)",
+      "Bash(ls:*)",
+      "Bash(pnpm format:*)",
+      "Bash(pnpm add:*)",
+      "WebSearch",
+      "WebFetch(domain:github.com)",
+      "WebFetch(domain:flipclockjs.com)",
+      "WebFetch(domain:codepen.io)",
+      "WebFetch(domain:flo-bit.dev)",
+      "Bash(pnpm install)",
+      "Bash(pnpm install:*)",
+      "Bash(pnpm config:*)",
+      "Bash(lsof:*)",
+      "Bash(pnpm dev)",
+      "Bash(pnpm exec svelte-kit:*)",
+      "Bash(pnpm build:*)",
+      "Bash(pnpm remove:*)",
+      "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/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/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';
···
 	GuestbookCardDefinition,
 	ButtonCardDefinition,
 	ImageCardDefinition,
-	VideoCardDefinition,
 	TextCardDefinition,
 	LinkCardDefinition,
 	BigSocialCardDefinition,

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/EditableWebsite.svelte

···
 		}
 	}
 
-	const sidebarItems = AllCardDefinitions.filter((cardDef) => cardDef.sidebarButtonText);
+	const sidebarItems = AllCardDefinitions.filter((cardDef) => cardDef.name);
 
 	let debugPoint = $state({ x: 0, y: 0 });