feat: per-album hero image – picker from album assets, fullbleed banner on detail page

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

@@ -3,6 +3,7 @@ import type { PhotoItem } from './PhotoGrid';
 import { PhotoGrid } from './PhotoGrid';
 import { BackLink } from '@/components/BackLink';
 import type { GridConfig } from '@/lib/config';
+import Image from 'next/image';
 import React from 'react';
 
 interface AlbumDetailViewProps {
@@ -13,6 +14,8 @@ interface AlbumDetailViewProps {
   backLinkHref: string;
   backLinkLabel: string;
   subtitle?: string;
+  heroImageUrl?: string;
+  heroBlurDataURL?: string;
 }
 
 export function AlbumDetailView({
@@ -23,10 +26,26 @@ export function AlbumDetailView({
   backLinkHref,
   backLinkLabel,
   subtitle,
+  heroImageUrl,
+  heroBlurDataURL,
 }: AlbumDetailViewProps) {
   return (
     <>
-      <div className="album-header">
+      {heroImageUrl && (
+        <div className="album-hero">
+          <Image
+            src={heroImageUrl}
+            alt={album.albumName}
+            fill
+            priority
+            sizes="100vw"
+            style={{ objectFit: 'cover' }}
+            {...(heroBlurDataURL ? { placeholder: 'blur' as const, blurDataURL: heroBlurDataURL } : {})}
+          />
+          <div className="album-hero__overlay" />
+        </div>
+      )}
+      <div className={`album-header${heroImageUrl ? ' album-header--has-hero' : ''}`}>
         <BackLink href={backLinkHref} label={backLinkLabel} />
         <h1 className="album-header__title">{album.albumName}</h1>
         {subtitle && (

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

@@ -133,6 +133,21 @@ async function gateIfProtected(
   return <PasswordGate slug={key} title={title} type={type} />;
 }
 
+/** Fetch hero image URL + blur placeholder for an album if configured. */
+async function getAlbumHeroData(
+  albumId: string,
+  config: ReturnType<typeof getConfig>,
+): Promise<{ heroImageUrl: string; heroBlurDataURL?: string } | null> {
+  const heroAssetId = config.albumHeroImages[albumId];
+  if (!heroAssetId) return null;
+  const asset = await immich.getAssetInfo(heroAssetId);
+  const ph = asset ? assetPlaceholder(asset) : null;
+  return {
+    heroImageUrl: imageUrl(heroAssetId, 'preview'),
+    heroBlurDataURL: ph?.blurDataURL,
+  };
+}
+
 export default async function PathPage({ params }: PathPageProps) {
   const { path } = await params;
   const config = getConfig();
@@ -178,6 +193,8 @@ export default async function PathPage({ params }: PathPageProps) {
     const albumGate = await gateIfProtected(album.id, 'album', album.albumName);
     if (albumGate) return albumGate;
 
+    const heroData = await getAlbumHeroData(album.id, config);
+
     return (
       <AlbumDetailView
         album={album}
@@ -186,6 +203,7 @@ export default async function PathPage({ params }: PathPageProps) {
         gridStyle={buildGridStyle(spGrid)}
         backLinkHref={`/${subpageSlug}`}
         backLinkLabel={`Back to ${subpageName}`}
+        {...heroData}
       />
     );
   }
@@ -217,6 +235,8 @@ export default async function PathPage({ params }: PathPageProps) {
       const albumGate = await gateIfProtected(album.id, 'album', album.albumName);
       if (albumGate) return albumGate;
 
+      const heroData = await getAlbumHeroData(album.id, config);
+
       return (
         <AlbumDetailView
           album={album}
@@ -226,6 +246,7 @@ export default async function PathPage({ params }: PathPageProps) {
           subtitle={result.subpage.subtitle}
           backLinkHref="/"
           backLinkLabel="Back to Gallery"
+          {...heroData}
         />
       );
     }
@@ -265,6 +286,8 @@ export default async function PathPage({ params }: PathPageProps) {
   const albumGate = await gateIfProtected(album.id, 'album', album.albumName);
   if (albumGate) return albumGate;
 
+  const heroData = await getAlbumHeroData(album.id, config);
+
   return (
     <AlbumDetailView
       album={album}
@@ -273,6 +296,7 @@ export default async function PathPage({ params }: PathPageProps) {
       gridStyle={buildGridStyle()}
       backLinkHref="/"
       backLinkLabel="Back to Gallery"
+      {...heroData}
     />
   );
 }