From 2de99a12e9c88f544edbe62fdc408eb6f4be5af1 Mon Sep 17 00:00:00 2001
From: ScreenTinker <hello@screentinker.com>
Date: Tue, 9 Jun 2026 11:43:42 -0500
Subject: [PATCH] fix(branding): no ScreenTinker default flash on load/switch
 (#38)

The logo/title/theme/favicon are static 'ScreenTinker' in index.html, and
applyBranding() only overrode them AFTER an async /api/white-label fetch - that
network delay was the flash, on every load and on switch (which reloads).

Now applyBranding caches the resolved white-label per workspace (keyed by the
JWT's current_workspace_id), and a tiny same-origin brand-prime.js loads
render-blocking right after the logo - so it applies the cached colors/name/
title/favicon/custom-css BEFORE first paint. CSP-safe (external 'self' script,
not inline). applyBranding still runs to refresh + re-cache. First-ever visit to
an uncached branded workspace still shows the default once; every load after is
flash-free.
---
 frontend/index.html        |  4 +++-
 frontend/js/brand-prime.js | 44 ++++++++++++++++++++++++++++++++++++++
 frontend/js/branding.js    | 14 +++++++++++-
 3 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 frontend/js/brand-prime.js

diff --git a/frontend/index.html b/frontend/index.html
index 0f81392..cec2974 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -29,8 +29,10 @@
           <line x1="8" y1="21" x2="16" y2="21"/>
           <line x1="12" y1="17" x2="12" y2="21"/>
         </svg>
-        <span>ScreenTinker</span>
+        <span id="brandName">ScreenTinker</span>
       </div>
+      <!-- #38: apply cached white-label before first paint (no ScreenTinker flash) -->
+      <script src="/js/brand-prime.js"></script>
       <div class="workspace-switcher" id="workspaceSwitcher"></div>
     </div>
     <ul class="nav-links">
diff --git a/frontend/js/brand-prime.js b/frontend/js/brand-prime.js
new file mode 100644
index 0000000..309ed93
--- /dev/null
+++ b/frontend/js/brand-prime.js
@@ -0,0 +1,44 @@
+// Render-blocking branding primer (#38). Loaded as a synchronous same-origin
+// <script> right after the sidebar logo, so it runs DURING parse, before first
+// paint — applying the current workspace's CACHED white-label so the page paints
+// branded instead of flashing the "ScreenTinker" default. branding.js then
+// refreshes it from the server and re-writes the cache. Plain script (not a
+// module) so it's not deferred; keyed by workspace so a switch shows the right
+// brand (or the neutral default for a workspace we haven't cached yet).
+(function () {
+  try {
+    var token = localStorage.getItem('token');
+    if (!token) return;
+    var ws = 'none';
+    try {
+      var seg = token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
+      ws = (JSON.parse(atob(seg)) || {}).current_workspace_id || 'none';
+    } catch (e) { /* malformed token -> treat as no workspace */ }
+
+    var wl = JSON.parse(localStorage.getItem('rd_branding_' + ws) || 'null');
+    if (!wl) return;
+
+    var root = document.documentElement;
+    if (wl.primary_color) root.style.setProperty('--accent', wl.primary_color);
+    if (wl.bg_color) {
+      root.style.setProperty('--bg-primary', wl.bg_color);
+      var meta = document.querySelector('meta[name="theme-color"]');
+      if (meta) meta.setAttribute('content', wl.bg_color);
+    }
+    if (wl.brand_name) {
+      document.title = wl.brand_name;
+      var span = document.getElementById('brandName');
+      if (span) span.textContent = wl.brand_name;
+    }
+    if (wl.favicon_url) {
+      var links = document.querySelectorAll('link[rel="icon"], link[rel="apple-touch-icon"]');
+      for (var i = 0; i < links.length; i++) links[i].setAttribute('href', wl.favicon_url);
+    }
+    if (wl.custom_css) {
+      var s = document.createElement('style');
+      s.id = 'wl-custom-css';
+      s.textContent = wl.custom_css;
+      document.head.appendChild(s);
+    }
+  } catch (e) { /* never let branding break boot */ }
+})();
diff --git a/frontend/js/branding.js b/frontend/js/branding.js
index 3525132..b4e09f4 100644
--- a/frontend/js/branding.js
+++ b/frontend/js/branding.js
@@ -6,6 +6,15 @@
 
 let applied = false;
 
+// Current workspace id from the JWT, so the branding cache (read render-blocking by
+// brand-prime.js) is keyed per workspace — a switch shows the right brand. (#38)
+function currentWorkspaceId() {
+  try {
+    const seg = localStorage.getItem('token').split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
+    return (JSON.parse(atob(seg)) || {}).current_workspace_id || 'none';
+  } catch { return 'none'; }
+}
+
 export async function applyBranding() {
   if (applied) return;
   applied = true;
@@ -21,6 +30,9 @@ export async function applyBranding() {
   } catch { return; }
   if (!wl) return;
 
+  // Cache for the next load/switch so brand-prime.js can apply it before paint.
+  try { localStorage.setItem('rd_branding_' + currentWorkspaceId(), JSON.stringify(wl)); } catch {}
+
   const root = document.documentElement;
   if (wl.primary_color) root.style.setProperty('--accent', wl.primary_color);
   if (wl.bg_color) {
@@ -31,7 +43,7 @@ export async function applyBranding() {
 
   if (wl.brand_name) {
     document.title = wl.brand_name;
-    const span = document.querySelector('.sidebar-header .logo span');
+    const span = document.getElementById('brandName');
     if (span) span.textContent = wl.brand_name;
   }