@multiplatform.one/backoffice 6.3.0

package/src/chrome/command-palette-model.ts

@@ -0,0 +1,291 @@
+// Section model for the backoffice command palette (MOD-01) — ONE data hook
+// consumed by both palette containers (centered overlay ≥sm, full sheet <sm).
+//
+// Composes the awesomebar data layer (catalog, global search, recents,
+// ranking) into fixed-order sections:
+//   Recents    → readRecentItems store (query-filtered while typing)
+//   Actions    → contextual commands for the best doctype match
+//                ("New X", "X List / Report / Kanban" — capability-gated)
+//   Navigation → workspaces + doctypes from the catalog (rankNameMatches)
+//   Documents  → frappe.utils.global_search hits (doctype badge + snippet)
+//
+// Empty sections are dropped; the provider's doctype scope (allow/deny)
+// filters every doctype-derived row; `newDoc` and `views` capabilities gate
+// the action commands.
+import {
+  ClockIcon,
+  FileTextIcon,
+  GlobeIcon,
+  KanbanIcon,
+  ListIcon,
+  PlusIcon,
+  TableIcon,
+} from "@phosphor-icons/react";
+import type { FC } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  useBackofficeCapabilities,
+  useBackofficePaths,
+  useIsDoctypeAllowed,
+} from "../config/BackofficeProvider";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import {
+  rankNameMatches,
+  readRecentItems,
+  toContentSnippet,
+  useAwesomebarCatalog,
+  useGlobalSearch,
+  type RecentItem,
+} from "./awesomebar-data";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface IconProps {
+  size?: number | string;
+  color?: string;
+}
+
+export type CommandPaletteSectionId = "recents" | "actions" | "navigation" | "documents";
+
+export interface CommandPaletteItem {
+  id: string;
+  label: string;
+  /** Muted one-line detail under the label (document content snippet). */
+  description?: string;
+  /** Right-aligned type badge ("Workspace", "DocType", the hit's doctype). */
+  badge?: string;
+  icon: FC<IconProps>;
+  path: string;
+}
+
+export interface CommandPaletteSection {
+  id: CommandPaletteSectionId;
+  /** Translated section header. */
+  label: string;
+  items: CommandPaletteItem[];
+}
+
+export interface CommandPaletteModel {
+  /** Non-empty sections in fixed order (recents → actions → navigation → documents). */
+  sections: CommandPaletteSection[];
+  /** Section items flattened in render order — the roving-highlight index space. */
+  items: CommandPaletteItem[];
+  /** Global search in flight for the debounced query. */
+  searching: boolean;
+  /** The trimmed query the sections were built from. */
+  query: string;
+  /** Trimmed query is non-empty. */
+  hasQuery: boolean;
+  /** A settled non-empty query produced zero rows (honest empty state). */
+  noResults: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Limits (desk-style caps per section)
+// ---------------------------------------------------------------------------
+
+const maxRecentsEmptyQuery = 8;
+const maxRecentsWithQuery = 4;
+const maxNavWorkspaces = 4;
+const maxNavDoctypes = 4;
+
+/** Action view commands for the top doctype match, in render order. */
+const actionViews = ["list", "report", "kanban"] as const;
+
+const actionViewIcons: Record<(typeof actionViews)[number], FC<IconProps>> = {
+  list: ListIcon,
+  report: TableIcon,
+  kanban: KanbanIcon,
+};
+
+// Explicit (greppable) i18n keys per view command.
+const actionViewLabelKeys: Record<
+  (typeof actionViews)[number],
+  { key: string; defaultValue: string }
+> = {
+  list: { key: "awesomebar.listCommand", defaultValue: "{{doctype}} List" },
+  report: { key: "awesomebar.reportCommand", defaultValue: "{{doctype}} Report" },
+  kanban: { key: "awesomebar.kanbanCommand", defaultValue: "{{doctype}} Kanban" },
+};
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
+export interface UseCommandPaletteModelOptions {
+  /** Raw query (drives catalog-derived sections synchronously). */
+  query: string;
+  /** Debounced query (drives the global_search RPC). */
+  debouncedQuery: string;
+  /** Palette visibility — recents are re-read on every open. */
+  open: boolean;
+}
+
+export function useCommandPaletteModel({
+  query,
+  debouncedQuery,
+  open,
+}: UseCommandPaletteModelOptions): CommandPaletteModel {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const paths = useBackofficePaths();
+  const capabilities = useBackofficeCapabilities();
+  const isDoctypeAllowed = useIsDoctypeAllowed();
+
+  const { catalog } = useAwesomebarCatalog();
+  const { hits, searching } = useGlobalSearch(debouncedQuery);
+  const [recents, setRecents] = useState<RecentItem[]>([]);
+
+  // Fresh recents on every open (another surface may have pushed a visit
+  // since the last open).
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    void readRecentItems().then((stored) => {
+      if (!cancelled) setRecents(stored);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [open]);
+
+  const trimmed = query.trim();
+
+  const sections = useMemo<CommandPaletteSection[]>(() => {
+    const next: CommandPaletteSection[] = [];
+
+    // ── Recents ──────────────────────────────────────────────────────────
+    const lowerQuery = trimmed.toLowerCase();
+    const matchingRecents = trimmed
+      ? recents
+          .filter((recent) => recent.label.toLowerCase().includes(lowerQuery))
+          .slice(0, maxRecentsWithQuery)
+      : recents.slice(0, maxRecentsEmptyQuery);
+    if (matchingRecents.length > 0) {
+      next.push({
+        id: "recents",
+        label: t("awesomebar.recents", "Recents"),
+        items: matchingRecents.map((recent) => ({
+          id: `recent:${recent.path}`,
+          label: recent.label,
+          path: recent.path,
+          icon: ClockIcon,
+        })),
+      });
+    }
+
+    if (trimmed) {
+      const scopedDoctypes = (catalog?.doctypes ?? []).filter(isDoctypeAllowed);
+      const rankedDoctypes = rankNameMatches(trimmed, scopedDoctypes, maxNavDoctypes + 1);
+      const topDoctype = rankedDoctypes[0];
+
+      // ── Actions: contextual commands for the best doctype match ────────
+      const actionItems: CommandPaletteItem[] = [];
+      if (topDoctype) {
+        if (capabilities.newDoc.enabled) {
+          actionItems.push({
+            id: `new:${topDoctype}`,
+            label: t("awesomebar.newCommand", {
+              defaultValue: "New {{doctype}}",
+              doctype: topDoctype,
+            }),
+            path: paths.newDoc(topDoctype),
+            icon: PlusIcon,
+          });
+        }
+        if (capabilities.views.enabled) {
+          for (const view of actionViews) {
+            if (!capabilities.views.allow.includes(view)) continue;
+            const { key, defaultValue } = actionViewLabelKeys[view];
+            actionItems.push({
+              id: `${view}:${topDoctype}`,
+              label: t(key, { defaultValue, doctype: topDoctype }),
+              path: paths.view(topDoctype, view),
+              icon: actionViewIcons[view],
+            });
+          }
+        }
+      }
+      if (actionItems.length > 0) {
+        next.push({
+          id: "actions",
+          label: t("awesomebar.actions", "Actions"),
+          items: actionItems,
+        });
+      }
+
+      // ── Navigation: workspaces + further doctypes from the catalog ─────
+      const navigationItems: CommandPaletteItem[] = [];
+      const workspaces = catalog?.workspaces ?? [];
+      const byTitle = new Map(workspaces.map((workspace) => [workspace.title, workspace]));
+      for (const title of rankNameMatches(
+        trimmed,
+        workspaces.map((workspace) => workspace.title),
+        maxNavWorkspaces,
+      )) {
+        const workspace = byTitle.get(title);
+        if (!workspace) continue;
+        navigationItems.push({
+          id: `workspace:${workspace.name}`,
+          label: workspace.title,
+          badge: t("awesomebar.workspaceBadge", "Workspace"),
+          path: paths.workspace(workspace.name),
+          icon: GlobeIcon,
+        });
+      }
+      // The top match already owns the Actions section — list the rest.
+      for (const doctype of rankedDoctypes.slice(topDoctype ? 1 : 0, maxNavDoctypes + 1)) {
+        navigationItems.push({
+          id: `doctype:${doctype}`,
+          label: doctype,
+          badge: t("awesomebar.doctypeBadge", "DocType"),
+          path: paths.list(doctype),
+          icon: ListIcon,
+        });
+      }
+      if (navigationItems.length > 0) {
+        next.push({
+          id: "navigation",
+          label: t("awesomebar.navigation", "Navigation"),
+          items: navigationItems,
+        });
+      }
+
+      // ── Documents: global-search hits (scope-filtered) ──────────────────
+      const documentItems: CommandPaletteItem[] = [];
+      for (const hit of hits) {
+        if (!isDoctypeAllowed(hit.doctype)) continue;
+        documentItems.push({
+          id: `doc:${hit.doctype}:${hit.name}`,
+          label: hit.name,
+          badge: hit.doctype,
+          description: toContentSnippet(hit.content),
+          path: paths.form(hit.doctype, hit.name),
+          icon: FileTextIcon,
+        });
+      }
+      if (documentItems.length > 0) {
+        next.push({
+          id: "documents",
+          label: t("awesomebar.documents", "Documents"),
+          items: documentItems,
+        });
+      }
+    }
+
+    return next;
+  }, [trimmed, recents, catalog, hits, capabilities, paths, isDoctypeAllowed, t]);
+
+  const items = useMemo(() => sections.flatMap((section) => section.items), [sections]);
+
+  return {
+    sections,
+    items,
+    searching,
+    query: trimmed,
+    hasQuery: Boolean(trimmed),
+    noResults: Boolean(trimmed) && !searching && items.length === 0,
+  };
+}

package/src/chrome/help-about-dialog.tsx

@@ -0,0 +1,130 @@
+/**
+ * About dialog (desk "About" parity): backoffice tagline + installed app
+ * versions from `frappe.utils.change_log.get_versions`.
+ *
+ * RPC shape: { message: Record<appKey, { title, description, branch, version }> }
+ * Versions are fetched lazily on first open and kept for the dialog's
+ * lifetime; a failed fetch retries on the next open.
+ */
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  Paragraph,
+  SizableText,
+  Spinner,
+  XStack,
+  YStack,
+} from "@multiplatform.one/components";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { useFrappeApp } from "../shared/useFrappeApp";
+
+export interface FrappeAppVersion {
+  title?: string;
+  description?: string;
+  branch?: string;
+  version?: string;
+}
+
+interface GetVersionsPayload {
+  message?: Record<string, FrappeAppVersion>;
+}
+
+export interface HelpAboutDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function HelpAboutDialog({ open, onOpenChange }: HelpAboutDialogProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const app = useFrappeApp();
+  const [versions, setVersions] = useState<Record<string, FrappeAppVersion> | undefined>(undefined);
+  const [loading, setLoading] = useState(false);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    if (!open || !app || versions) return;
+    let cancelled = false;
+    setLoading(true);
+    setFailed(false);
+    app
+      .call()
+      .get<GetVersionsPayload>("frappe.utils.change_log.get_versions")
+      .then((response) => {
+        if (cancelled) return;
+        setVersions(response.payload?.message ?? {});
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setFailed(true);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, app, versions]);
+
+  const entries = versions ? Object.entries(versions) : [];
+  const unavailable = !app || failed || (versions !== undefined && entries.length === 0);
+
+  return (
+    <Dialog modal open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay key="overlay" backgroundColor="$shadow6" />
+        <DialogContent
+          key="content"
+          width={420}
+          maxWidth="90%"
+          data-testid="backoffice-help-about-dialog"
+        >
+          <Dialog.Title size="$6">{t("help.aboutTitle", "About")}</Dialog.Title>
+          <Dialog.Description asChild>
+            <Paragraph size="$3" color="$color11">
+              {t(
+                "help.aboutTagline",
+                "Backoffice is the multiplatform.one recreation of the Frappe Desk — one codebase across web, mobile, and desktop.",
+              )}
+            </Paragraph>
+          </Dialog.Description>
+          <YStack gap="$2" marginTop="$2">
+            <SizableText size="$2" fontWeight="700" color="$color10" textTransform="uppercase">
+              {t("help.installedApps", "Installed Apps")}
+            </SizableText>
+            {loading && (
+              <XStack padding="$3" justifyContent="center">
+                <Spinner size="small" />
+              </XStack>
+            )}
+            {!loading && unavailable && (
+              <Paragraph size="$3" color="$color10">
+                {t("help.versionsUnavailable", "Version information is unavailable.")}
+              </Paragraph>
+            )}
+            {!loading &&
+              entries.map(([key, info]) => (
+                <XStack key={key} gap="$3" alignItems="baseline" justifyContent="space-between">
+                  <SizableText size="$3" fontWeight="600" flex={1} numberOfLines={1}>
+                    {info.title || key}
+                  </SizableText>
+                  <SizableText size="$3" color="$color11" flexShrink={0}>
+                    {info.version
+                      ? `v${info.version}${info.branch ? ` (${info.branch})` : ""}`
+                      : (info.branch ?? "—")}
+                  </SizableText>
+                </XStack>
+              ))}
+          </YStack>
+          <XStack justifyContent="flex-end" marginTop="$4">
+            <Dialog.Close asChild>
+              <Button size="$3">{t("help.close", "Close")}</Button>
+            </Dialog.Close>
+          </XStack>
+        </DialogContent>
+      </Dialog.Portal>
+    </Dialog>
+  );
+}

package/src/chrome/help-shortcuts-dialog.tsx

@@ -0,0 +1,144 @@
+/**
+ * Keyboard Shortcuts dialog (desk "Keyboard Shortcuts" parity, scoped to what
+ * the backoffice actually implements — keep this list honest:
+ *   - Mod+K / Mod+G focus the search bar (chrome/shortcuts.ts, shell-wired)
+ *   - Mod+S saves the open document (form save shortcut)
+ *   - Esc closes dialogs and menus (overlay default + shell drawer)
+ */
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  Paragraph,
+  SizableText,
+  XStack,
+  YStack,
+} from "@multiplatform.one/components";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+
+export interface HelpShortcutsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+/** Platform modifier label; SSR/native-safe (defaults to "Ctrl"). */
+function getModLabel(): string {
+  if (
+    typeof navigator !== "undefined" &&
+    /Mac|iPhone|iPad|iPod/i.test(String(navigator.platform ?? ""))
+  ) {
+    return "\u2318";
+  }
+  return "Ctrl";
+}
+
+function KeyChip({ label }: { label: string }) {
+  return (
+    <XStack
+      borderWidth={1}
+      borderColor="$borderColor"
+      backgroundColor="$color2"
+      borderRadius="$2"
+      paddingHorizontal="$2"
+      paddingVertical="$1"
+      minWidth={28}
+      justifyContent="center"
+    >
+      <SizableText size="$1" fontWeight="600">
+        {label}
+      </SizableText>
+    </XStack>
+  );
+}
+
+interface ShortcutRowProps {
+  /** Alternative key combos, e.g. [["Ctrl","K"],["Ctrl","G"]]. */
+  combos: string[][];
+  description: string;
+}
+
+function ShortcutRow({ combos, description }: ShortcutRowProps) {
+  return (
+    <XStack gap="$3" alignItems="center">
+      <XStack width={150} gap="$1" alignItems="center" flexWrap="wrap" flexShrink={0}>
+        {combos.map((combo, comboIndex) => (
+          <XStack key={combo.join("+")} gap="$1" alignItems="center">
+            {comboIndex > 0 && (
+              <SizableText size="$2" color="$color10">
+                /
+              </SizableText>
+            )}
+            {combo.map((key, keyIndex) => (
+              <XStack key={key} gap="$1" alignItems="center">
+                {keyIndex > 0 && (
+                  <SizableText size="$2" color="$color10">
+                    +
+                  </SizableText>
+                )}
+                <KeyChip label={key} />
+              </XStack>
+            ))}
+          </XStack>
+        ))}
+      </XStack>
+      <SizableText size="$3" flex={1}>
+        {description}
+      </SizableText>
+    </XStack>
+  );
+}
+
+export function HelpShortcutsDialog({ open, onOpenChange }: HelpShortcutsDialogProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const mod = getModLabel();
+
+  const rows: ShortcutRowProps[] = [
+    {
+      combos: [
+        [mod, "K"],
+        [mod, "G"],
+      ],
+      description: t("help.shortcutFocusSearch", "Open the command palette"),
+    },
+    {
+      combos: [[mod, "S"]],
+      description: t("help.shortcutSaveForm", "Save the open document"),
+    },
+    {
+      combos: [["Esc"]],
+      description: t("help.shortcutCloseOverlays", "Close dialogs and menus"),
+    },
+  ];
+
+  return (
+    <Dialog modal open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay key="overlay" backgroundColor="$shadow6" />
+        <DialogContent
+          key="content"
+          width={440}
+          maxWidth="90%"
+          data-testid="backoffice-help-shortcuts-dialog"
+        >
+          <Dialog.Title size="$6">{t("help.shortcutsTitle", "Keyboard Shortcuts")}</Dialog.Title>
+          <Dialog.Description asChild>
+            <Paragraph size="$3" color="$color11">
+              {t("help.shortcutsIntro", "Shortcuts available across the backoffice (web).")}
+            </Paragraph>
+          </Dialog.Description>
+          <YStack gap="$3" marginTop="$2">
+            {rows.map((row) => (
+              <ShortcutRow key={row.description} {...row} />
+            ))}
+          </YStack>
+          <XStack justifyContent="flex-end" marginTop="$4">
+            <Dialog.Close asChild>
+              <Button size="$3">{t("help.close", "Close")}</Button>
+            </Dialog.Close>
+          </XStack>
+        </DialogContent>
+      </Dialog.Portal>
+    </Dialog>
+  );
+}