modcomms/frontend/utils/urlState.ts
michael f1776df710 Persist navigation state in URL for browser refresh support
- Add URL utility functions for parsing and building URL state
- Initialize app state from URL parameters on page load
- Sync navigation changes to URL via browser history API
- Handle browser back/forward navigation with popstate listener
- Support deep linking to campaigns and proofs

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-24 09:04:04 -06:00

36 lines
1.3 KiB
TypeScript

type View = 'Home' | 'Analytics' | 'Campaigns' | 'WIP Reviewer' | 'CopyGenAI' | 'Settings' | 'Profile' | 'Auditing';
export interface UrlNavigationState {
view: View;
campaignName: string | null;
proofId: string | null;
}
const VALID_VIEWS: View[] = ['Home', 'Analytics', 'Campaigns', 'WIP Reviewer', 'CopyGenAI', 'Settings', 'Profile', 'Auditing'];
export function parseUrlState(): UrlNavigationState {
const params = new URLSearchParams(window.location.search);
const view = params.get('view') as View;
return {
view: VALID_VIEWS.includes(view) ? view : 'Home',
campaignName: params.get('campaign'),
proofId: params.get('proof'),
};
}
export function buildUrl(state: Partial<UrlNavigationState>): string {
const params = new URLSearchParams();
if (state.view && state.view !== 'Home') params.set('view', state.view);
if (state.campaignName) params.set('campaign', state.campaignName);
if (state.proofId) params.set('proof', state.proofId);
const query = params.toString();
return query ? `?${query}` : '/';
}
export function pushUrlState(state: Partial<UrlNavigationState>): void {
const newUrl = buildUrl(state);
// Only push if URL actually changed to avoid duplicate history entries
if (newUrl !== window.location.pathname + window.location.search) {
window.history.pushState(state, '', newUrl);
}
}