@multiplatform.one/backoffice 6.3.0 → 6.4.1

package/src/workspace/WorkspaceNumberCard.tsx

@@ -0,0 +1,126 @@
+/**
+ * Workspace number card block — renders a Number Card doc by name.
+ *
+ * "Document Type" cards (the default) map cleanly onto the live aggregate
+ * widget: `function` (Count/Sum/Average/Minimum/Maximum) +
+ * `aggregate_function_based_on` + `filters_json` become a FrappeKPICard
+ * data source, so the value is realtime like desk. "Report" and "Custom"
+ * cards need server-side evaluation
+ * (`frappe.desk.doctype.number_card.number_card.get_result`) and are
+ * rendered as an informational card for now (documented gap).
+ */
+import { Card, SizableText, Skeleton, YStack } from "@multiplatform.one/components";
+import {
+  FrappeKPICard,
+  type FrappeAggregateOperation,
+  type FrappeKPIDataSource,
+} 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 { parseFrappeFilters } from "./parseContent";
+import type { WorkspaceNumberCardRow } from "./types";
+import { useFrappeDoc } from "./useWorkspaceDoc";
+
+export interface NumberCardDoc {
+  name: string;
+  doctype: string;
+  label?: string;
+  /** "Document Type" | "Report" | "Custom" */
+  type?: string;
+  document_type?: string;
+  /** "Count" | "Sum" | "Average" | "Minimum" | "Maximum" */
+  function?: string;
+  aggregate_function_based_on?: string;
+  filters_json?: string;
+  [key: string]: unknown;
+}
+
+const FUNCTION_MAP: Record<string, FrappeAggregateOperation> = {
+  Count: "count",
+  Sum: "sum",
+  Average: "avg",
+  Minimum: "min",
+  Maximum: "max",
+};
+
+export interface WorkspaceNumberCardProps {
+  row: WorkspaceNumberCardRow;
+}
+
+export function WorkspaceNumberCard({ row }: WorkspaceNumberCardProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const { doc, isLoading, error } = useFrappeDoc<NumberCardDoc>(
+    "Number Card",
+    row.number_card_name,
+  );
+
+  const title = row.label || doc?.label || row.number_card_name;
+
+  const dataSource = useMemo<FrappeKPIDataSource | undefined>(() => {
+    if (!doc?.document_type) return undefined;
+    if (doc.type && doc.type !== "Document Type") return undefined;
+    const aggregate = FUNCTION_MAP[doc.function ?? "Count"] ?? "count";
+    return {
+      doctype: doc.document_type,
+      aggregate,
+      field: aggregate === "count" ? undefined : doc.aggregate_function_based_on,
+      filters: parseFrappeFilters(doc.filters_json),
+    };
+  }, [doc]);
+
+  if (isLoading) {
+    return (
+      <Card flexGrow={1} aria-busy aria-label={t("loading", "Loading")}>
+        <YStack {...knobProps.panelPadding} {...knobProps.gap}>
+          <Skeleton width="60%" height={12} />
+          <Skeleton width="40%" height={28} />
+        </YStack>
+      </Card>
+    );
+  }
+
+  if (error || !doc) {
+    return (
+      <Card flexGrow={1}>
+        <YStack {...knobProps.panelPadding} {...knobProps.gap}>
+          <SizableText size="$3" fontWeight="600">
+            {title}
+          </SizableText>
+          <SizableText size="$2" color="$color10">
+            {t("workspaceNumberCardError", "Couldn't load number card")}
+          </SizableText>
+        </YStack>
+      </Card>
+    );
+  }
+
+  if (!dataSource) {
+    // Report / Custom cards need server-side evaluation — not wired yet.
+    return (
+      <Card flexGrow={1}>
+        <YStack {...knobProps.panelPadding} {...knobProps.gap}>
+          <SizableText size="$3" fontWeight="600">
+            {title}
+          </SizableText>
+          <SizableText size="$2" color="$color10">
+            {t(
+              "workspaceNumberCardUnsupported",
+              "This card type is only available in desk",
+            )}
+          </SizableText>
+        </YStack>
+      </Card>
+    );
+  }
+
+  return (
+    <FrappeKPICard
+      config={{ id: `workspace-number-card-${row.name}`, title, value: "—" }}
+      dataSource={dataSource}
+      flexGrow={1}
+    />
+  );
+}

package/src/workspace/WorkspaceQuickList.tsx

@@ -0,0 +1,100 @@
+/**
+ * Workspace quick list block — a compact live list of a doctype with the
+ * row's `quick_list_filter` applied, plus a "View All" jump to the full
+ * list page. Rows navigate to the document form. Rows show the document
+ * name — desk shows the meta title field, which needs a DocType meta
+ * fetch (documented simplification).
+ */
+import { Card, Separator, SizableText, XStack, YStack } from "@multiplatform.one/components";
+import { FrappeList } from "@multiplatform.one/frappe-ui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useBackofficeNavigator, useBackofficePaths } from "../config/BackofficeProvider";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { parseFrappeFilters } from "./parseContent";
+import type { WorkspaceQuickListRow } from "./types";
+
+interface QuickListDoc {
+  name: string;
+  doctype: string;
+}
+
+// Generic JSX (`<FrappeList<QuickListDoc> …/>`) breaks one-dev's source
+// annotation transform; instantiate the type argument outside JSX instead.
+const QuickList = FrappeList<QuickListDoc>;
+
+/** Fixed viewport for the compact list (~4 rows + load-more headroom). */
+const QUICK_LIST_HEIGHT = 220;
+
+export interface WorkspaceQuickListProps {
+  row: WorkspaceQuickListRow;
+}
+
+export function WorkspaceQuickList({ row }: WorkspaceQuickListProps) {
+  const navigator = useBackofficeNavigator();
+  const paths = useBackofficePaths();
+  const { knobProps } = useResolvedKnobs();
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+
+  const filters = useMemo(() => parseFrappeFilters(row.quick_list_filter), [row.quick_list_filter]);
+
+  const title = row.label || row.document_type;
+
+  return (
+    <Card flexGrow={1}>
+      <YStack {...knobProps.panelPadding} {...knobProps.gap}>
+        <XStack justifyContent="space-between" alignItems="center" {...knobProps.gap}>
+          <SizableText size="$4" fontWeight="700" numberOfLines={1} flexShrink={1}>
+            {title}
+          </SizableText>
+          <SizableText
+            size="$2"
+            color="$color11"
+            cursor="pointer"
+            role="link"
+            hoverStyle={{ color: "$color12" }}
+            onPress={() => navigator.navigate(paths.list(row.document_type))}
+          >
+            {t("workspaceQuickListViewAll", "View All")}
+          </SizableText>
+        </XStack>
+        <Separator />
+        {/* Fixed-height box: FrappeList's internal flex-basis:0 stack
+            contributes no intrinsic height, so an unclamped Card collapses
+            and the rows paint past the frame (LC-10). The box gives the
+            flex chain a definite height to fill. */}
+        <YStack height={QUICK_LIST_HEIGHT} overflow="hidden">
+          <QuickList
+            doctype={row.document_type}
+            fields={["name"]}
+            filters={filters as Array<["name", string, unknown]> | undefined}
+            pageSize={4}
+            height={QUICK_LIST_HEIGHT}
+            estimateSize={44}
+            aria-label={title}
+            renderItem={(item) => (
+              <XStack
+                paddingVertical="$2"
+                paddingHorizontal="$2"
+                alignItems="center"
+                cursor="pointer"
+                borderRadius="$2"
+                hoverStyle={{ backgroundColor: "$color3" }}
+                onPress={() =>
+                  item.name && navigator.navigate(paths.form(row.document_type, item.name))
+                }
+                role="link"
+                aria-label={item.name}
+              >
+                <SizableText size="$3" numberOfLines={1} flexShrink={1}>
+                  {item.name}
+                </SizableText>
+              </XStack>
+            )}
+          />
+        </YStack>
+      </YStack>
+    </Card>
+  );
+}

package/src/workspace/WorkspaceRecents.tsx

@@ -0,0 +1,100 @@
+/**
+ * "Continue where you left off" strip (MOD-11) — a wrapping band of chips
+ * for the most recent backoffice visits, read from the shared desk recents
+ * store (chrome/awesomebar-data's readRecentItems over the same
+ * "frappe-desk-recent" key frappe-ui's addToRecent writes — one list across
+ * navbar recents, sidebar recents, and this strip; no new store).
+ *
+ * Renders nothing while the store is unread or empty — the strip is
+ * discovery chrome, not data the page promised (no skeleton, D-10).
+ * Refreshes on mount and on window focus (web); paths outside the
+ * provider's basePath (e.g. the frappe-ui `/desk` demo shell writes there
+ * too) are filtered out so every chip stays navigable in this app.
+ */
+import { ClockCounterClockwiseIcon } from "@phosphor-icons/react";
+import { Card, PageSection, SizableText, XStack, useTheme } from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { readRecentItems, type RecentItem } from "../chrome/awesomebar-data";
+import { useBackofficeNavigator, useBackofficePaths } from "../config/BackofficeProvider";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+
+/** Last N visits shown (MOD-11: "last 5 items from the shared recents store"). */
+const MAX_RECENTS = 5;
+
+export function WorkspaceRecents() {
+  const navigator = useBackofficeNavigator();
+  const paths = useBackofficePaths();
+  const { knobProps } = useResolvedKnobs();
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const theme = useTheme();
+  // Phosphor icons take a resolved color string, not a tamagui token —
+  // read the theme value so native/GTK get a real color (not a CSS var).
+  const iconColor = typeof theme.color11?.val === "string" ? theme.color11.val : undefined;
+  const [recents, setRecents] = useState<RecentItem[]>([]);
+
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  const base = paths.base;
+  const refresh = useCallback(() => {
+    void readRecentItems().then((stored) => {
+      if (!mountedRef.current) return;
+      setRecents(stored.filter((item) => item.path.startsWith(base)).slice(0, MAX_RECENTS));
+    });
+  }, [base]);
+
+  // Fresh on mount and whenever the window regains focus (another surface
+  // may have pushed a visit since) — same staleness contract as the
+  // awesomebar's refresh-on-open.
+  useEffect(() => {
+    refresh();
+    if (typeof window === "undefined" || typeof window.addEventListener !== "function") {
+      return undefined;
+    }
+    const onFocus = () => refresh();
+    window.addEventListener("focus", onFocus);
+    return () => window.removeEventListener("focus", onFocus);
+  }, [refresh]);
+
+  if (recents.length === 0) return null;
+
+  return (
+    // Section heading on the shared sectionHeading scale (LC-17); no
+    // divider rule over a chip band (Axiom 16 chrome-earns-role).
+    <PageSection
+      title={t("workspaceRecents", "Continue where you left off")}
+      divider={false}
+    >
+      <XStack flexWrap="wrap" {...knobProps.gap}>
+        {recents.map((item) => (
+          <Card
+            key={item.path}
+            // Chip-scale surface: eject the Card's default panelPadding —
+            // the inner row owns the compact inset (LC-18 eject-last).
+            padding={0}
+            onPress={() => navigator.navigate(item.path)}
+            cursor="pointer"
+            hoverStyle={{ borderColor: "$accentBackground" }}
+            pressStyle={{ scale: 0.98 }}
+            role="link"
+            aria-label={item.label}
+          >
+            <XStack paddingHorizontal="$3" minHeight={44} alignItems="center" {...knobProps.gap}>
+              <ClockCounterClockwiseIcon size={14} color={iconColor} aria-hidden />
+              <SizableText size="$3" numberOfLines={1} flexShrink={1}>
+                {item.label}
+              </SizableText>
+            </XStack>
+          </Card>
+        ))}
+      </XStack>
+    </PageSection>
+  );
+}

package/src/workspace/WorkspaceScreen.tsx

@@ -0,0 +1,322 @@
+// Contract: renders a frappe Workspace document (shortcuts, link cards,
+// charts, number cards, quick lists) by workspace name.
+/**
+ * Dashboard-first workspace page (MOD-11). The Workspace doc's `content`
+ * JSON declares the blocks; the composition is ours, not desk's authoring
+ * order (owner mandate: desk is a capability reference, not a design
+ * constraint): recents strip, then live data widgets (number cards →
+ * charts → quick lists), then narrative text, then a compact shortcut chip
+ * band, then the grouped link cards behind a searchable "Browse all"
+ * disclosure. Each widget resolves its definition from the doc's child
+ * tables (`shortcuts`, `links`, `charts`, `number_cards`, `quick_lists`)
+ * — shapes verified against a real bench (see types.ts).
+ *
+ * Skipped block types (rendered as nothing, by design): `onboarding`
+ * (module onboarding widget needs its own RPC surface), `custom_block`
+ * (arbitrary HTML — unsafe cross-platform), and `spacer` (the section
+ * composition owns vertical rhythm now).
+ */
+import {
+  AsyncBoundary,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  PageHeader,
+  PageSection,
+  Paragraph,
+  Screen,
+  Skeleton,
+  XStack,
+  YStack,
+} from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useMemo, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import {
+  composeWorkspaceBlocks,
+  findLinkGroup,
+  findShortcut,
+  groupLinks,
+  headerLevel,
+  parseWorkspaceContent,
+  stripHtml,
+} from "./parseContent";
+import type { WorkspaceBlock, WorkspaceDoc, WorkspaceShortcutRow } from "./types";
+import { useWorkspaceDoc } from "./useWorkspaceDoc";
+import { WorkspaceChartBlock } from "./WorkspaceChartBlock";
+import { WorkspaceGrid, type WorkspaceGridItem } from "./WorkspaceGrid";
+import { WorkspaceLinkDirectory, type WorkspaceLinkDirectoryItem } from "./WorkspaceLinkDirectory";
+import { WorkspaceNumberCard } from "./WorkspaceNumberCard";
+import { WorkspaceQuickList } from "./WorkspaceQuickList";
+import { WorkspaceRecents } from "./WorkspaceRecents";
+import { WorkspaceShortcut } from "./WorkspaceShortcut";
+
+/** Block classes a host can hide from the workspace composition. */
+export type WorkspaceBlockKind =
+  | "shortcuts"
+  | "links"
+  | "charts"
+  | "numbers"
+  | "quickLists"
+  | "recents";
+
+export interface WorkspaceScreenProps {
+  /** Workspace document name (proper case, e.g. "Home", "Users") */
+  workspace: string;
+  /** Hide whole block classes from the composition. */
+  hiddenBlocks?: readonly WorkspaceBlockKind[];
+  /** Override the default shortcut-chip navigation. */
+  onShortcutPress?: (row: WorkspaceShortcutRow) => void;
+  /**
+   * Replace the rendering of individual grid blocks (data widgets and
+   * narrative text). Shortcut chips and link cards have their own
+   * composition and are controlled via `hiddenBlocks`/`onShortcutPress`.
+   */
+  renderBlock?: (context: {
+    block: WorkspaceBlock;
+    doc: WorkspaceDoc;
+    defaultContent: ReactNode;
+  }) => ReactNode;
+}
+
+// Section headers step under the page H1; visual scale follows desk's
+// small workspace section headings.
+const HEADER_TAGS = { 1: H2, 2: H2, 3: H3, 4: H4, 5: H5, 6: H6 } as const;
+
+/**
+ * Map a text or data block to a grid item. Shortcut and card blocks never
+ * reach this — the composition renders them as the chip band and the
+ * "Browse all" directory instead.
+ */
+function blockToGridItem(block: WorkspaceBlock, doc: WorkspaceDoc): WorkspaceGridItem | undefined {
+  const key = block.id || JSON.stringify(block.data);
+  switch (block.type) {
+    case "header": {
+      const text = stripHtml(block.data.text);
+      if (!text) return undefined;
+      const Tag = HEADER_TAGS[headerLevel(block.data.text)];
+      return {
+        key,
+        col: 12,
+        node: (
+          <Tag margin={0} marginTop="$3">
+            {text}
+          </Tag>
+        ),
+      };
+    }
+    case "paragraph": {
+      const text = stripHtml(block.data.text);
+      if (!text) return undefined;
+      return {
+        key,
+        col: 12,
+        node: <Paragraph margin={0}>{text}</Paragraph>,
+      };
+    }
+    case "chart": {
+      const row = doc.charts?.find(
+        (chart) =>
+          chart.chart_name === block.data.chart_name || chart.label === block.data.chart_name,
+      );
+      if (!row) return undefined;
+      return { key, col: block.data.col ?? 12, node: <WorkspaceChartBlock row={row} /> };
+    }
+    case "number_card": {
+      const row = doc.number_cards?.find(
+        (card) =>
+          card.number_card_name === block.data.number_card_name ||
+          card.label === block.data.number_card_name,
+      );
+      if (!row) return undefined;
+      return { key, col: block.data.col ?? 3, node: <WorkspaceNumberCard row={row} /> };
+    }
+    case "quick_list": {
+      const row = doc.quick_lists?.find(
+        (list) =>
+          list.document_type === block.data.quick_list_name ||
+          list.label === block.data.quick_list_name,
+      );
+      if (!row) return undefined;
+      return { key, col: block.data.col ?? 4, node: <WorkspaceQuickList row={row} /> };
+    }
+    default:
+      return undefined;
+  }
+}
+
+function WorkspaceSkeleton() {
+  const { knobProps } = useResolvedKnobs();
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  // Mirrors the dashboard-first anatomy (LC-20): title line, shortcut chip
+  // band (44px chips, deterministic widths), then the content card region.
+  return (
+    <YStack {...knobProps.gapLg} aria-busy aria-label={t("loading", "Loading")}>
+      <Skeleton width="30%" height={32} />
+      <XStack {...knobProps.gap}>
+        <Skeleton variant="rounded" width={128} height={44} />
+        <Skeleton variant="rounded" width={104} height={44} />
+        <Skeleton variant="rounded" width={144} height={44} />
+        <Skeleton variant="rounded" width={112} height={44} />
+      </XStack>
+      <XStack {...knobProps.gap}>
+        <Skeleton variant="rounded" width="32%" height={200} />
+        <Skeleton variant="rounded" width="32%" height={200} />
+        <Skeleton variant="rounded" width="32%" height={200} />
+      </XStack>
+    </YStack>
+  );
+}
+
+interface WorkspaceSections {
+  /** Data widgets first: number cards → charts → quick lists. */
+  data: WorkspaceGridItem[];
+  /** Narrative headers/paragraphs (e.g. the text-only Welcome Workspace). */
+  text: WorkspaceGridItem[];
+  /** Resolved shortcut rows for the chip band. */
+  shortcuts: WorkspaceShortcutRow[];
+  /** Resolved link groups (with authored spans) for the directory. */
+  links: WorkspaceLinkDirectoryItem[];
+}
+
+const DATA_KIND_BY_TYPE: Record<string, WorkspaceBlockKind> = {
+  chart: "charts",
+  number_card: "numbers",
+  quick_list: "quickLists",
+};
+
+function buildSections(
+  doc: WorkspaceDoc,
+  hidden: ReadonlySet<WorkspaceBlockKind>,
+  renderBlock?: WorkspaceScreenProps["renderBlock"],
+): WorkspaceSections {
+  const composition = composeWorkspaceBlocks(parseWorkspaceContent(doc.content));
+  const toGridItems = (blocks: WorkspaceBlock[]) =>
+    blocks
+      .map((block) => {
+        const item = blockToGridItem(block, doc);
+        if (!item || !renderBlock) return item;
+        return { ...item, node: renderBlock({ block, doc, defaultContent: item.node }) };
+      })
+      .filter((item): item is WorkspaceGridItem => item !== undefined);
+  const groups = groupLinks(doc.links);
+  const dataBlocks = composition.data.filter((block) => {
+    const kind = DATA_KIND_BY_TYPE[block.type];
+    return !kind || !hidden.has(kind);
+  });
+  return {
+    data: toGridItems(dataBlocks),
+    text: toGridItems(composition.text),
+    shortcuts: hidden.has("shortcuts")
+      ? []
+      : composition.shortcuts.flatMap((block) => {
+          const row = findShortcut(doc, block.data.shortcut_name);
+          return row ? [row] : [];
+        }),
+    links: hidden.has("links")
+      ? []
+      : composition.cards.flatMap((block) => {
+          const group = findLinkGroup(groups, block.data.card_name);
+          if (!group) return [];
+          return [{ key: block.id || group.label, col: block.data.col ?? 4, group }];
+        }),
+  };
+}
+
+export function WorkspaceScreen({
+  workspace,
+  hiddenBlocks,
+  onShortcutPress,
+  renderBlock,
+}: WorkspaceScreenProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const { doc, isLoading, error, isPermissionError, refresh } = useWorkspaceDoc(workspace);
+
+  const hidden = useMemo(() => new Set(hiddenBlocks ?? []), [hiddenBlocks]);
+  const sections = useMemo(
+    () => (doc ? buildSections(doc, hidden, renderBlock) : undefined),
+    [doc, hidden, renderBlock],
+  );
+
+  if (isLoading) {
+    return (
+      <Screen>
+        <WorkspaceSkeleton />
+      </Screen>
+    );
+  }
+
+  if (error || !doc || !sections) {
+    return (
+      <Screen>
+        <AsyncBoundary
+          error={error ?? true}
+          onRetry={refresh}
+          errorTitle={
+            isPermissionError
+              ? t(
+                  "workspacePermissionError",
+                  "You do not have permission to view {{workspace}}",
+                  { workspace },
+                )
+              : t("workspaceError", "Couldn't load workspace {{workspace}}", {
+                  workspace,
+                })
+          }
+        />
+      </Screen>
+    );
+  }
+
+  const isEmpty =
+    sections.data.length === 0 &&
+    sections.text.length === 0 &&
+    sections.shortcuts.length === 0 &&
+    sections.links.length === 0;
+
+  return (
+    <Screen>
+      {/* D-11 page-title dial: moderate (32px) — a workspace title is
+          wayfinding, not display copy. No divider: the rule under the title
+          earned no role (Axiom 16 chrome-earns-role). */}
+      <PageHeader
+        title={doc.title || doc.label || workspace}
+        titleScale="moderate"
+        divider={false}
+      />
+      {hidden.has("recents") ? null : <WorkspaceRecents />}
+      {isEmpty ? (
+        <AsyncBoundary
+          empty
+          emptyTitle={t("workspaceEmpty", "This workspace is empty")}
+          emptyDescription={t(
+            "workspaceEmptyDescription",
+            "No blocks have been added to {{workspace}} yet",
+            { workspace },
+          )}
+        />
+      ) : (
+        <>
+          {sections.data.length > 0 ? <WorkspaceGrid items={sections.data} /> : null}
+          {sections.text.length > 0 ? <WorkspaceGrid items={sections.text} /> : null}
+          {sections.shortcuts.length > 0 ? (
+            // Section heading on the shared sectionHeading scale (LC-17) —
+            // PageSection owns it; no divider rule over a chip band.
+            <PageSection title={t("workspaceShortcuts", "Shortcuts")} divider={false}>
+              <XStack flexWrap="wrap" {...knobProps.gap}>
+                {sections.shortcuts.map((row) => (
+                  <WorkspaceShortcut key={row.name} row={row} onPress={onShortcutPress} />
+                ))}
+              </XStack>
+            </PageSection>
+          ) : null}
+          {sections.links.length > 0 ? <WorkspaceLinkDirectory items={sections.links} /> : null}
+        </>
+      )}
+    </Screen>
+  );
+}