fix(admin): only block navigation/close when changes are unsaved

- Update beforeNavigate guard to check autosave status before blocking
- Allow instant navigation when status is 'saved' (no interruption)
- Add beforeunload warning for browser close/reload
- Only show warnings when status is NOT 'saved' (saving/error/idle)
- Improves UX by not interrupting users when everything is already saved

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Justin Edmund 2025-10-07 13:21:57 -07:00
parent f35fa60207
commit 672eb47143

View file

@ -177,9 +177,15 @@
} }
}) })
// Navigation guard: flush autosave before navigating away // Navigation guard: flush autosave before navigating away (only if there are unsaved changes)
beforeNavigate(async (navigation) => { beforeNavigate(async (navigation) => {
if (mode === 'edit' && hasLoaded && autoSave) { if (mode === 'edit' && hasLoaded && autoSave) {
// If status is 'saved', there are no unsaved changes - allow navigation
if (autoSave.status === 'saved') {
return
}
// Otherwise, flush any pending changes before navigating
navigation.cancel() navigation.cancel()
try { try {
await autoSave.flush() await autoSave.flush()
@ -191,6 +197,22 @@
} }
}) })
// Warn before closing browser tab/window if there are unsaved changes
$effect(() => {
if (mode !== 'edit' || !autoSave) return
function handleBeforeUnload(event: BeforeUnloadEvent) {
// Only warn if there are unsaved changes
if (autoSave!.status !== 'saved') {
event.preventDefault()
event.returnValue = '' // Required for Chrome
}
}
window.addEventListener('beforeunload', handleBeforeUnload)
return () => window.removeEventListener('beforeunload', handleBeforeUnload)
})
// Keyboard shortcut: Cmd/Ctrl+S to save immediately // Keyboard shortcut: Cmd/Ctrl+S to save immediately
$effect(() => { $effect(() => {
if (mode !== 'edit' || !autoSave) return if (mode !== 'edit' || !autoSave) return