feat(photos): add square medium variant for sharp grid thumbnails

frontend/src/lib/components/PhotoGrid.svelte

@@ -28,6 +28,26 @@
 		onCursorFocus
 	}: Props = $props();
 
+	// gap-2 in the grid template is 0.5rem.
+	const GAP_PX = 8;
+	let gridWidth = $state(0);
+
+	// Offer every variant the photo actually has; the backend generates the
+	// medium variant asynchronously, so an incomplete set must still render.
+	function srcsetFor(photo: Photo): string {
+		const parts: string[] = [];
+		if (photo.thumb_url) parts.push(`${photo.thumb_url} 200w`);
+		if (photo.medium_url) parts.push(`${photo.medium_url} 800w`);
+		if (photo.preview_url) parts.push(`${photo.preview_url} 1200w`);
+		return parts.join(', ');
+	}
+
+	const sizes = $derived(
+		gridWidth > 0
+			? `${Math.max(1, Math.round((gridWidth - (density.cols - 1) * GAP_PX) / density.cols))}px`
+			: undefined
+	);
+
 	const isSelected = (id: string) => selectedIds.includes(id);
 	const isCursor = (i: number) => cursorIndex === i;
 	const tabIndexFor = (i: number) =>
@@ -47,6 +67,7 @@
 {:else}
 	<ul
 		class="grid gap-2"
+		bind:clientWidth={gridWidth}
 		style="grid-template-columns: repeat({density.cols}, minmax(0, 1fr));"
 	>
 		{#each photos as photo, i (photo.id)}
@@ -76,6 +97,8 @@
 					{#if photo.thumb_url}
 						<img
 							src={photo.thumb_url}
+							srcset={srcsetFor(photo)}
+							{sizes}
 							alt={photo.original_filename}
 							loading="lazy"
 							decoding="async"