feat(slideshow): guest-scannable share-link QR overlay (#848)

* feat(slideshow): guest-scannable share-link QR overlay (#837)

- Global settings (Settings → Slideshow): slideshow_qr_enabled/position/
  opacity/size — same option shape and cascade as the watermark.
- Per-event tri-state show_qr (migration 163): NULL inherits the global,
  true/false force on/off; editable in the per-event slideshow card.
- State endpoint ships the QR as a PNG data URI (cached per share URL —
  the 3s projector poll never re-encodes), so the kiosk needs no QR lib
  and no extra authenticated request.
- Kiosk renders the QR in a white padded corner box so it stays
  scannable on any photo.
- i18n: en + de (the slideshow namespace has no other locales yet).

* fix(slideshow): persist per-event QR override, show QR on empty shows, bound the QR cache (codex review of #848)

- OverviewTab never passed event.show_qr into the settings card (and the
  Event type lacked the field), so a stored true/false override always
  displayed as 'inherit' and the next save silently reset it to NULL.
- The QR overlay was nested inside the photos.length > 0 branch — an
  empty or category-filtered live gallery showed only 'Waiting for
  photos', exactly when 'scan to add the first photos' matters most.
  Now rendered for any running show.
- slideshowQrCache: insertion-order eviction at 50 entries — rotated
  tokens and past events no longer accumulate base64 PNGs forever.

* fix(slideshow): derive the QR origin from the kiosk request when the base is loopback (codex review of #848, round 2)

With the compose-default FRONTEND_URL=http://localhost:3000 (or no base
configured) the overlay QR sent scanning phones to their own localhost.
The state poll comes from the kiosk browser itself, so its Host header +
protocol (trust proxy is configured) are exactly the public origin
guests can reach — used whenever the configured base is missing or
loopback. Mirrors the ?origin= fallback #847 uses for the admin-side
QR downloads.

* fix(slideshow): kiosk passes its origin for the QR fallback (codex review of #848, round 3)

req.get('host') is not the browser origin behind the standard proxies —
frontend/nginx.conf forwards $host with the port stripped, so a compose
LAN deployment on :3000 encoded port 80. The kiosk now sends
window.location.origin with the session/state calls (validated
server-side, same pattern as #847's admin downloads); the Host-derived
origin remains as second fallback.

* fix(slideshow): reject loopback kiosk origins, throttle QR regeneration per event (codex review of #848, confirmation round)

- A loopback window.location.origin from the kiosk is no more
  guest-reachable than the loopback base it would replace — rejected;
  when no reachable URL remains the overlay is suppressed entirely (no
  QR beats a QR that sends phones to their own localhost). New test
  pins the suppression.
- The QR cache is keyed by event id with a 60s regeneration throttle:
  the origin is caller-influenced when the base is loopback, so
  URL-keyed caching let a slideshow-link holder force a fresh
  QRCode.toDataURL per request via unique origins — a cheap CPU
  exhaustion path. Encode rate is now bounded per event regardless of
  input. QR margin also raised to the 4-module spec quiet zone,
  matching #847.

* fix(slideshow): never serve a mismatched cached QR + single-flight encoding (codex review of #848, final round)

- A slideshow-token holder could poison the projector's QR: an
  attacker-origin entry cached per event was served to the legitimate
  kiosk for the rest of the throttle window. A cached artifact is now
  only served when its URL matches the request; mismatches inside the
  window suppress the overlay briefly instead of showing foreign
  content.
- Cold-cache stampede closed: concurrent polls share one in-flight
  encode promise instead of each scheduling a 512px render.

Rejected from the same round (false positive, verified empirically):
the loopback regex claim — /^https?:\/\/(localhost|127\.)/ matches
'http://localhost:3000' and '127.0.0.1:port' just fine (no trailing
slash required), and the suppression test runs green.

frontend/src/components/admin/SlideshowGlobalDefaultsCard.tsx

@@ -38,6 +38,10 @@ const DEFAULTS: SlideshowGlobalDefaults = {
   slideshow_watermark_opacity: 60,
   slideshow_watermark_style: 'white',
   slideshow_watermark_size: 12,
+  slideshow_qr_enabled: false,
+  slideshow_qr_position: 'bottom-left',
+  slideshow_qr_opacity: 90,
+  slideshow_qr_size: 14,
 };
 
 const inputClass =
@@ -65,6 +69,10 @@ export const SlideshowGlobalDefaultsCard: React.FC = () => {
         slideshow_watermark_opacity: s.slideshow_watermark_opacity ?? DEFAULTS.slideshow_watermark_opacity,
         slideshow_watermark_style: s.slideshow_watermark_style ?? DEFAULTS.slideshow_watermark_style,
         slideshow_watermark_size: s.slideshow_watermark_size ?? DEFAULTS.slideshow_watermark_size,
+        slideshow_qr_enabled: s.slideshow_qr_enabled ?? DEFAULTS.slideshow_qr_enabled,
+        slideshow_qr_position: s.slideshow_qr_position ?? DEFAULTS.slideshow_qr_position,
+        slideshow_qr_opacity: s.slideshow_qr_opacity ?? DEFAULTS.slideshow_qr_opacity,
+        slideshow_qr_size: s.slideshow_qr_size ?? DEFAULTS.slideshow_qr_size,
       });
     }).catch(() => { /* keep defaults */ });
     return () => { cancelled = true; };
@@ -256,6 +264,69 @@ export const SlideshowGlobalDefaultsCard: React.FC = () => {
         )}
         </div>
 
+        {/* Share-link QR overlay (#837) */}
+        <div className="pt-2 border-t border-neutral-200 dark:border-neutral-700">
+        <label className="flex items-start gap-2">
+          <input
+            type="checkbox"
+            className="mt-1 w-4 h-4 text-accent border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500"
+            checked={val.slideshow_qr_enabled}
+            onChange={(e) => setVal({ ...val, slideshow_qr_enabled: e.target.checked })}
+          />
+          <div>
+            <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+              {t('slideshow.qrToggle', 'Gallery QR code')}
+            </span>
+            <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
+              {t('slideshow.qrDescription', 'Show the gallery link as a QR code so guests can scan it straight off the screen.')}
+            </p>
+          </div>
+        </label>
+
+        {val.slideshow_qr_enabled && (
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mt-3">
+            <div>
+              <label className={labelClass}>{t('slideshow.watermarkPositionLabel', 'Position')}</label>
+              <select
+                value={val.slideshow_qr_position}
+                onChange={(e) => setVal({ ...val, slideshow_qr_position: e.target.value as SlideshowGlobalDefaults['slideshow_qr_position'] })}
+                className={inputClass}
+              >
+                {SLIDESHOW_WATERMARK_POSITIONS.map((pos) => (
+                  <option key={pos} value={pos}>
+                    {t(`slideshow.watermarkPosition.${pos}`, pos)}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className={labelClass}>{t('slideshow.watermarkOpacityLabel', 'Opacity (%)')}</label>
+              <input
+                type="number"
+                min={0}
+                max={100}
+                step={5}
+                value={val.slideshow_qr_opacity}
+                onChange={(e) => setVal({ ...val, slideshow_qr_opacity: Math.min(100, Math.max(0, parseInt(e.target.value, 10) || 0)) })}
+                className={inputClass}
+              />
+            </div>
+            <div>
+              <label className={labelClass}>{t('slideshow.watermarkSizeLabel', 'Size (% of screen)')}</label>
+              <input
+                type="number"
+                min={5}
+                max={40}
+                step={1}
+                value={val.slideshow_qr_size}
+                onChange={(e) => setVal({ ...val, slideshow_qr_size: Math.min(40, Math.max(5, parseInt(e.target.value, 10) || 14)) })}
+                className={inputClass}
+              />
+            </div>
+          </div>
+        )}
+        </div>
+
         <Button variant="outline" size="md" leftIcon={<Save className="w-4 h-4" />} onClick={save} isLoading={saving}>
           {t('common.save', 'Save')}
         </Button>

frontend/src/components/admin/SlideshowSettingsCard.tsx

@@ -36,6 +36,7 @@ export interface SlideshowSettingsCardProps {
     show_transition?: string;
     show_transition_ms?: number;
     show_watermark?: boolean | null;
+    show_qr?: boolean | null;
     show_colorfilter?: string;
     show_order?: string;
     show_category_id?: number | null;
@@ -55,6 +56,7 @@ function styleFromInitial(initial: SlideshowSettingsCardProps['initial']): Slide
     transition: (initial.show_transition as SlideshowStyle['transition']) ?? DEFAULT_SLIDESHOW_STYLE.transition,
     transition_ms: initial.show_transition_ms ?? DEFAULT_SLIDESHOW_STYLE.transition_ms,
     watermark: watermarkMode(initial.show_watermark),
+    qr: watermarkMode(initial.show_qr),
     colorfilter: (initial.show_colorfilter as SlideshowStyle['colorfilter']) ?? DEFAULT_SLIDESHOW_STYLE.colorfilter,
     order: (initial.show_order as SlideshowStyle['order']) ?? DEFAULT_SLIDESHOW_STYLE.order,
     category_id: initial.show_category_id ?? null,
@@ -142,6 +144,7 @@ export const SlideshowSettingsCard: React.FC<SlideshowSettingsCardProps> = ({
         // Tri-state → null (inherit global) / true / false. The watermark LOOK
         // is global-only (Settings → Slideshow); we only send the mode here.
         show_watermark: style.watermark === 'inherit' ? null : style.watermark === 'on',
+        show_qr: style.qr === 'inherit' ? null : style.qr === 'on',
         show_colorfilter: style.colorfilter,
         show_order: style.order,
         show_category_id: style.category_id,

frontend/src/components/admin/SlideshowStyleFields.tsx

@@ -149,6 +149,25 @@ export const SlideshowStyleFields: React.FC<SlideshowStyleFieldsProps> = ({ valu
           {t('slideshow.watermarkModeHint', 'The logo, position, opacity, style and size are configured under Settings → Slideshow.')}
         </p>
       </div>
+
+      {/* QR overlay (#837) — MODE only, same pattern as the watermark. */}
+      <div className="pt-2 border-t border-neutral-200 dark:border-neutral-700">
+        <label className={labelClass}>{t('slideshow.qrToggle', 'Gallery QR code')}</label>
+        <select
+          value={value.qr}
+          onChange={(e) => set({ qr: e.target.value as SlideshowStyle['qr'] })}
+          className={inputClass}
+        >
+          {SLIDESHOW_WATERMARK_MODES.map((m) => (
+            <option key={m} value={m}>
+              {t(`slideshow.watermarkMode.${m}`, m === 'inherit' ? 'Use global default' : m === 'on' ? 'On' : 'Off')}
+            </option>
+          ))}
+        </select>
+        <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
+          {t('slideshow.qrModeHint', 'Position, size and opacity are configured under Settings → Slideshow.')}
+        </p>
+      </div>
     </div>
   );
 };