From 59eb8b75b0b043f6168cf62d4287aefa83f4057d Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sun, 3 May 2026 18:35:51 +0300
Subject: [PATCH] Move shared shell chrome into bridge

Keep the page chrome sync helpers in shell-bridge.js so React and legacy routing share one implementation.

This preserves the sidebar breadcrumb and discover download bar behavior without shadowing the legacy shell helpers in init.js.
---
 webui/README.md              |  6 ++--
 webui/index.html             |  2 +-
 webui/static/init.js         | 66 ------------------------------------
 webui/static/shell-bridge.js | 23 +++++++++++--
 4 files changed, 25 insertions(+), 72 deletions(-)

diff --git a/webui/README.md b/webui/README.md
index ea6b1005..d32587c2 100644
--- a/webui/README.md
+++ b/webui/README.md
@@ -29,12 +29,12 @@ flowchart LR
 - `webui/static/init.js`
   - boots the legacy shell
   - selects the active profile
-  - handles the old page activation flow
+  - handles the legacy page loading flow
 
 - `webui/static/shell-bridge.js`
   - owns the browser-side bridge object
   - exposes `window.SoulSyncWebShellBridge`
-  - syncs page chrome between legacy and React
+  - owns the shared page chrome and route handoff helpers
 
 - `webui/src/app/main.tsx`
   - mounts the React app
@@ -50,7 +50,7 @@ The current order in `index.html` matters:
 
 1. legacy shell scripts load first
 2. `init.js` sets up the shell runtime
-3. `shell-bridge.js` publishes the shell bridge after those helpers exist
+3. `shell-bridge.js` publishes the bridge and shared chrome helpers after the shell state exists
 4. the Vite React app is injected through `{{ vite_assets('body') }}` and boots as a module after parsing
 
 That order avoids load-time references to missing globals and keeps the React side able to react to bridge readiness events. The React entry can start fetching early, but the shell bridge and legacy globals are already available by the time the React runtime starts acting on them.
diff --git a/webui/index.html b/webui/index.html
index c65152b2..59f23372 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -234,7 +234,7 @@
                     <span class="dl-nav-badge hidden" id="dl-nav-badge">0</span>
                 </button>
                 <button class="nav-button" data-page="import">
-                    <span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></span>
+                    <span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/><polyline points="7 9 12 4 17 9"/><line x1="12" y1="4" x2="12" y2="16"/></svg></span>
                     <span class="nav-text">Import</span>
                 </button>
                 <button class="nav-button" data-page="library">
diff --git a/webui/static/init.js b/webui/static/init.js
index 50923744..b416fb83 100644
--- a/webui/static/init.js
+++ b/webui/static/init.js
@@ -266,72 +266,6 @@ function getCurrentProfileContext() {
     };
 }
 
-function getWebRouter() {
-    return window.SoulSyncWebRouter ?? null;
-}
-
-function showLegacyPage(pageId) {
-    document.querySelectorAll('.page').forEach(page => {
-        page.classList.remove('active');
-    });
-    const page = document.getElementById(`${pageId}-page`);
-    if (page) {
-        page.classList.add('active');
-    }
-    const reactHost = document.getElementById('webui-react-root');
-    if (reactHost) {
-        reactHost.classList.remove('active');
-    }
-}
-
-function setActivePageChrome(pageId) {
-    document.querySelectorAll('.nav-button').forEach(btn => {
-        btn.classList.remove('active');
-    });
-    const navButton = document.querySelector(`[data-page="${pageId}"]`);
-    if (navButton) {
-        navButton.classList.add('active');
-    } else if (pageId === 'artist-detail') {
-        // Artist detail is a Library context, so keep the sidebar anchored there.
-        const libraryBtn = document.querySelector('[data-page="library"]');
-        if (libraryBtn) {
-            libraryBtn.classList.add('active');
-        }
-    }
-    currentPage = pageId;
-    if (typeof _updateSidebarLibraryBreadcrumb === 'function') _updateSidebarLibraryBreadcrumb();
-    if (typeof _gsUpdateVisibility === 'function') _gsUpdateVisibility();
-    const downloadSidebar = document.getElementById('discover-download-sidebar');
-    if (downloadSidebar) {
-        if (pageId === 'discover') {
-            const activeDownloads = typeof discoverDownloads !== 'undefined'
-                ? Object.keys(discoverDownloads).length
-                : 0;
-            if (activeDownloads > 0 && typeof updateDiscoverDownloadBar === 'function') {
-                updateDiscoverDownloadBar();
-            }
-        } else {
-            downloadSidebar.classList.add('hidden');
-        }
-    }
-    if (window.pageParticles && window._particlesEnabled !== false) window.pageParticles.setPage(pageId);
-    if (window.workerOrbs) window.workerOrbs.setPage(pageId);
-}
-
-function showReactHost(pageId) {
-    document.querySelectorAll('.page').forEach(page => {
-        page.classList.remove('active');
-    });
-    const host = document.getElementById('webui-react-root');
-    if (host) {
-        host.classList.add('active');
-    }
-    currentPage = pageId;
-    if (typeof _gsUpdateVisibility === 'function') _gsUpdateVisibility();
-    if (window.pageParticles && window._particlesEnabled !== false) window.pageParticles.setPage(pageId);
-    if (window.workerOrbs) window.workerOrbs.setPage(pageId);
-}
-
 function activatePage(pageId, options = {}) {
     const forceReload = options.forceReload === true;
     const pageElement = document.getElementById(`${pageId}-page`);
diff --git a/webui/static/shell-bridge.js b/webui/static/shell-bridge.js
index 2dc493be..6d5e38f9 100644
--- a/webui/static/shell-bridge.js
+++ b/webui/static/shell-bridge.js
@@ -1,6 +1,5 @@
 // SoulSync shell bridge glue
-// Keep this file loaded after init.js so the legacy shell helpers it wraps
-// have already been defined.
+// Keep this file loaded after init.js so the legacy shell runtime state is ready.
 
 function getWebRouter() {
     return window.SoulSyncWebRouter ?? null;
@@ -27,9 +26,29 @@ function setActivePageChrome(pageId) {
     const navButton = document.querySelector(`[data-page="${pageId}"]`);
     if (navButton) {
         navButton.classList.add('active');
+    } else if (pageId === 'artist-detail') {
+        // Artist detail is a Library context, so keep the sidebar anchored there.
+        const libraryBtn = document.querySelector('[data-page="library"]');
+        if (libraryBtn) {
+            libraryBtn.classList.add('active');
+        }
     }
     currentPage = pageId;
+    if (typeof _updateSidebarLibraryBreadcrumb === 'function') _updateSidebarLibraryBreadcrumb();
     if (typeof _gsUpdateVisibility === 'function') _gsUpdateVisibility();
+    const downloadSidebar = document.getElementById('discover-download-sidebar');
+    if (downloadSidebar) {
+        if (pageId === 'discover') {
+            const activeDownloads = typeof discoverDownloads !== 'undefined'
+                ? Object.keys(discoverDownloads).length
+                : 0;
+            if (activeDownloads > 0 && typeof updateDiscoverDownloadBar === 'function') {
+                updateDiscoverDownloadBar();
+            }
+        } else {
+            downloadSidebar.classList.add('hidden');
+        }
+    }
     if (window.pageParticles && window._particlesEnabled !== false) window.pageParticles.setPage(pageId);
     if (window.workerOrbs) window.workerOrbs.setPage(pageId);
 }