From 83b60df112d7ac22dd6a3659c0cf7dcaf0b57381 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sun, 19 Jul 2026 15:45:09 +0200
Subject: [PATCH] feat(managers): bottom pager on the channel tables (E4 S1)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DataTable gains a working controlsPosition="both": the leading controls
(e.g. the status chips) stay ONLY at the top; the bottom row is pager-only
(no duplicated chips). The subscribed + discovery channel tables opt in, so
the 33-page list has a pager at the bottom too — no scroll back up.
---
 frontend/src/components/ChannelDiscovery.tsx |   2 +-
 frontend/src/components/Channels.tsx         |   2 +-
 frontend/src/components/DataTable.tsx        | 138 ++++++++++---------
 3 files changed, 78 insertions(+), 64 deletions(-)

diff --git a/frontend/src/components/ChannelDiscovery.tsx b/frontend/src/components/ChannelDiscovery.tsx
index 6539652..e3b0674 100644
--- a/frontend/src/components/ChannelDiscovery.tsx
+++ b/frontend/src/components/ChannelDiscovery.tsx
@@ -171,7 +171,7 @@ export default function ChannelDiscovery({
             columns={columns}
             rowKey={(c) => c.id}
             persistKey={accountKey(LS.channelDiscoveryTable) ?? undefined}
-            controlsPosition="top"
+            controlsPosition="both"
             controlsInBand
             controlsBandClassName="px-4 max-w-7xl mx-auto"
             emptyText={t("channels.discovery.empty")}
diff --git a/frontend/src/components/Channels.tsx b/frontend/src/components/Channels.tsx
index 93a69c4..bd5fdf1 100644
--- a/frontend/src/components/Channels.tsx
+++ b/frontend/src/components/Channels.tsx
@@ -586,7 +586,7 @@ export default function Channels() {
             columns={columns}
             rowKey={(c) => c.id}
             persistKey={accountKey(LS.channelsTable) ?? undefined}
-            controlsPosition="top"
+            controlsPosition="both"
             controlsLeading={statusChips}
             controlsInBand
             controlsBandClassName="px-4 max-w-7xl mx-auto"
diff --git a/frontend/src/components/DataTable.tsx b/frontend/src/components/DataTable.tsx
index a065a82..e914033 100644
--- a/frontend/src/components/DataTable.tsx
+++ b/frontend/src/components/DataTable.tsx
@@ -288,70 +288,83 @@ export default function DataTable<T>({
     );
   }
 
-  const controls =
-    controlsLeading != null || sorted.length > 0 ? (
-      <div className="flex items-center justify-between gap-3 my-3 text-sm flex-wrap">
-        <div className="flex items-center gap-3 flex-wrap">{controlsLeading}</div>
-        <div className="flex items-center gap-3 flex-wrap">
-          {totalPages > 1 && (
-            <div className="flex items-center gap-2">
-              <button
-                onClick={() => setPage((p) => Math.max(0, p - 1))}
-                disabled={safePage === 0}
-                className="glass-card glass-hover flex items-center gap-1 px-3 py-1.5 rounded-lg disabled:opacity-40 transition"
-              >
-                <ChevronLeft className="w-4 h-4" />
-                {t("datatable.pager.prev")}
-              </button>
-              <span className="text-muted flex items-center gap-1.5">
-                {t("datatable.pager.pageLabel")}
-                <input
-                  type="number"
-                  min={1}
-                  max={totalPages}
-                  value={pageInput}
-                  onChange={(e) => setPageInput(e.target.value)}
-                  onBlur={commitPageInput}
-                  onKeyDown={(e) => e.key === "Enter" && commitPageInput()}
-                  aria-label={t("datatable.pager.pageLabel")}
-                  className="w-14 bg-card border border-border rounded-md px-1.5 py-1 text-xs text-center tabular-nums outline-none focus:border-accent"
-                />
-                {t("datatable.pager.ofTotal", { total: totalPages })}
-              </span>
-              <button
-                onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
-                disabled={safePage >= totalPages - 1}
-                className="glass-card glass-hover flex items-center gap-1 px-3 py-1.5 rounded-lg disabled:opacity-40 transition"
-              >
-                {t("datatable.pager.next")}
-                <ChevronRight className="w-4 h-4" />
-              </button>
-            </div>
-          )}
-          {sorted.length > 0 && (
-            <label className="flex items-center gap-2 text-muted">
-              {t("datatable.rowsPerPage")}
-              <select
-                value={size}
-                onChange={(e) => {
-                  setSize(Number(e.target.value));
-                  setPage(0);
-                }}
-                className="bg-card border border-border rounded-md px-1.5 py-1 text-xs outline-none focus:border-accent"
-              >
-                {pageSizeOptions.map((n) => (
-                  <option key={n} value={n}>
-                    {n}
-                  </option>
-                ))}
-                <option value={0}>{t("datatable.all")}</option>
-              </select>
-            </label>
-          )}
-        </div>
+  // The pager + rows-per-page cluster on its own, so it can be rendered a second time at the bottom
+  // (controlsPosition "both") WITHOUT repeating the leading controls (e.g. the status chips) — those
+  // are header controls and belong only at the top.
+  const pagerNode =
+    totalPages > 1 || sorted.length > 0 ? (
+      <div className="flex items-center gap-3 flex-wrap">
+        {totalPages > 1 && (
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setPage((p) => Math.max(0, p - 1))}
+              disabled={safePage === 0}
+              className="glass-card glass-hover flex items-center gap-1 px-3 py-1.5 rounded-lg disabled:opacity-40 transition"
+            >
+              <ChevronLeft className="w-4 h-4" />
+              {t("datatable.pager.prev")}
+            </button>
+            <span className="text-muted flex items-center gap-1.5">
+              {t("datatable.pager.pageLabel")}
+              <input
+                type="number"
+                min={1}
+                max={totalPages}
+                value={pageInput}
+                onChange={(e) => setPageInput(e.target.value)}
+                onBlur={commitPageInput}
+                onKeyDown={(e) => e.key === "Enter" && commitPageInput()}
+                aria-label={t("datatable.pager.pageLabel")}
+                className="w-14 bg-card border border-border rounded-md px-1.5 py-1 text-xs text-center tabular-nums outline-none focus:border-accent"
+              />
+              {t("datatable.pager.ofTotal", { total: totalPages })}
+            </span>
+            <button
+              onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
+              disabled={safePage >= totalPages - 1}
+              className="glass-card glass-hover flex items-center gap-1 px-3 py-1.5 rounded-lg disabled:opacity-40 transition"
+            >
+              {t("datatable.pager.next")}
+              <ChevronRight className="w-4 h-4" />
+            </button>
+          </div>
+        )}
+        {sorted.length > 0 && (
+          <label className="flex items-center gap-2 text-muted">
+            {t("datatable.rowsPerPage")}
+            <select
+              value={size}
+              onChange={(e) => {
+                setSize(Number(e.target.value));
+                setPage(0);
+              }}
+              className="bg-card border border-border rounded-md px-1.5 py-1 text-xs outline-none focus:border-accent"
+            >
+              {pageSizeOptions.map((n) => (
+                <option key={n} value={n}>
+                  {n}
+                </option>
+              ))}
+              <option value={0}>{t("datatable.all")}</option>
+            </select>
+          </label>
+        )}
       </div>
     ) : null;
 
+  const controls =
+    controlsLeading != null || pagerNode ? (
+      <div className="flex items-center justify-between gap-3 my-3 text-sm flex-wrap">
+        <div className="flex items-center gap-3 flex-wrap">{controlsLeading}</div>
+        {pagerNode}
+      </div>
+    ) : null;
+
+  // Bottom row for "both": just the pager, right-aligned (the leading controls stay at the top).
+  const bottomControls = pagerNode ? (
+    <div className="flex items-center justify-end gap-3 my-3 text-sm flex-wrap">{pagerNode}</div>
+  ) : null;
+
   const topControls =
     controlsInBand && controls ? (
       <PageToolbar>
@@ -476,7 +489,8 @@ export default function DataTable<T>({
         <div className="text-muted py-8 text-center text-sm">{emptyText ?? t("datatable.empty")}</div>
       )}
 
-      {(controlsPosition === "bottom" || controlsPosition === "both") && controls}
+      {controlsPosition === "bottom" && controls}
+      {controlsPosition === "both" && bottomControls}
     </div>
   );
 }