refactor: apply url actions in the test route (@miodec) by Miodec · Pull Request #8475 · monkeytypegame/monkeytype

Miodec · 2026-10-18T14:38:59Z

Description

Stacked on #8459. Folds controllers/url-handler.tsx into the router.

before: authEvent "authStateChanged" -> await loadPromise -> read window.location -> apply (every auth change, any path)
after:  test route beforeLoad (after userData beforeLoad) -> apply -> redirect to / without the action params (replace)

controllers/url-handler.tsx -> router/url-actions.ts. Loaders take the value instead of reading window.location; applyUrlActions(location) is the single entry point and returns the search/hash left over.
Test route beforeLoad applies testSettings, customTheme, challenge and the discord oauth hash (/verify already redirects to / keeping the hash), then redirects to drop them. Skipped on preload.
Values are read from location.searchStr via findGetParameter, not the parsed search: URLSearchParams turns the + of base64 (customTheme) and lz (testSettings) into spaces.
Side-effect import removed from index.tsx.

Behaviour changes:

Params are applied once and removed from the url, so they're no longer re-applied on a later sign in/out or reload.
Only handled on / (all generated links point there; discord goes through /verify).
Discord: only the hash is dropped; previously history.replaceState(null, "", "/") also dropped the search.

Evidence

url-actions.spec.ts: existing test settings cases moved over, plus applyUrlActions cases (no actions, rest kept, raw + kept, discord hash dropped).
app-shell.spec.tsx: actions applied and dropped from the url, applied after /verify, not applied on hover.
Frontend: 70 files, 1456 tests passing; oxlint type check clean.
Not browser tested.

Generated by Claude Code

# Conflicts: # frontend/src/index.html # frontend/src/ts/components/common/Setting.tsx # frontend/src/ts/components/mount.tsx # frontend/src/ts/components/pages/test/TestPage.tsx # frontend/src/ts/components/pages/test/result/replay.ts # frontend/src/ts/controllers/chart-controller.ts # frontend/src/ts/elements/caret.ts # frontend/src/ts/elements/test-init-failed.ts # frontend/src/ts/event-handlers/test.ts # frontend/src/ts/index.ts # frontend/src/ts/test/caret.ts # frontend/src/ts/test/funbox/layoutfluid-funbox-timer.ts # frontend/src/ts/test/funbox/memory-funbox-timer.ts # frontend/src/ts/test/pace-caret.ts # frontend/src/ts/test/result.ts # frontend/src/ts/test/test-logic.ts # frontend/src/ts/test/test-screenshot.ts # frontend/src/ts/test/test-ui.ts

Adopt master's test page unmount (bindTestElements, optional carets) over the branch's placeholder refs; test page show/hide logic stays in TestPage, driven by the router signals. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LFv5oixtD54uhzpzvLu34N

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LFv5oixtD54uhzpzvLu34N

- move route/loading/fade/transitioning state into router/page-transition.ts, driven by events from the router, withLoading and Pages - route load failures go through tanstack (loaders throw) instead of a global error flag - render the test page like every other page (drop the always-mounted shell) - route replaceSearch through the router so its location stays in sync - add isTestPageActive memo - remove leftover lorem ipsum from settings page Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LFv5oixtD54uhzpzvLu34N

- move navigation guards from navigate() into a router history blocker (covers links, navigate() and back/forward; redirects and replaceSearch bypass it) - register router type so `to` is checked against the route tree - Button takes `to`/`params` and renders Link; `href` is external only - provide router context to all component roots so Link works outside RouterProvider - remove initRouter click delegate, router-link attr and css hack - remove unused `force` option from navigate() Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…into solid-pages # Conflicts: # frontend/src/ts/components/layout/footer/ScrollToTop.tsx

…ith plain signals and functions Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

The previous page fades out before the next one mounts, tracked by a local signal in Pages. Navigation is no longer blocked during fades - the fade always swaps to the latest target. startTest checks the route instead. isTestPageActive is set by TestPage while mounted. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

router.state is backed by solid signals, so the route page and load error are memos over its matches instead of copies set in router events. The router instance is a signal in navigate.ts so state modules can read it without importing the route tree. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Resize re-centering, autofocus, refocus restarts and the monkey/modifier key listeners are registered by bindTestElements and removed when the test page unmounts, instead of global listeners checking the active page. Code that touches test elements checks TestUI.isMounted(). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Components use useMatchRoute, vanilla code uses isTestRoute (router.matchRoute over the router signal). TestPage no longer sets global state. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

The route page only changes once the next route has loaded, so check the target page instead. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

useIsTestRoute wraps useMatchRoute for components, listenForKeyState is shared by the monkey and modifier listeners, and the loading page reset reuses the initial indicator. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>