+
+
+
+ ,
+ );
+ const blank = container.querySelector("main") ?? container.firstElementChild!;
+ await openMenu(() => fireEvent.contextMenu(blank, { clientX: 5, clientY: 5 }));
+ expect(screen.getByRole("menu", { hidden: true }).getAttribute("aria-label")).toBe(
+ "common.pageMenu",
+ );
+ expect(menuRows()).toEqual(["inbox.markAllRead"]);
+ });
+});
diff --git a/frontend/src/components/NotificationsPanel.tsx b/frontend/src/components/NotificationsPanel.tsx
index 96627807..b9e96322 100644
--- a/frontend/src/components/NotificationsPanel.tsx
+++ b/frontend/src/components/NotificationsPanel.tsx
@@ -41,6 +41,7 @@ import { Button } from "./ui/Button";
import { IconButton } from "./ui/IconButton";
import { LEVEL_STYLE } from "./ui/toastLevels";
import { PageToolbar } from "./ui/PageShell";
+import { PageMenu } from "./ui/PageMenu";
import { LoadingState, StateMessage } from "./ui/QueryState";
import { useNavigationActions } from "./navigationContext";
import { useChannelsActions } from "./channelsContext";
@@ -322,6 +323,14 @@ export default function NotificationsPanel() {
{/* The inbox band (B4): Mark all read in sight, Clear everything in its "…" (E28 C1), fixed
while the list scrolls. No title card: the nav rail and the tab title name the page, and the
shell's hidden h1 names it to a screen reader. */}
+ {/* The page's background menu (DESIGN "Background menu"): the band's own non-destructive
+ action — Clear everything stays behind its "…" and its confirm. */}
+ {hasAny && (
+ !("danger" in it && it.danger))}
+ />
+ )}
{hasAny && (
diff --git a/frontend/src/components/Playlists.dom.test.tsx b/frontend/src/components/Playlists.dom.test.tsx
index 3d58d980..ccde6e71 100644
--- a/frontend/src/components/Playlists.dom.test.tsx
+++ b/frontend/src/components/Playlists.dom.test.tsx
@@ -37,14 +37,16 @@ vi.mock("../lib/notifications", async (importOriginal) => ({
}));
vi.mock("./playlistsContext", () => ({ usePlaylists: () => ({ selectedId: h.selectedId }) }));
vi.mock("./confirmContext", () => ({ useConfirm: () => h.confirm }));
-// The list's own menu is usePlaylistActions' (pinned in its own test); here only its rename row,
-// which opens THIS page's title field.
+// The list's own menu is usePlaylistActions' (pinned in its own test); here its rename row, which
+// opens THIS page's title field, and its two destructive rows as that hook marks them (danger).
vi.mock("./usePlaylistActions", () => ({
usePlaylistActions: () => ({
remove: vi.fn(),
rename: vi.fn(),
items: (_pl: unknown, o: { onRename: () => void }) => [
{ id: "rename", label: "playlists.rename", onSelect: o.onRename },
+ { id: "revert", label: "playlists.revert", danger: true, onSelect: vi.fn() },
+ { id: "delete", label: "playlists.delete", danger: true, onSelect: vi.fn() },
],
}),
}));
@@ -67,6 +69,7 @@ vi.mock("./PlayerModal", async () => {
import Playlists from "./Playlists";
import { PageToolbarSlot } from "./ui/pageToolbarSlot";
+import { PageMenuSlot, type PageMenuOpener } from "./ui/pageMenuSlot";
import { api, HttpError, type Video } from "../lib/api";
import { qk } from "../lib/queryKeys";
import { patchCachedProgress } from "../lib/progressCache";
@@ -633,3 +636,46 @@ describe("Playlists · the header", () => {
expect(await screen.findByText("playlists.groupByChannel")).toBeTruthy();
});
});
+
+// DESIGN "Background menu": the page's blank area mirrors the band (Play all, the view controls) and
+// the list's own "…" — without its destructive rows, which stay one deliberate "…" away.
+describe("Playlists · the page's background menu", () => {
+ it("offers Play all, Group by and the list's menu, never Delete", async () => {
+ let open: PageMenuOpener | null = null;
+ vi.spyOn(api, "playlists").mockResolvedValue([list(1, [vid("A", 0), vid("B", 0)])] as never);
+ vi.spyOn(api, "playlist").mockImplementation(
+ async () => list(1, [vid("A", 0), vid("B", 0)]) as never,
+ );
+ qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+ qc.setQueryData(qk.me(), { id: 1, can_write: true, prefs: {}, preferences: {} });
+ render(
+
+ {
+ open = o;
+ return () => {
+ if (open === o) open = null;
+ };
+ }}
+ >
+
+ ,
+ );
+ await screen.findByRole("button", { name: "card.play — Video A" });
+ expect(open, "registered once a list is on screen").not.toBeNull();
+ act(() => open!(5, 5, document.body));
+ const rows = await waitFor(() => {
+ const r = screen
+ .getAllByRole("menu", { hidden: true })
+ .find((m) => m.getAttribute("aria-label") === "common.pageMenu");
+ expect(r).toBeTruthy();
+ return [...r!.querySelectorAll("[role^=menuitem]")].map((b) => b.textContent);
+ });
+ expect(rows).toEqual(
+ expect.arrayContaining(["playlists.playAll", "playlists.groupByChannel", "playlists.rename"]),
+ );
+ expect(rows).not.toContain("playlists.delete");
+ expect(rows).not.toContain("playlists.revert");
+ });
+});
diff --git a/frontend/src/components/Playlists.tsx b/frontend/src/components/Playlists.tsx
index fe74bd26..5698bbaa 100644
--- a/frontend/src/components/Playlists.tsx
+++ b/frontend/src/components/Playlists.tsx
@@ -35,6 +35,8 @@ import { type ActionMenuItem } from "./ui/ActionMenu";
import { useComfortPin, pinPlaylist, pinVideo } from "./comfortPin";
import { ContextMenu } from "./ui/ContextMenu";
import { useContextMenu } from "./ui/useContextMenu";
+import { usePageMenu } from "./ui/pageMenuSlot";
+import { menuGroups } from "./ui/menuGroups";
import UndoToolbar from "./ui/UndoToolbar";
import NavGrid from "./ui/NavGrid";
import { PageToolbar } from "./ui/PageShell";
@@ -268,6 +270,9 @@ export default function Playlists() {
refetchOnWindowFocus: true,
});
const detail = detailQuery.data;
+ // The page's background menu (DESIGN "Background menu"), live only while a list is on screen.
+ const pageMenu = usePageMenu(selectedId != null && !!detail);
+ const pagePin = useComfortPin(pageMenu.open);
// Destructured so the effect below can name what it calls: both are stable useCallbacks, while
// the object around them is rebuilt every render (lib/useUndoable).
@@ -704,6 +709,57 @@ export default function Playlists() {
pin: headerPin.item(pinPlaylist(headerPl.id), plName(headerPl)),
});
+ // The page's background menu mirrors the band: Play all, the view controls, the order's undo, and
+ // the list's own "…" without its destructive rows (Delete, Revert) — a stray right-click on the
+ // page's blank area must not be one click from those.
+ const pageItems: ActionMenuItem[] = !detail
+ ? []
+ : menuGroups(
+ [
+ {
+ id: "playAll",
+ label: t("playlists.playAll"),
+ disabled: !shown.length,
+ onSelect: () => shown.length && openPlayer(shown[0]!.id),
+ },
+ ],
+ items.length > 1 || viewActive
+ ? [
+ {
+ id: "groupBy",
+ label: t("playlists.groupByChannel"),
+ check: { kind: "many", checked: groupBy },
+ onSelect: () => setGroupBy(!groupBy),
+ },
+ ...(viewActive
+ ? [{ id: "clearView", label: t("playlists.clearView"), onSelect: clearView }]
+ : []),
+ ...(canSaveOrder
+ ? [{ id: "saveOrder", label: t("playlists.saveOrder"), onSelect: saveOrder }]
+ : []),
+ ]
+ : [],
+ canEdit && (order.canUndo || order.canRedo)
+ ? [
+ ...(order.canUndo
+ ? [{ id: "undo", label: t("common.undo"), onSelect: order.undo }]
+ : []),
+ ...(order.canRedo
+ ? [{ id: "redo", label: t("common.redo"), onSelect: order.redo }]
+ : []),
+ ]
+ : [],
+ plActions
+ .items(detail, {
+ onRename: () => {
+ setRenameValue(detail.name);
+ setRenaming(true);
+ },
+ pin: pagePin.item(pinPlaylist(detail.id), plName(detail)),
+ })
+ .filter((it) => !("danger" in it && it.danger)),
+ );
+
// The open player, at ONE place in the tree whichever state the page below it is in. Selecting
// another list under an open player (the command palette works over it) puts the page into
// "Loading…" until that list arrives; with the player rendered only in the loaded branch, that
@@ -966,6 +1022,11 @@ export default function Playlists() {
{/* One surface for the whole table, outside the rows — it anchors to the pointer, not the row. */}
{player}
diff --git a/frontend/src/components/PlexBrowse.tsx b/frontend/src/components/PlexBrowse.tsx
index a0da74e8..fa585957 100644
--- a/frontend/src/components/PlexBrowse.tsx
+++ b/frontend/src/components/PlexBrowse.tsx
@@ -30,6 +30,9 @@ import FilterSelect from "./ui/FilterSelect";
import PlexDiscover from "./PlexDiscover";
import { PlexCollectionsBrowse, PlexPlaylistsBrowse } from "./plexBrowseLists";
import { PageToolbar } from "./ui/PageShell";
+import { PageMenu } from "./ui/PageMenu";
+import { menuGroups } from "./ui/menuGroups";
+import { choiceSubmenu, sortSubmenu } from "./ui/pageMenuItems";
import ActiveFilterChips from "./ActiveFilterChips";
import SelectedViewChip from "./SelectedViewChip";
import ItemCount from "./ui/ItemCount";
@@ -531,8 +534,35 @@ export default function PlexBrowse() {
);
}
+ const showOptions = SHOW_OPTS.map((s) => ({ value: s, label: t(`plex.filter.showOpt.${s}`) }));
+ // The page's background menu (DESIGN "Background menu"): the toolbar's own controls, no more.
+ const pageMenuItems = menuGroups(
+ [
+ sortSubmenu({
+ id: "sort",
+ label: t("plex.filter.sort"),
+ options: sortOptions,
+ sort: sortState,
+ onChange: (next) => setSort(next ?? PLEX_SORT_FALLBACK),
+ ascLabel: t("plex.filter.dir.asc"),
+ descLabel: t("plex.filter.dir.desc"),
+ }),
+ choiceSubmenu({
+ id: "show",
+ label: t("plex.filter.show"),
+ options: showOptions,
+ selected: show,
+ onPick: setShow,
+ }),
+ ],
+ plexChips.length > 0
+ ? [{ id: "clear", label: t("sidebar.clearAll"), onSelect: clearAllFilters }]
+ : [],
+ );
+
return (
+
@@ -546,7 +576,7 @@ export default function PlexBrowse() {
({ value: s, label: t(`plex.filter.showOpt.${s}`) }))}
+ options={showOptions}
selected={[show]}
onChange={(next) => setShow(next[0] ?? "all")}
/>
diff --git a/frontend/src/components/ui/PageMenu.dom.test.tsx b/frontend/src/components/ui/PageMenu.dom.test.tsx
new file mode 100644
index 00000000..6140b4ca
--- /dev/null
+++ b/frontend/src/components/ui/PageMenu.dom.test.tsx
@@ -0,0 +1,225 @@
+// @vitest-environment jsdom
+//
+// docs/DESIGN.md "Background menu": a right-click on the EMPTY area of a page opens the page's menu,
+// which only mirrors its toolbar. Everything else keeps what it had: text, a control, a link, media
+// or a row with its own menu; Shift+right-click (the way to the browser's menu); a touch long-press
+// (desktop only); selected words; and a page that renders no . The shell listens, so it is
+// held here through PageShell, with floating-ui's observers stubbed as in ContextMenu.dom.test.tsx.
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { FloatingTree } from "@floating-ui/react";
+import PageShell from "./PageShell";
+import { PageMenu } from "./PageMenu";
+import { sortSubmenu, choiceSubmenu, multiSubmenu } from "./pageMenuItems";
+import { isBackgroundPoint } from "../../lib/backgroundTarget";
+import { type ActionMenuItem } from "./ActionMenu";
+
+vi.mock("./PageScroller", () => ({
+ default: ({ children }: { children: React.ReactNode }) =>
+
+ {withMenu && (
+ {} }]}
+ />
+ )}
+
+
+ );
+}
+
+/** Right-click `el`; true when the page left it to the browser (not prevented). */
+const rightClick = (el: Element, init: MouseEventInit = {}) =>
+ fireEvent.contextMenu(el, { clientX: 5, clientY: 5, ...init });
+
+describe("the page's background menu", () => {
+ it("opens on the empty area, and takes the event from the browser", () => {
+ render(([]);
+ const registerPageMenu = useCallback((opener: PageMenuOpener) => {
+ pageMenus.current = [...pageMenus.current, opener];
+ return () => {
+ pageMenus.current = pageMenus.current.filter((o) => o !== opener);
+ };
+ }, []);
+ // What pressed last, for an engine whose contextmenu event carries no pointerType.
+ const lastPointer = useRef("mouse");
+ const onContextMenu = (e: React.MouseEvent) => {
+ const open = pageMenus.current[pageMenus.current.length - 1];
+ // Shift+right-click is the way to the browser's own menu; a row's or a link's handler has claimed
+ // the event already (they stop it); selected words keep the browser's Copy / Search.
+ if (!open || e.shiftKey || e.defaultPrevented) return;
+ // Desktop only: a touch long-press on the background belongs to scrolling and text selection.
+ const pointer = (e.nativeEvent as Partial).pointerType || lastPointer.current;
+ if (pointer !== "mouse") return;
+ if (pointOnSelection(e.target, e.clientX, e.clientY)) return;
+ if (!isBackgroundPoint(e.target, e.currentTarget)) return;
+ e.preventDefault();
+ open(e.clientX, e.clientY, e.currentTarget);
+ };
const measuredHeader = isValidElement(header)
? cloneElement(header as ReactElement<{ ref?: Ref }>, {
ref: setHeaderEl,
@@ -146,20 +173,26 @@ export default function PageShell({
: header;
return (
-
- {measuredHeader}
-
+
);
}
diff --git a/frontend/src/components/ui/pageMenuItems.ts b/frontend/src/components/ui/pageMenuItems.ts
new file mode 100644
index 00000000..9890a558
--- /dev/null
+++ b/frontend/src/components/ui/pageMenuItems.ts
@@ -0,0 +1,114 @@
+import { type ActionMenuItem } from "./ActionMenu";
+import { menuGroups } from "./menuGroups";
+import { pickSort, type SortOption, type SortState } from "../../lib/columnSort";
+
+// The rows a page's background menu (./pageMenu) mirrors its toolbar with. Each takes the SAME
+// vocabulary and setter as the control it mirrors (a SortControl's options, a FilterSelect's options),
+// so the menu can never offer a choice the toolbar does not, or set it another way.
+
+/** "Sort ▸": the keys as a pick-one set, then the direction when the active key has one. Picking a
+ * key keeps its direction, a new one starts at its default — `pickSort`, as the SortControl does.
+ * `defaultLabel` leads with the "no sort" choice, for a control that offers one (a table's). */
+export function sortSubmenu({
+ id,
+ label,
+ options,
+ sort,
+ onChange,
+ ascLabel,
+ descLabel,
+ defaultLabel,
+}: {
+ id: string;
+ label: string;
+ options: readonly SortOption[];
+ sort: SortState;
+ onChange: (next: SortState) => void;
+ ascLabel: string;
+ descLabel: string;
+ defaultLabel?: string;
+}): ActionMenuItem {
+ const active = sort ? options.find((o) => o.key === sort.key) : undefined;
+ const none: ActionMenuItem[] = defaultLabel
+ ? [
+ {
+ id: `${id}.none`,
+ label: defaultLabel,
+ check: { kind: "one", checked: !active },
+ onSelect: () => onChange(null),
+ },
+ ]
+ : [];
+ const keys: ActionMenuItem[] = options.map((o) => ({
+ id: `${id}.${o.key}`,
+ label: o.label,
+ check: { kind: "one", checked: active?.key === o.key },
+ onSelect: () => onChange(pickSort([...options], sort, o.key)),
+ }));
+ const dirs: ActionMenuItem[] =
+ active && sort && !active.directionless
+ ? (["asc", "desc"] as const).map((dir) => ({
+ id: `${id}.dir.${dir}`,
+ label: dir === "asc" ? ascLabel : descLabel,
+ check: { kind: "one", checked: sort.dir === dir },
+ onSelect: () => onChange({ key: sort.key, dir }),
+ }))
+ : [];
+ return { id, label, items: menuGroups([...none, ...keys], dirs) };
+}
+
+/** "Label ▸" over one choice of several (a FilterSelect without `multiple`, a view switcher). */
+export function choiceSubmenu({
+ id,
+ label,
+ options,
+ selected,
+ onPick,
+}: {
+ id: string;
+ label: string;
+ options: readonly { value: V; label: string }[];
+ selected: V;
+ onPick: (value: V) => void;
+}): ActionMenuItem {
+ return {
+ id,
+ label,
+ items: options.map((o) => ({
+ id: `${id}.${o.value}`,
+ label: o.label,
+ check: { kind: "one", checked: o.value === selected },
+ onSelect: () => onPick(o.value),
+ })),
+ };
+}
+
+/** "Label ▸" over a set that can all be on (a `multiple` FilterSelect): each toggles in place. */
+export function multiSubmenu({
+ id,
+ label,
+ options,
+ selected,
+ onChange,
+}: {
+ id: string;
+ label: string;
+ options: readonly { value: V; label: string }[];
+ selected: readonly V[];
+ onChange: (next: V[]) => void;
+}): ActionMenuItem {
+ return {
+ id,
+ label,
+ items: options.map((o) => {
+ const on = selected.includes(o.value);
+ return {
+ id: `${id}.${o.value}`,
+ label: o.label,
+ check: { kind: "many", checked: on },
+ onSelect: () =>
+ onChange(on ? selected.filter((v) => v !== o.value) : [...selected, o.value]),
+ };
+ }),
+ };
+}
diff --git a/frontend/src/components/ui/pageMenuScope.contract.test.ts b/frontend/src/components/ui/pageMenuScope.contract.test.ts
new file mode 100644
index 00000000..50f48a43
--- /dev/null
+++ b/frontend/src/components/ui/pageMenuScope.contract.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+
+// docs/DESIGN.md "Background menu": which pages have one is the owner's call (2026-09-26, scope A) —
+// the list pages whose toolbar sorts, filters or switches a view: the feed, the Plex library, the
+// channel manager, a playlist and the notification center. The tab-only pages (settings, config,
+// stats, users, downloads) keep the browser's menu. A page that starts rendering one fails here until
+// that decision is taken again.
+const files = import.meta.glob(["../**/*.tsx", "!../**/*.test.*", "!../design-lab/**", "!./**"], {
+ query: "?raw",
+ import: "default",
+ eager: true,
+}) as Record;
+
+describe("the pages with a background menu", () => {
+ it("are the five the owner chose", () => {
+ const users = Object.entries(files)
+ .filter(([, code]) => / path.replace(/^\.\.\//, ""))
+ .sort();
+ expect(users).toEqual([
+ "Channels.tsx",
+ "Feed.tsx",
+ "NotificationsPanel.tsx",
+ "Playlists.tsx",
+ "PlexBrowse.tsx",
+ ]);
+ });
+});
diff --git a/frontend/src/components/ui/pageMenuSlot.ts b/frontend/src/components/ui/pageMenuSlot.ts
new file mode 100644
index 00000000..01e709a4
--- /dev/null
+++ b/frontend/src/components/ui/pageMenuSlot.ts
@@ -0,0 +1,33 @@
+import { createContext, useContext, useEffect } from "react";
+import { useContextMenu, type ContextMenuController } from "./useContextMenu";
+
+// docs/DESIGN.md "Background menu": a right-click on the EMPTY area of a page opens a menu of that
+// page's own toolbar actions (sort, view, quick filters) — never a new function, and desktop only.
+// PageShell listens on the page area and decides "empty" (lib/backgroundTarget); a page that has such a
+// menu renders `` (./PageMenu), which registers here while mounted and draws the same
+// `ContextMenu` as a row's, from the page's live state. A page that registers nothing keeps the
+// browser's menu everywhere.
+//
+// Its own module (not in PageShell.tsx / PageMenu.tsx) so those export only components (Fast Refresh).
+
+/** Opens the page's menu at a viewport point, anchored to the page area. */
+export type PageMenuOpener = (x: number, y: number, contextElement: Element) => void;
+
+/** PageShell's registry: the latest registered opener answers (a feed inside a channel page takes
+ * over while mounted); the returned function unregisters. */
+export const PageMenuSlot = createContext<((opener: PageMenuOpener) => () => void) | null>(null);
+
+/** The page's background menu: render `` is the short form; a page that needs the open state (a row that
+ * fetches on open) takes the hook. */
+export function usePageMenu(enabled = true): ContextMenuController<"page"> {
+ const register = useContext(PageMenuSlot);
+ const menu = useContextMenu<"page">();
+ const { openAt } = menu;
+ useEffect(
+ () => (enabled ? register?.((x, y, el) => openAt(x, y, "page", el)) : undefined),
+ [enabled, register, openAt],
+ );
+ return menu;
+}
diff --git a/frontend/src/components/ui/useContextMenu.ts b/frontend/src/components/ui/useContextMenu.ts
index 8946dc7c..bf9c08d5 100644
--- a/frontend/src/components/ui/useContextMenu.ts
+++ b/frontend/src/components/ui/useContextMenu.ts
@@ -72,6 +72,9 @@ export interface ContextMenuController {
* click opens the SAME menu under the button; a second click on it while its menu is open closes
* it, like any menu button. Pair it with `aria-expanded` from the caller, which knows its row. */
buttonProps: (payload: T) => Record;
+ /** Opens the menu at a viewport point for `payload`, anchored to `contextElement` — for an input
+ * path the two props above do not cover (the page's background menu, `ui/PageMenu`). */
+ openAt: (x: number, y: number, payload: T, contextElement?: Element) => void;
/** Consumed by ``; not part of the call site's vocabulary. */
popover: ReturnType;
}
@@ -259,7 +262,7 @@ export function useContextMenu({
[openAt, close, keyOf],
);
- return { target, anchor, open, close, triggerProps, buttonProps, popover: pop };
+ return { target, anchor, open, close, triggerProps, buttonProps, openAt, popover: pop };
}
/** One trigger per item, stable while the items and the menu are — for a list whose card component
diff --git a/frontend/src/i18n/locales/en/channels.json b/frontend/src/i18n/locales/en/channels.json
index e3c35874..b25ee7f5 100644
--- a/frontend/src/i18n/locales/en/channels.json
+++ b/frontend/src/i18n/locales/en/channels.json
@@ -47,6 +47,8 @@
},
"tags": {
"label": "Tags",
+ "clearFilter": "Clear tag filter",
+ "edit": "Edit tags…",
"add": "Tag",
"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.)",
"noneYet": "No tags yet — create one below.",
diff --git a/frontend/src/i18n/locales/en/common.json b/frontend/src/i18n/locales/en/common.json
index e9af4aac..33e77cdc 100644
--- a/frontend/src/i18n/locales/en/common.json
+++ b/frontend/src/i18n/locales/en/common.json
@@ -26,6 +26,7 @@
"scrollRight": "Scroll right",
"search": "Search",
"noResults": "No matches",
+ "pageMenu": "Page actions",
"priority": {
"raise": "Raise priority",
"lower": "Lower priority",
diff --git a/frontend/src/i18n/locales/hu/channels.json b/frontend/src/i18n/locales/hu/channels.json
index ca68c44c..416413e4 100644
--- a/frontend/src/i18n/locales/hu/channels.json
+++ b/frontend/src/i18n/locales/hu/channels.json
@@ -47,6 +47,8 @@
},
"tags": {
"label": "Címkék",
+ "clearFilter": "Címkeszűrő törlése",
+ "edit": "Címkék szerkesztése…",
"add": "Címke",
"yourTagsHint": "Saját személyes címkéid. Csatold őket az alábbi csatornákhoz, majd szűrd a Feedet címke szerint az oldalsávból. (Az automatikus nyelvi/téma címkéktől függetlenül.)",
"noneYet": "Még nincs címke — hozz létre egyet lent.",
diff --git a/frontend/src/i18n/locales/hu/common.json b/frontend/src/i18n/locales/hu/common.json
index ff7a5147..c496c97e 100644
--- a/frontend/src/i18n/locales/hu/common.json
+++ b/frontend/src/i18n/locales/hu/common.json
@@ -26,6 +26,7 @@
"scrollRight": "Görgetés jobbra",
"search": "Keresés",
"noResults": "Nincs találat",
+ "pageMenu": "Az oldal műveletei",
"priority": {
"raise": "Prioritás növelése",
"lower": "Prioritás csökkentése",
diff --git a/frontend/src/lib/backgroundTarget.ts b/frontend/src/lib/backgroundTarget.ts
new file mode 100644
index 00000000..0e19029b
--- /dev/null
+++ b/frontend/src/lib/backgroundTarget.ts
@@ -0,0 +1,55 @@
+// docs/DESIGN.md "Background menu": a right-click on EMPTY content area opens the page's menu; over
+// text, a control, a link, media or an object with its own menu the browser's (or the object's) stays.
+// This decides "empty", from the element the pointer is over up to the page root that listens.
+
+/** An element that is not background: a control, a link, a field, media, or an object (a row or card
+ * with its own menu, a list item the keyboard walks). Anything inside one is not background either. */
+const NOT_BACKGROUND = [
+ "a",
+ "button",
+ "input",
+ "textarea",
+ "select",
+ "label",
+ "summary",
+ "[contenteditable]",
+ // A widget by its role (a div acting as a button, a menu, a listbox and its options, …).
+ ...[
+ "button",
+ "link",
+ "menuitem",
+ "tab",
+ "option",
+ "slider",
+ "checkbox",
+ "switch",
+ "dialog",
+ "menu",
+ "listbox",
+ ].map((role) => `[role="${role}"]`),
+ "img",
+ "picture",
+ "video",
+ "audio",
+ "canvas",
+ "svg",
+ "iframe",
+ "[data-context-menu-target]",
+ "[data-nav-index]",
+].join(",");
+
+/** True when `target` is text itself: an element holding words of its own (not only inside children).
+ * A right-click on a paragraph, a heading or a label's padding is on text: its menu is the browser's. */
+function holdsText(el: Element): boolean {
+ for (const node of el.childNodes)
+ if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) return true;
+ return false;
+}
+
+/** True when a right-click on `target` falls on the empty area of `root` (the page). */
+export function isBackgroundPoint(target: EventTarget | null, root: Element): boolean {
+ if (!(target instanceof Element) || !root.contains(target)) return false;
+ if (holdsText(target)) return false;
+ const hit = target.closest(NOT_BACKGROUND);
+ return !hit || !root.contains(hit);
+}
{children}
,
+}));
+
+beforeAll(() => {
+ class Stub {
+ observe() {}
+ unobserve() {}
+ disconnect() {}
+ takeRecords() {
+ return [];
+ }
+ }
+ globalThis.ResizeObserver ??= Stub as unknown as typeof ResizeObserver;
+ globalThis.IntersectionObserver ??= Stub as unknown as typeof IntersectionObserver;
+ // jsdom ships no PointerEvent: without this a pointerdown carries no pointerType at all, and the
+ // touch test would pass for the wrong reason (see ContextMenu.dom.test.tsx).
+ class PointerEventStub extends MouseEvent {
+ pointerType: string;
+ constructor(type: string, init: MouseEventInit & { pointerType?: string } = {}) {
+ super(type, init);
+ this.pointerType = init.pointerType ?? "";
+ }
+ }
+ globalThis.PointerEvent ??= PointerEventStub as unknown as typeof PointerEvent;
+});
+afterEach(() => {
+ window.getSelection()!.removeAllRanges();
+ cleanup();
+});
+
+const menuNames = () =>
+ screen.queryAllByRole("menu", { hidden: true }).map((m) => m.getAttribute("aria-label"));
+
+function Page({ withMenu = true }: { withMenu?: boolean }) {
+ return (
+
+ ![]()
+
+ Some words
+ + {
+ e.preventDefault();
+ e.stopPropagation();
+ }}
+ >
+
+
+
- {title && ownHeadings === 0 &&
+
+ {measuredHeader}
+
+
+ {children}
+
+ {title}
} - {banners} - {/* pr-[--sbw]: the toolbar band isn't the scroller, so without this it would run the + {
+ lastPointer.current = e.pointerType;
+ }}
+ onContextMenu={onContextMenu}
+ >
+ {title && ownHeadings === 0 && {children}
-
-