feat(design): a Plex title's one action list (C1) — the poster's "…", details and the pin in its menu (E28 S3e2)

Every Plex poster list (library, Discover rails, person, show, season, collection, Home's rails)
now opens one menu per list from the right-click, the long-press, Shift+F10 and the card's "…":
play/open, watched, add to playlist, media info, copy title, the pin (usePlexCardActions +
PlexMenu, replacing the pin-only PlexPinMenu). The card keeps its state at rest and shows
watched / add to playlist / "…" on its picture on hover (ui/reveal.ts, shared with the video
card); on touch the toggles are gone and a 44px "…" sits beside the title, while the watched pill
stays. The hover ⓘ left the card; an episode's add button moved from its caption to the hover
row. Seasons get their own short menu (open, watched, add, copy), labelled "Open season" (the
card's overlay said "Open show"). Related shows are ordinary poster cards now. A collection's
admin "Remove" X moved into its menu, still behind the confirmation. The collection grid is two
columns on a phone. The unused .reveal-idle rule is gone.
This commit is contained in:
2026-09-26 01:51:53 +02:00
parent 75ae810866
commit a4737b92e4
17 changed files with 1003 additions and 465 deletions
+5 -20
View File
@@ -713,13 +713,7 @@ body {
but on a touch device — which never hovers — it is invisible AND still tappable. So the reveal is
gated on `@media (hover: hover)`: only a hover-capable pointer hides it until the group is hovered
or focused (keyboard too, via `:focus-within`); a touch device keeps the default opacity:1 and the
control is always shown. `.reveal-idle` is the counterpart badge a control replaces (e.g. the
"watched" pill under the watched-toggle): visible at rest, faded when the group is hovered, and
dropped entirely on touch — where the toggle is always present, so the two would otherwise collide
at the same corner. Requires a `.group` ancestor (Tailwind's group marker). */
.reveal-idle {
transition: opacity 150ms ease;
}
control is always shown. Requires a `.group` ancestor (Tailwind's group marker). */
@media (hover: hover) {
.reveal {
opacity: 0;
@@ -730,29 +724,20 @@ body {
.reveal:focus-visible {
opacity: 1;
}
/* Fade the idle badge whenever its companion control is revealed — on hover AND on keyboard
focus-within (the `.reveal` trigger set above lists both), else the two overlap at the same
corner for a keyboard user. */
.group:hover .reveal-idle,
.group:focus-within .reveal-idle {
opacity: 0;
}
/* The mirror of `.reveal-hover`: a control that exists ONLY on touch, because a mouse reaches the
same action another way — the video card's "…" beside the title, whose mouse twin sits in the
hover row on the picture (E28 C1). `display: none`, so it is no Tab stop either. */
same action another way — a video or Plex card's "…" beside the title, whose mouse twin sits
in the hover row on the picture (E28 C1, `ui/reveal.ts`). `display: none`, so it is no Tab stop either. */
.touch-only {
display: none;
}
}
@media (hover: none) {
.reveal-idle {
display: none;
}
/* Sibling of `.reveal` for a MOUSE-ONLY hover-reveal: unlike `.reveal` (shown at rest on touch),
a `.reveal-hover` control is removed entirely on a device that can't hover, so it is never an
invisible tap/Tab target. Pair it with the site's own `opacity-0 group-hover:… group-focus-within:…`
(which still governs the hover + keyboard case). For a full-card/edge affordance whose action is
already reachable on touch another way — VideoCard's play overlay (tapping the card plays/resumes)
already reachable on touch another way — a card's hover row (its "…" beside the title opens the
same actions: `ui/reveal.ts`), VideoCard's play overlay (tapping the card plays/resumes)
and the Carousel arrows (swiping scrolls the strip) — where a permanent scrim/edge button is not
wanted. Group-agnostic (encodes only the touch removal), so it works under any `.group`/`group\/…`. */
.reveal-hover {