@multiplatform.one/frappe-ui 6.0.0

package/src/desk/DeskSidebar.tsx

@@ -0,0 +1,185 @@
+/**
+ * DeskSidebar - Sidebar navigation for Frappe Desk.
+ *
+ * Sections:
+ * - Recent: last 20 visited documents from shared storage
+ * - Favorites: user-pinned documents from shared storage
+ * - Modules: DocTypes grouped by module (fetched via useDocTypeSearch cache)
+ *
+ * Uses the existing Sidebar component internally.
+ */
+
+import { useDocTypeSearch, type FrappeConnectionConfig } from "@multiplatform.one/frappe";
+import React, { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useFrappeConfig } from "../FrappeProvider";
+import { Sidebar, type SidebarSection } from "@multiplatform.one/components";
+import { storage } from "@multiplatform.one/store";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface DeskSidebarProps {
+  /** Called when user navigates */
+  onNavigate?: (path: string) => void;
+  /** Currently active path */
+  activePath?: string;
+  /** Base path (default "/desk") */
+  basePath?: string;
+}
+
+interface StoredItem {
+  label: string;
+  path: string;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const recentStorageKey = "frappe-desk-recent";
+const favoritesStorageKey = "frappe-desk-favorites";
+const maxRecent = 20;
+
+// ---------------------------------------------------------------------------
+// Storage helpers (exported for external use)
+// ---------------------------------------------------------------------------
+
+async function readStoredItems(key: string): Promise<StoredItem[]> {
+  try {
+    const raw = await Promise.resolve(storage.getItem(key));
+    return raw ? (JSON.parse(raw) as StoredItem[]) : [];
+  } catch {
+    return [];
+  }
+}
+
+async function writeStoredItems(key: string, items: StoredItem[]): Promise<void> {
+  try {
+    await Promise.resolve(storage.setItem(key, JSON.stringify(items)));
+  } catch {
+    // storage unavailable
+  }
+}
+
+/**
+ * Add an item to the recent documents list.
+ * Deduplicates by path and caps at 20 entries.
+ */
+export function addToRecent(item: { label: string; path: string }): void {
+  void (async () => {
+    const items = (await readStoredItems(recentStorageKey)).filter((r) => r.path !== item.path);
+    items.unshift(item);
+    await writeStoredItems(recentStorageKey, items.slice(0, maxRecent));
+  })();
+}
+
+/**
+ * Add an item to the favorites list.
+ * Deduplicates by path.
+ */
+export function addToFavorites(item: { label: string; path: string }): void {
+  void (async () => {
+    const items = await readStoredItems(favoritesStorageKey);
+    if (items.some((f) => f.path === item.path)) return;
+    items.push(item);
+    await writeStoredItems(favoritesStorageKey, items);
+  })();
+}
+
+/**
+ * Remove an item from the favorites list by path.
+ */
+export function removeFromFavorites(path: string): void {
+  void (async () => {
+    const items = (await readStoredItems(favoritesStorageKey)).filter((f) => f.path !== path);
+    await writeStoredItems(favoritesStorageKey, items);
+  })();
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function DeskSidebar({ onNavigate, activePath, basePath = "/desk" }: DeskSidebarProps) {
+  const { t } = useTranslation();
+  const config = useFrappeConfig();
+
+  // Read persisted sidebar data on mount
+  const [recentItems, setRecentItems] = useState<StoredItem[]>([]);
+  const [favoriteItems, setFavoriteItems] = useState<StoredItem[]>([]);
+
+  useEffect(() => {
+    void (async () => {
+      setRecentItems(await readStoredItems(recentStorageKey));
+      setFavoriteItems(await readStoredItems(favoritesStorageKey));
+    })();
+  }, []);
+
+  // Fetch DocType list for module grouping.
+  // useDocTypeSearch with "" returns [] but still fetches and caches the full
+  // DocType list internally. Passing " " triggers a local filter that matches
+  // all doctypes (every name contains a space-like match), giving us the full list.
+  const frappeConfig: FrappeConnectionConfig | undefined = config
+    ? { baseURL: config.baseURL, socketPort: config.socketPort, auth: config.auth }
+    : undefined;
+  const { results: moduleResults } = useDocTypeSearch(frappeConfig, " ");
+
+  // Deduplicate by doctype to build a Modules section
+  const modulesSections = useMemo<SidebarSection[]>(() => {
+    const doctypeSet = new Set<string>();
+    for (const r of moduleResults) {
+      if (r.type === "list") {
+        doctypeSet.add(r.doctype);
+      }
+    }
+
+    const items = Array.from(doctypeSet)
+      .sort()
+      .map((dt) => ({
+        label: dt,
+        value: `${basePath}/${dt}`,
+        active: activePath === `${basePath}/${dt}`,
+        onPress: () => onNavigate?.(`${basePath}/${dt}`),
+      }));
+
+    if (items.length === 0) return [];
+    return [{ title: t("Modules"), items }];
+  }, [moduleResults, basePath, activePath, onNavigate, t]);
+
+  // Build sidebar sections
+  const sections = useMemo<SidebarSection[]>(() => {
+    const result: SidebarSection[] = [];
+
+    if (recentItems.length > 0) {
+      result.push({
+        title: t("Recent"),
+        items: recentItems.map((item) => ({
+          label: item.label,
+          value: item.path,
+          onPress: () => onNavigate?.(item.path),
+          active: activePath === item.path,
+        })),
+      });
+    }
+
+    if (favoriteItems.length > 0) {
+      result.push({
+        title: t("Favorites"),
+        items: favoriteItems.map((item) => ({
+          label: item.label,
+          value: item.path,
+          onPress: () => onNavigate?.(item.path),
+          active: activePath === item.path,
+        })),
+      });
+    }
+
+    result.push(...modulesSections);
+
+    return result;
+  }, [recentItems, favoriteItems, modulesSections, activePath, onNavigate, t]);
+
+  return <Sidebar sections={sections} />;
+}

package/src/desk/awesomebar.tsx

@@ -0,0 +1,370 @@
+/**
+ * Awesomebar - Global search bar for Frappe Desk.
+ *
+ * Features:
+ * - Ctrl+K / Cmd+K keyboard shortcut to focus
+ * - Debounced navigation search via useDocTypeSearch
+ * - Document search via GET /api/method/frappe.utils.global_search.search
+ * - Inline math evaluation for numeric expressions
+ * - Command palette (settings, logout, etc.)
+ * - Recent searches stored via platform storage adapter
+ *
+ * Refactored to use Combobox for consistent UX and accessibility.
+ */
+
+import {
+  useDocTypeSearch,
+  HttpClient,
+  type FrappeConnectionConfig,
+} from "@multiplatform.one/frappe";
+import { useHotkey } from "@tanstack/react-hotkeys";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Text, View, XStack, type XStackProps } from "tamagui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Combobox, type ComboboxOption } from "@multiplatform.one/forms";
+import { writeToClipboard } from "@multiplatform.one/platform";
+import { storage } from "@multiplatform.one/store";
+import { useFrappeConfig } from "../FrappeProvider";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface AwesomebarProps extends Omit<XStackProps, "onPress"> {
+  /** Called when user navigates to a result */
+  onNavigate?: (path: string) => void;
+  /** Base path for desk routes (default "/desk") */
+  basePath?: string;
+}
+
+interface DocSearchResult {
+  doctype: string;
+  name: string;
+  content: string;
+}
+
+interface RecentSearch {
+  query: string;
+  timestamp: number;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const recentStorageKey = "frappe-awesomebar-recent";
+const maxRecent = 10;
+const mathRegex = /^[\d\s+\-*/.()]+$/;
+
+const commands: Record<string, string> = {
+  settings: "/desk/settings",
+  logout: "/logout",
+  home: "/desk",
+  help: "/desk/help",
+};
+
+// Value prefixes to encode result type
+const prefix = {
+  MATH: "math:",
+  COMMAND: "cmd:",
+  NAV: "nav:",
+  DOC: "doc:",
+} as const;
+
+// ---------------------------------------------------------------------------
+// Storage helpers
+// ---------------------------------------------------------------------------
+
+async function getRecentSearches(): Promise<RecentSearch[]> {
+  try {
+    const raw = await Promise.resolve(storage.getItem(recentStorageKey));
+    return raw ? (JSON.parse(raw) as RecentSearch[]) : [];
+  } catch {
+    return [];
+  }
+}
+
+async function addRecentSearch(query: string): Promise<void> {
+  try {
+    const recent = (await getRecentSearches()).filter((r) => r.query !== query);
+    recent.unshift({ query, timestamp: Date.now() });
+    await Promise.resolve(
+      storage.setItem(recentStorageKey, JSON.stringify(recent.slice(0, maxRecent))),
+    );
+  } catch {
+    // storage unavailable
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function createHttpClientFromConfig(config: FrappeConnectionConfig): HttpClient {
+  return new HttpClient(
+    config.baseURL,
+    config.auth as Parameters<typeof HttpClient.prototype.updateAuth>[0],
+  );
+}
+
+function evaluateMath(expr: string): number | null {
+  if (!mathRegex.test(expr.trim())) return null;
+  try {
+    const result = new Function(`return (${expr.trim()})`)() as unknown;
+    if (typeof result === "number" && Number.isFinite(result)) return result;
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+function matchingCommands(query: string): Array<{ label: string; path: string }> {
+  if (!query) return [];
+  const lower = query.toLowerCase();
+  return Object.entries(commands)
+    .filter(([name]) => name.includes(lower))
+    .map(([name, path]) => ({ label: name, path }));
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function Awesomebar({ onNavigate, basePath = "/desk", ...stackProps }: AwesomebarProps) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs();
+  const config = useFrappeConfig();
+  const [query, setQuery] = useState("");
+  const [docResults, setDocResults] = useState<DocSearchResult[]>([]);
+  const [docSearchLoading, setDocSearchLoading] = useState(false);
+
+  // Navigation search via useDocTypeSearch
+  const frappeConfig: FrappeConnectionConfig | undefined = config
+    ? { baseURL: config.baseURL, socketPort: config.socketPort, auth: config.auth }
+    : undefined;
+  const { results: navResults } = useDocTypeSearch(frappeConfig, query);
+
+  // Limit navigation results
+  const limitedNavResults = useMemo(() => navResults.slice(0, 15), [navResults]);
+
+  // Math evaluation
+  const mathResult = useMemo(() => (query ? evaluateMath(query) : null), [query]);
+
+  // Command matching
+  const matchedCommands = useMemo(() => matchingCommands(query), [query]);
+
+  // HttpClient ref for document search
+  const httpRef = useRef<HttpClient | undefined>(undefined);
+  const configKeyRef = useRef("");
+  if (config) {
+    const key = `${config.baseURL}:${config.auth?.token ?? ""}`;
+    if (key !== configKeyRef.current) {
+      httpRef.current = createHttpClientFromConfig({
+        baseURL: config.baseURL,
+        auth: config.auth,
+      });
+      configKeyRef.current = key;
+    }
+  }
+
+  // Build Combobox options from all result sources
+  const options = useMemo<ComboboxOption[]>(() => {
+    const opts: ComboboxOption[] = [];
+
+    // Math result
+    if (mathResult !== null) {
+      opts.push({
+        value: `${prefix.MATH}${mathResult}`,
+        label: `= ${mathResult}`,
+        group: t("Result"),
+      });
+    }
+
+    // Commands
+    for (const cmd of matchedCommands) {
+      opts.push({
+        value: `${prefix.COMMAND}${cmd.path}`,
+        label: cmd.label,
+        group: t("Commands"),
+      });
+    }
+
+    // Navigation results
+    for (const result of limitedNavResults) {
+      const path =
+        result.type === "list"
+          ? `${basePath}/${result.doctype}`
+          : result.type === "new"
+            ? `${basePath}/${result.doctype}/new`
+            : `${basePath}/${result.doctype}?view=report`;
+      opts.push({
+        value: `${prefix.NAV}${path}`,
+        label: result.label,
+        keywords: result.doctype,
+        group: t("Navigation"),
+      });
+    }
+
+    // Document results
+    for (const result of docResults) {
+      const path = `${basePath}/${result.doctype}/${result.name}`;
+      opts.push({
+        value: `${prefix.DOC}${path}`,
+        label: result.name,
+        keywords: `${result.doctype} ${result.content}`,
+        group: t("Documents"),
+      });
+    }
+
+    return opts;
+  }, [mathResult, matchedCommands, limitedNavResults, docResults, basePath, t]);
+
+  // Handle search for async document fetching
+  const handleSearch = useCallback((searchQuery: string) => {
+    setQuery(searchQuery);
+
+    if (!searchQuery || !httpRef.current) {
+      setDocResults([]);
+      setDocSearchLoading(false);
+      return;
+    }
+
+    setDocSearchLoading(true);
+    let cancelled = false;
+
+    const timer = setTimeout(async () => {
+      try {
+        const http = httpRef.current;
+        if (!http || cancelled) return;
+
+        const response = await http.get<{
+          message?: Array<{
+            doctype: string;
+            name: string;
+            content: string;
+          }>;
+        }>("/api/method/frappe.utils.global_search.search", {
+          text: searchQuery,
+          start: 0,
+          limit: 10,
+        });
+
+        if (cancelled) return;
+        setDocResults(response.payload?.message ?? []);
+      } catch {
+        if (!cancelled) setDocResults([]);
+      } finally {
+        if (!cancelled) setDocSearchLoading(false);
+      }
+    }, 300);
+
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, []);
+
+  // Handle selection - parse value prefix and navigate
+  const handleValueChange = useCallback(
+    (value: string | string[]) => {
+      const selectedValue = Array.isArray(value) ? value[0] : value;
+      if (!selectedValue) return;
+
+      void addRecentSearch(query);
+
+      if (selectedValue.startsWith(prefix.MATH)) {
+        // Copy math result to clipboard
+        const result = selectedValue.slice(prefix.MATH.length);
+        writeToClipboard(result);
+        return;
+      }
+
+      if (selectedValue.startsWith(prefix.COMMAND)) {
+        const path = selectedValue.slice(prefix.COMMAND.length);
+        onNavigate?.(path);
+        return;
+      }
+
+      if (selectedValue.startsWith(prefix.NAV)) {
+        const path = selectedValue.slice(prefix.NAV.length);
+        onNavigate?.(path);
+        return;
+      }
+
+      if (selectedValue.startsWith(prefix.DOC)) {
+        const path = selectedValue.slice(prefix.DOC.length);
+        onNavigate?.(path);
+        return;
+      }
+    },
+    [query, onNavigate],
+  );
+
+  // Keyboard shortcuts via @tanstack/react-hotkeys
+  useHotkey(
+    "Mod+K",
+    () => {
+      // Focus the combobox trigger
+      const trigger = document.querySelector("[data-awesomebar-trigger]") as HTMLElement;
+      trigger?.click();
+    },
+    { conflictBehavior: "allow" },
+  );
+
+  // Custom trigger that shows the search input
+  const renderTrigger = useCallback(
+    (_selected: ComboboxOption | ComboboxOption[] | undefined, open: boolean) => (
+      <XStack
+        data-awesomebar-trigger
+        flex={1}
+        alignItems="center"
+        height={knobProps.sizeToken === "$3" ? 32 : knobProps.sizeToken === "$5" ? 44 : 36}
+        paddingHorizontal={knobProps.sizeToken}
+        backgroundColor={open ? "$background" : "$color2"}
+        {...knobProps.inputSurface}
+        borderColor={open ? "$accentColor" : "$borderColor"}
+        {...knobProps.borderRadius}
+        cursor="text"
+        {...knobProps.gap}
+      >
+        <Text
+          flex={1}
+          fontSize={knobProps.sizeToken}
+          color="$color10"
+          numberOfLines={1}
+          {...knobProps.body}
+        >
+          {t("Search or type a command...")}
+        </Text>
+        <View
+          paddingHorizontal="$2"
+          paddingVertical="$1"
+          backgroundColor="$color3"
+          {...knobProps.borderRadius}
+        >
+          <Text color="$color11" fontFamily="$mono">
+            ⌘K
+          </Text>
+        </View>
+      </XStack>
+    ),
+    [knobProps.sizeToken, t],
+  );
+
+  return (
+    <XStack position="relative" flex={1} {...stackProps}>
+      <Combobox
+        options={options}
+        onValueChange={handleValueChange}
+        onSearch={handleSearch}
+        loading={docSearchLoading}
+        placeholder={t("Search or type a command...")}
+        searchPlaceholder={t("Search...")}
+        emptyMessage={query ? t("No results found.") : t("Type to search...")}
+        trigger={renderTrigger}
+        size={knobProps.sizeToken}
+      />
+    </XStack>
+  );
+}