refactor(channels): ⋯ overflow ActionMenu + TAGS-as-trigger (R13 S3)

Declutter the channel-manager tags row:
- New reusable ActionMenu (⋯) on the AnchoredPopover platform — a compact
  overflow menu of one-shot actions with optional pending/disabled + spinner.
  The two big glass buttons (Read subscriptions, Backfill everything) move into
  it, freeing the row.
- The "YOUR TAGS" caption becomes a "✎ TAGS" trigger button that opens the tag
  editor directly, retiring the separate "Manage tags" button.

Adds i18n (channels.actionsLabel, channels.tags.label; HU+EN). ActionMenu is
built to be reused for other overflow menus later. Self-E2E'd: ⋯ opens the two
actions, ✎ TAGS opens the manager. gate green (tsc/eslint-0/prettier).

frontend/src/components/ActionMenu.tsx

@@ -0,0 +1,74 @@
+import { useState, type ReactNode } from "react";
+import { MoreHorizontal } from "lucide-react";
+import { PopoverItem, PopoverSurface, useAnchoredPopover } from "./AnchoredPopover";
+
+// A reusable "⋯ more actions" overflow menu: a compact trigger that opens a list of one-shot actions.
+// Built on the R8 AnchoredPopover platform (arrows/typeahead/Escape/anchor-flip), same as ViewSwitcher
+// and LanguageSwitcher. Use it to keep occasional actions out of a crowded toolbar. The items are
+// fire-and-close (`onSelect`); a `disabled` item (e.g. a mutation already in flight) is inert.
+
+export interface ActionMenuItem {
+  id: string;
+  label: string;
+  icon?: ReactNode; // an element (so a caller can swap in a spinning icon while pending)
+  onSelect: () => void;
+  disabled?: boolean;
+  title?: string; // optional native tooltip (carries a longer hint the label alone can't)
+}
+
+export default function ActionMenu({
+  items,
+  ariaLabel,
+  className,
+  trigger,
+}: {
+  items: readonly ActionMenuItem[];
+  /** Accessible name for the trigger (e.g. "Catalog actions"). */
+  ariaLabel: string;
+  /** Trigger className override; omit for the default glass ⋯ icon button. */
+  className?: string;
+  /** Custom trigger content; omit for the default ⋯ icon. */
+  trigger?: ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  const pop = useAnchoredPopover({ open, onOpenChange: setOpen, placement: "bottom-end" });
+  return (
+    <>
+      <button
+        ref={pop.refs.setReference}
+        {...pop.getReferenceProps()}
+        aria-label={ariaLabel}
+        title={ariaLabel}
+        className={
+          className ??
+          "glass-card glass-hover flex items-center justify-center rounded-xl p-2 text-sm transition"
+        }
+      >
+        {trigger ?? <MoreHorizontal className="h-5 w-5" aria-hidden="true" />}
+      </button>
+      <PopoverSurface
+        popover={pop}
+        ariaLabel={ariaLabel}
+        className="glass-menu min-w-52 rounded-xl p-1.5 animate-[popIn_0.16s_ease]"
+      >
+        {items.map((it) => (
+          <PopoverItem
+            key={it.id}
+            role="menuitem"
+            disabled={it.disabled}
+            label={it.label}
+            title={it.title}
+            onSelect={() => {
+              it.onSelect();
+              setOpen(false);
+            }}
+            className="flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left text-sm outline-hidden transition disabled:opacity-50"
+          >
+            {it.icon && <span className="shrink-0 text-muted">{it.icon}</span>}
+            <span className="flex-1 truncate">{it.label}</span>
+          </PopoverItem>
+        ))}
+      </PopoverSurface>
+    </>
+  );
+}

frontend/src/components/Channels.tsx

@@ -20,6 +20,7 @@ import { useChannelPriority } from "../lib/useChannelPriority";
 import ViewSwitcher, { type ViewOption } from "./ViewSwitcher";
 import ColumnSortControl from "./ColumnSortControl";
 import FilterChipGroup, { filterChipClass } from "./FilterChipGroup";
+import ActionMenu, { type ActionMenuItem } from "./ActionMenu";
 import Pager from "./Pager";
 import { CHANNEL_LAYOUTS, type ChannelLayout } from "../lib/channelLayout";
 import { sortRows } from "../lib/columnSort";
@@ -347,30 +348,28 @@ export default function Channels() {
     </div>
   );
 
-  // Sync + backfill — now share the tags row (right side).
+  // Catalog-wide, occasional actions — tucked into a shared ⋯ overflow menu so they stop crowding the
+  // tags row. Pending mutations keep the item visible but disabled, with a spinning icon.
+  const catalogActions: ActionMenuItem[] = [
+    {
+      id: "sync",
+      label: t("channels.syncSubscriptions"),
+      title: t("channels.syncSubscriptionsHint"),
+      icon: <RefreshCw className={`h-4 w-4 ${syncSubs.isPending ? "animate-spin" : ""}`} />,
+      onSelect: () => syncSubs.mutate(),
+      disabled: syncSubs.isPending,
+    },
+    {
+      id: "backfill",
+      label: t("channels.backfillEverything"),
+      title: t("channels.backfillEverythingHint"),
+      icon: <History className={`h-4 w-4 ${deepAll.isPending ? "animate-pulse" : ""}`} />,
+      onSelect: () => deepAll.mutate(),
+      disabled: deepAll.isPending,
+    },
+  ];
   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>
+    <ActionMenu ariaLabel={t("channels.actionsLabel")} items={catalogActions} />
   );
 
   // Table / cards density — shared by the subscribed + discovery tables (blocked is a chip list, no
@@ -465,10 +464,16 @@ export default function Channels() {
           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">
+                {/* The "TAGS" label IS the tags-editor trigger (pencil), replacing the separate
+                    "Manage tags" button; the tooltip explains what tags are + that it's clickable. */}
                 <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>
+                  <button
+                    onClick={() => setTagManagerOpen(true)}
+                    className="mr-1 inline-flex items-center gap-1.5 rounded-lg border border-border px-2 py-1 text-xs uppercase tracking-wide text-muted transition hover:border-accent hover:text-accent"
+                  >
+                    <Pencil className="h-3 w-3" />
+                    {t("channels.tags.label")}
+                  </button>
                 </Tooltip>
                 {userTags.map((tg) => (
                   <button
@@ -488,13 +493,6 @@ export default function Channels() {
                     {t("datatable.clear")}
                   </button>
                 )}
-                <button
-                  onClick={() => setTagManagerOpen(true)}
-                  className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-lg 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>

frontend/src/i18n/locales/en/channels.json

@@ -1,4 +1,5 @@
 {
+  "actionsLabel": "Catalog actions",
   "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",
@@ -45,6 +46,7 @@
     "fullySynced": "Fully synced"
   },
   "tags": {
+    "label": "Tags",
     "yourTags": "Your tags",
     "manage": "Manage tags",
     "yourTagsHint": "Your personal labels. Attach them to channels below, then filter the feed by tag from the sidebar. (Separate from the automatic language/topic tags.)",

frontend/src/i18n/locales/hu/channels.json

@@ -45,6 +45,7 @@
     "fullySynced": "Teljesen szinkronizálva"
   },
   "tags": {
+    "label": "Címkék",
     "yourTags": "Címkéid",
     "manage": "Címkék kezelése",
     "yourTagsHint": "Saját személyes címkéid. Csatold őket az alábbi csatornákhoz, majd szűrd a hírfolyamot címke szerint az oldalsávból. (Az automatikus nyelvi/téma címkéktől függetlenül.)",