feat(theming): brand-asset overrides and a cached, settings-aware HTML shell

Phase 5 of docs/website/THEMING_AND_NAV.md: uploaded logo/hero/favicon
overrides on top of the BRAND_* env defaults, delivered through an HTML
shell that is no longer built once at boot.

- utils/htmlShell.js owns the shell lifecycle: rendered lazily, cached per
  process, invalidated on a brand_assets/theme_visual write with a 5-minute
  TTL so other workers converge. A settings-read failure renders the
  env-only shell and caches that, so a DB outage is not a failing query per
  page view, and with no rows the output is byte-identical to what app.js
  served before.
- POST /admin/settings/brand-asset/:slot uploads one asset and writes the
  row in the same call, so an upload never leaves an unreferenced file. It
  reuses the shared multer allowlist and only tightens it per slot: favicons
  are PNG-only and capped at 512 KB, logos at 1 MB, heroes at 8 MB. Refused
  files are unlinked before the response.
- utils/brandAssets.js constrains a stored asset to a same-origin path under
  /uploads, /brand or /assets — these are the only settings values written
  straight into the page as a URL. Strict on write, forgiving on read.
- The shell also carries the resolved theme as a <style id="theme-boot">
  block, removing the first-paint flash phases 3-4 deferred; SiteContext
  drops that block once a successful settings fetch has been applied.
- BrandLogo renders beside the MoonDot on all six shells and renders nothing
  when no logo is set, which is the shipped default.

Co-Authored-By: Claude <noreply@anthropic.com>

client/src/routes/admin/views/AppearanceAdmin.jsx

@@ -2,10 +2,11 @@ import { useEffect, useMemo, useState } from 'react'
 import { Loading, ErrorState } from '../../../components/PageState.jsx'
 import { api } from '../../../api/client.js'
 import { useSite } from '../../../contexts/SiteContext.jsx'
+import BrandAssetsPanel from './BrandAssetsPanel.jsx'
 
-// Admin · Appearance — the theme half of docs/website/THEMING_AND_NAV.md
-// (phases 3-4). Brand asset uploads and the nav builder are phases 5 and 7 and
-// get their own screens.
+// Admin · Appearance — the theme and brand-asset halves of
+// docs/website/THEMING_AND_NAV.md (phases 3-5). The nav builder is phase 7 and
+// gets its own screen.
 //
 // Two things shape this form:
 //
@@ -66,6 +67,10 @@ export default function AppearanceAdmin() {
   // "this instance is using the shipped theme" note — an admin needs to be able
   // to tell "never themed" from "themed to look like the default".
   const [stored, setStored] = useState(false)
+  // The brand-asset overrides, read in the same settings fetch and then owned by
+  // the panel below (its uploads save on their own, so it does not share this
+  // screen's Save button).
+  const [assets, setAssets] = useState(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState('')
   const [busy, setBusy] = useState(false)
@@ -88,6 +93,15 @@ export default function AppearanceAdmin() {
           parsed = null
         }
         setStored(Boolean(all.theme_visual))
+        // Same fail-safe parse as the theme: a malformed row reads as absent, so
+        // the panel shows the env defaults rather than an error.
+        let parsedAssets = null
+        try {
+          parsedAssets = all.brand_assets ? JSON.parse(all.brand_assets) : null
+        } catch {
+          parsedAssets = null
+        }
+        setAssets(parsedAssets && typeof parsedAssets === 'object' && !Array.isArray(parsedAssets) ? parsedAssets : {})
         if (parsed && typeof parsed === 'object') {
           setPreset(parsed.preset || 'runic-gateway')
           setCustom({
@@ -340,6 +354,9 @@ export default function AppearanceAdmin() {
         The accent reaches the mobile app and the Discord bot too — both theme themselves from this
         site’s public branding.
       </p>
+
+      {/* ── Brand assets ───────────────────────────────────────── */}
+      <BrandAssetsPanel initial={assets || {}} />
     </section>
   )
 }