peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(e10): review round 1 — the boundary that did not bind, and 14 more

Browse Source 
The epic-end review found 32 verified issues. This is the first fix round:
the three highs, the user-facing mediums, and the tests that were passing
for the wrong reason. Docs and the remaining low-severity tail are next.

The boundary rule was the worst of them. Both `no-restricted-imports`
regexes were written in plain "..." literals, where `\.` is an unknown
escape that collapses to the any-char `.` — so the rule read like a
boundary and matched far less than one. `../../lib/api` (the barrel every
feature component imports) and `../../components/Feed` (the same file
`../Feed` names) both sailed through a green gate. String.raw, a third
pattern for the second spelling, and a vitest over ESLint.lintText so a
rule that silently matches nothing can never look like a clean codebase
again.

closeThenNavigate waited for exactly one reclaim popstate. With a second
Back-closable layer still mounted — a palette opened over the player —
the navigation unmounted that layer too, and its reconcile backed over
the entry the navigation had just pushed: "go to Channels" closed the
player and landed on the feed. It now waits for the LAST programmatic
back, then adopts the entries the navigation buried, and falls back after
250ms rather than hanging if no popstate is ever coming.

The rail's inline rename died on arrival. With no domReference, floating-
ui's returnFocus falls through to a module-global stack and restores some
unrelated element from an earlier popover — blurring the field into its
own commit-and-close, from the second popover of a session onward. The
context menu now owns the restore: back to the row, but only if the row
is still there and nothing else has claimed focus.

Also:
- Backspace under the cheat sheet stopped Plex playback and dropped to
  the grid; `back` now defers to any layer above, like `escape` beside it.
- A move invalidated only the source list, so the target kept serving
  pre-move contents for 30s while the rail already counted N+1.
- Every move error a user can reach is a 404, which `req` leaves to the
  caller — so the row snapped back in silence and the shipped moveErrors
  strings were unreachable.
- swallowClick armed on long-press but was disarmed only by the click it
  was armed for; any press that produced no click ate the next tap on the
  whole list.
- The context menu stayed parked over whatever row scrolled under it.
- overflow-clip on the chip lanes ate the focus ring's top and bottom.
- "Why is this off" rode on disabled rows, which show no tooltip and take
  no focus: a new `inert` item keeps the reason readable.
- Shift+F10 was advertised app-wide but wired only on Playlists; it has
  its own scope now, and useContextMenu matches through the shared parser
  instead of its own literals.
- Mod+K could not close the palette, `h` machine-gunned on auto-repeat,
  and both were bound above the branch that mounts their overlays.
- Palette options were in the tab order under aria-activedescendant, and
  a scroll-synthesised mousemove stole the keyboard selection.
- The OSD live region was created together with its own text.
- Ending a rename stranded focus on <body>.
- The Button variants' hover halves are `enabled:` — the one migrated
  site that had guarded its own lost the guard on the way in.
- HU builtinLocked named the list "Watch later" in a Hungarian sentence.

Tests: the chip-lane contract counted per FILE, so a second hand-rolled
lane in an already-compliant file was invisible; the closeThenNavigate
ordering test only passed on a popstate left behind by its neighbours and
failed alone, so it moved to its own file.
This commit is contained in:
peter
2026-09-05 23:52:29 +02:00
parent 7d302f71b7
commit 20e17c0ccb
23 changed files with 562 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ui/useContextMenu.ts
+71 -4
View File
@@ -1,4 +1,6 @@
import { useCallback, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
import { matchesShortcut, useKeyScope } from "../../lib/keymap";
import { useAnchoredPopover } from "./AnchoredPopover";
// E10 S2 — the right-click context menu's INPUT half: the gestures that open it and the row they
@@ -60,6 +62,10 @@ export interface ContextMenuController<T> {
}
export function useContextMenu<T>(): ContextMenuController<T> {
// Register the scope HERE, so the cheat sheet lists Shift+F10 exactly on the surfaces that answer it.
useKeyScope("contextMenu");
// `onOpenChange` is built before `restoreFocus` exists; a ref keeps the order from mattering.
const restoreFocusRef = useRef<() => void>(() => {});
const [target, setTarget] = useState<T | null>(null);
const [open, setOpen] = useState(false);
const pop = useAnchoredPopover({
@@ -67,31 +73,70 @@ export function useContextMenu<T>(): ContextMenuController<T> {
onOpenChange: (next) => {
setOpen(next);
// Drop the target on close so a stale row can't drive a re-open's first paint.
if (!next) setTarget(null);
if (!next) {
setTarget(null);
restoreFocusRef.current();
}
},
// A native context menu drops down-and-right from the pointer; flip()/shift() take it the other
// way near an edge.
placement: "bottom-start",
offset: 0,
fitHeight: true,
// The anchor is a fixed POINT, not an element, so scrolling cannot move the panel with its row —
// it would sit over a different row than the one its actions target. Native menus close; so do we.
dismissOnScroll: true,
// Same reason: with no `domReference`, floating-ui's own returnFocus restores an unrelated
// element off its module-global stack. We know the actual row, so we hand focus back ourselves.
returnFocus: false,
});
// The row the open menu belongs to, so focus can go back where it came from on close.
const triggerEl = useRef<Element | null>(null);
const { setPositionReference } = pop.refs;
const openAt = useCallback(
(x: number, y: number, payload: T, contextElement?: Element) => {
setPositionReference({ getBoundingClientRect: () => pointRect(x, y), contextElement });
triggerEl.current = contextElement ?? null;
setTarget(payload);
setOpen(true);
},
[setPositionReference],
);
/** Hand focus back to the row — but only if that is still the right thing to do.
*
* After the commit, because both conditions are about the world the close produced. A row that is
* simply still there gets its focus back (the keyboard user is where they were). A row that has
* been REPLACED keeps whatever replaced it: the rail swaps in an inline rename field on this very
* path, and blindly restoring is what used to blur that field into its own commit-and-close (E10
* review round 1). Likewise, an action that deliberately moved focus somewhere else keeps it. */
const restoreFocus = useCallback(() => {
const el = triggerEl.current;
triggerEl.current = null;
if (!el) return;
queueMicrotask(() => {
if (!el.isConnected) return;
const active = document.activeElement;
if (active && active !== document.body && !el.contains(active)) return;
if (el instanceof HTMLElement) el.focus();
});
}, []);
// Long-press bookkeeping. Refs, not state: none of it paints, and a re-render per pointermove
// during a scroll would be a real cost on the device this path exists for.
const timer = useRef<number | null>(null);
const startedAt = useRef<{ x: number; y: number } | null>(null);
// A long-press is followed by a click on release. Without this the menu would open and the row's
// own default action (play / select) would fire underneath it.
//
// It is armed by the timer and disarmed by the click it was armed FOR — but plenty of long presses
// never produce that click (a pan ends in pointercancel, the finger lifts over the portalled menu,
// Android Chrome suppresses the trailing click after its own contextmenu). The flag then stayed
// armed, and since it is one ref per LIST, the next genuine tap on ANY row of that list was eaten
// and the row looked dead until tapped twice (E10 review round 1). So a fresh press also disarms
// it: whatever the last gesture left behind cannot outlive the start of the next one.
const swallowClick = useRef(false);
const cancelPress = useCallback(() => {
if (timer.current !== null) window.clearTimeout(timer.current);
@@ -111,6 +156,9 @@ export function useContextMenu<T>(): ContextMenuController<T> {
openAt(e.clientX, e.clientY, payload, e.currentTarget);
},
onPointerDown: (e: ReactPointerEvent<HTMLElement>) => {
// Before the pointerType guard: a stale arm left by an earlier touch press must not survive
// into an unrelated interaction, mouse click included.
swallowClick.current = false;
// Mouse has a right button; only touch/pen need the timer.
if (e.pointerType === "mouse") return;
const { clientX: x, clientY: y } = e;
@@ -132,7 +180,12 @@ export function useContextMenu<T>(): ContextMenuController<T> {
cancelPress(); // they are scrolling, not pressing
},
onPointerUp: cancelPress,
onPointerCancel: cancelPress,
onPointerCancel: () => {
// The gesture was taken over (a pan, the browser's own menu): no click is coming, so the
// arm has nothing left to swallow and must not wait around for someone else's.
swallowClick.current = false;
cancelPress();
},
onClickCapture: (e: React.MouseEvent<HTMLElement>) => {
if (!swallowClick.current) return;
swallowClick.current = false;
@@ -142,7 +195,9 @@ export function useContextMenu<T>(): ContextMenuController<T> {
onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => {
// The keyboard route every desktop menu has. Anchored to the row's bottom-left rather than a
// pointer that isn't there.
if (e.key !== "ContextMenu" && !(e.key === "F10" && e.shiftKey)) return;
// Through the shared parser, against the table's own row: the chords live in ONE place, and
// `matches` is exact on modifiers (the hand-rolled version answered Ctrl+Shift+F10 too).
if (!matchesShortcut(e.nativeEvent, "contextMenu")) return;
e.preventDefault();
const r = e.currentTarget.getBoundingClientRect();
openAt(r.left, r.bottom, payload, e.currentTarget);
@@ -151,5 +206,17 @@ export function useContextMenu<T>(): ContextMenuController<T> {
[openAt, cancelPress],
);
return { target, open, close: () => setOpen(false), triggerProps, popover: pop };
restoreFocusRef.current = restoreFocus;
return {
target,
open,
close: () => {
setOpen(false);
setTarget(null);
restoreFocus();
},
triggerProps,
popover: pop,
};
}