From ae70184ad94c4ba240e1c9088f938fae3760f34f Mon Sep 17 00:00:00 2001
From: Alex Rennie-Lis <a.lis@cornwall-insight.com>
Date: Mon, 29 Jun 2026 11:19:11 +0100
Subject: [PATCH] Gallery support

---
 src/routes/+page.svelte            | 717 ++++++++++++++++-------------
 src/routes/api/download/+server.js |  14 +-
 src/routes/api/photos/+server.js   |  40 +-
 3 files changed, 426 insertions(+), 345 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ceeced1..1ddaedf 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,367 +1,426 @@
 <script>
-	import { onMount } from 'svelte';
-	import { env } from '$env/dynamic/public';
+    import { onMount } from 'svelte';
+    import { env } from '$env/dynamic/public';
 
-	// Svelte 5 Runes for Core Reactivity
-	let photos = $state([]);
-	let nextToken = $state(null);
-	let loading = $state(false);
-	let hasMore = $state(true);
-	let activePhoto = $state(null);
-	let observerTarget;
+    // Svelte 5 Runes for Core Reactivity
+    let photos = $state([]);
+    let galleries = $state([]);
+    let currentGallery = $state('');
+    
+    let nextToken = $state(null);
+    let loading = $state(false);
+    let hasMore = $state(true);
+    let activePhoto = $state(null);
+    let observerTarget;
 
-	// Lightbox Control Flags
-	let isZoomed = $state(false);
-	let lightboxContainer = $state(null);
-	let imageMatrixWrapper = $state(null); // Explicit ref to bypass reactive state lag
-	let isDragging = false; // Internal mutable flag (not a reactive rune)
-	
-	// Coordinate Vector Matrix (using raw numbers to bypass Svelte state loops on fast cycles)
-	let currentX = 0;
-	let currentY = 0;
-	let startX = 0;
-	let startY = 0;
-	let ticking = false;
+    // Lightbox Control Flags
+    let isZoomed = $state(false);
+    let lightboxContainer = $state(null);
+    let imageMatrixWrapper = $state(null); // Explicit ref to bypass reactive state lag
+    let isDragging = false; // Internal mutable flag (not a reactive rune)
+    
+    // Coordinate Vector Matrix (using raw numbers to bypass Svelte state loops on fast cycles)
+    let currentX = 0;
+    let currentY = 0;
+    let startX = 0;
+    let startY = 0;
+    let ticking = false;
 
-	// Touch tracking coordinates for layout pagination swipes
-	let touchStartX = 0;
-	let touchEndX = 0;
+    // Touch tracking coordinates for layout pagination swipes
+    let touchStartX = 0;
+    let touchEndX = 0;
 
-	// Compute active index reactively
-	let activeIndex = $derived(
-		activePhoto ? photos.findIndex(p => p.id === activePhoto.id) : -1
-	);
+    // Compute active index reactively
+    let activeIndex = $derived(
+        activePhoto ? photos.findIndex(p => p.id === activePhoto.id) : -1
+    );
 
-	async function loadPhotos() {
-		if (loading || !hasMore) return;
+    // Dynamic Title Renderer
+    let pageTitle = $derived.by(() => {
+        if (galleries.length <= 1) {
+            return env.PUBLIC_GALLERY_NAME || formatTitle(currentGallery);
+        }
+        return formatTitle(currentGallery);
+    });
+
+    // Clean folder strings into title representations
+    function formatTitle(folderName) {
+        if (!folderName) return '';
+        return folderName
+            .replace(/[_-]/g, ' ')
+            .replace(/\b\w/g, char => char.toUpperCase());
+    }
+
+    async function loadPhotos(reset = false) {
+        if (loading) return;
+        if (!reset && !hasMore) return;
+        
 		loading = true;
+        if (reset) {
+            photos = [];
+            nextToken = null;
+            hasMore = true;
+        }
 
-		const url = new URL('/api/photos', window.location.origin);
-		if (nextToken) url.searchParams.set('next', nextToken);
+        const url = new URL('/api/photos', window.location.origin);
+        url.searchParams.set('gallery', currentGallery);
+        if (nextToken) url.searchParams.set('next', nextToken);
 
-		try {
-			const res = await fetch(url);
-			const data = await res.json();
-			
-			if (data && Array.isArray(data.photos)) {
-				photos = [...photos, ...data.photos];
-				nextToken = data.nextContinuationToken;
-				hasMore = !!nextToken;
-			}
-		} catch (err) {
-			console.error('Failed to load photos:', err);
-		} finally {
-			loading = false;
+        try {
+            const res = await fetch(url);
+            const data = await res.json();
+            
+            if (data) {
+                galleries = data.galleries || [];
+                if (!currentGallery) currentGallery = data.currentGallery || '';
+                
+                photos = reset ? (data.photos || []) : [...photos, ...(data.photos || [])];
+                nextToken = data.nextContinuationToken;
+                hasMore = !!nextToken;
+            }
+        } catch (err) {
+            console.error('Failed to load photos:', err);
+        } finally {
+            loading = false;
+        }
+    }
+
+    function handleGallerySwitch(e) {
+        currentGallery = e.target.value;
+        resetZoom();
+        loadPhotos(true);
+    }
+
+    onMount(() => {
+        loadPhotos();
+
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting && hasMore && !loading) {
+                loadPhotos();
+            }
+        }, { rootMargin: '300px' });
+
+        if (observerTarget) observer.observe(observerTarget);
+
+        return () => observer.disconnect();
+    });
+
+    function changeActivePhoto(photo) {
+        activePhoto = photo;
+        resetZoom();
+    }
+
+    function resetZoom() {
+        isZoomed = false; 
+        isDragging = false;
+        currentX = 0;
+        currentY = 0;
+        if (imageMatrixWrapper) {
+            imageMatrixWrapper.style.transform = `translate3d(0px, 0px, 0px)`;
+        }
+    }
+
+    function nextPhoto() {
+        if (activeIndex !== -1 && activeIndex < photos.length - 1) {
+            changeActivePhoto(photos[activeIndex + 1]);
+            if (activeIndex >= photos.length - 4) loadPhotos();
+        }
+    }
+
+    function prevPhoto() {
+        if (activeIndex > 0) {
+            changeActivePhoto(photos[activeIndex - 1]);
 		}
-	}
+    }
 
-	onMount(() => {
-		loadPhotos();
-
-		const observer = new IntersectionObserver((entries) => {
-			if (entries[0].isIntersecting && hasMore) {
-				loadPhotos();
-			}
-		}, { rootMargin: '300px' });
-
-		if (observerTarget) observer.observe(observerTarget);
-
-		return () => observer.disconnect();
-	});
-
-	function changeActivePhoto(photo) {
-		activePhoto = photo;
-		resetZoom();
-	}
-
-	function resetZoom() {
-		isZoomed = false; 
-		isDragging = false;
-		currentX = 0;
-		currentY = 0;
-		if (imageMatrixWrapper) {
-			imageMatrixWrapper.style.transform = `translate3d(0px, 0px, 0px)`;
-		}
-	}
-
-	function nextPhoto() {
-		if (activeIndex !== -1 && activeIndex < photos.length - 1) {
-			changeActivePhoto(photos[activeIndex + 1]);
-			if (activeIndex >= photos.length - 4) loadPhotos();
-		}
-	}
-
-	function prevPhoto() {
-		if (activeIndex > 0) {
-			changeActivePhoto(photos[activeIndex - 1]);
-		}
-	}
-
-	function handleKeyDown(e) {
-		if (!activePhoto) return;
-		
-		if (e.key === 'Escape') {
-			e.preventDefault();
-			activePhoto = null;
-		}
-		if (e.key === 'ArrowRight' && !isZoomed) {
-			e.preventDefault();
-			nextPhoto();
-		}
-		if (e.key === 'ArrowLeft' && !isZoomed) {
-			e.preventDefault();
-			prevPhoto();
-		}
-	}
+    function handleKeyDown(e) {
+        if (!activePhoto) return;
+        
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            activePhoto = null;
+        }
+        if (e.key === 'ArrowRight' && !isZoomed) {
+            e.preventDefault();
+            nextPhoto();
+        }
+        if (e.key === 'ArrowLeft' && !isZoomed) {
+            e.preventDefault();
+            prevPhoto();
+        }
+    }
 
 	function toggleFullscreen() {
-		if (!lightboxContainer) return;
-		if (!document.fullscreenElement) {
-			lightboxContainer.requestFullscreen().catch(err => console.error(err));
-		} else {
-			document.exitFullscreen();
-		}
-	}
+        if (!lightboxContainer) return;
+        if (!document.fullscreenElement) {
+            lightboxContainer.requestFullscreen().catch(err => console.error(err));
+        } else {
+            document.exitFullscreen();
+        }
+    }
 
-	// HIGH PERFORMANCE NATIVE INTERFACE PIPELINE (60FPS Engine)
-	function pointerDown(clientX, clientY, target) {
-		if (!isZoomed) return;
-		if (target.tagName === 'BUTTON' || target.closest('button')) return;
+    // HIGH PERFORMANCE NATIVE INTERFACE PIPELINE (60FPS Engine)
+    function pointerDown(clientX, clientY, target) {
+        if (!isZoomed) return;
+        if (target.tagName === 'BUTTON' || target.closest('button')) return;
 
-		isDragging = true;
-		startX = clientX - currentX;
-		startY = clientY - currentY;
-	}
+        isDragging = true;
+        startX = clientX - currentX;
+        startY = clientY - currentY;
+    }
 
-	function pointerMove(clientX, clientY) {
-		if (!isDragging) return;
-		
-		currentX = clientX - startX;
-		currentY = clientY - startY;
+    function pointerMove(clientX, clientY) {
+        if (!isDragging) return;
+        
+        currentX = clientX - startX;
+        currentY = clientY - startY;
 
-		// requestAnimationFrame schedules updates with the browser screen refresh cycle
-		if (!ticking) {
-			window.requestAnimationFrame(() => {
-				if (imageMatrixWrapper) {
-					imageMatrixWrapper.style.transform = `translate3d(${currentX}px, ${currentY}px, 0px)`;
-				}
-				ticking = false;
-			});
-			ticking = true;
-		}
-	}
+        // requestAnimationFrame schedules updates with the browser screen refresh cycle
+        if (!ticking) {
+            window.requestAnimationFrame(() => {
+                if (imageMatrixWrapper) {
+                    imageMatrixWrapper.style.transform = `translate3d(${currentX}px, ${currentY}px, 0px)`;
+                }
+                ticking = false;
+            });
+            ticking = true;
+        }
+    }
 
-	function pointerUp() {
-		isDragging = false;
-	}
+    function pointerUp() {
+        isDragging = false;
+    }
 
-	// Desktop Mouse Interface Subscriptions
-	function handleMouseDown(e) { pointerDown(e.clientX, e.clientY, e.target); }
-	function handleMouseMove(e) { 
-		if(isDragging) e.preventDefault();
-		pointerMove(e.clientX, e.clientY); 
-	}
+    // Desktop Mouse Interface Subscriptions
+    function handleMouseDown(e) { pointerDown(e.clientX, e.clientY, e.target); }
+    function handleMouseMove(e) { 
+        if(isDragging) e.preventDefault();
+        pointerMove(e.clientX, e.clientY); 
+    }
 
-	// Mobile Touch Interface Subscriptions
-	function handleTouchStart(e) {
-		if (isZoomed) {
-			const touch = e.touches[0];
-			pointerDown(touch.clientX, touch.clientY, e.target);
-		} else {
-			touchStartX = e.changedTouches[0].screenX;
-		}
-	}
+    // Mobile Touch Interface Subscriptions
+    function handleTouchStart(e) {
+        if (isZoomed) {
+            const touch = e.touches[0];
+            pointerDown(touch.clientX, touch.clientY, e.target);
+        } else {
+            touchStartX = e.changedTouches[0].screenX;
+        }
+    }
 
-	function handleTouchMove(e) {
-		if (isZoomed && e.touches.length === 1) {
-			e.preventDefault(); // Kill native momentum bouncing
-			const touch = e.touches[0];
-			pointerMove(touch.clientX, touch.clientY);
-		}
-	}
+    // Handled single-finger layout tracking securely
+    function handleTouchMove(e) {
+        if (isZoomed && e.touches.length === 1) {
+            e.preventDefault(); // Kill native momentum bouncing
+            const touch = e.touches[0];
+            pointerMove(touch.clientX, touch.clientY);
+        }
+    }
 
-	function handleTouchEnd(e) {
-		if (isZoomed) {
-			pointerUp();
-		} else {
-			touchEndX = e.changedTouches[0].screenX;
-			const threshold = 50;
-			if (touchStartX - touchEndX > threshold) nextPhoto();
-			else if (touchEndX - touchStartX > threshold) prevPhoto();
-		}
-	}
+    function handleTouchEnd(e) {
+        if (isZoomed) {
+            pointerUp();
+        } else {
+            touchEndX = e.changedTouches[0].screenX;
+            const threshold = 50;
+            if (touchStartX - touchEndX > threshold) nextPhoto();
+            else if (touchEndX - touchStartX > threshold) prevPhoto();
+        }
+    }
 </script>
 
 <svelte:window onkeydown={handleKeyDown} />
 
 <div class="min-h-screen bg-zinc-950 text-zinc-100">
-	<header class="sticky top-0 z-10 border-b border-zinc-800 bg-zinc-950/80 backdrop-blur-md px-6 py-4 flex justify-between items-center">
-		<h1 class="text-xl font-bold tracking-wide">{env.PUBLIC_GALLERY_NAME}</h1>
-	</header>
+    <header class="sticky top-0 z-10 border-b border-zinc-800 bg-zinc-950/80 backdrop-blur-md px-6 py-4 flex justify-between items-center">
+        <h1 class="text-xl font-bold tracking-wide">{pageTitle}</h1>
+        
+        {#if galleries.length > 1}
+            <select 
+                value={currentGallery} 
+                onchange={handleGallerySwitch}
+                class="bg-zinc-900 text-zinc-100 border border-zinc-700 rounded-lg px-3 py-1.5 text-sm font-medium focus:border-blue-500 focus:outline-none cursor-pointer hover:bg-zinc-800 transition"
+            >
+                {#each galleries as gallery}
+                    <option value={gallery}>{formatTitle(gallery)}</option>
+                {/each}
+            </select>
+        {/if}
+    </header>
 
-	<main class="p-4 sm:p-6 lg:p-8 max-w-[1600px] mx-auto">
-		<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 sm:gap-4">
-			{#each photos as photo (photo.id)}
-				<button 
-					class="group relative aspect-square overflow-hidden rounded-xl bg-zinc-900 border border-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
-					onclick={() => changeActivePhoto(photo)}
-				>
-					<img 
-						src={photo.thumbUrl} 
-						alt="Gallery item" 
-						loading="lazy"
-						class="h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
-					/>
-					<div class="absolute inset-0 bg-black/20 opacity-0 transition-opacity group-hover:opacity-100"></div>
-				</button>
-			{/each}
-		</div>
+    <main class="p-4 sm:p-6 lg:p-8 max-w-[1600px] mx-auto">
+        {#if !loading && photos.length === 0}
+            <div class="flex flex-col items-center justify-center py-24 text-center">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 text-zinc-600 mb-4 animate-pulse">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+                </svg>
+                <h3 class="text-lg font-semibold text-zinc-300 mb-1">No images found</h3>
+                <p class="text-sm text-zinc-500 max-w-sm">This gallery doesn't contain any photos yet, or storage is still syncing.</p>
+            </div>
+        {:else}
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 sm:gap-4">
+                {#each photos as photo (photo.id)}
+                    <button 
+                        class="group relative aspect-square overflow-hidden rounded-xl bg-zinc-900 border border-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        onclick={() => changeActivePhoto(photo)}
+                    >
+                        <img 
+                            src={photo.thumbUrl} 
+                            alt="Gallery item" 
+                            loading="lazy"
+                            class="h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
+                        />
+                        <div class="absolute inset-0 bg-black/20 opacity-0 transition-opacity group-hover:opacity-100"></div>
+                    </button>
+                {/each}
+            </div>
+        {/if}
 
-		<div bind:this={observerTarget} class="w-full flex justify-center py-12">
-			{#if loading}
-				<div class="h-6 w-6 animate-spin rounded-full border-2 border-zinc-500 border-t-transparent"></div>
-			{/if}
-		</div>
-	</main>
+        <div bind:this={observerTarget} class="w-full flex justify-center py-12">
+            {#if loading}
+                <div class="h-6 w-6 animate-spin rounded-full border-2 border-zinc-500 border-t-transparent"></div>
+            {/if}
+        </div>
+    </main>
 </div>
 
 {#if activePhoto}
-	<div 
-		bind:this={lightboxContainer}
-		class="fixed inset-0 z-50 flex flex-col items-center justify-between bg-black/95 p-4 select-none touch-none"
-		role="dialog"
-		aria-modal="true"
-		tabindex="-1"
-		onclick={(e) => { if (e.target === e.currentTarget) activePhoto = null; }}
-		onkeydown={handleKeyDown}
-		ontouchstart={handleTouchStart}
-		ontouchmove={handleTouchMove}
-		ontouchend={handleTouchEnd}
-	>
-		<div class="w-full flex justify-between items-center z-50 p-2 pointer-events-none">
-			<div class="text-sm font-medium tracking-wider bg-zinc-900/80 px-4 py-2 rounded-full border border-zinc-800/60 text-zinc-300 pointer-events-auto">
-				{activeIndex + 1} <span class="text-zinc-600 px-0.5">/</span> {photos.length}
+    <div 
+        bind:this={lightboxContainer}
+        class="fixed inset-0 z-50 flex flex-col items-center justify-between bg-black/95 p-4 select-none touch-none"
+        role="dialog"
+        aria-modal="true"
+        tabindex="-1"
+        onclick={(e) => { if (e.target === e.currentTarget) activePhoto = null; }}
+        onkeydown={handleKeyDown}
+        ontouchstart={handleTouchStart}
+        ontouchmove={handleTouchMove}
+        ontouchend={handleTouchEnd}
+    >
+        <div class="w-full flex justify-between items-center z-50 p-2 pointer-events-none">
+            <div class="text-sm font-medium tracking-wider bg-zinc-900/80 px-4 py-2 rounded-full border border-zinc-800/60 text-zinc-300 pointer-events-auto">
+                {activeIndex + 1} <span class="text-zinc-600 px-0.5">/</span> {photos.length}
+            </div>
+
+            <div class="flex items-center gap-2 pointer-events-auto">
+                <button 
+                    class="rounded-full bg-zinc-900/80 p-2.5 text-zinc-300 hover:text-white transition hover:bg-zinc-800"
+                    title={isZoomed ? "Reset Zoom" : "Zoom to Full Resolution"}
+                    onclick={() => { if(isZoomed) { resetZoom(); } else { isZoomed = true; } }}
+                >
+                    {#if isZoomed}
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M15 9V4.5M15 9h4.5M15 9l5.25-5.25M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 15v4.5M15 15h4.5M15 15l5.25 5.25" />
+                        </svg>
+                    {:else}
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75v4.5m0-4.5h-4.5m4.5 0L15 9m5.25 11.25v-4.5m0 4.5h-4.5m4.5 0L15 15" />
+                        </svg>
+                    {/if}
+                </button>
+
+                <button 
+                    class="rounded-full bg-zinc-900/80 p-2.5 text-zinc-300 hover:text-white transition hover:bg-zinc-800"
+                    title="Toggle Fullscreen"
+                    onclick={toggleFullscreen}
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6h16.5" />
+                    </svg>
+                </button>
+
+                <a 
+                    href="/api/download?id={activePhoto.id}&gallery={currentGallery}"
+                    class="rounded-full bg-zinc-900/80 p-2.5 text-zinc-300 hover:text-white transition hover:bg-zinc-800"
+                    title="Download Original"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
+                    </svg>
+                </a>
+                
+                <button 
+                    class="rounded-full bg-zinc-900/80 p-2.5 text-zinc-300 hover:text-white transition hover:bg-zinc-800"
+                    title="Close"
+                    onclick={() => activePhoto = null}
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
 			</div>
+        </div>
 
-			<div class="flex items-center gap-2 pointer-events-auto">
-				<button 
-					class="rounded-full bg-zinc-900/80 p-2.5 text-zinc-300 hover:text-white transition hover:bg-zinc-800"
-					title={isZoomed ? "Reset Zoom" : "Zoom to Full Resolution"}
-					onclick={() => { if(isZoomed) { resetZoom(); } else { isZoomed = true; } }}
-				>
-					{#if isZoomed}
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M15 9V4.5M15 9h4.5M15 9l5.25-5.25M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 15v4.5M15 15h4.5M15 15l5.25 5.25" />
-						</svg>
-					{:else}
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75v4.5m0-4.5h-4.5m4.5 0L15 9m5.25 11.25v-4.5m0 4.5h-4.5m4.5 0L15 15" />
-						</svg>
-					{/if}
-				</button>
+        <div 
+            class="relative w-full flex-1 flex items-center justify-center overflow-hidden my-4 selection:bg-transparent"
+            class:cursor-grab={isZoomed && !isDragging}
+            class:cursor-grabbing={isZoomed && isDragging}
+            onmousedown={handleMouseDown}
+            onmousemove={handleMouseMove}
+            onmouseup={pointerUp}
+            onmouseleave={pointerUp}
+        >
+            {#if !isZoomed}
+                <button 
+                    type="button" 
+                    class="absolute left-0 top-0 bottom-0 w-[10%] z-30 cursor-w-resize focus:outline-none flex items-center justify-start pl-4 group"
+                    onclick={prevPhoto}
+                    aria-label="Previous photo"
+                    disabled={activeIndex === 0}
+                >
+                    {#if activeIndex > 0}
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-8 h-8 text-zinc-500 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+                        </svg>
+                    {/if}
+                </button>
 
-				<button 
-					class="rounded-full bg-zinc-900/80 p-2.5 text-zinc-300 hover:text-white transition hover:bg-zinc-800"
-					title="Toggle Fullscreen"
-					onclick={toggleFullscreen}
-				>
-					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
-						<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6h16.5" />
-					</svg>
-				</button>
+                <button 
+                    type="button" 
+                    class="absolute right-0 top-0 bottom-0 w-[10%] z-30 cursor-e-resize focus:outline-none flex items-center justify-end pr-4 group"
+                    onclick={nextPhoto}
+                    aria-label="Next photo"
+                    disabled={activeIndex === photos.length - 1}
+                >
+                    {#if activeIndex < photos.length - 1}
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-8 h-8 text-zinc-500 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                        </svg>
+                    {/if}
+                </button>
+            {/if}
 
-				<a 
-					href="/api/download?id={activePhoto.id}"
-					class="rounded-full bg-zinc-900/80 p-2.5 text-zinc-300 hover:text-white transition hover:bg-zinc-800"
-					title="Download Original"
-				>
-					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
-						<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
-					</svg>
-				</a>
-				
-				<button 
-					class="rounded-full bg-zinc-900/80 p-2.5 text-zinc-300 hover:text-white transition hover:bg-zinc-800"
-					title="Close"
-					onclick={() => activePhoto = null}
-				>
-					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
-						<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-					</svg>
-				</button>
-			</div>
-		</div>
+            <div 
+                bind:this={imageMatrixWrapper}
+                class="max-w-full max-h-full flex items-center justify-center p-2 ease-out will-change-transform"
+            >
+                <img 
+                    src={activePhoto.fullUrl} 
+                    alt="Gallery Content Visual" 
+                    draggable="false"
+                    class="max-h-[70vh] max-w-full rounded shadow-2xl select-none pointer-events-none transition-transform duration-200 ease-out will-change-transform"
+                    style="transform: scale({isZoomed ? 3.8 : 1});"
+                />
+            </div>
+        </div>
 
-		<div 
-			class="relative w-full flex-1 flex items-center justify-center overflow-hidden my-4 selection:bg-transparent"
-			class:cursor-grab={isZoomed && !isDragging}
-			class:cursor-grabbing={isZoomed && isDragging}
-			onmousedown={handleMouseDown}
-			onmousemove={handleMouseMove}
-			onmouseup={pointerUp}
-			onmouseleave={pointerUp}
-		>
-			{#if !isZoomed}
-				<button 
-					type="button" 
-					class="absolute left-0 top-0 bottom-0 w-[10%] z-30 cursor-w-resize focus:outline-none flex items-center justify-start pl-4 group"
-					onclick={prevPhoto}
-					aria-label="Previous photo"
-					disabled={activeIndex === 0}
-				>
-					{#if activeIndex > 0}
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-8 h-8 text-zinc-500 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
-						</svg>
-					{/if}
-				</button>
-
-				<button 
-					type="button" 
-					class="absolute right-0 top-0 bottom-0 w-[10%] z-30 cursor-e-resize focus:outline-none flex items-center justify-end pr-4 group"
-					onclick={nextPhoto}
-					aria-label="Next photo"
-					disabled={activeIndex === photos.length - 1}
-				>
-					{#if activeIndex < photos.length - 1}
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-8 h-8 text-zinc-500 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-						</svg>
-					{/if}
-				</button>
-			{/if}
-
-			<div 
-				bind:this={imageMatrixWrapper}
-				class="max-w-full max-h-full flex items-center justify-center p-2 ease-out will-change-transform"
-			>
-				<img 
-					src={activePhoto.fullUrl} 
-					alt="Gallery Content Visual" 
-					draggable="false"
-					class="max-h-[70vh] max-w-full rounded shadow-2xl select-none pointer-events-none transition-transform duration-200 ease-out will-change-transform"
-					style="transform: scale({isZoomed ? 3.8 : 1});"
-				/>
-			</div>
-		</div>
-
-		<div class="w-full max-w-4xl mx-auto z-40 bg-zinc-950/90 border border-zinc-900 px-4 py-3 rounded-xl backdrop-blur-md pointer-events-auto">
-			<div class="flex items-center gap-2 overflow-x-auto overflow-y-hidden py-1 px-0.5 scrollbar-thin scrollbar-thumb-zinc-800 scroll-smooth">
-				{#each photos as thumbPhoto, idx}
-					<button 
-						type="button"
-						class="relative flex-shrink-0 w-16 h-12 rounded-md overflow-hidden border transition-all duration-200 focus:outline-none
-						{idx === activeIndex ? 'border-blue-500 scale-105 ring-2 ring-blue-500/20 opacity-100' : 'border-zinc-800/80 opacity-40 hover:opacity-80'}"
-						onclick={() => changeActivePhoto(thumbPhoto)}
-					>
-						<img 
-							src={thumbPhoto.thumbUrl} 
-							alt="Ribbon Navigation Frame" 
-							class="w-full h-full object-cover"
-						/>
-					</button>
-				{/each}
-			</div>
-		</div>
-	</div>
+        <div class="w-full max-w-4xl mx-auto z-40 bg-zinc-950/90 border border-zinc-900 px-4 py-3 rounded-xl backdrop-blur-md pointer-events-auto">
+            <div class="flex items-center gap-2 overflow-x-auto overflow-y-hidden py-1 px-0.5 scrollbar-thin scrollbar-thumb-zinc-800 scroll-smooth">
+                {#each photos as thumbPhoto, idx}
+                    <button 
+                        type="button"
+                        class="relative flex-shrink-0 w-16 h-12 rounded-md overflow-hidden border transition-all duration-200 focus:outline-none
+                        {idx === activeIndex ? 'border-blue-500 scale-105 ring-2 ring-blue-500/20 opacity-100' : 'border-zinc-800/80 opacity-40 hover:opacity-80'}"
+                        onclick={() => changeActivePhoto(thumbPhoto)}
+                    >
+                        <img 
+                            src={thumbPhoto.thumbUrl} 
+                            alt="Ribbon Navigation Frame" 
+                            class="w-full h-full object-cover"
+                        />
+                    </button>
+                {/each}
+            </div>
+        </div>
+    </div>
 {/if}
\ No newline at end of file
diff --git a/src/routes/api/download/+server.js b/src/routes/api/download/+server.js
index 0a022f4..3ceac0f 100644
--- a/src/routes/api/download/+server.js
+++ b/src/routes/api/download/+server.js
@@ -5,7 +5,9 @@ import { env } from '$env/dynamic/private';
 
 export async function GET({ url }) {
 	const id = url.searchParams.get('id');
-	if (!id) throw error(400, 'Missing photo identity ID');
+	const gallery = url.searchParams.get('gallery');
+	
+	if (!id || !gallery) throw error(400, 'Missing identifier parameters.');
 
 	try {
 		const s3 = new S3Client({
@@ -17,23 +19,19 @@ export async function GET({ url }) {
 			}
 		});
 
-		const fullSizeKey = `images/${id}`;
+		const fullSizeKey = `${gallery}/images/${id}`;
 
-		// Force the browser to treat this as an attachment download
 		const command = new GetObjectCommand({
 			Bucket: env.B2_BUCKET_NAME,
 			Key: fullSizeKey,
 			ResponseContentDisposition: `attachment; filename="${id}"`
 		});
 
-		// Generate a quick 60-second valid link
 		const downloadUrl = await getSignedUrl(s3, command, { expiresIn: 60 });
-
-		// Redirect browser directly to the download stream
 		throw redirect(307, downloadUrl);
 	} catch (err) {
 		if (err.status === 307) throw err;
-		console.error('Server download redirection failed:', err);
-		throw error(500, 'Could not generate download routing asset.');
+		console.error(err);
+		throw error(500, 'Could not map download routing path.');
 	}
 }
\ No newline at end of file
diff --git a/src/routes/api/photos/+server.js b/src/routes/api/photos/+server.js
index cee2ccb..108cfe7 100644
--- a/src/routes/api/photos/+server.js
+++ b/src/routes/api/photos/+server.js
@@ -5,6 +5,7 @@ import { env } from '$env/dynamic/private';
 
 export async function GET({ url }) {
 	const nextToken = url.searchParams.get('next') || undefined;
+	const activeGallery = url.searchParams.get('gallery') || '';
 	
 	try {
 		const s3 = new S3Client({
@@ -18,10 +19,33 @@ export async function GET({ url }) {
 
 		const tokenDuration = parseInt(env.B2_TOKEN_DURATION, 10) || 600;
 
-		// Fetch a batch of files from the thumbs/ folder
+		// --- PHASE 1: DYNAMICALLY DISCOVER GALLERIES ---
+		// We use a delimiter to find the top-level virtual folders
+		const discoveryCommand = new ListObjectsV2Command({
+			Bucket: env.B2_BUCKET_NAME,
+			Delimiter: '/'
+		});
+		
+		const discoveryResponse = await s3.send(discoveryCommand);
+		// CommonPrefixes contains the top-level folders (e.g., "vacation-2026/", "wedding/")
+		const prefixes = discoveryResponse.CommonPrefixes || [];
+		
+		const galleries = prefixes
+			.map(p => p.Prefix.replace('/', ''))
+			.filter(name => name.length > 0)
+			.sort((a, b) => a.localeCompare(b)); // Sort alphabetically
+
+		// Fallback to a default if no gallery parameter is provided yet
+		const selectedGallery = activeGallery || galleries[0] || '';
+
+		if (!selectedGallery) {
+			return json({ photos: [], galleries: [], nextContinuationToken: null });
+		}
+
+		// --- PHASE 2: FETCH PHOTOS FOR SELECTED GALLERY ---
 		const listCommand = new ListObjectsV2Command({
 			Bucket: env.B2_BUCKET_NAME,
-			Prefix: 'thumbs/',
+			Prefix: `${selectedGallery}/thumbs/`,
 			MaxKeys: 40,
 			ContinuationToken: nextToken
 		});
@@ -29,22 +53,20 @@ export async function GET({ url }) {
 		const listResponse = await s3.send(listCommand);
 		const contents = listResponse.Contents || [];
 
-		// Strict Filter: Only allow actual .jpg or .jpeg extensions
 		const imageFiles = contents.filter(file => {
 			const lowerKey = file.Key.toLowerCase();
 			return lowerKey.endsWith('.jpg') || lowerKey.endsWith('.jpeg');
 		});
 
-		// Generate presigned URLs for validated items
 		const photos = await Promise.all(
 			imageFiles.map(async (file) => {
-				const id = file.Key.replace('thumbs/', '');
-				const fullSizeKey = `images/${id}`;
+				// Clean up ID tracking relative to the dynamic folder path
+				const id = file.Key.replace(`${selectedGallery}/thumbs/`, '');
+				const fullSizeKey = `${selectedGallery}/images/${id}`;
 
 				const thumbCommand = new GetObjectCommand({ Bucket: env.B2_BUCKET_NAME, Key: file.Key });
 				const fullCommand = new GetObjectCommand({ Bucket: env.B2_BUCKET_NAME, Key: fullSizeKey });
 
-				// 10 minutes = 600 seconds
 				const [thumbUrl, fullUrl] = await Promise.all([
 					getSignedUrl(s3, thumbCommand, { expiresIn: tokenDuration }),
 					getSignedUrl(s3, fullCommand, { expiresIn: tokenDuration })
@@ -56,10 +78,12 @@ export async function GET({ url }) {
 
 		return json({
 			photos,
+			galleries,
+			currentGallery: selectedGallery,
 			nextContinuationToken: listResponse.NextContinuationToken || null
 		});
 	} catch (err) {
 		console.error(err);
-		throw error(500, 'Failed to process images from storage.');
+		throw error(500, 'Failed to map multi-gallery structures.');
 	}
 }
\ No newline at end of file