diff --git a/webui/src/platform/shell/route-controllers.tsx b/webui/src/platform/shell/route-controllers.tsx index 4083c780..4eb1a8dc 100644 --- a/webui/src/platform/shell/route-controllers.tsx +++ b/webui/src/platform/shell/route-controllers.tsx @@ -5,23 +5,26 @@ import { getProfileHomePath, getShellBridge, type ShellPageId } from './bridge'; export const ROUTER_ROOT_ID = 'webui-react-root'; export const SHELL_BRIDGE_READY_EVENT = 'ss:webui-shell-bridge-ready'; +export const SHELL_PROFILE_CONTEXT_CHANGED_EVENT = 'ss:webui-profile-context-changed'; export function useShellBridge() { - const [ready, setReady] = useState(() => Boolean(getShellBridge())); + const [, setRevision] = useState(0); useEffect(() => { - const handleReady = () => { - setReady(Boolean(getShellBridge())); + const handleContextChange = () => { + setRevision((value) => value + 1); }; - handleReady(); - window.addEventListener(SHELL_BRIDGE_READY_EVENT, handleReady); + handleContextChange(); + window.addEventListener(SHELL_BRIDGE_READY_EVENT, handleContextChange); + window.addEventListener(SHELL_PROFILE_CONTEXT_CHANGED_EVENT, handleContextChange); return () => { - window.removeEventListener(SHELL_BRIDGE_READY_EVENT, handleReady); + window.removeEventListener(SHELL_BRIDGE_READY_EVENT, handleContextChange); + window.removeEventListener(SHELL_PROFILE_CONTEXT_CHANGED_EVENT, handleContextChange); }; }, []); - return ready ? getShellBridge() : null; + return getShellBridge(); } export function LegacyRouteController({ pathname }: { pathname: string }) { diff --git a/webui/src/routes/index.tsx b/webui/src/routes/index.tsx index 8a6985b2..4962ae6a 100644 --- a/webui/src/routes/index.tsx +++ b/webui/src/routes/index.tsx @@ -4,7 +4,9 @@ import { getProfileHomePath } from '@/platform/shell/bridge'; import { LegacyRouteController } from '@/platform/shell/route-controllers'; export const Route = createFileRoute('/')({ - beforeLoad: ({ context }) => { + beforeLoad: ({ context, location }) => { + if (location.pathname !== '/') return; + const bridge = context.platform.getShellBridge(); if (!bridge) return; diff --git a/webui/static/init.js b/webui/static/init.js index 20eef3e9..f7f84e63 100644 --- a/webui/static/init.js +++ b/webui/static/init.js @@ -186,6 +186,17 @@ function applyReduceEffects(enabled) { // ── Profile System ───────────────────────────────────────────── let currentProfile = null; +const PROFILE_CONTEXT_CHANGED_EVENT = 'ss:webui-profile-context-changed'; + +function notifyProfileContextChanged() { + window.dispatchEvent(new CustomEvent(PROFILE_CONTEXT_CHANGED_EVENT)); +} + +function setCurrentProfile(profile) { + currentProfile = profile; + updateProfileIndicator(); + notifyProfileContextChanged(); +} // Temporary compatibility shim until existing profile rows are migrated to // the current page ids. @@ -391,8 +402,7 @@ async function initProfileSystem() { const currentRes = await fetch('/api/profiles/current'); const currentData = await currentRes.json(); if (currentData.success && currentData.profile) { - currentProfile = currentData.profile; - updateProfileIndicator(); + setCurrentProfile(currentData.profile); // Check if launch PIN is required if (currentData.launch_pin_required) { @@ -823,10 +833,9 @@ function showPinDialog(profile) { window.location.reload(); return; } - currentProfile = data.profile; dialog.style.display = 'none'; hideProfilePicker(); - updateProfileIndicator(); + setCurrentProfile(data.profile); initApp(); return; } else { @@ -873,8 +882,7 @@ async function selectProfile(profileId) { }); const data = await res.json(); if (data.success) { - currentProfile = data.profile; - updateProfileIndicator(); + setCurrentProfile(data.profile); // Join profile-scoped WebSocket room for watchlist/wishlist count updates if (socket && socket.connected) { socket.emit('profile:join', { profile_id: profileId, old_profile_id: oldProfileId }); @@ -1941,6 +1949,7 @@ function showProfileEditForm(profileId, currentName, currentColor, currentAvatar if (payload.allowed_pages !== undefined) currentProfile.allowed_pages = payload.allowed_pages; if (payload.can_download !== undefined) currentProfile.can_download = payload.can_download; updateProfileIndicator(); + notifyProfileContextChanged(); } loadProfileManageList(); } else { diff --git a/webui/static/search.js b/webui/static/search.js index 32562a29..1c7f39e4 100644 --- a/webui/static/search.js +++ b/webui/static/search.js @@ -1177,11 +1177,10 @@ async function loadInitialData() { ? urlPage : homePage; - // If the TanStack router bridge is not available yet, fall back to the - // legacy shell activator so the page still renders. - if (!window.SoulSyncWebRouter) { - navigateToPage(targetPage, { skipRouteChange: true, forceReload: true }); - } + // Always apply the target page to the legacy shell chrome. + // When the router is present, skipRouteChange keeps the URL stable + // while still syncing the active page/nav state for direct loads. + navigateToPage(targetPage, { skipRouteChange: true, forceReload: true }); } catch (error) { console.error('Error loading initial data:', error); } diff --git a/webui/tests/issues.smoke.spec.ts b/webui/tests/issues.smoke.spec.ts index 369258bd..c791c014 100644 --- a/webui/tests/issues.smoke.spec.ts +++ b/webui/tests/issues.smoke.spec.ts @@ -2,6 +2,14 @@ import { expect, test, type Page } from '@playwright/test'; import { shellRouteManifest, type ShellPageId } from '../src/platform/shell/route-manifest'; +async function selectProfile(page: Page, baseURL: string, profileId = 1) { + const response = await page.request.post(new URL('/api/profiles/select', baseURL).toString(), { + data: { profile_id: profileId }, + }); + + expect(response.ok()).toBe(true); +} + async function waitForShellRoute(page: Page, pageId: string) { if (pageId === 'issues') { await expect @@ -21,7 +29,7 @@ async function waitForShellRoute(page: Page, pageId: string) { function getExpectedNavPage(pageId: ShellPageId): string { if (pageId === 'artist-detail') { - return 'library'; + return ''; } return pageId; @@ -56,14 +64,21 @@ test('direct load activates all known top-level routes', async ({ page, baseURL return; } - for (const route of shellRouteManifest) { - await page.goto(new URL(route.path, baseURL).toString(), { waitUntil: 'domcontentloaded' }); - await waitForShellRoute(page, route.pageId); - await expect(page).toHaveURL(expectedUrlPattern(route.path)); - await expectNavHighlight(page, route.pageId); + await selectProfile(page, baseURL); - if (route.pageId === 'issues') { - await verifyIssuesRoute(page); + for (const route of shellRouteManifest) { + const routePage = await page.context().newPage(); + try { + await routePage.goto(new URL(route.path, baseURL).toString(), { waitUntil: 'domcontentloaded' }); + await waitForShellRoute(routePage, route.pageId); + await expect(routePage).toHaveURL(expectedUrlPattern(route.path)); + await expectNavHighlight(routePage, route.pageId); + + if (route.pageId === 'issues') { + await verifyIssuesRoute(routePage); + } + } finally { + await routePage.close(); } } }); @@ -74,6 +89,8 @@ test('browser history restores top-level routes', async ({ page, baseURL }) => { return; } + await selectProfile(page, baseURL); + await page.goto(new URL('/discover', baseURL).toString(), { waitUntil: 'domcontentloaded' }); await waitForShellRoute(page, 'discover');