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).
2026-08-15 03:27:15 +02:00
parent 003043a989
commit ca7e4b16a0
4 changed files with 108 additions and 33 deletions
@@ -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>
+    </>
+  );
+}