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

@@ -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.

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">

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`);

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);
 }