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

frontend/src/routes/(app)/+page.svelte

@@ -12,6 +12,26 @@
 		if (auth.isAuthenticated && !albums.loaded) albums.load();
 	});
 
+	// gap-3 in the grid template is 0.75rem.
+	const GAP_PX = 12;
+	let gridWidth = $state(0);
+
+	// The medium cover URL falls back to the thumbnail until the medium variant
+	// is generated, so dedupe identical sources.
+	function coverSrcset(album: Album): string {
+		const parts: string[] = [];
+		if (album.cover_thumb_url) parts.push(`${album.cover_thumb_url} 200w`);
+		if (album.cover_medium_url && album.cover_medium_url !== album.cover_thumb_url)
+			parts.push(`${album.cover_medium_url} 800w`);
+		return parts.join(', ');
+	}
+
+	const coverSizes = $derived(
+		gridWidth > 0
+			? `${Math.max(1, Math.round((gridWidth - (density.cols - 1) * GAP_PX) / density.cols))}px`
+			: undefined
+	);
+
 	function onAlbumContextMenu(ev: MouseEvent, album: Album) {
 		ev.preventDefault();
 		ev.stopPropagation();
@@ -53,6 +73,7 @@
 			{/if}
 			<ul
 				class="grid gap-3"
+				bind:clientWidth={gridWidth}
 				style="grid-template-columns: repeat({density.cols}, minmax(0, 1fr));"
 			>
 				{#each albums.list as album (album.id)}
@@ -68,6 +89,8 @@
 								{#if album.cover_thumb_url}
 									<img
 										src={album.cover_thumb_url}
+										srcset={coverSrcset(album)}
+										sizes={coverSizes}
 										alt=""
 										class="h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
 										loading="lazy"