@multiplatform.one/backoffice 6.6.0 → 7.0.0

package/src/list/ListFilterBar.tsx

@@ -19,7 +19,11 @@
 // (DoctypeListScreen passes enableFiltering={false}); the table keeps only
 // search + header sort.
 import { XStack, YStack } from "@multiplatform.one/components";
-import type { FrappeFilters } from "../shared/types";
+import { Button } from "@multiplatform.one/forms";
+import { HeartIcon } from "@phosphor-icons/react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import type { FrappeFilter, FrappeFilters } from "../shared/types";
 import type { DoctypeMeta } from "../shared/useDoctypeMeta";
 import { FilterChips } from "./filter-chips";
 import { FilterEditorButton } from "./filter-editor";
@@ -27,6 +31,7 @@ import { SavedFiltersControl } from "./filter-saved";
 import { SortControl } from "./filter-sort";
 import { StandardFilters } from "./filter-standard";
 import { ListToolsButton } from "./list-tools-sheet";
+import { isFacetFilterActive, toggleFacetFilter } from "./sidebar-stats";
 
 export interface ListFilterBarProps {
   doctype: string;
@@ -42,6 +47,17 @@ export interface ListFilterBarProps {
    * always-visible rows.
    */
   compact?: boolean;
+  /**
+   * When false, skip the chips row — the host renders FilterChips itself
+   * (DoctypeListScreen puts them under the dense toolbar so they are not
+   * chrome). Default true for standalone / story use.
+   */
+  showChips?: boolean;
+  /**
+   * Session user id — when set, a header heart toggles the desk liked-by-me
+   * filter (`_liked_by like %user%`). Omitted when there is no session.
+   */
+  likedByUser?: string;
 }
 
 export function ListFilterBar({
@@ -53,41 +69,60 @@ export function ListFilterBar({
   sortOrder,
   onSortChange,
   compact,
+  showChips = true,
+  likedByUser,
 }: ListFilterBarProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const likedTuple: FrappeFilter | undefined = likedByUser
+    ? ["_liked_by", "like", `%${likedByUser}%`]
+    : undefined;
+  const likedActive = likedTuple ? isFacetFilterActive(filters, likedTuple) : false;
+  const likedButton = likedTuple ? (
+    <Button
+      size="$3"
+      circular
+      chromeless
+      col={(likedActive ? "$red10" : "$color8") as never}
+      icon={<HeartIcon size={16} weight={likedActive ? "fill" : "regular"} />}
+      aria-pressed={likedActive}
+      aria-label={t("list.likedByMe", "Liked by me")}
+      onPress={() => onFiltersChange(toggleFacetFilter(filters, likedTuple))}
+    />
+  ) : null;
   if (compact) {
     return (
-      <ListToolsButton
-        doctype={doctype}
+      <XStack gap="$1.5" alignItems="center">
+        <ListToolsButton
+          doctype={doctype}
+          meta={meta}
+          filters={filters}
+          onFiltersChange={onFiltersChange}
+          sortField={sortField}
+          sortOrder={sortOrder}
+          onSortChange={onSortChange}
+        />
+        {likedButton}
+      </XStack>
+    );
+  }
+  const controls = (
+    <XStack gap="$1.5" alignItems="center" flexWrap="wrap">
+      <StandardFilters meta={meta} filters={filters} onFiltersChange={onFiltersChange} />
+      <FilterEditorButton meta={meta} filters={filters} onFiltersChange={onFiltersChange} />
+      <SavedFiltersControl doctype={doctype} filters={filters} onFiltersChange={onFiltersChange} />
+      <SortControl
         meta={meta}
-        filters={filters}
-        onFiltersChange={onFiltersChange}
         sortField={sortField}
         sortOrder={sortOrder}
         onSortChange={onSortChange}
       />
-    );
-  }
+      {likedButton}
+    </XStack>
+  );
+  if (!showChips) return controls;
   return (
     <YStack gap="$2">
-      <XStack gap="$2" alignItems="center" justifyContent="space-between" flexWrap="wrap">
-        <XStack gap="$2" alignItems="center" flexWrap="wrap" flexShrink={1}>
-          <StandardFilters meta={meta} filters={filters} onFiltersChange={onFiltersChange} />
-          <FilterEditorButton meta={meta} filters={filters} onFiltersChange={onFiltersChange} />
-        </XStack>
-        <XStack gap="$2" alignItems="center" flexWrap="wrap">
-          <SavedFiltersControl
-            doctype={doctype}
-            filters={filters}
-            onFiltersChange={onFiltersChange}
-          />
-          <SortControl
-            meta={meta}
-            sortField={sortField}
-            sortOrder={sortOrder}
-            onSortChange={onSortChange}
-          />
-        </XStack>
-      </XStack>
+      {controls}
       <FilterChips meta={meta} filters={filters} onFiltersChange={onFiltersChange} />
     </YStack>
   );

package/src/list/ListSidebar.tsx

@@ -22,7 +22,7 @@ import { useBackofficeCapabilities } from "../config/BackofficeProvider";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import type { FrappeFilter, FrappeFilters } from "../shared/types";
 import type { DocFieldMeta, DoctypeMeta } from "../shared/useDoctypeMeta";
-import { SidebarFacetRow, SidebarSection, SidebarSectionSkeleton } from "./sidebar-section";
+import { SidebarFacetRow, SidebarSectionChrome, SidebarSectionSkeleton } from "./sidebar-section";
 import {
   isFacetFilterActive,
   scrubUserFacetRows,
@@ -156,11 +156,9 @@ export function ListSidebar({
 
   return (
     <YStack
-      width={220}
-      paddingRight="$3"
-      // Bottom room reserved for the saved-filter links (list-filters
-      // workstream owns "Edit Filters" / "Save Filter").
-      paddingBottom="$6"
+      width={200}
+      paddingRight="$2"
+      paddingBottom="$4"
       aria-label={t("list.sidebarLabel", "List filters sidebar")}
     >
       {unavailable ? (
@@ -173,24 +171,26 @@ export function ListSidebar({
             // Empty (or errored) facets are hidden once resolved.
             if (!section.state.loading && section.rows.length === 0) return null;
             return (
-              <SidebarSection key={section.key} value={section.key} title={section.title}>
-                {section.state.loading ? (
-                  <SidebarSectionSkeleton />
-                ) : (
-                  section.rows.map((row) => {
-                    const tuple = section.makeTuple(row);
-                    return (
-                      <SidebarFacetRow
-                        key={row.value}
-                        label={section.rowLabel(row)}
-                        count={row.count}
-                        active={isFacetFilterActive(filters, tuple)}
-                        onPress={() => handleToggle(tuple)}
-                      />
-                    );
-                  })
-                )}
-              </SidebarSection>
+              <Accordion.Item key={section.key} value={section.key}>
+                <SidebarSectionChrome title={section.title}>
+                  {section.state.loading ? (
+                    <SidebarSectionSkeleton />
+                  ) : (
+                    section.rows.map((row) => {
+                      const tuple = section.makeTuple(row);
+                      return (
+                        <SidebarFacetRow
+                          key={row.value}
+                          label={section.rowLabel(row)}
+                          count={row.count}
+                          active={isFacetFilterActive(filters, tuple)}
+                          onPress={() => handleToggle(tuple)}
+                        />
+                      );
+                    })
+                  )}
+                </SidebarSectionChrome>
+              </Accordion.Item>
             );
           })}
         </Accordion>

package/src/list/bulk-edit-dialog.tsx

@@ -155,11 +155,14 @@ export function BulkEditDialog({
         notify({
           severity: "warning",
           scope: "page",
+          // i18next plural forms — `count` (succeeded docs) picks the form;
+          // "{{failed}} failed" reads correctly for any failure count.
           body: t("list.editPartial", {
-            defaultValue: "Updated {{ok}} document(s); {{failed}} failed ({{names}})",
-            ok: result.succeeded.length,
+            count: result.succeeded.length,
             failed: result.failed.length,
             names: result.failed.map((failure) => failure.name).join(", "),
+            defaultValue_one: "Updated {{count}} document; {{failed}} failed ({{names}})",
+            defaultValue_other: "Updated {{count}} documents; {{failed}} failed ({{names}})",
           }),
         });
       } else {
@@ -167,9 +170,10 @@ export function BulkEditDialog({
           severity: "success",
           scope: "page",
           body: t("list.editDone", {
-            defaultValue: "Updated {{field}} on {{count}} document(s)",
-            field: field.label || field.fieldname,
             count: result.succeeded.length,
+            field: field.label || field.fieldname,
+            defaultValue_one: "Updated {{field}} on {{count}} document",
+            defaultValue_other: "Updated {{field}} on {{count}} documents",
           }),
         });
       }
@@ -273,8 +277,9 @@ export function BulkEditDialog({
       <YStack gap="$3" minWidth={280}>
         <Text color="$color11" fontSize="$3">
           {t("list.editBody", {
-            defaultValue: "Set one field on {{count}} selected document(s)",
             count: names.length,
+            defaultValue_one: "Set one field on {{count}} selected document",
+            defaultValue_other: "Set one field on {{count}} selected documents",
           })}
         </Text>
         <Select

package/src/list/filter-fields.spec.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import type { DoctypeMeta } from "../shared/useDoctypeMeta";
+import { standardFiltersFromMeta } from "./filter-fields";
+
+const todoMeta: DoctypeMeta = {
+  name: "ToDo",
+  title_field: "description",
+  fields: [
+    {
+      fieldname: "status",
+      fieldtype: "Select",
+      label: "Status",
+      options: "Open\nClosed",
+      in_standard_filter: 1,
+    },
+    { fieldname: "description", fieldtype: "Small Text", label: "Description" },
+    { fieldname: "priority", fieldtype: "Select", label: "Priority", in_list_view: 1 },
+  ],
+};
+
+describe("standardFiltersFromMeta", () => {
+  it("prepends ID and the title field when they are not already standard filters", () => {
+    const names = standardFiltersFromMeta(todoMeta).map((field) => field.fieldname);
+    expect(names[0]).toBe("name");
+    expect(names).toContain("description");
+    expect(names).toContain("status");
+    expect(names).not.toContain("priority");
+  });
+});

package/src/list/filter-fields.tsx

@@ -110,11 +110,31 @@ export function filterableFieldsFromMeta(meta?: DoctypeMeta): FilterFieldDescrip
   return out;
 }
 
-/** Fields flagged `in_standard_filter`, in meta order (the quick-filter row). */
+/** Fields flagged `in_standard_filter`, in meta order (the quick-filter row).
+ *  Desk always offers ID plus the title field as live header inputs even when
+ *  those flags are off — typing a fragment of ID/subject is the fastest
+ *  narrowing habit list users have (audit E1). */
 export function standardFiltersFromMeta(meta?: DoctypeMeta): FilterFieldDescriptor[] {
-  return (meta?.fields ?? [])
+  const fromMeta = (meta?.fields ?? [])
     .filter((field) => field.in_standard_filter === 1 && field.hidden !== 1 && field.fieldname)
     .map(toDescriptor);
+  const seen = new Set(fromMeta.map((field) => field.fieldname));
+  const extras: FilterFieldDescriptor[] = [];
+  if (!seen.has("name")) {
+    extras.push({ fieldname: "name", label: "ID", fieldtype: "Data", kind: "text" });
+    seen.add("name");
+  }
+  const titleField = meta?.title_field;
+  if (titleField && !seen.has(titleField)) {
+    const titleMeta = meta?.fields?.find((field) => field.fieldname === titleField);
+    extras.push({
+      fieldname: titleField,
+      label: titleMeta?.label || "Title",
+      fieldtype: titleMeta?.fieldtype || "Data",
+      kind: fieldKind(titleMeta?.fieldtype || "Data"),
+    });
+  }
+  return extras.length > 0 ? [...extras, ...fromMeta] : fromMeta;
 }
 
 /** Select fieldtype options string → dropdown options (blank lines dropped). */

package/src/list/filter-saved.tsx

@@ -158,24 +158,24 @@ export function SavedFiltersControl({
     );
   }
 
+  if (savedFilters.length === 0 && filters.length === 0) return null;
+
   return (
     <XStack gap="$2" alignItems="center">
-      <XStack maxWidth={220}>{dropdown}</XStack>
-      <FilterManager
-        currentFilters={filters}
-        canCreateGlobal
-        // Toolbar row: the reason rides the control line — stacked-below
-        // broke the filter row's shared 44px height into a cramped
-        // two-line cluster (Button contract, DG-ST-03).
-        disabledReasonPlacement="inline"
-        onSaveFilter={(filterName, isGlobal) => {
-          const result = saveFilter(filterName, filters, isGlobal);
-          void Promise.resolve(result).then(() => {
-            onFilterSaved?.({ name: filterName, isGlobal, filters });
-          });
-          return result;
-        }}
-      />
+      {savedFilters.length > 0 ? <XStack maxWidth={220}>{dropdown}</XStack> : null}
+      {filters.length > 0 ? (
+        <FilterManager
+          currentFilters={filters}
+          canCreateGlobal
+          onSaveFilter={(filterName, isGlobal) => {
+            const result = saveFilter(filterName, filters, isGlobal);
+            void Promise.resolve(result).then(() => {
+              onFilterSaved?.({ name: filterName, isGlobal, filters });
+            });
+            return result;
+          }}
+        />
+      ) : null}
     </XStack>
   );
 }

package/src/list/filter-sort.tsx

@@ -191,6 +191,9 @@ export function SortControl({
     );
   }
 
+  // Single-select radio-style menu: the checked entry marks the active sort
+  // field, picking one applies it (onSelect) and the menu-level
+  // closeOnSelect commits-and-closes (LC-21 COMMIT).
   const items: DropdownMenuEntry[] = displayOptions.map((option) => ({
     key: option.fieldname,
     label: option.label,
@@ -200,7 +203,7 @@ export function SortControl({
 
   return (
     <XStack gap="$1" alignItems="center">
-      <DropdownMenu items={items} placement="bottom-end" maxHeight={360}>
+      <DropdownMenu items={items} closeOnSelect placement="bottom-end" maxHeight={360}>
         <Button
           size="$3"
           chromeless
@@ -208,7 +211,7 @@ export function SortControl({
           aria-label={t("list.sortBy", "Sort")}
         >
           {/* Label channel, never the raw fieldname (parity audit pair 04). */}
-          {`${t("list.sortBy", "Sort")}: ${sortFieldLabel(meta, field, t)}`}
+          {sortFieldLabel(meta, field, t)}
         </Button>
       </DropdownMenu>
       <Button

package/src/list/filter-standard.tsx

@@ -50,7 +50,7 @@ export function StandardFilters({
     return <YStack gap="$2">{controls}</YStack>;
   }
   return (
-    <XStack gap="$2" flexWrap="wrap" alignItems="center">
+    <XStack gap="$1.5" flexWrap="wrap" alignItems="center">
       {controls}
     </XStack>
   );