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:
parent
f35fa60207
commit
672eb47143
1 changed files with 23 additions and 1 deletions
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue