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:
parent
40199e4f6a
commit
972910261b
5 changed files with 57 additions and 27 deletions
|
|
@ -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 }) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue