feat(channels): data-table channel manager

Replace the stacked card rows with the reusable DataTable: sortable columns, in-header
Channel/Tags filters, status chips + page controls in one row, wider layout. Tag toggle
is now optimistic (no full refetch). Sync column collapses to one 'fully synced' chip;
Actions column carries hide/unsubscribe + a backfill control (admin reset / per-user
full-history opt-in). Channel status filter persists across reloads.

frontend/src/components/Channels.tsx

@@ -11,7 +11,6 @@ import {
   History,
   Plus,
   RefreshCw,
-  Search,
   UserMinus,
   X,
 } from "lucide-react";
@@ -20,6 +19,7 @@ import { formatEta } from "../lib/format";
 import { notify } from "../lib/notifications";
 import Tooltip from "./Tooltip";
 import Avatar from "./Avatar";
+import DataTable, { type Column } from "./DataTable";
 import { useConfirm } from "./ConfirmProvider";
 
 export type ChannelStatusFilter = "all" | "needs_full" | "fully_synced" | "hidden";
@@ -33,12 +33,14 @@ const STATUS_FILTERS: { id: ChannelStatusFilter; labelKey: string }[] = [
 
 export default function Channels({
   canWrite,
+  isAdmin,
   onViewChannel,
   statusFilter,
   setStatusFilter,
   onOpenWizard,
 }: {
   canWrite: boolean;
+  isAdmin: boolean;
   onViewChannel: (id: string, name: string) => void;
   statusFilter: ChannelStatusFilter;
   setStatusFilter: (f: ChannelStatusFilter) => void;
@@ -64,7 +66,6 @@ export default function Channels({
   const channelsQuery = useQuery({ queryKey: ["channels"], queryFn: api.channels });
   const tagsQuery = useQuery({ queryKey: ["tags"], queryFn: api.tags });
   const statusQuery = useQuery({ queryKey: ["my-status"], queryFn: api.myStatus });
-  const [q, setQ] = useState("");
   const [newTag, setNewTag] = useState("");
 
   const invalidate = () => {
@@ -102,14 +103,26 @@ export default function Channels({
       .catch(() => qc.invalidateQueries({ queryKey: ["channels"] }));
   };
 
-  const attach = useMutation({
-    mutationFn: (v: { id: string; tagId: number }) => api.attachChannelTag(v.id, v.tagId),
-    onSuccess: () => qc.invalidateQueries({ queryKey: ["channels"] }),
-  });
-  const detach = useMutation({
-    mutationFn: (v: { id: string; tagId: number }) => api.detachChannelTag(v.id, v.tagId),
-    onSuccess: () => qc.invalidateQueries({ queryKey: ["channels"] }),
-  });
+  // Tagging is updated optimistically in place (no refetch of the whole channel list, which
+  // made the toggle feel ~2s slow); only revert by refetching if the server call fails.
+  const toggleTag = (id: string, tagId: number, hasTag: boolean) => {
+    qc.setQueryData<ManagedChannel[]>(["channels"], (old) =>
+      (old ?? []).map((ch) =>
+        ch.id === id
+          ? {
+              ...ch,
+              tag_ids: hasTag
+                ? ch.tag_ids.filter((x) => x !== tagId)
+                : [...ch.tag_ids, tagId],
+            }
+          : ch
+      )
+    );
+    const call = hasTag
+      ? api.detachChannelTag(id, tagId)
+      : api.attachChannelTag(id, tagId);
+    call.catch(() => qc.invalidateQueries({ queryKey: ["channels"] }));
+  };
   const syncSubs = useMutation({
     mutationFn: () => api.syncSubscriptions(),
     onSuccess: (r: { subscriptions?: number }) => {
@@ -138,6 +151,15 @@ export default function Channels({
     },
     onError: (e) => notifyActionError(e, "channels.notify.unsubscribeFailed"),
   });
+  const resetBackfill = useMutation({
+    mutationFn: (id: string) => api.resetChannelBackfill(id),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["channels"] });
+      qc.invalidateQueries({ queryKey: ["my-status"] });
+      notify({ level: "success", message: t("channels.notify.resetDone") });
+    },
+    onError: (e) => notifyActionError(e, "channels.notify.resetFailed"),
+  });
   const deepAll = useMutation({
     mutationFn: () => api.deepAll(true),
     onSuccess: (r: { updated?: number }) => {
@@ -151,62 +173,184 @@ export default function Channels({
     onError: (e) => notifyActionError(e, "channels.notify.fullHistoryFailed"),
   });
 
-  const channels = (channelsQuery.data ?? [])
-    .filter((c) => !q || (c.title ?? "").toLowerCase().includes(q.toLowerCase()))
-    .filter((c) =>
-      statusFilter === "needs_full"
-        ? !c.backfill_done
-        : statusFilter === "fully_synced"
-          ? c.backfill_done
-          : statusFilter === "hidden"
-            ? c.hidden
-            : true
-    );
+  // The Sync-status filter stays a top-level chip set (not a column filter) because the
+  // header's "go to full history" deep-link drives it; the DataTable then handles name
+  // search, tag filtering, sort and pagination over whatever the status chip leaves.
+  const channels = (channelsQuery.data ?? []).filter((c) =>
+    statusFilter === "needs_full"
+      ? !c.backfill_done
+      : statusFilter === "fully_synced"
+        ? c.backfill_done
+        : statusFilter === "hidden"
+          ? c.hidden
+          : true
+  );
   const s = statusQuery.data;
 
-  return (
-    <div className="p-4 max-w-4xl mx-auto">
-      {/* Per-user sync status */}
-      {s && (
-        <div className="flex flex-wrap items-center gap-x-5 gap-y-1 text-sm text-muted mb-4">
-          <Stat label={t("channels.stats.channels")} value={s.channels_total} hint={t("channels.stats.channelsHint")} />
-          <Stat
-            label={t("channels.stats.recentSynced")}
-            value={`${s.channels_recent_synced}/${s.channels_total}`}
-            hint={t("channels.stats.recentSyncedHint")}
-          />
-          <Stat
-            label={t("channels.stats.fullHistory")}
-            value={`${s.channels_deep_done}/${s.channels_deep_requested}`}
-            hint={t("channels.stats.fullHistoryHint")}
-          />
-          {s.deep_pending_count > 0 && (
-            <Stat
-              label={t("channels.stats.left")}
-              value={formatEta(s.deep_eta_seconds)}
-              hint={t("channels.stats.leftHint", { count: s.deep_pending_count })}
-            />
-          )}
-          <Stat label={t("channels.stats.myVideos")} value={s.my_videos.toLocaleString()} hint={t("channels.stats.myVideosHint")} />
-          <Stat
-            label={t("channels.stats.quotaLeft")}
-            value={s.quota_remaining_today.toLocaleString()}
-            hint={t("channels.stats.quotaLeftHint")}
-          />
-        </div>
-      )}
+  const onView = (c: ManagedChannel) =>
+    onViewChannel(c.id, c.title ?? t("channels.row.thisChannel"));
+  const onUnsub = async (c: ManagedChannel) => {
+    const ok = await confirm({
+      title: t("channels.row.unsubscribeOnYoutube"),
+      message: t("channels.confirmUnsubscribe", { name: c.title ?? c.id }),
+      confirmLabel: t("channels.row.unsubscribeOnYoutube"),
+      danger: true,
+    });
+    if (ok) unsubscribe.mutate(c.id);
+  };
+  const onReset = async (c: ManagedChannel) => {
+    const ok = await confirm({
+      title: t("channels.row.backfillThis"),
+      message: t("channels.confirmReset", { name: c.title ?? c.id }),
+      confirmLabel: t("channels.row.backfillThis"),
+    });
+    if (ok) resetBackfill.mutate(c.id);
+  };
 
-      {/* Toolbar */}
-      <div className="flex items-center gap-2 mb-4">
-        <div className="relative flex-1">
-          <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
-          <input
-            value={q}
-            onChange={(e) => setQ(e.target.value)}
-            placeholder={t("channels.filterPlaceholder")}
-            className="w-full bg-card border border-border rounded-full pl-9 pr-4 py-2 text-sm outline-none focus:border-accent"
-          />
+  const columns: Column<ManagedChannel>[] = [
+    {
+      key: "priority",
+      header: t("channels.cols.priority"),
+      align: "center",
+      width: "56px",
+      sortable: true,
+      hideInCard: true,
+      sortValue: (c) => c.priority,
+      render: (c) => <PriorityCell c={c} onPriority={(d) => bumpPriority(c.id, c.priority, d)} />,
+    },
+    {
+      key: "channel",
+      header: t("channels.cols.channel"),
+      sortable: true,
+      sortValue: (c) => (c.title ?? c.id).toLowerCase(),
+      filter: { kind: "text", get: (c) => `${c.title ?? ""} ${c.handle ?? ""}` },
+      cardPrimary: true,
+      render: (c) => <NameCell c={c} onView={() => onView(c)} />,
+    },
+    {
+      key: "stored",
+      header: t("channels.cols.stored"),
+      align: "right",
+      width: "84px",
+      sortable: true,
+      sortValue: (c) => c.stored_videos,
+      render: (c) => <span className="text-muted tabular-nums">{c.stored_videos.toLocaleString()}</span>,
+    },
+    {
+      key: "subs",
+      header: t("channels.cols.subs"),
+      align: "right",
+      width: "92px",
+      sortable: true,
+      sortValue: (c) => c.subscriber_count ?? -1,
+      render: (c) => (
+        <span className="text-muted tabular-nums">
+          {c.subscriber_count != null ? c.subscriber_count.toLocaleString() : "—"}
+        </span>
+      ),
+    },
+    {
+      key: "sync",
+      header: t("channels.cols.sync"),
+      width: "130px",
+      cardLabel: false,
+      render: (c) => <SyncCell c={c} />,
+    },
+    {
+      key: "tags",
+      header: t("channels.cols.tags"),
+      width: "360px",
+      cardLabel: false,
+      filter: {
+        kind: "multi",
+        options: userTags.map((tg) => ({ value: String(tg.id), label: tg.name })),
+        // OR semantics: show channels carrying any of the selected tags.
+        test: (c, values) => values.some((v) => c.tag_ids.includes(Number(v))),
+      },
+      render: (c) => (
+        <TagsCell
+          c={c}
+          userTags={userTags}
+          onToggleTag={(tagId) => toggleTag(c.id, tagId, c.tag_ids.includes(tagId))}
+        />
+      ),
+    },
+    {
+      key: "actions",
+      header: t("channels.cols.actions"),
+      align: "right",
+      width: "104px",
+      cardLabel: false,
+      render: (c) => (
+        <ActionsCell
+          c={c}
+          isAdmin={isAdmin}
+          canWrite={canWrite}
+          onHide={() => patch.mutate({ id: c.id, body: { hidden: !c.hidden } })}
+          onDeep={() => patch.mutate({ id: c.id, body: { deep_requested: !c.deep_requested } })}
+          onReset={() => onReset(c)}
+          onUnsubscribe={() => onUnsub(c)}
+        />
+      ),
+    },
+  ];
+
+  // Status chips sit in the table's controls row (next to paging) — compact and close to
+  // where they act.
+  const statusChips = (
+    <div className="flex flex-wrap items-center gap-1.5">
+      {STATUS_FILTERS.map((f) => (
+        <button
+          key={f.id}
+          onClick={() => setStatusFilter(f.id)}
+          className={`text-xs px-2.5 py-1 rounded-full border transition ${
+            statusFilter === f.id
+              ? "bg-accent text-accent-fg border-accent"
+              : "bg-card border-border text-muted hover:border-accent"
+          }`}
+        >
+          {t(f.labelKey)}
+        </button>
+      ))}
+    </div>
+  );
+
+  return (
+    <div className="p-4 max-w-7xl mx-auto">
+      {/* Per-user sync status + catalog-wide actions on one row (search/tags filtering
+          now lives in the table headers). */}
+      <div className="flex items-start justify-between gap-4 flex-wrap mb-4">
+        <div className="flex flex-wrap items-center gap-x-5 gap-y-1 text-sm text-muted">
+          {s && (
+            <>
+              <Stat label={t("channels.stats.channels")} value={s.channels_total} hint={t("channels.stats.channelsHint")} />
+              <Stat
+                label={t("channels.stats.recentSynced")}
+                value={`${s.channels_recent_synced}/${s.channels_total}`}
+                hint={t("channels.stats.recentSyncedHint")}
+              />
+              <Stat
+                label={t("channels.stats.fullHistory")}
+                value={`${s.channels_deep_done}/${s.channels_deep_requested}`}
+                hint={t("channels.stats.fullHistoryHint")}
+              />
+              {s.deep_pending_count > 0 && (
+                <Stat
+                  label={t("channels.stats.left")}
+                  value={formatEta(s.deep_eta_seconds)}
+                  hint={t("channels.stats.leftHint", { count: s.deep_pending_count })}
+                />
+              )}
+              <Stat label={t("channels.stats.myVideos")} value={s.my_videos.toLocaleString()} hint={t("channels.stats.myVideosHint")} />
+              <Stat
+                label={t("channels.stats.quotaLeft")}
+                value={s.quota_remaining_today.toLocaleString()}
+                hint={t("channels.stats.quotaLeftHint")}
+              />
+            </>
+          )}
         </div>
+        <div className="flex items-center gap-2 shrink-0">
         <Tooltip
           side="bottom"
           hint={t("channels.syncSubscriptionsHint")}
@@ -233,23 +377,7 @@ export default function Channels({
             {t("channels.backfillEverything")}
           </button>
         </Tooltip>
-      </div>
-
-      {/* Status filter */}
-      <div className="flex flex-wrap items-center gap-1.5 mb-4">
-        {STATUS_FILTERS.map((f) => (
-          <button
-            key={f.id}
-            onClick={() => setStatusFilter(f.id)}
-            className={`text-xs px-2.5 py-1 rounded-full border transition ${
-              statusFilter === f.id
-                ? "bg-accent text-accent-fg border-accent"
-                : "bg-card border-border text-muted hover:border-accent"
-            }`}
-          >
-            {t(f.labelKey)}
-          </button>
-        ))}
+        </div>
       </div>
 
       <p className="text-xs text-muted mb-4 leading-relaxed">
@@ -300,42 +428,20 @@ export default function Channels({
         </form>
       </div>
 
-      {/* Channel list */}
+      {/* Channel table */}
       {channelsQuery.isLoading ? (
         <div className="text-muted py-8">{t("channels.loading")}</div>
-      ) : channels.length === 0 ? (
-        <div className="text-muted py-8">{t("channels.empty")}</div>
       ) : (
-        <div className="flex flex-col gap-1.5">
-          {channels.map((c) => (
-            <ChannelRow
-              key={c.id}
-              c={c}
-              userTags={userTags}
-              canWrite={canWrite}
-              onUnsubscribe={async () => {
-                const ok = await confirm({
-                  title: t("channels.row.unsubscribeOnYoutube"),
-                  message: t("channels.confirmUnsubscribe", { name: c.title ?? c.id }),
-                  confirmLabel: t("channels.row.unsubscribeOnYoutube"),
-                  danger: true,
-                });
-                if (ok) unsubscribe.mutate(c.id);
-              }}
-              onView={() => onViewChannel(c.id, c.title ?? t("channels.row.thisChannel"))}
-              onPriority={(d) => bumpPriority(c.id, c.priority, d)}
-              onHide={() => patch.mutate({ id: c.id, body: { hidden: !c.hidden } })}
-              onDeep={() =>
-                patch.mutate({ id: c.id, body: { deep_requested: !c.deep_requested } })
-              }
-              onToggleTag={(tagId) =>
-                c.tag_ids.includes(tagId)
-                  ? detach.mutate({ id: c.id, tagId })
-                  : attach.mutate({ id: c.id, tagId })
-              }
-            />
-          ))}
-        </div>
+        <DataTable
+          rows={channels}
+          columns={columns}
+          rowKey={(c) => c.id}
+          persistKey="siftlode.channelsTable"
+          controlsPosition="top"
+          controlsLeading={statusChips}
+          rowClassName={(c) => (c.hidden ? "opacity-60" : "")}
+          emptyText={t("channels.empty")}
+        />
       )}
     </div>
   );
@@ -374,153 +480,180 @@ function SyncBadge({ ok, label, hint }: { ok: boolean; label: string; hint?: str
   );
 }
 
-function ChannelRow({
-  c,
-  userTags,
-  canWrite,
-  onUnsubscribe,
-  onView,
-  onPriority,
-  onHide,
-  onDeep,
-  onToggleTag,
-}: {
-  c: ManagedChannel;
-  userTags: Tag[];
-  canWrite: boolean;
-  onUnsubscribe: () => void;
-  onView: () => void;
-  onPriority: (delta: number) => void;
-  onHide: () => void;
-  onDeep: () => void;
-  onToggleTag: (tagId: number) => void;
-}) {
+function PriorityCell({ c, onPriority }: { c: ManagedChannel; onPriority: (delta: number) => void }) {
+  const { t } = useTranslation();
+  return (
+    <Tooltip hint={t("channels.row.priorityHint")}>
+      <div className="inline-flex flex-col items-center cursor-help">
+        <button onClick={() => onPriority(1)} className="text-muted hover:text-accent" aria-label={t("channels.row.raisePriority")}>
+          <ArrowUp className="w-3.5 h-3.5" />
+        </button>
+        <span className="text-xs text-muted tabular-nums">{c.priority}</span>
+        <button onClick={() => onPriority(-1)} className="text-muted hover:text-accent" aria-label={t("channels.row.lowerPriority")}>
+          <ArrowDown className="w-3.5 h-3.5" />
+        </button>
+      </div>
+    </Tooltip>
+  );
+}
+
+function NameCell({ c, onView }: { c: ManagedChannel; onView: () => void }) {
   const { t } = useTranslation();
   const ytUrl = c.handle
     ? `https://www.youtube.com/@${c.handle.replace(/^@/, "")}`
     : `https://www.youtube.com/channel/${c.id}`;
   return (
-    <div
-      className={`glass-card glass-hover flex items-center gap-3 p-2.5 rounded-xl transition ${
-        c.hidden ? "opacity-60" : ""
-      }`}
-    >
-      <Tooltip hint={t("channels.row.priorityHint")}>
-        <div className="flex flex-col items-center cursor-help">
-          <button onClick={() => onPriority(1)} className="text-muted hover:text-accent" aria-label={t("channels.row.raisePriority")}>
-            <ArrowUp className="w-3.5 h-3.5" />
-          </button>
-          <span className="text-xs text-muted tabular-nums">{c.priority}</span>
-          <button onClick={() => onPriority(-1)} className="text-muted hover:text-accent" aria-label={t("channels.row.lowerPriority")}>
-            <ArrowDown className="w-3.5 h-3.5" />
-          </button>
-        </div>
-      </Tooltip>
-
-      <Avatar
-        src={c.thumbnail_url}
-        fallback={c.title ?? ""}
-        className="w-10 h-10 rounded-full shrink-0"
-      />
-
-      <div className="min-w-0 flex-1">
-        <div className="flex items-center gap-1 max-w-full">
-          <button
-            onClick={onView}
-            onAuxClick={(e) => {
-              // Middle-click opens the channel's YouTube page in a new tab; left-click
-              // keeps opening the in-app channel detail.
-              if (e.button === 1) {
-                e.preventDefault();
-                window.open(ytUrl, "_blank", "noopener,noreferrer");
-              }
-            }}
-            onMouseDown={(e) => {
-              if (e.button === 1) e.preventDefault(); // suppress middle-click autoscroll
-            }}
-            className="text-sm font-semibold truncate hover:text-accent text-left min-w-0"
-          >
-            {c.title ?? c.id}
-          </button>
-          <Tooltip hint={t("channels.row.openOnYouTube")}>
-            <a
-              href={ytUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-muted hover:text-accent shrink-0"
-              aria-label={t("channels.row.openOnYouTube")}
-            >
-              <ExternalLink className="w-3.5 h-3.5" />
-            </a>
-          </Tooltip>
-        </div>
-        <div className="flex items-center gap-2 text-[11px] text-muted">
-          <span>{t("channels.row.stored", { count: c.stored_videos, formatted: c.stored_videos.toLocaleString() })}</span>
-          {c.subscriber_count != null && <span>· {t("channels.row.subs", { count: c.subscriber_count, formatted: c.subscriber_count.toLocaleString() })}</span>}
-        </div>
-        <div className="flex flex-wrap items-center gap-1 mt-1">
-          <SyncBadge
-            ok={c.recent_synced}
-            label={t("channels.row.recent")}
-            hint={c.recent_synced ? t("channels.row.recentSyncedHint") : t("channels.row.recentNotSyncedHint")}
-          />
-          {c.backfill_done ? (
-            <SyncBadge ok label={t("channels.row.full")} hint={t("channels.row.fullHint")} />
-          ) : c.deep_requested ? (
-            <Tooltip hint={t("channels.row.queuedRequestedHint")}>
-              <button
-                onClick={onDeep}
-                className="inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded-full border border-accent bg-accent text-accent-fg transition"
-              >
-                <History className="w-3 h-3" />
-                {t("channels.row.fullHistoryQueued")}
-              </button>
-            </Tooltip>
-          ) : c.deep_in_queue ? (
-            <Tooltip hint={t("channels.row.queuedByOtherHint")}>
-              <span className="inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded-full border border-accent/40 text-accent">
-                <History className="w-3 h-3" />
-                {t("channels.row.fullHistoryComing")}
-              </span>
-            </Tooltip>
-          ) : (
-            <Tooltip hint={t("channels.row.getFullHistoryHint")}>
-              <button
-                onClick={onDeep}
-                className="inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded-full border bg-card border-border text-muted hover:border-accent transition"
-              >
-                <History className="w-3 h-3" />
-                {t("channels.row.getFullHistory")}
-              </button>
-            </Tooltip>
-          )}
-          {userTags.map((t) => {
-            const on = c.tag_ids.includes(t.id);
-            return (
-              <button
-                key={t.id}
-                onClick={() => onToggleTag(t.id)}
-                className={`text-[10px] px-1.5 py-0.5 rounded-full border transition ${
-                  on
-                    ? "bg-accent text-accent-fg border-accent"
-                    : "bg-card border-border text-muted hover:border-accent"
-                }`}
-              >
-                {t.name}
-              </button>
-            );
-          })}
-        </div>
-      </div>
-
-      <Tooltip
-        hint={c.hidden ? t("channels.row.hiddenHint") : t("channels.row.hideHint")}
+    <div className="flex items-center gap-2 min-w-0">
+      <Avatar src={c.thumbnail_url} fallback={c.title ?? ""} className="w-8 h-8 rounded-full shrink-0" />
+      <button
+        onClick={onView}
+        onAuxClick={(e) => {
+          // Middle-click opens the channel's YouTube page in a new tab; left-click
+          // keeps opening the in-app channel detail.
+          if (e.button === 1) {
+            e.preventDefault();
+            window.open(ytUrl, "_blank", "noopener,noreferrer");
+          }
+        }}
+        onMouseDown={(e) => {
+          if (e.button === 1) e.preventDefault(); // suppress middle-click autoscroll
+        }}
+        className="text-sm font-medium truncate hover:text-accent text-left min-w-0"
       >
+        {c.title ?? c.id}
+      </button>
+      <Tooltip hint={t("channels.row.openOnYouTube")}>
+        <a
+          href={ytUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-muted hover:text-accent shrink-0"
+          aria-label={t("channels.row.openOnYouTube")}
+        >
+          <ExternalLink className="w-3.5 h-3.5" />
+        </a>
+      </Tooltip>
+    </div>
+  );
+}
+
+// Status only — the backfill *action* lives in the Actions column. When both recent and
+// full history are in, collapse to a single "fully synced" chip; otherwise show what's
+// present plus the missing/queued state.
+function SyncCell({ c }: { c: ManagedChannel }) {
+  const { t } = useTranslation();
+  if (c.recent_synced && c.backfill_done) {
+    return <SyncBadge ok label={t("channels.row.fullySynced")} hint={t("channels.row.fullySyncedHint")} />;
+  }
+  return (
+    <div className="flex flex-wrap items-center gap-1">
+      <SyncBadge
+        ok={c.recent_synced}
+        label={t("channels.row.recent")}
+        hint={c.recent_synced ? t("channels.row.recentSyncedHint") : t("channels.row.recentNotSyncedHint")}
+      />
+      {c.backfill_done ? (
+        <SyncBadge ok label={t("channels.row.full")} hint={t("channels.row.fullHint")} />
+      ) : c.deep_requested ? (
+        <SyncBadge ok={false} label={t("channels.row.fullHistoryQueued")} hint={t("channels.row.queuedRequestedHint")} />
+      ) : c.deep_in_queue ? (
+        <SyncBadge ok={false} label={t("channels.row.fullHistoryComing")} hint={t("channels.row.queuedByOtherHint")} />
+      ) : (
+        <SyncBadge ok={false} label={t("channels.row.full")} hint={t("channels.row.fullNotFetchedHint")} />
+      )}
+    </div>
+  );
+}
+
+function TagsCell({
+  c,
+  userTags,
+  onToggleTag,
+}: {
+  c: ManagedChannel;
+  userTags: Tag[];
+  onToggleTag: (tagId: number) => void;
+}) {
+  if (userTags.length === 0) return null;
+  return (
+    <div className="flex flex-wrap items-center gap-1">
+      {userTags.map((tg) => {
+        const on = c.tag_ids.includes(tg.id);
+        return (
+          <button
+            key={tg.id}
+            onClick={() => onToggleTag(tg.id)}
+            className={`text-[10px] px-1.5 py-0.5 rounded-full border transition ${
+              on
+                ? "bg-accent text-accent-fg border-accent"
+                : "bg-card border-border text-muted hover:border-accent"
+            }`}
+          >
+            {tg.name}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function ActionsCell({
+  c,
+  isAdmin,
+  canWrite,
+  onHide,
+  onDeep,
+  onReset,
+  onUnsubscribe,
+}: {
+  c: ManagedChannel;
+  isAdmin: boolean;
+  canWrite: boolean;
+  onHide: () => void;
+  onDeep: () => void;
+  onReset: () => void;
+  onUnsubscribe: () => void;
+}) {
+  const { t } = useTranslation();
+  // Admins get a "reset" trigger that re-fetches the channel from scratch regardless of
+  // state — always actionable. Regular users get the per-user "request full history" opt-in,
+  // which only applies until the back-catalog is in (or already coming for everyone).
+  const done = c.backfill_done;
+  const requested = !done && c.deep_requested;
+  const optInActionable = !done && !c.deep_in_queue;
+  const backfillHint = isAdmin
+    ? t("channels.row.resetHint")
+    : c.deep_in_queue
+      ? t("channels.row.queuedByOtherHint")
+      : requested
+        ? t("channels.row.queuedRequestedHint")
+        : done
+          ? t("channels.row.fullHint")
+          : t("channels.row.backfillThisHint");
+  const enabled = isAdmin || optInActionable;
+  return (
+    <div className="inline-flex items-center gap-2">
+      <Tooltip hint={backfillHint}>
+        <button
+          onClick={!enabled ? undefined : isAdmin ? onReset : onDeep}
+          disabled={!enabled}
+          className={`shrink-0 transition ${
+            requested
+              ? "text-accent"
+              : enabled
+                ? "text-muted hover:text-fg"
+                : "text-muted/40 cursor-default"
+          }`}
+          aria-label={isAdmin ? t("channels.row.resetBackfill") : t("channels.row.backfillThis")}
+        >
+          <History className="w-4 h-4" />
+        </button>
+      </Tooltip>
+      <Tooltip hint={c.hidden ? t("channels.row.hiddenHint") : t("channels.row.hideHint")}>
         <button onClick={onHide} className="text-muted hover:text-fg shrink-0" aria-label={c.hidden ? t("channels.row.unhide") : t("channels.row.hideFromFeed")}>
           {c.hidden ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
         </button>
       </Tooltip>
-
       {canWrite && (
         <Tooltip hint={t("channels.row.unsubscribeHint")}>
           <button