- no need for a separate effect since we can use the existing one
- no need to cancel the similar artists query upon entering, since the
unregister callback already does it
- replace click-driven artist-detail hops with semantic links
- keep SPA transitions via shell bridge interception for /artist-detail/:source/:id
- drop legacy page helper wrappers and dead bridge plumbing
- expose a shell-bridge cancel primitive for similar-artists loading
- stop stale similar-artists streams from the artist-detail route lifecycle
- keep the legacy loader abort-only and make abort logs page-agnostic
- update bridge and route tests for the new cleanup path
- add a canonical TanStack route for artist-detail and keep the legacy page as the renderer target
- expose page-level artist-detail navigation on the shell bridge for legacy callers
- remove artist-detail-specific routing, origin stack, and back-label logic from the shared shell helpers
- add canonical /artist-detail/:source/:id TanStack route
- hand the legacy page off through the shell bridge
- remove artist-detail branching from generic shell helpers
Artist detail pages previously always pushed /artist-detail to the URL,
so refreshing the page or sharing a link would drop users on a broken
empty page with no artist loaded.
URL format is now /artist-detail/:source/:id (e.g.
/artist-detail/spotify/4tZwfgrHOc3mvqsCAfo4LT or
/artist-detail/library/42). The source segment lets the backend
synthesize a response from the right metadata client without a DB hit.
Changes:
Client routing (legacy shell + TanStack bridge)
- buildArtistDetailPath / _getDeepLinkArtistDetail added to init.js;
parse both new :source/:id and legacy bare :id formats so old
bookmarks still work
- navigateToPage passes artistId + artistSource through to the router
bridge, which builds the dynamic href instead of hardcoding route.path
- resolveShellPageFromPath / resolveLegacyShellPageFromPath use a prefix
match so /artist-detail/* resolves to artist-detail page-id
- globals.d.ts typed for artistId / artistSource options
- activateLegacyPath and syncActivePageFromLocation (popstate) both
restore artist from URL using skipRouteChange:true to avoid a
re-navigation loop back to /artist-detail
- loadInitialData restores artist from URL on page load (router not yet
mounted at DOMContentLoaded so legacy path runs unconditionally)
- Same-artist guard in navigateToArtistDetail prevents double-fetch
when the router fires activateLegacyPath after the initial navigation
Server
- artist_source_detail.build_source_only_artist_detail now resolves
artist name from the source API when none is supplied, so deep-link
restores with an empty name string still render correctly
Tests
- test_spa_deep_linking: /artist-detail/42 and /artist-detail/spotify/ID
both serve index.html
- bridge.test.ts: source-aware URL building and library fallback
- route-manifest.test.ts: prefix path resolution
- artist_source_detail: name resolved from source when input is empty
Use camelCase for the Zod schema objects while keeping shared enum value arrays in CONSTANT_CASE.
Also adds search validation coverage for invalid statuses so the new route schema behavior stays tested.
- keep getCurrentPageId off the legacy shell bridge surface
- leave page-id lookup on the router side where it is actually used
- align the bridge tests and type definitions with the slimmer API
- add a shared issues query invalidation helper
- invalidate from the page and domain host directly
- remove the internal window refresh event listener
- keep the legacy bridge refresh method wired to the shared helper
- use a scoped renderer for the loading, error, and success lifecycle
- keep Show for the larger conditional blocks inside the success view
- simplify small pending-label branches back to plain ternaries
- add Zod-backed search validation for issues
- derive issue enums and search types from shared value arrays
- replace hardcoded filter and priority lists with shared metadata
- keep private helpers at the bottom of the issues UI files
- tighten issue detail fallback labels to shared metadata
- Remove the remaining Oxlint warnings in the issues route UI
- Make promise handling explicit in navigation and refresh paths
- Keep the issue snapshot shape aligned with the fields the UI reads
- Move Vite, Vitest, Oxfmt, and Oxlint into standalone config files
- Replace vite-plus scripts and test imports with direct tools
- Keep the generated route tree out of formatter and linter checks
- move the conditional rendering helper into components/primitives
- use it in the issues board and issue domain host
- keep the issue page and host easier to scan without repeated null branches
- keep the route controller at the top of the file
- split the board into small local components
- remove the dead close-event helper and keep refresh invalidation only
- Wait for the legacy shell bridge/profile before React routes render
- Expose the shell bridge and profile through root TanStack context
- Update issue routes and shell helpers to consume the shared context
- Remove the redundant issues search normalization on read
- Refresh the affected tests around shell bootstrap and routing
- tighten the shared button and select primitives to the compact modal style
- remove issues-page select overrides that no longer need to exist
- drop the issue modal button sizing overrides so shared defaults handle the density
- bring back the old symbol-based issue category icons in the React issues UI
- keep the issue detail modal fallback aligned with the shared metadata
- add a small regression check for the restored icon set
- let the issue detail modal own its selected-issue query and loading states
- keep the issues page focused on route state and modal orchestration
- preserve the loader prefetch so the modal still opens from warm cache
- split the modal shell into smaller shared components
- move default dialog styling into the shared dialog module
- simplify the issues modals to use the shared frame/header/body/footer pieces
- keep the issues route search navigation typed against the route
- Adopt Base UI for the shared form field, input, button, and toggle wrappers
- Replace the local class-name helper with clsx to keep the primitives simpler
- Keep native textarea and select controls where they still fit the existing styling pattern
- Add a shared MSW server to the Vitest setup
- Cover issue API request, success, and error scenarios
- Add msw as a dev dependency for future API-layer tests
- Move HTTP and query-option helpers out of -issues.helpers.ts.
- Keep -issues.helpers.ts focused on pure normalization and formatting helpers.
- Update issue route and modal callers to import request code from -issues.api.ts.
- Keep ky HTTPError instances intact instead of flattening them
- Use the parsed error payload when the server sends a useful message
- Fix the Issues default search type so issueId stays optional
- Add regression tests for the JSON helper behavior
- Restore the shell-era issue detail layout and hero ordering.
- Keep external links color-coded by service.
- Hide track details for album issues and keep the track list compact.
- Restore legacy track-list badge colors for format and bitrate.
- Match the neutral dismiss button styling from the old modal.
- Add regression coverage for the album issue modal state.
- Move issue detail selection into route search so the modal is deep-linkable and back-button friendly.
- Normalize issue category and detail params before they reach the loader.
- Keep the legacy shell URL in sync for React-owned home pages.
- Preserve the legacy issues-tour hooks on the React issues page.
- Add Escape handling, focus trapping, and focus restore to the issue detail modal.
- Add route and helper coverage for the new search-state behavior.
- Remove duplicate button base styles from the issue detail modal CSS
- Keep only the layout and state-specific variants that the shared primitives still need
- Let the shared Button and TextArea own the common control styling
- Keep Select thin and native, with options supplied as children
- Add a simple shared Button for form actions
- Use both primitives in the issues page and report modal
- Introduce reusable input, textarea, card, button, and action components
- Use them in the issue report composer as the reference implementation
- Keep the TanStack form logic at the usage site and add focused regression coverage
Keep React-owned pages out of the legacy page activator during initial bootstrap, and switch the visible React host before paint when the shell mounts.
That removes the refresh flash on /issues while preserving the legacy-page behavior and browser-history stability.
Verified with the router tests and the issues smoke suite.
- re-render the React shell when legacy profile bootstrap selects or refreshes a profile
- keep the initial page fallback so direct loads still activate the legacy shell chrome
- preserve the smoke coverage for direct loads and browser history
- send / through the configured profile home page
- keep the router regression test in sync with the redirect
- preserve the legacy shell fallback for non-router bootstrap
Remove the Flask route-to-page helpers and stop passing initial active-page flags into the shell template.
The web UI now renders static page and nav markup, while the client-side shell remains responsible for establishing active page state after load. This keeps the hybrid Flask + Vite asset setup intact while reducing duplicated route/page ownership logic in the backend template layer.
Also added a previously missing /stream path to the spa exclusions
- Add @tanstack/react-form to the web UI dependencies
- Move the report issue composer fields and submit validation onto TanStack Form
- Route submit and server errors through form error state while keeping React Query for mutation execution
- Extend issue route coverage for preserving custom report titles across category changes
- Mount a React-owned issue domain host and bridge report issue actions through it
- Add typed issue creation helpers, report payload types, and shared album workflow launchers
- Expand issue detail UI parity with metadata, links, track details, and admin actions
- Remove legacy static issue modal/list/detail code and update tests for the React bridge
- File-based routing with tanstack router
- Persist top-level navigation state in url, even for most legacy pages
- Striving for an intuitive and simple folder structure where
route-related code is colocated, but the amount of files is still
kept to a minimum
- Replace native fetch with `ky`
- Familiar api, but more polished
Antti Kettunen
Broque Thomas