style(frontend): Prettier config + one-time repo-wide format pass

Prettier 3 (pinned), printWidth 100, double quotes — chosen to match the existing hand-formatting and minimise reflow. This commit is ONLY the mechanical format pass (`prettier --write`) plus the config/ignore/scripts, isolated so it never pollutes a feature diff. Verified behaviour-neutral: typecheck, eslint (0 errors), and vitest all green before and after. See .git-blame-ignore-revs — `git blame` skips this sha.
2026-07-21 02:26:40 +02:00
parent 04ecd8b3a7
commit e257e2aca0
101 changed files with 4388 additions and 2641 deletions
@@ -82,8 +82,14 @@ export default function Channels() {
    focusToken: focusChannelToken,
  } = useChannels();
  const layout = useChannelLayout();
-  const { setSearch, setStatusFilter, setView, setLayout, setSort, focusChannel: onFocusChannel } =
-    useChannelsActions();
+  const {
+    setSearch,
+    setStatusFilter,
+    setView,
+    setLayout,
+    setSort,
+    focusChannel: onFocusChannel,
+  } = useChannelsActions();
  const { openChannel: onViewChannel, setPage } = useNavigationActions();
  const feedFilters = useFeedFilters();
  const { setFilters: setFeedFilters } = useFeedFiltersActions();
@@ -144,7 +150,7 @@ export default function Channels() {
  const bumpPriority = (id: string, current: number, delta: number) => {
    const next = current + delta;
    qc.setQueryData<ManagedChannel[]>(["channels"], (old) =>
-      (old ?? []).map((ch) => (ch.id === id ? { ...ch, priority: next } : ch))
+      (old ?? []).map((ch) => (ch.id === id ? { ...ch, priority: next } : ch)),
    );
    api
      .updateChannel(id, { priority: next })
@@ -159,23 +165,22 @@ export default function Channels() {
        ch.id === id
          ? {
              ...ch,
-              tag_ids: hasTag
-                ? ch.tag_ids.filter((x) => x !== tagId)
-                : [...ch.tag_ids, tagId],
+              tag_ids: hasTag ? ch.tag_ids.filter((x) => x !== tagId) : [...ch.tag_ids, tagId],
            }
-          : ch
-      )
+          : ch,
+      ),
    );
-    const call = hasTag
-      ? api.detachChannelTag(id, tagId)
-      : api.attachChannelTag(id, tagId);
+    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 }) => {
      invalidate();
-      notify({ level: "success", message: t("channels.notify.synced", { count: r.subscriptions ?? 0 }) });
+      notify({
+        level: "success",
+        message: t("channels.notify.synced", { count: r.subscriptions ?? 0 }),
+      });
    },
    onError: (e) => notifyYouTubeActionError(e, t("channels.notify.syncFailed"), onOpenWizard),
  });
@@ -186,7 +191,8 @@ export default function Channels() {
      qc.invalidateQueries({ queryKey: ["my-status"] });
      notify({ level: "success", message: t("channels.notify.unsubscribed", { name: v.name }) });
    },
-    onError: (e) => notifyYouTubeActionError(e, t("channels.notify.unsubscribeFailed"), onOpenWizard),
+    onError: (e) =>
+      notifyYouTubeActionError(e, t("channels.notify.unsubscribeFailed"), onOpenWizard),
  });
  const resetBackfill = useMutation({
    mutationFn: (v: { id: string; name: string }) => api.resetChannelBackfill(v.id),
@@ -207,7 +213,8 @@ export default function Channels() {
        message: t("channels.notify.fullHistoryRequested", { count: r.updated ?? 0 }),
      });
    },
-    onError: (e) => notifyYouTubeActionError(e, t("channels.notify.fullHistoryFailed"), onOpenWizard),
+    onError: (e) =>
+      notifyYouTubeActionError(e, t("channels.notify.fullHistoryFailed"), onOpenWizard),
  });

  // Channel-name search (from the shared top SearchBar, via props) + tag-chip filtering, applied
@@ -237,7 +244,7 @@ export default function Channels() {
        ? c.backfill_done
        : statusFilter === "hidden"
          ? c.hidden
-          : true
+          : true,
  );
  const q = search.trim().toLowerCase();
  const visibleChannels = channels.filter((c) => {
@@ -338,7 +345,9 @@ export default function Channels() {
      nowrap: true,
      sortable: true,
      sortValue: (c) => c.stored_videos,
-      render: (c) => <span className="text-muted tabular-nums">{c.stored_videos.toLocaleString()}</span>,
+      render: (c) => (
+        <span className="text-muted tabular-nums">{c.stored_videos.toLocaleString()}</span>
+      ),
    },
    subsColumn<ManagedChannel>(t),
    {
@@ -356,7 +365,11 @@ export default function Channels() {
      nowrap: true,
      sortable: true,
      sortValue: (c) => c.total_duration_seconds,
-      render: (c) => <span className="text-muted tabular-nums">{formatTotalHours(c.total_duration_seconds)}</span>,
+      render: (c) => (
+        <span className="text-muted tabular-nums">
+          {formatTotalHours(c.total_duration_seconds)}
+        </span>
+      ),
    },
    {
      key: "types",
@@ -381,7 +394,12 @@ export default function Channels() {
          { 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),
+        test: (c, v) =>
+          v === "fully"
+            ? c.recent_synced && c.backfill_done
+            : v === "needsFull"
+              ? !c.backfill_done
+              : true,
      },
      render: (c) => <SyncCell c={c} />,
    },
@@ -431,7 +449,11 @@ export default function Channels() {
    <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.channels")}
+            value={s.channels_total}
+            hint={t("channels.stats.channelsHint")}
+          />
          <Stat
            label={t("channels.stats.recentSynced")}
            value={`${s.channels_recent_synced}/${s.channels_total}`}
@@ -449,7 +471,11 @@ export default function Channels() {
              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.myVideos")}
+            value={s.my_videos.toLocaleString()}
+            hint={t("channels.stats.myVideosHint")}
+          />
          <Stat
            label={t("channels.stats.quotaLeft")}
            value={s.quota_remaining_today.toLocaleString()}
@@ -522,11 +548,11 @@ export default function Channels() {
  // too would copy+sort the whole ~300-row array on every render for a result nothing reads.
  const isCards = layout === "cards";
  const sortedChannels = isCards ? sortRows(visibleChannels, columns, sort) : visibleChannels;
-  const { paged: pagedCards, pagerProps, resetPage } = useCardPager(
-    sortedChannels,
-    LS.channelCardSize,
-    isCards,
-  );
+  const {
+    paged: pagedCards,
+    pagerProps,
+    resetPage,
+  } = useCardPager(sortedChannels, LS.channelCardSize, isCards);
  // Changing what you're looking at starts over at the first page, the way DataTable resets its own
  // page on a filter/sort change. Deliberately NOT keyed on the row count: the ["channels"] query
  // refetches on window focus and after every sync, so a catalogue that merely gained a channel would
@@ -564,169 +590,161 @@ export default function Channels() {

  return (
    <>
-    {/* The tab bar is always fixed chrome (it portals into the shell's fixed band, so it never
+      {/* The tab bar is always fixed chrome (it portals into the shell's fixed band, so it never
        scrolls and doesn't jump between tabs). On Subscriptions the stats/description/tags ride
        with it, and the status-chip + pager row lands just below (DataTable's controlsInBand). */}
-    <PageToolbar>
-    {tabs}
-    {view === "subscribed" && (
-    <div className="px-4 pt-2 pb-2 max-w-[96rem] mx-auto">
-      {/* Your tags (left) share one row with the two catalog-wide actions (right); the channel-name
+      <PageToolbar>
+        {tabs}
+        {view === "subscribed" && (
+          <div className="px-4 pt-2 pb-2 max-w-[96rem] 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")}
-          </span>
-        </Tooltip>
-        {userTags.map((tg) => {
-          const active = tagFilter.includes(tg.id);
-          return (
-            <button
-              key={tg.id}
-              onClick={() =>
-                setTagFilter((f) => (active ? f.filter((x) => x !== tg.id) : [...f, tg.id]))
-              }
-              aria-pressed={active}
-              className={`text-xs px-2 py-1 rounded-full border transition ${
-                active
-                  ? "bg-accent text-accent-fg border-accent"
-                  : "bg-card border-border text-muted hover:text-fg hover:border-accent"
-              }`}
-            >
-              {tg.name}
-            </button>
-          );
-        })}
-        {tagFilter.length > 0 && (
-          <button
-            onClick={() => setTagFilter([])}
-            className="text-xs px-2 py-1 text-muted hover:text-accent transition"
-          >
-            {t("datatable.clear")}
-          </button>
-        )}
-        <button
-          onClick={() => setTagManagerOpen(true)}
-          className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full border border-dashed border-border text-muted hover:text-accent hover:border-accent transition"
-        >
-          <Pencil className="w-3 h-3" />
-          {t("channels.tags.manage")}
-        </button>
-      </div>
-      {actionButtons}
-      </div>
-    </div>
-    )}
-    {/* In table mode the status chips + pager ride in DataTable's own in-band controls row. The card
-        layout has no such row, so surface the same status chips (left) and its pager (right) here. */}
-    {view === "subscribed" && layout === "cards" && (
-      <div className="px-4 pb-2 max-w-[96rem] mx-auto flex items-center justify-between gap-3 flex-wrap">
-        {statusChips}
-        {cardPager}
-      </div>
-    )}
-    </PageToolbar>
-    {tagManagerOpen && (
-      <TagManager onClose={() => setTagManagerOpen(false)} onFocusChannel={onFocusChannel} />
-    )}
-
-    {view === "discovery" ? (
-      <ChannelDiscovery
-        canWrite={canWrite}
-        search={search}
-        onOpenWizard={onOpenWizard}
-        onViewChannel={onViewChannel}
-      />
-    ) : view === "blocked" ? (
-      /* Blocked channels — videos from these are hidden everywhere and dropped from live search. */
-      <div className="px-4 pb-4 pt-3 max-w-[96rem] mx-auto">
-        {(blockedQuery.data?.length ?? 0) === 0 ? (
-          <p className="text-sm text-muted py-8">{t("channels.blocked.empty")}</p>
-        ) : (
-          <>
-            <div className="flex items-center gap-2 mb-3">
-              <Ban className="w-4 h-4 text-muted" />
-              <span className="text-xs uppercase tracking-wide text-muted">
-                {t("channels.blocked.title")}
-              </span>
-            </div>
-            <div className="flex flex-wrap gap-1.5">
-              {blockedQuery.data!.map((c) => (
-                <span
-                  key={c.id}
-                  className="inline-flex items-center gap-1.5 text-xs pl-2.5 pr-1 py-1 rounded-full bg-card border border-border"
-                >
-                  {c.title ?? c.id}
+            <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")}
+                  </span>
+                </Tooltip>
+                {userTags.map((tg) => {
+                  const active = tagFilter.includes(tg.id);
+                  return (
+                    <button
+                      key={tg.id}
+                      onClick={() =>
+                        setTagFilter((f) => (active ? f.filter((x) => x !== tg.id) : [...f, tg.id]))
+                      }
+                      aria-pressed={active}
+                      className={`text-xs px-2 py-1 rounded-full border transition ${
+                        active
+                          ? "bg-accent text-accent-fg border-accent"
+                          : "bg-card border-border text-muted hover:text-fg hover:border-accent"
+                      }`}
+                    >
+                      {tg.name}
+                    </button>
+                  );
+                })}
+                {tagFilter.length > 0 && (
                  <button
-                    onClick={() => unblock.mutate(c.id)}
-                    title={t("channel.unblock")}
-                    aria-label={t("channel.unblock")}
-                    className="rounded-full p-0.5 text-muted hover:text-danger transition"
+                    onClick={() => setTagFilter([])}
+                    className="text-xs px-2 py-1 text-muted hover:text-accent transition"
                  >
-                    <X className="w-3 h-3" />
+                    {t("datatable.clear")}
                  </button>
-                </span>
-              ))}
+                )}
+                <button
+                  onClick={() => setTagManagerOpen(true)}
+                  className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full border border-dashed border-border text-muted hover:text-accent hover:border-accent transition"
+                >
+                  <Pencil className="w-3 h-3" />
+                  {t("channels.tags.manage")}
+                </button>
+              </div>
+              {actionButtons}
            </div>
-            <p className="text-[11px] text-muted mt-2">{t("channels.blocked.hint")}</p>
-          </>
+          </div>
        )}
-      </div>
-    ) : (
-      /* No top padding: the sticky header sits flush at the scroller top so it doesn't shift when
+        {/* In table mode the status chips + pager ride in DataTable's own in-band controls row. The card
+        layout has no such row, so surface the same status chips (left) and its pager (right) here. */}
+        {view === "subscribed" && layout === "cards" && (
+          <div className="px-4 pb-2 max-w-[96rem] mx-auto flex items-center justify-between gap-3 flex-wrap">
+            {statusChips}
+            {cardPager}
+          </div>
+        )}
+      </PageToolbar>
+      {tagManagerOpen && (
+        <TagManager onClose={() => setTagManagerOpen(false)} onFocusChannel={onFocusChannel} />
+      )}
+
+      {view === "discovery" ? (
+        <ChannelDiscovery
+          canWrite={canWrite}
+          search={search}
+          onOpenWizard={onOpenWizard}
+          onViewChannel={onViewChannel}
+        />
+      ) : view === "blocked" ? (
+        /* Blocked channels — videos from these are hidden everywhere and dropped from live search. */
+        <div className="px-4 pb-4 pt-3 max-w-[96rem] mx-auto">
+          {(blockedQuery.data?.length ?? 0) === 0 ? (
+            <p className="text-sm text-muted py-8">{t("channels.blocked.empty")}</p>
+          ) : (
+            <>
+              <div className="flex items-center gap-2 mb-3">
+                <Ban className="w-4 h-4 text-muted" />
+                <span className="text-xs uppercase tracking-wide text-muted">
+                  {t("channels.blocked.title")}
+                </span>
+              </div>
+              <div className="flex flex-wrap gap-1.5">
+                {blockedQuery.data!.map((c) => (
+                  <span
+                    key={c.id}
+                    className="inline-flex items-center gap-1.5 text-xs pl-2.5 pr-1 py-1 rounded-full bg-card border border-border"
+                  >
+                    {c.title ?? c.id}
+                    <button
+                      onClick={() => unblock.mutate(c.id)}
+                      title={t("channel.unblock")}
+                      aria-label={t("channel.unblock")}
+                      className="rounded-full p-0.5 text-muted hover:text-danger transition"
+                    >
+                      <X className="w-3 h-3" />
+                    </button>
+                  </span>
+                ))}
+              </div>
+              <p className="text-[11px] text-muted mt-2">{t("channels.blocked.hint")}</p>
+            </>
+          )}
+        </div>
+      ) : (
+        /* No top padding: the sticky header sits flush at the scroller top so it doesn't shift when
         `position: sticky` engages on the first scroll (the band's controls row above gives the
         visual gap). */
-      <div className="px-4 pb-4 max-w-[96rem] mx-auto">
-        {/* Channel table — only the rows scroll; the header row is sticky, and the controls row
+        <div className="px-4 pb-4 max-w-[96rem] mx-auto">
+          {/* Channel table — only the rows scroll; the header row is sticky, and the controls row
            (status chips + pager) rides in the fixed band right above it (controlsInBand). The
            card layout swaps the table for a virtualized grid over the same rows (its pager and
            status chips ride in the fixed band above instead). */}
-        {channelsQuery.isLoading ? (
-          <div className="text-muted py-8">{t("channels.loading")}</div>
-        ) : layout === "table" ? (
-          <DataTable
-            rows={visibleChannels}
-            columns={columns}
-            rowKey={(c) => c.id}
-            persistKey={accountKey(LS.channelsTable) ?? undefined}
-            controlsPosition="both"
-            controlsLeading={statusChips}
-            controlsInBand
-            controlsBandClassName="px-4 max-w-[96rem] mx-auto"
-            sort={sort}
-            onSortChange={setSort}
-            rowClassName={(c) => (c.hidden ? "opacity-60" : "")}
-            emptyText={t("channels.empty")}
-          />
-        ) : (
-          <ChannelLayoutGrid
-            rows={pagedCards}
-            columns={columns}
-            rowKey={(c) => c.id}
-            leadKey="priority"
-            aboutKey="about"
-            actionsKey="actions"
-            rowClassName={(c) => (c.hidden ? "opacity-60" : "")}
-            emptyText={t("channels.empty")}
-          />
-        )}
-      </div>
-    )}
+          {channelsQuery.isLoading ? (
+            <div className="text-muted py-8">{t("channels.loading")}</div>
+          ) : layout === "table" ? (
+            <DataTable
+              rows={visibleChannels}
+              columns={columns}
+              rowKey={(c) => c.id}
+              persistKey={accountKey(LS.channelsTable) ?? undefined}
+              controlsPosition="both"
+              controlsLeading={statusChips}
+              controlsInBand
+              controlsBandClassName="px-4 max-w-[96rem] mx-auto"
+              sort={sort}
+              onSortChange={setSort}
+              rowClassName={(c) => (c.hidden ? "opacity-60" : "")}
+              emptyText={t("channels.empty")}
+            />
+          ) : (
+            <ChannelLayoutGrid
+              rows={pagedCards}
+              columns={columns}
+              rowKey={(c) => c.id}
+              leadKey="priority"
+              aboutKey="about"
+              actionsKey="actions"
+              rowClassName={(c) => (c.hidden ? "opacity-60" : "")}
+              emptyText={t("channels.empty")}
+            />
+          )}
+        </div>
+      )}
    </>
  );
 }

-function Stat({
-  label,
-  value,
-  hint,
-}: {
-  label: string;
-  value: string | number;
-  hint?: string;
-}) {
+function Stat({ label, value, hint }: { label: string; value: string | number; hint?: string }) {
  return (
    <Tooltip hint={hint ?? ""}>
      <span className={hint ? "cursor-help" : ""}>
@@ -751,16 +769,30 @@ function SyncBadge({ ok, label, hint }: { ok: boolean; label: string; hint?: str
  );
 }

-function PriorityCell({ c, onPriority }: { c: ManagedChannel; onPriority: (delta: 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")}>
+        <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")}>
+        <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>
@@ -768,30 +800,51 @@ function PriorityCell({ c, onPriority }: { c: ManagedChannel; onPriority: (delta
  );
 }

-
 // 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 (
+      <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")}
+        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")} />
+        <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.fullHistoryComing")}
+          hint={t("channels.row.queuedByOtherHint")}
+        />
      ) : (
-        <SyncBadge ok={false} label={t("channels.row.full")} hint={t("channels.row.fullNotFetchedHint")} />
+        <SyncBadge
+          ok={false}
+          label={t("channels.row.full")}
+          hint={t("channels.row.fullNotFetchedHint")}
+        />
      )}
    </div>
  );
@@ -814,7 +867,9 @@ function TagsCell({
  // `absolute` inside the cell, because in the CARD layout every VirtualGrid row carries a
  // `transform` — which makes it a stacking context and traps a z-indexed child, so the menu drew
  // UNDER the next card. Same hazard, same blessed fix as the players in E3.
-  const [coords, setCoords] = useState<{ left: number; top?: number; bottom?: number } | null>(null);
+  const [coords, setCoords] = useState<{ left: number; top?: number; bottom?: number } | null>(
+    null,
+  );
  const fade = useScrollFade();
  const ref = useRef<HTMLDivElement | null>(null);
  const popRef = useRef<HTMLDivElement | null>(null);
@@ -839,9 +894,7 @@ function TagsCell({
    const w = popRef.current?.offsetWidth ?? 0;
    const left =
      w && r.left + w > window.innerWidth - 8 ? Math.max(8, window.innerWidth - 8 - w) : r.left;
-    return flip
-      ? { left, bottom: window.innerHeight - r.top + 4 }
-      : { left, top: r.bottom + 4 };
+    return flip ? { left, bottom: window.innerHeight - r.top + 4 } : { left, top: r.bottom + 4 };
  }, []);

  const place = useCallback(() => {
@@ -939,33 +992,39 @@ function TagsCell({
      </button>
      {open && coords && (
        <Overlay>
-        <div
-          ref={setPopRef}
-          style={{ ...fade.style, position: "fixed", left: coords.left, top: coords.top, bottom: coords.bottom }}
-          className="glass-menu z-popover w-44 max-h-[264px] overflow-y-auto no-scrollbar rounded-xl p-1.5 animate-[popIn_0.16s_ease]"
-        >
-          {userTags.map((tg) => {
-            const on = c.tag_ids.includes(tg.id);
-            return (
-              <button
-                key={tg.id}
-                onClick={() => onToggleTag(tg.id)}
-                className={`w-full flex items-center gap-2 text-left text-xs px-2 py-1.5 rounded-md transition ${
-                  on ? "text-fg" : "text-muted hover:bg-card"
-                }`}
-              >
-                <span
-                  className={`w-3.5 h-3.5 rounded border flex items-center justify-center shrink-0 ${
-                    on ? "bg-accent border-accent text-accent-fg" : "border-border"
+          <div
+            ref={setPopRef}
+            style={{
+              ...fade.style,
+              position: "fixed",
+              left: coords.left,
+              top: coords.top,
+              bottom: coords.bottom,
+            }}
+            className="glass-menu z-popover w-44 max-h-[264px] overflow-y-auto no-scrollbar rounded-xl p-1.5 animate-[popIn_0.16s_ease]"
+          >
+            {userTags.map((tg) => {
+              const on = c.tag_ids.includes(tg.id);
+              return (
+                <button
+                  key={tg.id}
+                  onClick={() => onToggleTag(tg.id)}
+                  className={`w-full flex items-center gap-2 text-left text-xs px-2 py-1.5 rounded-md transition ${
+                    on ? "text-fg" : "text-muted hover:bg-card"
                  }`}
                >
-                  {on && <Check className="w-2.5 h-2.5" />}
-                </span>
-                {tg.name}
-              </button>
-            );
-          })}
-        </div>
+                  <span
+                    className={`w-3.5 h-3.5 rounded border flex items-center justify-center shrink-0 ${
+                      on ? "bg-accent border-accent text-accent-fg" : "border-border"
+                    }`}
+                  >
+                    {on && <Check className="w-2.5 h-2.5" />}
+                  </span>
+                  {tg.name}
+                </button>
+              );
+            })}
+          </div>
        </Overlay>
      )}
    </div>
@@ -1025,7 +1084,11 @@ function ActionsCell({
        </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")}>
+        <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>