feat(web): DataTable groupBy with collapsible counted group headers

Groups keep first-seen order (or a custom order), headers show counts and
toggle with aria-expanded; collapsed groups persist per storageKey in
localStorage (read after mount, failures ignored). The trash list groups by
registered directory when items span more than one.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

apps/web/app/components/console/data-table.tsx

@@ -1,7 +1,8 @@
-import type { LucideIcon } from "lucide-react";
-import type { ReactNode } from "react";
+import { ChevronRight, type LucideIcon } from "lucide-react";
+import { Fragment, type ReactNode, useEffect, useMemo, useState } from "react";
 import { Button } from "~/components/ui/button.tsx";
 import { cn } from "~/lib/utils.ts";
+import { groupRows, readCollapsed, toggleCollapsed, writeCollapsed } from "./data-table-groups.ts";
 import { EmptyState, ErrorState, LoadingState } from "./empty-state.tsx";
 
 export type DataColumn<T> = {
@@ -15,6 +16,16 @@ export type DataColumn<T> = {
   className?: string;
 };
 
+/** 分组:按键把行归组,组头可折叠并显示计数;给 storageKey 时在本浏览器记住折叠的组 */
+export type DataGroupBy<T> = {
+  key: (row: T) => string;
+  /** 组头文字,缺省为 key */
+  label?: (key: string, rows: T[]) => ReactNode;
+  /** 组顺序,缺省按首次出现 */
+  order?: (a: string, b: string) => number;
+  storageKey?: string;
+};
+
 const HIDE: Record<NonNullable<DataColumn<unknown>["hideBelow"]>, string> = {
   sm: "hidden sm:table-cell",
   md: "hidden md:table-cell",
@@ -44,6 +55,7 @@ export function DataTable<T>({
   onLoadMore,
   loadingMore = false,
   plain = false,
+  groupBy,
   className,
 }: {
   columns: DataColumn<T>[];
@@ -59,8 +71,70 @@ export function DataTable<T>({
   onLoadMore?: () => void;
   loadingMore?: boolean;
   plain?: boolean;
+  groupBy?: DataGroupBy<T>;
   className?: string;
 }) {
+  const storageKey = groupBy?.storageKey;
+  const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set());
+  // 折叠态在挂载后读(服务端渲染时没有 localStorage,首屏一律展开)
+  useEffect(() => {
+    const saved = readCollapsed(storageKey);
+    if (saved) setCollapsed(saved);
+  }, [storageKey]);
+  const groupKey = groupBy?.key;
+  const groupOrder = groupBy?.order;
+  const groups = useMemo(
+    () => (groupKey && rows ? groupRows(rows, groupKey, groupOrder) : null),
+    [rows, groupKey, groupOrder],
+  );
+  const toggleGroup = (k: string) =>
+    setCollapsed((prev) => {
+      const next = toggleCollapsed(prev, k);
+      writeCollapsed(storageKey, next);
+      return next;
+    });
+
+  const renderRow = (row: T) => {
+    const key = rowKey(row);
+    return (
+      <tr
+        key={key}
+        onClick={onRowClick ? () => onRowClick(row) : undefined}
+        onKeyDown={
+          onRowClick
+            ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onRowClick(row);
+                }
+              }
+            : undefined
+        }
+        tabIndex={onRowClick ? 0 : undefined}
+        aria-selected={selectedKey != null ? selectedKey === key : undefined}
+        className={cn(
+          "border-b border-border/60 transition-colors duration-micro last:border-b-0",
+          onRowClick && "cursor-pointer outline-none hover:bg-foreground/[0.04] focus-visible:bg-foreground/[0.06]",
+          selectedKey === key && "bg-foreground/[0.05]",
+        )}
+      >
+        {columns.map((c) => (
+          <td
+            key={c.key}
+            className={cn(
+              "px-4 py-2.5 align-middle",
+              c.align === "right" && "text-right",
+              c.hideBelow && HIDE[c.hideBelow],
+              c.className,
+            )}
+          >
+            {c.cell(row)}
+          </td>
+        ))}
+      </tr>
+    );
+  };
+
   let body: ReactNode;
   if (loading && !rows) {
     body = <LoadingState rows={5} className="p-4" />;
@@ -99,49 +173,42 @@ export function DataTable<T>({
               ))}
             </tr>
           </thead>
-          <tbody>
-            {rows.map((row) => {
-              const key = rowKey(row);
+          {groups ? (
+            groups.map((g) => {
+              const open = !collapsed.has(g.key);
               return (
-                <tr
-                  key={key}
-                  onClick={onRowClick ? () => onRowClick(row) : undefined}
-                  onKeyDown={
-                    onRowClick
-                      ? (e) => {
-                          if (e.key === "Enter" || e.key === " ") {
-                            e.preventDefault();
-                            onRowClick(row);
-                          }
-                        }
-                      : undefined
-                  }
-                  tabIndex={onRowClick ? 0 : undefined}
-                  aria-selected={selectedKey != null ? selectedKey === key : undefined}
-                  className={cn(
-                    "border-b border-border/60 transition-colors duration-micro last:border-b-0",
-                    onRowClick &&
-                      "cursor-pointer outline-none hover:bg-foreground/[0.04] focus-visible:bg-foreground/[0.06]",
-                    selectedKey === key && "bg-foreground/[0.05]",
-                  )}
-                >
-                  {columns.map((c) => (
-                    <td
-                      key={c.key}
-                      className={cn(
-                        "px-4 py-2.5 align-middle",
-                        c.align === "right" && "text-right",
-                        c.hideBelow && HIDE[c.hideBelow],
-                        c.className,
-                      )}
-                    >
-                      {c.cell(row)}
-                    </td>
-                  ))}
-                </tr>
+                <Fragment key={`g:${g.key}`}>
+                  <tbody>
+                    <tr className="border-b border-border/60 bg-foreground/[0.02]">
+                      <th scope="colgroup" colSpan={columns.length} className="p-0 text-left font-normal">
+                        <button
+                          type="button"
+                          aria-expanded={open}
+                          onClick={() => toggleGroup(g.key)}
+                          className="flex w-full items-center gap-2 px-4 py-2 text-meta text-muted-foreground outline-none hover:text-foreground focus-visible:bg-foreground/[0.06]"
+                        >
+                          <ChevronRight
+                            aria-hidden
+                            className={cn(
+                              "h-3.5 w-3.5 shrink-0 transition-transform duration-micro",
+                              open && "rotate-90",
+                            )}
+                          />
+                          <span className="min-w-0 truncate font-medium text-foreground">
+                            {groupBy?.label ? groupBy.label(g.key, g.rows) : g.key}
+                          </span>
+                          <span className="tabular-nums">{g.rows.length}</span>
+                        </button>
+                      </th>
+                    </tr>
+                  </tbody>
+                  {open ? <tbody>{g.rows.map(renderRow)}</tbody> : null}
+                </Fragment>
               );
-            })}
-          </tbody>
+            })
+          ) : (
+            <tbody>{rows.map(renderRow)}</tbody>
+          )}
         </table>
       </div>
     );