Merge pull request #111 from flo-bit/card-command-bar

Card command bar

.claude/settings.local.json

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

docs/Beta.md

···
-# Todo for beta version
-
-- site.standard
-  - move description to markdownDescription and set description as text only
-
-- allow editing on mobile
-
-- get automatic layout for mobile if only edited on desktop (and vice versa)
-
-- add cards in middle of current position (both mobile and desktop version)
-
-- show nsfw warnings
-
-- card with big call to action button "create your blento"
-
-- ask to fill with some default cards on page creation
-
-- when adding images try to add them in a size that best fits aspect ratio
-
-- onboarding?
-
-- switch sidebar to a quick list of available cards with search function
-
-- test
-  - selfhosting
-
-- guestbook card
-
-- onboarding?
-
-- switch sidebar to a quick list of available cards with search function
-
-- test
-  - selfhosting
-
-- guestbook card
-
-- analytics?
-
-- refresh recently updated blentos (move to top of list, update profiles every 24 hours)
-
-- server side oauth?

package.json

···
 		"svelte-sonner": "^1.0.7",
 		"tailwind-merge": "^3.4.0",
 		"tailwind-variants": "^3.2.2",
+		"tailwindcss-animate": "^1.0.7",
 		"three": "^0.176.0",
 		"turndown": "^7.2.2",
 		"wrangler": "^4.60.0"

pnpm-lock.yaml

···
       tailwind-variants:
         specifier: ^3.2.2
         version: 3.2.2(tailwind-merge@3.4.0)(tailwindcss@4.1.18)
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@4.1.18)
       three:
         specifier: ^0.176.0
         version: 0.176.0
···
     peerDependenciesMeta:
       tailwind-merge:
         optional: true
+
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==, tarball: https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
 
   tailwindcss@4.1.18:
     resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}
···
       tailwindcss: 4.1.18
     optionalDependencies:
       tailwind-merge: 3.4.0
+
+  tailwindcss-animate@1.0.7(tailwindcss@4.1.18):
+    dependencies:
+      tailwindcss: 4.1.18
 
   tailwindcss@4.1.18: {}
 

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/atproto/index.ts

···
 	getBlobURL,
 	getCDNImageBlobUrl,
 	searchActorsTypeahead,
-	getAuthorFeed
+	getAuthorFeed,
+	getPostThread,
+	createPost
 } from './methods';

src/lib/atproto/methods.ts

···
 	return response.data;
 }
 
+export async function getBlentoOrBskyProfile(data: { did: Did; client?: Client }): Promise<
+	Awaited<ReturnType<typeof getDetailedProfile>> & {
+		hasBlento: boolean;
+	}
+> {
+	let blentoProfile;
+	try {
+		// try getting blento profile first
+		blentoProfile = await getRecord({
+			collection: 'site.standard.publication',
+			did: data?.did,
+			rkey: 'blento.self',
+			client: data?.client
+		});
+	} catch {
+		console.error('error getting blento profile, falling back to bsky profile');
+	}
+
+	const response = await getDetailedProfile(data);
+
+	return {
+		did: data.did,
+		handle: response?.handle,
+		displayName: blentoProfile?.value?.name || response?.displayName || response?.handle,
+		avatar: (getCDNImageBlobUrl({ did: data?.did, blob: blentoProfile?.value?.icon }) ||
+			response?.avatar) as `${string}:${string}`,
+		hasBlento: Boolean(blentoProfile.value)
+	};
+}
+
 /**
  * Creates an AT Protocol client for a user's PDS.
  * @param did - The DID of the user
···
 		};
 	};
 }) {
+	if (!blob || !did) return;
 	did ??= user.did;
 
 	return `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${blob.ref.$link}@webp`;
···
 		return profile.did;
 	}
 }
+
+/**
+ * Fetches a post's thread including replies.
+ * @param uri - The AT URI of the post
+ * @param depth - How many levels of replies to fetch (default 1)
+ * @param client - The client to use (defaults to public Bluesky API)
+ * @returns The thread data or undefined on failure
+ */
+export async function getPostThread({
+	uri,
+	depth = 1,
+	client
+}: {
+	uri: string;
+	depth?: number;
+	client?: Client;
+}) {
+	client ??= new Client({
+		handler: simpleFetchHandler({ service: 'https://public.api.bsky.app' })
+	});
+
+	const response = await client.get('app.bsky.feed.getPostThread', {
+		params: { uri: uri as ResourceUri, depth }
+	});
+
+	if (!response.ok) return;
+
+	return response.data.thread;
+}
+
+/**
+ * Creates a Bluesky post on the authenticated user's account.
+ * @param text - The post text
+ * @param facets - Optional rich text facets (links, mentions, etc.)
+ * @returns The response containing the post's URI and CID
+ * @throws If the user is not logged in
+ */
+export async function createPost({
+	text,
+	facets
+}: {
+	text: string;
+	facets?: Array<{
+		index: { byteStart: number; byteEnd: number };
+		features: Array<{ $type: string; uri?: string; did?: string; tag?: string }>;
+	}>;
+}) {
+	if (!user.client || !user.did) throw new Error('No client or did');
+
+	const record: Record<string, unknown> = {
+		$type: 'app.bsky.feed.post',
+		text,
+		createdAt: new Date().toISOString()
+	};
+
+	if (facets) {
+		record.facets = facets;
+	}
+
+	const response = await user.client.post('com.atproto.repo.createRecord', {
+		input: {
+			collection: 'app.bsky.feed.post',
+			repo: user.did,
+			record
+		}
+	});
+
+	return response;
+}

src/lib/atproto/settings.ts

···
 		'app.blento.settings',
 		'app.blento.comment',
 		'app.blento.guestbook.entry',
+		'app.bsky.feed.post?action=create',
 		'site.standard.publication',
 		'site.standard.document',
 		'xyz.statusphere.status'

src/lib/cards/ATProtoCollectionsCard/index.ts

···
 		item.w = 4;
 		item.mobileW = 8;
 	},
-	sidebarButtonText: 'Atmosphere Collections'
+	sidebarButtonText: 'Atmosphere Collections',
+
+	name: 'ATProto Collections',
+
+	groups: ['Social']
 } as CardDefinition & { type: 'atprotocollections' };

src/lib/cards/BigSocialCard/index.ts

···
 		return item;
 	},
 	urlHandlerPriority: 1,
-	canHaveLabel: true
+	canHaveLabel: true,
+
+	groups: ['Social']
 } 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'
 } as CardDefinition & { type: 'blueskyMedia' };

src/lib/cards/BlueskyPostCard/index.ts

···
 		return postsMap;
 	},
 	minW: 4,
-	name: 'Bluesky Post'
+	name: 'Bluesky Post',
+
+	groups: ['Social']
 } as CardDefinition & { type: 'blueskyPost' };

src/lib/cards/ButtonCard/index.ts

···
 	minW: 2,
 	minH: 1,
 	maxW: 8,
-	maxH: 4
+	maxH: 4,
+
+	groups: ['Utilities'],
+	name: 'Button'
 };

src/lib/cards/DrawCard/index.ts

···
 			strokeWidth: 1,
 			locked: true
 		};
-	}
+	},
+
+	groups: ['Visual']
 } as CardDefinition & { type: 'draw' };

src/lib/cards/EmbedCard/index.ts

···
 	// change: (item) => {
 	// 	return item;
 	// },
-	name: 'Embed Card'
+	name: 'Embed'
 } as CardDefinition & { type: 'embed' };

src/lib/cards/EventCard/index.ts

···
 
 	urlHandlerPriority: 5,
 
-	name: 'Event Card'
+	name: 'Event',
+
+	groups: ['Social']
 } 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'
 } as CardDefinition & { type: 'fluid-text' };

src/lib/cards/GIFCard/index.ts

···
 		return null;
 	},
 	urlHandlerPriority: 5,
-	name: 'GIF'
+	name: 'GIF',
+
+	groups: ['Media']
 } 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'
 } as CardDefinition & { type: 'dino-game' };

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

···
 		card.cardData = {};
 	},
 	maxH: 10,
-	canHaveLabel: true
+	canHaveLabel: true,
+
+	groups: ['Games'],
+
+	name: 'Tetris'
 } as CardDefinition & { type: 'tetris' };

src/lib/cards/GitHubProfileCard/index.ts

···
 
 		return item;
 	},
-	name: 'Github Profile'
+	name: 'Github Profile',
+
+	groups: ['Social']
 } as CardDefinition & { type: 'githubProfile' };
 
 function getGitHubUsername(url: string | undefined): string | undefined {

src/lib/cards/GuestbookCard/CreateGuestbookCardModal.svelte

···
+<script lang="ts">
+	import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
+	import type { CreationModalComponentProps } from '../types';
+	import { createPost } from '$lib/atproto/methods';
+	import { user } from '$lib/atproto/auth.svelte';
+	import { parseBlueskyPostUrl } from '../BlueskyPostCard/utils';
+
+	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+
+	let mode = $state<'create' | 'existing'>('create');
+
+	const profileUrl = `https://blento.app/${user.profile?.handle ?? ''}`;
+	let postText = $state(`Comment on this post to appear on my Blento! ${profileUrl}`);
+	let postUrl = $state('');
+	let isPosting = $state(false);
+	let errorMessage = $state('');
+
+	function buildFacets(text: string, url: string) {
+		const encoder = new TextEncoder();
+		const encoded = encoder.encode(text);
+		const urlBytes = encoder.encode(url);
+
+		let byteStart = -1;
+		for (let i = 0; i <= encoded.length - urlBytes.length; i++) {
+			let match = true;
+			for (let j = 0; j < urlBytes.length; j++) {
+				if (encoded[i + j] !== urlBytes[j]) {
+					match = false;
+					break;
+				}
+			}
+			if (match) {
+				byteStart = i;
+				break;
+			}
+		}
+
+		if (byteStart === -1) return undefined;
+
+		return [
+			{
+				index: { byteStart, byteEnd: byteStart + urlBytes.length },
+				features: [{ $type: 'app.bsky.richtext.facet#link', uri: url }]
+			}
+		];
+	}
+
+	async function handleCreateNew() {
+		if (!postText.trim()) {
+			errorMessage = 'Post text cannot be empty.';
+			return;
+		}
+
+		isPosting = true;
+		errorMessage = '';
+
+		try {
+			const facets = buildFacets(postText, profileUrl);
+			const response = await createPost({ text: postText, facets });
+
+			if (!response.ok) {
+				throw new Error('Failed to create post');
+			}
+
+			item.cardData.uri = response.data.uri;
+
+			const rkey = response.data.uri.split('/').pop();
+			item.cardData.href = `https://bsky.app/profile/${user.profile?.handle}/post/${rkey}`;
+
+			oncreate();
+		} catch (err) {
+			errorMessage =
+				err instanceof Error ? err.message : 'Failed to create post. Please try again.';
+		} finally {
+			isPosting = false;
+		}
+	}
+
+	function handleExisting() {
+		errorMessage = '';
+		const parsed = parseBlueskyPostUrl(postUrl.trim());
+
+		if (!parsed) {
+			errorMessage =
+				'Invalid URL. Please enter a valid Bluesky post URL (e.g., https://bsky.app/profile/handle/post/...)';
+			return;
+		}
+
+		item.cardData.uri = `at://${parsed.handle}/app.bsky.feed.post/${parsed.rkey}`;
+		item.cardData.href = postUrl.trim();
+
+		oncreate();
+	}
+
+	async function handleSubmit() {
+		if (mode === 'create') {
+			await handleCreateNew();
+		} else {
+			handleExisting();
+		}
+	}
+</script>
+
+<Modal open={true} closeButton={false}>
+	<form
+		onsubmit={(e) => {
+			e.preventDefault();
+			handleSubmit();
+		}}
+		class="flex flex-col gap-2"
+	>
+		<Subheading>Guestbook</Subheading>
+
+		<div class="flex gap-2">
+			<Button
+				size="sm"
+				variant="ghost"
+				class={mode === 'create' ? 'bg-base-200 dark:bg-base-700' : ''}
+				onclick={() => (mode = 'create')}
+			>
+				Create new post
+			</Button>
+			<Button
+				size="sm"
+				variant="ghost"
+				class={mode === 'existing' ? 'bg-base-200 dark:bg-base-700' : ''}
+				onclick={() => (mode = 'existing')}
+			>
+				Use existing post
+			</Button>
+		</div>
+
+		{#if mode === 'create'}
+			<p class="text-base-500 dark:text-base-400 text-sm">
+				This will create a post on your Bluesky account. Replies to that post will appear on your
+				guestbook card.
+			</p>
+			<textarea
+				bind:value={postText}
+				rows="4"
+				class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-600 mt-2 w-full rounded-lg border p-3 text-sm focus:outline-none"
+			></textarea>
+		{:else}
+			<p class="text-base-500 dark:text-base-400 text-sm">
+				Paste a Bluesky post URL to use as your guestbook. Replies to that post will appear on your
+				card.
+			</p>
+			<Input bind:value={postUrl} placeholder="https://bsky.app/profile/handle/post/..." />
+		{/if}
+
+		{#if errorMessage}
+			<Alert type="error" title="Error"><span>{errorMessage}</span></Alert>
+		{/if}
+
+		<div class="mt-4 flex justify-end gap-2">
+			<Button onclick={oncancel} variant="ghost">Cancel</Button>
+			{#if mode === 'create'}
+				<Button type="submit" disabled={isPosting || !postText.trim()}>
+					{isPosting ? 'Posting...' : 'Post to Bluesky & Create'}
+				</Button>
+			{:else}
+				<Button type="submit" disabled={!postUrl.trim()}>Create</Button>
+			{/if}
+		</div>
+	</form>
+</Modal>

src/lib/cards/GuestbookCard/GuestbookCard.svelte

···
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
+	import { CardDefinitionsByType } from '..';
+	import type { ContentComponentProps } from '../types';
+	import { Button } from '@foxui/core';
+	import { BlueskyPost } from '$lib/components/bluesky-post';
+	import type { PostView } from '@atcute/bluesky/types/app/feed/defs';
+
+	let { item }: ContentComponentProps = $props();
+
+	const data = getAdditionalUserData();
+	const did = getDidContext();
+	const handle = getHandleContext();
+
+	type Reply = {
+		$type: string;
+		post: PostView;
+	};
+
+	let isLoaded = $state(false);
+
+	let cardUri = $derived(item.cardData.uri as string);
+
+	// svelte-ignore state_referenced_locally
+	let replies = $state<Reply[]>(
+		((data['guestbook'] as Record<string, Reply[]>)?.[item.cardData.uri as string] ?? []) as Reply[]
+	);
+
+	onMount(async () => {
+		if (!cardUri) {
+			isLoaded = true;
+			return;
+		}
+
+		try {
+			const loaded = await CardDefinitionsByType[item.cardType]?.loadData?.([item], {
+				did,
+				handle
+			});
+			const result = loaded as Record<string, Reply[]> | undefined;
+			const freshReplies = result?.[cardUri] ?? [];
+
+			if (freshReplies.length > 0) {
+				replies = freshReplies;
+			}
+
+			if (!data['guestbook']) {
+				data['guestbook'] = {};
+			}
+			(data['guestbook'] as Record<string, Reply[]>)[cardUri] = replies;
+		} catch (e) {
+			console.error('Failed to load guestbook replies', e);
+		}
+
+		isLoaded = true;
+	});
+</script>
+
+<div class="flex h-full flex-col overflow-hidden p-4">
+	{#if item.cardData.href}
+		<div class="mb-2 flex justify-end">
+			<a href={item.cardData.href} target="_blank" rel="noopener noreferrer">
+				<Button size="sm">Add a comment on Bluesky</Button>
+			</a>
+		</div>
+	{/if}
+
+	<div class="flex-1 overflow-y-auto">
+		{#if replies.length > 0}
+			<div class="replies">
+				{#each replies as reply (reply.post.uri)}
+					<div class="reply">
+						<BlueskyPost feedViewPost={reply.post} showAvatar compact showLogo={false} />
+					</div>
+				{/each}
+			</div>
+		{:else if isLoaded}
+			<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 comments yet — share your Bluesky post to get started!
+			</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 comments...
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.reply {
+		padding-bottom: 1rem;
+		margin-bottom: 1rem;
+		border-bottom: 1px solid oklch(0.5 0 0 / 0.1);
+	}
+
+	.reply:last-child {
+		border-bottom: none;
+		margin-bottom: 0;
+		padding-bottom: 0;
+	}
+
+	.reply :global(img:not([class*='rounded-full'])) {
+		max-height: 10rem;
+	}
+
+	.reply :global(article) {
+		max-height: 10rem;
+	}
+
+	@container card (width >= 30rem) {
+		.replies {
+			columns: 2;
+			column-gap: 1.5rem;
+			column-rule: 1px solid oklch(0.5 0 0 / 0.15);
+		}
+
+		.reply {
+			break-inside: avoid;
+		}
+	}
+</style>

src/lib/cards/GuestbookCard/index.ts

···
+import { getPostThread } from '$lib/atproto/methods';
+import type { CardDefinition } from '../types';
+import GuestbookCard from './GuestbookCard.svelte';
+import CreateGuestbookCardModal from './CreateGuestbookCardModal.svelte';
+
+export const GuestbookCardDefinition = {
+	type: 'guestbook',
+	contentComponent: GuestbookCard,
+	creationModalComponent: CreateGuestbookCardModal,
+	sidebarButtonText: 'Guestbook',
+	createNew: (card) => {
+		card.w = 4;
+		card.h = 6;
+		card.mobileW = 8;
+		card.mobileH = 12;
+		card.cardData.label = 'Guestbook';
+	},
+	minW: 4,
+	minH: 4,
+	defaultColor: 'base',
+	canHaveLabel: true,
+	loadData: async (items) => {
+		const uris = items
+			.filter((item) => item.cardData?.uri)
+			.map((item) => item.cardData.uri as string);
+
+		if (uris.length === 0) return {};
+
+		const results: Record<string, unknown[]> = {};
+
+		await Promise.all(
+			uris.map(async (uri) => {
+				try {
+					const thread = await getPostThread({ uri, depth: 1 });
+					if (thread && '$type' in thread && thread.$type === 'app.bsky.feed.defs#threadViewPost') {
+						const typedThread = thread as { replies?: unknown[] };
+						results[uri] = (typedThread.replies ?? [])
+							.filter(
+								(r: unknown) =>
+									r != null &&
+									typeof r === 'object' &&
+									'$type' in r &&
+									(r as { $type: string }).$type === 'app.bsky.feed.defs#threadViewPost'
+							)
+							.sort((a: unknown, b: unknown) => {
+								const timeA = new Date(
+									((a as any).post?.record?.createdAt as string) ?? 0
+								).getTime();
+								const timeB = new Date(
+									((b as any).post?.record?.createdAt as string) ?? 0
+								).getTime();
+								return timeB - timeA;
+							});
+					}
+				} catch (e) {
+					console.error('Failed to load guestbook thread for', uri, e);
+				}
+			})
+		);
+
+		return results;
+	},
+	name: 'Guestbook',
+	groups: ['Social']
+} 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']
 } 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']
 } 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/index.ts

···
 	},
 	minH: 3,
 	sidebarButtonText: 'Popfeed Reviews',
-	canHaveLabel: true
+	canHaveLabel: true,
+
+	groups: ['Media'],
+	name: 'Movie and TV Reviews'
 } 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/SpecialCards/UpdatedBlentos/index.ts

···
-import { getDetailedProfile } from '$lib/atproto';
 import type { CardDefinition } from '../../types';
 import UpdatedBlentosCard from './UpdatedBlentosCard.svelte';
 import type { Did } from '@atcute/lexicons';
-import type { AppBskyActorDefs } from '@atcute/bluesky';
+import { getBlentoOrBskyProfile } from '$lib/atproto/methods';
+
+type ProfileWithBlentoFlag = Awaited<ReturnType<typeof getBlentoOrBskyProfile>>;
 
 export const UpdatedBlentosCardDefitition = {
 	type: 'updatedBlentos',
···
 			);
 			const recentRecords = await response.json();
 			const existingUsers = await cache?.get('updatedBlentos');
-			const existingUsersArray: AppBskyActorDefs.ProfileViewDetailed[] = existingUsers
+			const existingUsersArray: ProfileWithBlentoFlag[] = existingUsers
 				? JSON.parse(existingUsers)
 				: [];
 
-			const existingUsersSet = new Set(existingUsersArray.map((v) => v.did));
+			const uniqueDids = new Set<Did>(recentRecords.map((v: { did: string }) => v.did as Did));
 
-			const uniqueDids = new Set<Did>();
-			for (const record of recentRecords as { did: string }[]) {
-				if (!existingUsersSet.has(record.did as Did)) uniqueDids.add(record.did as Did);
-			}
-
-			const profiles: Promise<AppBskyActorDefs.ProfileViewDetailed | undefined>[] = [];
+			const profiles: Promise<ProfileWithBlentoFlag | undefined>[] = [];
 
 			for (const did of Array.from(uniqueDids)) {
-				const profile = getDetailedProfile({ did });
-				profiles.push(profile);
-				if (profiles.length > 30) break;
+				profiles.push(getBlentoOrBskyProfile({ did }));
 			}
 
 			for (let i = existingUsersArray.length - 1; i >= 0; i--) {
 				// if handle is handle.invalid, remove from existing users and add to profiles to refresh
-				if (existingUsersArray[i].handle === 'handle.invalid') {
+				if (
+					(existingUsersArray[i].handle === 'handle.invalid' ||
+						(!existingUsersArray[i].avatar && !existingUsersArray[i].hasBlento)) &&
+					!uniqueDids.has(existingUsersArray[i].did)
+				) {
 					const removed = existingUsersArray.splice(i, 1)[0];
-					profiles.push(getDetailedProfile({ did: removed.did }));
+					profiles.push(getBlentoOrBskyProfile({ did: removed.did }));
+					// if in unique dids, remove from older existing users and keep the newer one
+					// so updated profiles go first
+				} else if (uniqueDids.has(existingUsersArray[i].did)) {
+					existingUsersArray.splice(i, 1);
 				}
 			}
 
-			const result = [...(await Promise.all(profiles)), ...existingUsersArray].filter(
-				(v) => v && v.handle !== 'handle.invalid'
-			);
+			let result = [...(await Promise.all(profiles)), ...existingUsersArray];
+
+			result = result.filter((v) => v && v.handle !== 'handle.invalid');
 
 			if (cache) {
 				await cache?.put('updatedBlentos', JSON.stringify(result));

src/lib/cards/SpotifyCard/index.ts

···
 	name: 'Spotify Embed',
 	canResize: true,
 	minW: 4,
-	minH: 5
+	minH: 5,
+
+	groups: ['Media']
 } as CardDefinition & { type: typeof cardType };
 
 // Match Spotify album and playlist URLs

src/lib/cards/StandardSiteDocumentListCard/index.ts

···
 		return records;
 	},
 
-	sidebarButtonText: 'site.standard.document list'
+	sidebarButtonText: 'site.standard.document list',
+
+	name: 'Blog Posts',
+
+	groups: ['Content']
 } 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']
 } as CardDefinition & { type: 'statusphere' };
 
 export function emojiToNotoAnimatedWebp(emoji: string | undefined): string | undefined {

src/lib/cards/TealFMPlaysCard/index.ts

···
 	},
 	minW: 4,
 	sidebarButtonText: 'teal.fm Plays',
-	canHaveLabel: true
+	canHaveLabel: true,
+
+	name: 'Teal.fm Plays',
+
+	groups: ['Media']
 } 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

···
 	allowSetColor: true,
 	name: 'Timer Card',
 	minW: 4,
-	canHaveLabel: true
+	canHaveLabel: true,
+	groups: ['Utilities']
 } as CardDefinition & { type: 'timer' };

src/lib/cards/VCardCard/index.ts

···
 
 	sidebarButtonText: 'vCard',
 	allowSetColor: true,
-	name: 'vCard Card'
+	name: 'vCard Card',
+	groups: ['Social']
 } as CardDefinition & { type: 'vcard' };

src/lib/cards/YoutubeVideoCard/index.ts

···
 
 		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 { TimerCardDefinition } from './TimerCard';
 import { SpotifyCardDefinition } from './SpotifyCard';
 import { ButtonCardDefinition } from './ButtonCard';
+import { GuestbookCardDefinition } from './GuestbookCard';
 // import { Model3DCardDefinition } from './Model3DCard';
 
 export const AllCardDefinitions = [
+	GuestbookCardDefinition,
 	ButtonCardDefinition,
 	ImageCardDefinition,
 	VideoCardDefinition,

src/lib/cards/types.ts

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

src/lib/components/bluesky-post/BlueskyPost.svelte

···
 		feedViewPost,
 		children,
 		showLogo = false,
+		showAvatar = false,
+		compact = false,
 		...restProps
-	}: { feedViewPost?: PostView; children?: Snippet; showLogo?: boolean } = $props();
+	}: {
+		feedViewPost?: PostView;
+		children?: Snippet;
+		showLogo?: boolean;
+		showAvatar?: boolean;
+		compact?: boolean;
+	} = $props();
 
 	const postData = $derived(feedViewPost ? blueskyPostToPostData(feedViewPost) : undefined);
 </script>
···
 		likeHref={postData?.href}
 		showBookmark={false}
 		logo={showLogo ? logo : undefined}
+		{showAvatar}
+		{compact}
 		{...restProps}
 	>
 		{@render children?.()}

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';
+
+	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
+	}: { open: boolean; onselect: (cardDef: CardDefinition) => void } = $props();
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+			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
+				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..."
+				/>
+				<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>
+
+						{#each CardDefGroups as group, index}
+							{#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}
+											<Command.Item
+												onSelect={() => {
+													open = false;
+													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/components/post/Post.svelte

···
 
 		children,
 
-		logo
+		logo,
+
+		showAvatar = false,
+		compact = false
 	}: WithElementRef<WithChildren<HTMLAttributes<HTMLDivElement>>> & {
 		data: PostData;
 		class?: string;
···
 		customActions?: Snippet;
 
 		logo?: Snippet;
+
+		showAvatar?: boolean;
+		compact?: boolean;
 	} = $props();
 </script>
 
···
 		</div>
 	{/if}
 	<div class="flex gap-4">
+		{#if showAvatar && data.author.avatar}
+			<a href={data.author.href} class="flex-shrink-0">
+				<img
+					src={data.author.avatar}
+					alt=""
+					class={compact ? 'size-7 rounded-full object-cover' : 'size-10 rounded-full object-cover'}
+				/>
+			</a>
+		{/if}
 		<div class="w-full">
 			<div class="mb-1 flex items-start justify-between gap-2">
 				<div class="flex items-start gap-4">
···
 					{/if}
 
 					<div
-						class="text-base-600 dark:text-base-400 accent:text-accent-950 block text-sm no-underline"
+						class={cn(
+							'text-base-600 dark:text-base-400 accent:text-accent-950 block no-underline',
+							compact ? 'text-xs' : 'text-sm'
+						)}
 					>
 						<RelativeTime date={new Date(data.createdAt)} locale="en" />
 					</div>
···
 			</div>
 
 			<Prose
-				size="md"
+				size={compact ? 'default' : 'md'}
 				class="accent:prose-a:text-accent-950 accent:text-base-900 accent:prose-p:text-base-900 accent:prose-a:underline"
 			>
 				{#if data.htmlContent}
···
 
 			<PostEmbed {data} />
 
-			{#if showReply || showRepost || showLike || showBookmark || customActions}
+			{#if !compact && (showReply || showRepost || showLike || showBookmark || customActions)}
 				<div
 					class="text-base-500 dark:text-base-400 accent:text-base-900 mt-4 flex justify-between gap-2"
 				>

src/lib/website/EditBar.svelte

···
 		handleImageInputChange,
 		handleVideoInputChange,
 
+		showCardCommand
 		selectedCard = null,
 		isMobile = false,
 		isCoarse = false,
···
 		handleImageInputChange: (evt: Event) => void;
 		handleVideoInputChange: (evt: Event) => void;
 
+		showCardCommand: () => void;
 		selectedCard?: Item | null;
 		isMobile?: boolean;
 		isCoarse?: boolean;
···
 	accept="image/*"
 	onchange={handleImageInputChange}
 	class="hidden"
+	id="image-input"
 	multiple
 	bind:this={imageInputRef}
 />
···
 						<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
 					</svg>
 				</Button>
+			{/if}
+
+			<Button size="iconLg" variant="ghost" class="backdrop-blur-none" onclick={showCardCommand}>
+				<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="M12 4.5v15m7.5-7.5h-15" />
+				</svg>
+			</Button>
+		</div>
+		<div class="flex items-center gap-2">
 			</div>
 		{/if}
 		<div class={['flex items-center gap-2', showMobileEditControls ? 'hidden' : '']}>

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 { setIsCoarse, setIsMobile, setSelectedCardId, setSelectCard } 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
···
 	}
 
 	// $inspect(items);
+
+	let showCardCommand = $state(true);
 </script>
 
 <svelte:body
···
 <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) => {
+			if (cardDef.type === 'image') {
+				const input = document.getElementById('image-input') as HTMLInputElement;
+				if (input) {
+					input.click();
+					return;
+				}
+			} else {
+				newCard(cardDef.type);
+			}
+		}}
+	/>
+
 	<Controls bind:data />
 
 	{#if showingMobileView}
···
 		{save}
 		{handleImageInputChange}
 		{handleVideoInputChange}
+		showCardCommand={() => {
+			showCardCommand = true;
 		{selectedCard}
 		{isMobile}
 		{isCoarse}