jedmund/jedmund-svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #21 from jedmund/devin/1763997845-admin-form-unification

Browse source 
Phase 1: Admin Form System Unification
This commit is contained in:
Justin Edmund 2025-11-24 08:09:22 -08:00 committed by GitHub
commit 3ec59dc996
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 266 additions and 399 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/lib/admin/autoSave.svelte.ts
View file

@ -8,7 +8,7 @@ export interface AutoSaveStoreOptions<TPayload, TResponse = unknown> {
onSaved?: (res: TResponse, ctx: { prime: (payload: TPayload) => void }) => void
}
export interface AutoSaveStore<TPayload> {
export interface AutoSaveStore<TPayload, _TResponse = unknown> {
readonly status: AutoSaveStatus
readonly lastError: string | null
schedule: () => void
@ -36,7 +36,7 @@ export interface AutoSaveStore<TPayload> {
*/
export function createAutoSaveStore<TPayload, TResponse = unknown>(
opts: AutoSaveStoreOptions<TPayload, TResponse>
): AutoSaveStore<TPayload> {
): AutoSaveStore<TPayload, unknown> {
const debounceMs = opts.debounceMs ?? 2000
const idleResetMs = opts.idleResetMs ?? 2000
let timer: ReturnType<typeof setTimeout> | null = null

19
src/lib/admin/useDraftRecovery.svelte.ts
View file

@ -1,7 +1,7 @@
import { loadDraft, clearDraft, timeAgo } from '$lib/admin/draftStore'
export function useDraftRecovery<TPayload>(options: {
draftKey: string | null
draftKey: () => string | null
onRestore: (payload: TPayload) => void
enabled?: boolean
}) {
@ -17,9 +17,10 @@ export function useDraftRecovery<TPayload>(options: {
// Auto-detect draft on mount using $effect
$effect(() => {
if (!options.draftKey || options.enabled === false) return
const key = options.draftKey()
if (!key || options.enabled === false) return
const draft = loadDraft<TPayload>(options.draftKey)
const draft = loadDraft<TPayload>(key)
if (draft) {
showPrompt = true
draftTimestamp = draft.ts
@ -43,19 +44,21 @@ export function useDraftRecovery<TPayload>(options: {
draftTimeText,
restore() {
if (!options.draftKey) return
const draft = loadDraft<TPayload>(options.draftKey)
const key = options.draftKey()
if (!key) return
const draft = loadDraft<TPayload>(key)
if (!draft) return
options.onRestore(draft.payload)
showPrompt = false
clearDraft(options.draftKey)
clearDraft(key)
},
dismiss() {
if (!options.draftKey) return
const key = options.draftKey()
if (!key) return
showPrompt = false
clearDraft(options.draftKey)
clearDraft(key)
}
}
}

16
src/lib/admin/useFormGuards.svelte.ts
View file

@ -2,7 +2,9 @@ import { beforeNavigate } from '$app/navigation'
import { toast } from '$lib/stores/toast'
import type { AutoSaveStore } from '$lib/admin/autoSave.svelte'
export function useFormGuards(autoSave: AutoSaveStore<unknown, unknown> | null) {
export function useFormGuards<TPayload = unknown, _TResponse = unknown>(
autoSave: AutoSaveStore<TPayload, unknown> | null
) {
if (!autoSave) return // No guards needed for create mode
// Navigation guard: flush autosave before route change
@ -21,8 +23,12 @@ export function useFormGuards(autoSave: AutoSaveStore<unknown, unknown> | null)
// Warn before closing browser tab/window if unsaved changes
$effect(() => {
// Capture autoSave in closure to avoid non-null assertions
const store = autoSave
if (!store) return
function handleBeforeUnload(event: BeforeUnloadEvent) {
if (autoSave!.status !== 'saved') {
if (store.status !== 'saved') {
event.preventDefault()
event.returnValue = ''
}
@ -34,13 +40,17 @@ export function useFormGuards(autoSave: AutoSaveStore<unknown, unknown> | null)
// Cmd/Ctrl+S keyboard shortcut for immediate save
$effect(() => {
// Capture autoSave in closure to avoid non-null assertions
const store = autoSave
if (!store) return
function handleKeydown(event: KeyboardEvent) {
const key = event.key.toLowerCase()
const isModifier = event.metaKey || event.ctrlKey
if (isModifier && key === 's') {
event.preventDefault()
autoSave!.flush().catch((error) => {
store.flush().catch((error) => {
console.error('Autosave flush failed:', error)
toast.error('Failed to save changes')
})

136
src/lib/components/admin/AlbumForm.svelte
View file

@ -6,10 +6,15 @@
import Input from './Input.svelte'
import DropdownSelectField from './DropdownSelectField.svelte'
import AutoSaveStatus from './AutoSaveStatus.svelte'
import DraftPrompt from './DraftPrompt.svelte'
import UnifiedMediaModal from './UnifiedMediaModal.svelte'
import SmartImage from '../SmartImage.svelte'
import Composer from './composer'
import { toast } from '$lib/stores/toast'
import { makeDraftKey, saveDraft, clearDraft } from '$lib/admin/draftStore'
import { createAutoSaveStore } from '$lib/admin/autoSave.svelte'
import { useDraftRecovery } from '$lib/admin/useDraftRecovery.svelte'
import { useFormGuards } from '$lib/admin/useFormGuards.svelte'
import type { Album, Media } from '@prisma/client'
import type { JSONContent } from '@tiptap/core'
@ -33,6 +38,7 @@
// State
let isLoading = $state(mode === 'edit')
let hasLoaded = $state(mode === 'create')
let _isSaving = $state(false)
let _validationErrors = $state<Record<string, string>>({})
let showBulkAlbumModal = $state(false)
@ -40,6 +46,13 @@
let editorInstance = $state<{ save: () => Promise<JSONContent>; clear: () => void } | undefined>()
let activeTab = $state('metadata')
let pendingMediaIds = $state<number[]>([]) // Photos to add after album creation
let updatedAt = $state<string | undefined>(
album?.updatedAt
? typeof album.updatedAt === 'string'
? album.updatedAt
: album.updatedAt.toISOString()
: undefined
)
const tabOptions = [
{ value: 'metadata', label: 'Metadata' },
@ -73,6 +86,76 @@
// Derived state for existing media IDs
const existingMediaIds = $derived(albumMedia.map((item) => item.media.id))
// Draft key for autosave fallback
const draftKey = $derived(mode === 'edit' && album ? makeDraftKey('album', album.id) : null)
function buildPayload() {
return {
title: formData.title,
slug: formData.slug,
description: null,
date: formData.year || null,
location: formData.location || null,
showInUniverse: formData.showInUniverse,
status: formData.status,
content: formData.content,
updatedAt
}
}
// Autosave store (edit mode only)
// Initialized as null and created reactively when album data becomes available
let autoSave = $state<ReturnType<typeof createAutoSaveStore<ReturnType<typeof buildPayload>, Album>> | null>(null)
// INITIALIZATION ORDER:
// 1. This effect creates autoSave when album prop becomes available
// 2. useFormGuards is called immediately after creation (same effect)
// 3. Other effects check for autoSave existence before using it
$effect(() => {
// Create autoSave when album becomes available (only once)
if (mode === 'edit' && album && !autoSave) {
const albumId = album.id // Capture album ID to avoid null reference
autoSave = createAutoSaveStore({
debounceMs: 2000,
getPayload: () => (hasLoaded ? buildPayload() : null),
save: async (payload, { signal }) => {
const response = await fetch(`/api/albums/${albumId}`, {
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: Album, { prime }) => {
updatedAt =
typeof saved.updatedAt === 'string' ? saved.updatedAt : saved.updatedAt.toISOString()
prime(buildPayload())
if (draftKey) clearDraft(draftKey)
}
})
// Form guards (navigation protection, Cmd+S, beforeunload)
useFormGuards(autoSave)
}
})
// Draft recovery helper
const draftRecovery = useDraftRecovery<ReturnType<typeof buildPayload>>({
draftKey: () => draftKey,
onRestore: (payload) => {
formData.title = payload.title ?? formData.title
formData.slug = payload.slug ?? formData.slug
formData.status = payload.status ?? formData.status
formData.year = payload.date ?? formData.year
formData.location = payload.location ?? formData.location
formData.showInUniverse = payload.showInUniverse ?? formData.showInUniverse
formData.content = payload.content ?? formData.content
}
})
// Watch for album changes and populate form data
$effect(() => {
if (album && mode === 'edit') {
@ -93,6 +176,49 @@
}
})
// Prime autosave on initial load (edit mode only)
$effect(() => {
if (mode === 'edit' && album && !hasLoaded && autoSave) {
autoSave.prime(buildPayload())
hasLoaded = true
}
})
// Trigger autosave when form data changes
// Using `void` operator to explicitly track dependencies without using their values
// This effect re-runs whenever any of these form fields change
$effect(() => {
void formData.title
void formData.slug
void formData.status
void formData.year
void formData.location
void formData.showInUniverse
void formData.content
void activeTab
if (hasLoaded && autoSave) {
autoSave.schedule()
}
})
// Save draft only when autosave fails
$effect(() => {
if (hasLoaded && autoSave && draftKey) {
const saveStatus = autoSave.status
if (saveStatus === 'error' || saveStatus === 'offline') {
saveDraft(draftKey, buildPayload())
}
}
})
// Cleanup autosave on unmount
$effect(() => {
if (autoSave) {
const instance = autoSave
return () => instance.destroy()
}
})
function populateFormData(data: Album) {
formData = {
title: data.title || '',
@ -275,13 +401,21 @@
<div class="header-actions">
{#if !isLoading}
<AutoSaveStatus
status="idle"
status={autoSave?.status ?? 'idle'}
lastSavedAt={album?.updatedAt}
/>
{/if}
</div>
</header>
{#if draftRecovery.showPrompt}
<DraftPrompt
timeAgo={draftRecovery.draftTimeText}
onRestore={draftRecovery.restore}
onDismiss={draftRecovery.dismiss}
/>
{/if}
<div class="admin-container">
{#if isLoading}
<div class="loading">Loading album...</div>

210
src/lib/components/admin/EssayForm.svelte
View file

@ -1,14 +1,17 @@
<script lang="ts">
import { goto, beforeNavigate } from '$app/navigation'
import { goto } 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 DropdownSelectField from './DropdownSelectField.svelte'
import DraftPrompt from './DraftPrompt.svelte'
import { toast } from '$lib/stores/toast'
import { makeDraftKey, saveDraft, loadDraft, clearDraft, timeAgo } from '$lib/admin/draftStore'
import { makeDraftKey, saveDraft, clearDraft } from '$lib/admin/draftStore'
import { createAutoSaveStore } from '$lib/admin/autoSave.svelte'
import { useDraftRecovery } from '$lib/admin/useDraftRecovery.svelte'
import { useFormGuards } from '$lib/admin/useFormGuards.svelte'
import AutoSaveStatus from './AutoSaveStatus.svelte'
import type { JSONContent } from '@tiptap/core'
import type { Post } from '@prisma/client'
@ -44,14 +47,10 @@
// Ref to the editor component
let editorRef: { save: () => Promise<JSONContent> } | undefined
// 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))
// Draft key for autosave fallback
const draftKey = $derived(mode === 'edit' && postId ? makeDraftKey('post', postId) : null)
function buildPayload() {
function buildPayload() {
return {
title,
slug,
@ -61,10 +60,10 @@ function buildPayload() {
tags,
updatedAt
}
}
}
// Autosave store (edit mode only)
let autoSave = mode === 'edit' && postId
// Autosave store (edit mode only)
const autoSave = mode === 'edit' && postId
? createAutoSaveStore({
debounceMs: 2000,
getPayload: () => (hasLoaded ? buildPayload() : null),
@ -87,6 +86,21 @@ let autoSave = mode === 'edit' && postId
})
: null
// Draft recovery helper
const draftRecovery = useDraftRecovery<ReturnType<typeof buildPayload>>({
draftKey: () => draftKey,
onRestore: (payload) => {
title = payload.title ?? title
slug = payload.slug ?? slug
status = payload.status ?? status
content = payload.content ?? content
tags = payload.tags ?? tags
}
})
// Form guards (navigation protection, Cmd+S, beforeunload)
useFormGuards(autoSave)
const tabOptions = [
{ value: 'metadata', label: 'Metadata' },
{ value: 'content', label: 'Content' }
@ -106,14 +120,14 @@ let autoSave = mode === 'edit' && postId
]
// Auto-generate slug from title
$effect(() => {
$effect(() => {
if (title && !slug) {
slug = title
.toLowerCase()
.replace(/[^a-z0-9]+/g, '-')
.replace(/^-+|-+$/g, '')
}
})
})
// Prime autosave on initial load (edit mode only)
$effect(() => {
@ -133,7 +147,7 @@ $effect(() => {
// Save draft only when autosave fails
$effect(() => {
if (hasLoaded && autoSave) {
if (hasLoaded && autoSave && draftKey) {
const saveStatus = autoSave.status
if (saveStatus === 'error' || saveStatus === 'offline') {
saveDraft(draftKey, buildPayload())
@ -141,88 +155,6 @@ $effect(() => {
}
})
// Show restore prompt if a draft exists
$effect(() => {
const draft = loadDraft<ReturnType<typeof buildPayload>>(draftKey)
if (draft) {
showDraftPrompt = true
draftTimestamp = draft.ts
}
})
function restoreDraft() {
const draft = loadDraft<ReturnType<typeof buildPayload>>(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
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)
}
})
// Navigation guard: flush autosave before navigating away (only if unsaved)
beforeNavigate(async () => {
if (hasLoaded && autoSave) {
if (autoSave.status === 'saved') {
return
}
// Flush any pending changes before allowing navigation to proceed
try {
await autoSave.flush()
} 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) {
@ -332,18 +264,12 @@ $effect(() => {
</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 draftRecovery.showPrompt}
<DraftPrompt
timeAgo={draftRecovery.draftTimeText}
onRestore={draftRecovery.restore}
onDismiss={draftRecovery.dismiss}
/>
{/if}
<div class="admin-container">
@ -480,72 +406,6 @@ $effect(() => {
display: flex;
}
.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;
@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;
}
}
}
// Custom styles for save/publish buttons to maintain grey color scheme
:global(.save-button.btn-primary) {
background-color: $gray-10;

212
src/routes/admin/posts/[id]/edit/+page.svelte
View file

@ -1,16 +1,19 @@
<script lang="ts">
import { page } from '$app/stores'
import { goto, beforeNavigate } from '$app/navigation'
import { onMount } from 'svelte'
import { api } from '$lib/admin/api'
import { makeDraftKey, saveDraft, loadDraft, clearDraft, timeAgo } from '$lib/admin/draftStore'
import { goto } from '$app/navigation'
import { onMount } from 'svelte'
import { api } from '$lib/admin/api'
import { makeDraftKey, saveDraft, clearDraft } from '$lib/admin/draftStore'
import { createAutoSaveStore } from '$lib/admin/autoSave.svelte'
import { useDraftRecovery } from '$lib/admin/useDraftRecovery.svelte'
import { useFormGuards } from '$lib/admin/useFormGuards.svelte'
import AdminPage from '$lib/components/admin/AdminPage.svelte'
import Composer from '$lib/components/admin/composer'
import LoadingSpinner from '$lib/components/admin/LoadingSpinner.svelte'
import PostMetadataPopover from '$lib/components/admin/PostMetadataPopover.svelte'
import DeleteConfirmationModal from '$lib/components/admin/DeleteConfirmationModal.svelte'
import DraftPrompt from '$lib/components/admin/DraftPrompt.svelte'
import StatusDropdown from '$lib/components/admin/StatusDropdown.svelte'
import { createAutoSaveStore } from '$lib/admin/autoSave.svelte'
import AutoSaveStatus from '$lib/components/admin/AutoSaveStatus.svelte'
import type { JSONContent } from '@tiptap/core'
import type { Post } from '@prisma/client'
@ -59,12 +62,8 @@ import { makeDraftKey, saveDraft, loadDraft, clearDraft, timeAgo } from '$lib/ad
let metadataButtonRef: HTMLButtonElement | undefined = $state.raw()
let showDeleteConfirmation = $state(false)
// Draft backup
const draftKey = $derived(makeDraftKey('post', $page.params.id))
let showDraftPrompt = $state(false)
let draftTimestamp = $state<number | null>(null)
let timeTicker = $state(0)
const draftTimeText = $derived.by(() => (draftTimestamp ? (timeTicker, timeAgo(draftTimestamp)) : null))
// Draft key for autosave fallback
const draftKey = $derived(makeDraftKey('post', $page.params.id))
const postTypeConfig = {
post: { icon: '💭', label: 'Post', showTitle: false, showContent: true },
@ -74,7 +73,7 @@ const draftTimeText = $derived.by(() => (draftTimestamp ? (timeTicker, timeAgo(d
let config = $derived(postTypeConfig[postType])
// Autosave store
let autoSave = createAutoSaveStore({
const autoSave = createAutoSaveStore({
debounceMs: 2000,
getPayload: () => {
if (!hasLoaded) return null
@ -109,6 +108,23 @@ const draftTimeText = $derived.by(() => (draftTimestamp ? (timeTicker, timeAgo(d
}
})
// Draft recovery helper
const draftRecovery = useDraftRecovery<DraftPayload>({
draftKey: () => draftKey,
onRestore: (payload) => {
if (payload.title !== undefined) title = payload.title ?? ''
if (payload.slug !== undefined) slug = payload.slug
if (payload.type !== undefined) postType = payload.type as 'post' | 'essay'
if (payload.status !== undefined) status = payload.status as 'draft' | 'published'
if (payload.content !== undefined) content = payload.content ?? { type: 'doc', content: [] }
if (payload.excerpt !== undefined) excerpt = payload.excerpt ?? ''
if (payload.tags !== undefined) tags = payload.tags
}
})
// Form guards (navigation protection, Cmd+S, beforeunload)
useFormGuards(autoSave)
// Convert blocks format (from database) to Tiptap format
function convertBlocksToTiptap(blocksContent: BlockContent): JSONContent {
if (!blocksContent || !blocksContent.blocks) {
@ -208,16 +224,11 @@ const draftTimeText = $derived.by(() => (draftTimestamp ? (timeTicker, timeAgo(d
}
}
onMount(async () => {
onMount(async () => {
// Wait a tick to ensure page params are loaded
await new Promise((resolve) => setTimeout(resolve, 0))
await loadPost()
const draft = loadDraft<DraftPayload>(draftKey)
if (draft) {
showDraftPrompt = true
draftTimestamp = draft.ts
}
})
})
async function loadPost() {
const postId = $page.params.id
@ -335,27 +346,6 @@ onMount(async () => {
}
}
function restoreDraft() {
const draft = loadDraft<DraftPayload>(draftKey)
if (!draft) return
const p = draft.payload
// Apply payload fields to form
if (p.title !== undefined) title = p.title
if (p.slug !== undefined) slug = p.slug
if (p.type !== undefined) postType = p.type
if (p.status !== undefined) status = p.status
if (p.content !== undefined) content = p.content
if (p.excerpt !== undefined) excerpt = p.excerpt
if (p.tags !== undefined) tags = p.tags
showDraftPrompt = false
clearDraft(draftKey)
}
function dismissDraft() {
showDraftPrompt = false
clearDraft(draftKey)
}
function handleMetadataPopover(event: MouseEvent) {
const target = event.target as Node
// Don't close if clicking inside the metadata button or anywhere in a metadata popover
@ -403,68 +393,10 @@ onMount(async () => {
}
})
// Navigation guard: flush autosave before navigating away (only if there are unsaved changes)
beforeNavigate(async (_navigation) => {
if (hasLoaded) {
// If status is 'saved', there are no unsaved changes - allow navigation
if (autoSave.status === 'saved') {
return
}
// Otherwise, flush any pending changes before allowing navigation to proceed
try {
await autoSave.flush()
} catch (error) {
console.error('Autosave flush failed:', error)
}
}
})
// Warn before closing browser tab/window if there are unsaved changes
$effect(() => {
if (!hasLoaded) 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
$effect(() => {
if (!hasLoaded) 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(() => {
return () => autoSave.destroy()
})
// Auto-update draft time text every minute when prompt visible
$effect(() => {
if (showDraftPrompt) {
const id = setInterval(() => (timeTicker = timeTicker + 1), 60000)
return () => clearInterval(id)
}
})
</script>
<svelte:head>
@ -542,18 +474,12 @@ $effect(() => {
{/if}
</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 draftRecovery.showPrompt}
<DraftPrompt
timeAgo={draftRecovery.draftTimeText}
onRestore={draftRecovery.restore}
onDismiss={draftRecovery.dismiss}
/>
{/if}
{#if loading}
@ -636,72 +562,6 @@ $effect(() => {
gap: $unit-2x;
}
.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;
@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;
}
}
}
.btn-icon {
width: 40px;
height: 40px;