@multiplatform.one/backoffice 6.3.0

package/src/chrome/NotificationsButton.tsx

@@ -0,0 +1,87 @@
+// Navbar bell button + notifications panel (Notification Log, unread badge,
+// mark-as-read; desk parity). Self-contained: reads frappe context + the
+// backoffice navigator internally; the shell mounts it props-less.
+import { Badge, Button } from "@multiplatform.one/components";
+import { FloatingPanel, useViewportGtSm } from "@multiplatform.one/forms";
+import { BellIcon } from "@phosphor-icons/react";
+import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  useBackofficeConfig,
+  useBackofficeNavigator,
+  useBackofficePaths,
+} from "../config/BackofficeProvider";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { useNotifications, type NotificationItem } from "./notifications-data";
+import { NotificationsPanel } from "./notifications-panel";
+
+/** Fixed content width when the panel floats (sheet mode fills instead). */
+const PANEL_WIDTH = 400;
+
+export function NotificationsButton() {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const navigator = useBackofficeNavigator();
+  const paths = useBackofficePaths();
+  const { emitEvent } = useBackofficeConfig();
+  const [open, setOpen] = useState(false);
+  const { items, unreadCount, isLoading, markAsRead, markAllAsRead } = useNotifications();
+  // FloatingPanel pivots float↔sheet on the same viewport check.
+  const floating = useViewportGtSm();
+
+  const handleItemPress = useCallback(
+    (item: NotificationItem) => {
+      if (item.unread) {
+        // Fire-and-forget (desk parity): navigation must not wait on the RPC;
+        // the optimistic override reverts itself if the write fails.
+        markAsRead(item.name).catch((error) => {
+          emitEvent({ type: "error", error, context: "notifications.markAsRead" });
+        });
+      }
+      if (item.document_type && item.document_name) {
+        navigator.navigate(paths.form(item.document_type, item.document_name));
+      }
+      setOpen(false);
+    },
+    [markAsRead, navigator, paths, emitEvent],
+  );
+
+  const handleMarkAllRead = useCallback(() => {
+    markAllAsRead().catch((error) => {
+      emitEvent({ type: "error", error, context: "notifications.markAllAsRead" });
+    });
+  }, [markAllAsRead, emitEvent]);
+
+  const label = t("notifications.title", "Notifications");
+
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      scrollable
+      sizing="fill"
+      fitContent
+      contentPadding="none"
+      triggerA11y={{ label }}
+      trigger={
+        <Badge count={unreadCount} max={99}>
+          <Button
+            chromeless
+            circular
+            size="$3"
+            icon={BellIcon}
+            aria-label={label}
+            data-testid="backoffice-notifications-button"
+          />
+        </Badge>
+      }
+    >
+      <NotificationsPanel
+        items={items}
+        isLoading={isLoading}
+        width={floating ? PANEL_WIDTH : "100%"}
+        onItemPress={handleItemPress}
+        onMarkAllRead={handleMarkAllRead}
+      />
+    </FloatingPanel>
+  );
+}

package/src/chrome/UserMenu.tsx

@@ -0,0 +1,173 @@
+// Navbar avatar menu (session user, my settings, toggle theme, logout;
+// desk parity). Theme toggling rides the provider's `appearance` adapter —
+// hosts without one get a disabled item (GJS/story parity). The logout and
+// theme items are individually gated by the userMenu capability config.
+import React from "react";
+import {
+  Avatar,
+  Button,
+  DropdownMenu,
+  SizableText,
+  YStack,
+  isWeb,
+} from "@multiplatform.one/components";
+import { useFrappeConfig } from "@multiplatform.one/frappe-ui";
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  useBackofficeCapabilities,
+  useBackofficeConfig,
+  useBackofficeNavigator,
+  useBackofficePaths,
+} from "../config/BackofficeProvider";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { useFrappeApp } from "../shared/useFrappeApp";
+import { clearSessionUserCache, useSessionUserInfo } from "./user-session";
+
+export interface UserMenuProps {
+  /** Open the menu on mount (stories/tests only). */
+  defaultOpen?: boolean;
+}
+
+export function UserMenu({ defaultOpen }: UserMenuProps = {}) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const navigator = useBackofficeNavigator();
+  const paths = useBackofficePaths();
+  const { appearance } = useBackofficeConfig();
+  const { userMenu } = useBackofficeCapabilities();
+  const app = useFrappeApp();
+  const frappeConfig = useFrappeConfig();
+  const { info } = useSessionUserInfo();
+  const sessionUser = info?.user;
+
+  const handleLogout = useCallback(async () => {
+    try {
+      await app?.auth().logout();
+    } catch {
+      // Best effort: even when the bench rejects the call (expired session,
+      // network), still clear local state and leave the desk.
+    }
+    // Cache clear scope: this package's session-user cache only. The frappe
+    // `sid` cookie is invalidated server-side by /api/method/logout itself.
+    clearSessionUserCache();
+    navigator.replace(paths.home());
+  }, [app, navigator, paths]);
+
+  const handleReload = useCallback(() => {
+    if (typeof location !== "undefined" && typeof location.reload === "function") {
+      location.reload();
+    }
+  }, []);
+
+  const websiteURL = frappeConfig?.baseURL;
+  const handleViewWebsite = useCallback(() => {
+    if (websiteURL && typeof window !== "undefined" && typeof window.open === "function") {
+      window.open(websiteURL, "_blank", "noopener,noreferrer");
+    }
+  }, [websiteURL]);
+
+  const handleToggleTheme = useCallback(() => {
+    if (!appearance) return;
+    appearance.setScheme(appearance.scheme === "dark" ? "light" : "dark");
+  }, [appearance]);
+
+  const exitToSite = userMenu.exitToSite;
+  const handleExitToSite = useCallback(() => {
+    navigator.navigate(exitToSite.path);
+  }, [navigator, exitToSite.path]);
+
+  const sessionGate = sessionUser
+    ? {}
+    : {
+        disabled: true,
+        disabledReason: t("userMenu.sessionUnavailable", "Session not loaded"),
+      };
+
+  return (
+    <DropdownMenu placement="bottom-end" defaultOpen={defaultOpen}>
+      <DropdownMenu.Trigger asChild>
+        <Button chromeless circular size="$3" aria-label={t("userMenu.label", "User menu")}>
+          <Avatar size={26} src={info?.imageUrl} name={info?.fullName ?? info?.user} />
+        </Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content minWidth={240}>
+        {info ? (
+          <>
+            <YStack paddingHorizontal="$3" paddingVertical="$2.5" gap="$0.5">
+              <SizableText size="$3" fontWeight="600" numberOfLines={1}>
+                {info.fullName}
+              </SizableText>
+              {info.email ? (
+                <SizableText size="$2" color="$color10" numberOfLines={1}>
+                  {info.email}
+                </SizableText>
+              ) : null}
+            </YStack>
+            <DropdownMenu.Separator />
+          </>
+        ) : null}
+        <DropdownMenu.Item
+          {...sessionGate}
+          onSelect={() => sessionUser && navigator.navigate(paths.form("User", sessionUser))}
+        >
+          {t("userMenu.myProfile", "My Profile")}
+        </DropdownMenu.Item>
+        <DropdownMenu.Item
+          {...sessionGate}
+          onSelect={() => sessionUser && navigator.navigate(paths.form("User", sessionUser))}
+        >
+          {t("userMenu.mySettings", "My Settings")}
+        </DropdownMenu.Item>
+        {/* GAP: desk's Session Defaults dialog (frappe.core.doctype.session_default_settings)
+            has no backoffice surface yet — placeholder until a dialog exists. */}
+        <DropdownMenu.Item
+          disabled
+          disabledReason={t("userMenu.sessionDefaultsGap", "Not implemented yet")}
+        >
+          {t("userMenu.sessionDefaults", "Session Defaults")}
+        </DropdownMenu.Item>
+        {isWeb ? (
+          <DropdownMenu.Item onSelect={handleReload}>
+            {t("userMenu.reload", "Reload")}
+          </DropdownMenu.Item>
+        ) : null}
+        {userMenu.themeToggle ? (
+          <DropdownMenu.Item
+            {...(appearance
+              ? {}
+              : {
+                  disabled: true,
+                  disabledReason: t(
+                    "userMenu.themeUnavailable",
+                    "Theme switching is unavailable on this platform",
+                  ),
+                })}
+            onSelect={handleToggleTheme}
+          >
+            {t("userMenu.toggleTheme", "Toggle Theme")}
+          </DropdownMenu.Item>
+        ) : null}
+        {isWeb && websiteURL ? (
+          <DropdownMenu.Item onSelect={handleViewWebsite}>
+            {t("userMenu.viewWebsite", "View Website")}
+          </DropdownMenu.Item>
+        ) : null}
+        {/* MOD-02: embedded shells are full-bleed (no host navbar), so the
+            way back into the host app lives here. */}
+        {isWeb && exitToSite.enabled ? (
+          <DropdownMenu.Item onSelect={handleExitToSite}>
+            {exitToSite.label ?? t("userMenu.exitToSite", "← multiplatform.one")}
+          </DropdownMenu.Item>
+        ) : null}
+        {userMenu.logout ? (
+          <>
+            <DropdownMenu.Separator />
+            <DropdownMenu.Item onSelect={handleLogout}>
+              {t("userMenu.logOut", "Log Out")}
+            </DropdownMenu.Item>
+          </>
+        ) : null}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  );
+}

package/src/chrome/awesomebar-data.tsx

@@ -0,0 +1,252 @@
+// Data layer for the backoffice awesomebar: a session-cached DocType +
+// Workspace name catalog, the frappe.utils.global_search document search,
+// and the shared desk recents store (same storage key frappe-ui's
+// DeskSidebar reads).
+//
+// Connection comes exclusively from the ambient FrappeProvider (mounted by
+// BackofficeProvider); without one the catalog/search stay empty and inert.
+import React from "react";
+import { HttpClient, type AuthConfig, type FixtureProvider } from "@multiplatform.one/frappe";
+import { useFrappeConfig, type FrappeConfig } from "@multiplatform.one/frappe-ui";
+import { storage } from "@multiplatform.one/store";
+import { useEffect, useMemo, useState } from "react";
+
+// ---------------------------------------------------------------------------
+// Catalog (DocType names + Workspaces), fetched once per session
+// ---------------------------------------------------------------------------
+
+export interface AwesomebarWorkspace {
+  name: string;
+  title: string;
+}
+
+export interface AwesomebarCatalog {
+  doctypes: string[];
+  workspaces: AwesomebarWorkspace[];
+}
+
+interface CatalogSource {
+  baseURL: string;
+  auth?: FrappeConfig["auth"];
+  fixtures?: FixtureProvider;
+}
+
+/** Module-level cache: one fetch per (baseURL, fixture-mode) per session. */
+const catalogCache = new Map<string, Promise<AwesomebarCatalog>>();
+
+async function fetchCatalog(source: CatalogSource): Promise<AwesomebarCatalog> {
+  if (source.fixtures) {
+    const [doctypes, workspaces] = await Promise.all([
+      source.fixtures.getList("DocType", { fields: ["name"] }),
+      source.fixtures.getList("Workspace", { fields: ["name", "title"] }),
+    ]);
+    return {
+      doctypes: (doctypes as { name?: string }[]).flatMap((row) => (row.name ? [row.name] : [])),
+      workspaces: (workspaces as { name?: string; title?: string }[]).flatMap((row) =>
+        row.name ? [{ name: row.name, title: row.title || row.name }] : [],
+      ),
+    };
+  }
+  const client = new HttpClient(source.baseURL, source.auth as AuthConfig | undefined);
+  const [doctypesRes, workspacesRes] = await Promise.all([
+    client.get<{ message?: { name: string }[] }>("/api/method/frappe.client.get_list", {
+      doctype: "DocType",
+      fields: '["name"]',
+      limit_page_length: "0",
+    }),
+    client.get<{ data?: { name: string; title?: string }[] }>("/api/resource/Workspace", {
+      fields: '["name","title"]',
+      limit_page_length: "0",
+    }),
+  ]);
+  return {
+    doctypes: (doctypesRes.payload?.message ?? []).flatMap((row) => (row.name ? [row.name] : [])),
+    workspaces: (workspacesRes.payload?.data ?? []).flatMap((row) =>
+      row.name ? [{ name: row.name, title: row.title || row.name }] : [],
+    ),
+  };
+}
+
+function getCatalog(source: CatalogSource): Promise<AwesomebarCatalog> {
+  const key = `${source.baseURL}:${source.fixtures ? "fixtures" : "live"}`;
+  let promise = catalogCache.get(key);
+  if (!promise) {
+    promise = fetchCatalog(source);
+    // Failed fetches are evicted so a later mount can retry.
+    promise.catch(() => {
+      if (catalogCache.get(key) === promise) catalogCache.delete(key);
+    });
+    catalogCache.set(key, promise);
+  }
+  return promise;
+}
+
+export interface AwesomebarCatalogState {
+  catalog?: AwesomebarCatalog;
+  /** Catalog fetch failed (e.g. Guest 403 on the DocType list). */
+  error: boolean;
+}
+
+/**
+ * DocType + Workspace name catalog from the ambient FrappeProvider (fixtures
+ * honored in stories/tests), fetched once per session. SSR-safe: the fetch
+ * runs in an effect. Without a provider the catalog stays empty.
+ */
+export function useAwesomebarCatalog(): AwesomebarCatalogState {
+  const config = useFrappeConfig();
+  const baseURL = config?.baseURL;
+  const fixtures = config?.fixtures;
+  const auth = config?.auth;
+
+  const [catalog, setCatalog] = useState<AwesomebarCatalog | undefined>(undefined);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    if (!baseURL) return;
+    let cancelled = false;
+    setError(false);
+    getCatalog({ baseURL, auth, fixtures })
+      .then((result) => {
+        if (!cancelled) setCatalog(result);
+      })
+      .catch(() => {
+        if (!cancelled) setError(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 { catalog, error };
+}
+
+// ---------------------------------------------------------------------------
+// Global search (frappe.utils.global_search.search)
+// ---------------------------------------------------------------------------
+
+/** Row shape returned by frappe.utils.global_search.search. */
+export interface GlobalSearchHit {
+  doctype: string;
+  name: string;
+  content: string;
+}
+
+export interface GlobalSearchState {
+  hits: GlobalSearchHit[];
+  searching: boolean;
+}
+
+/**
+ * Document hits from the desk full-text index for an (already debounced)
+ * query. Empty query clears without fetching. Failures degrade to no hits —
+ * the nav-command and workspace sections still render.
+ */
+export function useGlobalSearch(query: string, limit = 10): GlobalSearchState {
+  const config = useFrappeConfig();
+  const baseURL = config?.baseURL;
+  const auth = config?.auth;
+
+  const client = useMemo(
+    () => (baseURL ? new HttpClient(baseURL, auth as AuthConfig | undefined) : undefined),
+    // Provider auth is session-stable; key the client by baseURL only.
+    // oxlint-disable-next-line exhaustive-deps
+    [baseURL],
+  );
+
+  const [hits, setHits] = useState<GlobalSearchHit[]>([]);
+  const [searching, setSearching] = useState(false);
+
+  useEffect(() => {
+    if (!query || !client) {
+      setHits([]);
+      setSearching(false);
+      return;
+    }
+    let cancelled = false;
+    setSearching(true);
+    client
+      .get<{ message?: GlobalSearchHit[] }>("/api/method/frappe.utils.global_search.search", {
+        text: query,
+        start: 0,
+        limit,
+      })
+      .then((response) => {
+        if (!cancelled) setHits(response.payload?.message ?? []);
+      })
+      .catch(() => {
+        if (!cancelled) setHits([]);
+      })
+      .finally(() => {
+        if (!cancelled) setSearching(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, query, limit]);
+
+  return { hits, searching };
+}
+
+/**
+ * Global-search `content` is "Label: value ||| Label2: value2" — flatten the
+ * separators to a middot snippet and cap the length for one-line display.
+ */
+export function toContentSnippet(content: string, maxLength = 120): string {
+  const flat = content
+    .replace(/<[^>]*>/g, " ")
+    .split("|||")
+    .map((part) => part.trim())
+    .filter(Boolean)
+    .join(" · ")
+    .replace(/\s+/g, " ")
+    .trim();
+  return flat.length > maxLength ? `${flat.slice(0, maxLength - 1)}…` : flat;
+}
+
+// ---------------------------------------------------------------------------
+// Recents (shared desk store — same key frappe-ui's DeskSidebar/addToRecent
+// writes, so navbar recents and sidebar recents stay one list)
+// ---------------------------------------------------------------------------
+
+export interface RecentItem {
+  label: string;
+  path: string;
+}
+
+const recentStorageKey = "frappe-desk-recent";
+
+/** Newest-first recent documents from the shared desk store. */
+export async function readRecentItems(): Promise<RecentItem[]> {
+  try {
+    const raw = await Promise.resolve(storage.getItem(recentStorageKey));
+    return raw ? (JSON.parse(raw) as RecentItem[]) : [];
+  } catch {
+    return [];
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Matching
+// ---------------------------------------------------------------------------
+
+/**
+ * Case-insensitive substring match over names: prefix matches rank first,
+ * shorter names break ties (best-match-first, desk-style).
+ */
+export function rankNameMatches(query: string, names: readonly string[], limit: number): string[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return [];
+  const prefixed: string[] = [];
+  const contained: string[] = [];
+  for (const name of names) {
+    const lower = name.toLowerCase();
+    if (lower.startsWith(q)) prefixed.push(name);
+    else if (lower.includes(q)) contained.push(name);
+  }
+  prefixed.sort((a, b) => a.length - b.length);
+  contained.sort((a, b) => a.length - b.length);
+  return [...prefixed, ...contained].slice(0, limit);
+}