@multiplatform.one/backoffice 7.34.4 → 7.36.0

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 },

package/src/shell/useWorkspaces.ts

@@ -11,8 +11,9 @@
  * result so isolated mounts stay deterministic.
  */
 import { useFrappeCollection, useLiveQuery, type FixtureProvider } from "@multiplatform.one/frappe";
-import { useFrappeConfig } from "@multiplatform.one/frappe-ui";
-import { useMemo } from "react";
+import { isPermissionError, useFrappeConfig } from "@multiplatform.one/frappe-ui";
+import { useMemo, useState } from "react";
+import { useSessionIdentity } from "../shared/sessionUser";
 import { useSessionUserId } from "../shared/useSessionUserId";
 
 export interface WorkspaceDoc {
@@ -53,6 +54,8 @@ export function useSessionUser(): string | undefined {
 // ---------------------------------------------------------------------------
 
 export interface WorkspacesResult {
+  error?: unknown;
+  refused: boolean;
   /** All visible workspaces, sorted by sequence_id. */
   workspaces: WorkspaceDoc[];
   /** Session user's private workspaces (desk shows these on top). */
@@ -76,7 +79,8 @@ function bySequence(a: WorkspaceDoc, b: WorkspaceDoc): number {
 
 export function useWorkspaces(): WorkspacesResult {
   const config = useFrappeConfig();
-  const sessionUser = useSessionUser();
+  const { user: sessionUser, resolved: sessionResolved } = useSessionIdentity();
+  const [failure, setFailure] = useState<{ connection: unknown; error: unknown }>();
 
   // Stable connection config: a fresh object identity per render would
   // re-run the collection hook's internal effects (DeskSidebar precedent).
@@ -99,7 +103,9 @@ export function useWorkspaces(): WorkspacesResult {
 
   const collection = useFrappeCollection<WorkspaceDoc>(connectionConfig, "Workspace", {
     fields: WORKSPACE_FIELDS as unknown as (keyof WorkspaceDoc & string)[],
+    onSyncError: (error) => setFailure({ connection: connectionConfig, error }),
   });
+  const error = failure?.connection === connectionConfig ? failure?.error : undefined;
   const { data: rawData, isLoading } = useLiveQuery(
     (q) => (collection ? q.from({ _workspace: collection }) : null),
     [collection],
@@ -130,15 +136,20 @@ export function useWorkspaces(): WorkspacesResult {
     }
 
     return {
+      error,
+      refused: isPermissionError(error),
       workspaces: all,
       privateWorkspaces,
       publicRoots,
       childrenByParent,
       // No provider config → settle empty instead of skeleting forever.
-      isLoading: connectionConfig ? Boolean(isLoading) || collection === undefined : false,
+      // A refused sync settles, but only once the session identity is known.
+      isLoading: connectionConfig
+        ? !sessionResolved || (!error && (Boolean(isLoading) || collection === undefined))
+        : false,
       sessionUser,
     };
-  }, [rawData, isLoading, collection, connectionConfig, sessionUser]);
+  }, [rawData, isLoading, collection, connectionConfig, sessionUser, sessionResolved, error]);
 }
 
 /**
@@ -146,8 +157,13 @@ export function useWorkspaces(): WorkspacesResult {
  * user's first private workspace, else the first public workspace by
  * sequence order.
  */
-export function useDefaultWorkspace(): { workspace?: string; isLoading: boolean } {
-  const { privateWorkspaces, publicRoots, isLoading } = useWorkspaces();
+export function useDefaultWorkspace(): {
+  workspace?: string;
+  isLoading: boolean;
+  error?: unknown;
+  refused: boolean;
+} {
+  const { privateWorkspaces, publicRoots, isLoading, error, refused } = useWorkspaces();
   const workspace = privateWorkspaces[0]?.name ?? publicRoots[0]?.name;
-  return { workspace, isLoading };
+  return { workspace, isLoading, error, refused };
 }

package/src/views/DashboardView.tsx

@@ -178,14 +178,14 @@ export function DashboardView({ doctype }: DashboardViewProps) {
               <ChartSkeletonCard height={CHART_HEIGHT} />
             ) : weekly.error ? (
               <AsyncBoundary
-                compact
+                size="$3"
                 error={weekly.error}
                 errorTitle={t("views.weeklyChartFailed", "Couldn't load weekly activity")}
                 onRetry={weekly.refresh}
               />
             ) : weekly.isEmpty ? (
               <AsyncBoundary
-                compact
+                size="$3"
                 empty
                 emptyTitle={t("views.weeklyChartEmpty", "No recent activity")}
                 emptyDescription={t(

package/src/views/ImageView.tsx

@@ -8,7 +8,7 @@ import { useTranslation } from "react-i18next";
 import { useBackofficeNavigator, useBackofficePaths } from "../config/BackofficeProvider";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import { useDeskScope } from "../desk/scope";
-import { detectCardFields, detectImageField, useViewMeta, type AnyDoc } from "./viewMeta";
+import { detectCardFields, detectImageField, useViewSource, type AnyDoc } from "./viewMeta";
 import { ViewError, ViewLoading, ViewUnsupported } from "./ViewStates";
 
 // The `one` compiler breaks explicit JSX generics — instantiate once.
@@ -24,9 +24,25 @@ export function ImageView({ doctype }: ImageViewProps) {
   const deskScope = useDeskScope();
   const navigator = useBackofficeNavigator();
   const paths = useBackofficePaths();
-  const { meta, isLoading: isMetaLoading, error: metaError } = useViewMeta(doctype);
+  const {
+    layoutMeta: meta,
+    loading: isMetaLoading,
+    error: metaError,
+    metaRefused,
+    recordShape,
+  } = useViewSource(doctype);
 
-  if (isMetaLoading) return <ViewLoading />;
+  if (isMetaLoading || (metaRefused && recordShape.status === "pending")) return <ViewLoading />;
+  if (metaRefused && !meta)
+    return (
+      <ViewUnsupported
+        doctype={doctype}
+        title={t("views.imageNotPermitted", "You can't open the {{doctype}} image view", {
+          doctype,
+        })}
+        description={metaError?.message}
+      />
+    );
   if (metaError && !meta) return <ViewError doctype={doctype} error={metaError} />;
   if (!meta) return <ViewLoading />;
 

package/src/views/ViewHeader.tsx

@@ -20,24 +20,23 @@ import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import type { BackofficeView } from "../navigation/paths";
 import { deskViewUrl } from "../shared/deskLinks";
 import { deriveAvailableViews } from "./viewAvailability";
-import { useViewMeta } from "./viewMeta";
+import { useViewMeta, useViewSource } from "./viewMeta";
 import { ViewSwitcherMenu } from "./ViewSwitcherMenu";
 
 export { useViewLabels } from "./ViewSwitcherMenu";
 
-/**
- * Views this doctype can actually render, derived from meta by
- * `deriveAvailableViews` (viewAvailability.ts documents each view's desk
- * precondition). The provider's `capabilities.views.allow` gates the offer
- * list too. Conditional views stay hidden until meta confirms them;
- * `current` is always included so the switcher stays honest about where you
- * are (e.g. a deep link to /view/tree on a flat doctype, which renders its
- * own unsupported state).
- */
-export function useAvailableViews(doctype: string, current?: BackofficeView): BackofficeView[] {
-  const { meta } = useViewMeta(doctype);
+export function useAvailableViews(doctype: string, _current?: BackofficeView): BackofficeView[] {
+  const { meta, metaRefused, recordShape } = useViewSource(doctype);
+  const { rights } = useDocRights(useFrappeConfig(), meta);
   const { views } = useBackofficeCapabilities();
-  return deriveAvailableViews(meta, { current, allow: views.enabled ? views.allow : [] });
+  return deriveAvailableViews(
+    meta
+      ? { kind: "meta", meta, rights }
+      : metaRefused && recordShape.fields
+        ? { kind: "record", fields: recordShape.fields }
+        : undefined,
+    { allow: views.enabled ? views.allow : [] },
+  );
 }
 
 export interface ViewHeaderProps {
@@ -53,7 +52,7 @@ export function ViewHeader({ doctype, view }: ViewHeaderProps) {
   const { frappe } = useBackofficeConfig();
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const { knobProps } = useResolvedKnobs();
-  const availableViews = useAvailableViews(doctype, view);
+  const availableViews = useAvailableViews(doctype);
   const { meta } = useViewMeta(doctype);
   const { rights } = useDocRights(useFrappeConfig(), meta);
   // Desk counterpart of this exact view (fixture mode has no desk).

package/src/views/ViewSwitcherMenu.spec.tsx

@@ -20,6 +20,9 @@ describe("ViewSwitcherMenu", () => {
       />,
     );
     expect(getByTestId("list-view-switcher")).toBeTruthy();
+    for (const icon of getByTestId("list-view-switcher").querySelectorAll("svg")) {
+      expect(icon.getAttribute("fill")).not.toBe("currentColor");
+    }
     // Segments would paint every label in the toolbar. The menu keeps them
     // inside the dropdown — only the current view is visible at rest.
     expect(queryByText("Report")).toBeNull();