Compare commits
No commits in common. "main" and "devin/1763907694-fix-linter-errors" have entirely different histories.
main
...
devin/1763
20 changed files with 1081 additions and 303 deletions
|
|
@ -1,3 +0,0 @@
|
|||
onlyBuiltDependencies:
|
||||
- "@musicorum/lastfm"
|
||||
- "psn-api"
|
||||
|
|
@ -8,7 +8,7 @@ export interface AutoSaveStoreOptions<TPayload, TResponse = unknown> {
|
|||
onSaved?: (res: TResponse, ctx: { prime: (payload: TPayload) => void }) => void
|
||||
}
|
||||
|
||||
export interface AutoSaveStore<TPayload, _TResponse = unknown> {
|
||||
export interface AutoSaveStore<TPayload> {
|
||||
readonly status: AutoSaveStatus
|
||||
readonly lastError: string | null
|
||||
schedule: () => void
|
||||
|
|
@ -36,7 +36,7 @@ export interface AutoSaveStore<TPayload, _TResponse = unknown> {
|
|||
*/
|
||||
export function createAutoSaveStore<TPayload, TResponse = unknown>(
|
||||
opts: AutoSaveStoreOptions<TPayload, TResponse>
|
||||
): AutoSaveStore<TPayload, unknown> {
|
||||
): AutoSaveStore<TPayload> {
|
||||
const debounceMs = opts.debounceMs ?? 2000
|
||||
const idleResetMs = opts.idleResetMs ?? 2000
|
||||
let timer: ReturnType<typeof setTimeout> | null = null
|
||||
|
|
@ -70,9 +70,6 @@ export function createAutoSaveStore<TPayload, TResponse = unknown>(
|
|||
|
||||
function schedule() {
|
||||
if (timer) clearTimeout(timer)
|
||||
if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
|
||||
console.debug(`[AutoSave] Scheduled (${debounceMs}ms debounce)`)
|
||||
}
|
||||
timer = setTimeout(() => void run(), debounceMs)
|
||||
}
|
||||
|
||||
|
|
@ -83,44 +80,24 @@ export function createAutoSaveStore<TPayload, TResponse = unknown>(
|
|||
}
|
||||
|
||||
const payload = opts.getPayload()
|
||||
if (!payload) {
|
||||
if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
|
||||
console.debug('[AutoSave] Skipped: getPayload returned null/undefined')
|
||||
}
|
||||
return
|
||||
}
|
||||
if (!payload) return
|
||||
|
||||
const hash = safeHash(payload)
|
||||
if (lastSentHash && hash === lastSentHash) {
|
||||
if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
|
||||
console.debug('[AutoSave] Skipped: payload unchanged (hash match)')
|
||||
}
|
||||
return
|
||||
}
|
||||
if (lastSentHash && hash === lastSentHash) return
|
||||
|
||||
if (controller) controller.abort()
|
||||
controller = new AbortController()
|
||||
|
||||
if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
|
||||
console.debug('[AutoSave] Saving...', { hashChanged: lastSentHash !== hash })
|
||||
}
|
||||
|
||||
setStatus('saving')
|
||||
lastError = null
|
||||
try {
|
||||
const res = await opts.save(payload, { signal: controller.signal })
|
||||
lastSentHash = hash
|
||||
setStatus('saved')
|
||||
if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
|
||||
console.debug('[AutoSave] Saved successfully')
|
||||
}
|
||||
if (opts.onSaved) opts.onSaved(res, { prime })
|
||||
} catch (e) {
|
||||
if (e instanceof Error && e.name === 'AbortError') {
|
||||
} catch (e: unknown) {
|
||||
if (e?.name === 'AbortError') {
|
||||
// Newer save superseded this one
|
||||
if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
|
||||
console.debug('[AutoSave] Aborted: superseded by newer save')
|
||||
}
|
||||
return
|
||||
}
|
||||
if (typeof navigator !== 'undefined' && navigator.onLine === false) {
|
||||
|
|
@ -128,10 +105,7 @@ export function createAutoSaveStore<TPayload, TResponse = unknown>(
|
|||
} else {
|
||||
setStatus('error')
|
||||
}
|
||||
lastError = e instanceof Error ? e.message : 'Auto-save failed'
|
||||
if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
|
||||
console.debug('[AutoSave] Error:', lastError)
|
||||
}
|
||||
lastError = e?.message || 'Auto-save failed'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,10 +17,9 @@ export function useDraftRecovery<TPayload>(options: {
|
|||
|
||||
// Auto-detect draft on mount using $effect
|
||||
$effect(() => {
|
||||
const key = options.draftKey()
|
||||
if (!key || options.enabled === false) return
|
||||
if (!options.draftKey || options.enabled === false) return
|
||||
|
||||
const draft = loadDraft<TPayload>(key)
|
||||
const draft = loadDraft<TPayload>(options.draftKey)
|
||||
if (draft) {
|
||||
showPrompt = true
|
||||
draftTimestamp = draft.ts
|
||||
|
|
@ -44,21 +43,19 @@ export function useDraftRecovery<TPayload>(options: {
|
|||
draftTimeText,
|
||||
|
||||
restore() {
|
||||
const key = options.draftKey()
|
||||
if (!key) return
|
||||
const draft = loadDraft<TPayload>(key)
|
||||
if (!options.draftKey) return
|
||||
const draft = loadDraft<TPayload>(options.draftKey)
|
||||
if (!draft) return
|
||||
|
||||
options.onRestore(draft.payload)
|
||||
showPrompt = false
|
||||
clearDraft(key)
|
||||
clearDraft(options.draftKey)
|
||||
},
|
||||
|
||||
dismiss() {
|
||||
const key = options.draftKey()
|
||||
if (!key) return
|
||||
if (!options.draftKey) return
|
||||
showPrompt = false
|
||||
clearDraft(key)
|
||||
clearDraft(options.draftKey)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,7 @@ import { beforeNavigate } from '$app/navigation'
|
|||
import { toast } from '$lib/stores/toast'
|
||||
import type { AutoSaveStore } from '$lib/admin/autoSave.svelte'
|
||||
|
||||
export function useFormGuards<TPayload = unknown, _TResponse = unknown>(
|
||||
autoSave: AutoSaveStore<TPayload, unknown> | null
|
||||
) {
|
||||
export function useFormGuards(autoSave: AutoSaveStore<unknown, unknown> | null) {
|
||||
if (!autoSave) return // No guards needed for create mode
|
||||
|
||||
// Navigation guard: flush autosave before route change
|
||||
|
|
@ -23,12 +21,8 @@ export function useFormGuards<TPayload = unknown, _TResponse = unknown>(
|
|||
|
||||
// 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 (store.status !== 'saved') {
|
||||
if (autoSave!.status !== 'saved') {
|
||||
event.preventDefault()
|
||||
event.returnValue = ''
|
||||
}
|
||||
|
|
@ -40,17 +34,13 @@ export function useFormGuards<TPayload = unknown, _TResponse = unknown>(
|
|||
|
||||
// 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()
|
||||
store.flush().catch((error) => {
|
||||
autoSave!.flush().catch((error) => {
|
||||
console.error('Autosave flush failed:', error)
|
||||
toast.error('Failed to save changes')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
import { z } from 'zod'
|
||||
import AdminPage from './AdminPage.svelte'
|
||||
import AdminSegmentedControl from './AdminSegmentedControl.svelte'
|
||||
import Button from './Button.svelte'
|
||||
import Input from './Input.svelte'
|
||||
import DropdownSelectField from './DropdownSelectField.svelte'
|
||||
import AutoSaveStatus from './AutoSaveStatus.svelte'
|
||||
import UnifiedMediaModal from './UnifiedMediaModal.svelte'
|
||||
import SmartImage from '../SmartImage.svelte'
|
||||
import Composer from './composer'
|
||||
|
|
@ -33,9 +33,8 @@
|
|||
|
||||
// State
|
||||
let isLoading = $state(mode === 'edit')
|
||||
let hasLoaded = $state(mode === 'create')
|
||||
let isSaving = $state(false)
|
||||
let validationErrors = $state<Record<string, string>>({})
|
||||
let _isSaving = $state(false)
|
||||
let _validationErrors = $state<Record<string, string>>({})
|
||||
let showBulkAlbumModal = $state(false)
|
||||
let albumMedia = $state<Array<{ media: Media; displayOrder: number }>>([])
|
||||
let editorInstance = $state<{ save: () => Promise<JSONContent>; clear: () => void } | undefined>()
|
||||
|
|
@ -76,10 +75,9 @@
|
|||
|
||||
// Watch for album changes and populate form data
|
||||
$effect(() => {
|
||||
if (album && mode === 'edit' && !hasLoaded) {
|
||||
if (album && mode === 'edit') {
|
||||
populateFormData(album)
|
||||
loadAlbumMedia()
|
||||
hasLoaded = true
|
||||
} else if (mode === 'create') {
|
||||
isLoading = false
|
||||
}
|
||||
|
|
@ -113,9 +111,9 @@
|
|||
if (!album) return
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/albums/${album.id}`, {
|
||||
credentials: 'same-origin'
|
||||
})
|
||||
const response = await fetch(`/api/albums/${album.id}`, {
|
||||
credentials: 'same-origin'
|
||||
})
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
albumMedia = data.media || []
|
||||
|
|
@ -133,7 +131,7 @@
|
|||
location: formData.location || undefined,
|
||||
year: formData.year || undefined
|
||||
})
|
||||
validationErrors = {}
|
||||
_validationErrors = {}
|
||||
return true
|
||||
} catch (err) {
|
||||
if (err instanceof z.ZodError) {
|
||||
|
|
@ -143,22 +141,23 @@
|
|||
errors[e.path[0].toString()] = e.message
|
||||
}
|
||||
})
|
||||
validationErrors = errors
|
||||
_validationErrors = errors
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
async function _handleSave() {
|
||||
if (!validateForm()) {
|
||||
toast.error('Please fix the validation errors')
|
||||
return
|
||||
}
|
||||
|
||||
isSaving = true
|
||||
const loadingToastId = toast.loading(`${mode === 'edit' ? 'Saving' : 'Creating'} album...`)
|
||||
|
||||
try {
|
||||
_isSaving = true
|
||||
|
||||
const payload = {
|
||||
title: formData.title,
|
||||
slug: formData.slug,
|
||||
|
|
@ -167,8 +166,7 @@
|
|||
location: formData.location || null,
|
||||
showInUniverse: formData.showInUniverse,
|
||||
status: formData.status,
|
||||
content: formData.content,
|
||||
updatedAt: mode === 'edit' ? album?.updatedAt : undefined
|
||||
content: formData.content
|
||||
}
|
||||
|
||||
const url = mode === 'edit' ? `/api/albums/${album?.id}` : '/api/albums'
|
||||
|
|
@ -242,7 +240,7 @@
|
|||
)
|
||||
console.error(err)
|
||||
} finally {
|
||||
isSaving = false
|
||||
_isSaving = false
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -275,13 +273,12 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<Button
|
||||
variant="primary"
|
||||
onclick={handleSave}
|
||||
disabled={isSaving}
|
||||
>
|
||||
{isSaving ? 'Saving...' : 'Save'}
|
||||
</Button>
|
||||
{#if !isLoading}
|
||||
<AutoSaveStatus
|
||||
status="idle"
|
||||
lastSavedAt={album?.updatedAt}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -454,6 +451,25 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: $gray-40;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: $gray-90;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
lastSavedAt?: Date | string | null
|
||||
showTimestamp?: boolean
|
||||
compact?: boolean
|
||||
onclick?: () => void
|
||||
}
|
||||
|
||||
let {
|
||||
|
|
@ -20,8 +19,7 @@
|
|||
error: errorProp,
|
||||
lastSavedAt,
|
||||
showTimestamp = true,
|
||||
compact = true,
|
||||
onclick
|
||||
compact = true
|
||||
}: Props = $props()
|
||||
|
||||
// Support both old subscription-based stores and new reactive values
|
||||
|
|
@ -83,19 +81,12 @@
|
|||
</script>
|
||||
|
||||
{#if label}
|
||||
<button
|
||||
type="button"
|
||||
class="autosave-status"
|
||||
class:compact
|
||||
class:clickable={!!onclick && status !== 'saving'}
|
||||
onclick={onclick}
|
||||
disabled={status === 'saving'}
|
||||
>
|
||||
<div class="autosave-status" class:compact>
|
||||
{#if status === 'saving'}
|
||||
<span class="spinner" aria-hidden="true"></span>
|
||||
{/if}
|
||||
<span class="text">{label}</span>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -105,26 +96,10 @@
|
|||
gap: 6px;
|
||||
color: $gray-40;
|
||||
font-size: 0.875rem;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-family: inherit;
|
||||
|
||||
&.compact {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
&.clickable {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
toggleChecked?: boolean
|
||||
toggleDisabled?: boolean
|
||||
showToggle?: boolean
|
||||
onToggleChange?: (checked: boolean) => void
|
||||
children?: import('svelte').Snippet
|
||||
}
|
||||
|
||||
|
|
@ -15,7 +14,6 @@
|
|||
toggleChecked = $bindable(false),
|
||||
toggleDisabled = false,
|
||||
showToggle = true,
|
||||
onToggleChange,
|
||||
children
|
||||
}: Props = $props()
|
||||
</script>
|
||||
|
|
@ -24,7 +22,7 @@
|
|||
<header class="branding-section__header">
|
||||
<h2 class="branding-section__title">{title}</h2>
|
||||
{#if showToggle}
|
||||
<BrandingToggle bind:checked={toggleChecked} disabled={toggleDisabled} onchange={onToggleChange} />
|
||||
<BrandingToggle bind:checked={toggleChecked} disabled={toggleDisabled} />
|
||||
{/if}
|
||||
</header>
|
||||
<div class="branding-section__content">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<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'
|
||||
|
|
@ -7,7 +7,11 @@
|
|||
import Input from './Input.svelte'
|
||||
import DropdownSelectField from './DropdownSelectField.svelte'
|
||||
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'
|
||||
import type { Post } from '@prisma/client'
|
||||
|
||||
interface Props {
|
||||
postId?: number
|
||||
|
|
@ -25,9 +29,9 @@
|
|||
let { postId, initialData, mode }: Props = $props()
|
||||
|
||||
// State
|
||||
let hasLoaded = $state(mode === 'create')
|
||||
let isSaving = $state(false)
|
||||
let hasLoaded = $state(mode === 'create') // Create mode loads immediately
|
||||
let activeTab = $state('metadata')
|
||||
let updatedAt = $state<string | undefined>(initialData?.updatedAt)
|
||||
|
||||
// Form data
|
||||
let title = $state(initialData?.title || '')
|
||||
|
|
@ -40,6 +44,49 @@
|
|||
// 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))
|
||||
|
||||
function buildPayload() {
|
||||
return {
|
||||
title,
|
||||
slug,
|
||||
type: 'essay',
|
||||
status,
|
||||
content,
|
||||
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: Post, { prime }) => {
|
||||
updatedAt = saved.updatedAt.toISOString()
|
||||
prime(buildPayload())
|
||||
if (draftKey) clearDraft(draftKey)
|
||||
}
|
||||
})
|
||||
: null
|
||||
|
||||
const tabOptions = [
|
||||
{ value: 'metadata', label: 'Metadata' },
|
||||
{ value: 'content', label: 'Content' }
|
||||
|
|
@ -59,19 +106,127 @@
|
|||
]
|
||||
|
||||
// Auto-generate slug from title
|
||||
$effect(() => {
|
||||
if (title && !slug) {
|
||||
$effect(() => {
|
||||
if (title && !slug) {
|
||||
slug = title
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, '-')
|
||||
.replace(/^-+|-+$/g, '')
|
||||
}
|
||||
})
|
||||
|
||||
// Prime autosave on initial load (edit mode only)
|
||||
$effect(() => {
|
||||
if (mode === 'edit' && initialData && !hasLoaded && autoSave) {
|
||||
autoSave.prime(buildPayload())
|
||||
hasLoaded = true
|
||||
}
|
||||
})
|
||||
|
||||
// Mark as loaded for edit mode
|
||||
// Trigger autosave when form data changes
|
||||
$effect(() => {
|
||||
if (mode === 'edit' && initialData && !hasLoaded) {
|
||||
hasLoaded = true
|
||||
void title; void slug; void status; void content; void tags; void 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(() => {
|
||||
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) {
|
||||
return () => autoSave.destroy()
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -104,18 +259,16 @@
|
|||
return
|
||||
}
|
||||
|
||||
isSaving = true
|
||||
const loadingToastId = toast.loading(`${mode === 'edit' ? 'Saving' : 'Creating'} essay...`)
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
title,
|
||||
slug,
|
||||
type: 'essay',
|
||||
type: 'essay', // No mapping needed anymore
|
||||
status,
|
||||
content,
|
||||
tags,
|
||||
updatedAt: mode === 'edit' ? initialData?.updatedAt : undefined
|
||||
tags
|
||||
}
|
||||
|
||||
const url = mode === 'edit' ? `/api/posts/${postId}` : '/api/posts'
|
||||
|
|
@ -141,7 +294,8 @@
|
|||
const savedPost = await response.json()
|
||||
|
||||
toast.dismiss(loadingToastId)
|
||||
toast.success(`Essay ${mode === 'edit' ? 'saved' : 'created'} successfully!`)
|
||||
toast.success(`Essay ${mode === 'edit' ? 'saved' : 'created'} successfully!`)
|
||||
clearDraft(draftKey)
|
||||
|
||||
if (mode === 'create') {
|
||||
goto(`/admin/posts/${savedPost.id}/edit`)
|
||||
|
|
@ -150,10 +304,9 @@
|
|||
toast.dismiss(loadingToastId)
|
||||
toast.error(`Failed to ${mode === 'edit' ? 'save' : 'create'} essay`)
|
||||
console.error(err)
|
||||
} finally {
|
||||
isSaving = false
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<AdminPage>
|
||||
|
|
@ -169,16 +322,30 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<Button
|
||||
variant="primary"
|
||||
onclick={handleSave}
|
||||
disabled={isSaving}
|
||||
>
|
||||
{isSaving ? 'Saving...' : 'Save'}
|
||||
</Button>
|
||||
{#if mode === 'edit' && autoSave}
|
||||
<AutoSaveStatus
|
||||
status={autoSave.status}
|
||||
error={autoSave.lastError}
|
||||
lastSavedAt={initialData?.updatedAt}
|
||||
/>
|
||||
{/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">
|
||||
<div class="tab-panels">
|
||||
<!-- Metadata Panel -->
|
||||
|
|
@ -308,6 +475,143 @@
|
|||
}
|
||||
}
|
||||
|
||||
.save-actions {
|
||||
position: relative;
|
||||
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;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: $gray-20;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
background-color: $gray-30;
|
||||
}
|
||||
}
|
||||
|
||||
.save-button {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
padding-right: $unit-2x;
|
||||
}
|
||||
|
||||
:global(.chevron-button.btn-primary) {
|
||||
background-color: $gray-10;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: $gray-20;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
background-color: $gray-30;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
.chevron-button {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.2);
|
||||
|
||||
svg {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&.active svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.publish-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: $unit;
|
||||
background: white;
|
||||
border-radius: $unit;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
min-width: 120px;
|
||||
z-index: 100;
|
||||
|
||||
.menu-item {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-panels {
|
||||
position: relative;
|
||||
|
||||
|
|
@ -329,6 +633,26 @@
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.error-message,
|
||||
.success-message {
|
||||
padding: $unit-3x;
|
||||
border-radius: $unit;
|
||||
margin-bottom: $unit-4x;
|
||||
max-width: 700px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: #fee;
|
||||
color: #d33;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background-color: #efe;
|
||||
color: #363;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin-bottom: $unit-6x;
|
||||
|
||||
|
|
|
|||
|
|
@ -97,8 +97,7 @@ let autoSave = mode === 'edit' && postId
|
|||
return await response.json()
|
||||
},
|
||||
onSaved: (saved: Post, { prime }) => {
|
||||
updatedAt =
|
||||
typeof saved.updatedAt === 'string' ? saved.updatedAt : saved.updatedAt.toISOString()
|
||||
updatedAt = saved.updatedAt.toISOString()
|
||||
prime(buildPayload())
|
||||
if (draftKey) clearDraft(draftKey)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,10 @@
|
|||
interface Props {
|
||||
formData: ProjectFormData
|
||||
validationErrors: Record<string, string>
|
||||
onSave?: () => Promise<void>
|
||||
}
|
||||
|
||||
let { formData = $bindable(), validationErrors }: Props = $props()
|
||||
let { formData = $bindable(), validationErrors, onSave }: Props = $props()
|
||||
|
||||
// ===== Media State Management =====
|
||||
// Convert logoUrl string to Media object for ImageUploader
|
||||
|
|
@ -90,47 +91,16 @@
|
|||
if (!hasLogo) formData.showLogoInHeader = false
|
||||
})
|
||||
|
||||
// Track previous toggle states to detect which one changed
|
||||
let prevShowFeaturedImage: boolean | null = $state(null)
|
||||
let prevShowBackgroundColor: boolean | null = $state(null)
|
||||
|
||||
// Mutual exclusion: only one of featured image or background color can be active
|
||||
$effect(() => {
|
||||
// On first run (initial load), if both are true, default to featured image taking priority
|
||||
if (prevShowFeaturedImage === null && prevShowBackgroundColor === null) {
|
||||
if (formData.showFeaturedImageInHeader && formData.showBackgroundColorInHeader) {
|
||||
formData.showBackgroundColorInHeader = false
|
||||
}
|
||||
prevShowFeaturedImage = formData.showFeaturedImageInHeader
|
||||
prevShowBackgroundColor = formData.showBackgroundColorInHeader
|
||||
return
|
||||
}
|
||||
|
||||
const featuredChanged = formData.showFeaturedImageInHeader !== prevShowFeaturedImage
|
||||
const bgColorChanged = formData.showBackgroundColorInHeader !== prevShowBackgroundColor
|
||||
|
||||
if (featuredChanged && formData.showFeaturedImageInHeader && formData.showBackgroundColorInHeader) {
|
||||
// Featured image was just turned ON while background color was already ON
|
||||
formData.showBackgroundColorInHeader = false
|
||||
} else if (bgColorChanged && formData.showBackgroundColorInHeader && formData.showFeaturedImageInHeader) {
|
||||
// Background color was just turned ON while featured image was already ON
|
||||
formData.showFeaturedImageInHeader = false
|
||||
}
|
||||
|
||||
// Update previous values
|
||||
prevShowFeaturedImage = formData.showFeaturedImageInHeader
|
||||
prevShowBackgroundColor = formData.showBackgroundColorInHeader
|
||||
})
|
||||
|
||||
// ===== Upload Handlers =====
|
||||
function handleFeaturedImageUpload(media: Media) {
|
||||
formData.featuredImage = media.url
|
||||
featuredImageMedia = media
|
||||
}
|
||||
|
||||
function handleFeaturedImageRemove() {
|
||||
async function handleFeaturedImageRemove() {
|
||||
formData.featuredImage = ''
|
||||
featuredImageMedia = null
|
||||
if (onSave) await onSave()
|
||||
}
|
||||
|
||||
function handleLogoUpload(media: Media) {
|
||||
|
|
@ -138,9 +108,10 @@
|
|||
logoMedia = media
|
||||
}
|
||||
|
||||
function handleLogoRemove() {
|
||||
async function handleLogoRemove() {
|
||||
formData.logoUrl = ''
|
||||
logoMedia = null
|
||||
if (onSave) await onSave()
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,13 +3,19 @@
|
|||
import { api } from '$lib/admin/api'
|
||||
import AdminPage from './AdminPage.svelte'
|
||||
import AdminSegmentedControl from './AdminSegmentedControl.svelte'
|
||||
import Button from './Button.svelte'
|
||||
import Composer from './composer'
|
||||
import ProjectMetadataForm from './ProjectMetadataForm.svelte'
|
||||
import ProjectBrandingForm from './ProjectBrandingForm.svelte'
|
||||
import AutoSaveStatus from './AutoSaveStatus.svelte'
|
||||
import DraftPrompt from './DraftPrompt.svelte'
|
||||
import { toast } from '$lib/stores/toast'
|
||||
import type { Project } from '$lib/types/project'
|
||||
import { createAutoSaveStore } from '$lib/admin/autoSave.svelte'
|
||||
import { createProjectFormStore } from '$lib/stores/project-form.svelte'
|
||||
import { useDraftRecovery } from '$lib/admin/useDraftRecovery.svelte'
|
||||
import { useFormGuards } from '$lib/admin/useFormGuards.svelte'
|
||||
import { makeDraftKey, saveDraft, clearDraft } from '$lib/admin/draftStore'
|
||||
import type { ProjectFormData } from '$lib/types/project'
|
||||
import type { JSONContent } from '@tiptap/core'
|
||||
|
||||
interface Props {
|
||||
|
|
@ -25,12 +31,42 @@
|
|||
// UI state
|
||||
let isLoading = $state(mode === 'edit')
|
||||
let hasLoaded = $state(mode === 'create')
|
||||
let isSaving = $state(false)
|
||||
let activeTab = $state('metadata')
|
||||
let error = $state<string | null>(null)
|
||||
let successMessage = $state<string | null>(null)
|
||||
|
||||
// Ref to the editor component
|
||||
let editorRef: { save: () => Promise<JSONContent> } | undefined = $state.raw()
|
||||
|
||||
// Draft key for autosave fallback
|
||||
const draftKey = $derived(mode === 'edit' && project ? makeDraftKey('project', project.id) : null)
|
||||
|
||||
// Autosave (edit mode only)
|
||||
const autoSave = mode === 'edit'
|
||||
? createAutoSaveStore({
|
||||
debounceMs: 2000,
|
||||
getPayload: () => (hasLoaded ? formStore.buildPayload() : null),
|
||||
save: async (payload, { signal }) => {
|
||||
return await api.put(`/api/projects/${project?.id}`, payload, { signal })
|
||||
},
|
||||
onSaved: (savedProject: Project, { prime }) => {
|
||||
project = savedProject
|
||||
formStore.populateFromProject(savedProject)
|
||||
prime(formStore.buildPayload())
|
||||
if (draftKey) clearDraft(draftKey)
|
||||
}
|
||||
})
|
||||
: null
|
||||
|
||||
// Draft recovery helper
|
||||
const draftRecovery = useDraftRecovery<Partial<ProjectFormData>>({
|
||||
draftKey: () => draftKey,
|
||||
onRestore: (payload) => formStore.setFields(payload)
|
||||
})
|
||||
|
||||
// Form guards (navigation protection, Cmd+S, beforeunload)
|
||||
useFormGuards(autoSave)
|
||||
|
||||
const tabOptions = [
|
||||
{ value: 'metadata', label: 'Metadata' },
|
||||
{ value: 'branding', label: 'Branding' },
|
||||
|
|
@ -41,11 +77,40 @@
|
|||
$effect(() => {
|
||||
if (project && mode === 'edit' && !hasLoaded) {
|
||||
formStore.populateFromProject(project)
|
||||
if (autoSave) {
|
||||
autoSave.prime(formStore.buildPayload())
|
||||
}
|
||||
isLoading = false
|
||||
hasLoaded = true
|
||||
}
|
||||
})
|
||||
|
||||
// Trigger autosave when formData changes (edit mode)
|
||||
$effect(() => {
|
||||
// Establish dependencies on fields
|
||||
void formStore.fields; void activeTab
|
||||
if (mode === 'edit' && hasLoaded && autoSave) {
|
||||
autoSave.schedule()
|
||||
}
|
||||
})
|
||||
|
||||
// Save draft only when autosave fails
|
||||
$effect(() => {
|
||||
if (mode === 'edit' && autoSave && draftKey) {
|
||||
const status = autoSave.status
|
||||
if (status === 'error' || status === 'offline') {
|
||||
saveDraft(draftKey, formStore.buildPayload())
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Cleanup autosave on unmount
|
||||
$effect(() => {
|
||||
if (autoSave) {
|
||||
return () => autoSave.destroy()
|
||||
}
|
||||
})
|
||||
|
||||
function handleEditorChange(content: JSONContent) {
|
||||
formStore.setField('caseStudyContent', content)
|
||||
}
|
||||
|
|
@ -64,7 +129,6 @@
|
|||
return
|
||||
}
|
||||
|
||||
isSaving = true
|
||||
const loadingToastId = toast.loading(`${mode === 'edit' ? 'Saving' : 'Creating'} project...`)
|
||||
|
||||
try {
|
||||
|
|
@ -74,12 +138,6 @@
|
|||
updatedAt: mode === 'edit' ? project?.updatedAt : undefined
|
||||
}
|
||||
|
||||
console.log('[ProjectForm] Saving with payload:', {
|
||||
showFeaturedImageInHeader: payload.showFeaturedImageInHeader,
|
||||
showBackgroundColorInHeader: payload.showBackgroundColorInHeader,
|
||||
showLogoInHeader: payload.showLogoInHeader
|
||||
})
|
||||
|
||||
let savedProject: Project
|
||||
if (mode === 'edit') {
|
||||
savedProject = await api.put(`/api/projects/${project?.id}`, payload) as Project
|
||||
|
|
@ -94,7 +152,6 @@
|
|||
goto(`/admin/projects/${savedProject.id}/edit`)
|
||||
} else {
|
||||
project = savedProject
|
||||
formStore.populateFromProject(savedProject)
|
||||
}
|
||||
} catch (err) {
|
||||
toast.dismiss(loadingToastId)
|
||||
|
|
@ -104,10 +161,10 @@
|
|||
toast.error(`Failed to ${mode === 'edit' ? 'save' : 'create'} project`)
|
||||
}
|
||||
console.error(err)
|
||||
} finally {
|
||||
isSaving = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<AdminPage>
|
||||
|
|
@ -123,20 +180,36 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<Button
|
||||
variant="primary"
|
||||
onclick={handleSave}
|
||||
disabled={isSaving}
|
||||
>
|
||||
{isSaving ? 'Saving...' : 'Save'}
|
||||
</Button>
|
||||
{#if !isLoading && mode === 'edit' && autoSave}
|
||||
<AutoSaveStatus
|
||||
status={autoSave.status}
|
||||
error={autoSave.lastError}
|
||||
lastSavedAt={project?.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 project...</div>
|
||||
{:else}
|
||||
{#if error}
|
||||
<div class="error-message">{error}</div>
|
||||
{/if}
|
||||
|
||||
{#if successMessage}
|
||||
<div class="success-message">{successMessage}</div>
|
||||
{/if}
|
||||
|
||||
<div class="tab-panels">
|
||||
<!-- Metadata Panel -->
|
||||
<div class="panel content-wrapper" class:active={activeTab === 'metadata'}>
|
||||
|
|
@ -147,7 +220,7 @@
|
|||
handleSave()
|
||||
}}
|
||||
>
|
||||
<ProjectMetadataForm bind:formData={formStore.fields} validationErrors={formStore.validationErrors} />
|
||||
<ProjectMetadataForm bind:formData={formStore.fields} validationErrors={formStore.validationErrors} onSave={handleSave} />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -161,7 +234,7 @@
|
|||
handleSave()
|
||||
}}
|
||||
>
|
||||
<ProjectBrandingForm bind:formData={formStore.fields} validationErrors={formStore.validationErrors} />
|
||||
<ProjectBrandingForm bind:formData={formStore.fields} validationErrors={formStore.validationErrors} onSave={handleSave} />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -222,6 +295,25 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: $gray-40;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: $gray-90;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
|
|
@ -254,12 +346,37 @@
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.loading {
|
||||
.loading,
|
||||
.error {
|
||||
text-align: center;
|
||||
padding: $unit-6x;
|
||||
color: $gray-40;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #d33;
|
||||
}
|
||||
|
||||
.error-message,
|
||||
.success-message {
|
||||
padding: $unit-3x;
|
||||
border-radius: $unit;
|
||||
margin-bottom: $unit-4x;
|
||||
max-width: 700px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: #fee;
|
||||
color: #d33;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background-color: #efe;
|
||||
color: #363;
|
||||
}
|
||||
|
||||
.form-content {
|
||||
@include breakpoint('phone') {
|
||||
padding: $unit-3x;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,26 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation'
|
||||
import { goto, beforeNavigate } from '$app/navigation'
|
||||
import AdminPage from './AdminPage.svelte'
|
||||
import type { JSONContent } from '@tiptap/core'
|
||||
import type { Post } from '@prisma/client'
|
||||
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 { createAutoSaveStore } from '$lib/admin/autoSave.svelte'
|
||||
import AutoSaveStatus from './AutoSaveStatus.svelte'
|
||||
|
||||
// Payload type for saving posts
|
||||
interface PostPayload {
|
||||
type: string
|
||||
status: string
|
||||
content: JSONContent
|
||||
updatedAt?: string
|
||||
title?: string
|
||||
link_url?: string
|
||||
linkDescription?: string
|
||||
}
|
||||
|
||||
interface Props {
|
||||
postType: 'post'
|
||||
|
|
@ -21,11 +36,13 @@
|
|||
mode: 'create' | 'edit'
|
||||
}
|
||||
|
||||
let { postType, postId, initialData, mode }: Props = $props()
|
||||
let { postType, postId, initialData, mode }: Props = $props()
|
||||
|
||||
// State
|
||||
let isSaving = $state(false)
|
||||
let hasLoaded = $state(mode === 'create')
|
||||
let status = $state<'draft' | 'published'>(initialData?.status || 'draft')
|
||||
let updatedAt = $state<string | undefined>(initialData?.updatedAt)
|
||||
|
||||
// Form data
|
||||
let content = $state<JSONContent>(initialData?.content || { type: 'doc', content: [] })
|
||||
|
|
@ -33,7 +50,7 @@
|
|||
let linkDescription = $state(initialData?.linkDescription || '')
|
||||
let title = $state(initialData?.title || '')
|
||||
|
||||
// Character count for posts
|
||||
// Character count for posts
|
||||
const maxLength = 280
|
||||
const textContent = $derived.by(() => {
|
||||
if (!content.content) return ''
|
||||
|
|
@ -50,11 +67,178 @@
|
|||
const isOverLimit = $derived(charCount > maxLength)
|
||||
|
||||
// Check if form has content
|
||||
const hasContent = $derived.by(() => {
|
||||
const hasContent = $derived.by(() => {
|
||||
// For posts, check if either content exists or it's a link with URL
|
||||
const hasTextContent = textContent.trim().length > 0
|
||||
const hasLinkContent = linkUrl && linkUrl.trim().length > 0
|
||||
return hasTextContent || hasLinkContent
|
||||
})
|
||||
})
|
||||
|
||||
// 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(): PostPayload {
|
||||
const payload: PostPayload = {
|
||||
type: 'post',
|
||||
status,
|
||||
content,
|
||||
updatedAt
|
||||
}
|
||||
if (linkUrl && linkUrl.trim()) {
|
||||
payload.title = title || linkUrl
|
||||
payload.link_url = linkUrl
|
||||
payload.linkDescription = linkDescription
|
||||
} else if (title) {
|
||||
payload.title = title
|
||||
}
|
||||
return payload
|
||||
}
|
||||
|
||||
// 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: Post, { prime }) => {
|
||||
updatedAt = saved.updatedAt.toISOString()
|
||||
prime(buildPayload())
|
||||
if (draftKey) clearDraft(draftKey)
|
||||
}
|
||||
})
|
||||
: null
|
||||
|
||||
// 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(() => {
|
||||
void status; void content; void linkUrl; void linkDescription; void title
|
||||
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())
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
$effect(() => {
|
||||
const draft = loadDraft<PostPayload>(draftKey)
|
||||
if (draft) {
|
||||
showDraftPrompt = true
|
||||
draftTimestamp = draft.ts
|
||||
}
|
||||
})
|
||||
|
||||
function restoreDraft() {
|
||||
const draft = loadDraft<PostPayload>(draftKey)
|
||||
if (!draft) return
|
||||
const p = draft.payload
|
||||
status = p.status ?? status
|
||||
content = p.content ?? content
|
||||
if (p.link_url) {
|
||||
linkUrl = p.link_url
|
||||
linkDescription = p.linkDescription ?? linkDescription
|
||||
title = p.title ?? title
|
||||
} else {
|
||||
title = p.title ?? title
|
||||
}
|
||||
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 (_navigation) => {
|
||||
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) {
|
||||
return () => autoSave.destroy()
|
||||
}
|
||||
})
|
||||
|
||||
async function handleSave(publishStatus: 'draft' | 'published') {
|
||||
if (isOverLimit) {
|
||||
|
|
@ -62,24 +246,26 @@
|
|||
return
|
||||
}
|
||||
|
||||
// For link posts, URL is required
|
||||
if (linkUrl && !linkUrl.trim()) {
|
||||
toast.error('Link URL is required')
|
||||
return
|
||||
}
|
||||
|
||||
isSaving = true
|
||||
const loadingToastId = toast.loading(
|
||||
`${publishStatus === 'published' ? 'Publishing' : 'Saving'} post...`
|
||||
)
|
||||
|
||||
try {
|
||||
isSaving = true
|
||||
|
||||
const payload: Record<string, unknown> = {
|
||||
type: 'post',
|
||||
type: 'post', // Use simplified post type
|
||||
status: publishStatus,
|
||||
content: content,
|
||||
updatedAt: mode === 'edit' ? initialData?.updatedAt : undefined
|
||||
content: content
|
||||
}
|
||||
|
||||
// Add link fields if they're provided
|
||||
if (linkUrl && linkUrl.trim()) {
|
||||
payload.title = title || linkUrl
|
||||
payload.link_url = linkUrl
|
||||
|
|
@ -106,11 +292,13 @@
|
|||
throw new Error(`Failed to ${mode === 'edit' ? 'save' : 'create'} post`)
|
||||
}
|
||||
|
||||
await response.json()
|
||||
await response.json()
|
||||
|
||||
toast.dismiss(loadingToastId)
|
||||
toast.success(`Post ${publishStatus === 'published' ? 'published' : 'saved'} successfully!`)
|
||||
toast.dismiss(loadingToastId)
|
||||
toast.success(`Post ${publishStatus === 'published' ? 'published' : 'saved'} successfully!`)
|
||||
clearDraft(draftKey)
|
||||
|
||||
// Redirect back to posts list after creation
|
||||
goto('/admin/posts')
|
||||
} catch (err) {
|
||||
toast.dismiss(loadingToastId)
|
||||
|
|
@ -145,19 +333,36 @@
|
|||
</h1>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
{#if mode === 'edit' && autoSave}
|
||||
<AutoSaveStatus status={autoSave.status} error={autoSave.lastError} />
|
||||
{/if}
|
||||
<Button variant="secondary" onclick={() => handleSave('draft')} disabled={isSaving}>
|
||||
Save Draft
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onclick={() => handleSave('published')}
|
||||
disabled={isSaving || !hasContent || (postType === 'microblog' && isOverLimit)}
|
||||
disabled={isSaving || !hasContent() || (postType === 'microblog' && isOverLimit)}
|
||||
>
|
||||
Post
|
||||
</Button>
|
||||
</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="composer-container">
|
||||
<div class="composer">
|
||||
{#if postType === 'microblog'}
|
||||
|
|
@ -238,6 +443,15 @@
|
|||
padding: $unit-3x;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
padding: $unit-2x;
|
||||
border-radius: $unit;
|
||||
margin-bottom: $unit-3x;
|
||||
background-color: #fee;
|
||||
color: #d33;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.composer {
|
||||
background: white;
|
||||
border-radius: $unit-2x;
|
||||
|
|
@ -346,4 +560,103 @@
|
|||
color: $gray-60;
|
||||
}
|
||||
}
|
||||
.draft-banner {
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
border-bottom: 1px solid #f59e0b;
|
||||
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
|
||||
padding: $unit-3x $unit-4x;
|
||||
animation: slideDown 0.3s ease-out;
|
||||
|
||||
@include breakpoint('phone') {
|
||||
padding: $unit-2x $unit-3x;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.draft-banner-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $unit-3x;
|
||||
|
||||
@include breakpoint('phone') {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: $unit-2x;
|
||||
}
|
||||
}
|
||||
|
||||
.draft-banner-text {
|
||||
color: #92400e;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
|
||||
@include breakpoint('phone') {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.draft-banner-actions {
|
||||
display: flex;
|
||||
gap: $unit-2x;
|
||||
flex-shrink: 0;
|
||||
|
||||
@include breakpoint('phone') {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.draft-banner-button {
|
||||
background: white;
|
||||
border: 1px solid #f59e0b;
|
||||
color: #92400e;
|
||||
padding: $unit $unit-3x;
|
||||
border-radius: $unit;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: #fffbeb;
|
||||
border-color: #d97706;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&.dismiss {
|
||||
background: transparent;
|
||||
border-color: #fbbf24;
|
||||
color: #b45309;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-color: #f59e0b;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('phone') {
|
||||
flex: 1;
|
||||
padding: $unit-1_5x $unit-2x;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
// URL convert handlers
|
||||
export function handleShowUrlConvertDropdown(pos: number, _url: string) {
|
||||
if (!editor || !editor.view) return
|
||||
if (!editor) return
|
||||
const coords = editor.view.coordsAtPos(pos)
|
||||
urlConvertDropdownPosition = { x: coords.left, y: coords.bottom + 5 }
|
||||
urlConvertPos = pos
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
|
||||
// Link context menu handlers
|
||||
export function handleShowLinkContextMenu(pos: number, url: string) {
|
||||
if (!editor || !editor.view) return
|
||||
if (!editor) return
|
||||
const coords = editor.view.coordsAtPos(pos)
|
||||
linkContextMenuPosition = { x: coords.left, y: coords.bottom + 5 }
|
||||
linkContextUrl = url
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
}
|
||||
|
||||
function handleEditLink() {
|
||||
if (!editor || !editor.view || linkContextPos === null || !linkContextUrl) return
|
||||
if (!editor || linkContextPos === null || !linkContextUrl) return
|
||||
const coords = editor.view.coordsAtPos(linkContextPos)
|
||||
linkEditDialogPosition = { x: coords.left, y: coords.bottom + 5 }
|
||||
linkEditUrl = linkContextUrl
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
function goToSelection() {
|
||||
const { results, resultIndex } = editor.storage.searchAndReplace
|
||||
const position = results[resultIndex]
|
||||
if (!position || !editor.view) return
|
||||
if (!position) return
|
||||
editor.commands.setTextSelection(position)
|
||||
const { node } = editor.view.domAtPos(editor.state.selection.anchor)
|
||||
if (node instanceof HTMLElement) node.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
|
|
|
|||
|
|
@ -15,20 +15,18 @@
|
|||
|
||||
let isDragging = $state(false)
|
||||
|
||||
if (editor.view) {
|
||||
editor.view.dom.addEventListener('dragstart', () => {
|
||||
isDragging = true
|
||||
})
|
||||
editor.view.dom.addEventListener('dragstart', () => {
|
||||
isDragging = true
|
||||
})
|
||||
|
||||
editor.view.dom.addEventListener('drop', () => {
|
||||
isDragging = true
|
||||
editor.view.dom.addEventListener('drop', () => {
|
||||
isDragging = true
|
||||
|
||||
// Allow some time for the drop action to complete before re-enabling
|
||||
setTimeout(() => {
|
||||
isDragging = false
|
||||
}, 100) // Adjust delay if needed
|
||||
})
|
||||
}
|
||||
// Allow some time for the drop action to complete before re-enabling
|
||||
setTimeout(() => {
|
||||
isDragging = false
|
||||
}, 100) // Adjust delay if needed
|
||||
})
|
||||
|
||||
const bubbleMenuCommands = [
|
||||
...commands['text-formatting'].commands,
|
||||
|
|
@ -42,7 +40,7 @@
|
|||
function shouldShow(props: ShouldShowProps) {
|
||||
if (!props.editor.isEditable) return false
|
||||
const { view, editor } = props
|
||||
if (!view || !editor.view || editor.view.dragging) {
|
||||
if (!view || editor.view.dragging) {
|
||||
return false
|
||||
}
|
||||
if (editor.isActive('link')) return false
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ export function getHandlePaste(editor: Editor, maxSize: number = 2) {
|
|||
* @param event - Optional MouseEvent or KeyboardEvent triggering the focus
|
||||
*/
|
||||
export function focusEditor(editor: Editor | undefined, event?: MouseEvent | KeyboardEvent) {
|
||||
if (!editor || !editor.view) return
|
||||
if (!editor) return
|
||||
// Check if there is a text selection already (i.e. a non-empty selection)
|
||||
const selection = window.getSelection()
|
||||
if (selection && selection.toString().length > 0) {
|
||||
|
|
|
|||
|
|
@ -46,16 +46,11 @@ export function createProjectFormStore(initialProject?: Project | null) {
|
|||
}
|
||||
|
||||
return {
|
||||
// Use getters to maintain reactivity when accessing state from outside the store
|
||||
get fields() {
|
||||
return fields
|
||||
},
|
||||
set fields(value: ProjectFormData) {
|
||||
fields = value
|
||||
},
|
||||
get validationErrors() {
|
||||
return validationErrors
|
||||
},
|
||||
// State is returned directly - it's already reactive in Svelte 5
|
||||
// Components can read: formStore.fields.title
|
||||
// Mutation should go through methods below for validation
|
||||
fields,
|
||||
validationErrors,
|
||||
isDirty,
|
||||
|
||||
// Methods for controlled mutation
|
||||
|
|
|
|||
|
|
@ -1,19 +1,16 @@
|
|||
<script lang="ts">
|
||||
import { page } from '$app/stores'
|
||||
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 { 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 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'
|
||||
|
|
@ -62,8 +59,12 @@
|
|||
let metadataButtonRef: HTMLButtonElement | undefined = $state.raw()
|
||||
let showDeleteConfirmation = $state(false)
|
||||
|
||||
// Draft key for autosave fallback
|
||||
const draftKey = $derived(makeDraftKey('post', $page.params.id))
|
||||
// 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))
|
||||
|
||||
const postTypeConfig = {
|
||||
post: { icon: '💭', label: 'Post', showTitle: false, showContent: true },
|
||||
|
|
@ -73,7 +74,7 @@
|
|||
let config = $derived(postTypeConfig[postType])
|
||||
|
||||
// Autosave store
|
||||
const autoSave = createAutoSaveStore({
|
||||
let autoSave = createAutoSaveStore({
|
||||
debounceMs: 2000,
|
||||
getPayload: () => {
|
||||
if (!hasLoaded) return null
|
||||
|
|
@ -108,23 +109,6 @@
|
|||
}
|
||||
})
|
||||
|
||||
// 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) {
|
||||
|
|
@ -224,11 +208,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
// Wait a tick to ensure page params are loaded
|
||||
await new Promise((resolve) => setTimeout(resolve, 0))
|
||||
await loadPost()
|
||||
})
|
||||
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
|
||||
|
|
@ -346,6 +335,27 @@
|
|||
}
|
||||
}
|
||||
|
||||
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
|
||||
|
|
@ -393,10 +403,68 @@
|
|||
}
|
||||
})
|
||||
|
||||
// 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>
|
||||
|
|
@ -474,12 +542,18 @@
|
|||
{/if}
|
||||
</header>
|
||||
|
||||
{#if draftRecovery.showPrompt}
|
||||
<DraftPrompt
|
||||
timeAgo={draftRecovery.draftTimeText}
|
||||
onRestore={draftRecovery.restore}
|
||||
onDismiss={draftRecovery.dismiss}
|
||||
/>
|
||||
{#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}
|
||||
|
||||
{#if loading}
|
||||
|
|
@ -562,6 +636,72 @@
|
|||
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;
|
||||
|
|
|
|||
|
|
@ -37,9 +37,6 @@ interface ProjectCreateBody {
|
|||
status?: string
|
||||
password?: string | null
|
||||
slug?: string
|
||||
showFeaturedImageInHeader?: boolean
|
||||
showBackgroundColorInHeader?: boolean
|
||||
showLogoInHeader?: boolean
|
||||
}
|
||||
|
||||
// GET /api/projects - List all projects
|
||||
|
|
@ -151,10 +148,7 @@ export const POST: RequestHandler = async (event) => {
|
|||
displayOrder: body.displayOrder || 0,
|
||||
status: body.status || 'draft',
|
||||
password: body.password || null,
|
||||
publishedAt: body.status === 'published' ? new Date() : null,
|
||||
showFeaturedImageInHeader: body.showFeaturedImageInHeader ?? true,
|
||||
showBackgroundColorInHeader: body.showBackgroundColorInHeader ?? true,
|
||||
showLogoInHeader: body.showLogoInHeader ?? true
|
||||
publishedAt: body.status === 'published' ? new Date() : null
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -36,9 +36,6 @@ interface ProjectUpdateBody {
|
|||
status?: string
|
||||
password?: string | null
|
||||
slug?: string
|
||||
showFeaturedImageInHeader?: boolean
|
||||
showBackgroundColorInHeader?: boolean
|
||||
showLogoInHeader?: boolean
|
||||
}
|
||||
|
||||
// GET /api/projects/[id] - Get a single project
|
||||
|
|
@ -132,19 +129,7 @@ export const PUT: RequestHandler = async (event) => {
|
|||
status: body.status !== undefined ? body.status : existing.status,
|
||||
password: body.password !== undefined ? body.password : existing.password,
|
||||
publishedAt:
|
||||
body.status === 'published' && !existing.publishedAt ? new Date() : existing.publishedAt,
|
||||
showFeaturedImageInHeader:
|
||||
body.showFeaturedImageInHeader !== undefined
|
||||
? body.showFeaturedImageInHeader
|
||||
: existing.showFeaturedImageInHeader,
|
||||
showBackgroundColorInHeader:
|
||||
body.showBackgroundColorInHeader !== undefined
|
||||
? body.showBackgroundColorInHeader
|
||||
: existing.showBackgroundColorInHeader,
|
||||
showLogoInHeader:
|
||||
body.showLogoInHeader !== undefined
|
||||
? body.showLogoInHeader
|
||||
: existing.showLogoInHeader
|
||||
body.status === 'published' && !existing.publishedAt ? new Date() : existing.publishedAt
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -284,11 +269,6 @@ export const PATCH: RequestHandler = async (event) => {
|
|||
if (body.projectType !== undefined) updateData.projectType = body.projectType
|
||||
if (body.displayOrder !== undefined) updateData.displayOrder = body.displayOrder
|
||||
if (body.password !== undefined) updateData.password = body.password
|
||||
if (body.showFeaturedImageInHeader !== undefined)
|
||||
updateData.showFeaturedImageInHeader = body.showFeaturedImageInHeader
|
||||
if (body.showBackgroundColorInHeader !== undefined)
|
||||
updateData.showBackgroundColorInHeader = body.showBackgroundColorInHeader
|
||||
if (body.showLogoInHeader !== undefined) updateData.showLogoInHeader = body.showLogoInHeader
|
||||
|
||||
// Handle slug update if provided
|
||||
if (body.slug && body.slug !== existing.slug) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue