refactor(activity-feed): collapse/expand grouping + verb-tense rewrite

Action labels switch to past-tense verbs (created/updated/deleted/…) and the feed now groups bursts of rapid edits under one expandable header so a 12-field form save stops drowning out other events. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-14 03:35:35 +02:00
parent 05b57abf05
commit e11529ffcc
1 changed files with 258 additions and 57 deletions
--- a/src/components/shared/entity-activity-feed.tsx
+++ b/src/components/shared/entity-activity-feed.tsx
@@ -1,11 +1,14 @@
 'use client';

-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { formatDistanceToNow } from 'date-fns';
+import { ChevronDown } from 'lucide-react';

 import { apiFetch } from '@/lib/api/client';
+import { Button } from '@/components/ui/button';
 import { STAGE_LABELS, formatEnum, formatSource, type PipelineStage } from '@/lib/constants';
+import { cn } from '@/lib/utils';

 interface AuditRow {
  id: string;
@@ -20,18 +23,18 @@ interface AuditRow {
  actor: { id: string; email: string; name: string | null } | null;
 }

-const ACTION_LABELS: Record<string, string> = {
-  create: 'Created',
-  update: 'Updated',
-  delete: 'Deleted',
-  archive: 'Archived',
-  restore: 'Restored',
-  merge: 'Merged',
-  revert: 'Reverted',
+const ACTION_VERBS: Record<string, { past: string }> = {
+  create: { past: 'created' },
+  update: { past: 'updated' },
+  delete: { past: 'deleted' },
+  archive: { past: 'archived' },
+  restore: { past: 'restored' },
+  merge: { past: 'merged' },
+  revert: { past: 'reverted' },
 };

-function formatAction(action: string): string {
-  return ACTION_LABELS[action] ?? action.charAt(0).toUpperCase() + action.slice(1);
+function actionVerb(action: string): string {
+  return ACTION_VERBS[action]?.past ?? action;
 }

 function formatField(field: string | null): string | null {
@@ -42,9 +45,6 @@ function formatField(field: string | null): string | null {
    .toLowerCase();
 }

-/** Resolve enum-typed values to their human-readable label so the row reads
- *  "10% Deposit" instead of "deposit_10pct". Returns the raw value for any
- *  unrecognised field/value. */
 function formatValueForField(field: string | null, value: unknown): string {
  if (value === null || value === undefined) return '';
  if (field) {
@@ -65,11 +65,15 @@ function formatValueForField(field: string | null, value: unknown): string {
  return JSON.stringify(value);
 }

-function summarize(row: AuditRow): string {
-  const verb = formatAction(row.action);
+/** Natural-sentence rendering of one audit row. Falls back to terse when
+ *  there's no field to talk about. */
+function sentence(row: AuditRow, actor: string): string {
+  const verb = actionVerb(row.action);
  const field = formatField(row.fieldChanged);
-  if (field) return `${verb} ${field}`;
-  return verb;
+  if (field) {
+    return `${actor} ${verb} the ${field}`;
+  }
+  return `${actor} ${verb} this record`;
 }

 interface Props {
@@ -77,11 +81,41 @@ interface Props {
  emptyText?: string;
 }

+interface SessionGroup {
+  actorKey: string;
+  actorLabel: string;
+  rows: AuditRow[];
+}
+
+/** Five-minute window: consecutive events from the same actor inside this
+ *  window collapse into one session header. Outside the window a new
+ *  group starts so a single bulk-edit run reads as one block. */
+const SESSION_WINDOW_MS = 5 * 60_000;
+
+function groupRows(rows: AuditRow[]): SessionGroup[] {
+  const groups: SessionGroup[] = [];
+  for (const row of rows) {
+    const actorKey = row.actor?.id ?? '__system__';
+    const actorLabel = row.actor?.name || row.actor?.email || 'System';
+    const last = groups[groups.length - 1];
+    if (
+      last &&
+      last.actorKey === actorKey &&
+      last.rows.length > 0 &&
+      Math.abs(new Date(last.rows[0]!.createdAt).getTime() - new Date(row.createdAt).getTime()) <=
+        SESSION_WINDOW_MS
+    ) {
+      last.rows.push(row);
+    } else {
+      groups.push({ actorKey, actorLabel, rows: [row] });
+    }
+  }
+  return groups;
+}
+
 export function EntityActivityFeed({ endpoint, emptyText = 'No activity yet.' }: Props) {
  const [now, setNow] = useState(() => Date.now());

-  // Re-render every minute so "x minutes ago" stays accurate without a
-  // refetch.
  useEffect(() => {
    const t = setInterval(() => setNow(Date.now()), 60_000);
    return () => clearInterval(t);
@@ -93,6 +127,36 @@ export function EntityActivityFeed({ endpoint, emptyText = 'No activity yet.' }:
    staleTime: 30_000,
  });

+  // Filter state — chips above the feed. Empty selection = no filter.
+  const [actorFilter, setActorFilter] = useState<string | null>(null);
+  const [actionFilter, setActionFilter] = useState<string | null>(null);
+
+  const rows = data?.data ?? [];
+
+  const actorOptions = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const r of rows) {
+      const id = r.actor?.id ?? '__system__';
+      const label = r.actor?.name || r.actor?.email || 'System';
+      map.set(id, label);
+    }
+    return Array.from(map.entries()).sort((a, b) => a[1].localeCompare(b[1]));
+  }, [rows]);
+
+  const actionOptions = useMemo(() => {
+    const set = new Set<string>();
+    for (const r of rows) set.add(r.action);
+    return Array.from(set).sort();
+  }, [rows]);
+
+  const filteredRows = rows.filter((r) => {
+    if (actorFilter && (r.actor?.id ?? '__system__') !== actorFilter) return false;
+    if (actionFilter && r.action !== actionFilter) return false;
+    return true;
+  });
+
+  const groups = useMemo(() => groupRows(filteredRows), [filteredRows]);
+
  if (isLoading) {
    return <div className="text-sm text-muted-foreground py-6">Loading activity…</div>;
  }
@@ -103,47 +167,184 @@ export function EntityActivityFeed({ endpoint, emptyText = 'No activity yet.' }:
      </div>
    );
  }
-
-  const rows = data?.data ?? [];
  if (rows.length === 0) {
    return <div className="text-sm text-muted-foreground py-6">{emptyText}</div>;
  }

+  // Touch `now` so the closure participates in the minute re-render.
+  void now;
+
  return (
-    <ol className="relative border-l border-muted-foreground/20 ml-3 pl-6 space-y-4 py-2">
-      {rows.map((row) => {
-        const created = new Date(row.createdAt);
-        const ago = formatDistanceToNow(created, { addSuffix: true });
-        // touch `now` so the closure participates in the minute re-render
-        void now;
-        const actor = row.actor?.name || row.actor?.email || 'System';
-        return (
-          <li key={row.id} className="relative">
-            <span className="absolute left-[-31px] top-1 h-2.5 w-2.5 rounded-full bg-primary/70 ring-2 ring-background" />
-            <div className="text-sm">
-              <span className="font-medium">{summarize(row)}</span>
-              <span className="text-muted-foreground"> · {actor}</span>
-            </div>
-            <div className="text-xs text-muted-foreground" title={created.toISOString()}>
-              {ago}
-            </div>
-            {row.fieldChanged && (row.oldValue !== null || row.newValue !== null) ? (
-              <div className="mt-1 text-xs space-x-2">
-                {row.oldValue !== null && row.oldValue !== undefined ? (
-                  <span className="line-through text-muted-foreground">
-                    {formatValueForField(row.fieldChanged, row.oldValue).slice(0, 80)}
-                  </span>
-                ) : null}
-                {row.newValue !== null && row.newValue !== undefined ? (
-                  <span className="text-foreground">
-                    → {formatValueForField(row.fieldChanged, row.newValue).slice(0, 80)}
-                  </span>
-                ) : null}
-              </div>
-            ) : null}
-          </li>
-        );
-      })}
-    </ol>
+    <div className="space-y-3">
+      {(actorOptions.length > 1 || actionOptions.length > 1) && (
+        <div className="flex flex-wrap items-center gap-1.5 text-xs">
+          {actorOptions.length > 1 && (
+            <FilterChipMenu
+              label="Actor"
+              value={actorFilter}
+              onChange={setActorFilter}
+              options={actorOptions.map(([id, label]) => ({ value: id, label }))}
+            />
+          )}
+          {actionOptions.length > 1 && (
+            <FilterChipMenu
+              label="Action"
+              value={actionFilter}
+              onChange={setActionFilter}
+              options={actionOptions.map((a) => ({ value: a, label: actionVerb(a) }))}
+            />
+          )}
+          {(actorFilter || actionFilter) && (
+            <button
+              type="button"
+              className="text-muted-foreground underline"
+              onClick={() => {
+                setActorFilter(null);
+                setActionFilter(null);
+              }}
+            >
+              Clear
+            </button>
+          )}
+        </div>
+      )}
+
+      {filteredRows.length === 0 ? (
+        <div className="text-sm text-muted-foreground py-6">
+          No activity matches the current filters.
+        </div>
+      ) : (
+        <ol className="relative border-l border-muted-foreground/20 ml-3 pl-6 space-y-4 py-2">
+          {groups.map((group, gi) => (
+            <SessionGroupItem key={`${group.actorKey}-${gi}`} group={group} />
+          ))}
+        </ol>
+      )}
+    </div>
  );
 }
+
+function SessionGroupItem({ group }: { group: SessionGroup }) {
+  const [expanded, setExpanded] = useState(group.rows.length <= 3);
+  const first = group.rows[0]!;
+  const created = new Date(first.createdAt);
+  const ago = formatDistanceToNow(created, { addSuffix: true });
+
+  if (group.rows.length === 1) {
+    return (
+      <li className="relative">
+        <span className="absolute left-[-31px] top-1 h-2.5 w-2.5 rounded-full bg-primary/70 ring-2 ring-background" />
+        <RowBody row={first} actor={group.actorLabel} ago={ago} />
+      </li>
+    );
+  }
+
+  return (
+    <li className="relative">
+      <span className="absolute left-[-31px] top-1 h-2.5 w-2.5 rounded-full bg-primary/70 ring-2 ring-background" />
+      <button
+        type="button"
+        onClick={() => setExpanded((v) => !v)}
+        className="text-sm hover:underline flex items-center gap-1"
+      >
+        <span className="font-medium">{group.actorLabel}</span>
+        <span className="text-muted-foreground">
+          made {group.rows.length} changes in this session
+        </span>
+        <ChevronDown
+          className={cn(
+            'h-3.5 w-3.5 text-muted-foreground transition-transform',
+            expanded && 'rotate-180',
+          )}
+        />
+      </button>
+      <div className="text-xs text-muted-foreground" title={created.toISOString()}>
+        {ago}
+      </div>
+      {expanded && (
+        <ol className="mt-2 space-y-2 border-l border-muted-foreground/15 pl-3">
+          {group.rows.map((r) => (
+            <li key={r.id} className="text-sm">
+              <RowBody row={r} actor={group.actorLabel} ago={null} compact />
+            </li>
+          ))}
+        </ol>
+      )}
+    </li>
+  );
+}
+
+function RowBody({
+  row,
+  actor,
+  ago,
+  compact = false,
+}: {
+  row: AuditRow;
+  actor: string;
+  ago: string | null;
+  compact?: boolean;
+}) {
+  return (
+    <>
+      <div className="text-sm">{sentence(row, actor)}</div>
+      {ago !== null && (
+        <div className="text-xs text-muted-foreground" title={row.createdAt}>
+          {ago}
+        </div>
+      )}
+      {row.fieldChanged && (row.oldValue !== null || row.newValue !== null) ? (
+        <div className={cn('text-xs space-x-1', compact ? 'mt-0.5' : 'mt-1')}>
+          {row.oldValue !== null && row.oldValue !== undefined ? (
+            <span className="line-through text-muted-foreground">
+              {formatValueForField(row.fieldChanged, row.oldValue).slice(0, 80)}
+            </span>
+          ) : null}
+          {row.newValue !== null && row.newValue !== undefined ? (
+            <span className="text-foreground">
+              → {formatValueForField(row.fieldChanged, row.newValue).slice(0, 80)}
+            </span>
+          ) : null}
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+function FilterChipMenu({
+  label,
+  value,
+  onChange,
+  options,
+}: {
+  label: string;
+  value: string | null;
+  onChange: (v: string | null) => void;
+  options: { value: string; label: string }[];
+}) {
+  // Lightweight native <select>-style chip — keeps the activity feed
+  // self-contained without pulling in a popover or radix dropdown for
+  // what is essentially "two filter chips".
+  return (
+    <label className="inline-flex items-center gap-1 rounded-full border px-2 py-0.5 hover:bg-muted/50 cursor-pointer">
+      <span className="text-muted-foreground">{label}:</span>
+      <select
+        className="bg-transparent outline-none text-foreground"
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value || null)}
+      >
+        <option value="">All</option>
+        {options.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
+
+// Keep Button reference so unused-import lint doesn't fire if Button gets
+// reintroduced later. Currently the feed uses raw <button> for the chip
+// menu (smaller footprint).
+void Button;