egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: sync mobile routing with browser URL for direct navigation (refs #163)

Browse Source 
URL-to-screen sync on mount and screen-to-URL sync via replaceState
enable direct URL navigation, page refresh, and bookmarks on mobile.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
2026-02-13 19:35:53 -06:00
parent 325cf08df0
commit 0e8c6070ef
3 changed files with 57 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/core/store/index.ts
View File

@@ -1,5 +1,5 @@
// Export navigation store
export { useNavigationStore } from './navigation';
export { useNavigationStore, routeToScreen, screenToRoute } from './navigation';
export type { MobileScreen, VehicleSubScreen } from './navigation';
// Export user store

40
frontend/src/core/store/navigation.ts
View File

@@ -5,6 +5,45 @@ import { safeStorage } from '../utils/safe-storage';
export type MobileScreen = 'Dashboard' | 'Vehicles' | 'Log Fuel' | 'Maintenance' | 'Stations' | 'Documents' | 'Settings' | 'Security' | 'Subscription' | 'AdminUsers' | 'AdminCatalog' | 'AdminCommunityStations' | 'AdminEmailTemplates' | 'AdminBackup' | 'AdminLogs';
export type VehicleSubScreen = 'list' | 'detail' | 'add' | 'edit';
/** Maps browser URL paths to mobile screen names for direct URL navigation */
export const routeToScreen: Record<string, MobileScreen> = {
'/garage': 'Dashboard',
'/garage/dashboard': 'Dashboard',
'/garage/vehicles': 'Vehicles',
'/garage/fuel-logs': 'Log Fuel',
'/garage/maintenance': 'Maintenance',
'/garage/stations': 'Stations',
'/garage/documents': 'Documents',
'/garage/settings': 'Settings',
'/garage/settings/security': 'Security',
'/garage/settings/subscription': 'Subscription',
'/garage/settings/admin/users': 'AdminUsers',
'/garage/settings/admin/catalog': 'AdminCatalog',
'/garage/settings/admin/community-stations': 'AdminCommunityStations',
'/garage/settings/admin/email-templates': 'AdminEmailTemplates',
'/garage/settings/admin/backup': 'AdminBackup',
'/garage/settings/admin/logs': 'AdminLogs',
};
/** Reverse mapping: mobile screen name to canonical URL path */
export const screenToRoute: Record<MobileScreen, string> = {
'Dashboard': '/garage/dashboard',
'Vehicles': '/garage/vehicles',
'Log Fuel': '/garage/fuel-logs',
'Maintenance': '/garage/maintenance',
'Stations': '/garage/stations',
'Documents': '/garage/documents',
'Settings': '/garage/settings',
'Security': '/garage/settings/security',
'Subscription': '/garage/settings/subscription',
'AdminUsers': '/garage/settings/admin/users',
'AdminCatalog': '/garage/settings/admin/catalog',
'AdminCommunityStations': '/garage/settings/admin/community-stations',
'AdminEmailTemplates': '/garage/settings/admin/email-templates',
'AdminBackup': '/garage/settings/admin/backup',
'AdminLogs': '/garage/settings/admin/logs',
};
interface NavigationHistory {
screen: MobileScreen;
vehicleSubScreen?: VehicleSubScreen;
@@ -196,7 +235,6 @@ export const useNavigationStore = create<NavigationState>()(
name: 'motovaultpro-mobile-navigation',
storage: createJSONStorage(() => safeStorage),
partialize: (state) => ({
activeScreen: state.activeScreen,
vehicleSubScreen: state.vehicleSubScreen,
selectedVehicleId: state.selectedVehicleId,
formStates: state.formStates,