fix(design): a row's "…" closes its own menu when its row object is rebuilt (E28 S3e2)

The "…" told its own menu from another row's by payload identity. The Plex playlist page builds
each row's menu target afresh on every render, so a second press on the same "…" reopened the
menu instead of closing it. useContextMenu takes an optional `keyOf`, and the page keys its
targets by the row key.

frontend/src/components/ui/useContextMenu.ts

@@ -74,7 +74,17 @@ export interface ContextMenuController<T> {
   popover: ReturnType<typeof useAnchoredPopover>;
 }
 
-export function useContextMenu<T>(): ContextMenuController<T> {
+const identity = (payload: unknown): unknown => payload;
+
+export function useContextMenu<T>({
+  keyOf = identity,
+}: {
+  /** What makes two payloads the SAME row, for the "…" closing its own menu. Identity by default;
+   *  a list whose rows are rebuilt each render (a wrapper object) or refetched while the menu is
+   *  open (a poll replaces the job it lists) passes its id, or a second press would reopen. A
+   *  module-scope function: a fresh one per render would rebuild `buttonProps` on every render. */
+  keyOf?: (payload: T) => unknown;
+} = {}): ContextMenuController<T> {
   // Register the scope HERE, so the cheat sheet lists Shift+F10 exactly on the surfaces that answer it.
   useKeyScope("contextMenu");
   const [target, setTarget] = useState<T | null>(null);
@@ -221,10 +231,10 @@ export function useContextMenu<T>(): ContextMenuController<T> {
       onPointerDown: (e: ReactPointerEvent<HTMLElement>) => {
         const dismissed = dismissedBy.current;
         pressedWhileOpen.current =
-          (openFor.current !== null && openFor.current.payload === payload) ||
+          (openFor.current !== null && keyOf(openFor.current.payload) === keyOf(payload)) ||
           (dismissed !== null &&
             dismissed.event === e.nativeEvent &&
-            dismissed.payload === payload);
+            keyOf(dismissed.payload) === keyOf(payload));
       },
       onClick: (e: React.MouseEvent<HTMLElement>) => {
         // The button sits on a card that plays on click, and inside a row that may be a link.
@@ -242,7 +252,7 @@ export function useContextMenu<T>(): ContextMenuController<T> {
         openAt(r.left, r.bottom, payload, e.currentTarget);
       },
     }),
-    [openAt, close],
+    [openAt, close, keyOf],
   );
 
   return { target, anchor, open, close, triggerProps, buttonProps, popover: pop };