feat(design): one media card, and Home's hero and shelves as cards (E28 S3h)

- ui/MediaCard + mediaCardStyles: one frame for every video, Plex title and Home tile; the meta line pinned to the bottom edge, the length a badge on the picture, the media Play only where the click plays, the hover row at the picture's bottom-right (the owner's pick C). - Shelf density: on any strip a one-line title over one meta line; mixed Home shelves are landscape; rails turn content-visibility off (a card's reserved height had become the strip's). Home slot 232px, so the Play and the hover row no longer touch; a landscape shelf takes the small Play. - Home hero is a card (hover row, the whole menu, a touch "…"), three quarters wide and centred; channel / playlist tiles get Play, open and "…"; a show tile acts on its next episode, ⓘ opens the show. - Plex preview: a ~0.9 s mouse rest opens a passive panel with the whole title, facts and synopsis (popover `pointerOnly`); the synopsis and title tooltips are gone. - Compact list row B: the title leads, "…" at the end, toggles over the date on hover. - Media-info layout B (collections, crew, cast beside the facts sidebar; an empty column is not drawn); filtering values are chips there and on the show page; "Cast" over the cast-only strips. - Browse tiles hover like a card; prose capped by the `measure` utility.
2026-09-27 00:54:19 +02:00
parent 6653d81a80
commit a453b77f04
30 changed files with 1882 additions and 769 deletions
@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+import { PopoverSurface } from "./AnchoredPopover";
+import type { useMediaPreview } from "./useMediaPreview";
+import { SURFACE } from "./surfaces";
+
+// A media card's preview (docs/DESIGN.md "Media card", E28 S3h — the owner's pick C, 2026-09-26):
+// rest the mouse on a card for a moment and a panel beside it shows what the card has no room for —
+// the whole title, the facts, the synopsis in lines short enough to read. It replaced the synopsis as
+// the picture's native tooltip, which fired anywhere on the art, ran one long line, and shared its
+// mechanism with the cut title's own tooltip.
+//
+// Mouse only (`pointerOnly`): a keyboard walk down a grid would pop a panel at every stop, and on
+// touch a tap is the card's play. The same facts are one row away there ("…" → Media info). Passive
+// (`passthrough`), so the panel lying over the next card never eats the click aimed at it; any press
+// on the card closes it, so it never sits over a menu the card just opened.
+
+export function MediaPreview({
+  preview,
+  title,
+  facts,
+  summary,
+}: {
+  preview: ReturnType<typeof useMediaPreview>;
+  title: string;
+  /** One line under the title: year, length, score. */
+  facts?: ReactNode;
+  summary?: string | null;
+}) {
+  return (
+    <PopoverSurface
+      popover={preview.popover}
+      passthrough
+      // 18rem at text-xs: ~50 characters a line, inside the 45–75 a reader follows without losing
+      // the next line's start.
+      className={`${SURFACE.popover} w-72 px-3.5 py-3 text-left normal-case tracking-normal animate-[fadeIn_0.12s_ease]`}
+    >
+      <p className="text-sm font-semibold leading-snug text-fg">{title}</p>
+      {facts && <div className="mt-0.5 text-xs text-muted">{facts}</div>}
+      {summary && <p className="mt-2 line-clamp-8 text-xs leading-relaxed text-fg">{summary}</p>}
+    </PopoverSurface>
+  );
+}