implement photo gallery and lightbox

deno.lock

···
     "npm:globals@17": "17.0.0",
     "npm:hash-wasm@^4.12.0": "4.12.0",
     "npm:lru-cache@^11.2.4": "11.2.4",
+    "npm:photoswipe@^5.4.4": "5.4.4",
     "npm:prettier-plugin-svelte@^3.4.1": "3.4.1_prettier@3.7.4_svelte@5.46.1__acorn@8.15.0",
     "npm:prettier-plugin-tailwindcss@~0.7.2": "0.7.2_prettier@3.7.4_prettier-plugin-svelte@3.4.1__prettier@3.7.4__svelte@5.46.1___acorn@8.15.0_svelte@5.46.1__acorn@8.15.0",
     "npm:prettier@^3.7.4": "3.7.4",
···
     "path-key@3.1.1": {
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
     },
+    "photoswipe@5.4.4": {
+      "integrity": "sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA=="
+    },
     "picocolors@1.1.1": {
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
···
         "npm:globals@17",
         "npm:hash-wasm@^4.12.0",
         "npm:lru-cache@^11.2.4",
+        "npm:photoswipe@^5.4.4",
         "npm:prettier-plugin-svelte@^3.4.1",
         "npm:prettier-plugin-tailwindcss@~0.7.2",
         "npm:prettier@^3.7.4",

package.json

···
 		"async-cache-dedupe": "^3.4.0",
 		"hash-wasm": "^4.12.0",
 		"lru-cache": "^11.2.4",
+		"photoswipe": "^5.4.4",
 		"svelte-device-info": "^1.0.6",
 		"svelte-infinite": "^0.5.1",
 		"svelte-portal": "^2.2.1"

src/components/BskyPost.svelte

···
 	import { getRelativeTime } from '$lib/date';
 	import { likeSource, repostSource, toCanonicalUri } from '$lib';
 	import ProfileInfo from './ProfileInfo.svelte';
+	import PhotoSwipeGallery, { type GalleryItem } from './PhotoSwipeGallery.svelte';
 
 	interface Props {
 		client: AtpClient;
···
 		if (!p.ok) return;
 		profile = p.value;
 		profiles.set(did, profile);
-		// console.log(profile.description);
 	});
 
-	const postId = $derived(`timeline-post-${aturi}-${quoteDepth}`);
+	const postId = $derived(
+		`timeline-post-${did.replace(/[^a-zA-Z0-9]/g, '_')}-${rkey}-${quoteDepth}`
+	);
 	const isPulsing = derived(pulsingPostId, (pulsingPostId) => pulsingPostId === postId);
 
-	// todo: this fucking sucks
 	const scrollToAndPulse = (targetUri: ResourceUri) => {
 		const targetId = `timeline-post-${targetUri}-0`;
-		// console.log(`Scrolling to ${targetId}`);
 		const element = document.getElementById(targetId);
 		if (!element) return;
 
···
 				generateColorForDid(expect(parseCanonicalResourceUri(targetUri)).repo)
 			);
 			pulsingPostId.set(targetId);
-			// Clear pulse after animation
 			setTimeout(() => pulsingPostId.set(null), 1200);
 		}, 400);
 	};
···
 	</button>
 {/snippet}
 
-<!-- eslint-disable svelte/no-navigation-without-resolve -->
 {#snippet profilePopout()}
 	<Dropdown
 		class="post-dropdown max-w-xl gap-2! p-2.5! backdrop-blur-3xl! backdrop-brightness-25!"
···
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div oncontextmenu={(e) => e.stopPropagation()}>
 			{#if embed.$type === 'app.bsky.embed.images'}
-				<!-- todo: improve how images are displayed, and pop out on click -->
-				{#each embed.images as image (image.image)}
-					{#if isBlob(image.image)}
-						<img
-							class="w-full rounded-sm"
-							src={img('feed_thumbnail', did, image.image.ref.$link)}
-							alt={image.alt}
-						/>
-					{/if}
-				{/each}
+				{@const _images = embed.images.flatMap((img) =>
+					isBlob(img.image) ? [{ ...img, image: img.image }] : []
+				)}
+				{@const images = _images.map((i): GalleryItem => {
+					const sizeFactor = 200;
+					const size = {
+						width: (i.aspectRatio?.width ?? 4) * sizeFactor,
+						height: (i.aspectRatio?.height ?? 3) * sizeFactor
+					};
+					return {
+						...size,
+						src: img('feed_fullsize', did, i.image.ref.$link),
+						thumbnail: {
+							src: img('feed_thumbnail', did, i.image.ref.$link),
+							...size
+						}
+					};
+				})}
+				<PhotoSwipeGallery {images} />
 			{:else if embed.$type === 'app.bsky.embed.video'}
 				{#if isBlob(embed.video)}
 					{#await didDoc then didDoc}
···
 			{@render embedMedia(embed.media)}
 		</div>
 	{/if}
-	<!-- todo: implement external link embeds -->
 {/snippet}
 
 {#snippet postControls(post: PostWithUri)}
···
 
 	:global(.post-dropdown) {
 		@apply flex min-w-54 flex-col gap-1 rounded-sm border-2 p-1 shadow-2xl backdrop-blur-xl backdrop-brightness-60;
+	}
+
+	.image-grid {
+		display: grid;
+		gap: 2px;
+		border-radius: 0.375rem;
+		overflow: hidden;
+		max-height: 500px;
+	}
+
+	/* 1 image: full width */
+	.image-grid.count-1 {
+		grid-template-columns: 1fr;
+	}
+
+	/* 2 images: side by side */
+	.image-grid.count-2 {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	/* 3 images: first spans left, two stack on right */
+	.image-grid.count-3 {
+		grid-template-columns: repeat(2, 1fr);
+		grid-template-rows: repeat(2, 1fr);
+	}
+	.image-grid.count-3 a:first-child {
+		grid-row: 1 / 3;
+	}
+
+	/* 4+ images: 2x2 grid */
+	.image-grid.count-4,
+	.image-grid.count-5 {
+		grid-template-columns: repeat(2, 1fr);
+		grid-template-rows: repeat(2, 1fr);
+	}
+
+	.image-item {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		display: block;
+		cursor: pointer;
+		transition: opacity 0.2s;
+	}
+
+	.image-item:hover {
+		opacity: 0.9;
 	}
 </style>

src/components/PhotoSwipeGallery.svelte

···
+<script context="module" lang="ts">
+	export interface GalleryItem {
+		src: string;
+		thumbnail?: {
+			src: string;
+			width: number;
+			height: number;
+		};
+		width: number;
+		height: number;
+		cropped?: boolean;
+		alt?: string;
+	}
+	export type GalleryData = Array<GalleryItem>;
+</script>
+
+<script lang="ts">
+	import 'photoswipe/photoswipe.css';
+	import PhotoSwipeLightbox from 'photoswipe/lightbox';
+	import PhotoSwipe, { type ElementProvider, type PreparedPhotoSwipeOptions } from 'photoswipe';
+	import { onMount } from 'svelte';
+	import { writable } from 'svelte/store';
+
+	export let images: GalleryData;
+	let element: HTMLDivElement;
+
+	const options = writable<Partial<PreparedPhotoSwipeOptions> | undefined>(undefined);
+	$: {
+		if (!element) break $;
+		const opts: Partial<PreparedPhotoSwipeOptions> = {
+			pswpModule: PhotoSwipe,
+			children: element.childNodes as ElementProvider,
+			gallery: element,
+			hideAnimationDuration: 0,
+			showAnimationDuration: 0,
+			zoomAnimationDuration: 200,
+			zoomSVG:
+				'<svg class="gallery--icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M6.25 8.75v-1h-1a.75.75 0 0 1 0-1.5h1v-1a.75.75 0 0 1 1.5 0v1h1a.75.75 0 0 1 0 1.5h-1v1a.75.75 0 0 1-1.5 0"/><path fill="currentColor" fill-rule="evenodd" d="M7 12c1.11 0 2.136-.362 2.965-.974l2.755 2.754a.75.75 0 1 0 1.06-1.06l-2.754-2.755A5 5 0 1 0 7 12m0-1.5a3.5 3.5 0 1 0 0-7a3.5 3.5 0 0 0 0 7" clip-rule="evenodd"/></svg>',
+			closeSVG:
+				'<svg class="gallery--icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94z"/></svg>',
+			arrowPrevSVG:
+				'<svg class="gallery--icon" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9.78 4.22a.75.75 0 0 1 0 1.06L7.06 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L5.47 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0" clip-rule="evenodd"/></svg>',
+			arrowNextSVG:
+				'<svg class="gallery--icon" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8L6.22 5.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"/></svg>'
+		};
+		$options = opts;
+	}
+
+	onMount(() => {
+		let lightbox: PhotoSwipeLightbox | undefined;
+		const unsub = options.subscribe((opts) => {
+			lightbox?.destroy?.();
+			if (opts === undefined) return;
+			lightbox = new PhotoSwipeLightbox(opts);
+			lightbox.init();
+		});
+		return () => {
+			unsub();
+			lightbox?.destroy?.();
+		};
+	});
+</script>
+
+<div class="gallery styling-twitter" data-total={images.length} bind:this={element}>
+	{#each images as img, i (img.src)}
+		{@const thumb = img.thumbnail ?? img}
+		{@const isHidden = i > 3}
+		{@const isOverlay = i === 3 && images.length > 4}
+
+		<a
+			href={img.src}
+			data-pswp-width={img.width}
+			data-pswp-height={img.height}
+			target="_blank"
+			class:hidden-in-grid={isHidden}
+			class:overlay-container={isOverlay}
+		>
+			<img src={thumb.src} alt={img.alt ?? ''} width={thumb.width} height={thumb.height} />
+
+			{#if isOverlay}
+				<div class="more-overlay">
+					+{images.length - 4}
+				</div>
+			{/if}
+		</a>
+	{/each}
+</div>
+
+<style>
+	:global(.gallery--icon) {
+		--drop-color: color-mix(in srgb, var(--color-gray-900) 70%, transparent);
+		color: var(--nucleus-fg);
+		filter: drop-shadow(2px 2px 1px var(--drop-color)) drop-shadow(-2px -2px 1px var(--drop-color))
+			drop-shadow(-2px 2px 1px var(--drop-color)) drop-shadow(2px -2px 1px var(--drop-color));
+	}
+
+	/* --- Default Grid (for 2+ images) --- */
+	.gallery.styling-twitter {
+		display: grid;
+		gap: 2px;
+		border-radius: 4px;
+		overflow: hidden;
+		width: 100%;
+	}
+
+	.gallery.styling-twitter > a {
+		width: 100%;
+		height: 100%;
+		display: block;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.gallery.styling-twitter > a > img {
+		@apply transition-opacity duration-200 hover:opacity-80;
+		width: 100%;
+		height: 100%;
+		object-fit: cover; /* Standard tile crop */
+	}
+
+	/* --- SINGLE IMAGE OVERRIDES --- */
+	/* This configuration allows the image to determine the width/height
+       naturally based on aspect ratio, up to a max-height limit.
+    */
+	.gallery.styling-twitter[data-total='1'] {
+		display: block; /* Remove grid constraints */
+		height: auto;
+		aspect-ratio: auto; /* Remove 16:9 ratio */
+		border-radius: 0;
+	}
+
+	.gallery.styling-twitter[data-total='1'] > a {
+		/* fit-content is key: the container shrinks to fit the image width */
+		width: fit-content;
+		height: auto;
+		display: block;
+		border-radius: 4px;
+		overflow: hidden;
+		max-width: 100%; /* Prevent overflowing the parent */
+	}
+
+	.gallery.styling-twitter[data-total='1'] > a > img {
+		/* Let dimensions flow naturally */
+		width: auto;
+		height: auto;
+
+		/* Constraints: */
+		max-width: 100%; /* Never wider than container */
+		max-height: 60vh; /* Never taller than 60% of viewport (adjust if needed) */
+
+		object-fit: contain; /* Never crop the single image */
+	}
+
+	/* --- Grid Layouts (2+ Images) --- */
+	/* These retain the standard grid look */
+
+	/* 2 Images: Split vertically */
+	.gallery.styling-twitter[data-total='2'] {
+		grid-template-columns: 1fr 1fr;
+		grid-template-rows: 1fr;
+		aspect-ratio: 16/9;
+	}
+
+	/* 3 Images: 1 Big (left), 2 Small (stacked right) */
+	.gallery.styling-twitter[data-total='3'] {
+		grid-template-columns: 1fr 1fr;
+		grid-template-rows: 1fr 1fr;
+		aspect-ratio: 16/9;
+	}
+	.gallery.styling-twitter[data-total='3'] > a:first-child {
+		grid-row: span 2;
+	}
+
+	/* 4+ Images: 2x2 Grid */
+	.gallery.styling-twitter[data-total='4'],
+	.gallery.styling-twitter[data-total^='5'],
+	.gallery.styling-twitter:not([data-total='1']):not([data-total='2']):not([data-total='3']) {
+		grid-template-columns: 1fr 1fr;
+		grid-template-rows: 1fr 1fr;
+		aspect-ratio: 16/9;
+	}
+
+	.gallery.styling-twitter .hidden-in-grid {
+		display: none;
+	}
+
+	.more-overlay {
+		position: absolute;
+		inset: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		color: white;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 2rem;
+		font-weight: bold;
+		pointer-events: none;
+	}
+</style>

src/components/PostComposer.svelte

···
 			{_state.text.length} / 300
 		</span>
 		<button
-			onmousedown={(e) => {
-				e.preventDefault();
-				doPost();
-			}}
+			onclick={doPost}
 			disabled={_state.text.length === 0 || _state.text.length > 300}
 			class="action-button border-none px-5 text-(--nucleus-fg)/94 disabled:cursor-not-allowed! disabled:opacity-50 disabled:hover:scale-100"
 			style="background: color-mix(in srgb, {color} 87%, transparent);"