@multiplatform.one/backoffice 7.34.3 → 7.35.0

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");

package/src/shell/WorkspaceSidebar.tsx

@@ -6,20 +6,22 @@
  * indented under their parent). Data is live via useWorkspaces; paths come
  * from the BackofficeProvider (basePath-aware).
  *
- * LC-72 STACK-OUTER: rows are one stacked group (first/last outer corners,
- * interiors square); hover/press/selection inherit that geometry.
- * LC-71: selected = accent fill; keyboard focus paints an inset ring on the
- * row, never a selection border on every sibling. The column-edge hairline
- * is owned by BackofficeShell so it spans the full rail height (footer
- * included) — this nav paints none.
+ * Rows are one stacked group split by inset hairlines; each row is a
+ * rounded pill so the selected row's neutral fill reads as a tab, not as a
+ * slice of the group. LC-71/LC-05: selected = the neutral selection fill;
+ * keyboard focus paints an inset ring on the row, never a selection border
+ * on every sibling. The column-edge hairline is owned by BackofficeShell so
+ * it spans the full rail height (footer included) — this nav paints none.
  */
 import {
+  componentColors,
   ScrollView,
   Separator,
   SizableText,
   Spinner,
   XStack,
   YStack,
+  useTheme,
   type SidebarItem,
   type SidebarSection,
 } from "@multiplatform.one/components";
@@ -27,10 +29,9 @@ import {
   ensureFocusVisibleRing,
   getGroupPosition,
   hairline,
-  stackRadiusProps,
-  useReadableTextOn,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useBackofficePaths } from "../config/BackofficeProvider";
@@ -57,18 +58,13 @@ function workspaceItem(
 ): SidebarItem {
   const path = paths.workspace(workspace.name);
   const IconComponent = workspaceIcon(workspace.icon, workspace.name);
-  const icon = (
-    // Depth-based inset carried by the icon slot — the Sidebar row API has
-    // no nesting support, so children indent icon+label via this wrapper.
-    <XStack paddingLeft={depth > 0 ? depth * 16 : 0}>
-      <IconComponent size={16} />
-    </XStack>
-  );
+  const active = activePath === path;
+  const icon = <NavIcon Icon={IconComponent} depth={depth} active={active} />;
   return {
     label: workspace.title || workspace.name,
     value: path,
     icon,
-    active: activePath === path,
+    active,
     onPress: onNavigate ? () => onNavigate(path) : undefined,
   };
 }
@@ -95,6 +91,28 @@ function flattenTree(
   return items;
 }
 
+/**
+ * Phosphor takes a resolved colour string, not a token: native renders an
+ * uncoloured glyph black, which vanishes on the dark scheme.
+ */
+function NavIcon({ Icon, depth, active }: { Icon: PhosphorIcon; depth: number; active: boolean }) {
+  const theme = useTheme();
+  const { knobProps } = useResolvedKnobs();
+  const size = Number(knobProps.controlIcon?.width) || 20;
+  const color = (active ? theme.color12 : theme.color10)?.val;
+  return (
+    // Depth-based inset carried by the icon slot — the Sidebar row API has
+    // no nesting support, so children indent icon+label via this wrapper.
+    <XStack paddingLeft={depth > 0 ? depth * size : 0}>
+      <Icon
+        size={size}
+        weight={active ? "fill" : "regular"}
+        {...(typeof color === "string" ? { color } : {})}
+      />
+    </XStack>
+  );
+}
+
 function NavRow({
   item,
   position,
@@ -103,10 +121,9 @@ function NavRow({
   position: ReturnType<typeof getGroupPosition>;
 }) {
   const { knobProps } = useResolvedKnobs();
-  const onAccent = useReadableTextOn("$accentBackground");
   const rowPad = knobProps.panelPadding.padding;
-  const corners = stackRadiusProps(position, knobProps.borderRadius.borderRadius);
-  const ink = item.active && onAccent ? onAccent : undefined;
+  const corners = knobProps.borderRadius;
+  const ink = item.active ? componentColors.selection.ink : undefined;
   return (
     <XStack
       role="button"
@@ -115,20 +132,21 @@ function NavRow({
       data-group-position={position}
       data-active={item.active ? "true" : "false"}
       alignItems="center"
-      gap="$2"
+      gap="$3"
       minHeight={knobProps.sizeToken}
       paddingHorizontal={rowPad}
       paddingVertical="$2"
       overflow="hidden"
       userSelect="none"
       {...corners}
-      backgroundColor={item.active ? "$accentBackground" : "transparent"}
+      {...({ color: ink } as Record<string, unknown>)}
+      backgroundColor={item.active ? componentColors.selection.background : "transparent"}
       hoverStyle={{
-        backgroundColor: item.active ? "$accentBackground" : "$color3",
+        backgroundColor: item.active ? componentColors.selection.hover : "$color3",
         ...corners,
       }}
       pressStyle={{
-        backgroundColor: item.active ? "$accentBackground" : "$color4",
+        backgroundColor: item.active ? componentColors.selection.press : "$color4",
         ...corners,
       }}
       cursor={item.onPress ? "pointer" : "default"}
@@ -138,7 +156,7 @@ function NavRow({
       focusStyle={{ outlineWidth: 0 }}
       focusVisibleStyle={ensureFocusVisibleRing({
         outlineOffset: -2,
-        outlineColor: ink ?? "$outlineColor",
+        outlineColor: "$outlineColor",
       })}
       onKeyDown={
         ((e: { key?: string; preventDefault?: () => void }) => {
@@ -150,7 +168,14 @@ function NavRow({
       }
     >
       {item.icon}
-      <SizableText size="$3" numberOfLines={1} flex={1} flexShrink={1} fontWeight="400" color={ink}>
+      <SizableText
+        size="$4"
+        numberOfLines={1}
+        flex={1}
+        flexShrink={1}
+        fontWeight="400"
+        color="$color12"
+      >
         {item.label}
       </SizableText>
     </XStack>
@@ -161,9 +186,9 @@ function WorkspaceNav({ sections }: { sections: SidebarSection[] }) {
   const { knobProps } = useResolvedKnobs();
   const rowPad = knobProps.panelPadding.padding;
   return (
-    <YStack width={WORKSPACE_SIDEBAR_WIDTH} flex={1} height="100%" minHeight={0}>
+    <YStack width="100%" flex={1} height="100%" minHeight={0}>
       <ScrollView flex={1}>
-        <YStack {...knobProps.panelPadding} paddingHorizontal={0} {...knobProps.gapLg}>
+        <YStack {...knobProps.panelPadding} paddingHorizontal="$2" {...knobProps.gapLg}>
           {sections.map((section, sectionIdx) => (
             <YStack key={section.title ?? sectionIdx} {...knobProps.gap}>
               {section.title ? (
@@ -183,7 +208,11 @@ function WorkspaceNav({ sections }: { sections: SidebarSection[] }) {
                   const position = getGroupPosition(itemIdx, section.items.length);
                   return (
                     <YStack key={String(item.value ?? item.label)}>
-                      {itemIdx > 0 ? <Separator {...hairline.line} /> : null}
+                      {itemIdx > 0 ? (
+                        <YStack paddingHorizontal={rowPad}>
+                          <Separator {...hairline.line} />
+                        </YStack>
+                      ) : null}
                       <NavRow item={item} position={position} />
                     </YStack>
                   );
@@ -227,7 +256,7 @@ export function WorkspaceSidebar({ activePath, onNavigate }: WorkspaceSidebarPro
   if (isLoading && sections.length === 0) {
     return (
       <YStack
-        width={WORKSPACE_SIDEBAR_WIDTH}
+        width="100%"
         flex={1}
         height="100%"
         alignItems="center"

package/src/shell/shellSidebarSlot.spec.tsx

@@ -0,0 +1,178 @@
+/**
+ * LC-101 ONE-SIDEBAR: a page's secondary panel stacks under the shell nav
+ * in the one sidebar column, collapses, and never opens a second column.
+ */
+import React from "react";
+import { ListPageLayout } from "@multiplatform.one/components";
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { BackofficeProvider } from "../config/BackofficeProvider";
+import { Desk } from "../desk/Desk";
+import { createMemoryNavigator } from "../navigation/navigator";
+import { BackofficeShell } from "./BackofficeShell";
+import { useShellSidebarPanel } from "./shellSidebarSlot";
+
+const MOCK_HOST = "https://backoffice-one-sidebar.mock.test";
+
+afterEach(cleanup);
+
+const fixtures = () =>
+  new InMemoryFixtureProvider({
+    Workspace: [
+      {
+        name: "Tools",
+        doctype: "Workspace",
+        title: "Tools",
+        icon: "tool",
+        parent_page: "",
+        public: 1,
+        for_user: "",
+        sequence_id: 1,
+        module: "Automation",
+        is_hidden: 0,
+      },
+    ],
+    DocType: [{ name: "ToDo", doctype: "DocType" }],
+    ToDo: [{ name: "T-0001", doctype: "ToDo", description: "Water plants", status: "Open" }],
+    "Notification Log": [],
+  });
+
+function PanelPage({ onTaken }: { onTaken?: (taken: boolean) => void }) {
+  const taken = useShellSidebarPanel({
+    title: "Group by",
+    content: <div data-testid="page-panel-body">facets</div>,
+  });
+  onTaken?.(taken);
+  return <div>page body</div>;
+}
+
+function renderShell(page: React.ReactNode, sidebar = true) {
+  return renderWithProviders(
+    <BackofficeProvider
+      frappe={{ baseURL: MOCK_HOST, fixtures: fixtures() }}
+      navigation={createMemoryNavigator("/backoffice")}
+      capabilities={{ sidebar }}
+    >
+      <BackofficeShell>{page}</BackofficeShell>
+    </BackofficeProvider>,
+  );
+}
+
+describe("shell sidebar slot (LC-101 ONE-SIDEBAR)", () => {
+  it("stacks the page panel under the nav inside the one rail", async () => {
+    let taken = false;
+    renderShell(<PanelPage onTaken={(value) => (taken = value)} />);
+    fireEvent.click(screen.getByRole("button", { name: "Toggle sidebar" }));
+    const rail = screen.getByTestId("backoffice-sidebar-rail");
+    await waitFor(() => expect(screen.getByTestId("page-panel-body")).toBeTruthy());
+    expect(rail.contains(screen.getByTestId("page-panel-body"))).toBe(true);
+    expect(taken).toBe(true);
+    // One column: one navigation landmark, no second rail.
+    expect(screen.getAllByTestId("backoffice-sidebar-rail")).toHaveLength(1);
+  });
+
+  it("keeps the registered page panel when the hamburger closes and reopens the rail", async () => {
+    let taken = false;
+    renderShell(<PanelPage onTaken={(value) => (taken = value)} />);
+    expect(taken).toBe(true);
+    expect(screen.queryByTestId("page-panel-body")).toBeNull();
+    const toggle = screen.getByRole("button", { name: "Toggle sidebar" });
+
+    fireEvent.click(toggle);
+    await screen.findByTestId("page-panel-body");
+    fireEvent.click(toggle);
+    expect(screen.queryByTestId("page-panel-body")).toBeNull();
+    expect(taken).toBe(true);
+
+    fireEvent.click(toggle);
+    const panel = await screen.findByTestId("page-panel-body");
+    expect(screen.getByTestId("backoffice-sidebar-rail").contains(panel)).toBe(true);
+    expect(screen.getByRole("main").contains(panel)).toBe(false);
+  });
+
+  it("takes a list template's sidebar into the shell rail", async () => {
+    renderShell(
+      <ListPageLayout
+        sidebar={<div data-testid="template-filters">filters</div>}
+        sidebarLabel="Filters"
+      >
+        <div>records</div>
+      </ListPageLayout>,
+    );
+    expect(screen.queryByTestId("list-page-sidebar")).toBeNull();
+    expect(screen.queryByTestId("template-filters")).toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: "Toggle sidebar" }));
+    const filters = await screen.findByTestId("template-filters");
+    expect(screen.getByTestId("backoffice-sidebar-rail").contains(filters)).toBe(true);
+    expect(screen.getByRole("main").contains(filters)).toBe(false);
+    expect(screen.getByTestId("backoffice-shell-page-panel-toggle").textContent).toBe("Filters");
+  });
+
+  it("leaves an outer page panel registered when a nested template has no sidebar", async () => {
+    renderShell(
+      <>
+        <PanelPage />
+        <ListPageLayout>
+          <div>records</div>
+        </ListPageLayout>
+      </>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Toggle sidebar" }));
+    expect(await screen.findByTestId("page-panel-body")).toBeTruthy();
+  });
+
+  it("collapses the stacked group from its header", async () => {
+    renderShell(<PanelPage />);
+    fireEvent.click(screen.getByRole("button", { name: "Toggle sidebar" }));
+    const toggle = await screen.findByTestId("backoffice-shell-page-panel-toggle");
+    expect(toggle.getAttribute("aria-expanded")).toBe("true");
+    fireEvent.click(toggle);
+    await waitFor(() => expect(screen.queryByTestId("page-panel-body")).toBeNull());
+    expect(toggle.getAttribute("aria-expanded")).toBe("false");
+  });
+
+  it("withdraws the panel when the page unmounts", async () => {
+    const view = renderShell(<PanelPage />);
+    fireEvent.click(screen.getByRole("button", { name: "Toggle sidebar" }));
+    await screen.findByTestId("page-panel-body");
+    view.rerender(
+      <BackofficeProvider
+        frappe={{ baseURL: MOCK_HOST, fixtures: fixtures() }}
+        navigation={createMemoryNavigator("/backoffice")}
+      >
+        <BackofficeShell>
+          <div>other page</div>
+        </BackofficeShell>
+      </BackofficeProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("backoffice-shell-page-panel")).toBeNull());
+  });
+
+  it("offers no slot when the shell draws no rail, so the page keeps its own column", () => {
+    let taken = true;
+    renderShell(<PanelPage onTaken={(value) => (taken = value)} />, false);
+    expect(taken).toBe(false);
+    expect(screen.queryByTestId("backoffice-shell-page-panel")).toBeNull();
+  });
+});
+
+describe("desk list (LC-101 ONE-SIDEBAR)", () => {
+  it("puts the list's facet panel in the shell rail, never in a column beside it", async () => {
+    renderWithProviders(
+      <Desk
+        frappe={{ baseURL: MOCK_HOST, fixtures: fixtures() }}
+        navigation={createMemoryNavigator("/backoffice/todo")}
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Toggle sidebar" }));
+    const panel = await screen.findByLabelText("List filters sidebar", undefined, {
+      timeout: 8000,
+    });
+    const rail = screen.getByTestId("backoffice-sidebar-rail");
+    expect(rail.contains(panel)).toBe(true);
+    expect(screen.getAllByLabelText("List filters sidebar")).toHaveLength(1);
+    expect(screen.getByRole("main").contains(panel)).toBe(false);
+  });
+});

package/src/shell/shellSidebarSlot.tsx

@@ -0,0 +1,7 @@
+export {
+  ShellSidebarSlotProvider,
+  useHasShellSidebarSlot,
+  useShellSidebarPanel,
+  useShellSidebarSlotState,
+  type ShellSidebarPanel,
+} from "@multiplatform.one/components";

package/src/shell/useWorkspaces.spec.tsx

@@ -25,6 +25,12 @@ import type { ReactNode } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi, type MockInstance } from "vitest";
 import { useWorkspaces } from "./useWorkspaces";
 
+const sessionIdentity = vi.hoisted(() => ({ resolved: true }));
+vi.mock("../shared/sessionUser", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../shared/sessionUser")>()),
+  useSessionIdentity: () => sessionIdentity,
+}));
+
 const makeFixtures = () =>
   new InMemoryFixtureProvider({
     Workspace: [
@@ -60,6 +66,7 @@ describe("useWorkspaces teardown", () => {
     );
 
   beforeEach(() => {
+    sessionIdentity.resolved = true;
     errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
   });
 
@@ -67,6 +74,44 @@ describe("useWorkspaces teardown", () => {
     errorSpy.mockRestore();
   });
 
+  it("exposes a refused initial sync instead of reporting an empty account", async () => {
+    const fixtures = makeFixtures();
+    const error = Object.assign(new Error("Forbidden"), { status: 403 });
+    const reads = vi.spyOn(fixtures, "getList").mockRejectedValue(error);
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <FrappeProvider baseURL="http://workspace-refused.fixtures.local" fixtures={fixtures}>
+        {children}
+      </FrappeProvider>
+    );
+    const { result, unmount } = renderHook(() => useWorkspaces(), { wrapper });
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(result.current.error).toBe(error);
+    expect(result.current.refused).toBe(true);
+    expect(result.current.workspaces).toEqual([]);
+    expect(reads).toHaveBeenCalledTimes(1);
+    unmount();
+  });
+
+  it("waits for session identity after a refused workspace sync", async () => {
+    sessionIdentity.resolved = false;
+    const fixtures = makeFixtures();
+    const error = Object.assign(new Error("Forbidden"), { status: 403 });
+    vi.spyOn(fixtures, "getList").mockRejectedValue(error);
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <FrappeProvider baseURL="http://workspace-session-pending.fixtures.local" fixtures={fixtures}>
+        {children}
+      </FrappeProvider>
+    );
+    const { result, rerender, unmount } = renderHook(() => useWorkspaces(), { wrapper });
+    await waitFor(() => expect(result.current.error).toBe(error));
+    expect(result.current.isLoading).toBe(true);
+    sessionIdentity.resolved = true;
+    rerender();
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.refused).toBe(true);
+    unmount();
+  });
+
   it(
     "unmount → natural wind-down → remount: no live-query errors, data reloads",
     { timeout: 20000 },