@multiplatform.one/backoffice 7.34.3 → 7.35.0

package/src/shell/BackofficeShell.spec.tsx

@@ -1,15 +1,34 @@
 import React from "react";
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { cleanup, screen } from "@testing-library/react";
-import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, fireEvent, screen } from "@testing-library/react";
+import { defaultKnobs, resolveKnobs, type LayoutSizeClass } from "@multiplatform.one/theme";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { BackofficeProvider } from "../config/BackofficeProvider";
 import { createMemoryNavigator } from "../navigation/navigator";
 import { BackofficeShell } from "./BackofficeShell";
 
+// A pinned size class wins; unpinned, the real hook reads window.innerWidth.
+const layout = vi.hoisted(() => ({ size: undefined as LayoutSizeClass | undefined }));
+vi.mock("@multiplatform.one/theme", async (original) => {
+  const actual = await original<typeof import("@multiplatform.one/theme")>();
+  return {
+    ...actual,
+    useLayoutSizeClass: () => {
+      const measured = actual.useLayoutSizeClass();
+      return layout.size ?? measured;
+    },
+  };
+});
+
 const MOCK_HOST = "https://backoffice-shell-chrome.mock.test";
 
-afterEach(cleanup);
+const initialWidth = window.innerWidth;
+
+afterEach(() => {
+  cleanup();
+  window.innerWidth = initialWidth;
+});
 
 function renderShell() {
   return renderWithProviders(
@@ -31,13 +50,106 @@ function renderShell() {
 }
 
 describe("BackofficeShell pane hairlines", () => {
+  it("keeps phone Search and Notifications as separate content-sized targets", () => {
+    window.innerWidth = 390;
+    renderShell();
+    const search = screen.getByLabelText("Search");
+    const notifications = screen.getByLabelText("Notifications");
+    expect(search.textContent).toBe("");
+    expect(search.contains(notifications)).toBe(false);
+    expect(notifications.contains(search)).toBe(false);
+    let chrome = search.parentElement;
+    while (chrome && !chrome.contains(notifications)) chrome = chrome.parentElement;
+    expect(chrome).not.toBeNull();
+    expect(chrome).not.toBe(screen.getByRole("banner"));
+    expect(search.className).not.toMatch(/_fg-1(?: |$)/);
+    let trigger = notifications.parentElement;
+    while (trigger && trigger !== chrome && !trigger.classList.contains("_w-auto")) {
+      trigger = trigger.parentElement;
+    }
+    expect(trigger).not.toBe(chrome);
+    expect(trigger?.classList.contains("_w-auto")).toBe(true);
+  });
+
+  it("supplies theme ink to the header glyphs instead of native currentColor", () => {
+    renderShell();
+    const glyphs = ["Toggle sidebar", "Search", "Notifications"].map((label) =>
+      screen.getByLabelText(label).querySelector("svg"),
+    );
+    for (const glyph of glyphs) {
+      expect(glyph).toBeTruthy();
+      expect(glyph?.getAttribute("fill")).not.toBe("currentColor");
+      expect(glyph?.getAttribute("fill")).toBe(glyphs[0]?.getAttribute("fill"));
+    }
+  });
+
   it("paints full-width banner and full-height column rules plus a footer rule", () => {
     renderShell();
 
     expect(screen.getByTestId("backoffice-shell-banner-rule")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Toggle sidebar" }));
     expect(screen.getByTestId("backoffice-shell-column-rule")).toBeTruthy();
     expect(screen.getByTestId("backoffice-shell-footer-rule")).toBeTruthy();
     expect(screen.getByTestId("host-sidebar-footer")).toBeTruthy();
     expect(screen.getByRole("main").id).toBe("backoffice-main");
   });
 });
+
+describe("BackofficeShell bar fragment (B5)", () => {
+  it("spreads knobProps.bar.frame on the banner instead of a private height map", () => {
+    renderShell();
+    const { frame } = resolveKnobs(defaultKnobs).knobProps.bar;
+    expect(frame.minHeight).toBeGreaterThanOrEqual(52);
+    expect(frame.minHeight).toBeLessThanOrEqual(56);
+    const classes = String(screen.getByRole("banner").className).split(" ");
+    expect(classes).toContain(`_mih-${frame.minHeight}px`);
+    expect(classes).toContain("_pt-t-space-2");
+    expect(classes).toContain("_pl-t-space-4");
+    expect(classes.some((c) => /^_h-/.test(c))).toBe(false);
+  });
+});
+
+describe("BackofficeShell desktop sidebar", () => {
+  it("starts closed and opens and closes from the hamburger", () => {
+    renderShell();
+    const toggle = screen.getByRole("button", { name: "Toggle sidebar" });
+
+    expect(toggle.getAttribute("aria-expanded")).toBe("false");
+    expect(screen.queryByTestId("backoffice-sidebar-rail")).toBeNull();
+    expect(screen.getByRole("main").textContent).toContain("page body");
+
+    fireEvent.click(toggle);
+    expect(toggle.getAttribute("aria-expanded")).toBe("true");
+    expect(screen.getByTestId("backoffice-sidebar-rail")).toBeTruthy();
+    expect(screen.queryByTestId("backoffice-sidebar-drawer")).toBeNull();
+
+    fireEvent.click(toggle);
+    expect(toggle.getAttribute("aria-expanded")).toBe("false");
+    expect(screen.queryByTestId("backoffice-sidebar-rail")).toBeNull();
+    expect(screen.getByRole("main").textContent).toContain("page body");
+  });
+});
+
+it("uses an icon-only search trigger in the compact header", async () => {
+  layout.size = "compact";
+  const width = window.innerWidth;
+  Object.defineProperty(window, "innerWidth", { configurable: true, writable: true, value: 390 });
+  renderShell();
+  const search = screen.getByTestId("backoffice-awesomebar");
+  expect(search.getAttribute("aria-label")).toBe("Search");
+  expect(search.textContent?.trim()).toBe("");
+  expect(getComputedStyle(search).flexShrink).toBe("0");
+  const banner = screen.getByRole("banner");
+  expect(screen.queryByLabelText("Help")).toBeNull();
+  for (const label of ["Notifications", "Log in"]) {
+    let node = screen.getByRole("button", { name: label }).parentElement;
+    while (node && node !== banner) {
+      expect(node.style.width || getComputedStyle(node).width).not.toBe("100%");
+      node = node.parentElement;
+    }
+  }
+  fireEvent.click(search);
+  expect(await screen.findByPlaceholderText(/Search/)).toBeTruthy();
+  layout.size = undefined;
+  Object.defineProperty(window, "innerWidth", { configurable: true, writable: true, value: width });
+});

package/src/shell/BackofficeShell.tsx

@@ -7,9 +7,16 @@
  * BackofficeProvider's navigator (explicit `activePath`/`onNavigate` props
  * override it for stories/tests). Capability flags from the provider gate
  * every piece of chrome; `renderShellHeader`/`renderSidebarFooter` slots
- * replace/extend the built-ins. Narrow viewports collapse the sidebar into
- * an overlay drawer (same breakpoint as frappe-ui's DeskShell:
- * DESK_NARROW_BREAKPOINT === theme NARROW_BREAKPOINT).
+ * replace/extend the built-ins. Narrow viewports open the nav as a bottom
+ * sheet off the banner hamburger instead of a rail (same breakpoint as
+ * frappe-ui's DeskShell: DESK_NARROW_BREAKPOINT === theme NARROW_BREAKPOINT);
+ * phones take sheets, not side drawers. Wide ones show and hide the rail
+ * from that same hamburger.
+ *
+ * ONE-SIDEBAR (LC-101): there is exactly one sidebar column. A page's
+ * secondary panel (the list's group-by filters) arrives through the
+ * shell sidebar slot and stacks UNDER the workspace nav in this column as
+ * a collapsible group — never a second column beside the rail.
  *
  * Shell geometry follows Frappe Desk's inverted-L (full-width banner + left
  * rail) with Linear's pane rules: hairlines are standalone filled rules that
@@ -17,16 +24,26 @@
  * never a child's box-border that stops at content. Selected workspace is
  * fill (WorkspaceSidebar / LC-71); the rail does not paint selection chrome.
  */
-import { SizableText, SkipLink, XStack, YStack, isWeb } from "@multiplatform.one/components";
+import {
+  ScrollView,
+  SheetModal,
+  SizableText,
+  SkipLink,
+  XStack,
+  YStack,
+  isWeb,
+  themed,
+} from "@multiplatform.one/components";
 import { Button } from "@multiplatform.one/forms";
 import * as componentsBarrel from "@multiplatform.one/components";
 import {
   hairline,
   sizeRecipeEscape,
+  Surface,
   useLayoutSizeClass,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
-import { ListIcon, XIcon } from "@phosphor-icons/react";
+import { CaretDownIcon, CaretRightIcon, ListIcon, XIcon } from "@phosphor-icons/react";
 import type React from "react";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -46,6 +63,11 @@ import {
   useBackofficeSlots,
 } from "../config/BackofficeProvider";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import {
+  ShellSidebarSlotProvider,
+  useShellSidebarSlotState,
+  type ShellSidebarPanel,
+} from "./shellSidebarSlot";
 import { WORKSPACE_SIDEBAR_WIDTH, WorkspaceSidebar } from "./WorkspaceSidebar";
 
 // Capability-check the barrel instead of a named import: GNOME's curated
@@ -53,6 +75,8 @@ import { WORKSPACE_SIDEBAR_WIDTH, WorkspaceSidebar } from "./WorkspaceSidebar";
 // machinery stays out of the GJS graph), so on that target the shell simply
 // mounts no toast host (ListToastHost precedent in features/pokemon).
 const ToastViewport = (componentsBarrel as Partial<typeof componentsBarrel>).ToastViewport;
+const MenuGlyph = themed(ListIcon);
+const CloseGlyph = themed(XIcon);
 
 export interface BackofficeShellProps {
   children: React.ReactNode;
@@ -60,12 +84,17 @@ export interface BackofficeShellProps {
   activePath?: string;
   /** Navigation handler (default: navigator push). */
   onNavigate?: (path: string) => void;
+  /**
+   * The current surface's name (doctype, workspace, report). Compact banners
+   * show it in place of the desk title, which moves into the drawer header.
+   */
+  title?: string;
 }
 
 /**
  * Cross-platform narrow-viewport detection: theme `compact` size class =
  * width < NARROW_BREAKPOINT (640) — matchMedia on web, window dimensions on
- * native, so phones get the drawer instead of a permanent desktop rail.
+ * native, so phones get the drawer instead of a toggleable desktop rail.
  */
 function useIsNarrow(): boolean {
   return useLayoutSizeClass() === "compact";
@@ -84,7 +113,44 @@ function ShellHairline({ axis, testId }: { axis: "horizontal" | "vertical"; test
   );
 }
 
-export function BackofficeShell({ children, activePath, onNavigate }: BackofficeShellProps) {
+/**
+ * The page panel stacked under the nav (LC-101): a disclosure header and
+ * the panel body, sharing the rail's column and width. Collapsing it hands
+ * the column back to the nav.
+ */
+function StackedSidebarPanel({ panel }: { panel: ShellSidebarPanel }) {
+  const { knobProps } = useResolvedKnobs();
+  const [open, setOpen] = useState(true);
+  return (
+    <YStack
+      flex={open ? 1 : undefined}
+      flexShrink={open ? 1 : 0}
+      minHeight={0}
+      width="100%"
+      data-testid="backoffice-shell-page-panel"
+    >
+      <ShellHairline axis="horizontal" testId="backoffice-shell-panel-rule" />
+      <Button
+        chromeless
+        size={knobProps.sizeToken}
+        justifyContent="flex-start"
+        icon={open ? CaretDownIcon : CaretRightIcon}
+        aria-expanded={open}
+        onPress={() => setOpen((value) => !value)}
+        data-testid="backoffice-shell-page-panel-toggle"
+      >
+        {panel.title}
+      </Button>
+      {open ? (
+        <ScrollView flex={1} minHeight={0} paddingHorizontal="$2">
+          {panel.content}
+        </ScrollView>
+      ) : null}
+    </YStack>
+  );
+}
+
+export function BackofficeShell({ children, activePath, onNavigate, title }: BackofficeShellProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const { knobProps } = useResolvedKnobs();
   const capabilities = useBackofficeCapabilities();
@@ -93,7 +159,10 @@ export function BackofficeShell({ children, activePath, onNavigate }: Backoffice
   const location = useBackofficeLocation();
   const paths = useBackofficePaths();
   const isNarrow = useIsNarrow();
-  const [drawerOpen, setDrawerOpen] = useState(false);
+  // One hamburger state: the rail on wide viewports, the nav sheet on narrow.
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const sidebarSlot = useShellSidebarSlotState();
+  const pagePanel = sidebarSlot.panel;
 
   const resolvedActivePath = activePath ?? location.path;
   const navigate = onNavigate ?? navigator.navigate;
@@ -109,34 +178,24 @@ export function BackofficeShell({ children, activePath, onNavigate }: Backoffice
       : undefined,
   });
 
-  // Leaving the narrow range always closes the drawer.
   useEffect(() => {
-    if (!isNarrow) setDrawerOpen(false);
+    setSidebarOpen(false);
   }, [isNarrow]);
 
-  // Escape dismisses the drawer (web-only keyboard listener).
-  useEffect(() => {
-    if (!isWeb || typeof document === "undefined" || !drawerOpen) return;
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setDrawerOpen(false);
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [drawerOpen]);
-
   const handleNavigate = (path: string) => {
-    if (isNarrow) setDrawerOpen(false);
+    if (isNarrow) setSidebarOpen(false);
     navigate(path);
   };
 
-  const bannerHeight =
-    knobProps.sizeToken === "$5" ? "$7" : knobProps.sizeToken === "$3" ? "$5" : "$6";
+  const deskTitle = t("shell.title", "Backoffice");
+  const bannerTitle = isNarrow && title ? title : deskTitle;
 
   const sidebarContent = (
-    <YStack flex={1} height="100%" minHeight={0} width={WORKSPACE_SIDEBAR_WIDTH}>
+    <YStack flex={1} height="100%" minHeight={0} width="100%">
       <YStack flex={1} minHeight={0}>
         <WorkspaceSidebar activePath={resolvedActivePath} onNavigate={handleNavigate} />
       </YStack>
+      {pagePanel && !isNarrow ? <StackedSidebarPanel panel={pagePanel} /> : null}
       {slots.renderSidebarFooter ? (
         <YStack flexShrink={0} width="100%">
           <ShellHairline axis="horizontal" testId="backoffice-shell-footer-rule" />
@@ -148,15 +207,15 @@ export function BackofficeShell({ children, activePath, onNavigate }: Backoffice
 
   const headerContent = (
     <>
-      {isNarrow && sidebarEnabled && (
+      {sidebarEnabled && (
         <Button
           chromeless
           circular
           size={knobProps.sizeToken}
-          icon={drawerOpen ? XIcon : ListIcon}
+          icon={sidebarOpen ? CloseGlyph : MenuGlyph}
           aria-label={t("shell.toggleSidebar", "Toggle sidebar")}
-          aria-expanded={drawerOpen}
-          onPress={() => setDrawerOpen((open) => !open)}
+          aria-expanded={sidebarOpen}
+          onPress={() => setSidebarOpen((open) => !open)}
           data-testid="backoffice-sidebar-toggle"
         />
       )}
@@ -164,36 +223,45 @@ export function BackofficeShell({ children, activePath, onNavigate }: Backoffice
         chromeless
         size={knobProps.sizeToken}
         paddingHorizontal="$2"
+        flex={isNarrow ? 1 : undefined}
+        flexShrink={1}
+        minWidth={0}
+        justifyContent="flex-start"
         onPress={() => handleNavigate(paths.home())}
         aria-label={t("shell.home", "Home")}
         data-testid="backoffice-home"
       >
-        <SizableText {...knobProps.heading} fontWeight="400">
-          {t("shell.title", "Backoffice")}
+        <SizableText {...knobProps.heading} numberOfLines={1}>
+          {bannerTitle}
         </SizableText>
       </Button>
 
       {/* Centered awesomebar (the flex spacer keeps the right chrome pinned
           when the awesomebar capability is off) */}
-      <XStack flex={1} minWidth={0} justifyContent="center">
-        {capabilities.awesomebar.enabled && (
-          <XStack
-            flex={1}
-            maxWidth={sizeRecipeEscape(
-              560,
-              "awesomebar: caps the centred search field in the banner",
-            )}
-            minWidth={0}
-          >
-            <BackofficeAwesomebar focusRef={awesomebarRef} />
-          </XStack>
-        )}
-      </XStack>
+      {!isNarrow && (
+        <XStack flex={1} flexShrink={0} minWidth={0} justifyContent="center">
+          {capabilities.awesomebar.enabled && (
+            <XStack
+              flex={1}
+              maxWidth={sizeRecipeEscape(
+                560,
+                "awesomebar: caps the centred search field in the banner",
+              )}
+              minWidth={0}
+            >
+              <BackofficeAwesomebar focusRef={awesomebarRef} />
+            </XStack>
+          )}
+        </XStack>
+      )}
 
       {/* Right chrome */}
       <XStack alignItems="center" gap="$1" flexShrink={0}>
+        {isNarrow && capabilities.awesomebar.enabled && (
+          <BackofficeAwesomebar focusRef={awesomebarRef} />
+        )}
         {capabilities.notifications.enabled && <NotificationsButton />}
-        {capabilities.help.enabled && <HelpMenu />}
+        {capabilities.help.enabled && !isNarrow && <HelpMenu />}
         {capabilities.userMenu.enabled && <UserMenu />}
       </XStack>
     </>
@@ -208,90 +276,92 @@ export function BackofficeShell({ children, activePath, onNavigate }: Backoffice
       backgroundColor="$color2"
       data-testid="backoffice-sidebar-rail"
     >
-      {sidebarContent}
+      <YStack width={WORKSPACE_SIDEBAR_WIDTH} height="100%" minHeight={0}>
+        {sidebarContent}
+      </YStack>
       <ShellHairline axis="vertical" testId="backoffice-shell-column-rule" />
     </XStack>
   );
 
   return (
-    <YStack flex={1} height="100%" width="100%" overflow="hidden" data-testid="backoffice-shell">
-      {isWeb ? (
-        <SkipLink targetId="backoffice-main">
-          {t("shell.skipToContent", "Skip to content")}
-        </SkipLink>
-      ) : null}
+    <ShellSidebarSlotProvider value={sidebarEnabled ? sidebarSlot.value : null}>
+      <YStack flex={1} height="100%" width="100%" overflow="hidden" data-testid="backoffice-shell">
+        {isWeb ? (
+          <SkipLink targetId="backoffice-main">
+            {t("shell.skipToContent", "Skip to content")}
+          </SkipLink>
+        ) : null}
 
-      {/* Top navbar — Frappe inverted-L: full width above the rail. */}
-      <XStack
-        role="banner"
-        {...knobProps.surface}
-        borderWidth={0}
-        borderRadius={0}
-        height={bannerHeight}
-        alignItems="center"
-        paddingHorizontal="$3"
-        gap="$2"
-        flexShrink={0}
-      >
-        {slots.renderShellHeader
-          ? slots.renderShellHeader({ defaultContent: headerContent })
-          : headerContent}
-      </XStack>
-      <ShellHairline axis="horizontal" testId="backoffice-shell-banner-rule" />
+        {/* Top navbar — Frappe inverted-L: full width above the rail. */}
+        <XStack
+          role="banner"
+          {...knobProps.surface}
+          borderWidth={0}
+          borderRadius={0}
+          {...knobProps.bar.frame}
+          alignItems="center"
+          gap="$2"
+          flexShrink={0}
+        >
+          <Surface size={knobProps.bar.sizeToken}>
+            {slots.renderShellHeader
+              ? slots.renderShellHeader({ defaultContent: headerContent })
+              : headerContent}
+          </Surface>
+        </XStack>
+        <ShellHairline axis="horizontal" testId="backoffice-shell-banner-rule" />
 
-      <XStack flex={1} minWidth={0} position="relative" overflow="hidden">
-        {sidebarEnabled && !isNarrow && rail}
+        <XStack flex={1} minWidth={0} position="relative" overflow="hidden">
+          {sidebarEnabled && !isNarrow && sidebarOpen && rail}
 
-        {/* Narrow drawer + scrim */}
-        {sidebarEnabled && isNarrow && drawerOpen && (
-          <>
-            <YStack
-              position="absolute"
-              top={0}
-              left={0}
-              right={0}
-              bottom={0}
-              backgroundColor="$shadowColor"
-              opacity={0.5}
-              zIndex={10}
-              onPress={() => setDrawerOpen(false)}
-              data-testid="backoffice-sidebar-scrim"
-            />
-            <XStack
-              role="navigation"
-              position="absolute"
-              top={0}
-              left={0}
-              bottom={0}
-              zIndex={11}
-              backgroundColor="$color2"
-              data-testid="backoffice-sidebar-drawer"
+          {/* Narrow: the nav opens as a bottom sheet off the hamburger
+            (phones take sheets, not side drawers), titled with the desk name
+            the compact banner gives up to the surface title. SheetModal owns
+            Escape and scrim dismissal. */}
+          {sidebarEnabled && isNarrow && (
+            <SheetModal
+              open={sidebarOpen}
+              onOpenChange={setSidebarOpen}
+              snapPoint={85}
+              fill
+              header={
+                <SizableText {...knobProps.heading} numberOfLines={1}>
+                  {deskTitle}
+                </SizableText>
+              }
             >
-              {sidebarContent}
-              <ShellHairline axis="vertical" testId="backoffice-shell-drawer-rule" />
-            </XStack>
-          </>
-        )}
+              <YStack
+                role="navigation"
+                flex={1}
+                minHeight={0}
+                width="100%"
+                data-testid="backoffice-sidebar-drawer"
+              >
+                {sidebarContent}
+              </YStack>
+            </SheetModal>
+          )}
 
-        {/* Routed content — pages own their own headers/breadcrumbs */}
-        <YStack
-          role="main"
-          id="backoffice-main"
-          tabIndex={-1}
-          flex={1}
-          minWidth={0}
-          minHeight={0}
-          overflow="hidden"
-        >
-          {children}
-        </YStack>
-      </XStack>
+          {/* Routed content — pages own their own headers/breadcrumbs */}
+          <YStack
+            role="main"
+            id="backoffice-main"
+            tabIndex={-1}
+            flex={1}
+            minWidth={0}
+            minHeight={0}
+            overflow="hidden"
+          >
+            {children}
+          </YStack>
+        </XStack>
 
-      {/* THE backoffice toast host: one shell-level viewport so every desk
+        {/* THE backoffice toast host: one shell-level viewport so every desk
           surface (list, form, report, kanban, …) renders notify()/showToast
           feedback without mounting its own. Double-mount safe — a second
           viewport lower in the tree no-ops (components Toast contract). */}
-      {ToastViewport ? <ToastViewport /> : null}
-    </YStack>
+        {ToastViewport ? <ToastViewport /> : null}
+      </YStack>
+    </ShellSidebarSlotProvider>
   );
 }

package/src/shell/HomeRedirect.spec.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { BackofficeProvider } from "../config/BackofficeProvider";
+import { createMemoryNavigator } from "../navigation/navigator";
+import { HomeRedirect } from "./HomeRedirect";
+
+const state = vi.hoisted(() => ({
+  workspace: undefined as string | undefined,
+  isLoading: false,
+  error: undefined as Error | undefined,
+  refused: false,
+}));
+vi.mock("./useWorkspaces", () => ({ useDefaultWorkspace: () => state }));
+
+afterEach(cleanup);
+beforeEach(() => {
+  Object.assign(state, {
+    workspace: undefined,
+    isLoading: false,
+    error: undefined,
+    refused: false,
+  });
+});
+
+function renderHome(fallbackDoctype?: string, denied = false) {
+  const navigation = createMemoryNavigator("/backoffice");
+  renderWithProviders(
+    <BackofficeProvider
+      frappe={{ baseURL: "https://home.mock.test" }}
+      navigation={navigation}
+      doctypes={denied ? { deny: ["Pokemon"] } : undefined}
+    >
+      <HomeRedirect fallbackDoctype={fallbackDoctype} />
+    </BackofficeProvider>,
+  );
+  return navigation;
+}
+
+describe("Backoffice home landing", () => {
+  it("replaces an empty workspace home with the host's DocType list", async () => {
+    const navigation = renderHome("Pokemon");
+    await waitFor(() => expect(navigation.getLocation().path).toBe("/backoffice/pokemon"));
+    expect(screen.queryByText("No workspaces are visible for this account.")).toBeNull();
+    navigation.back();
+    expect(navigation.getLocation().path).toBe("/backoffice/pokemon");
+  });
+
+  it("uses the DocType list when Workspace is refused", async () => {
+    Object.assign(state, { error: new Error("Forbidden"), refused: true });
+    const navigation = renderHome("Pokemon");
+    await waitFor(() => expect(navigation.getLocation().path).toBe("/backoffice/pokemon"));
+  });
+
+  it("keeps an existing workspace ahead of the fallback", async () => {
+    state.workspace = "Sales";
+    const navigation = renderHome("Pokemon");
+    await waitFor(() => expect(navigation.getLocation().path).toBe("/backoffice/sales"));
+  });
+
+  it("does not redirect while workspaces are loading", () => {
+    state.isLoading = true;
+    expect(renderHome("Pokemon").getLocation().path).toBe("/backoffice");
+  });
+
+  it("keeps a cached workspace usable after a network failure", async () => {
+    Object.assign(state, { workspace: "Sales", error: new Error("Offline") });
+    const navigation = renderHome("Pokemon");
+    await waitFor(() => expect(navigation.getLocation().path).toBe("/backoffice/sales"));
+  });
+
+  it("does not hide a network failure behind the fallback", () => {
+    state.error = new Error("Offline");
+    expect(renderHome("Pokemon").getLocation().path).toBe("/backoffice");
+    expect(screen.getByText("Workspaces unavailable")).toBeTruthy();
+    expect(screen.queryByText("No workspaces")).toBeNull();
+  });
+
+  it("honors the host's denied DocTypes", () => {
+    expect(renderHome("Pokemon", true).getLocation().path).toBe("/backoffice");
+  });
+
+  it("keeps the empty state concise without a host fallback", () => {
+    renderHome();
+    expect(screen.getByText("No workspaces")).toBeTruthy();
+    expect(screen.queryByText("No workspaces are visible for this account.")).toBeNull();
+  });
+});