@multiplatform.one/backoffice 6.4.2 → 6.6.0

package/src/form/sidebar-dialogs.tsx

@@ -0,0 +1,118 @@
+/**
+ * Sidebar add dialogs: assign-to (user autocomplete + optional comment) and
+ * share-with (user autocomplete + can-edit toggle). User autocomplete rides
+ * the frappe-ui Link field, which searches `frappe.desk.search.search_link`
+ * (doctype=User) through the ambient FrappeProvider.
+ */
+
+import { ConfirmDialog, Text, XStack, YStack } from "@multiplatform.one/components";
+import { Input, Switch } from "@multiplatform.one/forms";
+import { Link } from "@multiplatform.one/frappe-ui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+
+export interface SidebarAssignDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAssign: (user: string, description?: string) => void;
+}
+
+export function SidebarAssignDialog({ open, onOpenChange, onAssign }: SidebarAssignDialogProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const [user, setUser] = useState("");
+  const [description, setDescription] = useState("");
+
+  // Reset on close (QuickEntryDialog pattern): the dialog content remounts on
+  // open, so the uncontrolled forms Input must see the fresh draft at mount.
+  useEffect(() => {
+    if (!open) {
+      setUser("");
+      setDescription("");
+    }
+  }, [open]);
+
+  return (
+    <ConfirmDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={t("assignTitle", "Add assignment")}
+      confirmLabel={t("assign", "Assign")}
+      confirmDisabled={!user}
+      confirmDisabledReason={t("assignDisabled", "Pick a user first")}
+      onConfirm={() => onAssign(user, description.trim() || undefined)}
+    >
+      <YStack {...knobProps.gap} minWidth={280}>
+        <Link
+          label={t("assignTo", "Assign to")}
+          doctype="User"
+          value={user}
+          onChange={(value) => setUser(value ?? "")}
+        />
+        <Input
+          value={description}
+          onChangeText={setDescription}
+          placeholder={t("assignComment", "Comment (optional)")}
+          inputProps={{
+            "aria-label": t("assignComment", "Comment (optional)"),
+          }}
+        />
+      </YStack>
+    </ConfirmDialog>
+  );
+}
+
+export interface SidebarShareDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onShare: (user: string, canWrite: boolean) => void;
+}
+
+export function SidebarShareDialog({ open, onOpenChange, onShare }: SidebarShareDialogProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const [user, setUser] = useState("");
+  const [canWrite, setCanWrite] = useState(false);
+
+  // Reset on close — see SidebarAssignDialog.
+  useEffect(() => {
+    if (!open) {
+      setUser("");
+      setCanWrite(false);
+    }
+  }, [open]);
+
+  return (
+    <ConfirmDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={t("shareTitle", "Share document")}
+      confirmLabel={t("share", "Share")}
+      confirmDisabled={!user}
+      confirmDisabledReason={t("shareDisabled", "Pick a user first")}
+      onConfirm={() => onShare(user, canWrite)}
+    >
+      <YStack {...knobProps.gap} minWidth={280}>
+        <Link
+          label={t("shareWith", "Share with")}
+          doctype="User"
+          value={user}
+          onChange={(value) => setUser(value ?? "")}
+        />
+        <XStack alignItems="center" justifyContent="space-between">
+          <Text fontSize="$3" color="$color11">
+            {t("canEdit", "Can edit")}
+          </Text>
+          <Switch
+            size="$2"
+            checked={canWrite}
+            onChange={(value) => setCanWrite(Boolean(value))}
+            switchProps={{ "aria-label": t("canEdit", "Can edit") }}
+          />
+        </XStack>
+      </YStack>
+    </ConfirmDialog>
+  );
+}

package/src/form/sidebar-people.tsx

@@ -0,0 +1,126 @@
+/**
+ * People rows for the form sidebar (Assigned To / Shared With) and the
+ * compact avatar strip (Liked By). Unlike frappe-ui FormSidebar's built-in
+ * initials-only rows, these render the docinfo `user_info` image with an
+ * initials fallback — desk parity for user chips.
+ */
+
+import { Avatar, Button, Text, XStack, YStack } from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { XIcon } from "@phosphor-icons/react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+
+export interface SidebarPersonItem {
+  /** Stable row id (assignment/share row name, or the user id). */
+  id: string;
+  /** User id (email) the action RPCs target. */
+  user: string;
+  /** Display name (user_info fullname, falls back to the user id). */
+  label: string;
+  /** Secondary line (assignment description, share level, …). */
+  sublabel?: string;
+  /** Avatar image URL (user_info image), absolute. */
+  image?: string;
+  /** Hide the remove affordance for this row (e.g. "Everyone" shares). */
+  removable?: boolean;
+}
+
+export interface SidebarPeopleListProps {
+  items: SidebarPersonItem[];
+  emptyText: string;
+  onRemove?: (item: SidebarPersonItem) => void;
+  disabled?: boolean;
+}
+
+export function SidebarPeopleList({
+  items,
+  emptyText,
+  onRemove,
+  disabled,
+}: SidebarPeopleListProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const sz = knobProps.sizeToken;
+  const avatarSize = sz === "$3" ? "$1" : sz === "$5" ? "$3" : "$2";
+  const labelFontSize = sz === "$3" ? "$1" : sz === "$5" ? "$4" : "$2";
+  const subFontSize = sz === "$5" ? "$2" : "$1";
+
+  if (items.length === 0) {
+    return (
+      <Text fontSize={subFontSize} color="$color11">
+        {emptyText}
+      </Text>
+    );
+  }
+
+  return (
+    <YStack {...knobProps.gap}>
+      {items.map((item) => (
+        <XStack key={item.id} gap="$2" alignItems="center">
+          <Avatar size={avatarSize} src={item.image} name={item.label} />
+          <YStack flex={1} minWidth={0}>
+            <Text fontSize={labelFontSize} color="$color12" numberOfLines={1}>
+              {item.label}
+            </Text>
+            {item.sublabel ? (
+              <Text fontSize={subFontSize} color="$color11" numberOfLines={1}>
+                {item.sublabel}
+              </Text>
+            ) : null}
+          </YStack>
+          {onRemove && item.removable !== false && (
+            <Button
+              size="$1"
+              chromeless
+              icon={XIcon}
+              disabled={disabled}
+              aria-label={t("removePerson", "Remove {{name}}", {
+                name: item.label,
+              })}
+              onPress={() => onRemove(item)}
+            />
+          )}
+        </XStack>
+      ))}
+    </YStack>
+  );
+}
+
+export interface SidebarAvatarStripProps {
+  items: Array<{ id: string; label: string; image?: string }>;
+  /**
+   * Clamp to the first `max` avatars and render a "+N" bubble for the rest
+   * (header-cluster readout). Unset = render every avatar (sidebar rows).
+   */
+  max?: number;
+}
+
+/** Overlapping mini-avatar strip (Liked By, header cluster assignees). */
+export function SidebarAvatarStrip({ items, max }: SidebarAvatarStripProps) {
+  if (items.length === 0) return null;
+  const visible = typeof max === "number" && max > 0 ? items.slice(0, max) : items;
+  const overflow = items.length - visible.length;
+  return (
+    <XStack alignItems="center">
+      {visible.map((item, index) => (
+        <XStack key={item.id} marginInlineStart={index === 0 ? 0 : -6}>
+          <Avatar size="$1" src={item.image} name={item.label} alt={item.label} />
+        </XStack>
+      ))}
+      {overflow > 0 && (
+        <XStack marginInlineStart={-6}>
+          <Avatar
+            size="$1"
+            alt={`+${overflow}`}
+            fallback={
+              <Text fontSize={9} fontWeight="600" color="$color11">
+                +{overflow}
+              </Text>
+            }
+          />
+        </XStack>
+      )}
+    </XStack>
+  );
+}

package/src/form/sidebar-rpc.tsx

@@ -0,0 +1,245 @@
+import React from "react";
+/**
+ * Sidebar mutation RPCs — thin wrappers over the whitelisted desk methods,
+ * every payload probed against the live bench (frappe v15) 2026-08-12:
+ *
+ *   frappe.desk.form.assign_to.add        {doctype, name, assign_to: ["user"], description?}
+ *                                         → message: [{owner, name}]
+ *   frappe.desk.form.assign_to.remove     {doctype, name, assign_to: "user"} → message: [...]
+ *   frappe.desk.doctype.tag.tag.add_tag   {tag, dt, dn} → message: "<tag>"
+ *   frappe.desk.doctype.tag.tag.remove_tag{tag, dt, dn} → {}
+ *   frappe.desk.doctype.tag.tag.get_tags  {doctype, txt} → message: string[]
+ *   frappe.desk.like.toggle_like          {doctype, name, add: "Yes"|"No"} → {}
+ *   frappe.share.add                      {doctype, name, user, read, write, share, notify}
+ *                                         → message: DocShare doc
+ *   frappe.share.set_permission           {doctype, name, user, permission_to: "read", value: 0}
+ *                                         removes the share (share.remove is NOT whitelisted)
+ *   frappe.desk.form.document_follow.follow_document / unfollow_document
+ *                                         {doctype, doc_name, user} (no-op when document
+ *                                         follow is disabled server-side)
+ *   upload_file (multipart via app.file()) {file, doctype, docname} → message: File doc
+ *   frappe.desk.form.utils.remove_attach  {fid, dt, dn} → {}
+ *   frappe.auth.get_logged_user           → message: "Administrator"
+ */
+
+import type { FrappeApp } from "@multiplatform.one/frappe";
+import { useEffect, useState } from "react";
+
+interface MessagePayload<T = unknown> {
+  message?: T;
+}
+
+// ---------------------------------------------------------------------------
+// Assignments
+// ---------------------------------------------------------------------------
+
+export function addAssignment(
+  app: FrappeApp,
+  doctype: string,
+  name: string,
+  users: string[],
+  description?: string,
+): Promise<unknown> {
+  return app.call().post<MessagePayload>("frappe.desk.form.assign_to.add", {
+    doctype,
+    name,
+    assign_to: users,
+    ...(description ? { description } : {}),
+  });
+}
+
+export function removeAssignment(
+  app: FrappeApp,
+  doctype: string,
+  name: string,
+  user: string,
+): Promise<unknown> {
+  return app.call().post<MessagePayload>("frappe.desk.form.assign_to.remove", {
+    doctype,
+    name,
+    assign_to: user,
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Tags
+// ---------------------------------------------------------------------------
+
+export function addTag(
+  app: FrappeApp,
+  doctype: string,
+  name: string,
+  tag: string,
+): Promise<unknown> {
+  return app.call().post<MessagePayload<string>>("frappe.desk.doctype.tag.tag.add_tag", {
+    tag,
+    dt: doctype,
+    dn: name,
+  });
+}
+
+export function removeTag(
+  app: FrappeApp,
+  doctype: string,
+  name: string,
+  tag: string,
+): Promise<unknown> {
+  return app.call().post<MessagePayload>("frappe.desk.doctype.tag.tag.remove_tag", {
+    tag,
+    dt: doctype,
+    dn: name,
+  });
+}
+
+/** All existing tag names for the doctype (sidebar add-tag suggestions). */
+export async function fetchTagSuggestions(app: FrappeApp, doctype: string): Promise<string[]> {
+  const res = await app
+    .call()
+    .get<MessagePayload<string[]>>("frappe.desk.doctype.tag.tag.get_tags", { doctype, txt: "" });
+  return res.payload?.message ?? [];
+}
+
+// ---------------------------------------------------------------------------
+// Like / Follow
+// ---------------------------------------------------------------------------
+
+export function toggleLike(
+  app: FrappeApp,
+  doctype: string,
+  name: string,
+  add: boolean,
+): Promise<unknown> {
+  return app.call().post<MessagePayload>("frappe.desk.like.toggle_like", {
+    doctype,
+    name,
+    add: add ? "Yes" : "No",
+  });
+}
+
+export function followDocument(
+  app: FrappeApp,
+  doctype: string,
+  name: string,
+  user: string,
+): Promise<unknown> {
+  return app.call().post<MessagePayload>("frappe.desk.form.document_follow.follow_document", {
+    doctype,
+    doc_name: name,
+    user,
+  });
+}
+
+export function unfollowDocument(
+  app: FrappeApp,
+  doctype: string,
+  name: string,
+  user: string,
+): Promise<unknown> {
+  return app.call().post<MessagePayload>("frappe.desk.form.document_follow.unfollow_document", {
+    doctype,
+    doc_name: name,
+    user,
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Shares
+// ---------------------------------------------------------------------------
+
+export function addShare(
+  app: FrappeApp,
+  doctype: string,
+  name: string,
+  user: string,
+  options: { write?: boolean } = {},
+): Promise<unknown> {
+  return app.call().post<MessagePayload>("frappe.share.add", {
+    doctype,
+    name,
+    user,
+    read: 1,
+    write: options.write ? 1 : 0,
+    share: 0,
+    notify: 0,
+  });
+}
+
+/** Dropping read cascades server-side and deletes the DocShare row. */
+export function removeShare(
+  app: FrappeApp,
+  doctype: string,
+  name: string,
+  user: string,
+): Promise<unknown> {
+  return app.call().post<MessagePayload>("frappe.share.set_permission", {
+    doctype,
+    name,
+    user,
+    permission_to: "read",
+    value: 0,
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Attachments
+// ---------------------------------------------------------------------------
+
+export function uploadAttachment(
+  app: FrappeApp,
+  file: File | Blob,
+  doctype: string,
+  name: string,
+): Promise<unknown> {
+  return app.file().uploadFile(file, { doctype, docname: name });
+}
+
+export function removeAttachment(
+  app: FrappeApp,
+  fileId: string,
+  doctype: string,
+  name: string,
+): Promise<unknown> {
+  return app.call().post<MessagePayload>("frappe.desk.form.utils.remove_attach", {
+    fid: fileId,
+    dt: doctype,
+    dn: name,
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Session user
+// ---------------------------------------------------------------------------
+
+const loggedUserCache = new WeakMap<FrappeApp, Promise<string>>();
+
+/** Session user via frappe.auth.get_logged_user, cached per FrappeApp. */
+export function useCurrentUser(app: FrappeApp | undefined, override?: string): string | undefined {
+  const [user, setUser] = useState<string | undefined>(override);
+
+  useEffect(() => {
+    if (override || !app) return;
+    let cancelled = false;
+    let promise = loggedUserCache.get(app);
+    if (!promise) {
+      promise = app
+        .call()
+        .get<MessagePayload<string>>("frappe.auth.get_logged_user")
+        .then((res) => res.payload?.message ?? "Guest");
+      loggedUserCache.set(app, promise);
+      promise.catch(() => loggedUserCache.delete(app));
+    }
+    promise
+      .then((value) => {
+        if (!cancelled) setUser(value);
+      })
+      .catch(() => {
+        // Session probe failed (bench down / unauthenticated): leave undefined
+        // so user-scoped affordances (follow) stay disabled.
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [app, override]);
+
+  return override ?? user;
+}

package/src/form/sidebar-utils.tsx

@@ -0,0 +1,159 @@
+/**
+ * Pure helpers for the form sidebar: frappe timestamp parsing, relative
+ * time (byline), tag-string parsing, file-url resolution, and web-guarded
+ * platform affordances (new tab, file picker). No React, no DOM assumptions
+ * outside the explicit guards — safe on web, iOS/Android (Hermes), and GTK
+ * (GJS, no DOM). External links ride the platform-split openUrl.
+ */
+
+import { openUrl as platformOpenUrl } from "@multiplatform.one/platform";
+
+/** i18next-compatible translate signature (key, default, interpolation). */
+export type SidebarTranslate = (
+  key: string,
+  defaultValue: string,
+  options?: Record<string, unknown>,
+) => string;
+
+/** Parse a frappe timestamp ("2026-08-12 09:35:15.684756" or ISO). */
+export function parseFrappeDate(value: unknown): Date | undefined {
+  if (typeof value !== "string" || !value) return undefined;
+  const iso = value.includes("T") ? value : value.replace(" ", "T");
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime()) ? undefined : date;
+}
+
+const MINUTE = 60_000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const WEEK = 7 * DAY;
+const MONTH = 30 * DAY;
+const YEAR = 365 * DAY;
+
+/**
+ * Desk-style relative time ("just now", "5 minutes ago", "3 weeks ago").
+ * Future timestamps (clock skew) collapse to "just now".
+ */
+export function formatRelativeTime(
+  value: unknown,
+  t: SidebarTranslate,
+  nowMs = Date.now(),
+): string | undefined {
+  const date = parseFrappeDate(value);
+  if (!date) return undefined;
+  const diff = nowMs - date.getTime();
+  if (diff < MINUTE) return t("justNow", "just now");
+  const unit = (count: number, one: [string, string], other: [string, string]) =>
+    count === 1 ? t(one[0], one[1]) : t(other[0], other[1], { count });
+  if (diff < HOUR) {
+    return unit(
+      Math.floor(diff / MINUTE),
+      ["minuteAgo", "1 minute ago"],
+      ["minutesAgo", "{{count}} minutes ago"],
+    );
+  }
+  if (diff < DAY) {
+    return unit(
+      Math.floor(diff / HOUR),
+      ["hourAgo", "1 hour ago"],
+      ["hoursAgo", "{{count}} hours ago"],
+    );
+  }
+  if (diff < WEEK) {
+    return unit(Math.floor(diff / DAY), ["dayAgo", "1 day ago"], ["daysAgo", "{{count}} days ago"]);
+  }
+  if (diff < MONTH) {
+    return unit(
+      Math.floor(diff / WEEK),
+      ["weekAgo", "1 week ago"],
+      ["weeksAgo", "{{count}} weeks ago"],
+    );
+  }
+  if (diff < YEAR) {
+    return unit(
+      Math.floor(diff / MONTH),
+      ["monthAgo", "1 month ago"],
+      ["monthsAgo", "{{count}} months ago"],
+    );
+  }
+  return unit(
+    Math.floor(diff / YEAR),
+    ["yearAgo", "1 year ago"],
+    ["yearsAgo", "{{count}} years ago"],
+  );
+}
+
+/**
+ * docinfo `tags` is a comma-joined string ("probe-two,sidebar-probe" on the
+ * live bench; older payloads may carry a leading comma or JSON "[]").
+ */
+export function parseTagString(tags: unknown): string[] {
+  if (typeof tags !== "string" || !tags) return [];
+  let raw = tags;
+  if (raw.trim().startsWith("[")) {
+    try {
+      const parsed = JSON.parse(raw) as unknown;
+      if (Array.isArray(parsed)) return [...new Set(parsed.map(String).filter(Boolean))];
+    } catch {
+      // fall through to comma parsing
+    }
+    raw = raw.replace(/[[\]"]/g, ",");
+  }
+  return [
+    ...new Set(
+      raw
+        .split(",")
+        .map((tag) => tag.trim())
+        .filter(Boolean),
+    ),
+  ];
+}
+
+/** Resolve a (possibly relative) file_url against the bench base URL. */
+export function toAbsoluteUrl(baseURL: string | undefined, url: string): string {
+  if (/^https?:\/\//i.test(url) || !baseURL) return url;
+  const base = baseURL.replace(/\/+$/, "");
+  return `${base}${url.startsWith("/") ? url : `/${url}`}`;
+}
+
+/** External-URL capability — platform openUrl has a twin on every target. */
+export function canOpenUrl(): boolean {
+  return true;
+}
+
+/** Open a URL externally (web new tab / native Linking / GNOME Gio). */
+export function openUrl(url: string): boolean {
+  platformOpenUrl(url, "_blank");
+  return true;
+}
+
+/** True when a DOM file picker is available (web). */
+export function canPickFile(): boolean {
+  return typeof document !== "undefined" && typeof document.createElement === "function";
+}
+
+/**
+ * Web file picker via a transient `<input type="file">` (imperative — no DOM
+ * JSX so native/GTK bundles never see browser intrinsics). Resolves with the
+ * picked file, or undefined on cancel / unsupported platform.
+ */
+export function pickFile(accept?: string): Promise<File | undefined> {
+  if (!canPickFile()) return Promise.resolve(undefined);
+  return new Promise((resolve) => {
+    const input = document.createElement("input");
+    input.type = "file";
+    if (accept) input.accept = accept;
+    input.style.display = "none";
+    input.onchange = () => {
+      resolve(input.files?.[0] ?? undefined);
+      input.remove();
+    };
+    // Modern browsers fire "cancel" when the dialog is dismissed.
+    input.addEventListener("cancel", () => {
+      resolve(undefined);
+      input.remove();
+    });
+    document.body.appendChild(input);
+    input.click();
+  });
+}