Merge branch 'main' into profile-stuff

src/lib/atproto/methods.ts

···
 } from '@atcute/identity-resolver';
 import { Client, simpleFetchHandler } from '@atcute/client';
 import type { AppBskyActorDefs } from '@atcute/bluesky';
+import { redirect } from '@sveltejs/kit';
 
 export type Collection = `${string}.${string}.${string}`;
 
···
 		}
 	});
 
-	const data = await handleResolver.resolve(handle);
-	return data;
+	try {
+		const data = await handleResolver.resolve(handle);
+		return data;
+	} catch (error) {
+		redirect(307, '/?error=handle_not_found&handle=' + handle);
+	}
 }
 
 const didResolver = new CompositeDidDocumentResolver({

src/lib/cards/VCardCard/VCardCard.svelte

···
+<script lang="ts">
+	import { Modal } from '@foxui/core';
+	import QRCodeDisplay from '$lib/components/qr/QRCodeDisplay.svelte';
+	import type { ContentComponentProps } from '../types';
+	import { parseVCardName, parseVCardOrg } from '.';
+
+	let { item }: ContentComponentProps = $props();
+
+	let showQR = $state(false);
+
+	let displayName = $derived(
+		item.cardData.displayName || parseVCardName(item.cardData.vcard || '') || 'Contact'
+	);
+	let org = $derived(parseVCardOrg(item.cardData.vcard || ''));
+</script>
+
+<button
+	class="flex h-full w-full cursor-pointer flex-col items-center justify-center gap-3 p-3"
+	onclick={() => (showQR = true)}
+	><div
+		class="text-base-500 dark:text-base-400 accent:text-base-700 text-[12px] font-medium tracking-wide uppercase"
+	>
+		vCard
+	</div>
+	<!-- Identification Card icon (Heroicons) -->
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		stroke-width="1.5"
+		stroke="currentColor"
+		class="text-base-700 dark:text-base-300 accent:text-base-900 size-10"
+	>
+		<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>
+
+	<div class="text-center">
+		<div class="text-base-900 dark:text-base-100 accent:text-base-900 text-sm font-semibold">
+			{displayName}
+		</div>
+		{#if org}
+			<div class="text-base-600 dark:text-base-400 accent:text-base-800 text-xs">
+				{org}
+			</div>
+		{/if}
+	</div>
+</button>
+
+<Modal bind:open={showQR} closeButton={true} class="max-w-[90vw]! sm:max-w-sm! md:max-w-md!">
+	<div class="flex flex-col items-center justify-center gap-4 p-4">
+		<div class="text-base-900 dark:text-base-100 text-center text-2xl font-semibold">
+			{displayName}
+		</div>
+
+		<div class="flex items-center justify-center overflow-hidden rounded-2xl">
+			<QRCodeDisplay
+				url={item.cardData.vcard || ''}
+				class="size-[min(70vw,320px)] sm:size-72 md:size-80"
+			/>
+		</div>
+
+		<p class="text-base-600 dark:text-base-400 text-center text-sm">
+			Scan to add contact to your phone
+		</p>
+	</div>
+</Modal>

src/lib/cards/VCardCard/VCardCardSettings.svelte

···
+<script lang="ts">
+	import { Alert, Button, Subheading } from '@foxui/core';
+	import type { SettingsComponentProps } from '../types';
+	import { parseVCard, generateVCard, parseVCardName, emptyVCardFields, type VCardFields } from '.';
+
+	let { item = $bindable(), onclose }: SettingsComponentProps = $props();
+
+	let mode: 'easy' | 'expert' = $state('easy');
+	let fields: VCardFields = $state(
+		parseVCard(item.cardData.vcard || '') || { ...emptyVCardFields }
+	);
+
+	function syncFromFields() {
+		item.cardData.vcard = generateVCard(fields);
+		item.cardData.displayName = parseVCardName(item.cardData.vcard);
+	}
+
+	function handleTextarea(e: Event) {
+		const text = (e.target as HTMLTextAreaElement).value;
+		item.cardData.vcard = text;
+		item.cardData.displayName = parseVCardName(text);
+		fields = parseVCard(text);
+	}
+</script>
+
+<div class="flex w-72 flex-col gap-3 p-2">
+	<Subheading>Edit vCard</Subheading>
+
+	<Alert type="info" title="Privacy">
+		<p class="text-xs">All data is public, be aware.</p>
+	</Alert>
+
+	<div class="flex items-center gap-2 text-xs">
+		<button
+			class={[
+				'rounded px-2 py-1',
+				mode === 'easy' ? 'bg-accent-500 text-white' : 'bg-base-200 dark:bg-base-700'
+			]}
+			onclick={() => (mode = 'easy')}
+		>
+			Easy
+		</button>
+		<button
+			class={[
+				'rounded px-2 py-1',
+				mode === 'expert' ? 'bg-accent-500 text-white' : 'bg-base-200 dark:bg-base-700'
+			]}
+			onclick={() => (mode = 'expert')}
+		>
+			Expert
+		</button>
+		<a
+			href="https://wikipedia.org/wiki/VCard"
+			target="_blank"
+			class="text-accent-600 dark:text-accent-400 underline">Learn about the vCard format</a
+		>
+	</div>
+
+	{#if mode === 'easy'}
+		<div class="flex flex-col gap-1 text-xs">
+			<div class="grid grid-cols-2 gap-1">
+				<input
+					bind:value={fields.firstName}
+					oninput={syncFromFields}
+					placeholder="First name"
+					class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 rounded border px-2 py-1"
+				/>
+				<input
+					bind:value={fields.lastName}
+					oninput={syncFromFields}
+					placeholder="Last name"
+					class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 rounded border px-2 py-1"
+				/>
+			</div>
+			<input
+				bind:value={fields.org}
+				oninput={syncFromFields}
+				placeholder="Organization"
+				class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 rounded border px-2 py-1"
+			/>
+			<input
+				bind:value={fields.title}
+				oninput={syncFromFields}
+				placeholder="Job title"
+				class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 rounded border px-2 py-1"
+			/>
+			<input
+				bind:value={fields.email}
+				oninput={syncFromFields}
+				placeholder="Email"
+				type="email"
+				class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 rounded border px-2 py-1"
+			/>
+			<input
+				bind:value={fields.bday}
+				oninput={syncFromFields}
+				placeholder="Birthday"
+				type="date"
+				class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 rounded border px-2 py-1"
+			/>
+			<input
+				bind:value={fields.website}
+				oninput={syncFromFields}
+				placeholder="Website"
+				type="url"
+				class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 rounded border px-2 py-1"
+			/>
+			<input
+				bind:value={fields.address}
+				oninput={syncFromFields}
+				placeholder="Address"
+				class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 rounded border px-2 py-1"
+			/>
+		</div>
+	{:else}
+		<textarea
+			class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 h-40 w-full resize-none rounded border p-2 font-mono text-xs focus:outline-none"
+			value={item.cardData.vcard || ''}
+			oninput={handleTextarea}
+			placeholder="BEGIN:VCARD
+VERSION:4.0
+FN:John Doe
+END:VCARD"
+		></textarea>
+	{/if}
+
+	<Button onclick={onclose} size="sm">Done</Button>
+</div>

src/lib/cards/VCardCard/index.ts

···
+import { user } from '$lib/atproto/auth.svelte';
+import type { CardDefinition } from '../types';
+import VCardCard from './VCardCard.svelte';
+import VCardCardSettings from './VCardCardSettings.svelte';
+
+// vCard spec: https://wikipedia.org/wiki/VCard
+
+export type VCardFields = {
+	firstName: string;
+	lastName: string;
+	org: string;
+	title: string;
+	email: string;
+	bday: string; // YYYY-MM-DD for input, stored as YYYYMMDD
+	website: string;
+	address: string;
+	note: string;
+};
+
+export const emptyVCardFields: VCardFields = {
+	firstName: '',
+	lastName: '',
+	org: '',
+	title: '',
+	email: '',
+	bday: '',
+	website: '',
+	address: '',
+	note: ''
+};
+
+// Convert YYYY-MM-DD to YYYYMMDD for vCard
+export function formatBdayToVCard(date: string): string {
+	return date.replace(/-/g, '');
+}
+
+// Convert YYYYMMDD to YYYY-MM-DD for input
+export function formatBdayFromVCard(bday: string): string {
+	if (bday.length === 8) {
+		return `${bday.slice(0, 4)}-${bday.slice(4, 6)}-${bday.slice(6, 8)}`;
+	}
+	return bday;
+}
+
+// Generate vCard v4 string from fields
+export function generateVCard(f: VCardFields): string {
+	const lines = ['BEGIN:VCARD', 'VERSION:4.0'];
+	const fn = `${f.firstName} ${f.lastName}`.trim();
+	if (fn) lines.push(`FN:${fn}`);
+	if (f.lastName || f.firstName) lines.push(`N:${f.lastName};${f.firstName};;;`);
+	if (f.org) lines.push(`ORG:${f.org}`);
+	if (f.title) lines.push(`TITLE:${f.title}`);
+	if (f.email) lines.push(`EMAIL:${f.email}`);
+	if (f.bday) lines.push(`BDAY:${formatBdayToVCard(f.bday)}`);
+	if (f.website) lines.push(`URL:${f.website}`);
+	if (f.address) lines.push(`ADR:;;${f.address};;;;`);
+	if (f.note) lines.push(`NOTE:${f.note}`);
+	lines.push('END:VCARD');
+	return lines.join('\n');
+}
+
+// Parse vCard string to fields (supports v3 & v4)
+export function parseVCard(vcard: string): VCardFields {
+	const get = (key: string) => {
+		const m = vcard.match(new RegExp(`^${key}[;:](.*)$`, 'im'));
+		return m?.[1]?.trim() || '';
+	};
+
+	const n = get('N').split(';');
+	let lastName = n[0] || '';
+	let firstName = n[1] || '';
+
+	if (!lastName && !firstName) {
+		const fn = get('FN').split(' ');
+		firstName = fn[0] || '';
+		lastName = fn.slice(1).join(' ') || '';
+	}
+
+	const adr = get('ADR').split(';');
+
+	return {
+		firstName,
+		lastName,
+		org: get('ORG').split(';')[0],
+		title: get('TITLE'),
+		email: get('EMAIL'),
+		bday: formatBdayFromVCard(get('BDAY')),
+		website: get('URL'),
+		address: adr[2] || '',
+		note: get('NOTE')
+	};
+}
+
+// Parse FN (formatted name) or N from vCard
+export function parseVCardName(vcard: string): string {
+	const f = parseVCard(vcard);
+	return `${f.firstName} ${f.lastName}`.trim();
+}
+
+// Parse ORG from vCard
+export function parseVCardOrg(vcard: string): string {
+	return parseVCard(vcard).org;
+}
+
+export const VCardCardDefinition = {
+	type: 'vcard',
+	contentComponent: VCardCard,
+	settingsComponent: VCardCardSettings,
+
+	createNew: (card) => {
+		card.w = 2;
+		card.h = 2;
+		card.mobileW = 4;
+		card.mobileH = 4;
+		const displayName = user.profile?.displayName || user.profile?.handle || '';
+		card.cardData.vcard = generateVCard({
+			...emptyVCardFields,
+			lastName: displayName
+		});
+		card.cardData.displayName = displayName;
+	},
+
+	sidebarButtonText: 'vCard',
+	allowSetColor: true,
+	name: 'vCard Card'
+} as CardDefinition & { type: 'vcard' };

src/lib/cards/index.ts

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

src/lib/website/EditableProfile.svelte

···
 	import MarkdownTextEditor from '$lib/components/MarkdownTextEditor.svelte';
 	import { Button } from '@foxui/core';
 	import { getIsMobile } from './context';
+	import type { Editor } from '@tiptap/core';
+	import MadeWithBlento from './MadeWithBlento.svelte';
 
 	let { data = $bindable() }: { data: WebsiteData } = $props();
 
···
 
 		<div class={['h-10.5 w-1', profilePosition === 'side' && '@5xl/wrapper:hidden']}></div>
 
-		<div class={['hidden text-xs font-light', profilePosition === 'side' && '@5xl/wrapper:block']}>
-			made with <a
-				href="https://blento.app"
-				target="_blank"
-				class="hover:text-accent-600 dark:hover:text-accent-400 font-medium transition-colors duration-200"
-				>blento</a
-			>
-		</div>
+		<MadeWithBlento class="hidden @5xl/wrapper:block {profilePosition === 'side' && '@5xl/wrapper:block'}" />
 	</div>
 </div>

src/lib/website/EditableWebsite.svelte

···
 	import { compressImage } from '../helper';
 	import Account from './Account.svelte';
 	import EditBar from './EditBar.svelte';
+	import { user } from '$lib/atproto';
 
 	let {
 		data
···
 		</div>
 	</Sidebar>
 
-	<EditBar
-		{data}
-		bind:linkValue
-		bind:isSaving
-		bind:showingMobileView
-		{newCard}
-		{addLink}
-		{save}
-		{handleImageInputChange}
-		{handleVideoInputChange}
-	/>
+	{#if user.isLoggedIn}
+		<EditBar
+			{data}
+			bind:linkValue
+			bind:isSaving
+			bind:showingMobileView
+			{newCard}
+			{addLink}
+			{save}
+			{handleImageInputChange}
+			{handleVideoInputChange}
+		/>
+	{/if}
 
 	<Toaster />
 </Context>

src/lib/website/EmptyState.svelte

···
+<script lang="ts">
+	import { login, user } from '$lib/atproto';
+	import BaseCard from '$lib/cards/BaseCard/BaseCard.svelte';
+	import Card from '$lib/cards/Card/Card.svelte';
+	import type { Item, WebsiteData } from '$lib/types';
+	import type { ActorIdentifier } from '@atcute/lexicons';
+	import { Button } from '@foxui/core';
+
+	let { data }: { data: WebsiteData } = $props();
+
+	let cards = $derived.by((): Item[] => {
+		const items: Item[] = [];
+
+		// Name + "No blento yet" card
+		items.push({
+			id: 'empty-main',
+			x: 0,
+			y: 0,
+			w: 6,
+			h: 2,
+			mobileX: 0,
+			mobileY: 0,
+			mobileW: 8,
+			mobileH: 3,
+			cardType: 'text',
+			color: 'red',
+			cardData: {
+				text: `## No blento yet!`,
+				textAlign: 'center',
+				verticalAlign: 'center'
+			}
+		});
+
+		// Bluesky social icon
+		items.push({
+			id: 'empty-bluesky',
+			x: 0,
+			y: 2,
+			w: 2,
+			h: 2,
+			mobileX: 0,
+			mobileY: 3,
+			mobileW: 3,
+			mobileH: 3,
+			cardType: 'bigsocial',
+			cardData: {
+				platform: 'bluesky',
+				href: `https://bsky.app/profile/${data.handle}`,
+				color: '0285FF'
+			}
+		});
+
+		return items;
+	});
+
+	let maxHeight = $derived(cards.reduce((max, item) => Math.max(max, item.y + item.h), 0));
+
+	let maxMobileHeight = $derived(
+		cards.reduce((max, item) => Math.max(max, item.mobileY + item.mobileH), 0)
+	);
+</script>
+
+{#each cards as item (item.id)}
+	<BaseCard {item}>
+		<Card {item} />
+	</BaseCard>
+{/each}
+
+<!-- Spacer for grid height -->
+<div class="hidden @[42rem]/grid:block" style="height: {(maxHeight / 8) * 100}cqw;"></div>
+<div class="@[42rem]/grid:hidden" style="height: {(maxMobileHeight / 4) * 100}cqw;"></div>
+
+{#if !user.isLoggedIn}
+	<div
+		class="dark:bg-base-950 border-base-200 dark:border-base-900 fixed top-4 right-4 z-20 flex flex-col gap-4 rounded-2xl border bg-white p-4 shadow-lg"
+	>
+		<span class="text-sm font-semibold">Login to edit your page</span>
+
+		<Button
+			onclick={async () => {
+				await login(data.handle as ActorIdentifier);
+			}}>Login</Button
+		>
+	</div>
+{/if}

src/lib/website/MadeWithBlento.svelte

···
+<script lang="ts">
+	let { class: className = '' }: { class?: string } = $props();
+</script>
+
+<div class={['text-xs font-light', className]}>
+	made with <a
+		href="https://blento.app"
+		target="_blank"
+		class="hover:text-accent-600 dark:hover:text-accent-400 font-medium transition-colors duration-200"
+		>blento</a
+	>
+</div>

src/lib/website/Profile.svelte

···
 	import { page } from '$app/state';
 	import type { ActorIdentifier } from '@atcute/lexicons';
 	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
+	import MadeWithBlento from './MadeWithBlento.svelte';
 
 	let {
 		data,
···
 				</div>
 			{/if}
 		{/if}
-		<div class={['hidden text-xs font-light', profilePosition === 'side' && '@5xl/wrapper:block']}>
-			made with <a
-				href="https://blento.app"
-				target="_blank"
-				class="hover:text-accent-600 dark:hover:text-accent-400 font-medium transition-colors duration-200"
-				>blento</a
-			>
-		</div>
+		<MadeWithBlento class="hidden {profilePosition === 'side' && '@5xl/wrapper:block'}" />
 	</div>
 </div>

src/lib/website/Website.svelte

···
 	import BaseCard from '../cards/BaseCard/BaseCard.svelte';
 	import type { WebsiteData } from '$lib/types';
 	import Context from './Context.svelte';
+	import MadeWithBlento from './MadeWithBlento.svelte';
 	import Head from './Head.svelte';
 	import type { Did, Handle } from '@atcute/lexicons';
 	import QRModalProvider from '$lib/components/qr/QRModalProvider.svelte';
+	import EmptyState from './EmptyState.svelte';
 
 	let { data }: { data: WebsiteData } = $props();
 
···
 		>
 			<div></div>
 			<div bind:this={container} class="@container/grid relative col-span-3 px-2 py-8 lg:px-8">
-				{#each data.cards.toSorted(sortItems) as item (item.id)}
-					<BaseCard {item}>
-						<Card {item} />
-					</BaseCard>
-				{/each}
-				<div style="height: {(maxHeight / 8) * 100}cqw;"></div>
+				{#if data.cards.length === 0}
+					<EmptyState {data} />
+				{:else}
+					{#each data.cards.toSorted(sortItems) as item (item.id)}
+						<BaseCard {item}>
+							<Card {item} />
+						</BaseCard>
+					{/each}
+					<div style="height: {(maxHeight / 8) * 100}cqw;"></div>
+				{/if}
 			</div>
 		</div>
 
-		<div class="mx-auto block pb-8 text-center text-xs font-light @5xl/wrapper:hidden">
-			made with <a
-				href="https://blento.app"
-				target="_blank"
-				class="hover:text-accent-600 dark:hover:text-accent-400 font-medium transition-colors duration-200"
-				>blento</a
-			>
-		</div>
+		<MadeWithBlento class="mx-auto block pb-8 text-center @5xl/wrapper:hidden" />
 	</div>
 </Context>

src/routes/+error.svelte

···
+<script lang="ts">
+	import { page } from '$app/stores';
+	import MadeWithBlento from '$lib/website/MadeWithBlento.svelte';
+</script>
+
+<div
+	class="bg-base-100 dark:bg-base-950 text-base-900 dark:text-base-50 min-h-screen px-4 py-8 lg:px-8"
+>
+	<div class="@container/grid mx-auto max-w-4xl">
+		<!-- Bento Grid -->
+		<div class="grid grid-cols-4 gap-3 lg:grid-cols-8 lg:gap-4">
+			<!-- Error Code - Large prominent card -->
+			<div
+				class="col-span-4 row-span-2 flex flex-col items-center justify-center rounded-3xl bg-gradient-to-br from-pink-500 to-rose-500 p-8 text-white lg:col-span-4"
+			>
+				<span class="text-8xl font-black lg:text-9xl">{$page.status}</span>
+				<span class="mt-2 text-xl font-medium opacity-90">Error</span>
+			</div>
+
+			<!-- Oops card -->
+			<div
+				class="col-span-2 flex items-center justify-center rounded-3xl bg-amber-500 p-6 text-white"
+			>
+				<span class="text-2xl font-bold lg:text-3xl">Oops!</span>
+			</div>
+
+			<!-- Decorative emoji card -->
+			<div
+				class="col-span-2 flex items-center justify-center rounded-3xl bg-violet-500 p-6 text-4xl lg:text-5xl"
+			>
+				<span class="animate-bounce">:(</span>
+			</div>
+
+			<!-- Message card -->
+			<div
+				class="bg-base-200/50 dark:bg-base-800/50 text-base-700 dark:text-base-300 col-span-4 flex items-center justify-center rounded-3xl p-6 text-center"
+			>
+				<p class="text-lg font-medium">
+					{$page.error?.message ||
+						"Something went wrong. We couldn't find what you're looking for."}
+				</p>
+			</div>
+
+			<!-- Decorative pattern card -->
+			<div
+				class="col-span-2 flex items-center justify-center overflow-hidden rounded-3xl bg-cyan-500 p-4"
+			>
+				<div class="grid grid-cols-3 gap-2">
+					{#each Array(9) as _, i (i)}
+						<div class="h-3 w-3 rounded-full bg-white/40 lg:h-4 lg:w-4"></div>
+					{/each}
+				</div>
+			</div>
+
+			<!-- Home link card -->
+			<a
+				href="/"
+				class="col-span-2 flex items-center justify-center rounded-3xl bg-emerald-500 p-6 text-white transition-transform hover:scale-[1.02] active:scale-[0.98]"
+			>
+				<span class="text-lg font-bold lg:text-xl">Go Home</span>
+			</a>
+
+			<!-- Decorative stripes card -->
+			<div class="col-span-2 overflow-hidden rounded-3xl bg-blue-500 p-4">
+				<div class="flex h-full w-full flex-col justify-center gap-2">
+					<div class="h-2 w-full rounded-full bg-white/30"></div>
+					<div class="h-2 w-3/4 rounded-full bg-white/40"></div>
+					<div class="h-2 w-1/2 rounded-full bg-white/50"></div>
+				</div>
+			</div>
+
+			<!-- Decorative circles card -->
+			<div
+				class="col-span-2 flex items-center justify-center rounded-3xl bg-orange-500 p-4 lg:col-span-2"
+			>
+				<div class="relative h-16 w-16 lg:h-20 lg:w-20">
+					<div class="absolute inset-0 rounded-full border-4 border-white/40"></div>
+					<div class="absolute inset-2 rounded-full border-4 border-white/50"></div>
+					<div class="absolute inset-4 rounded-full border-4 border-white/60"></div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Footer -->
+	<MadeWithBlento class="text-base-500 mt-12 text-center" />
+</div>

src/routes/+layout.svelte

···
 <script lang="ts">
 	import '../app.css';
 
-	import { ThemeToggle } from '@foxui/core';
+	import { ThemeToggle, Toaster, toast } from '@foxui/core';
 	import { onMount } from 'svelte';
 	import { initClient } from '$lib/atproto';
 	import YoutubeVideoPlayer, { videoPlayer } from '$lib/components/YoutubeVideoPlayer.svelte';
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
 
 	let { children } = $props();
+
+	const errorMessages: Record<string, (params: URLSearchParams) => string> = {
+		handle_not_found: (p) => `Handle ${p.get('handle') ?? ''} not found!`
+	};
 
 	onMount(() => {
 		initClient();
+
+		const error = page.url.searchParams.get('error');
+		if (error) {
+			const msg = errorMessages[error]?.(page.url.searchParams) ?? error;
+			toast.error(msg);
+			goto(page.url.pathname, { replaceState: true });
+		}
 	});
 </script>
 
 {@render children()}
 
 <ThemeToggle class="fixed top-2 left-2 z-10" />
+<Toaster />
 
 {#if videoPlayer.id}
 	<YoutubeVideoPlayer />