URL-driven modal and page navigation

TL;DR

• Detail views needed to feel lightweight without becoming temporary UI state.
• I needed the same content to work as an overlay, a refreshed page, and a mobile route.
• I used route-backed presentation so the URL remained the source of truth.
• The result was a smoother desktop flow without sacrificing refresh, sharing, or mobile clarity.

Some product views need to feel lightweight without becoming temporary. A detail view can open like a modal, but it still needs a real URL.

Where it started

The interface needed quick detail views from dense lists. A plain modal would feel fast, but it would make refresh, history, and shared links weaker.

What needed to change

Route-backed overlays let a user open detail content without losing the surrounding list. Refreshing the page still lands on meaningful content, and sharing the URL still works.

On mobile, the same destination can become a full page where space and navigation are clearer.

What I built

The route decides how the view is presented. On desktop, an intercepted route can render inside an overlay. On refresh or direct navigation, the same route can render as a standalone page.

The content model stays shared, while the presentation adapts to context.

What changed

This avoids the common split between “real pages” and “modal state.” The URL remains the source of truth, which helps navigation, refresh, history, and accessibility.

What I would watch

The route tree becomes more important. If route ownership is unclear, overlays and standalone views can drift apart.