fix(ui): a toast host ranks by when its overlay opened, and an overlay keeps its Escape, its dialog and its navigation straight

Deep-review round 4, the overlays.

- Toast hosts were ranked by mount time, and PlayerModal swaps its host on every fullscreen change:
  leaving true fullscreen with the download dialog open put the player's host back on top, so toasts
  were drawn under that dialog's scrim and a click on one closed the dialog. Each overlay takes a
  rank once, when it opens (`useOverlayOrder`), and hands it to every host it renders.
- A dialog open while fullscreen is left keeps a stable portal container (moved, not re-created):
  React tore the portal down when `fsRoot` changed, resetting a half-filled form and dropping focus
  to <body>. Focus is put back after the move.
- The onboarding wizard is a layer, not a raw document listener: one Escape used to dismiss the
  error dialog over it AND end onboarding, skipping the write-scope step.
- `navigateTo` (a toast's "View", clicked inside the player's own host) goes over the overlays it
  unmounts, so the player's Back-to-close cleanup no longer pops the page it just opened — the same
  fix Shift+W already had. The access-requests toast action too.
- The live region arms itself a task after it takes over inherited toasts: React flushes effects in
  the same task as that render, so the "silent inheritance" arming was a no-op.
- The overlay-host guard matches class tokens in any order (PlexPlayer's root was never checked),
  globs `ui/` too (ui/Modal was not checked either), and requires the rank.
This commit is contained in:
2026-09-11 23:43:23 +02:00
parent 267fd7f70f
commit 545996f807
12 changed files with 358 additions and 55 deletions
+40
View File
@@ -0,0 +1,40 @@
// @vitest-environment jsdom
//
// `navigateTo` is what a toast's action calls ("Download added — View"), and that click happens
// INSIDE an overlay's toast host. The page change unmounts the page-owned overlay (the player), whose
// Back-to-close cleanup then reclaimed the history entry the navigation had just pushed — so the user
// landed back where they started with the player closed instead of on the Downloads page
// (deep-review round 4). Same trap, and the same fix, as the global Shift+W shortcut.
//
// Its own file: `lib/history`'s depth bookkeeping is module state.
import { describe, it, expect, vi } from "vitest";
import { renderHook, act } from "@testing-library/react";
import { useBackToClose } from "./history";
import { navigateTo, setNavigator } from "./nav";
const settle = () =>
act(async () => {
await Promise.resolve();
});
describe("navigateTo from inside an overlay", () => {
it("buries the overlay's entry, so closing it does not pop the page just opened", async () => {
const overlay = renderHook(() => useBackToClose(() => {}));
await settle();
const back = vi.spyOn(window.history, "back");
try {
setNavigator(() => {
window.history.pushState({ sfPage: "downloads" }, "");
return true; // as App's setPage reports: it really pushed
});
act(() => navigateTo("downloads"));
overlay.unmount(); // the page change unmounts the player
await settle();
expect(back).not.toHaveBeenCalled();
expect(window.history.state).toMatchObject({ sfPage: "downloads" });
} finally {
back.mockRestore();
setNavigator(() => {});
}
});
});
+8 -3
View File
@@ -1,16 +1,21 @@
import { navigateOverOverlays } from "./history";
import type { Page } from "./urlState";
// Tiny decoupled navigator so deep components (a feed card's download toast, the Download
// Center) can switch pages without threading setPage through the whole tree. App registers
// its setPage on mount; navigateTo is a no-op until then.
let _navigate: ((p: Page) => void) | null = null;
let _navigate: ((p: Page) => boolean | void) | null = null;
export function setNavigator(fn: (p: Page) => void): void {
export function setNavigator(fn: (p: Page) => boolean | void): void {
_navigate = fn;
}
/** Over whatever overlay is open: the "View" on a "Download added" toast is clicked INSIDE the player
* (its toast host), and the page change unmounts the page-owned player, whose Back-to-close cleanup
* then popped the entry the navigation had just pushed — the user landed back on the feed with the
* player gone (deep-review round 4). Same trap, same fix as Shift+W (see `navigateOverOverlays`). */
export function navigateTo(p: Page): void {
_navigate?.(p);
navigateOverOverlays(() => _navigate?.(p));
}
/** Should this click be handled IN-APP, or left to the browser?