Keep shell bootstrap aligned with profile selection

- re-render the React shell when legacy profile bootstrap selects or refreshes a profile
- keep the initial page fallback so direct loads still activate the legacy shell chrome
- preserve the smoke coverage for direct loads and browser history
This commit is contained in:
Antti Kettunen 2026-04-26 17:40:37 +03:00
parent 40199e4f6a
commit 972910261b
No known key found for this signature in database
GPG key ID: C6B2A3D250359BD7
5 changed files with 57 additions and 27 deletions

View file

@ -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 }) {

View file

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

View file

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

View file

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

View file

@ -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');