feat: photography features & image optimizations

- Hero carousel: gallery.yaml hero accepts single UUID or array, crossfade component
- Full-bleed single albums: subpages with 1 album skip grid, render photos directly
- EXIF on hover: camera/lens/focal length overlay on grid items (toggle via exifOnHover)
- Customizable grid: columns/gap/aspectRatio/layout (masonry|uniform) via gallery.yaml
- Per-subpage grid overrides: each subpage can override global grid config
- True masonry: per-image aspect ratios from EXIF dimensions
- next/image migration: homepage hero, album covers, grid thumbnails, about portrait
- ThumbHash blur placeholders and dominant color backgrounds
- Custom next/image loader via image proxy with width/quality params
- Lightbox fade-in transition with dominant color background
- Password-protected subpages, health check, rate limiting, OG images

app/api/image/[id]/route.ts

@@ -3,19 +3,49 @@
  * without exposing the Immich server or API key.
  *
  * Usage: GET /api/image/:token?size=thumbnail|preview|original
+ *        GET /api/image/:token?w=640&q=75  (for next/image loader)
  * The :token is an encoded asset ID (not a raw UUID).
  */
 
 import { NextRequest, NextResponse } from 'next/server';
 import { immich, ImageSize } from '@/lib/immich';
 import { decodeAssetId } from '@/lib/tokens';
+import { getConfig } from '@/lib/config';
+import { checkRateLimit } from '@/lib/rate-limit';
 
 const VALID_SIZES: ImageSize[] = ['thumbnail', 'preview', 'original'];
 
+/**
+ * Map a requested pixel width to the best Immich size tier.
+ */
+function widthToSize(w: number): ImageSize {
+    if (w <= 250) return 'thumbnail';
+    if (w <= 1440) return 'preview';
+    return 'original';
+}
+
 export async function GET(
     request: NextRequest,
     { params }: { params: Promise<{ id: string }> },
 ) {
+    // ── Rate limiting ──────────────────────────────────
+    const ip = request.headers.get('x-forwarded-for')?.split(',')[0].trim() || 'unknown';
+    const { success, remaining, resetAt } = checkRateLimit(ip, getConfig().rateLimitRpm);
+
+    if (!success) {
+        const retryAfter = Math.ceil((resetAt - Date.now()) / 1000);
+        return NextResponse.json(
+            { error: 'Too many requests' },
+            {
+                status: 429,
+                headers: {
+                    'Retry-After': String(retryAfter),
+                    'X-RateLimit-Remaining': '0',
+                },
+            },
+        );
+    }
+
     const { id: token } = await params;
 
     // Decode the opaque token back to an Immich asset ID
@@ -24,11 +54,19 @@ export async function GET(
         return NextResponse.json({ error: 'Invalid token' }, { status: 400 });
     }
 
-    // Parse and validate size parameter
-    const sizeParam = request.nextUrl.searchParams.get('size') || 'preview';
-    const size: ImageSize = VALID_SIZES.includes(sizeParam as ImageSize)
-        ? (sizeParam as ImageSize)
-        : 'preview';
+    // Determine size: prefer explicit ?size=, then infer from ?w=
+    const sizeParam = request.nextUrl.searchParams.get('size');
+    const widthParam = request.nextUrl.searchParams.get('w');
+
+    let size: ImageSize = 'preview';
+    if (sizeParam && VALID_SIZES.includes(sizeParam as ImageSize)) {
+        size = sizeParam as ImageSize;
+    } else if (widthParam) {
+        const w = parseInt(widthParam, 10);
+        if (!isNaN(w) && w > 0) {
+            size = widthToSize(w);
+        }
+    }
 
     const result = await immich.streamAsset(assetId, size);
     if (!result) {
@@ -39,6 +77,7 @@ export async function GET(
         'Content-Type': result.contentType,
         // Images are immutable once uploaded to Immich — cache aggressively
         'Cache-Control': 'public, max-age=31536000, immutable',
+        'X-RateLimit-Remaining': String(remaining),
     };
 
     if (result.contentLength) {
@@ -47,3 +86,4 @@ export async function GET(
 
     return new NextResponse(result.stream, { headers });
 }
+