@multiplatform.one/backoffice 7.34.4 → 7.36.0

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,38 +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" numberOfLines={1}>
-          {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={isNarrow ? undefined : 1} flexShrink={0} minWidth={0} justifyContent="center">
-        {capabilities.awesomebar.enabled && (
-          <XStack
-            flex={isNarrow ? undefined : 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>
     </>
@@ -210,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();
+  });
+});

package/src/shell/HomeRedirect.tsx

@@ -3,22 +3,33 @@
  * workspace, else the first public workspace by sequence order. Rendered by
  * the backoffice home route ("{base}").
  */
-import { EmptyState, Paragraph, Spinner, YStack } from "@multiplatform.one/components";
+import { AsyncBoundary } from "@multiplatform.one/components";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { useBackofficeNavigator, useBackofficePaths } from "../config/BackofficeProvider";
+import {
+  useBackofficeNavigator,
+  useBackofficePaths,
+  useIsDoctypeAllowed,
+} from "../config/BackofficeProvider";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import { useDefaultWorkspace } from "./useWorkspaces";
 
-export function HomeRedirect() {
+export function HomeRedirect({ fallbackDoctype }: { fallbackDoctype?: string } = {}) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const navigator = useBackofficeNavigator();
   const paths = useBackofficePaths();
-  const { workspace, isLoading } = useDefaultWorkspace();
+  const isDoctypeAllowed = useIsDoctypeAllowed();
+  const { workspace, isLoading, error, refused } = useDefaultWorkspace();
+  const target = !isLoading
+    ? workspace
+      ? paths.workspace(workspace)
+      : (!error || refused) && fallbackDoctype && isDoctypeAllowed(fallbackDoctype)
+        ? paths.list(fallbackDoctype)
+        : undefined
+    : undefined;
 
   useEffect(() => {
-    if (!workspace) return;
-    const target = paths.workspace(workspace);
+    if (!target) return;
     // Host routers (one's included) can silently no-op a replace that fires
     // before their navigation container mounts — routine on warm reloads
     // where the cached workspace list resolves first, which stranded the
@@ -43,21 +54,21 @@ export function HomeRedirect() {
       attempt();
     }, 250);
     return () => clearInterval(retry);
-  }, [workspace, navigator, paths]);
-
-  if (!isLoading && !workspace) {
-    return (
-      <EmptyState
-        title={t("noWorkspacesTitle", "No workspaces")}
-        description={t("noWorkspacesDescription", "No workspaces are visible for this account.")}
-      />
-    );
-  }
+  }, [target, navigator]);
 
   return (
-    <YStack flex={1} alignItems="center" justifyContent="center" gap="$3">
-      <Spinner size="large" />
-      <Paragraph color="$color10">{t("loadingWorkspaces", "Loading workspaces…")}</Paragraph>
-    </YStack>
+    <AsyncBoundary
+      flex={1}
+      layout="list"
+      loading={isLoading || Boolean(target)}
+      error={!target && Boolean(error) && !refused}
+      errorTitle={t("workspacesUnavailable", "Workspaces unavailable")}
+      empty={!isLoading && !target}
+      emptyTitle={
+        refused
+          ? t("workspacesUnavailable", "Workspaces unavailable")
+          : t("noWorkspacesTitle", "No workspaces")
+      }
+    />
   );
 }

package/src/shell/WorkspaceSidebar.spec.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { getVariableValue, useTheme } from "tamagui";
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { cleanup, screen, waitFor } from "@testing-library/react";
@@ -7,6 +8,11 @@ import { BackofficeProvider } from "../config/BackofficeProvider";
 import { createMemoryNavigator } from "../navigation/navigator";
 import { WorkspaceSidebar } from "./WorkspaceSidebar";
 
+function SelectedInk() {
+  const theme = useTheme();
+  return <span data-testid="selected-ink" data-ink={String(getVariableValue(theme.color12))} />;
+}
+
 const MOCK_HOST = "https://backoffice-shell-nav.mock.test";
 
 const makeFixtures = () =>
@@ -60,6 +66,7 @@ describe("WorkspaceSidebar LC-72 stacked nav", () => {
         frappe={{ baseURL: MOCK_HOST, fixtures: makeFixtures() }}
         navigation={createMemoryNavigator("/backoffice/beta")}
       >
+        <SelectedInk />
         <WorkspaceSidebar activePath="/backoffice/beta" />
       </BackofficeProvider>,
     );
@@ -74,6 +81,14 @@ describe("WorkspaceSidebar LC-72 stacked nav", () => {
     expect(rows[1].getAttribute("data-group-position")).toBe("middle");
     expect(rows[2].getAttribute("data-group-position")).toBe("last");
 
+    expect(rows[1].className).toContain("_bg-color4");
+    expect(rows[1].className).toContain("_col-color12");
+    expect(rows[1].querySelector("svg")?.getAttribute("fill")).toBe(
+      screen.getByTestId("selected-ink").getAttribute("data-ink"),
+    );
+    expect(rows[1].className).toContain("_bg-0hover-color5");
+    expect(rows[1].className).toContain("_bg-0active-color5");
+    expect(screen.getByText("Beta").className).toContain("_col-color12");
     expect(rows[1].getAttribute("data-active")).toBe("true");
     expect(rows[1].getAttribute("aria-current")).toBe("page");
     expect(rows[0].getAttribute("data-active")).toBe("false");