@k2b/cloud 0.40.0 → 0.42.0

package/src/ssr/Layout.tsx

@@ -10,6 +10,7 @@ import { PANEL_HELP_ID_MAX_LENGTH, PanelPageContextSchema } from "../contracts/p
 import { isPwaShellAvailable } from "../contracts/pwa";
 import { defaultRailPreferences } from "../contracts/rail-preferences";
 import { hasRole, type User } from "../contracts/shared";
+import { isAppSessionActor } from "../server/actor";
 import { getLocale } from "../server/locale";
 import { getDateConfig } from "../server/time";
 import { dates, resolveHomePath } from "../shared";
@@ -27,14 +28,15 @@ import { HELP_VIEW_LIMIT } from "./layout-help-start";
 import type { LayoutBreadcrumb } from "./layout-runtime";
 import PageTrailRow from "./PageTrailRow";
 import PanelSlot from "./PanelSlot";
+import { getPageSwapBuild, pageSwapSignature } from "./page-swap";
 import { derivePageTrail } from "./page-trail";
 import { platformMessages } from "./platform-messages";
 import { sortRailApps } from "./rail-navigation";
 import { requestPath } from "./request-path";
-import { getLocalizedRuntimeContext, type RuntimeContext } from "./runtime";
+import { getDisplayRuntimeContext, getLocalizedRuntimeContext, type RuntimeContext } from "./runtime";
 import ShellFocusToggle from "./ShellFocusToggle";
 import ShellRuntime from "./ShellRuntime.island";
-import { type ShellData, ShellDataProvider } from "./shell-data";
+import { type ShellData, ShellDataProvider, ShellDataScript } from "./shell-data";
 
 // Types
 type Breadcrumb = LayoutBreadcrumb;
@@ -164,7 +166,9 @@ export default function Layout(props: LayoutProps) {
   const lang = getLocale(c);
   const t = platformMessages.resolve([lang]).t;
   const user = c.get("user");
-  const providers = user && props.panel !== false ? visiblePanelProviders(runtime.apps, user, lang) : [];
+  const displayIds = new Set(getDisplayRuntimeContext(c).apps.map((app) => app.id));
+  const displayApps = runtime.apps.filter((app) => displayIds.has(app.id));
+  const providers = user && props.panel !== false ? visiblePanelProviders(displayApps, user, lang) : [];
   const panelState = readPanelCookie(
     providers.length ? cookie : undefined,
     providers.map((provider) => provider.id),
@@ -178,12 +182,14 @@ export default function Layout(props: LayoutProps) {
     readAppWorkspaceLayoutCookie(cookie, currentApp?.id),
     workspaceSidebarCollapsible,
   );
-  const { primary: primaryApps, more: moreApps } = buildNavLinks(runtime.apps, user, lang);
+  const { primary: primaryApps, more: moreApps } = buildNavLinks(displayApps, user, lang);
   const allApps = sortRailApps([...primaryApps, ...moreApps], lang);
   const visibleAppIds = new Set(allApps.map((app) => app.id));
   const searchLinks = Object.fromEntries(
-    runtime.apps.flatMap((app) => (visibleAppIds.has(app.id) && app.searchLinks?.length ? [[app.id, app.searchLinks] as const] : [])),
+    displayApps.flatMap((app) => (visibleAppIds.has(app.id) && app.searchLinks?.length ? [[app.id, app.searchLinks] as const] : [])),
   );
+  const swapBuild = getPageSwapBuild(c);
+  const swap = swapBuild !== undefined && !focusMode && !!currentRoute?.prefix;
   const settings = c.get("settings");
   const announcements = c.get("announcements");
   const appName = settings?.app?.name || "Cloud";
@@ -212,7 +218,7 @@ export default function Layout(props: LayoutProps) {
   // The app bar and the app's navigation hidden with Cmd/Ctrl+\ or the sidebar buttons; phones ignore it in CSS.
   const shellFocus = showRail && readShellFocusCookie(cookie);
   // The profile menu offers the mobile app only while the installation runs it.
-  const appHref = user && isPwaShellAvailable(runtime.apps) ? "/me/app" : undefined;
+  const appHref = user && isPwaShellAvailable(displayApps) ? "/me/app" : undefined;
   const profileName = user?.displayName || user?.uid || "?";
   const profileAvatarSrc =
     user?.avatarHash && user.id
@@ -271,6 +277,30 @@ export default function Layout(props: LayoutProps) {
     searchLinks,
     appId: currentApp?.id,
   };
+  // What the kept shell shows outside the column: when any of it differs, the next page loads as a document.
+  const signature = swap
+    ? pageSwapSignature({
+        app: currentApp?.id,
+        kind: user ? "app" : "anonymous",
+        user: user?.id ?? null,
+        appSession: isAppSessionActor(c.get("actor")),
+        locale: lang,
+        theme: c.get("page").theme,
+        build: swapBuild,
+        shell: {
+          // The document's <html> theme and the profile menu keep this preference.
+          themePreference: theme,
+          providers,
+          apps: allApps,
+          legalLinks,
+          searchLinks,
+          home: shellData.home,
+          profile: shellData.profile,
+          announcements: user ? (announcements?.latestAnnouncementVersion ?? null) : null,
+          help: registeredHelp?.manifestHash ?? (layoutHelpFailed(c) ? "failed" : null),
+        },
+      })
+    : undefined;
   if (focusMode) {
     return (
       <LocaleProvider locale={lang}>
@@ -310,8 +340,11 @@ export default function Layout(props: LayoutProps) {
   return (
     <LocaleProvider locale={lang}>
       <div
-        class={`cloud-app-canvas relative flex w-full ${fullPage ? "h-dvh overflow-hidden" : "min-h-dvh md:h-dvh md:overflow-hidden"}`}
+        class={`cloud-app-canvas relative flex w-full ${fullPage && !swap ? "h-dvh overflow-hidden" : "min-h-dvh md:h-dvh md:overflow-hidden"}`}
         style={canvasStyle}
+        data-nav-shell={signature}
+        data-nav-scope={swap ? currentRoute?.prefix : undefined}
+        data-nav-attributes={swap ? "data-layout-full-page data-workspace-sidebar-collapsed" : undefined}
         data-panel={panelState.open ? "open" : undefined}
         data-app-id={currentApp?.id}
         data-app-base={currentRoute?.prefix}
@@ -334,13 +367,18 @@ export default function Layout(props: LayoutProps) {
               ? { entries: announcements.announcements, latestVersion: announcements.latestAnnouncementVersion }
               : undefined
           }
-          banners={user && announcements?.banners.length ? true : undefined}
+          banners={user && (swap || announcements?.banners.length) ? true : undefined}
         />
-        <ShellDataProvider data={shellData}>
+        <ShellDataProvider data={shellData} skipScript={swap}>
           {showRail && <LayoutRail currentPath={requestPath(c)} panelOpen={panel ? panelState.open : undefined} />}
           {showRail && <ShellFocusToggle variant="float" />}
           {showRail && <div class="cloud-shell-reveal" data-cloud-shell-reveal="" aria-hidden="true" />}
-          <div class="layout-shell-content flex min-h-0 min-w-0 flex-1 flex-col" data-cloud-app-area="">
+          <div
+            class="layout-shell-content flex min-h-0 min-w-0 flex-1 flex-col"
+            data-cloud-app-area=""
+            data-nav-root={swap ? "" : undefined}
+          >
+            {swap && <ShellDataScript data={shellData} />}
             <LayoutHeader
               panelOpen={panel ? panelState.open : undefined}
               authenticated={showRail}
@@ -353,19 +391,31 @@ export default function Layout(props: LayoutProps) {
             {user && <ExpiryWarnings user={user} dateConfig={dateConfig} locale={lang} />}
             <PageTrailProvider trail={pageTrail}>
               <PageTrailRow trail={pageTrail} />
-              <main class={`layout-content-main min-h-0 min-w-0 flex-1 ${mainLayoutClass}`}>
+              <main
+                class={`layout-content-main min-h-0 min-w-0 flex-1 ${mainLayoutClass}`}
+                data-scroll-preserve={swap ? "cloud-main" : undefined}
+                data-scroll-page={swap ? "" : undefined}
+              >
                 <AppWorkspace.LayoutStateProvider state={workspaceLayout}>{props.children}</AppWorkspace.LayoutStateProvider>
               </main>
             </PageTrailProvider>
             {!fullPage && !showRail && <LayoutFooter appName={settings?.app?.copyright || appName} legalLinks={legalLinks} />}
+            {swap && (
+              <div data-print-fallback="">
+                <p>{t.printFallbackTitle}</p>
+                <p>{props.printHint ?? t.printFallbackHint}</p>
+              </div>
+            )}
           </div>
           {panel && <PanelSlot panel={panel} state={panelState} platform={shellData.platform} />}
           {showRail && <LayoutTabBar currentPath={requestPath(c)} />}
         </ShellDataProvider>
-        <div data-print-fallback="">
-          <p>{t.printFallbackTitle}</p>
-          <p>{props.printHint ?? t.printFallbackHint}</p>
-        </div>
+        {!swap && (
+          <div data-print-fallback="">
+            <p>{t.printFallbackTitle}</p>
+            <p>{props.printHint ?? t.printFallbackHint}</p>
+          </div>
+        )}
       </div>
     </LocaleProvider>
   );

package/src/ssr/LayoutHelp.browser-harness.tsx

@@ -100,7 +100,7 @@ if (!main) throw new Error("Missing Layout main");
 const embedded = params.has("embedded");
 const referenceHost = params.get("host");
 if (referenceHost === "grids" || referenceHost === "pulse") {
-  // The Grids and Pulse query reference windows: one article beside the reference sidebar, without the Cloud shell.
+  // The Grids query reference windows: one article beside the reference sidebar, without the Cloud shell.
   const host = document.createElement("div");
   host.className = "h-dvh";
   document.body.replaceChildren(host);