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

feat(nav): N2 — browser Back navigates in-app, not to OAuth

Browse source 
Push an in-app history entry on each page switch (page rides in history.state, URL stays
clean — filters still never go in the URL) and sync the page from history.state on
popstate. The initial entry is stamped after the strip-params effect (which nulls
history.state). Now the mouse/browser Back button steps through visited pages instead of
jumping straight to the Google consent/redirect. Second step of Epic N.
This commit is contained in:
npeter83 2026-06-16 01:27:49 +02:00
parent 36c7a649ab
commit 250c1da214
1 changed files with 22 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/src/App.tsx
View file

@ -106,8 +106,13 @@ export default function App() {
}
function setPage(next: Page) {
if (next === page) return;
setPageState(next);
localStorage.setItem(PAGE_KEY, next);
// Push an in-app history entry so the browser/mouse Back button steps through pages
// instead of leaving the app (e.g. back to the OAuth redirect). The URL stays clean —
// the page rides in history.state, not the query string (filters never go in the URL).
window.history.pushState({ ...window.history.state, sfPage: next }, "");
}
function setSidebarLayout(next: SidebarLayout) {
@ -129,6 +134,23 @@ export default function App() {
}
}, []); // eslint-disable-line react-hooks/exhaustive-deps
// In-app Back/Forward: stamp the initial entry with the current page, then sync `page`
// from history.state on popstate. Runs after the strip-params effect above (which resets
// history.state to null), so the initial stamp isn't clobbered.
useEffect(() => {
window.history.replaceState(
{ ...window.history.state, sfPage: page },
""
);
function onPop(e: PopStateEvent) {
const p = (e.state?.sfPage as Page) ?? "feed";
setPageState(p);
localStorage.setItem(PAGE_KEY, p);
}
window.addEventListener("popstate", onPop);
return () => window.removeEventListener("popstate", onPop);
}, []); // eslint-disable-line react-hooks/exhaustive-deps
const meQuery = useQuery({ queryKey: ["me"], queryFn: api.me });
// First-login onboarding: prompt the user to connect YouTube (and resume the flow after