@multiplatform.one/backoffice 6.7.0 → 7.1.0

package/src/list/DoctypeListScreen.tsx

@@ -14,7 +14,6 @@ import {
   Paragraph,
   ScrollView,
   Spinner,
-  ViewSwitcher,
   XStack,
   YStack,
   isWeb,
@@ -25,7 +24,12 @@ import { useLayoutSizeClass } from "@multiplatform.one/theme";
 // house expression of the one page primary (LC-05 ONE-EMPHASIS; quick entry
 // "Create" precedent). The components Button above stays for neutral chrome.
 import { Button as ActionButton } from "@multiplatform.one/forms";
-import { ArrowsClockwiseIcon, PlusIcon, SidebarSimpleIcon } from "@phosphor-icons/react";
+import {
+  ArrowSquareOutIcon,
+  ArrowsClockwiseIcon,
+  PlusIcon,
+  SidebarSimpleIcon,
+} from "@phosphor-icons/react";
 import {
   FrappeTable,
   docFieldsToFilterFields,
@@ -33,7 +37,6 @@ import {
   useFrappeConfig,
 } from "@multiplatform.one/frappe-ui";
 import type { DocTypeField } from "@multiplatform.one/frappe";
-import { DataTablePagination } from "@multiplatform.one/table";
 import type {
   BulkAction,
   DataTableColumn,
@@ -53,14 +56,19 @@ import {
   type BackofficeAction,
 } from "../config/BackofficeProvider";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
-import { BACKOFFICE_VIEWS, type BackofficeView } from "../navigation/paths";
+import type { BackofficeView } from "../navigation/paths";
 import { QuickEntryDialog } from "../quickEntry/QuickEntryDialog";
+import { openInNewTab } from "../form/platformHooks";
+import { deskViewUrl } from "../shared/deskLinks";
+import { setListNavContext } from "../shared/listNavContext";
 import { useRecentVisit } from "../shared/useRecentVisit";
 // Permlevel role matrix (desk perm.js parity) — shared with the form surface
 // via the UI-free fieldPermissions module; drives list column pruning.
 import { buildPermLevelMatrix } from "../form/fieldPermissions";
 import type { FrappeFilters } from "../shared/types";
 import { type DoctypeMeta, useDoctypeMeta } from "../shared/useDoctypeMeta";
+import { deriveAvailableViews } from "../views/viewAvailability";
+import { ViewSwitcherMenu } from "../views/ViewSwitcherMenu";
 import { useFrappeApp } from "../shared/useFrappeApp";
 import { useUserRoles } from "../shared/useUserRoles";
 import { AddTagsDialog } from "./AddTagsDialog";
@@ -75,6 +83,7 @@ import {
   sameFilterTuple,
   tableStateToFrappeFilters,
 } from "./filterConversion";
+import { toggleFacetFilter } from "./sidebar-stats";
 import { ListFilterBar } from "./ListFilterBar";
 import { ListSidebar } from "./ListSidebar";
 import { type ListDoc, type ListRow, buildListColumns } from "./listColumns";
@@ -186,6 +195,10 @@ export function DoctypeListScreen({
   const config = useFrappeConfig();
   const app = useFrappeApp();
   const fixtureMode = Boolean(config?.fixtures);
+  // Desk counterpart of this list — every backoffice surface links back to
+  // its native desk twin (fixture mode has no desk to hop to).
+  const deskHref =
+    config?.baseURL && !fixtureMode ? deskViewUrl(config.baseURL, doctype) : undefined;
   const sessionUser = useSessionUser();
   // Compact list chrome below 640 (theme `compact` size class — matchMedia
   // on web, window dimensions on native; BackofficeShell drawer precedent):
@@ -215,16 +228,17 @@ export function DoctypeListScreen({
   // state for this screen. Every filter surface — quick standard filters,
   // the tuple editor, saved filters, the chips row, the facet sidebar, the
   // compact tools sheet, and the `?f=` deep link — reads and writes THIS
-  // state via handleBaseFiltersChange; changing it bumps `filtersGen`,
-  // remounting the table with the tuples injected as initialState.filters.
-  // The table's own filter chrome is suppressed (enableFiltering={false}
-  // below), so no second live filter state exists.
+  // state via handleBaseFiltersChange; changes reach the mounted table
+  // through its controlledState adoption channel (keep-rows-and-reconcile:
+  // the table NEVER remounts on a filter/sort/refresh change — current rows
+  // stay rendered, the new query reconciles in place; no blanking, no
+  // scroll reset). The table's own filter chrome is suppressed
+  // (enableFiltering={false} below), so no second live filter state exists.
   const [baseFilters, setBaseFilters] = useState<FrappeFilters>(() => {
     const fromParam = parseFiltersParam(filtersParam);
     if (fromParam.length > 0) return fromParam;
     return initialFilters ? [...initialFilters] : fromParam;
   });
-  const [filtersGen, setFiltersGen] = useState(0);
   // Read-only mirror of the table's effective query (injected base tuples +
   // the table-owned search box), synced from onStateChange — feeds the live
   // count and facet stats. Not a second filter authority: with the table's
@@ -232,7 +246,6 @@ export function DoctypeListScreen({
   const [effectiveFilters, setEffectiveFilters] = useState<FrappeFilters | null>(null);
   // null = ride the doctype's meta default; `?sort=` deep links seed it.
   const [sort, setSort] = useState<ListSortState | null>(() => parseSortParam(sortParam) ?? null);
-  const [sortGen, setSortGen] = useState(0);
   const [refreshGen, setRefreshGen] = useState(0);
   const [sidebarVisible, setSidebarVisible] = useState(true);
   const [quickEntryOpen, setQuickEntryOpen] = useState(false);
@@ -309,7 +322,6 @@ export function DoctypeListScreen({
       if (doctypeChanged || !sameFilters(next, baseFiltersRef.current)) {
         setBaseFilters(next);
         setEffectiveFilters(withFixed(next));
-        setFiltersGen((generation) => generation + 1);
       }
     }
     if (doctypeChanged) {
@@ -321,7 +333,6 @@ export function DoctypeListScreen({
       const parsed = parseSortParam(sortParam) ?? null;
       if (!sameSort(parsed, sortRef.current)) {
         setSort(parsed);
-        setSortGen((generation) => generation + 1);
       }
     }
   }, [doctype, filtersParam, sortParam, withFixed]);
@@ -341,6 +352,8 @@ export function DoctypeListScreen({
         ? {
             baseURL: config.baseURL,
             socketPort: config.socketPort,
+            siteName: config.siteName,
+            socketBaseURL: config.socketBaseURL,
             auth: config.auth
               ? {
                   useToken: config.auth.useToken,
@@ -403,9 +416,28 @@ export function DoctypeListScreen({
       onToggleLike: handleToggleLike,
       likeOverrides,
       permMatrix,
+      getDocHref: (name) => paths.form(doctype, name),
+      onFilterClick: (fieldname, value) => {
+        const next = toggleFacetFilter(baseFiltersRef.current, [fieldname, "=", value]);
+        setBaseFilters(next);
+        setEffectiveFilters(withFixed(next));
+        writeUrlState(next, sortRef.current);
+      },
     });
     return columnOverrides ? columnOverrides(built) : built;
-  }, [meta, t, sessionUser, handleToggleLike, likeOverrides, permMatrix, columnOverrides]);
+  }, [
+    meta,
+    t,
+    sessionUser,
+    handleToggleLike,
+    likeOverrides,
+    permMatrix,
+    columnOverrides,
+    paths,
+    doctype,
+    withFixed,
+    writeUrlState,
+  ]);
 
   const fields = useMemo(() => listFieldsToFetch(meta, permMatrix), [meta, permMatrix]);
 
@@ -436,7 +468,6 @@ export function DoctypeListScreen({
     (next: FrappeFilters) => {
       setBaseFilters(next);
       setEffectiveFilters(withFixed(next));
-      setFiltersGen((generation) => generation + 1);
       writeUrlState(next, sortRef.current);
     },
     [withFixed, writeUrlState],
@@ -445,7 +476,6 @@ export function DoctypeListScreen({
   const handleSortChange = useCallback(
     (field: string, order: "asc" | "desc") => {
       setSort({ field, order });
-      setSortGen((generation) => generation + 1);
       writeUrlState(baseFiltersRef.current, { field, order });
     },
     [writeUrlState],
@@ -458,12 +488,21 @@ export function DoctypeListScreen({
   const handleStateChange = useCallback(
     (state: DataTableState) => {
       if (state.pagination?.pageSize) pageSizeRef.current = state.pagination.pageSize;
+      // Mirror the resolved page's display order into the shared prev/next
+      // pager context (read by DocFormScreen). The store dedupes identical
+      // writes and ignores the fetch-in-flight empty passes.
+      setListNavContext(
+        doctype,
+        (state.data ?? [])
+          .map((row) => (row as { name?: unknown }).name)
+          .filter((value): value is string => typeof value === "string" && value.length > 0),
+      );
       const nextFilters = tableStateToFrappeFilters(state);
       setEffectiveFilters((previous) =>
         previous && sameFilters(previous, nextFilters) ? previous : nextFilters,
       );
       // Header-sort clicks stay internal to the table; mirror them into the
-      // sort selector without bumping sortGen (no remount needed). Compared
+      // sort selector without any table remount. Compared
       // against the EFFECTIVE sort so the seeded initial sorting is a no-op;
       // a real header sort also mirrors into the URL (write-once — the
       // effective ref updates on the next render).
@@ -478,7 +517,7 @@ export function DoctypeListScreen({
         }
       }
     },
-    [writeUrlState],
+    [writeUrlState, doctype],
   );
 
   const handleRefresh = useCallback(() => {
@@ -759,20 +798,37 @@ export function DoctypeListScreen({
   // Selection + the bulk bar ride the bulkActions capability as one unit.
   const bulkActionsEnabled = capabilities.bulkActions.enabled;
 
-  // View switcher options: capability allowlist ∩ the `views` prop.
-  const views = useMemo(() => {
+  // View switcher options: meta-derived availability (viewAvailability.ts
+  // documents each view's desk precondition) ∩ capability allowlist ∩ the
+  // `views` prop. "list" is the current view, so it always survives.
+  const availableViews = useMemo(() => {
     if (!capabilities.views.enabled) return [];
-    return BACKOFFICE_VIEWS.filter(
-      (view) =>
-        capabilities.views.allow.includes(view) &&
-        (!viewsAllowlist || viewsAllowlist.includes(view)),
-    ).map((view) => ({
-      type: view,
-      label: t(`views.${view}`, view.charAt(0).toUpperCase() + view.slice(1)),
-    }));
-  }, [t, capabilities.views.enabled, capabilities.views.allow, viewsAllowlist]);
+    const allow = viewsAllowlist
+      ? capabilities.views.allow.filter((view) => viewsAllowlist.includes(view))
+      : capabilities.views.allow;
+    return deriveAvailableViews(meta, { current: "list", allow });
+  }, [meta, capabilities.views.enabled, capabilities.views.allow, viewsAllowlist]);
 
-  const tableKey = `${doctype}|${refreshGen}|${sortGen}|${filtersGen}`;
+  // Remount ONLY on a doctype swap (different columns/meta). Filter, sort,
+  // and refresh changes reconcile IN PLACE through the table's
+  // controlledState / refreshToken channels — remounting on those was the
+  // named blank-the-list defect (rows torn down, skeleton flash, scroll
+  // reset on every filter toggle).
+  const tableKey = doctype;
+
+  // Controlled sorting as the table should adopt it (state ?? meta default).
+  const controlledSorting = useMemo(
+    () => [{ id: sortField, desc: sortOrder === "desc" }],
+    [sortField, sortOrder],
+  );
+  const controlledTableState = useMemo(
+    () => ({
+      filters: initialTableFilters,
+      sorting: controlledSorting,
+      columnVisibility: { modified: false },
+    }),
+    [initialTableFilters, controlledSorting],
+  );
 
   if (metaError && !meta) {
     return (
@@ -801,176 +857,115 @@ export function DoctypeListScreen({
 
   // i18next plural forms — never the lazy "(s)" suffix (the count picks the
   // form; other locales pluralize correctly through the same key).
-  const countText = count.isLoading
-    ? undefined
-    : t("list.resultCount", {
-        count: count.value ?? 0,
-        defaultValue_one: "{{count}} result",
-        defaultValue_other: "{{count}} results",
-      });
-  const handleViewChange = (view: string) => {
-    if (view !== "list") navigator.navigate(paths.view(doctype, view as BackofficeView));
+  const countText =
+    count.value === undefined && count.isLoading
+      ? undefined
+      : t("list.resultCount", {
+          count: count.value ?? 0,
+          defaultValue_one: "{{count}} result",
+          defaultValue_other: "{{count}} results",
+        });
+  const handleViewChange = (view: BackofficeView) => {
+    if (view !== "list") navigator.navigate(paths.view(doctype, view));
   };
-  // Nothing to switch to (capability/allowlist narrowed to list or off).
-  const showViewSwitcher = views.length > 1;
 
-  return (
-    <YStack flex={1} gap={compactChrome ? "$2" : "$3"} padding={compactChrome ? "$3" : "$4"}>
-      {compactChrome ? (
-        // Compact chrome (< 640): one title row (title + live count inline,
-        // icon refresh, compact New), then one row with the view switcher
-        // (horizontally scrollable — all views stay reachable) and the
-        // single Filter affordance (filters/sort collapse into its sheet).
-        <PageHeader
-          heading={
-            <XStack gap="$2" alignItems="baseline" flexWrap="wrap">
-              <H1 size="$7" margin={0} flexShrink={1} minWidth={0}>
-                {doctype}
-              </H1>
-              {countText ? (
-                <Paragraph size="$2" color="$color10" margin={0}>
-                  {countText}
-                </Paragraph>
-              ) : null}
-            </XStack>
-          }
-          actions={
-            <XStack gap="$2" alignItems="center">
-              {/* House Button: icon slot (LC-53) + the sub-44 circular size
-                  resolves the press floor through the house channel (LC-54). */}
-              <ActionButton
-                size="$3"
-                circular
-                chromeless
-                icon={ArrowsClockwiseIcon}
-                onPress={handleRefresh}
-                aria-label={t("list.refresh", "Refresh")}
-              />
-              {showNew && (
-                <ActionButton
-                  size="$3"
-                  accent
-                  icon={PlusIcon}
-                  onPress={() => setQuickEntryOpen(true)}
-                  aria-label={t("list.new", {
-                    defaultValue: "New {{doctype}}",
-                    doctype,
-                  })}
-                >
-                  {t("list.newShort", "New")}
-                </ActionButton>
-              )}
-            </XStack>
+  // One dense toolbar: title + count on the left, every list control on
+  // the right. Views are a dropdown (desk ListViewSelect) so they cannot
+  // dominate the row; Save Filter is contextual (ListFilterBar hides it
+  // until there is something to save); refresh sits with New, not as an
+  // orphan next to a seven-segment switcher.
+  const listToolbar = (
+    <XStack gap="$1.5" alignItems="center" flexWrap="wrap">
+      {!compactChrome && (
+        <ActionButton
+          size="$3"
+          circular
+          chromeless
+          icon={SidebarSimpleIcon}
+          display="none"
+          $sm={{ display: "flex" }}
+          onPress={() => setSidebarVisible((visible) => !visible)}
+          aria-expanded={sidebarVisible}
+          aria-label={
+            sidebarVisible
+              ? t("list.hideSidebar", "Hide sidebar")
+              : t("list.showSidebar", "Show sidebar")
           }
+        />
+      )}
+      <ListFilterBar
+        compact={compactChrome}
+        showChips={false}
+        doctype={doctype}
+        meta={meta}
+        filters={baseFilters}
+        onFiltersChange={handleBaseFiltersChange}
+        sortField={sortField}
+        sortOrder={sortOrder}
+        onSortChange={handleSortChange}
+        likedByUser={sessionUser}
+      />
+      <ViewSwitcherMenu views={availableViews} current="list" onViewChange={handleViewChange} />
+      {deskHref && (
+        <ActionButton
+          size="$3"
+          circular
+          chromeless
+          icon={ArrowSquareOutIcon}
+          onPress={() => openInNewTab(deskHref)}
+          aria-label={t("list.openInDesk", "Open in Desk")}
+        />
+      )}
+      <ActionButton
+        size="$3"
+        circular
+        chromeless
+        icon={ArrowsClockwiseIcon}
+        onPress={handleRefresh}
+        aria-label={t("list.refresh", "Refresh")}
+      />
+      {showNew && (
+        <ActionButton
+          size={compactChrome ? "$3" : "$2"}
+          accent
+          {...(compactChrome ? { icon: PlusIcon } : {})}
+          onPress={() => setQuickEntryOpen(true)}
+          aria-label={t("list.new", {
+            defaultValue: "New {{doctype}}",
+            doctype,
+          })}
         >
-          <XStack gap="$2" alignItems="center">
-            <ScrollView
-              horizontal
-              flexGrow={1}
-              flexShrink={1}
-              minWidth={0}
-              showsHorizontalScrollIndicator={false}
-            >
-              {showViewSwitcher ? (
-                <ViewSwitcher views={views} currentView="list" onViewChange={handleViewChange} />
-              ) : null}
-            </ScrollView>
-            <ListFilterBar
-              compact
-              doctype={doctype}
-              meta={meta}
-              filters={baseFilters}
-              onFiltersChange={handleBaseFiltersChange}
-              sortField={sortField}
-              sortOrder={sortOrder}
-              onSortChange={handleSortChange}
-            />
-          </XStack>
-          {/* Shared chips readout (MOD-04 honest state): the table's own
-              chips row is suppressed with the rest of its filter chrome, so
-              compact renders the list-chrome chips here (wide gets them
-              inside ListFilterBar). Renders nothing while no filters apply. */}
-          <FilterChips
-            meta={meta}
-            filters={baseFilters}
-            onFiltersChange={handleBaseFiltersChange}
-          />
-        </PageHeader>
-      ) : (
-        <>
-          <PageHeader
-            title={doctype}
-            // D-11 page-title dial: moderate (32px) — list titles are
-            // wayfinding, not display copy (matches WorkspaceScreen).
-            titleScale="moderate"
-            subtitle={countText}
-            actions={
-              <XStack gap="$2" alignItems="center" flexWrap="wrap">
-                {/* Icon-only refresh (desk parity): a text "Refresh" at the
-                    switcher's left read as one of its segments — an action
-                    mixed into a view picker (LC-26). House Button: icon slot
-                    (LC-53), circular sub-44 press floor via the house
-                    channel (LC-54). */}
-                <ActionButton
-                  size="$3"
-                  circular
-                  chromeless
-                  icon={ArrowsClockwiseIcon}
-                  onPress={handleRefresh}
-                  aria-label={t("list.refresh", "Refresh")}
-                />
-                {showViewSwitcher ? (
-                  <ViewSwitcher views={views} currentView="list" onViewChange={handleViewChange} />
-                ) : null}
-                {showNew && (
-                  <ActionButton size="$2" accent onPress={() => setQuickEntryOpen(true)}>
-                    {t("list.new", { defaultValue: "New {{doctype}}", doctype })}
-                  </ActionButton>
-                )}
-              </XStack>
-            }
-          />
+          {compactChrome
+            ? t("list.newShort", "New")
+            : t("list.new", { defaultValue: "New {{doctype}}", doctype })}
+        </ActionButton>
+      )}
+    </XStack>
+  );
 
-          {/* flex-start: the toggle rides the filter bar's FIRST control row
-              (both 44px) — centering floated it between rows when the bar
-              wraps (Axiom 16 row line). */}
-          <XStack gap="$2" alignItems="flex-start">
-            {!fixtureMode && (
-              // Icon-only sidebar toggle: the bare "Hide sidebar" text read
-              // as a floating label, not a control, and its 28px box missed
-              // the press floor. House Button icon slot (LC-53) + circular
-              // sub-44 floor via the house channel (LC-54); aria-expanded
-              // carries the region state.
-              <ActionButton
-                size="$3"
-                circular
-                chromeless
-                icon={SidebarSimpleIcon}
-                display="none"
-                $sm={{ display: "flex" }}
-                onPress={() => setSidebarVisible((visible) => !visible)}
-                aria-expanded={sidebarVisible}
-                aria-label={
-                  sidebarVisible
-                    ? t("list.hideSidebar", "Hide sidebar")
-                    : t("list.showSidebar", "Show sidebar")
-                }
-              />
-            )}
-            <YStack flex={1}>
-              <ListFilterBar
-                doctype={doctype}
-                meta={meta}
-                filters={baseFilters}
-                onFiltersChange={handleBaseFiltersChange}
-                sortField={sortField}
-                sortOrder={sortOrder}
-                onSortChange={handleSortChange}
-              />
-            </YStack>
+  return (
+    <YStack flex={1} gap="$2" padding={compactChrome ? "$2" : "$3"}>
+      <PageHeader
+        gap="$2"
+        heading={
+          <XStack gap="$2" alignItems="baseline" flexWrap="wrap">
+            <H1 size={compactChrome ? "$6" : "$7"} margin={0} flexShrink={1} minWidth={0}>
+              {doctype}
+            </H1>
+            {countText ? (
+              <Paragraph size="$2" color="$color10" margin={0}>
+                {countText}
+              </Paragraph>
+            ) : null}
           </XStack>
-        </>
-      )}
+        }
+        actions={listToolbar}
+      >
+        {/* Shared chips readout (MOD-04 honest state): the table's own
+            chips row is suppressed, so the list chrome owns them. Renders
+            nothing while no filters apply. */}
+        <FilterChips meta={meta} filters={baseFilters} onFiltersChange={handleBaseFiltersChange} />
+      </PageHeader>
 
       {(() => {
         const listBody = (
@@ -980,7 +975,7 @@ export function DoctypeListScreen({
                 facet clicks toggle tuples through the same baseFilters
                 channel (handleBaseFiltersChange) — counts are informative,
                 the chips row is the shared readout. */}
-            {sidebarVisible && !fixtureMode && (
+            {sidebarVisible && (
               <YStack display="none" $sm={{ display: "flex" }}>
                 <ListSidebar
                   doctype={doctype}
@@ -1021,37 +1016,41 @@ export function DoctypeListScreen({
                   columns={columns}
                   fields={fields}
                   serverSide={!fixtureMode}
-                  {...(fixtureMode && withFixed(baseFilters).length > 0
-                    ? { filters: withFixed(baseFilters) }
-                    : {})}
+                  {...(fixtureMode ? { filters: withFixed(baseFilters) } : {})}
                   filterableFields={filterableFields}
                   initialState={{
                     sorting: [{ id: sortField, desc: sortOrder === "desc" }],
                     filters: initialTableFilters,
-                    pagination: { pageIndex: 0, pageSize: pageSizeRef.current },
+                    pagination: {
+                      pageIndex: 0,
+                      pageSize: fixtureMode ? 500 : pageSizeRef.current,
+                    },
+                    columnVisibility: { modified: false },
                   }}
-                  enablePagination
-                  renderPagination={(paginationProps) => (
-                    <DataTablePagination
-                      {...paginationProps}
-                      pageSizeOptions={[...PAGE_SIZES]}
-                      compact
-                    />
-                  )}
+                  // Keep-rows-and-reconcile (no remount): filter/sort changes
+                  // adopt in place; refresh re-runs the current query in
+                  // place. Rows stay rendered while the server reconciles.
+                  controlledState={controlledTableState}
+                  refreshToken={refreshGen}
+                  enablePagination={!fixtureMode}
+                  paginationMode="infinite"
+                  compact
                   // ONE FILTER SYSTEM (MOD-04 / LC-16): the list chrome is
                   // the single filtering authority; tuples reach the table
-                  // only through initialState.filters (remount via tableKey).
+                  // through controlledState (in-place adoption — no remount).
                   // enableFiltering={false} suppresses every in-table filter
                   // entry point (toolbar Filter button, column funnels, chips
                   // row, card Add Filter) and detaches the search clear-X
-                  // from the injected filters — the table contributes search
-                  // + header sort only, mirrored back via onStateChange.
+                  // from the injected filters — the table contributes header
+                  // sort only, mirrored back via onStateChange.
                   enableFiltering={false}
+                  enableGlobalSearch={false}
                   enableSorting
                   enableRowSelection={bulkActionsEnabled}
                   {...(bulkActionsEnabled ? { bulkActions } : {})}
                   onRowClick={handleRowClick}
                   onStateChange={handleStateChange}
+                  layout="list"
                 />
               )}
             </YStack>