From 60bcd589c08a1292c3682e0fb44da904ebaa7af8 Mon Sep 17 00:00:00 2001
From: vickydotbat <vickydotbat@tutamail.com>
Date: Thu, 16 Jul 2026 18:13:49 +0000
Subject: [PATCH] Set wiki overlay scrim tokens to theme charcoal (#26)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Companion to sow-nodebb-plugin-wiki#22: the plugin now exposes `--wiki-scrim`/`--wiki-scrim-strong` for drawer and dialog backdrops. Override them from `--wg-bg-deep` so overlays match the plum/gold palette instead of the plugin's slate-blue defaults. Verified in the dev forum bundle.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Reviewed-on: https://git.westgate.pw/ShadowsOverWestgate/sow-nodebb-theme/pulls/26
Co-authored-by: vickydotbat <vickydotbat@tutamail.com>
Co-committed-by: vickydotbat <vickydotbat@tutamail.com>
---
 custom_pages/westgate-pages/topbar-custom.js | 224 -------------------
 scss/westgate/_wiki-prose.scss               |   4 +
 2 files changed, 4 insertions(+), 224 deletions(-)
 delete mode 100644 custom_pages/westgate-pages/topbar-custom.js

diff --git a/custom_pages/westgate-pages/topbar-custom.js b/custom_pages/westgate-pages/topbar-custom.js
deleted file mode 100644
index 4f18c2b..0000000
--- a/custom_pages/westgate-pages/topbar-custom.js
+++ /dev/null
@@ -1,224 +0,0 @@
-/* ============================================================================
-   SHADOWS OVER WESTGATE — top bar controller
-   ----------------------------------------------------------------------------
-   Paste into ACP -> Settings -> Custom Content -> "Custom JavaScript".
-   (In the live theme this can instead live in the theme's client-side bundle.)
-
-   WHY THIS FILE EXISTS
-   - The static page (join-the-team.html) needs NO JavaScript; it is pure
-     HTML/CSS (the only inline bit is an <img onerror> fallback). Home lives
-     in the westgate-pages plugin now (templates/home.tpl).
-   - The TOP BAR needs this small controller for: Forums mega-menu, inline
-     search, the mobile burger/drawer, and the drawer's Forums accordion.
-
-   NODEBB-SPECIFIC NOTES
-   - NodeBB is a single-page app: it swaps #content on navigation instead of
-     reloading. So we DON'T bind to specific nodes on DOMContentLoaded — we use
-     event delegation on `document`, which keeps working across page changes and
-     even if the header is re-rendered.
-   - Inline <script> inside an HTML widget is sanitised/unreliable, which is the
-     other reason the logic lives here rather than in the pasted markup.
-   - The live notification / chat / user dropdowns come from Harmony and carry
-     their OWN JavaScript. If you keep those, you do NOT need this script to open
-     them — only the Forums menu, search, and mobile drawer below.
-   - The preview-only member/guest switch from top-bar.html is intentionally
-     omitted; in production the cluster is chosen server-side ({{{ if loggedIn }}}).
-   ========================================================================== */
-(function () {
-  'use strict';
-
-  function bar() { return document.querySelector('.wg-topbar'); }
-
-  function closeMenus(exceptKey) {
-    var b = bar();
-    if (!b) return;
-    b.querySelectorAll('[data-wg-panel]').forEach(function (p) {
-      if (p.getAttribute('data-wg-panel') !== exceptKey) p.classList.remove('is-open');
-    });
-    b.querySelectorAll('[data-wg-menu]').forEach(function (t) {
-      if (t.getAttribute('data-wg-menu') !== exceptKey) t.setAttribute('aria-expanded', 'false');
-    });
-  }
-
-  function closeSearch() {
-    var b = bar();
-    if (!b) return;
-    var input = b.querySelector('[data-wg-search-input]');
-    if (input && input.value.trim() !== '') return; // keep open if the user typed
-    b.classList.remove('is-searching');
-  }
-
-  var CHECK_SVG = '<svg class="chk" width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M2.5 7l3 3 5-6.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
-  function applyPresence(key) {
-    var b = bar();
-    if (!b) return;
-    var row = b.querySelector('[data-presence="' + key + '"]');
-    if (!row) return;
-    b.setAttribute('data-presence', key); // switches the --tb-presence avatar ring
-    b.querySelectorAll('[data-presence]').forEach(function (x) {
-      x.classList.remove('is-active');
-      var c = x.querySelector('.chk'); if (c) c.remove();
-    });
-    row.classList.add('is-active');
-    if (!row.querySelector('.chk')) row.insertAdjacentHTML('beforeend', CHECK_SVG);
-  }
-  function restorePresence() {
-    try {
-      var saved = localStorage.getItem('wg-topbar-presence');
-      if (saved) applyPresence(saved);
-    } catch (_) {}
-  }
-
-  // ---- one delegated click handler for the whole bar ----
-  document.addEventListener('click', function (e) {
-    var b = bar();
-    if (!b) return;
-
-    // dropdown trigger (Forums / and any future data-wg-menu)
-    var trigger = e.target.closest && e.target.closest('[data-wg-menu]');
-    if (trigger && b.contains(trigger)) {
-      e.stopPropagation();
-      var key = trigger.getAttribute('data-wg-menu');
-      var panel = b.querySelector('[data-wg-panel="' + key + '"]');
-      var open = panel && panel.classList.contains('is-open');
-      closeMenus(open ? null : key);
-      if (panel) panel.classList.toggle('is-open', !open);
-      trigger.setAttribute('aria-expanded', String(!open));
-      return;
-    }
-
-    // clicks inside an open panel shouldn't close it
-    if (e.target.closest && e.target.closest('[data-wg-panel]')) {
-      e.stopPropagation();
-      return;
-    }
-
-    // search toggle
-    var searchBtn = e.target.closest && e.target.closest('[data-wg-search]');
-    if (searchBtn && b.contains(searchBtn)) {
-      e.stopPropagation();
-      b.classList.add('is-searching');
-      closeMenus(null);
-      var input = b.querySelector('[data-wg-search-input]');
-      if (input) setTimeout(function () { input.focus(); }, 60);
-      return;
-    }
-
-    // mobile burger
-    var burger = e.target.closest && e.target.closest('[data-wg-burger]');
-    if (burger && b.contains(burger)) {
-      e.stopPropagation();
-      var drawerOpen = b.classList.toggle('is-drawer');
-      burger.setAttribute('aria-expanded', String(drawerOpen));
-      return;
-    }
-
-    // drawer Forums accordion
-    var sub = e.target.closest && e.target.closest('[data-wg-drawer-sub]');
-    if (sub && b.contains(sub)) {
-      var subOpen = sub.getAttribute('aria-expanded') === 'true';
-      sub.setAttribute('aria-expanded', String(!subOpen));
-      return;
-    }
-
-    // presence / status selector (drives the avatar ring). LIVE: also POST the
-    // new status to NodeBB (e.g. socket.emit('user.setStatus', ...)) so it
-    // persists server-side; here it persists in localStorage so it sticks.
-    var presence = e.target.closest && e.target.closest('[data-presence]');
-    if (presence && b.contains(presence)) {
-      e.stopPropagation();
-      var key = presence.getAttribute('data-presence');
-      applyPresence(key);
-      try { localStorage.setItem('wg-topbar-presence', key); } catch (_) {}
-      return;
-    }
-
-    // ----- pop-out actions -----
-    // NOTE: in the LIVE theme the pop-outs ARE Harmony's partials
-    // (drafts.tpl / notifications.tpl / chats.tpl), and these actions are
-    // handled by NodeBB core JS (component="notifications/list", drafts/delete,
-    // chats/mark-all-read, etc). The handlers below only drive THIS preview's
-    // static rows — drop them when wiring the real includes.
-
-    // notification filter tabs
-    var tab = e.target.closest && e.target.closest('.wg-pop__tab');
-    if (tab && b.contains(tab)) {
-      e.stopPropagation();
-      tab.parentElement.querySelectorAll('.wg-pop__tab').forEach(function (t) { t.classList.remove('is-active'); });
-      tab.classList.add('is-active');
-      var unreadOnly = tab.getAttribute('data-filter') === 'unread';
-      var nlist = tab.closest('[data-wg-panel]').querySelector('[data-component="notifications/list"]');
-      nlist.querySelectorAll('.wg-notif').forEach(function (row) {
-        var hide = unreadOnly && !row.classList.contains('unread');
-        row.style.display = hide ? 'none' : '';
-        var sep = row.nextElementSibling;
-        if (sep && sep.classList.contains('wg-pop__sep')) sep.style.display = hide ? 'none' : '';
-      });
-      return;
-    }
-
-    // mark-all-read
-    var markBtn = e.target.closest && e.target.closest('.wg-pop__btn:not(.wg-pop__btn--primary)');
-    if (markBtn && b.contains(markBtn)) {
-      e.stopPropagation();
-      var mPanel = markBtn.closest('[data-wg-panel]');
-      mPanel.querySelectorAll('.unread').forEach(function (r) { r.classList.remove('unread'); });
-      mPanel.querySelectorAll('.wg-notif__dot').forEach(function (d) { d.remove(); });
-      var mKey = mPanel.getAttribute('data-wg-panel');
-      var mBadge = b.querySelector('.wg-topbar__badge[data-count="' + mKey + '"]');
-      if (mBadge) mBadge.style.display = 'none';
-      var tc = mPanel.querySelector('.wg-pop__tabcount'); if (tc) tc.textContent = '0';
-      return;
-    }
-
-    // draft delete
-    var del = e.target.closest && e.target.closest('.wg-draft__del');
-    if (del && b.contains(del)) {
-      e.preventDefault(); e.stopPropagation();
-      var dRow = del.closest('.wg-draft');
-      var dSep = dRow.nextElementSibling || dRow.previousElementSibling;
-      if (dSep && dSep.classList && dSep.classList.contains('wg-pop__sep')) dSep.remove();
-      dRow.remove();
-      var dList = b.querySelector('[data-component="drafts/list"]');
-      var dBadge = b.querySelector('.wg-topbar__badge[data-count="drafts"]');
-      var left = dList.querySelectorAll('.wg-draft').length;
-      if (dBadge) dBadge.textContent = left;
-      if (left === 0) {
-        if (dBadge) dBadge.style.display = 'none';
-        var empty = dList.querySelector('.wg-pop__empty'); if (empty) empty.hidden = false;
-      }
-      return;
-    }
-
-    // outside click: close everything that floats
-    closeMenus(null);
-    closeSearch();
-  });
-
-  // ---- Escape closes everything ----
-  document.addEventListener('keydown', function (e) {
-    if (e.key !== 'Escape') return;
-    var b = bar();
-    if (!b) return;
-    closeMenus(null);
-    b.classList.remove('is-searching');
-    b.classList.remove('is-drawer');
-    var burger = b.querySelector('[data-wg-burger]');
-    if (burger) burger.setAttribute('aria-expanded', 'false');
-  });
-
-  // ---- close the mobile drawer after an in-app navigation ----
-  if (window.$ && typeof $.fn === 'object') {
-    $(window).on('action:ajaxify.end', function () {
-      var b = bar();
-      if (!b) return;
-      b.classList.remove('is-drawer', 'is-searching');
-      closeMenus(null);
-      restorePresence();
-    });
-  }
-
-  // ---- restore the saved status on first load ----
-  if (document.readyState !== 'loading') restorePresence();
-  else document.addEventListener('DOMContentLoaded', restorePresence);
-})();
diff --git a/scss/westgate/_wiki-prose.scss b/scss/westgate/_wiki-prose.scss
index a9aaeb4..c3d647f 100644
--- a/scss/westgate/_wiki-prose.scss
+++ b/scss/westgate/_wiki-prose.scss
@@ -21,6 +21,10 @@
 		rgba(18, 16, 23, 0.98) 100%
 	);
 	--wiki-chrome-warning-border: rgba(194, 163, 90, 0.45);
+	/* Backdrop scrims (drawer/dialog overlays): deep charcoal instead of the
+	   plugin's slate-blue defaults, so overlays stay warm against the theme. */
+	--wiki-scrim: rgba(9, 8, 11, 0.55);
+	--wiki-scrim-strong: rgba(9, 8, 11, 0.8);
 	--wiki-chrome-danger: var(--wg-red);
 	--wiki-chrome-danger-hover: #c55a5f;
 	--wiki-redlink-color: #c06a6e;