feat(managers): shared sort across the table and card layouts

Cards have no column headers to sort by, so lift the sort out of DataTable into one shared state that BOTH views drive and reflect. New lib/columnSort.ts holds the comparator + click-cycle (one source of truth); DataTable gains an optional controlled sort (sort + onSortChange) and falls back to its internal persistKey sort when they're omitted, so every other table is untouched. The subscribed sort lives in ChannelsProvider, discovery keeps its own (its columns differ); a new ColumnSortControl dropdown (options derived from the columns' sortable metadata, feed-style + asc/desc toggle) drives it in cards mode. Per-account, persisted, per-tab.
2026-07-19 23:09:54 +02:00
parent 875c7ad741
commit 9c4dd0163a
9 changed files with 195 additions and 31 deletions
@@ -0,0 +1,60 @@
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { type Column } from "./DataTable";
+import { type SortState } from "../lib/columnSort";
+
+// A sort control for views without clickable column headers (the channel manager's card layout):
+// a dropdown of the sortable columns + an asc/desc toggle, mirroring the feed toolbar's sort. It's
+// driven by the SAME `SortState` the DataTable header uses, so table and cards stay in sync. The
+// dropdown's options come straight from the columns' `sortable`/`sortValue` metadata — no new list.
+export default function ColumnSortControl<T>({
+  columns,
+  sort,
+  onChange,
+  label,
+  defaultLabel,
+  ascLabel,
+  descLabel,
+}: {
+  columns: Column<T>[];
+  sort: SortState;
+  onChange: (next: SortState) => void;
+  /** Accessible name for the dropdown (e.g. "Sort"). */
+  label: string;
+  /** The "no sort / original order" option's text. */
+  defaultLabel: string;
+  ascLabel: string;
+  descLabel: string;
+}) {
+  const sortable = columns.filter((c) => c.sortable && c.sortValue);
+  return (
+    <div className="flex items-center gap-1">
+      <select
+        value={sort?.key ?? ""}
+        onChange={(e) => {
+          const key = e.target.value;
+          // Keep the direction when re-picking the same column; a new column starts ascending.
+          onChange(key ? { key, dir: sort?.key === key ? sort.dir : "asc" } : null);
+        }}
+        aria-label={label}
+        className="bg-card border border-border rounded-lg px-2 py-1.5 text-sm outline-none focus:border-accent"
+      >
+        <option value="">{defaultLabel}</option>
+        {sortable.map((c) => (
+          <option key={c.key} value={c.key}>
+            {c.header}
+          </option>
+        ))}
+      </select>
+      {sort && (
+        <button
+          onClick={() => onChange({ key: sort.key, dir: sort.dir === "asc" ? "desc" : "asc" })}
+          title={sort.dir === "asc" ? ascLabel : descLabel}
+          aria-label={sort.dir === "asc" ? ascLabel : descLabel}
+          className="shrink-0 p-1.5 rounded-lg border border-border bg-card text-fg hover:border-accent hover:text-accent active:translate-y-px transition"
+        >
+          {sort.dir === "asc" ? <ArrowUp className="w-4 h-4" /> : <ArrowDown className="w-4 h-4" />}
+        </button>
+      )}
+    </div>
+  );
+}