@multiplatform.one/backoffice 6.6.0 → 7.0.0

package/src/list/listColumns.tsx

@@ -1,14 +1,23 @@
-// Meta-driven column builder for the doctype list view (desk parity):
-// liked heart, bolded title (title_field), in_list_view fields with
-// fieldtype-aware cells (status pills, dates, checks, numerics), subdued
-// ID, and a relative "Last Updated On" column.
-import { Text, XStack } from "@multiplatform.one/components";
+// Meta-driven column builder for the doctype list view (desk ListView
+// parity): subject-led document rows, not a report grid.
+//
+// Desk row anatomy (list_view.js):
+//   checkbox | subject <a> | indicator pills (filterable) | remaining
+//   in_list_view values (filterable) | activity cluster
+//     (assignee avatars · relative time · comment count · like)
+// Title is a real permalink (middle-click / ⌘-click). Pills and values
+// click-to-filter (data-filter) instead of navigating. Like is a sibling
+// of the subject link (LC-74). Extra ID / Last Updated columns stay out —
+// the timestamp lives in the activity cluster.
+import type { ReactNode } from "react";
+import { Avatar, Anchor, Text, XStack, YStack } from "@multiplatform.one/components";
 // House control for the like toggle — the icon rides the Button icon slot
 // (LC-53 GLYPH-SLOT) and the sub-44 circular size resolves the press floor
 // through the house channel (LC-54: 44px box + hitSlop).
 import { Button } from "@multiplatform.one/forms";
-import { HeartIcon } from "@phosphor-icons/react";
+import { ChatCircleIcon, HeartIcon } from "@phosphor-icons/react";
 import type { DataTableColumn } from "@multiplatform.one/table";
+import { formatAbsoluteDateTime } from "@multiplatform.one/theme";
 import type { PermLevelMatrix } from "../form/fieldPermissions";
 import type { DocFieldMeta, DoctypeMeta } from "../shared/useDoctypeMeta";
 // Field selection + permlevel pruning live in the pure listFields module
@@ -46,6 +55,13 @@ export interface BuildListColumnsArgs {
    * the server strips no-read values either way.
    */
   permMatrix?: PermLevelMatrix;
+  /** Document form href — subject renders as a real `<a>` when set (C1). */
+  getDocHref?: (name: string) => string;
+  /**
+   * Desk cell click-to-filter (C2). Status/priority pills, dates, and
+   * remaining values add (or toggle off) a tuple instead of opening the doc.
+   */
+  onFilterClick?: (fieldname: string, value: string) => void;
 }
 
 const NUMERIC_FIELDTYPES = new Set(["Currency", "Float", "Int", "Percent", "Duration"]);
@@ -79,16 +95,64 @@ function isStatusField(field: DocFieldMeta, meta?: DoctypeMeta): boolean {
   return options.some((option) => option && stateTitles.has(option));
 }
 
-function StatusPill({ value, meta }: { value: string; meta?: DoctypeMeta }) {
+/** Desk indicator cells: every Select in the list, plus User.enabled. */
+function isIndicatorField(field: DocFieldMeta, meta?: DoctypeMeta): boolean {
+  if (field.fieldtype === "Select") return true;
+  if (field.fieldtype === "Check" && field.fieldname === "enabled") return true;
+  return isStatusField(field, meta);
+}
+
+function stopRowPress(event?: { stopPropagation?: () => void }) {
+  event?.stopPropagation?.();
+}
+
+function IndicatorPill({
+  value,
+  meta,
+  fieldname,
+  filterValue,
+  onFilterClick,
+}: {
+  value: string;
+  meta?: DoctypeMeta;
+  fieldname: string;
+  /** Wire value when it differs from the label (Check enabled → 1/0). */
+  filterValue?: string;
+  onFilterClick?: (fieldname: string, value: string) => void;
+}) {
   const colors = statusPillColors(value, meta);
+  const applied = filterValue ?? value;
+  const handlePress = onFilterClick
+    ? (event?: { stopPropagation?: () => void }) => {
+        stopRowPress(event);
+        onFilterClick(fieldname, applied);
+      }
+    : undefined;
   return (
     <XStack
       alignSelf="flex-start"
+      alignItems="center"
+      gap="$1.5"
       backgroundColor={colors.background as "$color3"}
       borderRadius={999}
-      paddingHorizontal="$2.5"
-      paddingVertical="$1"
+      paddingHorizontal="$2"
+      paddingVertical={3}
+      {...(handlePress
+        ? {
+            role: "button" as const,
+            cursor: "pointer" as const,
+            onPress: handlePress,
+            "data-filter": `${fieldname},=,${applied}`,
+          }
+        : {})}
     >
+      <YStack
+        width={6}
+        height={6}
+        borderRadius={999}
+        backgroundColor={colors.text as "$color11"}
+        flexShrink={0}
+      />
       <Text color={colors.text as "$color11"} fontSize="$2" fontWeight="600">
         {value}
       </Text>
@@ -96,7 +160,162 @@ function StatusPill({ value, meta }: { value: string; meta?: DoctypeMeta }) {
   );
 }
 
-function fieldCell(field: DocFieldMeta, meta: DoctypeMeta | undefined) {
+function FilterableText({
+  fieldname,
+  value,
+  children,
+  onFilterClick,
+}: {
+  fieldname: string;
+  value: string;
+  children: ReactNode;
+  onFilterClick?: (fieldname: string, value: string) => void;
+}) {
+  if (!onFilterClick) return <>{children}</>;
+  return (
+    <XStack
+      role="button"
+      cursor="pointer"
+      minWidth={0}
+      flexShrink={1}
+      onPress={(event) => {
+        stopRowPress(event);
+        onFilterClick(fieldname, value);
+      }}
+      hoverStyle={{ opacity: 0.8 }}
+      {...{ "data-filter": `${fieldname},=,${value}` }}
+    >
+      {children}
+    </XStack>
+  );
+}
+
+function commentCount(doc: ListRow): number {
+  const raw = doc._comment_count;
+  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
+  if (typeof raw === "string" && raw.trim()) {
+    const parsed = Number(raw);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  const comments = doc._comments;
+  if (typeof comments === "string" && comments.trim()) {
+    try {
+      const parsed = JSON.parse(comments) as unknown;
+      if (Array.isArray(parsed)) return parsed.length;
+    } catch {
+      return 0;
+    }
+  }
+  return 0;
+}
+
+function LikeControl({
+  doc,
+  t,
+  sessionUser,
+  onToggleLike,
+  likeOverrides,
+}: {
+  doc: ListRow;
+  t: Translate;
+  sessionUser?: string;
+  onToggleLike?: (name: string, nextLiked: boolean) => void;
+  likeOverrides?: Record<string, boolean>;
+}) {
+  const name = doc.name ?? "";
+  const likedBy = parseUserListField(doc._liked_by);
+  const liked = likeOverrides?.[name] ?? (sessionUser ? likedBy.includes(sessionUser) : false);
+  const likeLabel = liked ? t("list.unlike", "Remove from liked") : t("list.like", "Add to liked");
+  if (!onToggleLike || !name) {
+    return (
+      <Text fontSize="$4" color={liked ? "$red10" : "$color8"} role="img" aria-label={likeLabel}>
+        {liked ? "♥" : "♡"}
+      </Text>
+    );
+  }
+  return (
+    <Button
+      circular
+      chromeless
+      size="$2"
+      col={(liked ? "$red10" : "$color8") as never}
+      icon={<HeartIcon size={16} weight={liked ? "fill" : "regular"} />}
+      aria-label={likeLabel}
+      aria-pressed={liked}
+      onPress={(event) => {
+        stopRowPress(event);
+        onToggleLike(name, !liked);
+      }}
+    />
+  );
+}
+
+function ActivityCluster({
+  doc,
+  t,
+  sessionUser,
+  onToggleLike,
+  likeOverrides,
+}: {
+  doc: ListRow;
+  t: Translate;
+  sessionUser?: string;
+  onToggleLike?: (name: string, nextLiked: boolean) => void;
+  likeOverrides?: Record<string, boolean>;
+}) {
+  const assignees = parseUserListField(doc._assign);
+  const comments = commentCount(doc);
+  const modified = doc.modified ? String(doc.modified) : "";
+  const absolute = modified ? formatAbsoluteDateTime(modified) : "";
+  return (
+    <XStack
+      alignItems="center"
+      justifyContent="flex-end"
+      gap="$2"
+      minWidth={0}
+      testID="list-activity"
+    >
+      {assignees.slice(0, 3).map((user) => (
+        <Avatar key={user} name={user} size={20} circular aria-label={user} />
+      ))}
+      {modified ? (
+        <Text
+          fontSize="$2"
+          color="$color9"
+          {...({ title: absolute || undefined } as Record<string, unknown>)}
+        >
+          {formatTimeAgo(modified)}
+        </Text>
+      ) : null}
+      <XStack
+        alignItems="center"
+        gap="$1"
+        {...({ "aria-label": t("list.comments", "Comments") } as Record<
+          string,
+          unknown
+        >)}
+      >
+        <ChatCircleIcon size={14} />
+        <Text fontSize="$2" color="$color9">
+          {comments}
+        </Text>
+      </XStack>
+      <LikeControl
+        doc={doc}
+        t={t}
+        sessionUser={sessionUser}
+        onToggleLike={onToggleLike}
+        likeOverrides={likeOverrides}
+      />
+    </XStack>
+  );
+}
+
+function fieldCell(
+  field: DocFieldMeta,
+  meta: DoctypeMeta | undefined,
+  onFilterClick?: (fieldname: string, value: string) => void,
+) {
   return ({ getValue }: { getValue: () => unknown }) => {
     const raw = getValue();
     if (raw === null || raw === undefined || raw === "")
@@ -105,8 +324,29 @@ function fieldCell(field: DocFieldMeta, meta: DoctypeMeta | undefined) {
           —
         </Text>
       );
+    if (field.fieldtype === "Check" && field.fieldname === "enabled") {
+      const on = raw === true || raw === 1 || raw === "1";
+      return (
+        <IndicatorPill
+          value={on ? "Active" : "Disabled"}
+          meta={meta}
+          fieldname={field.fieldname}
+          filterValue={on ? "1" : "0"}
+          onFilterClick={onFilterClick}
+        />
+      );
+    }
     const value = String(raw);
-    if (isStatusField(field, meta)) return <StatusPill value={value} meta={meta} />;
+    if (isIndicatorField(field, meta)) {
+      return (
+        <IndicatorPill
+          value={value}
+          meta={meta}
+          fieldname={field.fieldname}
+          onFilterClick={onFilterClick}
+        />
+      );
+    }
     switch (field.fieldtype) {
       case "Check":
         return (
@@ -115,12 +355,16 @@ function fieldCell(field: DocFieldMeta, meta: DoctypeMeta | undefined) {
           </Text>
         );
       case "Date":
-      case "Datetime":
+      case "Datetime": {
+        const display = formatDateCell(value);
         return (
-          <Text fontSize="$3" color="$color11">
-            {formatDateCell(value)}
-          </Text>
+          <FilterableText fieldname={field.fieldname} value={value} onFilterClick={onFilterClick}>
+            <Text fontSize="$3" color="$color11">
+              {display}
+            </Text>
+          </FilterableText>
         );
+      }
       case "Currency":
       case "Float":
       case "Int":
@@ -132,15 +376,13 @@ function fieldCell(field: DocFieldMeta, meta: DoctypeMeta | undefined) {
         );
       case "Link":
         return (
-          <Text fontSize="$3" color="$color11" numberOfLines={1} flexShrink={1} minWidth={0}>
-            {value}
-          </Text>
+          <FilterableText fieldname={field.fieldname} value={value} onFilterClick={onFilterClick}>
+            <Text fontSize="$3" color="$color11" numberOfLines={1} flexShrink={1} minWidth={0}>
+              {value}
+            </Text>
+          </FilterableText>
         );
       default:
-        // One-line plain-text preview (rich markup stripped) that SHRINKS
-        // inside the cell (flexShrink + minWidth 0) so numberOfLines can
-        // ellipsize instead of painting under the neighbor column
-        // (LC-06/LC-10; cell-containment rule candidate, audit pair 16).
         return (
           <Text fontSize="$3" color="$color11" numberOfLines={1} flexShrink={1} minWidth={0}>
             {cellPreview(value, field.fieldtype)}
@@ -158,69 +400,12 @@ export function buildListColumns({
   onToggleLike,
   likeOverrides,
   permMatrix,
+  getDocHref,
+  onFilterClick,
 }: BuildListColumnsArgs): DataTableColumn<ListRow>[] {
   const titleField = meta?.title_field || "name";
   const columns: DataTableColumn<ListRow>[] = [];
 
-  // Liked hearts (desk `_liked_by` column). Press toggles; navigation is
-  // stopped so the row click underneath does not fire.
-  columns.push({
-    id: "_liked_by",
-    // Glyph header with a spoken name — a bare "♥" string gives the column
-    // an unpronounceable accessible name. Presentational glyph + aria-label.
-    header: () => (
-      <Text role="img" aria-label={t("list.likedColumn", "Liked")} color="$color9" fontSize="$4">
-        ♥
-      </Text>
-    ),
-    accessorKey: "_liked_by",
-    sortable: false,
-    filterable: false,
-    width: 56,
-    maxWidth: 64,
-    align: "center",
-    cell: ({ row }) => {
-      const doc = row.original;
-      const name = doc.name ?? "";
-      const likedBy = parseUserListField(doc._liked_by);
-      const liked = likeOverrides?.[name] ?? (sessionUser ? likedBy.includes(sessionUser) : false);
-      const likeLabel = liked
-        ? t("list.unlike", "Remove from liked")
-        : t("list.like", "Add to liked");
-      if (!onToggleLike || !name) {
-        // Read-only surface (fixtures / no session): presentational glyph.
-        return (
-          <Text
-            fontSize="$4"
-            color={liked ? "$red10" : "$color8"}
-            role="img"
-            aria-label={likeLabel}
-          >
-            {liked ? "♥" : "♡"}
-          </Text>
-        );
-      }
-      return (
-        <Button
-          circular
-          chromeless
-          size="$2"
-          // LC-53 GLYPH-SLOT: glyph rides the icon slot; the slot themes the
-          // clone from the control's color (`col` shorthand).
-          col={(liked ? "$red10" : "$color8") as never}
-          icon={<HeartIcon size={16} weight={liked ? "fill" : "regular"} />}
-          aria-label={likeLabel}
-          aria-pressed={liked}
-          onPress={(event) => {
-            event?.stopPropagation?.();
-            onToggleLike(name, !liked);
-          }}
-        />
-      );
-    },
-  });
-
-  // Title column: title_field bolded (desk subject).
   const titleMeta = meta?.fields?.find((field) => field.fieldname === titleField);
   columns.push({
     id: titleField,
@@ -230,13 +415,14 @@ export function buildListColumns({
         : titleMeta?.label || t("list.titleColumn", "Title"),
     accessorKey: titleField,
     minWidth: 180,
+    meta: { role: "title" },
     cell: ({ row, getValue }) => {
       const raw = getValue();
-      const value =
-        raw === null || raw === undefined || raw === "" ? (row.original.name ?? "") : String(raw);
-      // Same containment contract as fieldCell: stripped preview + a
-      // shrinkable text box so the one-line clamp ellipsizes in-column.
-      return (
+      const name = row.original.name ?? "";
+      const value = raw === null || raw === undefined || raw === "" ? name : String(raw);
+      const href = name && getDocHref ? getDocHref(name) : undefined;
+      const label = cellPreview(value, titleMeta?.fieldtype);
+      const subject = (
         <Text
           fontSize="$3"
           fontWeight="600"
@@ -245,52 +431,59 @@ export function buildListColumns({
           flexShrink={1}
           minWidth={0}
         >
-          {cellPreview(value, titleMeta?.fieldtype)}
+          {label}
         </Text>
       );
+      if (!href) return subject;
+      return (
+        <Anchor
+          href={href}
+          textDecorationLine="none"
+          minWidth={0}
+          flexShrink={1}
+          onPress={stopRowPress}
+        >
+          {subject}
+        </Anchor>
+      );
     },
   });
 
-  // in_list_view fields from meta (permlevel-pruned).
   for (const field of listViewFields(meta, titleField, permMatrix)) {
     columns.push({
       id: field.fieldname,
       header: field.label || field.fieldname,
       accessorKey: field.fieldname,
       ...(NUMERIC_FIELDTYPES.has(field.fieldtype) ? { align: "right" as const } : {}),
-      cell: fieldCell(field, meta),
+      cell: fieldCell(field, meta, onFilterClick),
     });
   }
 
-  // Subdued ID column when the title field is something else.
-  if (titleField !== "name") {
-    columns.push({
-      id: "name",
-      header: t("list.idColumn", "ID"),
-      accessorKey: "name",
-      maxWidth: 160,
-      cell: ({ getValue }) => (
-        <Text fontSize="$2" color="$color9" numberOfLines={1}>
-          {String(getValue() ?? "")}
-        </Text>
-      ),
-    });
-  }
+  columns.push({
+    id: "_activity",
+    header: t("list.activity", "Activity"),
+    meta: { role: "actions", label: t("list.activity", "Activity") },
+    sortable: false,
+    filterable: false,
+    cell: ({ row }) => (
+      <ActivityCluster
+        doc={row.original}
+        t={t}
+        sessionUser={sessionUser}
+        onToggleLike={onToggleLike}
+        likeOverrides={likeOverrides}
+      />
+    ),
+  });
 
-  // Desk "Last Updated On".
+  // Hidden sort key — desk default is Last Updated On. The timestamp paints
+  // in the activity cluster; the column exists so TanStack can sort on it
+  // without a second visible "Last Updated" slot.
   columns.push({
     id: "modified",
-    header: t("list.lastUpdated", "Last Updated On"),
     accessorKey: "modified",
-    maxWidth: 140,
-    cell: ({ getValue }) => {
-      const raw = getValue();
-      return (
-        <Text fontSize="$2" color="$color9">
-          {raw ? formatTimeAgo(String(raw)) : ""}
-        </Text>
-      );
-    },
+    header: t("list.lastUpdated", "Last Updated On"),
+    enableHiding: true,
   });
 
   return columns;

package/src/list/listFields.spec.ts

@@ -10,7 +10,7 @@
 import { describe, expect, it } from "vitest";
 import { buildPermLevelMatrix, type PermLevelMatrix } from "../form/fieldPermissions";
 import type { DoctypeMeta } from "../shared/useDoctypeMeta";
-import { listFieldsToFetch, listViewFields } from "./listFields";
+import { listDocumentColumnIds, listFieldsToFetch, listViewFields } from "./listFields";
 
 const meta: DoctypeMeta = {
   name: "User",
@@ -85,7 +85,9 @@ describe("listFieldsToFetch permlevel pruning", () => {
   it("skips unreadable in_list_view fields but keeps bookkeeping fields", () => {
     const matrix = buildPermLevelMatrix(meta.permissions, ["Desk User"]);
     const fields = listFieldsToFetch(meta, matrix);
-    expect(fields).toEqual(expect.arrayContaining(["name", "modified", "full_name", "enabled"]));
+    expect(fields).toEqual(
+      expect.arrayContaining(["name", "modified", "full_name", "enabled", "_comment_count"]),
+    );
     expect(fields).not.toContain("role_profile_name");
     expect(fields).not.toContain("api_secret_hint");
   });
@@ -96,3 +98,15 @@ describe("listFieldsToFetch permlevel pruning", () => {
     expect(fields).toContain("api_secret_hint");
   });
 });
+
+describe("listDocumentColumnIds desk list anatomy", () => {
+  it("is title, in_list_view values, then the activity cluster — no extra ID/modified", () => {
+    expect(listDocumentColumnIds(meta)).toEqual([
+      "full_name",
+      "enabled",
+      "role_profile_name",
+      "api_secret_hint",
+      "_activity",
+    ]);
+  });
+});

package/src/list/listFields.ts

@@ -24,6 +24,7 @@ export function listFieldsToFetch(meta?: DoctypeMeta, permMatrix?: PermLevelMatr
     "_liked_by",
     "_assign",
     "_user_tags",
+    "_comment_count",
   ]);
   if (meta?.title_field) fields.add(meta.title_field);
   for (const field of meta?.fields ?? []) {
@@ -56,3 +57,13 @@ export function listViewFields(
       fieldLevelReadable(field, permMatrix),
   );
 }
+
+/** Column ids the list view paints, in order: title, in_list_view, activity. */
+export function listDocumentColumnIds(meta?: DoctypeMeta, permMatrix?: PermLevelMatrix): string[] {
+  const titleField = meta?.title_field || "name";
+  return [
+    titleField,
+    ...listViewFields(meta, titleField, permMatrix).map((field) => field.fieldname),
+    "_activity",
+  ];
+}

package/src/list/listUrlState.spec.ts

@@ -38,6 +38,12 @@ describe("filters param (?f=)", () => {
     expect(parseFiltersParam("[[1,2,3]]")).toEqual([]);
   });
 
+  it('treats the one-router removal sentinel ("undefined") as no filters', () => {
+    // The one adapter clears a param by writing the literal "undefined"
+    // (one's URL serializer drops it); a stale echo must parse to empty.
+    expect(parseFiltersParam("undefined")).toEqual([]);
+  });
+
   it("normalizes tuples to three entries and drops malformed rows", () => {
     expect(parseFiltersParam(JSON.stringify([["a", "=", "b", "extra"], ["short"]]))).toEqual([
       ["a", "=", "b"],
@@ -65,6 +71,10 @@ describe("sort param (?sort=<fieldname>.<asc|desc>)", () => {
     expect(parseSortParam(".desc")).toBeUndefined();
   });
 
+  it('treats the one-router removal sentinel ("undefined") as no sort', () => {
+    expect(parseSortParam("undefined")).toBeUndefined();
+  });
+
   it("accepts urlencoded input (defensive decode)", () => {
     expect(parseSortParam(encodeURIComponent("due_date.asc"))).toEqual({
       field: "due_date",

package/src/list/sidebar-section.spec.tsx

@@ -0,0 +1,28 @@
+import { GroupPositionContext } from "@multiplatform.one/theme";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { SidebarFacetRow } from "./sidebar-section";
+
+afterEach(cleanup);
+
+describe("SidebarFacetRow stacked-group radius (LC-72)", () => {
+  it("resolves first / middle / last from GroupPositionContext", () => {
+    renderWithProviders(
+      <>
+        <GroupPositionContext.Provider value="first">
+          <SidebarFacetRow label="Open" count={4} active={false} onPress={vi.fn()} />
+        </GroupPositionContext.Provider>
+        <GroupPositionContext.Provider value="middle">
+          <SidebarFacetRow label="Closed" count={2} active={false} onPress={vi.fn()} />
+        </GroupPositionContext.Provider>
+        <GroupPositionContext.Provider value="last">
+          <SidebarFacetRow label="Cancelled" count={1} active={false} onPress={vi.fn()} />
+        </GroupPositionContext.Provider>
+      </>,
+    );
+    expect(screen.getByLabelText("Open").getAttribute("data-group-position")).toBe("first");
+    expect(screen.getByLabelText("Closed").getAttribute("data-group-position")).toBe("middle");
+    expect(screen.getByLabelText("Cancelled").getAttribute("data-group-position")).toBe("last");
+  });
+});