security: add Trivy container scan to Docker publish workflow (#399)

* feat(admin): add backup manager UI with 1-click restore

* feat(admin): collapse older backup entries by default

* fix(theme): isolate admin layout, instant DOM theme updates, and add Light/Dark mode toggle

* feat(admin): replace text controls for Photo Frame and Hero Style with visual preview cards

* fix(admin): define missing CSS rules for button system (.btn, .preset-btn)

* feat(admin): redesign theme settings with segmented mode toggle, accent color swatches, and custom iOS-style toggle cards

* feat(admin): upgrade all settings tabs with visual grid previews, Google SEO snippet preview, and toggle cards

* feat(admin): overhaul Pages Builder UX with slide-over drawer, card hover badges, real-time search, and floating save bar

* fix(admin): remove leftover dangling syntax snippet in PageBuilder.tsx

* fix(admin): add position: relative to subpage-tile so hover overlay is contained inside the tile

* style(admin): replace all emojis with clean Leica-style vector SVG icons

* fix(types): extend IconProps with SVGProps to allow style prop on Leica SVG icons

* feat(admin): add subpage live-preview, privacy analytics, and asset protection settings

* fix(typecheck): fix AlbumEntry property access in subpage drawer preview mode

* fix(types): fix ImmichAlbumInfo property names thumbnailAssetId and albumName in PageBuilder.tsx

* fix(types): add protection and watermark optional properties to AppConfig interface

* feat(settings): add toggle for disabling analytics tracking (defaults to enabled)

* feat(ux): show status banner when analytics tracking is disabled + add live sync indicator

* feat(watermark): render customizable watermark overlay on Lightbox images + rename section to Portfolio Features & Modules

* fix(types): import type LightboxWatermark in PhotoGrid.tsx

* fix(types): destructure watermark prop in PhotoGrid function signature

* feat(seo): add configurable subpage title template and metadata descriptions

* feat(seo): add generateMetadata to about page for title template support

* feat(proofing): add client proofing, favorites selection, compact URL bitmasking, and export modal

* feat(essay): add Photo Essay storytelling mode with RSC markdown parser and fullbleed/pair layouts

* feat(subpages): add page enabled toggle to deactivate subpages without deleting them

* feat(admin): add visual essay block builder for photo essay storytelling pages

* security: add Trivy container scan to Docker publish workflow

Scans the built image for CRITICAL/HIGH CVEs on every release and
uploads results to the GitHub Security tab. Non-blocking for now
(exit-code 0) so releases aren't gated on findings. Also documents
the scan and existing Dependabot coverage in the README.

---------

Co-authored-by: ralksta <ralksta@users.noreply.github.com>

components/AnalyticsTracker.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useEffect } from 'react';
+import { usePathname } from 'next/navigation';
+
+export default function AnalyticsTracker() {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (!pathname || pathname.startsWith('/admin') || pathname.startsWith('/api')) return;
+
+    fetch('/api/analytics/track', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path: pathname }),
+    }).catch(() => {
+      // Ignore background tracking errors
+    });
+  }, [pathname]);
+
+  return null;
+}

components/AssetProtection.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useEffect } from 'react';
+
+interface Props {
+  disableRightClick?: boolean;
+  disableImageDrag?: boolean;
+}
+
+export default function AssetProtection({ disableRightClick, disableImageDrag }: Props) {
+  useEffect(() => {
+    if (!disableRightClick && !disableImageDrag) return;
+
+    function handleContextMenu(e: MouseEvent) {
+      const target = e.target as HTMLElement;
+      if (disableRightClick && (target.tagName === 'IMG' || target.closest('img') || target.classList.contains('photo-tile') || target.classList.contains('lightbox-img'))) {
+        e.preventDefault();
+      }
+    }
+
+    function handleDragStart(e: DragEvent) {
+      const target = e.target as HTMLElement;
+      if (disableImageDrag && (target.tagName === 'IMG' || target.closest('img'))) {
+        e.preventDefault();
+      }
+    }
+
+    if (disableRightClick) {
+      document.addEventListener('contextmenu', handleContextMenu);
+    }
+    if (disableImageDrag) {
+      document.addEventListener('dragstart', handleDragStart);
+    }
+
+    return () => {
+      document.removeEventListener('contextmenu', handleContextMenu);
+      document.removeEventListener('dragstart', handleDragStart);
+    };
+  }, [disableRightClick, disableImageDrag]);
+
+  return null;
+}

components/Lightbox.module.css

@@ -252,6 +252,39 @@
   opacity: 1;
 }
 
+/* ── Watermark Overlay ────────────────────────────── */
+.watermark {
+  position: absolute;
+  z-index: 10;
+  pointer-events: none;
+  font-family: var(--font-sans);
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #ffffff;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.7);
+  padding: 12px 16px;
+  user-select: none;
+}
+
+.watermark_bottom_right {
+  bottom: 12px;
+  right: 16px;
+}
+
+.watermark_bottom_left {
+  bottom: 12px;
+  left: 16px;
+}
+
+.watermark_center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+
 @media (hover: none) {
   .close,
   .nav,

components/Lightbox.tsx

@@ -17,6 +17,14 @@ import type { PhotoItem } from '@/app/[...path]/PhotoGrid';
 import { useExif } from '@/hooks/useExif';
 import { useSwipe } from '@/hooks/useSwipe';
 import styles from './Lightbox.module.css';
+import { useProofing } from './ProofingContext';
+
+export interface LightboxWatermark {
+  enabled?: boolean;
+  text?: string;
+  opacity?: number;
+  position?: 'bottom-right' | 'bottom-left' | 'center' | string;
+}
 
 interface LightboxProps {
   assets: PhotoItem[];
@@ -24,9 +32,10 @@ interface LightboxProps {
   onClose: () => void;
   onNext: () => void;
   onPrev: () => void;
+  watermark?: LightboxWatermark;
 }
 
-export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev }: LightboxProps) {
+export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev, watermark }: LightboxProps) {
   const [showExif, setShowExif] = useState(false);
   const { exifData, exifLoading, fetchExif, clearExif } = useExif();
   const [imageLoaded, setImageLoaded] = useState(false);
@@ -34,6 +43,8 @@ export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev }: Ligh
   const closeBtnRef = useRef<HTMLButtonElement>(null);
 
   const current = assets[currentIndex];
+  const proofing = useProofing();
+  const isFav = proofing && current ? proofing.isFavorite(current.id) : false;
   const [mounted, setMounted] = useState(false);
 
   // Mount guard — createPortal needs document.body (client-only)
@@ -193,6 +204,21 @@ export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev }: Ligh
             onError={() => console.error(`[Lightbox] Failed to load image: ${current.previewUrl}`)}
           />
         )}
+
+        {watermark?.enabled && watermark.text && (
+          <div
+            className={`${styles.watermark} ${
+              watermark.position === 'bottom-left'
+                ? styles.watermark_bottom_left
+                : watermark.position === 'center'
+                ? styles.watermark_center
+                : styles.watermark_bottom_right
+            }`}
+            style={{ opacity: (watermark.opacity ?? 50) / 100 }}
+          >
+            {watermark.text}
+          </div>
+        )}
       </div>
 
       {/* Next button */}
@@ -225,6 +251,23 @@ export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev }: Ligh
         </span>
       </div>
 
+      {/* Proofing favorite button */}
+      {proofing && current && (
+        <button
+          className={styles.infoToggle}
+          style={{
+            right: '6.5rem',
+            color: isFav ? '#ff4d4f' : 'inherit',
+            fontWeight: isFav ? 600 : 400,
+          }}
+          onClick={() => proofing.toggleFavorite(current.id)}
+          aria-label={isFav ? 'Remove from favorites' : 'Add to favorites'}
+          title={isFav ? 'Remove from favorites' : 'Add to favorites'}
+        >
+          {isFav ? '❤️ Saved' : '🤍 Favorite'}
+        </button>
+      )}
+
       {/* EXIF toggle */}
       <button
         className={styles.infoToggle}

components/ProofingContext.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { encodeProofBitmask, decodeProofBitmask } from '@/lib/proofing';
+
+interface ProofingContextType {
+  favorites: Set<string>;
+  toggleFavorite: (token: string) => void;
+  isFavorite: (token: string) => boolean;
+  clearFavorites: () => void;
+  isFilterActive: boolean;
+  setIsFilterActive: React.Dispatch<React.SetStateAction<boolean>>;
+  isModalOpen: boolean;
+  setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  getProofingUrl: () => string;
+  getFormattedList: () => string;
+  allowMailto: boolean;
+}
+
+const ProofingContext = createContext<ProofingContextType | null>(null);
+
+export function ProofingProvider({
+  children,
+  albumTokens = [],
+  albumName = 'Gallery',
+  allowMailto = true,
+}: {
+  children: React.ReactNode;
+  albumTokens?: string[];
+  albumName?: string;
+  allowMailto?: boolean;
+}) {
+  const [favorites, setFavorites] = useState<Set<string>>(new Set());
+  const [isFilterActive, setIsFilterActive] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const storageKey = `folio_fav_${albumName.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`;
+
+  // Hydrate from localStorage and URL query params on mount
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem(storageKey);
+      const initialSet = new Set<string>();
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        if (Array.isArray(parsed)) {
+          parsed.forEach((t) => initialSet.add(t));
+        }
+      }
+
+      // Check URL query param ?proof=...
+      const urlParams = new URLSearchParams(window.location.search);
+      const proofCode = urlParams.get('proof');
+      if (proofCode && albumTokens.length > 0) {
+        const decodedIndices = decodeProofBitmask(proofCode, albumTokens.length);
+        decodedIndices.forEach((idx) => {
+          if (albumTokens[idx]) {
+            initialSet.add(albumTokens[idx]);
+          }
+        });
+      }
+
+      setFavorites(initialSet);
+    } catch (e) {
+      console.error('Failed to load favorites', e);
+    }
+  }, [storageKey, albumTokens]);
+
+  const toggleFavorite = (token: string) => {
+    setFavorites((prev) => {
+      const next = new Set(prev);
+      if (next.has(token)) {
+        next.delete(token);
+      } else {
+        next.add(token);
+      }
+      try {
+        localStorage.setItem(storageKey, JSON.stringify(Array.from(next)));
+      } catch (e) {
+        console.error('Failed to save favorites', e);
+      }
+      return next;
+    });
+  };
+
+  const isFavorite = (token: string) => favorites.has(token);
+
+  const clearFavorites = () => {
+    setFavorites(new Set());
+    try {
+      localStorage.removeItem(storageKey);
+    } catch (e) {
+      console.error('Failed to clear favorites', e);
+    }
+  };
+
+  const getProofingUrl = () => {
+    if (albumTokens.length === 0 || favorites.size === 0) {
+      return typeof window !== 'undefined' ? window.location.href : '';
+    }
+    const indices: number[] = [];
+    albumTokens.forEach((token, index) => {
+      if (favorites.has(token)) {
+        indices.push(index);
+      }
+    });
+    const code = encodeProofBitmask(indices);
+    const url = new URL(typeof window !== 'undefined' ? window.location.href : 'http://localhost');
+    if (code) {
+      url.searchParams.set('proof', code);
+    } else {
+      url.searchParams.delete('proof');
+    }
+    return url.toString();
+  };
+
+  const getFormattedList = () => {
+    const selectedIndices: number[] = [];
+    albumTokens.forEach((token, index) => {
+      if (favorites.has(token)) {
+        selectedIndices.push(index + 1);
+      }
+    });
+    if (selectedIndices.length === 0) return `${albumName}: No photos selected.`;
+    return `${albumName} — Selected Photos (${selectedIndices.length}): #${selectedIndices.join(', #')}`;
+  };
+
+  return (
+    <ProofingContext.Provider
+      value={{
+        favorites,
+        toggleFavorite,
+        isFavorite,
+        clearFavorites,
+        isFilterActive,
+        setIsFilterActive,
+        isModalOpen,
+        setIsModalOpen,
+        getProofingUrl,
+        getFormattedList,
+        allowMailto,
+      }}
+    >
+      {children}
+    </ProofingContext.Provider>
+  );
+}
+
+export function useProofing() {
+  const context = useContext(ProofingContext);
+  return context;
+}

components/ProofingModal.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useProofing } from './ProofingContext';
+
+export function ProofingModal() {
+  const proofing = useProofing();
+  const [copiedState, setCopiedState] = useState<'none' | 'link' | 'list'>('none');
+
+  if (!proofing || !proofing.isModalOpen) return null;
+
+  const {
+    favorites,
+    isModalOpen,
+    setIsModalOpen,
+    getProofingUrl,
+    getFormattedList,
+    clearFavorites,
+    allowMailto,
+  } = proofing;
+
+  const handleCopyLink = () => {
+    const url = getProofingUrl();
+    navigator.clipboard.writeText(url).then(() => {
+      setCopiedState('link');
+      setTimeout(() => setCopiedState('none'), 2000);
+    });
+  };
+
+  const handleCopyList = () => {
+    const list = getFormattedList();
+    navigator.clipboard.writeText(list).then(() => {
+      setCopiedState('list');
+      setTimeout(() => setCopiedState('none'), 2000);
+    });
+  };
+
+  const handleMailto = () => {
+    const subject = encodeURIComponent(`Photo Selection (${favorites.size} items)`);
+    const body = encodeURIComponent(
+      `Hello,\n\nHere is my photo selection:\n\n${getFormattedList()}\n\nShare Link: ${getProofingUrl()}\n\nBest regards,`,
+    );
+    window.location.href = `mailto:?subject=${subject}&body=${body}`;
+  };
+
+  return (
+    <div
+      className="proofing-modal-overlay"
+      onClick={() => setIsModalOpen(false)}
+      style={{
+        position: 'fixed',
+        inset: 0,
+        backgroundColor: 'rgba(0,0,0,0.7)',
+        backdropFilter: 'blur(4px)',
+        zIndex: 9999,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '1rem',
+      }}
+    >
+      <div
+        className="proofing-modal-card"
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          background: 'var(--bg-surface, #1e1e1e)',
+          color: 'var(--text-primary, #ffffff)',
+          borderRadius: 'var(--radius-md, 12px)',
+          border: '1px solid var(--border-color, rgba(255,255,255,0.1))',
+          padding: '1.5rem',
+          maxWidth: '480px',
+          width: '100%',
+          boxShadow: '0 20px 40px rgba(0,0,0,0.5)',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: '1rem',
+          }}
+        >
+          <h3 style={{ margin: 0, fontSize: '1.2rem', fontWeight: 600 }}>
+            ❤️ Selection ({favorites.size})
+          </h3>
+          <button
+            type="button"
+            onClick={() => setIsModalOpen(false)}
+            aria-label="Close modal"
+            style={{
+              background: 'none',
+              border: 'none',
+              color: 'currentColor',
+              fontSize: '1.5rem',
+              cursor: 'pointer',
+              opacity: 0.7,
+              lineHeight: 1,
+            }}
+          >
+            &times;
+          </button>
+        </div>
+
+        <p style={{ fontSize: '0.9rem', opacity: 0.8, marginBottom: '1rem' }}>
+          You have selected {favorites.size} photo{favorites.size === 1 ? '' : 's'}. Choose an
+          export option below to share your selection:
+        </p>
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+          <button
+            type="button"
+            onClick={handleCopyLink}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: '0.5rem',
+              padding: '0.75rem 1rem',
+              borderRadius: 'var(--radius-sm, 6px)',
+              background: 'var(--accent, #e60012)',
+              color: '#fff',
+              border: 'none',
+              fontWeight: 500,
+              cursor: 'pointer',
+            }}
+          >
+            {copiedState === 'link' ? '✓ Link Copied!' : '🔗 Copy Shareable Link'}
+          </button>
+
+          <button
+            type="button"
+            onClick={handleCopyList}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: '0.5rem',
+              padding: '0.75rem 1rem',
+              borderRadius: 'var(--radius-sm, 6px)',
+              background: 'rgba(255,255,255,0.1)',
+              color: 'inherit',
+              border: '1px solid rgba(255,255,255,0.15)',
+              fontWeight: 500,
+              cursor: 'pointer',
+            }}
+          >
+            {copiedState === 'list' ? '✓ List Copied!' : '📋 Copy Text List (#1, #2...)'}
+          </button>
+
+          {allowMailto && (
+            <button
+              type="button"
+              onClick={handleMailto}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: '0.5rem',
+                padding: '0.75rem 1rem',
+                borderRadius: 'var(--radius-sm, 6px)',
+                background: 'rgba(255,255,255,0.1)',
+                color: 'inherit',
+                border: '1px solid rgba(255,255,255,0.15)',
+                fontWeight: 500,
+                cursor: 'pointer',
+              }}
+            >
+              ✉️ Send Email to Photographer
+            </button>
+          )}
+
+          <button
+            type="button"
+            onClick={() => {
+              if (confirm('Clear all selected favorites?')) {
+                clearFavorites();
+                setIsModalOpen(false);
+              }
+            }}
+            style={{
+              marginTop: '0.5rem',
+              background: 'none',
+              border: 'none',
+              color: '#ff4d4f',
+              fontSize: '0.85rem',
+              cursor: 'pointer',
+              opacity: 0.8,
+            }}
+          >
+            Clear Selection
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}