From c49ce5cbb55f8f3ad4e27f9196dfbab73aab0848 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 7 Oct 2025 14:00:28 -0700
Subject: [PATCH] feat(admin): add runes-based autosave to EssayForm
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add createAutoSaveStore for edit mode
- Add updatedAt tracking for conflict detection
- Add hasLoaded flag to prevent autosave on initial load
- Prime autosave after initial data loads
- Add AutoSaveStatus indicator in header
- Move draft recovery from inline to prominent banner
- Only save draft on autosave failure (not every change)
- Smart navigation guard (only blocks if unsaved)
- Add beforeunload warning (only if unsaved changes)
- Add keyboard shortcut (Cmd/Ctrl+S)
- Add proper cleanup on unmount
- Update clearDraft calls in restore/dismiss functions
- Fix $derived syntax (use $derived.by for draftTimeText)

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/components/admin/EssayForm.svelte | 278 +++++++++++++++++-----
 1 file changed, 223 insertions(+), 55 deletions(-)

diff --git a/src/lib/components/admin/EssayForm.svelte b/src/lib/components/admin/EssayForm.svelte
index 3056679..a5da324 100644
--- a/src/lib/components/admin/EssayForm.svelte
+++ b/src/lib/components/admin/EssayForm.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
-	import { goto } from '$app/navigation'
+	import { goto, beforeNavigate } from '$app/navigation'
 	import AdminPage from './AdminPage.svelte'
 	import AdminSegmentedControl from './AdminSegmentedControl.svelte'
 	import Editor from './Editor.svelte'
 	import Button from './Button.svelte'
 	import Input from './Input.svelte'
-import { toast } from '$lib/stores/toast'
-import { makeDraftKey, saveDraft, loadDraft, clearDraft, timeAgo } from '$lib/admin/draftStore'
+	import { toast } from '$lib/stores/toast'
+	import { makeDraftKey, saveDraft, loadDraft, clearDraft, timeAgo } from '$lib/admin/draftStore'
+	import { createAutoSaveStore } from '$lib/admin/autoSave.svelte'
+	import AutoSaveStatus from './AutoSaveStatus.svelte'
 	import type { JSONContent } from '@tiptap/core'
 
 	interface Props {
@@ -17,6 +19,7 @@ import { makeDraftKey, saveDraft, loadDraft, clearDraft, timeAgo } from '$lib/ad
 			content: JSONContent
 			tags: string[]
 			status: 'draft' | 'published'
+			updatedAt?: string
 		}
 		mode: 'create' | 'edit'
 	}
@@ -25,9 +28,11 @@ import { makeDraftKey, saveDraft, loadDraft, clearDraft, timeAgo } from '$lib/ad
 
 	// State
 	let isLoading = $state(false)
+	let hasLoaded = $state(mode === 'create') // Create mode loads immediately
 	let isSaving = $state(false)
 	let activeTab = $state('metadata')
 	let showPublishMenu = $state(false)
+	let updatedAt = $state<string | undefined>(initialData?.updatedAt)
 
 	// Form data
 	let title = $state(initialData?.title || '')
@@ -38,14 +43,14 @@ import { makeDraftKey, saveDraft, loadDraft, clearDraft, timeAgo } from '$lib/ad
 	let tagInput = $state('')
 
 	// Ref to the editor component
-let editorRef: any
+	let editorRef: any
 
-// Draft backup
-const draftKey = $derived(makeDraftKey('post', postId ?? 'new'))
-let showDraftPrompt = $state(false)
-let draftTimestamp = $state<number | null>(null)
-let timeTicker = $state(0)
-const draftTimeText = $derived(() => (draftTimestamp ? (timeTicker, timeAgo(draftTimestamp)) : null))
+	// Draft backup
+	const draftKey = $derived(makeDraftKey('post', postId ?? 'new'))
+	let showDraftPrompt = $state(false)
+	let draftTimestamp = $state<number | null>(null)
+	let timeTicker = $state(0)
+	const draftTimeText = $derived.by(() => (draftTimestamp ? (timeTicker, timeAgo(draftTimestamp)) : null))
 
 function buildPayload() {
   return {
@@ -54,10 +59,35 @@ function buildPayload() {
     type: 'essay',
     status,
     content,
-    tags
+    tags,
+    updatedAt
   }
 }
 
+// Autosave store (edit mode only)
+let autoSave = mode === 'edit' && postId
+	? createAutoSaveStore({
+			debounceMs: 2000,
+			getPayload: () => (hasLoaded ? buildPayload() : null),
+			save: async (payload, { signal }) => {
+				const response = await fetch(`/api/posts/${postId}`, {
+					method: 'PUT',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify(payload),
+					credentials: 'same-origin',
+					signal
+				})
+				if (!response.ok) throw new Error('Failed to save')
+				return await response.json()
+			},
+			onSaved: (saved: any, { prime }) => {
+				updatedAt = saved.updatedAt
+				prime(buildPayload())
+				if (draftKey) clearDraft(draftKey)
+			}
+		})
+	: null
+
 	const tabOptions = [
 		{ value: 'metadata', label: 'Metadata' },
 		{ value: 'content', label: 'Content' }
@@ -73,11 +103,31 @@ $effect(() => {
 		}
 })
 
-// Save draft when key fields change
-$effect(() => {
-  title; slug; status; content; tags
-  saveDraft(draftKey, buildPayload())
-})
+	// Prime autosave on initial load (edit mode only)
+	$effect(() => {
+		if (mode === 'edit' && initialData && !hasLoaded && autoSave) {
+			autoSave.prime(buildPayload())
+			hasLoaded = true
+		}
+	})
+
+	// Trigger autosave when form data changes
+	$effect(() => {
+		title; slug; status; content; tags; activeTab
+		if (hasLoaded && autoSave) {
+			autoSave.schedule()
+		}
+	})
+
+	// Save draft only when autosave fails
+	$effect(() => {
+		if (hasLoaded && autoSave) {
+			const saveStatus = autoSave.status
+			if (saveStatus === 'error' || saveStatus === 'offline') {
+				saveDraft(draftKey, buildPayload())
+			}
+		}
+	})
 
 // Show restore prompt if a draft exists
 $effect(() => {
@@ -88,29 +138,86 @@ $effect(() => {
   }
 })
 
-function restoreDraft() {
-  const draft = loadDraft<any>(draftKey)
-  if (!draft) return
-  const p = draft.payload
-  title = p.title ?? title
-  slug = p.slug ?? slug
-  status = p.status ?? status
-  content = p.content ?? content
-  tags = p.tags ?? tags
-  showDraftPrompt = false
-}
+	function restoreDraft() {
+		const draft = loadDraft<any>(draftKey)
+		if (!draft) return
+		const p = draft.payload
+		title = p.title ?? title
+		slug = p.slug ?? slug
+		status = p.status ?? status
+		content = p.content ?? content
+		tags = p.tags ?? tags
+		showDraftPrompt = false
+		clearDraft(draftKey)
+	}
 
-function dismissDraft() {
-  showDraftPrompt = false
-}
+	function dismissDraft() {
+		showDraftPrompt = false
+		clearDraft(draftKey)
+	}
 
-// Auto-update draft time text every minute when prompt visible
-$effect(() => {
-  if (showDraftPrompt) {
-    const id = setInterval(() => (timeTicker = timeTicker + 1), 60000)
-    return () => clearInterval(id)
-  }
-})
+	// Auto-update draft time text every minute when prompt visible
+	$effect(() => {
+		if (showDraftPrompt) {
+			const id = setInterval(() => (timeTicker = timeTicker + 1), 60000)
+			return () => clearInterval(id)
+		}
+	})
+
+	// Navigation guard: flush autosave before navigating away (only if unsaved)
+	beforeNavigate(async (navigation) => {
+		if (hasLoaded && autoSave) {
+			if (autoSave.status === 'saved') {
+				return
+			}
+			navigation.cancel()
+			try {
+				await autoSave.flush()
+				navigation.retry()
+			} catch (error) {
+				console.error('Autosave flush failed:', error)
+			}
+		}
+	})
+
+	// Warn before closing browser tab/window if there are unsaved changes
+	$effect(() => {
+		if (!hasLoaded || !autoSave) return
+
+		function handleBeforeUnload(event: BeforeUnloadEvent) {
+			if (autoSave!.status !== 'saved') {
+				event.preventDefault()
+				event.returnValue = ''
+			}
+		}
+
+		window.addEventListener('beforeunload', handleBeforeUnload)
+		return () => window.removeEventListener('beforeunload', handleBeforeUnload)
+	})
+
+	// Keyboard shortcut: Cmd/Ctrl+S to save immediately
+	$effect(() => {
+		if (!hasLoaded || !autoSave) return
+
+		function handleKeydown(e: KeyboardEvent) {
+			if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') {
+				e.preventDefault()
+				autoSave!.flush().catch((error) => {
+					console.error('Autosave flush failed:', error)
+				})
+			}
+		}
+
+		document.addEventListener('keydown', handleKeydown)
+		return () => document.removeEventListener('keydown', handleKeydown)
+	})
+
+	// Cleanup autosave on unmount
+	$effect(() => {
+		if (autoSave) {
+			return () => autoSave.destroy()
+		}
+	})
 
 	function addTag() {
 		if (tagInput && !tags.includes(tagInput)) {
@@ -294,16 +401,26 @@ $effect(() => {
 					</div>
 				{/if}
 			</div>
-      {#if showDraftPrompt}
-        <div class="draft-prompt">
-          Unsaved draft found{#if draftTimeText} (saved {draftTimeText}){/if}.
-          <button class="link" onclick={restoreDraft}>Restore</button>
-          <button class="link" onclick={dismissDraft}>Dismiss</button>
-        </div>
-      {/if}
+			{#if mode === 'edit' && autoSave}
+				<AutoSaveStatus status={autoSave.status} error={autoSave.lastError} />
+			{/if}
 		</div>
 	</header>
 
+	{#if showDraftPrompt}
+		<div class="draft-banner">
+			<div class="draft-banner-content">
+				<span class="draft-banner-text">
+					Unsaved draft found{#if draftTimeText} (saved {draftTimeText}){/if}.
+				</span>
+				<div class="draft-banner-actions">
+					<button class="draft-banner-button" onclick={restoreDraft}>Restore</button>
+					<button class="draft-banner-button dismiss" onclick={dismissDraft}>Dismiss</button>
+				</div>
+			</div>
+		</div>
+	{/if}
+
 	<div class="admin-container">
 		{#if error}
 			<div class="error-message">{error}</div>
@@ -430,18 +547,69 @@ $effect(() => {
 		display: flex;
 	}
 
-	.draft-prompt {
-		margin-left: $unit-2x;
-		color: $gray-40;
-		font-size: 0.75rem;
+	.draft-banner {
+		background: $blue-95;
+		border-bottom: 1px solid $blue-80;
+		padding: $unit-2x $unit-5x;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		animation: slideDown 0.2s ease-out;
 
-		.link {
-			background: none;
-			border: none;
-			color: $gray-20;
-			cursor: pointer;
-			margin-left: $unit;
-			padding: 0;
+		@keyframes slideDown {
+			from {
+				opacity: 0;
+				transform: translateY(-10px);
+			}
+			to {
+				opacity: 1;
+				transform: translateY(0);
+			}
+		}
+	}
+
+	.draft-banner-content {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: $unit-3x;
+		width: 100%;
+		max-width: 1200px;
+	}
+
+	.draft-banner-text {
+		color: $blue-20;
+		font-size: $font-size-small;
+		font-weight: $font-weight-med;
+	}
+
+	.draft-banner-actions {
+		display: flex;
+		gap: $unit-2x;
+	}
+
+	.draft-banner-button {
+		background: $blue-50;
+		border: none;
+		color: $white;
+		cursor: pointer;
+		padding: $unit-half $unit-2x;
+		border-radius: $corner-radius-sm;
+		font-size: $font-size-small;
+		font-weight: $font-weight-med;
+		transition: background $transition-fast;
+
+		&:hover {
+			background: $blue-40;
+		}
+
+		&.dismiss {
+			background: transparent;
+			color: $blue-30;
+
+			&:hover {
+				background: $blue-90;
+			}
 		}
 	}