feat(design): a page's background menu on the five list pages (E28 S3e4c)

A right-click on the EMPTY area of a page opens a menu of that page's own
toolbar: the feed (sort, reshuffle, view, watch state, content, source, clear
filters), the Plex library grid (sort, watch state, clear), the channel manager
(layout, the cards' sort, sync status, edit tags, clear the tag filter, read
subscriptions), a playlist (play all, group by, reset view, save order,
undo/redo, the list's own menu) and the notification center (mark all read).
No destructive row and no backfill.

PageShell listens on the page area; lib/backgroundTarget decides empty (not
text, a control, a link, media, or a row/card with its own menu). Shift+right-
click, a touch long-press and a right-click on selected words keep the
browser's menu. ui/PageMenu registers while mounted, so a loading or error
state keeps the browser's menu too. The rows mirror each control through
ui/pageMenuItems (sortSubmenu via pickSort, choiceSubmenu, multiSubmenu).
pageMenuScope.contract.test.ts pins the five pages.
This commit is contained in:
2026-09-26 20:48:53 +02:00
parent f8ced6d819
commit 97381e65d0
19 changed files with 877 additions and 56 deletions
+4 -1
View File
@@ -72,6 +72,9 @@ export interface ContextMenuController<T> {
* 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<string, unknown>;
/** 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 `<ContextMenu>`; not part of the call site's vocabulary. */
popover: ReturnType<typeof useAnchoredPopover>;
}
@@ -259,7 +262,7 @@ export function useContextMenu<T>({
[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