experimental: portfolio features (justified layout, unlisted pages, captions, per-album grid, focal point, nav links, cover hero) (#431)

## Was ist das?

Sieben neue Portfolio-Features, alle als **experimental** gekennzeichnet
— in YAML-Kommentaren, Admin-Panel-Labels und Commit-Scopes, damit sie
einzeln nachvollziehbar und revertierbar bleiben.

## Features (je ein Commit)

| Commit | Feature |
| --- | --- |
| `justified rows gallery layout` | Neues Grid-Layout `justified`:
zeilenbasiert, gleiche Höhen, volle Breite — Flexbox ohne JS-Messung,
letzte Zeile bleibt natürlich klein |
| `hide subpages from navigation` | `hidden: true`: Seite aus
Nav/Homepage raus, per Direktlink erreichbar — im Gegensatz zu `enabled:
false` (404) |
| `lightbox captions` | Immich-Asset-Description als Bildunterschrift im
Info-Panel; EXIF-Route liefert bei `exifOnHover: false` jetzt nur noch
die Caption statt 403 |
| `per-album grid overrides` | `grid:` pro Album-Eintrag, Präzedenz
global < Subpage < Album |
| `per-album cover focal point` | `coverPosition:` → `object-position`
auf Cover-Karten, strikt validiert |
| `external links in header navigation` | `navLinks:` in settings.yaml,
nur http(s), sanitisiert |
| `cover splash hero style` | `heroStyle: cover`: Fullscreen-Splash mit
Enter-Link ins Portfolio |

Alle Optionen sind im Admin-Panel editierbar (PageBuilder /
SettingsEditor).

## Tests

- 356 Unit-Tests grün (13 neue: deriveGallery hidden/grid/coverPosition,
sanitizeNavLinks, EXIF-Route-Captions, justified-Layout-Validierung)
- `npx tsc --noEmit`: 0 Fehler
- `npm run build`: sauber
- Justified-Zeilenmathematik und Cover-Splash per Browser-Harness
visuell/numerisch verifiziert (volle Zeilen enden exakt an der
Containerkante, letzte Zeile bleibt natürlich)

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: ralksta <ralksta@users.noreply.github.com>
Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: lancetm714 <108419425+lancetm714@users.noreply.github.com>

components/FadeIn.tsx

@@ -18,9 +18,11 @@ interface FadeInProps {
   direction?: 'up' | 'none';
   /** CSS class name for the wrapper */
   className?: string;
+  /** Extra inline styles for the wrapper (e.g. flex sizing in justified grids) */
+  style?: React.CSSProperties;
 }
 
-export function FadeIn({ children, delay = 0, direction = 'up', className }: FadeInProps) {
+export function FadeIn({ children, delay = 0, direction = 'up', className, style }: FadeInProps) {
   const ref = useRef<HTMLDivElement>(null);
 
   const reveal = useCallback(() => {
@@ -55,7 +57,7 @@ export function FadeIn({ children, delay = 0, direction = 'up', className }: Fad
     <div
       ref={ref}
       className={`fade-in ${direction === 'up' ? 'fade-in--up' : ''} ${className ?? ''}`}
-      style={{ transitionDelay: `${delay}ms` }}
+      style={{ ...style, transitionDelay: `${delay}ms` }}
     >
       {children}
     </div>

components/Lightbox.module.css

@@ -184,6 +184,17 @@
   animation: exif-slide-up var(--transition-normal) ease forwards;
 }
 
+/* EXPERIMENTAL: editorial caption (Immich asset description) above the tech rows */
+.exifCaption {
+  margin: 0 0 12px;
+  max-width: 280px;
+  font-family: var(--font-caption);
+  font-size: 0.85rem;
+  line-height: 1.5;
+  font-style: italic;
+  color: rgba(255, 255, 255, 0.85);
+}
+
 @keyframes exif-slide-up {
   from {
     opacity: 0;

components/Lightbox.tsx

@@ -326,6 +326,9 @@ export function Lightbox({
             </div>
           ) : exifData ? (
             <>
+              {exifData.description && (
+                <p className={styles.exifCaption}>{exifData.description}</p>
+              )}
               {exifData.model && (
                 <div className={styles.exifRow}>
                   <span className={styles.exifLabel}>Camera</span>

components/SubpageNav.tsx

@@ -5,6 +5,7 @@
 
 import Link from 'next/link';
 import { immich } from '@/lib/immich';
+import { getConfig } from '@/lib/config';
 import { listJournalEntries } from '@/lib/admin/journal-service';
 
 export async function SubpageNav() {
@@ -13,6 +14,9 @@ export async function SubpageNav() {
     immich.getStandaloneAlbums(),
     listJournalEntries().catch(() => []),
   ]);
+  // EXPERIMENTAL: external nav links from settings.yaml, appended after the
+  // internal entries. Sanitised to http(s) in getConfig().
+  const navLinks = getConfig().navLinks;
 
   const hasPublicJournal = journalEntries.some((e) => !e.frontmatter.draft);
 
@@ -33,6 +37,17 @@ export async function SubpageNav() {
           {album.albumName}
         </Link>
       ))}
+      {navLinks.map((link) => (
+        <a
+          key={link.url}
+          href={link.url}
+          className="header__nav-link header__nav-link--external"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {link.label}
+        </a>
+      ))}
     </>
   );
 }