refactor(managers): tidy channel header + column filters + move Actions (E4)

- Drop the intro blurb (+ its orphan channels.intro i18n key and Trans import) - Header is now two tight rows: tabs + stats (right), your-tags + sync/backfill (right), leaving room on the tab row for future tabs - Add a funnel filter on the Prio / Channel / Sync / Tags columns (client-side, like the discovery table's Channel filter) - Move the Actions column to 2nd position (after Prio, before Channel), left-aligned
2026-07-19 18:24:25 +02:00
parent 83b60df112
commit 669dc3f2a6
3 changed files with 110 additions and 102 deletions
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { Trans, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
  ArrowDown,
@@ -248,6 +248,11 @@ export default function Channels() {
    if (ok) resetBackfill.mutate({ id: c.id, name: c.title ?? c.id });
  };

+  // Distinct priority levels present in the catalog → the priority column's filter options.
+  const prioOptions = [...new Set((channelsQuery.data ?? []).map((c) => c.priority))]
+    .sort((a, b) => b - a)
+    .map((p) => ({ value: String(p), label: String(p) }));
+
  const columns: Column<ManagedChannel>[] = [
    {
      key: "priority",
@@ -257,13 +262,34 @@ export default function Channels() {
      sortable: true,
      hideInCard: true,
      sortValue: (c) => c.priority,
+      filter: { kind: "select", options: prioOptions, test: (c, v) => String(c.priority) === v },
      render: (c) => <PriorityCell c={c} onPriority={(d) => bumpPriority(c.id, c.priority, d)} />,
    },
+    {
+      key: "actions",
+      header: t("channels.cols.actions"),
+      align: "left",
+      nowrap: true,
+      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)}
+        />
+      ),
+    },
    {
      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) => (
        <ChannelLink
@@ -319,12 +345,25 @@ export default function Channels() {
      header: t("channels.cols.sync"),
      nowrap: true,
      cardLabel: false,
+      filter: {
+        kind: "select",
+        options: [
+          { value: "fully", label: t("channels.filters.fullySynced") },
+          { value: "needsFull", label: t("channels.filters.needsFull") },
+        ],
+        test: (c, v) => (v === "fully" ? c.recent_synced && c.backfill_done : v === "needsFull" ? !c.backfill_done : true),
+      },
      render: (c) => <SyncCell c={c} />,
    },
    {
      key: "tags",
      header: t("channels.cols.tags"),
      cardLabel: false,
+      filter: {
+        kind: "multi",
+        options: userTags.map((tg) => ({ value: String(tg.id), label: tg.name })),
+        test: (c, values) => values.some((v) => c.tag_ids.includes(Number(v))),
+      },
      render: (c) => (
        <TagsCell
          c={c}
@@ -334,25 +373,6 @@ export default function Channels() {
        />
      ),
    },
-    {
-      key: "actions",
-      header: t("channels.cols.actions"),
-      align: "right",
-      nowrap: true,
-      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
@@ -375,8 +395,69 @@ export default function Channels() {
    </div>
  );

+  // The catalog-wide stats ride on the right of the tab row (subscribed only), leaving room for
+  // future tabs on the left.
+  const statsBlock = (
+    <div className="flex flex-wrap items-center justify-end 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>
+  );
+
+  // Sync + backfill — now share the tags row (right side).
+  const actionButtons = (
+    <div className="flex items-center gap-2 shrink-0">
+      <Tooltip side="bottom" hint={t("channels.syncSubscriptionsHint")}>
+        <button
+          onClick={() => syncSubs.mutate()}
+          disabled={syncSubs.isPending}
+          className="glass-card glass-hover flex items-center gap-2 px-3 py-2 rounded-xl text-sm disabled:opacity-50 transition"
+        >
+          <RefreshCw className={`w-4 h-4 ${syncSubs.isPending ? "animate-spin" : ""}`} />
+          {t("channels.syncSubscriptions")}
+        </button>
+      </Tooltip>
+      <Tooltip side="bottom" hint={t("channels.backfillEverythingHint")}>
+        <button
+          onClick={() => deepAll.mutate()}
+          disabled={deepAll.isPending}
+          className="glass-card glass-hover flex items-center gap-2 px-3 py-2 rounded-xl text-sm disabled:opacity-50 transition"
+        >
+          <History className={`w-4 h-4 ${deepAll.isPending ? "animate-pulse" : ""}`} />
+          {t("channels.backfillEverything")}
+        </button>
+      </Tooltip>
+    </div>
+  );
+
  const tabs = (
-    <div className="px-4 pt-4 max-w-7xl mx-auto">
+    <div className="px-4 pt-4 max-w-7xl mx-auto flex items-center justify-between gap-4 flex-wrap">
      <div className="flex flex-wrap items-center gap-1.5">
        {(["subscribed", "discovery", "blocked"] as ChannelsView[]).map((v) => (
          <button
@@ -392,6 +473,7 @@ export default function Channels() {
          </button>
        ))}
      </div>
+      {view === "subscribed" && statsBlock}
    </div>
  );

@@ -403,85 +485,11 @@ export default function Channels() {
    <PageToolbar>
    {tabs}
    {view === "subscribed" && (
-    <div className="px-4 pt-3 pb-2 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")}
-        >
-          <button
-            onClick={() => syncSubs.mutate()}
-            disabled={syncSubs.isPending}
-            className="glass-card glass-hover flex items-center gap-2 px-3 py-2 rounded-xl text-sm disabled:opacity-50 transition"
-          >
-            <RefreshCw className={`w-4 h-4 ${syncSubs.isPending ? "animate-spin" : ""}`} />
-            {t("channels.syncSubscriptions")}
-          </button>
-        </Tooltip>
-        <Tooltip
-          side="bottom"
-          hint={t("channels.backfillEverythingHint")}
-        >
-          <button
-            onClick={() => deepAll.mutate()}
-            disabled={deepAll.isPending}
-            className="glass-card glass-hover flex items-center gap-2 px-3 py-2 rounded-xl text-sm disabled:opacity-50 transition"
-          >
-            <History className={`w-4 h-4 ${deepAll.isPending ? "animate-pulse" : ""}`} />
-            {t("channels.backfillEverything")}
-          </button>
-        </Tooltip>
-        </div>
-      </div>
-
-      <p className="text-xs text-muted mb-4 leading-relaxed">
-        <Trans
-          i18nKey="channels.intro"
-          components={[
-            <b className="text-fg/80" />,
-            <b className="text-fg/80" />,
-            <b className="text-fg/80" />,
-          ]}
-        />
-      </p>
-
-      {/* The channel-name search now lives in the shared top SearchBar (driven via props). */}
-
-      {/* Your tags — click a chip to filter the table by it (add/rename/delete live in the manager). */}
-      <div className="flex flex-wrap items-center gap-1.5 mb-4">
+    <div className="px-4 pt-2 pb-2 max-w-7xl mx-auto">
+      {/* Your tags (left) share one row with the two catalog-wide actions (right); the channel-name
+          search lives in the shared top SearchBar, tag create/delete in the manager. */}
+      <div className="flex items-center justify-between gap-4 flex-wrap">
+      <div className="flex flex-wrap items-center gap-1.5">
        <Tooltip hint={t("channels.tags.yourTagsHint")}>
          <span className="text-xs uppercase tracking-wide text-muted mr-1 cursor-help underline decoration-dotted decoration-muted/40 underline-offset-4">
            {t("channels.tags.yourTags")}
@@ -522,6 +530,8 @@ export default function Channels() {
          {t("channels.tags.manage")}
        </button>
      </div>
+      {actionButtons}
+      </div>
    </div>
    )}
    </PageToolbar>
@@ -1,5 +1,4 @@
 {
-  "intro": "Set a channel's <0>priority</0> to push its videos up when you sort by “Channel priority”, attach your own <1>tags</1> to filter the feed, or <2>hide</2> a channel to drop it from the feed without unsubscribing.",
  "syncSubscriptions": "Read subscriptions from YouTube",
  "syncSubscriptionsHint": "Re-import your subscription list from YouTube — adds channels you've newly followed and drops ones you've unfollowed. The videos themselves keep syncing automatically in the background; this does not re-fetch them.",
  "backfillEverything": "Backfill everything",
@@ -1,5 +1,4 @@
 {
-  "intro": "Állíts be egy csatornának <0>prioritást</0>, hogy a videói előrébb kerüljenek, amikor „Csatorna prioritás” szerint rendezel, csatolj saját <1>címkéket</1> a hírfolyam szűréséhez, vagy <2>rejts el</2> egy csatornát, hogy leiratkozás nélkül kivedd a hírfolyamból.",
  "syncSubscriptions": "Feliratkozások beolvasása a YouTube-ról",
  "syncSubscriptionsHint": "Újraimportálja a feliratkozási listádat a YouTube-ról — hozzáadja az újonnan követett csatornákat, és eltávolítja azokat, amelyekről leiratkoztál. Maguk a videók a háttérben automatikusan tovább szinkronizálódnak; ez nem tölti le őket újra.",
  "backfillEverything": "Minden letöltése",