Clean up platform banner tone and Admin Preferences controls - PR_26167_190-platform-banner-ux-cleanup

Author: ToolboxAid

admin/platform-settings.html

@@ -39,29 +39,6 @@ <h2>Admin</h2>
                                     <a class="btn btn--compact primary" aria-current="page" href="/admin/platform-settings.html">Platform Settings</a>
                                 </nav>
                             </details>
-                            <details class="vertical-accordion" open>
-                                <summary>Banner Controls</summary>
-                                <div class="accordion-body content-stack">
-                                    <label class="field-inline">
-                                        <input type="checkbox" data-platform-banner-active>
-                                        <span>Show banner</span>
-                                    </label>
-                                    <label class="field-group">Notice kind
-                                        <select data-platform-banner-kind>
-                                            <option value="general">General notice</option>
-                                            <option value="temporary-data">Temporary data notice</option>
-                                            <option value="outage">Outage notice</option>
-                                        </select>
-                                    </label>
-                                    <label class="field-group">Tone
-                                        <select data-platform-banner-tone>
-                                            <option value="info">Info</option>
-                                            <option value="warning">Warning</option>
-                                            <option value="danger">Urgent</option>
-                                        </select>
-                                    </label>
-                                </div>
-                            </details>
                         </div>
                     </aside>
                     <div data-tool-display-mode data-asset-root="assets/theme-v2/images" data-tool-slug="admin-platform-settings" data-tool-icon-src="assets/theme-v2/images/image-missing.svg" data-tool-character-src="assets/theme-v2/images/image-missing.svg"></div>
@@ -74,10 +51,30 @@ <h2 id="admin-platform-settings-title">Platform Banner</h2>
                         <label class="field-group">Banner message
                             <textarea data-platform-banner-message maxlength="240" rows="5"></textarea>
                         </label>
-                        <div class="callout" data-platform-banner-preview role="status">No active banner.</div>
-                        <div class="content-cluster">
-                            <button class="btn primary" type="button" data-platform-banner-save>Save Banner</button>
+                        <div class="content-stack content-stack--compact">
+                            <label class="field-inline">
+                                <input type="checkbox" data-platform-banner-active>
+                                <span>Show banner</span>
+                            </label>
+                            <label class="field-group">Notice kind
+                                <select data-platform-banner-kind>
+                                    <option value="general">General notice</option>
+                                    <option value="temporary-data">Temporary data notice</option>
+                                    <option value="outage">Outage notice</option>
+                                </select>
+                            </label>
+                            <label class="field-group">Tone
+                                <select data-platform-banner-tone>
+                                    <option value="info">Info</option>
+                                    <option value="warning">Warning</option>
+                                    <option value="danger">Urgent</option>
+                                </select>
+                            </label>
+                            <div class="content-cluster">
+                                <button class="btn primary" type="button" data-platform-banner-save>Save Banner</button>
+                            </div>
                         </div>
+                        <div class="platform-banner-preview platform-banner--info" data-platform-banner-preview role="status">No active banner.</div>
                     </section>
                     <aside class="tool-column tool-group-platform">
                         <div class="tool-column-header">

assets/theme-v2/css/status.css

@@ -46,24 +46,74 @@
   width: var(--container-width);
   margin: var(--space-0) auto;
   padding: var(--space-12) var(--space-0);
-  text-align: center
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--space-10)
+}
+
+.platform-banner__kind {
+  border: var(--border-standard);
+  border-radius: var(--radius-pill);
+  color: var(--bg);
+  display: inline-flex;
+  font-weight: var(--font-weight-heavy);
+  padding: var(--space-3) var(--space-10)
 }
 
 .platform-banner__message {
   margin: var(--space-0);
   overflow-wrap: anywhere
 }
 
+.platform-banner--info {
+  background: color-mix(in srgb, var(--green) 14%, var(--panel));
+  border-bottom-color: var(--green)
+}
+
+.platform-banner--info .platform-banner__kind {
+  background: var(--green);
+  border-color: var(--green)
+}
+
 .platform-banner--warning {
   background: var(--gold-soft);
   border-bottom-color: var(--gold-border-muted)
 }
 
+.platform-banner--warning .platform-banner__kind {
+  background: var(--gold);
+  border-color: var(--gold)
+}
+
 .platform-banner--danger {
   background: color-mix(in srgb, var(--red) 14%, var(--panel));
   border-bottom-color: var(--red)
 }
 
+.platform-banner--danger .platform-banner__kind {
+  background: var(--red);
+  border-color: var(--red);
+  color: var(--white)
+}
+
+.platform-banner-preview {
+  border: var(--border-standard);
+  border-radius: var(--radius-lg);
+  color: var(--text);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--space-10);
+  min-height: var(--space-44);
+  overflow-wrap: anywhere;
+  padding: var(--space-12);
+  text-align: center
+}
+
 .swatch-label {
   border: var(--border-standard);
   border-color: var(--swatch-border);

assets/theme-v2/js/admin-platform-settings.js

@@ -16,6 +16,21 @@ class AdminPlatformSettingsController {
         this.saveButton = root.querySelector("[data-platform-banner-save]");
     }
 
+    platformBannerKindLabel(kind) {
+        if (kind === "temporary-data") {
+            return "Data notice";
+        }
+        if (kind === "outage") {
+            return "Outage";
+        }
+        return "Notice";
+    }
+
+    updatePreviewTone(tone) {
+        this.preview.classList.remove("platform-banner--info", "platform-banner--warning", "platform-banner--danger");
+        this.preview.classList.add("platform-banner--" + (["info", "warning", "danger"].includes(tone) ? tone : "info"));
+    }
+
     init() {
         if (!this.activeInput || !this.kindInput || !this.diagnostics || !this.messageInput || !this.preview || !this.status || !this.toneInput || !this.saveButton) {
             return;
@@ -62,9 +77,18 @@ class AdminPlatformSettingsController {
 
     renderPreview(banner) {
         this.preview.dataset.platformBannerPreviewTone = banner.tone || "info";
-        this.preview.textContent = banner.active && banner.message
-            ? banner.message
-            : "No active banner.";
+        this.updatePreviewTone(banner.tone);
+        if (!banner.active || !banner.message) {
+            this.preview.textContent = "No active banner.";
+            return;
+        }
+        const kind = document.createElement("span");
+        kind.className = "platform-banner__kind";
+        kind.textContent = this.platformBannerKindLabel(banner.kind);
+        const message = document.createElement("span");
+        message.className = "platform-banner__message";
+        message.textContent = banner.message;
+        this.preview.replaceChildren(kind, message);
     }
 
     load() {

assets/theme-v2/js/gamefoundry-partials.js

@@ -392,15 +392,27 @@
     function normalizedPlatformBanner(data) {
         const banner = data?.banner && typeof data.banner === "object" ? data.banner : {};
         const tone = ["info", "warning", "danger"].includes(banner.tone) ? banner.tone : "info";
+        const kind = ["general", "temporary-data", "outage"].includes(banner.kind) ? banner.kind : "general";
         return {
             active: banner.active === true,
+            kind,
             message: typeof banner.message === "string" ? banner.message.trim() : "",
             sourceTable: typeof banner.sourceTable === "string" ? banner.sourceTable : data?.sourceTable || "",
             sourceTableRowKey: typeof banner.sourceTableRowKey === "string" ? banner.sourceTableRowKey : "",
             tone
         };
     }
 
+    function platformBannerKindLabel(kind) {
+        if (kind === "temporary-data") {
+            return "Data notice";
+        }
+        if (kind === "outage") {
+            return "Outage";
+        }
+        return "Notice";
+    }
+
     async function requestPlatformBanner() {
         const response = await fetch("/api/platform-settings/banner", {
             headers: { "Accept": "application/json" },
@@ -429,10 +441,13 @@
         section.setAttribute("aria-label", "Platform notice");
         const inner = document.createElement("div");
         inner.className = "platform-banner__inner";
+        const kind = document.createElement("span");
+        kind.className = "platform-banner__kind";
+        kind.textContent = platformBannerKindLabel(banner.kind);
         const message = document.createElement("p");
         message.className = "platform-banner__message";
         message.textContent = banner.message;
-        inner.append(message);
+        inner.append(kind, message);
         section.append(inner);
         return section;
     }
@@ -442,6 +457,7 @@
             const banner = await requestPlatformBanner();
             window.GameFoundryPlatformBannerDiagnostics = {
                 active: banner.active,
+                kind: banner.kind,
                 message: banner.message,
                 sourceTable: banner.sourceTable,
                 sourceTableRowKey: banner.sourceTableRowKey
@@ -468,6 +484,7 @@
             removePlatformBanner();
             window.GameFoundryPlatformBannerDiagnostics = {
                 active: false,
+                kind: "",
                 message: "",
                 sourceTable: "",
                 sourceTableRowKey: ""

docs_build/dev/reports/PR_26167_190-platform-banner-ux-cleanup.md

@@ -0,0 +1,79 @@
+# PR_26167_190-platform-banner-ux-cleanup
+
+## Summary
+- Updated platform banner tone styling so Info uses the Theme V2 green highlight, Warning uses the existing yellow/gold highlight, and Urgent uses the red highlight.
+- Moved Banner controls into the Platform Settings center column directly under the Banner message field.
+- Retained Notice Type because it is persisted as `platform.banner.kind`; made it visibly meaningful by rendering a notice label in both the public banner and Admin preview.
+- Preserved platform-settings as the SSoT and validated save/load through the Admin platform-settings API.
+
+## Branch Validation
+- PASS: current branch is `main`.
+- Expected branch: `main`.
+
+## Requirement Checklist
+- PASS: Read `docs_build/dev/PROJECT_INSTRUCTIONS.md` before execution.
+- PASS: Hard stop branch guard satisfied on `main`.
+- PASS: Info tone uses Theme V2 green/success highlight via `var(--green)`.
+- PASS: Warning tone keeps Theme V2 yellow/gold highlight via existing gold tokens.
+- PASS: Urgent tone keeps Theme V2 red highlight via `var(--red)`.
+- PASS: Notice Type reviewed and retained because the DB/settings contract persists `platform.banner.kind`.
+- PASS: Notice Type now visibly controls the rendered notice label:
+  - `general` renders `Notice`.
+  - `temporary-data` renders `Data notice`.
+  - `outage` renders `Outage`.
+- PASS: Banner controls now appear in the center column directly under the Banner message textarea.
+- PASS: Platform settings remain the SSoT through `/api/platform-settings/banner` and `/api/admin/platform-settings/banner`.
+- PASS: No inline scripts, style blocks, or inline event handlers were added.
+- PASS: No page-local CSS was added.
+- PASS: Styling changes are limited to reusable Theme V2 `status.css` classes/tokens.
+- PASS: Full samples smoke was not run, per request.
+
+## Notice Type Decision
+- Decision: Retained.
+- Reason: `platform.banner.kind` is an existing platform-settings record written by the server seed/runtime contract.
+- Visible behavior added: Notice Type now renders a visible label in the public header/footer banner and in the Admin preview. It controls the operational label, while Tone controls the color treatment.
+- API payload decision: Retained in the Admin API payload because it remains part of the platform-settings write/read contract.
+
+## Tone Render Evidence
+- PASS: Targeted Playwright validated the live banner class for each tone:
+  - Info -> `platform-banner--info`.
+  - Warning -> `platform-banner--warning`.
+  - Urgent -> `platform-banner--danger`.
+- PASS: Targeted Playwright compared computed banner background colors and notice-label background colors and confirmed all three tones render distinctly.
+- PASS: Public active banner still renders in both required placements: under the header and above the footer.
+- PASS: Notice labels render in both placements for active banners.
+
+## Validation Lane Report
+- contract lane:
+  - PASS: `node --check assets/theme-v2/js/admin-platform-settings.js`
+  - PASS: `node --check assets/theme-v2/js/gamefoundry-partials.js`
+  - PASS: `node --check tests/playwright/tools/AdminPlatformToolsWireframes.spec.mjs`
+  - PASS: changed HTML inline script/style/event-handler guard for `admin/platform-settings.html`
+  - PASS: `git diff --check`
+- integration lane:
+  - PASS: `npx playwright test tests/playwright/tools/AdminPlatformToolsWireframes.spec.mjs --grep "Platform Settings Admin wireframe|Platform banner renders|Platform banner tones|Platform Settings Admin controls" --workers=1`
+  - PASS: Playwright verified save/load through the Admin Preferences service route.
+  - PASS: Playwright verified Banner controls are under the Banner message field in the center column.
+  - PASS: Playwright verified Notice Type label rendering in the public banner and Admin preview.
+- runtime lane:
+  - PASS: live DEV API roundtrip read current platform banner, wrote a temporary validation banner, read it back from `platform_settings`, and restored the original banner.
+  - PASS: live read-back matched validation payload.
+  - PASS: live restore matched original payload.
+  - PASS: live write reported `recordsWritten: 4` and `sourceTable: platform_settings`.
+- skipped lanes:
+  - SKIP: full samples smoke, per request and because this PR only affects Platform Settings banner UX and targeted shared partial rendering.
+
+## Manual Validation Notes
+- Admin Preferences/Platform Settings page loads with Banner message first, then Show banner, Notice kind, Tone, and Save Banner controls in the center column.
+- Preview now shows the Notice Type label before the message when active.
+- Public banner now shows the same Notice Type label under the header and above the footer.
+- Live DEV API validation temporarily wrote `PR190 validation banner` and restored the original platform banner state.
+- No secrets or `.env.local` changes are included.
+
+## Playwright V8 Coverage
+- PASS: `docs_build/dev/reports/playwright_v8_coverage_report.txt` refreshed from the targeted Playwright run.
+- PASS: PR190 browser runtime files were collected:
+  - `(74%) assets/theme-v2/js/gamefoundry-partials.js - executed lines 750/750; executed functions 49/66`
+  - `(100%) assets/theme-v2/js/admin-platform-settings.js - executed lines 112/112; executed functions 17/17`
+- WARN: the shared coverage helper also lists HEAD-diff advisory entries from previous committed work; those are not PR190 worktree changes and remain advisory only.
+

docs_build/dev/reports/codex_changed_files.txt

@@ -1,38 +1,10 @@
-account/create-account.html
-account/index.html
-account/lost-password.html
-account/password-reset.html
-account/sign-in.html
-account/user-controls.html
-admin/controls.html
-admin/db-viewer.html
-admin/design-system.html
-admin/environments.html
-admin/game-migration.html
-admin/grouping-colors.html
 admin/platform-settings.html
-admin/site-settings.html
-admin/site-setup.html
-admin/tool-votes.html
-admin/users.html
+assets/theme-v2/css/status.css
+assets/theme-v2/js/admin-platform-settings.js
 assets/theme-v2/js/gamefoundry-partials.js
-assets/theme-v2/partials/footer.html
-assets/theme-v2/partials/header-nav.html
-docs_build/database/dml/account.sql
-docs_build/database/seed/account.json
 docs_build/dev/reports/codex_changed_files.txt
 docs_build/dev/reports/codex_review.diff
 docs_build/dev/reports/coverage_changed_js_guardrail.txt
 docs_build/dev/reports/playwright_v8_coverage_report.txt
-docs_build/dev/reports/PR_26167_189-owner-role-branding-and-footer-banner.md
-index.html
-src/dev-runtime/admin/header-nav.local.html
-src/dev-runtime/admin/notes.html
-src/dev-runtime/persistence/mock-db-store.js
-src/dev-runtime/seed/seed-db-keys.mjs
-src/dev-runtime/seed/server-seed-loader.mjs
-src/dev-runtime/server/local-api-router.mjs
-src/dev-runtime/testing/supabase-dev-creator-identity-seed-sync.mjs
-tests/dev-runtime/SupabaseDevCreatorIdentitySeedSync.test.mjs
+docs_build/dev/reports/PR_26167_190-platform-banner-ux-cleanup.md
 tests/playwright/tools/AdminPlatformToolsWireframes.spec.mjs
-tests/playwright/tools/LoginSessionMode.spec.mjs