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:
@@ -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 && (
|
||||
<PageMenu
|
||||
ariaLabel={t("common.pageMenu")}
|
||||
items={headerItems.filter((it) => !("danger" in it && it.danger))}
|
||||
/>
|
||||
)}
|
||||
{hasAny && (
|
||||
<PageToolbar>
|
||||
<div className="px-4 pt-2 pb-1 max-w-3xl w-full mx-auto flex justify-end items-center gap-2">
|
||||
|
||||
Reference in New Issue
Block a user