@multiplatform.one/backoffice 7.34.3 → 7.35.0

package/src/form/FormToolbar.tsx

@@ -1,28 +1,10 @@
-/**
- * Desk-capability form toolbar: breadcrumbs → title + status indicator pill +
- * header cluster slot (MOD-07 — assignees/like/follow readout) → primary
- * actions (Save / Submit / Cancel / Amend per the docstatus lifecycle),
- * standalone Refresh, and the ⋯ menu. Presentational — every action is a
- * callback from DocFormScreen (which owns confirms, dialogs, and RPCs).
- *
- * Emphasis budget (LC-05): the current lifecycle primary (Save or Submit)
- * is THE single accent-solid action; everything else stays neutral, and
- * Cancel carries the error intent outlined (destructive, not primary).
- *
- * Indicator parity follows desk's `frappe.get_indicator` order:
- * unsaved → meta.states row (by status value) → docstatus defaults →
- * status-field value with a guessed color → Draft (submittable) → no pill.
- *
- * Compact viewports (< 640, `useLayoutSizeClass`) collapse secondary
- * lifecycle actions and the standalone Refresh into the ⋯ menu; one primary
- * button stays visible.
- */
-
 import {
+  Avatar,
   Breadcrumbs,
   Chip,
   DropdownMenu,
   H1,
+  H2,
   XStack,
   YStack,
   type BreadcrumbItem,
@@ -41,6 +23,7 @@ import {
   EnvelopeIcon,
   FloppyDiskIcon,
   LinkIcon,
+  LayoutIcon,
   ListBulletsIcon,
   MagnifyingGlassIcon,
   PencilSimpleIcon,
@@ -203,7 +186,8 @@ export interface FormToolbarMenuItem {
     | "new"
     | "list"
     | "desk"
-    | "jump";
+    | "jump"
+    | "layout";
   destructive?: boolean;
   disabled?: boolean;
   disabledReason?: string;
@@ -218,6 +202,7 @@ export interface FormToolbarProps {
   /** Hide the status chip entirely (e.g. meta still loading). */
   showIndicator?: boolean;
   isSaving: boolean;
+  isDirty: boolean;
   /**
    * MOD-07 header cluster (assignee avatars / like / follow) rendered right
    * after the status chip. The toolbar stays presentational — the cluster
@@ -234,17 +219,6 @@ export interface FormToolbarProps {
   onCancel: () => void;
   onAmend: () => void;
   menuItems: FormToolbarMenuItem[];
-  /**
-   * Standalone Refresh button (desk parity). Falls back to the `reload`
-   * menu item's action so existing consumers get the button for free.
-   */
-  onReload?: () => void;
-  /**
-   * "Open in Desk" hop — the document's native desk counterpart. Renders a
-   * standalone icon button on wide viewports (narrow keeps the ⋯ menu's
-   * `desk` entry as the only affordance, like Refresh).
-   */
-  onOpenDesk?: () => void;
   /**
    * Prev/next document pager (desk ‹ › parity) — pages through the list
    * order the user came from. The pair renders only when the composing
@@ -256,6 +230,8 @@ export interface FormToolbarProps {
   onNextDoc?: () => void;
   prevDocDisabled?: boolean;
   nextDocDisabled?: boolean;
+  /** Absolute URL of the document image (meta.image_field), compact header only. */
+  image?: string;
 }
 
 const MENU_ICONS = {
@@ -270,6 +246,7 @@ const MENU_ICONS = {
   list: ListBulletsIcon,
   desk: ArrowSquareOutIcon,
   jump: MagnifyingGlassIcon,
+  layout: LayoutIcon,
 } as const;
 
 type LifecycleAction = "save" | "submit" | "cancel" | "amend";
@@ -281,6 +258,7 @@ export function FormToolbar({
   indicator,
   showIndicator = true,
   isSaving,
+  isDirty,
   cluster,
   canSave,
   canSubmit,
@@ -291,12 +269,11 @@ export function FormToolbar({
   onCancel,
   onAmend,
   menuItems,
-  onReload,
-  onOpenDesk,
   onPrevDoc,
   onNextDoc,
   prevDocDisabled,
   nextDocDisabled,
+  image,
 }: FormToolbarProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const { knobProps } = useResolvedKnobs();
@@ -318,10 +295,6 @@ export function FormToolbar({
         : { label: indicatorLabels[indicator], color: INDICATOR_COLORS[indicator] }
       : indicator;
 
-  // Desk primary-action lifecycle: dirty/new → Save; saved submittable
-  // draft → Submit; docstatus 1 → Cancel; docstatus 2 → Amend.
-  const isDirtyish =
-    typeof indicator === "string" && (indicator === "notSaved" || indicator === "new");
   const actionLabels: Record<LifecycleAction, string> = {
     save: isSaving ? t("saving", "Saving…") : t("save", "Save"),
     submit: t("submit", "Submit"),
@@ -334,18 +307,11 @@ export function FormToolbar({
     cancel: onCancel,
     amend: onAmend,
   };
-  // Ordered by primacy: the first visible action is THE primary on narrow.
-  const visibleActions: LifecycleAction[] = [
-    ...(canSave && (isDirtyish || !canSubmit) ? (["save"] as const) : []),
-    ...(canSubmit && !isDirtyish ? (["submit"] as const) : []),
+  const collapsedActions: LifecycleAction[] = [
+    ...(canSubmit && !isDirty ? (["submit"] as const) : []),
     ...(canCancel ? (["cancel"] as const) : []),
     ...(canAmend ? (["amend"] as const) : []),
   ];
-  const buttonActions = isNarrow ? visibleActions.slice(0, 1) : visibleActions;
-  const collapsedActions = isNarrow ? visibleActions.slice(1) : [];
-
-  const reload = onReload ?? menuItems.find((item) => item.key === "reload")?.onSelect;
-
   const actionEntryIcons: Record<LifecycleAction, typeof CheckCircleIcon> = {
     save: FloppyDiskIcon,
     submit: CheckCircleIcon,
@@ -353,7 +319,6 @@ export function FormToolbar({
     amend: CopyIcon,
   };
   const entries: DropdownMenuEntry[] = [
-    // Narrow viewports: secondary lifecycle actions fold into the menu.
     ...collapsedActions.map((action) => {
       const Icon = actionEntryIcons[action];
       return {
@@ -367,6 +332,27 @@ export function FormToolbar({
       };
     }),
     ...(collapsedActions.length > 0 && menuItems.length > 0 ? [{ separator: true as const }] : []),
+    ...(isNarrow && (onPrevDoc || onNextDoc)
+      ? [
+          {
+            key: "__previous-document",
+            label: t("prevDoc", "Previous document"),
+            icon: <CaretLeftIcon size={iconSize} />,
+            disabled: prevDocDisabled || !onPrevDoc,
+            disabledReason: t("noPrevDoc", "No previous document"),
+            onSelect: onPrevDoc,
+          },
+          {
+            key: "__next-document",
+            label: t("nextDoc", "Next document"),
+            icon: <CaretRightIcon size={iconSize} />,
+            disabled: nextDocDisabled || !onNextDoc,
+            disabledReason: t("noNextDoc", "No next document"),
+            onSelect: onNextDoc,
+          },
+          ...(menuItems.length ? [{ separator: true as const }] : []),
+        ]
+      : []),
     ...menuItems.map((item) => ({
       key: item.key,
       label: item.label,
@@ -383,6 +369,68 @@ export function FormToolbar({
     })),
   ];
 
+  const menuButton =
+    entries.length > 0 ? (
+      <DropdownMenu items={entries} placement="bottom-end">
+        <Button
+          size={knobProps.sizeToken}
+          {...(isNarrow ? {} : { outlined: true })}
+          icon={<DotsThreeIcon size={iconSize} weight="bold" />}
+          aria-label={t("menu", "Menu")}
+          testID="form-toolbar-menu"
+        />
+      </DropdownMenu>
+    ) : null;
+
+  const saveButton =
+    canSave && isDirty ? (
+      <Button
+        size={knobProps.sizeToken}
+        accent
+        icon={<FloppyDiskIcon size={iconSize} />}
+        loading={isSaving}
+        onPress={onSave}
+        testID="form-toolbar-save"
+      >
+        {actionLabels.save}
+      </Button>
+    ) : null;
+
+  if (isNarrow) {
+    return (
+      <XStack
+        alignItems="center"
+        gap="$3"
+        {...knobProps.panelPadding}
+        paddingBottom={0}
+        testID="form-toolbar"
+      >
+        {image ? (
+          <Avatar src={image} name={title} circular={false} size="$6" flexShrink={0} />
+        ) : null}
+        <YStack flex={1} minWidth={0} gap="$1">
+          <H2 color="$color12" numberOfLines={1} margin={0}>
+            {title}
+          </H2>
+          {(showIndicator && chip) || cluster ? (
+            <XStack alignItems="center" gap="$2" flexWrap="wrap">
+              {showIndicator && chip && (
+                <Chip size="$2" variant="subtle" color={chip.color}>
+                  {chip.label}
+                </Chip>
+              )}
+              {cluster}
+            </XStack>
+          ) : null}
+        </YStack>
+        <XStack alignItems="center" gap="$2" flexShrink={0}>
+          {saveButton}
+          {menuButton}
+        </XStack>
+      </XStack>
+    );
+  }
+
   return (
     <YStack {...knobProps.gap} {...knobProps.panelPadding} paddingBottom={0} testID="form-toolbar">
       <Breadcrumbs items={breadcrumbs} onNavigate={onNavigate} />
@@ -438,90 +486,8 @@ export function FormToolbar({
               />
             </XStack>
           )}
-          {onOpenDesk && !isNarrow && (
-            <Button
-              size={knobProps.sizeToken}
-              outlined
-              icon={<ArrowSquareOutIcon size={iconSize} />}
-              aria-label={t("openInDesk", "Open in Desk")}
-              onPress={onOpenDesk}
-              testID="form-toolbar-desk"
-            />
-          )}
-          {reload && !isNarrow && (
-            <Button
-              size={knobProps.sizeToken}
-              outlined
-              icon={<ArrowCounterClockwiseIcon size={iconSize} />}
-              aria-label={t("reloadDoc", "Reload")}
-              onPress={reload}
-              testID="form-toolbar-reload"
-            />
-          )}
-          {entries.length > 0 && (
-            <DropdownMenu items={entries} placement="bottom-end">
-              <Button
-                size={knobProps.sizeToken}
-                outlined
-                icon={<DotsThreeIcon size={iconSize} weight="bold" />}
-                aria-label={t("menu", "Menu")}
-                testID="form-toolbar-menu"
-              />
-            </DropdownMenu>
-          )}
-          {buttonActions.includes("cancel") && (
-            <Button
-              size={knobProps.sizeToken}
-              error
-              outlined
-              actionRole="secondary"
-              icon={<ProhibitIcon size={iconSize} />}
-              loading={isSaving}
-              onPress={onCancel}
-              testID="form-toolbar-cancel"
-            >
-              {actionLabels.cancel}
-            </Button>
-          )}
-          {buttonActions.includes("amend") && (
-            <Button
-              size={knobProps.sizeToken}
-              outlined
-              icon={<CopyIcon size={iconSize} />}
-              loading={isSaving}
-              onPress={onAmend}
-              testID="form-toolbar-amend"
-            >
-              {actionLabels.amend}
-            </Button>
-          )}
-          {/* LC-05 / R-3: the lifecycle primary (Submit or Save — mutually
-              exclusive per the visibleActions gate) is the single
-              accent-solid action on the screen. */}
-          {buttonActions.includes("submit") && (
-            <Button
-              size={knobProps.sizeToken}
-              accent
-              icon={<CheckCircleIcon size={iconSize} />}
-              loading={isSaving}
-              onPress={onSubmit}
-              testID="form-toolbar-submit"
-            >
-              {actionLabels.submit}
-            </Button>
-          )}
-          {buttonActions.includes("save") && (
-            <Button
-              size={knobProps.sizeToken}
-              accent
-              icon={<FloppyDiskIcon size={iconSize} />}
-              loading={isSaving}
-              onPress={onSave}
-              testID="form-toolbar-save"
-            >
-              {actionLabels.save}
-            </Button>
-          )}
+          {saveButton}
+          {menuButton}
         </XStack>
       </XStack>
     </YStack>

package/src/formBuilder/DoctypePicker.tsx

@@ -0,0 +1,72 @@
+import {
+  AsyncBoundary,
+  AsyncSkeleton,
+  Button,
+  EmptyState,
+  Heading,
+  YStack,
+} from "@multiplatform.one/components";
+import { Combobox, Input } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useAwesomebarCatalog } from "../chrome/awesomebar-data";
+import { useBackofficeNavigator, useBackofficePaths } from "../config/BackofficeProvider";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+
+export function DoctypePicker() {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const { catalog, error } = useAwesomebarCatalog();
+  const navigator = useBackofficeNavigator();
+  const paths = useBackofficePaths();
+  const [name, setName] = useState("");
+  const open = (doctype: string) => {
+    if (doctype.trim()) navigator.navigate(paths.formBuilder(doctype.trim()));
+  };
+  return (
+    <YStack
+      {...knobProps.panelPadding}
+      {...knobProps.gap}
+      minWidth={0}
+      testID="form-builder-picker"
+    >
+      <Heading {...knobProps.pageTitle} {...knobProps.heading}>
+        {t("formBuilder.title", "Customize Form")}
+      </Heading>
+      <AsyncBoundary
+        loading={!catalog && !error ? <AsyncSkeleton layout="generic" /> : false}
+        error={
+          error
+            ? t(
+                "formBuilder.catalogError",
+                "The DocType catalog could not be loaded. Enter a name below.",
+              )
+            : undefined
+        }
+        empty={
+          catalog && !catalog.doctypes.length ? (
+            <EmptyState title={t("formBuilder.noDoctypes", "No DocTypes available")} />
+          ) : (
+            false
+          )
+        }
+      >
+        {catalog?.doctypes.length ? (
+          <Combobox
+            label={t("formBuilder.doctype", "DocType")}
+            options={catalog.doctypes.map((doctype) => ({ value: doctype, label: doctype }))}
+            value=""
+            onChange={(value) => open(String(value))}
+          />
+        ) : null}
+      </AsyncBoundary>
+      <Input
+        label={t("formBuilder.typedDoctype", "DocType name")}
+        value={name}
+        onChangeText={setName}
+      />
+      <Button onPress={() => open(name)}>{t("formBuilder.open", "Open form builder")}</Button>
+    </YStack>
+  );
+}

package/src/formBuilder/FieldPalette.tsx

@@ -0,0 +1,119 @@
+import {
+  Card,
+  Chip,
+  EmptyState,
+  Paragraph,
+  SizableText,
+  XStack,
+  YStack,
+} from "@multiplatform.one/components";
+import { Button, Chip as FilterChip, SearchInput } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { PlusIcon } from "@phosphor-icons/react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { fieldtypeCatalog } from "./fieldtypes";
+import type { BuilderPointerEvent } from "./useFormBuilderDrag";
+
+export function FieldPalette({
+  onAdd,
+  onPointerDown,
+}: {
+  onAdd: (fieldtype: string) => void;
+  onPointerDown: (fieldtype: string, event: BuilderPointerEvent) => void;
+}) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const iconSize = Number(knobProps.controlIcon.width);
+  const [search, setSearch] = useState("");
+  const [group, setGroup] = useState("all");
+  const groupOptions = [
+    { value: "all", label: t("formBuilder.groups.all", "All") },
+    { value: "standard", label: t("formBuilder.groups.standard", "Standard") },
+    { value: "layout", label: t("formBuilder.groups.layout", "Layout") },
+    { value: "advanced", label: t("formBuilder.groups.advanced", "Advanced") },
+  ];
+  const entries = fieldtypeCatalog.filter(
+    (entry) =>
+      (group === "all" || entry.group === group) &&
+      `${t(entry.labelKey, entry.label)} ${t(entry.descriptionKey, entry.description)}`
+        .toLowerCase()
+        .includes(search.toLowerCase()),
+  );
+  return (
+    <YStack {...knobProps.gap} minWidth={0}>
+      <XStack {...knobProps.gapSm} alignItems="center" minWidth={0}>
+        <SizableText {...knobProps.heading} flex={1}>
+          {t("formBuilder.fieldTypes", "Field types")}
+        </SizableText>
+        <Chip size="$2">
+          {t("formBuilder.typeCount", "{{count}} types", { count: entries.length })}
+        </Chip>
+      </XStack>
+      <SearchInput
+        label={t("formBuilder.search", "Search field types")}
+        value={search}
+        onChange={setSearch}
+      />
+      <YStack {...knobProps.gapSm} role="group" aria-label={t("formBuilder.group", "Field group")}>
+        <SizableText {...knobProps.label}>{t("formBuilder.group", "Field group")}</SizableText>
+        <XStack {...knobProps.gapSm} flexWrap="wrap" minWidth={0}>
+          {groupOptions.map((option) => (
+            <FilterChip
+              key={option.value}
+              size="$3"
+              variant="outline"
+              selected={group === option.value}
+              onPress={() => setGroup(option.value)}
+            >
+              {option.label}
+            </FilterChip>
+          ))}
+        </XStack>
+      </YStack>
+      {entries.length === 0 ? (
+        <EmptyState size="$2" title={t("formBuilder.noTypes", "No matching field types")} />
+      ) : null}
+      {Array.from({ length: Math.ceil(entries.length / 2) }, (_, row) => (
+        <XStack key={row} {...knobProps.gapSm} minWidth={0}>
+          {entries.slice(row * 2, row * 2 + 2).map((entry) => (
+            <Card
+              key={entry.fieldtype}
+              tier="elevated"
+              flex={1}
+              minWidth={0}
+              alignItems="flex-start"
+              data-fb-palette={entry.fieldtype}
+              onPress={(event) => {
+                const target = event.target as unknown as HTMLElement;
+                if (target.closest?.("button, [role=button]")) return;
+                onAdd(entry.fieldtype);
+              }}
+              {...{
+                onPointerDown: (event: BuilderPointerEvent) =>
+                  onPointerDown(entry.fieldtype, event),
+              }}
+            >
+              <Button
+                size="$2"
+                chromeless
+                maxWidth="100%"
+                icon={<PlusIcon size={iconSize} />}
+                aria-label={t("formBuilder.addType", "Add {{type}} field", {
+                  type: t(entry.labelKey, entry.label),
+                })}
+                onPress={() => onAdd(entry.fieldtype)}
+              >
+                {t(entry.labelKey, entry.label)}
+              </Button>
+              <Paragraph {...knobProps.body} color="$color11" numberOfLines={2} maxWidth="100%">
+                {t(entry.descriptionKey, entry.description)}
+              </Paragraph>
+            </Card>
+          ))}
+        </XStack>
+      ))}
+    </YStack>
+  );
+}