v0.1

src/lib/cards/BaseCard/BaseEditingCard.svelte

···
 
 	const cardDef = $derived(CardDefinitionsByType[item.cardType]);
 
-	const minW = $derived(cardDef?.minW ?? (isMobile() ? 2 : 2));
-	const minH = $derived(cardDef?.minH ?? (isMobile() ? 2 : 2));
+	const minW = $derived(cardDef.minW ?? (isMobile() ? 2 : 2));
+	const minH = $derived(cardDef.minH ?? (isMobile() ? 2 : 2));
 
-	const maxW = $derived(cardDef?.maxW ?? COLUMNS);
-	const maxH = $derived(cardDef?.maxH ?? (isMobile() ? 12 : 6));
+	const maxW = $derived(cardDef.maxW ?? COLUMNS);
+	const maxH = $derived(cardDef.maxH ?? (isMobile() ? 12 : 6));
 
 	// Resize handle state
 	let isResizing = $state(false);

src/lib/components/qr/QRCodeDisplay.svelte

···
 <script lang="ts">
-	import { browser } from '$app/environment';
+	import { onMount } from 'svelte';
 
-	let { url, size = 280, logo }: { url: string; size?: number; logo?: string } = $props();
+	let { url, size = 280 }: { url: string; size?: number } = $props();
 
 	let container: HTMLDivElement | undefined = $state();
 
-	$effect(() => {
-		if (!browser || !container) return;
-
-		const render = async () => {
-			const QRCodeStylingModule = await import('qr-code-styling');
-			const QRCodeStyling = QRCodeStylingModule.default;
-
-			container!.innerHTML = '';
+	onMount(async () => {
+		if (!container) return;
 
-			const options: ConstructorParameters<typeof QRCodeStyling>[0] = {
-				width: size,
-				height: size,
-				data: url,
-				dotsOptions: {
-					color: '#000',
-					type: 'rounded'
-				},
-				backgroundOptions: {
-					color: '#fff'
-				},
-				cornersSquareOptions: {
-					type: 'extra-rounded'
-				},
-				cornersDotOptions: {
-					type: 'dot'
-				}
-			};
+		const module = await import('qr-code-styling');
+		const QRCodeStyling = module.default;
 
-			if (logo) {
-				options.image = logo;
-				options.imageOptions = {
-					crossOrigin: 'anonymous',
-					margin: 4
-				};
+		const options: ConstructorParameters<typeof QRCodeStyling>[0] = {
+			width: size,
+			height: size,
+			data: url,
+			dotsOptions: {
+				color: '#000',
+				type: 'rounded'
+			},
+			backgroundOptions: {
+				color: '#fff'
+			},
+			cornersSquareOptions: {
+				type: 'extra-rounded'
+			},
+			cornersDotOptions: {
+				type: 'dot'
 			}
-
-			const qrCode = new QRCodeStyling(options);
-			qrCode.append(container!);
 		};
 
-		render();
+		const qrCode = new QRCodeStyling(options);
+		qrCode.append(container);
 	});
 </script>
 

src/lib/components/qr/QRCodeModal.svelte

···
 			toast.error('Failed to copy');
 		}
 	}
-
-	const logoUrl = $derived(context.avatar || context.favicon);
 </script>
 
 <Modal bind:open closeButton={true} class="max-w-sm">
···
 		{/if}
 
 		<div class="overflow-hidden rounded-2xl">
-			<QRCodeDisplay url={href} size={280} logo={logoUrl} />
+			<QRCodeDisplay url={href} size={280} />
 		</div>
 
 		<div class="flex w-full items-center gap-2">

src/lib/components/qr/qrOverlay.svelte.ts

···
 }
 
 export function qrOverlay(
-	node: HTMLAnchorElement,
-	params: { context?: QRContext; disabled?: boolean } = {}
+	node: HTMLElement,
+	params: { href?: string; context?: QRContext; disabled?: boolean } = {}
 ) {
 	const LONG_PRESS_DURATION = 500;
 	let longPressTimer: ReturnType<typeof setTimeout> | null = null;
 	let isLongPress = false;
 
+	function getHref() {
+		return params.href || (node as HTMLAnchorElement).href || '';
+	}
+
 	function startLongPress() {
 		if (params.disabled) return;
 		isLongPress = false;
 		longPressTimer = setTimeout(() => {
 			isLongPress = true;
-			openModal?.(node.href, params.context ?? {});
+			openModal?.(getHref(), params.context ?? {});
 		}, LONG_PRESS_DURATION);
 	}
 
···
 	function handleContextMenu(e: MouseEvent) {
 		if (params.disabled) return;
 		e.preventDefault();
-		openModal?.(node.href, params.context ?? {});
+		openModal?.(getHref(), params.context ?? {});
 	}
 
 	node.addEventListener('pointerdown', startLongPress);
···
 	node.addEventListener('contextmenu', handleContextMenu);
 
 	return {
-		update(newParams: { context?: QRContext; disabled?: boolean }) {
+		update(newParams: { href?: string; context?: QRContext; disabled?: boolean }) {
 			params = newParams;
 		},
 		destroy() {

src/lib/website/Profile.svelte

···
 	import { getDescription, getName } from '$lib/helper';
 	import { page } from '$app/state';
 	import type { ActorIdentifier } from '@atcute/lexicons';
-	import QRCodeModal from '$lib/components/qr/QRCodeModal.svelte';
+	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
 
 	let {
 		data,
···
 	renderer.link = ({ href, title, text }) =>
 		`<a target="_blank" href="${href}" title="${title}">${text}</a>`;
 
-	let qrOpen = $state(false);
-	let longPressTimer: ReturnType<typeof setTimeout> | null = null;
-
-	const profileUrl = $derived(`${page.url}/${data.handle}`);
-
-	function startLongPress() {
-		longPressTimer = setTimeout(() => {
-			qrOpen = true;
-		}, 500);
-	}
-
-	function cancelLongPress() {
-		if (longPressTimer) {
-			clearTimeout(longPressTimer);
-			longPressTimer = null;
-		}
-	}
-
-	function handleContextMenu(e: MouseEvent) {
-		e.preventDefault();
-		qrOpen = true;
-	}
+	const profileUrl = $derived(`${page.url.origin}/${data.handle}`);
 </script>
 
 <!-- lg:fixed lg:h-screen lg:w-1/4 lg:max-w-none lg:px-12 lg:pt-24 xl:w-1/3 -->
···
 	class="mx-auto flex max-w-lg flex-col justify-between px-8 @5xl/wrapper:fixed @5xl/wrapper:h-screen @5xl/wrapper:w-1/4 @5xl/wrapper:max-w-none @5xl/wrapper:px-12"
 >
 	<div class="flex flex-col gap-4 pt-16 pb-8 @5xl/wrapper:h-screen @5xl/wrapper:pt-24">
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div
-			class="w-fit cursor-pointer"
-			onpointerdown={startLongPress}
-			onpointerup={cancelLongPress}
-			onpointercancel={cancelLongPress}
-			onpointerleave={cancelLongPress}
-			oncontextmenu={handleContextMenu}
+		<a
+			href={profileUrl}
+			class="w-fit"
+			use:qrOverlay={{
+				context: {
+					title: getName(data),
+					avatar: data.profile.avatar
+				}
+			}}
 		>
 			{#if data.profile.avatar}
 				<img
···
 			{:else}
 				<div class="bg-base-300 dark:bg-base-700 size-32 rounded-full @5xl/wrapper:size-44"></div>
 			{/if}
-		</div>
-		<QRCodeModal
-			bind:open={qrOpen}
-			href={profileUrl}
-			context={{
-				title: getName(data),
-				avatar: data.profile.avatar
-			}}
-		/>
+		</a>
 
 		<div class="text-4xl font-bold wrap-anywhere">
 			{getName(data)}