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 @@
0
- Import
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);
}