feat(design): a video's one action list (C1) — the card's "…", the menu holds the rest (E28 S3e1)

- useContextMenu gains buttonProps (a row's visible "…" opens the same menu under the button; a
  second press closes it) and anchor (the element the menu came from, for a panel a row opens).
- ui/MoreButton; ActionMenu rows can run inGesture (a clipboard write inside the click, Safari).
- useVideoActions: one builder for a video's menu (play / restart, channel, watched, save, add to
  playlist, download, details, copy title / link, hide, reset, pin), composed by the feed and by
  Home's rails; the playlists and details panels open anchored beside the card (VideoFollowUp).
- The card keeps watched / save / add to playlist and the "…": on the picture on hover (the
  duration steps aside), in the rows' action column; on touch only a 44px "…" beside the title.
  Download, hide, reset and the hover info card leave the card.
- The title is selectable: a click ending a selection neither plays nor follows the link.
- DESIGN.md: how C1 is built + the log row.

frontend/src/components/VideoCard.nav.dom.test.tsx

@@ -98,3 +98,26 @@ describe("VideoCard — the thumbnail link", () => {
     expect(screen.queryByRole("link", { name: "20:00" })).toBeNull();
   });
 });
+
+// E28 C1 "Text stays selectable": the mouseup that ends selecting the title's words fires a click on
+// the title; that click must not open the player (nor follow the link).
+describe("VideoCard — a title you select", () => {
+  it("does not open when the click ends a selection inside it, and still opens on a plain click", () => {
+    const onOpen = renderCard("cards");
+    const title = screen.getByTestId("video-card").querySelector("[data-nav-open]") as HTMLElement;
+    // Both, or Chrome starts no selection on a link (measured in the S3e1 UAT).
+    expect(title.getAttribute("draggable")).toBe("false");
+    expect(title.classList.contains("select-text")).toBe(true);
+    const range = document.createRange();
+    range.selectNodeContents(title);
+    window.getSelection()!.removeAllRanges();
+    window.getSelection()!.addRange(range);
+    const click = new MouseEvent("click", { bubbles: true, cancelable: true, button: 0 });
+    title.dispatchEvent(click);
+    expect(onOpen).not.toHaveBeenCalled();
+    expect(click.defaultPrevented).toBe(true);
+    window.getSelection()!.removeAllRanges();
+    title.click();
+    expect(onOpen).toHaveBeenCalledWith(video);
+  });
+});