@multiplatform.one/backoffice 6.3.0 → 6.4.1

package/src/shared/useSlugTarget.ts

@@ -0,0 +1,143 @@
+// Contract: resolve a {basePath}/[slug] segment to a workspace or doctype.
+// Every backoffice route relies on this hook; keep the signature stable.
+import { HttpClient, type AuthConfig, type FixtureProvider } from "@multiplatform.one/frappe";
+import { useFrappeConfig, type FrappeConfig } from "@multiplatform.one/frappe-ui";
+import { useEffect, useMemo, useState } from "react";
+import { slugToDisplayName, toSlug } from "../navigation/paths";
+import type { SlugTarget } from "./types";
+
+/**
+ * Slug → proper-cased-name indexes, fetched once per session.
+ *
+ * Workspaces win over doctypes on collision (desk parity: `/app/tools` is the
+ * Tools workspace even though a "Tools" doctype could exist).
+ */
+interface SlugIndex {
+  workspaces: Map<string, string>;
+  doctypes: Map<string, string>;
+}
+
+interface SlugIndexSource {
+  baseURL: string;
+  auth?: FrappeConfig["auth"];
+  fixtures?: FixtureProvider;
+}
+
+/** Module-level cache: one fetch per (baseURL, fixture-mode) per session. */
+const slugIndexCache = new Map<string, Promise<SlugIndex>>();
+
+function toSlugMap(names: readonly { name?: string }[]): Map<string, string> {
+  const map = new Map<string, string>();
+  for (const row of names) {
+    if (row.name) map.set(toSlug(row.name), row.name);
+  }
+  return map;
+}
+
+async function fetchSlugIndex(source: SlugIndexSource): Promise<SlugIndex> {
+  if (source.fixtures) {
+    const [workspaces, doctypes] = await Promise.all([
+      source.fixtures.getList("Workspace", { fields: ["name"] }),
+      source.fixtures.getList("DocType", { fields: ["name"] }),
+    ]);
+    return {
+      workspaces: toSlugMap(workspaces as { name?: string }[]),
+      doctypes: toSlugMap(doctypes as { name?: string }[]),
+    };
+  }
+  const client = new HttpClient(source.baseURL, source.auth as AuthConfig | undefined);
+  const [workspacesRes, doctypesRes] = await Promise.all([
+    client.get<{ data?: { name: string }[] }>("/api/resource/Workspace", {
+      fields: '["name"]',
+      limit_page_length: "0",
+    }),
+    client.get<{ message?: { name: string }[] }>("/api/method/frappe.client.get_list", {
+      doctype: "DocType",
+      fields: '["name"]',
+      limit_page_length: "0",
+    }),
+  ]);
+  return {
+    workspaces: toSlugMap(workspacesRes.payload?.data ?? []),
+    doctypes: toSlugMap(doctypesRes.payload?.message ?? []),
+  };
+}
+
+function getSlugIndex(source: SlugIndexSource): Promise<SlugIndex> {
+  const key = `${source.baseURL}:${source.fixtures ? "fixtures" : "live"}`;
+  let promise = slugIndexCache.get(key);
+  if (!promise) {
+    promise = fetchSlugIndex(source);
+    // Failed fetches are evicted so a later mount can retry.
+    promise.catch(() => {
+      if (slugIndexCache.get(key) === promise) slugIndexCache.delete(key);
+    });
+    slugIndexCache.set(key, promise);
+  }
+  return promise;
+}
+
+/**
+ * Resolve a URL slug ("sales-order") to its target:
+ * - a Workspace whose slugged name matches → workspace page (workspaces win)
+ * - otherwise a DocType whose slugged name matches → doctype list
+ * - otherwise not-found
+ *
+ * The Workspace + DocType name indexes are fetched once per session (module
+ * cache) via the frappe client, honoring FrappeProvider fixtures in stories
+ * and tests. Connection comes exclusively from the ambient FrappeProvider
+ * (mounted by BackofficeProvider); without one the hook degrades the same
+ * way a failed fetch does. SSR-safe: the fetch runs in an effect, so the
+ * server render (and first client paint) reports `loading`. If the fetch
+ * fails the hook degrades gracefully by treating the slug as a title-cased
+ * doctype.
+ */
+export function useSlugTarget(slug: string | undefined): SlugTarget {
+  const config = useFrappeConfig();
+  const baseURL = config?.baseURL;
+  const fixtures = config?.fixtures;
+  const auth = config?.auth;
+
+  const [index, setIndex] = useState<SlugIndex | undefined>(undefined);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    // No provider config → no bench to ask; degrade like a failed fetch.
+    if (!baseURL && !fixtures) {
+      setFailed(true);
+      return;
+    }
+    setFailed(false);
+    getSlugIndex({ baseURL: baseURL ?? "", auth, fixtures })
+      .then((result) => {
+        if (!cancelled) setIndex(result);
+      })
+      .catch(() => {
+        if (!cancelled) setFailed(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+    // `auth` is intentionally not a dependency: the cache is keyed by
+    // baseURL/fixtures and provider auth is stable for the session.
+    // oxlint-disable-next-line exhaustive-deps
+  }, [baseURL, fixtures]);
+
+  return useMemo<SlugTarget>(() => {
+    if (!slug) return { status: "loading" };
+    if (index) {
+      const workspace = index.workspaces.get(slug);
+      if (workspace) return { status: "resolved", kind: "workspace", workspace };
+      const doctype = index.doctypes.get(slug);
+      if (doctype) return { status: "resolved", kind: "doctype", doctype };
+      return { status: "not-found", slug };
+    }
+    if (failed) {
+      // Degrade gracefully: guess a title-cased doctype so deep links still
+      // land somewhere useful when the metadata fetch is unavailable.
+      return { status: "resolved", kind: "doctype", doctype: slugToDisplayName(slug) };
+    }
+    return { status: "loading" };
+  }, [slug, index, failed]);
+}

package/src/shared/useUserRoles.ts

@@ -0,0 +1,66 @@
+/**
+ * Session user's role list — the client-side half of desk's
+ * `frappe.user_roles` (bootinfo). Fetched once per session via the
+ * whitelisted `frappe.core.doctype.user.user.get_roles` RPC (probed:
+ * `?uid=<user>` → `{"message": ["Role", ...]}`), keyed off
+ * `frappe.auth.get_logged_user`.
+ *
+ * `roles` stays undefined while loading, in fixture mode, or when the RPC
+ * fails — consumers (permlevel matrix) fall back to the conservative
+ * "permlevel > 0 → read-only" rule in that case.
+ */
+
+import { useFrappeConfig } from "@multiplatform.one/frappe-ui";
+import { useEffect, useState } from "react";
+import { useFrappeApp } from "./useFrappeApp";
+
+const rolesCache = new Map<string, Promise<string[]>>();
+
+export function useUserRoles(): { roles?: string[] } {
+  const app = useFrappeApp();
+  const config = useFrappeConfig();
+  const fixtures = config?.fixtures;
+  const baseURL = config?.baseURL;
+  const [roles, setRoles] = useState<string[] | undefined>(undefined);
+
+  useEffect(() => {
+    // Fixture mode has no session — permlevel falls back to the coarse rule.
+    if (!app || fixtures || !baseURL) {
+      setRoles(undefined);
+      return;
+    }
+    let cancelled = false;
+    let promise = rolesCache.get(baseURL);
+    if (!promise) {
+      promise = app
+        .call()
+        .get<{ message?: string }>("frappe.auth.get_logged_user")
+        .then((res) => {
+          const user = res.payload?.message;
+          if (!user) throw new Error("No session user");
+          return app.call().get<{ message?: string[] }>("frappe.core.doctype.user.user.get_roles", {
+            uid: user,
+          });
+        })
+        .then((res) => {
+          const list = res.payload?.message;
+          if (!Array.isArray(list)) throw new Error("No roles returned");
+          return list;
+        });
+      rolesCache.set(baseURL, promise);
+      promise.catch(() => rolesCache.delete(baseURL));
+    }
+    promise
+      .then((list) => {
+        if (!cancelled) setRoles(list);
+      })
+      .catch(() => {
+        if (!cancelled) setRoles(undefined);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [app, fixtures, baseURL]);
+
+  return { roles };
+}

package/src/shell/WorkspaceSidebar.tsx

@@ -99,6 +99,9 @@ export function WorkspaceSidebar({ activePath, onNavigate }: WorkspaceSidebarPro
         items: flattenTree(publicRoots, childrenByParent, paths, activePath, onNavigate),
       });
     }
+    // A lone group label is noise (owner-flagged): only caption sections when
+    // there is more than one group to distinguish.
+    if (result.length === 1) result[0] = { ...result[0], title: undefined };
     return result;
   }, [privateWorkspaces, publicRoots, childrenByParent, paths, activePath, onNavigate, t]);
 

package/src/workspace/WorkspaceChartBlock.tsx

@@ -0,0 +1,115 @@
+/**
+ * Workspace chart block — renders a Dashboard Chart by name using the desk
+ * chart RPC for real series data, drawn with the catalog ChartCard.
+ *
+ * Mappings (frappe → catalog): Line→line, Bar→bar, Pie/Donut/Percentage→pie.
+ * Heatmap has no catalog equivalent and falls back to bar (documented gap).
+ * Only the first dataset is drawn — the catalog chart is single-series
+ * (documented gap). In fixture mode (stories) the RPC is unavailable, so
+ * the block renders an informational card instead.
+ */
+import { AsyncBoundary, Card, SizableText, Skeleton, YStack } from "@multiplatform.one/components";
+import { ChartCard, type ChartConfig, type ChartType } from "@multiplatform.one/frappe-ui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import type { WorkspaceChartRow } from "./types";
+import { useDashboardChartData, type DashboardChartDoc } from "./useDashboardChart";
+import { useFrappeDoc } from "./useWorkspaceDoc";
+
+function toChartType(frappeType: string | undefined): ChartType {
+  switch (frappeType) {
+    case "Line":
+      return "line";
+    case "Pie":
+    case "Donut":
+    case "Percentage":
+      return "pie";
+    default:
+      // "Bar", "Heatmap" (no catalog heatmap yet), unknown → bar.
+      return "bar";
+  }
+}
+
+export interface WorkspaceChartBlockProps {
+  row: WorkspaceChartRow;
+}
+
+export function WorkspaceChartBlock({ row }: WorkspaceChartBlockProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const title = row.label || row.chart_name;
+
+  const {
+    doc: chartDoc,
+    isLoading: docLoading,
+    error: docError,
+  } = useFrappeDoc<DashboardChartDoc>("Dashboard Chart", row.chart_name);
+  const {
+    series,
+    isLoading: dataLoading,
+    error: dataError,
+    unsupported,
+  } = useDashboardChartData(row.chart_name);
+
+  const config = useMemo<ChartConfig | undefined>(() => {
+    if (!series) return undefined;
+    const dataset = series.datasets?.[0];
+    if (!dataset) return undefined;
+    return {
+      id: `workspace-chart-${row.name}`,
+      title,
+      type: toChartType(chartDoc?.type),
+      data: series.labels.map((label, index) => ({
+        label,
+        value: dataset.values[index] ?? 0,
+      })),
+      height: 220,
+    };
+  }, [series, chartDoc?.type, row.name, title]);
+
+  if (unsupported) {
+    return (
+      <Card flexGrow={1}>
+        <YStack {...knobProps.panelPadding} {...knobProps.gap}>
+          <SizableText size="$4" fontWeight="700">
+            {title}
+          </SizableText>
+          <SizableText size="$2" color="$color10">
+            {t(
+              "workspaceChartFixture",
+              "Chart data is only available on a live bench",
+            )}
+          </SizableText>
+        </YStack>
+      </Card>
+    );
+  }
+
+  if (docLoading || dataLoading) {
+    return (
+      <Card flexGrow={1} aria-busy aria-label={t("loading", "Loading")}>
+        <YStack {...knobProps.panelPadding} {...knobProps.gap}>
+          <Skeleton width="40%" height={16} />
+          <Skeleton variant="rounded" width="100%" height={220} />
+        </YStack>
+      </Card>
+    );
+  }
+
+  const error = docError ?? dataError;
+  if (error || !config) {
+    return (
+      <AsyncBoundary
+        compact
+        error={error ?? true}
+        errorTitle={t("workspaceChartError", "Couldn't load chart {{title}}", {
+          title,
+        })}
+      />
+    );
+  }
+
+  return <ChartCard config={config} flexGrow={1} />;
+}

package/src/workspace/WorkspaceGrid.tsx

@@ -0,0 +1,82 @@
+/**
+ * 12-column workspace grid — desk parity for the editorjs block layout.
+ *
+ * Blocks carry a `col` span (3 = shortcut, 4 = card, 12 = full row).
+ * Consecutive blocks accumulate into rows of up to 12 columns and each row
+ * lays out with flex ratios, so no pixel math is needed. The container
+ * measures itself with `onLayout` (cross-platform — no media queries, no
+ * DOM) and collapses spans on narrow widths: everything full-width on
+ * phones, two-up on mid widths, desk's ~3–4 column layout when wide.
+ */
+import { XStack, YStack, type YStackProps } from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useState, type ReactNode } from "react";
+
+/** Container width below which every block is full-width. */
+const NARROW_MAX = 640;
+/** Container width below which small blocks go two-up. */
+const MEDIUM_MAX = 960;
+
+export interface WorkspaceGridItem {
+  key: string;
+  /** 12-column span requested by the block (defaults to 12). */
+  col?: number;
+  node: ReactNode;
+}
+
+function effectiveSpan(raw: number | undefined, width: number): number {
+  const span = Math.min(Math.max(Math.round(raw ?? 12), 1), 12);
+  if (width <= 0) return span; // not measured yet — desk-wide layout
+  if (width < NARROW_MAX) return 12;
+  if (width < MEDIUM_MAX) return span <= 6 ? 6 : 12;
+  return span;
+}
+
+export interface WorkspaceGridProps extends YStackProps {
+  items: WorkspaceGridItem[];
+}
+
+export function WorkspaceGrid({ items, ...stackProps }: WorkspaceGridProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [width, setWidth] = useState(0);
+
+  // Chunk consecutive blocks into rows of up to 12 columns (desk behavior).
+  const rows: Array<Array<{ item: WorkspaceGridItem; span: number }>> = [];
+  let current: Array<{ item: WorkspaceGridItem; span: number }> = [];
+  let used = 0;
+  for (const item of items) {
+    const span = effectiveSpan(item.col, width);
+    if (used + span > 12 && current.length > 0) {
+      rows.push(current);
+      current = [];
+      used = 0;
+    }
+    current.push({ item, span });
+    used += span;
+  }
+  if (current.length > 0) rows.push(current);
+
+  return (
+    <YStack
+      {...knobProps.gap}
+      onLayout={(event) => setWidth(event.nativeEvent.layout.width)}
+      {...stackProps}
+    >
+      {rows.map((row, rowIndex) => {
+        const rowUsed = row.reduce((sum, cell) => sum + cell.span, 0);
+        return (
+          <XStack key={row[0]?.item.key ?? rowIndex} {...knobProps.gap} alignItems="stretch">
+            {row.map(({ item, span }) => (
+              <YStack key={item.key} flexGrow={span} flexShrink={1} flexBasis={0} minWidth={0}>
+                {item.node}
+              </YStack>
+            ))}
+            {/* Filler keeps a partial row's cells at their 12-col width
+                (a lone col-3 shortcut stays ~25%, like desk). */}
+            {rowUsed < 12 ? <YStack flexGrow={12 - rowUsed} flexBasis={0} /> : null}
+          </XStack>
+        );
+      })}
+    </YStack>
+  );
+}

package/src/workspace/WorkspaceLinkCard.tsx

@@ -0,0 +1,134 @@
+/**
+ * Workspace link card — desk parity for the `card` content block: a titled
+ * card listing the Link rows that follow the matching "Card Break" row in
+ * the `links` child table. DocType links navigate to the doctype list;
+ * Report/Page links go through the slug router best-effort (see
+ * `resolveLinkTarget`).
+ *
+ * Rendering gates: link rows targeting doctypes outside the provider's
+ * `doctypes` scope are hidden, and DocType/Report rows (list-surface
+ * navigations) are hidden entirely when the `views` capability is off.
+ */
+import { Card, SizableText, XStack, YStack } from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useTranslation } from "react-i18next";
+import {
+  useBackofficeCapabilities,
+  useBackofficeNavigator,
+  useBackofficePaths,
+  useIsDoctypeAllowed,
+} from "../config/BackofficeProvider";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { createBackofficePaths, type BackofficePaths } from "../navigation/paths";
+import type { WorkspaceLinkGroup, WorkspaceLinkRow } from "./types";
+
+const defaultPaths = createBackofficePaths();
+
+/**
+ * Resolve a Workspace Link row to a router path (basePath-aware when the
+ * provider's `paths` are passed; defaults to the canonical "/backoffice").
+ * - DocType → paths.list(link_to)
+ * - Report → paths.list(link_to) fallback (no query-report route yet — the
+ *   slug router decides; documented gap)
+ * - Page → `{base}/<link_to>` (page names are already slugs)
+ * - anything else → disabled
+ */
+export function resolveLinkTarget(
+  row: WorkspaceLinkRow,
+  paths: BackofficePaths = defaultPaths,
+): {
+  path?: string;
+  disabled?: boolean;
+} {
+  const target = row.link_to ?? "";
+  if (!target) return { disabled: true };
+  const prefix = paths.base === "/" ? "" : paths.base;
+  switch (row.link_type) {
+    case "DocType":
+      return { path: paths.list(target) };
+    case "Report":
+      return { path: paths.list(target) };
+    case "Page":
+      return { path: `${prefix}/${target}` };
+    default:
+      return { disabled: true };
+  }
+}
+
+function LinkRow({ row }: { row: WorkspaceLinkRow }) {
+  const navigator = useBackofficeNavigator();
+  const paths = useBackofficePaths();
+  const target = resolveLinkTarget(row, paths);
+  return (
+    <XStack
+      onPress={target.disabled ? undefined : () => target.path && navigator.navigate(target.path)}
+      disabled={target.disabled}
+      opacity={target.disabled ? 0.5 : 1}
+      cursor={target.disabled ? "default" : "pointer"}
+      paddingVertical="$1.5"
+      alignItems="center"
+      role="link"
+      aria-label={row.label}
+      hoverStyle={target.disabled ? undefined : { backgroundColor: "$color3" }}
+      borderRadius="$2"
+    >
+      <SizableText
+        size="$3"
+        color={target.disabled ? "$color10" : "$color12"}
+        numberOfLines={1}
+        flexShrink={1}
+        hoverStyle={target.disabled ? undefined : { color: "$color12" }}
+      >
+        {row.label}
+      </SizableText>
+    </XStack>
+  );
+}
+
+export interface WorkspaceLinkCardProps {
+  group: WorkspaceLinkGroup;
+}
+
+export function WorkspaceLinkCard({ group }: WorkspaceLinkCardProps) {
+  const { knobProps } = useResolvedKnobs();
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { views } = useBackofficeCapabilities();
+  const isDoctypeAllowed = useIsDoctypeAllowed();
+
+  // Visibility gates: doctype scope + the views capability (DocType/Report
+  // rows navigate to list surfaces). Defaults (scope open, views on) keep
+  // every authored row, desk parity.
+  const visibleLinks = group.links.filter((row) => {
+    if (row.link_type === "DocType" || row.link_type === "Report") {
+      if (!views.enabled) return false;
+      if (row.link_type === "DocType" && row.link_to && !isDoctypeAllowed(row.link_to)) {
+        return false;
+      }
+    }
+    return true;
+  });
+
+  return (
+    <Card flexGrow={1} height="100%">
+      <YStack {...knobProps.panelPadding} {...knobProps.gap} flex={1}>
+        {/* Catalog list-group caption (Sidebar section-label treatment):
+            small-caps muted label, no underline rule — a full-width rule
+            under uneven columns read as table chrome (Axiom 16). */}
+        <SizableText size="$2" fontWeight="600" textTransform="uppercase" color="$color11">
+          {group.label}
+        </SizableText>
+        {visibleLinks.length === 0 ? (
+          <SizableText size="$2" color="$color10">
+            {t("workspaceCardEmpty", "No links in this section")}
+          </SizableText>
+        ) : (
+          <YStack>
+            {visibleLinks.map((row) => (
+              <LinkRow key={row.name} row={row} />
+            ))}
+          </YStack>
+        )}
+      </YStack>
+    </Card>
+  );
+}

package/src/workspace/WorkspaceLinkDirectory.tsx

@@ -0,0 +1,126 @@
+/**
+ * "Browse all" disclosure for the workspace link farm (MOD-11): the grouped
+ * link cards render inside one collapsible region with a local type-to-filter
+ * input, so 20–30 links stay fully reachable and searchable (capability
+ * parity with desk) without owning the top of the landing page. Expanded by
+ * default on desktop-width viewports, collapsed on phones and native.
+ */
+import { EmptyState, Accordion, YStack } from "@multiplatform.one/components";
+import { SearchInput, useViewportGtSm } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import type { WorkspaceLinkGroup } from "./types";
+import { WorkspaceGrid, type WorkspaceGridItem } from "./WorkspaceGrid";
+import { WorkspaceLinkCard } from "./WorkspaceLinkCard";
+
+export interface WorkspaceLinkDirectoryItem {
+  /** Stable key from the authored card block. */
+  key: string;
+  /** Authored 12-column span (defaults to 4, desk's card width). */
+  col?: number;
+  group: WorkspaceLinkGroup;
+}
+
+export interface WorkspaceLinkDirectoryProps {
+  items: WorkspaceLinkDirectoryItem[];
+}
+
+const DIRECTORY_VALUE = "links";
+
+/**
+ * Case-insensitive filter over a link group: a match on the group label
+ * keeps the whole card; otherwise the card narrows to its matching links
+ * (and disappears when none match).
+ */
+export function filterLinkGroup(
+  group: WorkspaceLinkGroup,
+  query: string,
+): WorkspaceLinkGroup | undefined {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return group;
+  if (group.label.toLowerCase().includes(needle)) return group;
+  const links = group.links.filter((row) => row.label.toLowerCase().includes(needle));
+  return links.length > 0 ? { ...group, links } : undefined;
+}
+
+export function WorkspaceLinkDirectory({ items }: WorkspaceLinkDirectoryProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const viewportGtSm = useViewportGtSm();
+  const [filter, setFilter] = useState("");
+  // Uncontrolled-once default: open on desktop-width viewports, collapsed on
+  // phones/native (SPA render — the viewport is known at first render).
+  // Later resizes don't override the user's toggle.
+  const [openValue, setOpenValue] = useState(() => (viewportGtSm ? DIRECTORY_VALUE : ""));
+
+  const totalLinks = useMemo(
+    () => items.reduce((sum, item) => sum + item.group.links.length, 0),
+    [items],
+  );
+
+  const filteredItems = useMemo<WorkspaceGridItem[]>(
+    () =>
+      items.flatMap((item) => {
+        const group = filterLinkGroup(item.group, filter);
+        if (!group) return [];
+        return [
+          {
+            key: item.key,
+            col: item.col ?? 4,
+            node: <WorkspaceLinkCard group={group} />,
+          },
+        ];
+      }),
+    [items, filter],
+  );
+
+  return (
+    <Accordion
+      type="single"
+      collapsible
+      variant="card"
+      value={openValue}
+      onValueChange={setOpenValue}
+    >
+      <Accordion.Item value={DIRECTORY_VALUE}>
+        <Accordion.Trigger
+          // Count-based plural via i18next suffix resolution ("1 link" /
+          // "N links"); defaultValue_* carries the en fallback per form.
+          description={t("workspaceBrowseAllCount", {
+            count: totalLinks,
+            defaultValue_one: "{{count}} link",
+            defaultValue_other: "{{count}} links",
+          })}
+        >
+          {t("workspaceBrowseAll", "Browse all")}
+        </Accordion.Trigger>
+        <Accordion.Content>
+          <YStack {...knobProps.gap}>
+            <SearchInput
+              value={filter}
+              onChange={setFilter}
+              debounceMs={0}
+              compact
+              placeholder={t("workspaceFilterLinks", "Filter links...")}
+              aria-label={t("workspaceFilterLinks", "Filter links...")}
+            />
+            {filteredItems.length === 0 ? (
+              <EmptyState
+                compact
+                title={t(
+                  "workspaceFilterNoMatch",
+                  'No links match "{{query}}"',
+                  { query: filter.trim() },
+                )}
+              />
+            ) : (
+              <WorkspaceGrid items={filteredItems} />
+            )}
+          </YStack>
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+  );
+}