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/auth/route.ts

@@ -7,40 +7,25 @@ import { NextRequest, NextResponse } from 'next/server';
 import { authenticate, isProtected } from '@/lib/auth';
 
 export async function POST(request: NextRequest) {
-    try {
-        const body = await request.json();
-        const { slug, password } = body;
+  try {
+    const body = await request.json();
+    const { slug, password } = body;
 
-        if (!slug || !password) {
-            return NextResponse.json(
-                { error: 'Missing slug or password' },
-                { status: 400 },
-            );
-        }
-
-        if (!isProtected(slug)) {
-            return NextResponse.json(
-                { error: 'Album is not password-protected' },
-                { status: 400 },
-            );
-        }
-
-        const setCookie = authenticate(slug, password);
-        if (!setCookie) {
-            return NextResponse.json(
-                { error: 'Invalid password' },
-                { status: 401 },
-            );
-        }
-
-        return NextResponse.json(
-            { success: true },
-            { headers: { 'Set-Cookie': setCookie } },
-        );
-    } catch {
-        return NextResponse.json(
-            { error: 'Invalid request body' },
-            { status: 400 },
-        );
+    if (!slug || !password) {
+      return NextResponse.json({ error: 'Missing slug or password' }, { status: 400 });
     }
+
+    if (!isProtected(slug)) {
+      return NextResponse.json({ error: 'Album is not password-protected' }, { status: 400 });
+    }
+
+    const setCookie = authenticate(slug, password);
+    if (!setCookie) {
+      return NextResponse.json({ error: 'Invalid password' }, { status: 401 });
+    }
+
+    return NextResponse.json({ success: true }, { headers: { 'Set-Cookie': setCookie } });
+  } catch {
+    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
+  }
 }

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

@@ -9,33 +9,30 @@ import { NextResponse } from 'next/server';
 import { immich } from '@/lib/immich';
 import { decodeAssetId } from '@/lib/tokens';
 
-export async function GET(
-    _request: Request,
-    { params }: { params: Promise<{ id: string }> },
-) {
-    const { id: token } = await params;
+export async function GET(_request: Request, { params }: { params: Promise<{ id: string }> }) {
+  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 });
-    }
+  // 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 asset = await immich.getAssetInfo(assetId);
-    if (!asset?.exifInfo) {
-        return NextResponse.json({ error: 'No EXIF data' }, { status: 404 });
-    }
+  const asset = await immich.getAssetInfo(assetId);
+  if (!asset?.exifInfo) {
+    return NextResponse.json({ error: 'No EXIF data' }, { status: 404 });
+  }
 
-    const exif = asset.exifInfo;
-    return NextResponse.json({
-        make: exif.make,
-        model: exif.model,
-        lensModel: exif.lensModel,
-        focalLength: exif.focalLength,
-        fNumber: exif.fNumber,
-        exposureTime: exif.exposureTime,
-        iso: exif.iso,
-        city: exif.city,
-        country: exif.country,
-    });
+  const exif = asset.exifInfo;
+  return NextResponse.json({
+    make: exif.make,
+    model: exif.model,
+    lensModel: exif.lensModel,
+    focalLength: exif.focalLength,
+    fNumber: exif.fNumber,
+    exposureTime: exif.exposureTime,
+    iso: exif.iso,
+    city: exif.city,
+    country: exif.country,
+  });
 }

app/api/health/route.ts

@@ -11,16 +11,16 @@ import { immich } from '@/lib/immich';
 const startTime = Date.now();
 
 export async function GET() {
-    const immichOk = await immich.ping();
+  const immichOk = await immich.ping();
 
-    const body = {
-        status: immichOk ? 'ok' : 'degraded',
-        immich: immichOk ? 'connected' : 'unreachable',
-        uptime: Math.floor((Date.now() - startTime) / 1000),
-    };
+  const body = {
+    status: immichOk ? 'ok' : 'degraded',
+    immich: immichOk ? 'connected' : 'unreachable',
+    uptime: Math.floor((Date.now() - startTime) / 1000),
+  };
 
-    return NextResponse.json(body, {
-        status: immichOk ? 200 : 503,
-        headers: { 'Cache-Control': 'no-store' },
-    });
+  return NextResponse.json(body, {
+    status: immichOk ? 200 : 503,
+    headers: { 'Cache-Control': 'no-store' },
+  });
 }

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 });
 }
-

app/api/og/route.tsx

@@ -11,83 +11,81 @@ import { NextRequest } from 'next/server';
 export const runtime = 'edge';
 
 export async function GET(request: NextRequest) {
-    const { searchParams } = request.nextUrl;
-    const title = searchParams.get('title') || 'Gallery';
-    const subtitle = searchParams.get('subtitle') || '';
+  const { searchParams } = request.nextUrl;
+  const title = searchParams.get('title') || 'Gallery';
+  const subtitle = searchParams.get('subtitle') || '';
 
-    return new ImageResponse(
-        (
-            <div
-                style={{
-                    width: '100%',
-                    height: '100%',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    backgroundColor: '#0a0a0a',
-                    fontFamily: 'system-ui, -apple-system, sans-serif',
-                    padding: '60px',
-                }}
-            >
-                {/* Decorative top line */}
-                <div
-                    style={{
-                        width: '60px',
-                        height: '2px',
-                        backgroundColor: '#d4af37',
-                        marginBottom: '40px',
-                    }}
-                />
+  return new ImageResponse(
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#0a0a0a',
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        padding: '60px',
+      }}
+    >
+      {/* Decorative top line */}
+      <div
+        style={{
+          width: '60px',
+          height: '2px',
+          backgroundColor: '#d4af37',
+          marginBottom: '40px',
+        }}
+      />
 
-                {/* Title */}
-                <div
-                    style={{
-                        fontSize: '64px',
-                        fontWeight: 600,
-                        color: '#f0f0f0',
-                        letterSpacing: '0.02em',
-                        textAlign: 'center',
-                        lineHeight: 1.2,
-                        maxWidth: '900px',
-                    }}
-                >
-                    {title}
-                </div>
+      {/* Title */}
+      <div
+        style={{
+          fontSize: '64px',
+          fontWeight: 600,
+          color: '#f0f0f0',
+          letterSpacing: '0.02em',
+          textAlign: 'center',
+          lineHeight: 1.2,
+          maxWidth: '900px',
+        }}
+      >
+        {title}
+      </div>
 
-                {/* Subtitle */}
-                {subtitle && (
-                    <div
-                        style={{
-                            fontSize: '24px',
-                            color: '#999999',
-                            fontWeight: 300,
-                            marginTop: '16px',
-                            letterSpacing: '0.08em',
-                            textTransform: 'lowercase',
-                        }}
-                    >
-                        {subtitle}
-                    </div>
-                )}
+      {/* Subtitle */}
+      {subtitle && (
+        <div
+          style={{
+            fontSize: '24px',
+            color: '#999999',
+            fontWeight: 300,
+            marginTop: '16px',
+            letterSpacing: '0.08em',
+            textTransform: 'lowercase',
+          }}
+        >
+          {subtitle}
+        </div>
+      )}
 
-                {/* Bottom decorative line */}
-                <div
-                    style={{
-                        width: '60px',
-                        height: '2px',
-                        backgroundColor: '#d4af37',
-                        marginTop: '40px',
-                    }}
-                />
-            </div>
-        ),
-        {
-            width: 1200,
-            height: 630,
-            headers: {
-                'Cache-Control': 'public, max-age=86400, s-maxage=86400',
-            },
-        },
-    );
+      {/* Bottom decorative line */}
+      <div
+        style={{
+          width: '60px',
+          height: '2px',
+          backgroundColor: '#d4af37',
+          marginTop: '40px',
+        }}
+      />
+    </div>,
+    {
+      width: 1200,
+      height: 630,
+      headers: {
+        'Cache-Control': 'public, max-age=86400, s-maxage=86400',
+      },
+    },
+  );
 }