refactor: apply Clean Architecture principles

- Extract EXIF and Swipe logic into custom hooks for Lightbox
- Extract Map layout data formatting into mapService
- Extract AlbumDetailView and SubpageGridView components from page router
- Restructure monolithic config.ts into clean config/ directory

app/[...path]/AlbumDetailView.tsx

@@ -0,0 +1,38 @@
+import type { ImmichAlbum } from '@/lib/immich';
+import type { PhotoItem } from './PhotoGrid';
+import { PhotoGrid } from './PhotoGrid';
+import { BackLink } from '@/components/BackLink';
+import type { GridConfig } from '@/lib/config';
+import React from 'react';
+
+interface AlbumDetailViewProps {
+    album: ImmichAlbum;
+    images: PhotoItem[];
+    layout: GridConfig['layout'];
+    gridStyle: React.CSSProperties;
+    backLinkHref: string;
+    backLinkLabel: string;
+}
+
+export function AlbumDetailView({
+    album,
+    images,
+    layout,
+    gridStyle,
+    backLinkHref,
+    backLinkLabel,
+}: AlbumDetailViewProps) {
+    return (
+        <>
+            <div className="album-header">
+                <BackLink href={backLinkHref} label={backLinkLabel} />
+                <h1 className="album-header__title">{album.albumName}</h1>
+                <p className="album-header__meta">
+                    {images.length} {images.length === 1 ? 'photo' : 'photos'}
+                    {album.description && ` · ${album.description}`}
+                </p>
+            </div>
+            <PhotoGrid assets={images} layout={layout} gridStyle={gridStyle} />
+        </>
+    );
+}

app/[...path]/SubpageGridView.tsx

@@ -0,0 +1,62 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import { imageUrl } from '@/lib/urls';
+
+interface SubpageAlbum {
+    id: string;
+    slug: string;
+    albumName: string;
+    assetCount: number;
+    albumThumbnailAssetId: string | null;
+}
+
+interface Placeholder {
+    blurDataURL?: string;
+    dominantColor?: string;
+}
+
+interface SubpageGridViewProps {
+    slug: string;
+    albums: SubpageAlbum[];
+    coverPlaceholders: (Placeholder | null)[];
+}
+
+export function SubpageGridView({ slug, albums, coverPlaceholders }: SubpageGridViewProps) {
+    return (
+        <div className="subpage-grid">
+            {albums.map((album, i) => {
+                const ph = coverPlaceholders[i];
+                return (
+                    <Link
+                        key={album.id}
+                        href={`/${slug}/${album.slug}`}
+                        className="subpage-grid__item"
+                        style={ph?.dominantColor ? { backgroundColor: ph.dominantColor } : undefined}
+                    >
+                        {album.albumThumbnailAssetId ? (
+                            <Image
+                                src={imageUrl(album.albumThumbnailAssetId, 'preview')}
+                                alt={album.albumName}
+                                fill
+                                sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw"
+                                loading="lazy"
+                                {...(ph ? { placeholder: 'blur' as const, blurDataURL: ph.blurDataURL } : {})}
+                            />
+                        ) : (
+                            <div className="skeleton" style={{ width: '100%', height: '100%' }} />
+                        )}
+                        <span className="subpage-grid__item-badge">
+                            {album.assetCount} {album.assetCount === 1 ? 'photo' : 'photos'}
+                        </span>
+                        <div className="subpage-grid__item-overlay">
+                            <span className="subpage-grid__item-title">{album.albumName}</span>
+                            <span className="subpage-grid__item-count">
+                                {album.assetCount} {album.assetCount === 1 ? 'photo' : 'photos'}
+                            </span>
+                        </div>
+                    </Link>
+                );
+            })}
+        </div>
+    );
+}

app/[...path]/page.tsx

@@ -28,6 +28,8 @@ import { getConfig, type GridConfig } from '@/lib/config';
 import { isProtected, isAuthenticated } from '@/lib/auth';
 import PasswordGate from '@/components/PasswordGate';
 import { BackLink } from '@/components/BackLink';
+import { AlbumDetailView } from './AlbumDetailView';
+import { SubpageGridView } from './SubpageGridView';
 
 // Render at request time — requires live Immich connection
 export const dynamic = 'force-dynamic';
@@ -153,21 +155,14 @@ export default async function PathPage({ params }: PathPageProps) {
     const images = toPhotoItems(album.assets, config.exifOnHover);
 
     return (
-      <>
-        <div className="album-header">
-          <BackLink href={`/${subpageSlug}`} label={`Back to ${subpageName}`} />
-          <h1 className="album-header__title">{album.albumName}</h1>
-          <p className="album-header__meta">
-            {images.length} {images.length === 1 ? 'photo' : 'photos'}
-            {album.description && ` · ${album.description}`}
-          </p>
-        </div>
-        <PhotoGrid
-          assets={images}
-          layout={resolveLayout(spGrid)}
-          gridStyle={buildGridStyle(spGrid)}
-        />
-      </>
+      <AlbumDetailView
+        album={album}
+        images={images}
+        layout={resolveLayout(spGrid)}
+        gridStyle={buildGridStyle(spGrid)}
+        backLinkHref={`/${subpageSlug}`}
+        backLinkLabel={`Back to ${subpageName}`}
+      />
     );
   }
 
@@ -202,21 +197,14 @@ export default async function PathPage({ params }: PathPageProps) {
       const images = toPhotoItems(album.assets, config.exifOnHover);
 
       return (
-        <>
-          <div className="album-header">
-            <BackLink href="/" label="Back to Gallery" />
-            <h1 className="album-header__title">{album.albumName}</h1>
-            <p className="album-header__meta">
-              {images.length} {images.length === 1 ? 'photo' : 'photos'}
-              {album.description && ` · ${album.description}`}
-            </p>
-          </div>
-          <PhotoGrid
-            assets={images}
-            layout={resolveLayout(result.subpage.grid)}
-            gridStyle={buildGridStyle(result.subpage.grid)}
-          />
-        </>
+        <AlbumDetailView
+          album={album}
+          images={images}
+          layout={resolveLayout(result.subpage.grid)}
+          gridStyle={buildGridStyle(result.subpage.grid)}
+          backLinkHref="/"
+          backLinkLabel="Back to Gallery"
+        />
       );
     }
 
@@ -232,41 +220,11 @@ export default async function PathPage({ params }: PathPageProps) {
     );
 
     return (
-      <div className="subpage-grid">
-        {albums.map((album, i) => {
-          const ph = coverPlaceholders[i];
-          return (
-            <Link
-              key={album.id}
-              href={`/${slug}/${album.slug}`}
-              className="subpage-grid__item"
-              style={ph?.dominantColor ? { backgroundColor: ph.dominantColor } : undefined}
-            >
-              {album.albumThumbnailAssetId ? (
-                <Image
-                  src={imageUrl(album.albumThumbnailAssetId, 'preview')}
-                  alt={album.albumName}
-                  fill
-                  sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw"
-                  loading="lazy"
-                  {...(ph ? { placeholder: 'blur' as const, blurDataURL: ph.blurDataURL } : {})}
-                />
-              ) : (
-                <div className="skeleton" style={{ width: '100%', height: '100%' }} />
-              )}
-              <span className="subpage-grid__item-badge">
-                {album.assetCount} {album.assetCount === 1 ? 'photo' : 'photos'}
-              </span>
-              <div className="subpage-grid__item-overlay">
-                <span className="subpage-grid__item-title">{album.albumName}</span>
-                <span className="subpage-grid__item-count">
-                  {album.assetCount} {album.assetCount === 1 ? 'photo' : 'photos'}
-                </span>
-              </div>
-            </Link>
-          );
-        })}
-      </div>
+      <SubpageGridView
+        slug={slug}
+        albums={albums}
+        coverPlaceholders={coverPlaceholders}
+      />
     );
   }
 
@@ -279,16 +237,13 @@ export default async function PathPage({ params }: PathPageProps) {
   const images = toPhotoItems(album.assets, config.exifOnHover);
 
   return (
-    <>
-      <div className="album-header">
-        <BackLink href="/" label="Back to Gallery" />
-        <h1 className="album-header__title">{album.albumName}</h1>
-        <p className="album-header__meta">
-          {images.length} {images.length === 1 ? 'photo' : 'photos'}
-          {album.description && ` · ${album.description}`}
-        </p>
-      </div>
-      <PhotoGrid assets={images} layout={resolveLayout()} gridStyle={buildGridStyle()} />
-    </>
+    <AlbumDetailView
+      album={album}
+      images={images}
+      layout={resolveLayout()}
+      gridStyle={buildGridStyle()}
+      backLinkHref="/"
+      backLinkLabel="Back to Gallery"
+    />
   );
 }

app/api/map/route.ts

@@ -6,10 +6,10 @@
 
 import { NextRequest, NextResponse } from 'next/server';
 import { cookies } from 'next/headers';
-import { immich } from '@/lib/immich';
 import { getConfig } from '@/lib/config';
 import { imageUrl } from '@/lib/urls';
 import { isAuthenticated } from '@/lib/auth';
+import { getMapData } from '@/lib/mapService';
 
 export const dynamic = 'force-dynamic';
 
@@ -23,7 +23,7 @@ export async function GET(_request: NextRequest) {
   const cookieStore = await cookies();
   const getCookie = (name: string) => cookieStore.get(name)?.value;
 
-  const locations = await immich.getMapData();
+  const locations = await getMapData();
 
   // Filter locations and albums based on auth
   const publicLocations = locations