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>

app/[...path]/PhotoGrid.tsx

@@ -10,8 +10,10 @@
 
 import { useState, useCallback, useEffect, useMemo } from 'react';
 import Image from 'next/image';
-import { Lightbox } from '@/components/Lightbox';
+import { Lightbox, type LightboxWatermark } from '@/components/Lightbox';
 import { FadeIn } from '@/components/FadeIn';
+import { ProofingProvider, useProofing } from '@/components/ProofingContext';
+import { ProofingModal } from '@/components/ProofingModal';
 
 export interface PhotoItem {
   id: string;
@@ -32,8 +34,9 @@ export interface PhotoItem {
 
 interface PhotoGridProps {
   assets: PhotoItem[];
-  layout?: 'masonry' | 'uniform' | 'showcase' | 'filmstrip' | 'editorial-flow';
+  layout?: 'masonry' | 'uniform' | 'showcase' | 'filmstrip' | 'editorial-flow' | 'essay';
   gridStyle?: React.CSSProperties;
+  watermark?: LightboxWatermark;
 }
 
 /** Parse `#photo-N` from a hash string. Returns index or null. */
@@ -49,36 +52,42 @@ function buildPhotoHash(index: number): string {
   return `#photo-${index + 1}`; // 1-indexed for user-friendliness
 }
 
-export function PhotoGrid({ assets, layout = 'masonry', gridStyle }: PhotoGridProps) {
+function PhotoGridInner({ assets, layout = 'masonry', gridStyle, watermark }: PhotoGridProps) {
+  const proofing = useProofing();
   const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
 
+  const displayedAssets = useMemo(() => {
+    if (proofing && proofing.isFilterActive) {
+      return assets.filter((a) => proofing.isFavorite(a.id));
+    }
+    return assets;
+  }, [assets, proofing]);
+
   // ── Initial hash check (Client-only to avoid hydration mismatch) ──
   useEffect(() => {
     const idx = parsePhotoHash(window.location.hash);
-    if (idx !== null && idx < assets.length) {
-      // state from URL hash on mount only (equivalent to useState lazy initializer for
-      // client-only browser APIs).
+    if (idx !== null && idx < displayedAssets.length) {
+      // state from URL hash on mount only
       // eslint-disable-next-line react-hooks/set-state-in-effect
       setLightboxIndex(idx);
     }
-  }, [assets.length]);
+  }, [displayedAssets.length]);
 
   // ── Sync URL hash when lightbox state changes ─────────────────
   useEffect(() => {
-    if (lightboxIndex !== null && lightboxIndex < assets.length) {
+    if (lightboxIndex !== null && lightboxIndex < displayedAssets.length) {
       const hash = buildPhotoHash(lightboxIndex);
-      // Use replaceState to avoid flooding history with every prev/next tap
       if (window.location.hash !== hash) {
         window.history.replaceState(null, '', hash);
       }
     }
-  }, [lightboxIndex, assets.length]);
+  }, [lightboxIndex, displayedAssets.length]);
 
   // ── Listen for browser back/forward (hash change) ─────────────
   useEffect(() => {
     const handleHashChange = () => {
       const idx = parsePhotoHash(window.location.hash);
-      if (idx !== null && idx < assets.length) {
+      if (idx !== null && idx < displayedAssets.length) {
         setLightboxIndex(idx);
       } else {
         setLightboxIndex(null);
@@ -87,27 +96,25 @@ export function PhotoGrid({ assets, layout = 'masonry', gridStyle }: PhotoGridPr
 
     window.addEventListener('hashchange', handleHashChange);
     return () => window.removeEventListener('hashchange', handleHashChange);
-  }, [assets.length]);
+  }, [displayedAssets.length]);
 
   const openLightbox = useCallback((index: number) => {
     setLightboxIndex(index);
-    // Push state (not replace) so the user can press Back to close
     window.history.pushState(null, '', buildPhotoHash(index));
   }, []);
 
   const closeLightbox = useCallback(() => {
     setLightboxIndex(null);
-    // Remove hash from URL cleanly
     window.history.pushState(null, '', window.location.pathname + window.location.search);
   }, []);
 
   const goNext = useCallback(() => {
-    setLightboxIndex((prev) => (prev !== null ? (prev + 1) % assets.length : null));
-  }, [assets.length]);
+    setLightboxIndex((prev) => (prev !== null ? (prev + 1) % displayedAssets.length : null));
+  }, [displayedAssets.length]);
 
   const goPrev = useCallback(() => {
-    setLightboxIndex((prev) => (prev !== null ? (prev - 1 + assets.length) % assets.length : null));
-  }, [assets.length]);
+    setLightboxIndex((prev) => (prev !== null ? (prev - 1 + displayedAssets.length) % displayedAssets.length : null));
+  }, [displayedAssets.length]);
 
   // Keyboard navigation
   useEffect(() => {
@@ -128,7 +135,6 @@ export function PhotoGrid({ assets, layout = 'masonry', gridStyle }: PhotoGridPr
     };
 
     document.addEventListener('keydown', handleKeyDown);
-    // Prevent body scroll when lightbox is open
     document.body.style.overflow = 'hidden';
 
     return () => {
@@ -137,60 +143,105 @@ export function PhotoGrid({ assets, layout = 'masonry', gridStyle }: PhotoGridPr
     };
   }, [lightboxIndex, closeLightbox, goNext, goPrev]);
 
-  // Memoize grid items to prevent re-renders of the entire grid (which includes
-  // Image and FadeIn components) when navigating the lightbox.
   const gridItems = useMemo(() => {
-    return assets.map((asset, index) => (
-      <FadeIn key={asset.id} delay={index < 12 ? index * 50 : 0}>
-        <div
-          className={`photo-grid__item${
-            layout === 'showcase' && index === 0 ? ' photo-grid__featured' : ''
-          }`}
-          onClick={() => openLightbox(index)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-              e.preventDefault();
-              openLightbox(index);
-            }
-          }}
-          role="button"
-          tabIndex={0}
-          aria-label={`View photo ${index + 1}`}
-          aria-haspopup="dialog"
-          style={{
-            ...(asset.dominantColor ? { backgroundColor: asset.dominantColor } : {}),
-            ...((layout === 'masonry' || layout === 'showcase') && asset.aspectRatio
-              ? { aspectRatio: `${asset.aspectRatio}` }
-              : {}),
-          }}
-        >
-          <Image
-            src={asset.thumbUrl}
-            alt=""
-            fill
-            sizes="(max-width: 600px) 50vw, (max-width: 1000px) 33vw, 25vw"
-            loading={index < 6 ? 'eager' : 'lazy'}
-            {...(asset.blurDataURL
-              ? { placeholder: 'blur' as const, blurDataURL: asset.blurDataURL }
-              : {})}
-          />
-          {asset.type === 'video' && (
-            <div className="photo-grid__item-play" aria-hidden="true">
-              <svg viewBox="0 0 24 24" fill="currentColor">
-                <circle cx="12" cy="12" r="12" fillOpacity="0.55" />
-                <polygon points="10,8 10,16 17,12" fill="white" />
-              </svg>
-            </div>
-          )}
-          {(asset.camera || asset.lens) && (
-            <div className="photo-grid__item-exif" aria-hidden="true">
-              {[asset.camera, asset.lens, asset.focalLength].filter(Boolean).join(' · ')}
-            </div>
-          )}
-        </div>
-      </FadeIn>
-    ));
-  }, [assets, layout, openLightbox]);
+    return displayedAssets.map((asset, index) => {
+      const isFav = proofing ? proofing.isFavorite(asset.id) : false;
+
+      return (
+        <FadeIn key={asset.id} delay={index < 12 ? index * 50 : 0}>
+          <div
+            className={`photo-grid__item${
+              layout === 'showcase' && index === 0 ? ' photo-grid__featured' : ''
+            }`}
+            onClick={() => openLightbox(index)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                openLightbox(index);
+              }
+            }}
+            role="button"
+            tabIndex={0}
+            aria-label={`View photo ${index + 1}`}
+            aria-haspopup="dialog"
+            style={{
+              ...(asset.dominantColor ? { backgroundColor: asset.dominantColor } : {}),
+              ...((layout === 'masonry' || layout === 'showcase') && asset.aspectRatio
+                ? { aspectRatio: `${asset.aspectRatio}` }
+                : {}),
+              position: 'relative',
+            }}
+          >
+            <Image
+              src={asset.thumbUrl}
+              alt=""
+              fill
+              sizes="(max-width: 600px) 50vw, (max-width: 1000px) 33vw, 25vw"
+              loading={index < 6 ? 'eager' : 'lazy'}
+              {...(asset.blurDataURL
+                ? { placeholder: 'blur' as const, blurDataURL: asset.blurDataURL }
+                : {})}
+            />
+
+            {proofing && (
+              <button
+                type="button"
+                className="photo-grid__fav-btn"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  proofing.toggleFavorite(asset.id);
+                }}
+                aria-label={isFav ? 'Remove favorite' : 'Add favorite'}
+                title={isFav ? 'Remove favorite' : 'Add favorite'}
+                style={{
+                  position: 'absolute',
+                  top: '8px',
+                  right: '8px',
+                  zIndex: 5,
+                  width: '44px',
+                  height: '44px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  color: isFav ? '#ff4d4f' : 'rgba(255,255,255,0.85)',
+                  filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.6))',
+                  padding: 0,
+                }}
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  width="24"
+                  height="24"
+                  fill={isFav ? 'currentColor' : 'none'}
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+                </svg>
+              </button>
+            )}
+
+            {asset.type === 'video' && (
+              <div className="photo-grid__item-play" aria-hidden="true">
+                <svg viewBox="0 0 24 24" fill="currentColor">
+                  <circle cx="12" cy="12" r="12" fillOpacity="0.55" />
+                  <polygon points="10,8 10,16 17,12" fill="white" />
+                </svg>
+              </div>
+            )}
+            {(asset.camera || asset.lens) && (
+              <div className="photo-grid__item-exif" aria-hidden="true">
+                {[asset.camera, asset.lens, asset.focalLength].filter(Boolean).join(' · ')}
+              </div>
+            )}
+          </div>
+        </FadeIn>
+      );
+    });
+  }, [displayedAssets, layout, openLightbox, proofing]);
 
   return (
     <>
@@ -198,15 +249,82 @@ export function PhotoGrid({ assets, layout = 'masonry', gridStyle }: PhotoGridPr
         {gridItems}
       </div>
 
+      {proofing && proofing.favorites.size > 0 && (
+        <div
+          className="proofing-sticky-bar"
+          style={{
+            position: 'fixed',
+            bottom: '24px',
+            right: '24px',
+            zIndex: 990,
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px',
+            padding: '8px 16px',
+            borderRadius: '30px',
+            background: 'var(--bg-surface, #1e1e1e)',
+            color: 'var(--text-primary, #ffffff)',
+            border: '1px solid var(--border-color, rgba(255,255,255,0.15))',
+            boxShadow: '0 8px 24px rgba(0,0,0,0.4)',
+            backdropFilter: 'blur(8px)',
+          }}
+        >
+          <button
+            type="button"
+            onClick={() => proofing.setIsFilterActive((prev) => !prev)}
+            style={{
+              background: proofing.isFilterActive ? 'var(--accent, #e60012)' : 'rgba(255,255,255,0.15)',
+              color: '#fff',
+              border: 'none',
+              padding: '6px 14px',
+              borderRadius: '20px',
+              fontSize: '0.85rem',
+              fontWeight: 500,
+              cursor: 'pointer',
+            }}
+          >
+            {proofing.isFilterActive ? 'Show All' : `❤️ ${proofing.favorites.size} Selected`}
+          </button>
+          <button
+            type="button"
+            onClick={() => proofing.setIsModalOpen(true)}
+            style={{
+              background: 'none',
+              border: 'none',
+              color: 'inherit',
+              fontSize: '0.85rem',
+              fontWeight: 500,
+              cursor: 'pointer',
+              textDecoration: 'underline',
+            }}
+          >
+            Share & Export
+          </button>
+        </div>
+      )}
+
+      <ProofingModal />
+
       {lightboxIndex !== null && (
         <Lightbox
-          assets={assets}
+          assets={displayedAssets}
           currentIndex={lightboxIndex}
           onClose={closeLightbox}
           onNext={goNext}
           onPrev={goPrev}
+          watermark={watermark}
         />
       )}
     </>
   );
 }
+
+export function PhotoGrid(props: PhotoGridProps) {
+  const albumTokens = useMemo(() => props.assets.map((a) => a.id), [props.assets]);
+
+  return (
+    <ProofingProvider albumTokens={albumTokens}>
+      <PhotoGridInner {...props} />
+    </ProofingProvider>
+  );
+}