feat: visual polish & UX — fade-in, theme toggle, scroll-to-top, footer, cursor, badge

- Add FadeIn component (IntersectionObserver scroll-reveal + load animation)
- Add dark/light theme toggle (useSyncExternalStore + localStorage)
- Add scroll-to-top button (appears after 300px scroll)
- Add configurable footer with social links (gallery.yaml)
- Add crosshair cursor on photo grid items
- Add 'X photos' count badge on subpage cover images
- Add light theme color palette in tokens.css

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

@@ -19,71 +19,67 @@ 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';
+  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);
+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',
-                },
-            },
-        );
+  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
+  const assetId = decodeAssetId(token);
+  if (!assetId) {
+    return NextResponse.json({ error: 'Invalid token' }, { status: 400 });
+  }
+
+  // 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 { id: token } = await params;
+  const result = await immich.streamAsset(assetId, size);
+  if (!result) {
+    return NextResponse.json({ error: 'Asset not found' }, { status: 404 });
+  }
 
-    // Decode the opaque token back to an Immich asset ID
-    const assetId = decodeAssetId(token);
-    if (!assetId) {
-        return NextResponse.json({ error: 'Invalid token' }, { status: 400 });
-    }
+  const headers: Record<string, string> = {
+    '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),
+  };
 
-    // Determine size: prefer explicit ?size=, then infer from ?w=
-    const sizeParam = request.nextUrl.searchParams.get('size');
-    const widthParam = request.nextUrl.searchParams.get('w');
+  if (result.contentLength) {
+    headers['Content-Length'] = result.contentLength;
+  }
 
-    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) {
-        return NextResponse.json({ error: 'Asset not found' }, { status: 404 });
-    }
-
-    const headers: Record<string, string> = {
-        '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) {
-        headers['Content-Length'] = result.contentLength;
-    }
-
-    return new NextResponse(result.stream, { headers });
+  return new NextResponse(result.stream, { headers });
 }
-