@multiplatform.one/backoffice 6.6.0 → 7.0.0

package/src/chrome/HelpMenu.tsx

@@ -3,8 +3,11 @@
 // Desk parity items: Documentation, User Forum, Report an Issue (external,
 // via the platform-split openUrl — web new tab / native Linking / GNOME Gio),
 // Keyboard Shortcuts and About (dialogs, all platforms). Dialogs are mounted
-// as siblings of the popover so they survive the menu closing.
-import { Button, Popover, PopoverContent, Separator, YStack } from "@multiplatform.one/components";
+// as siblings of the menu so they survive the menu closing.
+//
+// Catalog DropdownMenu (not a padded Popover of Buttons): SP-EDGE rows,
+// LC-71 keyboard ring on the focused item, LC-21 COMMIT close-on-pick.
+import { Button, DropdownMenu } from "@multiplatform.one/components";
 import { openUrl } from "@multiplatform.one/platform";
 import {
   BookOpenIcon,
@@ -14,7 +17,7 @@ import {
   KeyboardIcon,
   QuestionIcon,
 } from "@phosphor-icons/react";
-import { useState, type ComponentProps } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import { HelpAboutDialog } from "./help-about-dialog";
@@ -24,29 +27,6 @@ const DOCUMENTATION_URL = "https://docs.frappe.io";
 const USER_FORUM_URL = "https://discuss.frappe.io";
 const REPORT_ISSUE_URL = "https://github.com/frappe/frappe/issues";
 
-interface HelpMenuItemProps {
-  icon: ComponentProps<typeof Button>["icon"];
-  label: string;
-  onPress: () => void;
-  testID: string;
-}
-
-function HelpMenuItem({ icon, label, onPress, testID }: HelpMenuItemProps) {
-  return (
-    <Button
-      chromeless
-      size="$3"
-      icon={icon}
-      justifyContent="flex-start"
-      width="100%"
-      onPress={onPress}
-      data-testid={testID}
-    >
-      {label}
-    </Button>
-  );
-}
-
 export function HelpMenu() {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const [menuOpen, setMenuOpen] = useState(false);
@@ -54,19 +34,17 @@ export function HelpMenu() {
   const [shortcutsOpen, setShortcutsOpen] = useState(false);
 
   const openLink = (url: string) => {
-    setMenuOpen(false);
     openUrl(url, "_blank");
   };
 
   const openDialog = (setOpen: (open: boolean) => void) => {
-    setMenuOpen(false);
     setOpen(true);
   };
 
   return (
     <>
-      <Popover open={menuOpen} onOpenChange={setMenuOpen} placement="bottom-end" stayInFrame>
-        <Popover.Trigger asChild>
+      <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen} placement="bottom-end">
+        <DropdownMenu.Trigger asChild>
           <Button
             chromeless
             circular
@@ -75,43 +53,46 @@ export function HelpMenu() {
             aria-label={t("help.label", "Help")}
             data-testid="backoffice-help-trigger"
           />
-        </Popover.Trigger>
-        <PopoverContent padding="$2" data-testid="backoffice-help-menu">
-          <YStack minWidth={220}>
-            <HelpMenuItem
-              icon={BookOpenIcon}
-              label={t("help.documentation", "Documentation")}
-              onPress={() => openLink(DOCUMENTATION_URL)}
-              testID="backoffice-help-documentation"
-            />
-            <HelpMenuItem
-              icon={ChatsCircleIcon}
-              label={t("help.userForum", "User Forum")}
-              onPress={() => openLink(USER_FORUM_URL)}
-              testID="backoffice-help-forum"
-            />
-            <HelpMenuItem
-              icon={BugIcon}
-              label={t("help.reportIssue", "Report an Issue")}
-              onPress={() => openLink(REPORT_ISSUE_URL)}
-              testID="backoffice-help-report-issue"
-            />
-            <Separator marginVertical="$1" />
-            <HelpMenuItem
-              icon={KeyboardIcon}
-              label={t("help.keyboardShortcuts", "Keyboard Shortcuts")}
-              onPress={() => openDialog(setShortcutsOpen)}
-              testID="backoffice-help-shortcuts"
-            />
-            <HelpMenuItem
-              icon={InfoIcon}
-              label={t("help.about", "About")}
-              onPress={() => openDialog(setAboutOpen)}
-              testID="backoffice-help-about"
-            />
-          </YStack>
-        </PopoverContent>
-      </Popover>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content minWidth={220} data-testid="backoffice-help-menu">
+          <DropdownMenu.Item
+            icon={<BookOpenIcon size={16} />}
+            onSelect={() => openLink(DOCUMENTATION_URL)}
+            data-testid="backoffice-help-documentation"
+          >
+            {t("help.documentation", "Documentation")}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item
+            icon={<ChatsCircleIcon size={16} />}
+            onSelect={() => openLink(USER_FORUM_URL)}
+            data-testid="backoffice-help-forum"
+          >
+            {t("help.userForum", "User Forum")}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item
+            icon={<BugIcon size={16} />}
+            onSelect={() => openLink(REPORT_ISSUE_URL)}
+            data-testid="backoffice-help-report-issue"
+          >
+            {t("help.reportIssue", "Report an Issue")}
+          </DropdownMenu.Item>
+          <DropdownMenu.Separator />
+          <DropdownMenu.Item
+            icon={<KeyboardIcon size={16} />}
+            onSelect={() => openDialog(setShortcutsOpen)}
+            data-testid="backoffice-help-shortcuts"
+          >
+            {t("help.keyboardShortcuts", "Keyboard Shortcuts")}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item
+            icon={<InfoIcon size={16} />}
+            onSelect={() => openDialog(setAboutOpen)}
+            data-testid="backoffice-help-about"
+          >
+            {t("help.about", "About")}
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>
       <HelpShortcutsDialog open={shortcutsOpen} onOpenChange={setShortcutsOpen} />
       <HelpAboutDialog open={aboutOpen} onOpenChange={setAboutOpen} />
     </>

package/src/chrome/awesomebar-data.spec.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from "vitest";
+import { matchQueryIndices, rankNameMatches } from "./awesomebar-data";
+
+describe("matchQueryIndices", () => {
+  it("returns empty indices for an empty query", () => {
+    expect(matchQueryIndices("", "ToDo")).toEqual([]);
+    expect(matchQueryIndices("   ", "ToDo")).toEqual([]);
+  });
+
+  it("returns contiguous indices for a substring (Frappe prefix/contains)", () => {
+    expect(matchQueryIndices("todo", "ToDo")).toEqual([0, 1, 2, 3]);
+    expect(matchQueryIndices("do", "ToDo")).toEqual([2, 3]);
+  });
+
+  it("returns subsequence indices when the query is not contiguous (Linear/Spotlight)", () => {
+    expect(matchQueryIndices("tdo", "ToDo")).toEqual([0, 2, 3]);
+    expect(matchQueryIndices("so", "Sales Order")).toEqual([0, 6]);
+  });
+
+  it("returns null when no subsequence exists", () => {
+    expect(matchQueryIndices("xyz", "ToDo")).toBeNull();
+  });
+});
+
+describe("rankNameMatches", () => {
+  const names = ["ToDo", "ToDo Template", "Note", "User", "Sales Order", "Sales Invoice"];
+
+  it("ranks a prefix match first and shorter names ahead of longer ones", () => {
+    expect(rankNameMatches("todo", names, 4)[0]).toBe("ToDo");
+  });
+
+  it("matches a subsequence that substring matching would miss", () => {
+    expect(rankNameMatches("tdo", names, 4)).toContain("ToDo");
+  });
+
+  it("ranks word-start initials above later subsequence hits", () => {
+    const ranked = rankNameMatches("so", names, 4);
+    expect(ranked[0]).toBe("Sales Order");
+    expect(ranked).toContain("Sales Invoice");
+  });
+
+  it("returns an empty list for no matches or an empty query", () => {
+    expect(rankNameMatches("zzz", names, 4)).toEqual([]);
+    expect(rankNameMatches("", names, 4)).toEqual([]);
+  });
+});

package/src/chrome/awesomebar-data.tsx

@@ -229,24 +229,74 @@ export async function readRecentItems(): Promise<RecentItem[]> {
 }
 
 // ---------------------------------------------------------------------------
-// Matching
+// Matching (Linear / Spotlight fuzzy, Frappe prefix-first)
 // ---------------------------------------------------------------------------
 
 /**
- * Case-insensitive substring match over names: prefix matches rank first,
- * shorter names break ties (best-match-first, desk-style).
+ * Indices of characters in `text` that participate in a case-insensitive
+ * match against `query`. Prefers a contiguous substring; falls back to a
+ * subsequence (so "tdo" hits "ToDo", "so" hits "Sales Order"). Empty query
+ * → `[]`. No match → `null`.
  */
-export function rankNameMatches(query: string, names: readonly string[], limit: number): string[] {
+export function matchQueryIndices(query: string, text: string): number[] | null {
+  const q = query.trim().toLowerCase();
+  if (!q) return [];
+  const lower = text.toLowerCase();
+  const contiguous = lower.indexOf(q);
+  if (contiguous >= 0) {
+    return Array.from({ length: q.length }, (_, index) => contiguous + index);
+  }
+  const indices: number[] = [];
+  let qi = 0;
+  for (let i = 0; i < lower.length && qi < q.length; i++) {
+    if (lower[i] === q[qi]) {
+      indices.push(i);
+      qi += 1;
+    }
+  }
+  return qi === q.length ? indices : null;
+}
+
+function isWordStart(text: string, index: number): boolean {
+  if (index <= 0) return true;
+  return /[\s\-_/.]/.test(text[index - 1] ?? "");
+}
+
+function scoreMatch(query: string, text: string, indices: number[]): number {
   const q = query.trim().toLowerCase();
+  const lower = text.toLowerCase();
+  // Frappe awesomebar: prefix beats contains beats fuzzy subsequence.
+  if (lower.startsWith(q)) return 10_000 - text.length;
+  if (lower.includes(q)) return 5_000 - (indices[0] ?? 0) * 10 - text.length;
+  let wordStarts = 0;
+  let consecutive = 0;
+  for (let i = 0; i < indices.length; i++) {
+    const at = indices[i] ?? 0;
+    if (isWordStart(text, at)) wordStarts += 1;
+    if (i > 0 && at === (indices[i - 1] ?? 0) + 1) consecutive += 1;
+  }
+  const span = (indices[indices.length - 1] ?? 0) - (indices[0] ?? 0) + 1;
+  const gaps = Math.max(0, span - q.length);
+  return (
+    1_000 + wordStarts * 80 + consecutive * 25 - (indices[0] ?? 0) * 5 - gaps * 15 - text.length
+  );
+}
+
+/**
+ * Rank names for the palette: prefix (desk) → substring → subsequence
+ * (Linear / Spotlight). Shorter names break remaining ties.
+ */
+export function rankNameMatches(query: string, names: readonly string[], limit: number): string[] {
+  const q = query.trim();
   if (!q) return [];
-  const prefixed: string[] = [];
-  const contained: string[] = [];
+  const scored: { name: string; score: number }[] = [];
   for (const name of names) {
-    const lower = name.toLowerCase();
-    if (lower.startsWith(q)) prefixed.push(name);
-    else if (lower.includes(q)) contained.push(name);
+    const indices = matchQueryIndices(q, name);
+    if (!indices || indices.length === 0) continue;
+    scored.push({ name, score: scoreMatch(q, name, indices) });
   }
-  prefixed.sort((a, b) => a.length - b.length);
-  contained.sort((a, b) => a.length - b.length);
-  return [...prefixed, ...contained].slice(0, limit);
+  scored.sort(
+    (a, b) => b.score - a.score || a.name.length - b.name.length || a.name.localeCompare(b.name),
+  );
+  return scored.slice(0, limit).map((row) => row.name);
 }

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

@@ -31,6 +31,7 @@ import {
 } from "../config/BackofficeProvider";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import {
+  matchQueryIndices,
   rankNameMatches,
   readRecentItems,
   toContentSnippet,
@@ -157,10 +158,9 @@ export function useCommandPaletteModel({
     const next: CommandPaletteSection[] = [];
 
     // ── Recents ──────────────────────────────────────────────────────────
-    const lowerQuery = trimmed.toLowerCase();
     const matchingRecents = trimmed
       ? recents
-          .filter((recent) => recent.label.toLowerCase().includes(lowerQuery))
+          .filter((recent) => matchQueryIndices(trimmed, recent.label) !== null)
           .slice(0, maxRecentsWithQuery)
       : recents.slice(0, maxRecentsEmptyQuery);
     if (matchingRecents.length > 0) {

package/src/chrome/notifications-data.tsx

@@ -183,6 +183,8 @@ export function useNotifications(): UseNotificationsResult {
         ? {
             baseURL: config.baseURL,
             socketPort: config.socketPort,
+            siteName: config.siteName,
+            socketBaseURL: config.socketBaseURL,
             auth: config.auth,
             syncOptions: config.syncOptions,
             socketOptions: config.socketOptions,

package/src/chrome/notifications-panel.tsx

@@ -17,7 +17,11 @@ import {
   XStack,
   YStack,
 } from "@multiplatform.one/components";
-import { formatRelativeTimestamp } from "@multiplatform.one/theme";
+import {
+  ensureFocusVisibleRing,
+  formatRelativeTimestamp,
+  menuRowFrame,
+} from "@multiplatform.one/theme";
 import { GearSixIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
@@ -38,18 +42,29 @@ function NotificationRow({ item, onPress }: { item: NotificationItem; onPress: (
   const relative = formatRelativeTimestamp(item.timestampMs ?? item.creation);
   return (
     <XStack
+      {...menuRowFrame}
       alignItems="flex-start"
       gap="$3"
-      paddingHorizontal="$3"
       paddingVertical="$2.5"
+      // LC-71: unread is SELECTED fill; the ring is keyboard-only on this row.
       backgroundColor={item.unread ? "$color2" : "transparent"}
       hoverStyle={{ backgroundColor: "$color3" }}
       pressStyle={{ backgroundColor: "$color4" }}
+      focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
       cursor="pointer"
-      onPress={onPress}
       role="button"
+      tabIndex={0}
       aria-label={subject}
       data-testid="backoffice-notification-row"
+      onPress={onPress}
+      onKeyDown={
+        ((event: KeyboardEvent) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            onPress();
+          }
+        }) as unknown as () => void
+      }
     >
       <Avatar name={item.from_user || "?"} size="$2.5" />
       <YStack flex={1} minWidth={0} gap="$1">
@@ -118,10 +133,11 @@ export function NotificationsPanel({
     <YStack
       width={width}
       maxWidth="100%"
-      paddingVertical="$2"
+      // LC-02: the panel owns only its border; header and rows own insets.
+      paddingVertical={0}
       data-testid="backoffice-notifications-panel"
     >
-      <XStack alignItems="center" gap="$2" paddingHorizontal="$3" paddingBottom="$2">
+      <XStack alignItems="center" gap="$2" paddingHorizontal="$3" paddingVertical="$2">
         <SizableText size="$4" fontWeight="700" flex={1} numberOfLines={1}>
           {t("notifications.title", "Notifications")}
         </SizableText>

package/src/chrome/shortcuts.ts

@@ -8,6 +8,8 @@
  *
  * Bindings (keep chrome/help-shortcuts-dialog.tsx in sync):
  *   - Mod+K / Mod+G → onFocusSearch (opens the command palette)
+ *     While the palette input holds focus, the same chord is handled inside
+ *     CommandPalette (editable targets are ignored here) and toggles closed.
  *
  * SSR / native / GJS safe: no-ops when there is no DOM document. Events from
  * editable targets (inputs, textareas, selects, contenteditable) are ignored

package/src/config/BackofficeProvider.tsx

@@ -48,6 +48,19 @@ export interface BackofficeFrappeConfig {
   baseURL: string;
   /** Override port for the Socket.IO realtime connection (e.g. 9000 in dev). */
   socketPort?: number;
+  /**
+   * Dial the realtime socket at this origin instead of deriving it from
+   * `baseURL` + `socketPort` — for dev servers that proxy `/socket.io` on
+   * their own origin, making the handshake same-origin (e.g. the page
+   * origin in web dev). Wins over `socketPort`. Omit in production.
+   */
+  socketBaseURL?: string;
+  /**
+   * Frappe site name — the Socket.IO namespace realtime must join. Set it
+   * whenever the `baseURL` hostname is not the bench site name (e.g.
+   * baseURL http://127.0.0.1:8000 serving site "localhost").
+   */
+  siteName?: string;
   /** Authentication configuration (token auth for cross-origin/native hosts). */
   auth?: FrappeProviderProps["auth"];
   /** Sync options for the live data engine (persistKey, cdcInterval, …). */
@@ -353,6 +366,8 @@ export function BackofficeProvider({
       <FrappeProvider
         baseURL={frappe.baseURL}
         socketPort={frappe.socketPort}
+        socketBaseURL={frappe.socketBaseURL}
+        siteName={frappe.siteName}
         auth={frappe.auth}
         syncOptions={frappe.syncOptions}
         socketOptions={frappe.socketOptions}