refactor: Extract shared media upload logic into reusable helpers

- Add validateImageFile() helper to mediaHelpers.ts for file validation - Add uploadMediaFiles() function to centralize /api/media/upload logic - Add SerializedMedia type to handle JSON response dates correctly - Replace inline upload icon SVGs with FileIcon component - Refactor GalleryUploader to use shared validation and upload helpers - Refactor ImageUploader to use shared validation and upload helpers This reduces code duplication by ~165 lines and makes upload behavior consistent across both components. Co-Authored-By: Justin Edmund <justin@jedmund.com>
2025-11-24 16:19:26 +00:00
20 changed files with 977 additions and 398 deletions
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@ -1,3 +0,0 @@
-onlyBuiltDependencies:
-  - "@musicorum/lastfm"
-  - "psn-api"
--- a/src/lib/admin/autoSave.svelte.ts
+++ b/src/lib/admin/autoSave.svelte.ts
@ -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'
    }
  }

--- a/src/lib/components/admin/AlbumForm.svelte
+++ b/src/lib/components/admin/AlbumForm.svelte
@ -3,13 +3,18 @@
 	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 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'

@ -34,13 +39,20 @@
 	// 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>()
 	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' },
@ -74,12 +86,81 @@
 	// 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' && !hasLoaded) {
+		if (album && mode === 'edit') {
 			populateFormData(album)
 			loadAlbumMedia()
-			hasLoaded = true
 		} else if (mode === 'create') {
 			isLoading = false
 		}
@ -95,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 || '',
@ -133,7 +257,7 @@
 				location: formData.location || undefined,
 				year: formData.year || undefined
 			})
-			validationErrors = {}
+			_validationErrors = {}
 			return true
 		} catch (err) {
 			if (err instanceof z.ZodError) {
@ -143,22 +267,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 +292,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 +366,7 @@
 			)
 			console.error(err)
 		} finally {
-			isSaving = false
+			_isSaving = false
 		}
 	}

@ -275,16 +399,23 @@
 			/>
 		</div>
 		<div class="header-actions">
-			<Button
-				variant="primary"
-				onclick={handleSave}
-				disabled={isSaving}
-			>
-				{isSaving ? 'Saving...' : 'Save'}
-			</Button>
+			{#if !isLoading}
+				<AutoSaveStatus
+					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>
@ -454,6 +585,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;
--- a/src/lib/components/admin/AutoSaveStatus.svelte
+++ b/src/lib/components/admin/AutoSaveStatus.svelte
@ -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 {
--- a/src/lib/components/admin/BrandingSection.svelte
+++ b/src/lib/components/admin/BrandingSection.svelte
@ -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">
--- a/src/lib/components/admin/EssayForm.svelte
+++ b/src/lib/components/admin/EssayForm.svelte
@ -6,8 +6,15 @@
 	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, 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'

 	interface Props {
 		postId?: number
@ -25,9 +32,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 +47,60 @@
 	// Ref to the editor component
 	let editorRef: { save: () => Promise<JSONContent> } | undefined

+	// Draft key for autosave fallback
+	const draftKey = $derived(mode === 'edit' && postId ? makeDraftKey('post', postId) : null)
+
+	function buildPayload() {
+		return {
+			title,
+			slug,
+			type: 'essay',
+			status,
+			content,
+			tags,
+			updatedAt
+		}
+	}
+
+	// Autosave store (edit mode only)
+	const 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
+
+	// 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' }
@ -68,13 +129,39 @@
 		}
 	})

-	// Mark as loaded for edit mode
+	// Prime autosave on initial load (edit mode only)
 	$effect(() => {
-		if (mode === 'edit' && initialData && !hasLoaded) {
+		if (mode === 'edit' && initialData && !hasLoaded && autoSave) {
+			autoSave.prime(buildPayload())
 			hasLoaded = true
 		}
 	})

+	// Trigger autosave when form data changes
+	$effect(() => {
+		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 && draftKey) {
+			const saveStatus = autoSave.status
+			if (saveStatus === 'error' || saveStatus === 'offline') {
+				saveDraft(draftKey, buildPayload())
+			}
+		}
+	})
+
+	// Cleanup autosave on unmount
+	$effect(() => {
+		if (autoSave) {
+			return () => autoSave.destroy()
+		}
+	})
+
 	function addTag() {
 		if (tagInput && !tags.includes(tagInput)) {
 			tags = [...tags, tagInput]
@ -104,18 +191,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'
@ -142,6 +227,7 @@

 			toast.dismiss(loadingToastId)
      toast.success(`Essay ${mode === 'edit' ? 'saved' : 'created'} successfully!`)
+      clearDraft(draftKey)

 			if (mode === 'create') {
 				goto(`/admin/posts/${savedPost.id}/edit`)
@ -150,10 +236,9 @@
 			toast.dismiss(loadingToastId)
 			toast.error(`Failed to ${mode === 'edit' ? 'save' : 'create'} essay`)
 			console.error(err)
-		} finally {
-			isSaving = false
 		}
 	}
+
 </script>

 <AdminPage>
@ -169,16 +254,24 @@
 			/>
 		</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 draftRecovery.showPrompt}
+		<DraftPrompt
+			timeAgo={draftRecovery.draftTimeText}
+			onRestore={draftRecovery.restore}
+			onDismiss={draftRecovery.dismiss}
+		/>
+	{/if}
+
 	<div class="admin-container">
 		<div class="tab-panels">
 			<!-- Metadata Panel -->
@ -308,6 +401,77 @@
 		}
 	}

+	.save-actions {
+		position: relative;
+		display: flex;
+	}
+
+	// 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 +493,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;

--- a/src/lib/components/admin/GalleryUploader.svelte
+++ b/src/lib/components/admin/GalleryUploader.svelte
@ -4,6 +4,8 @@
 	import SmartImage from '../SmartImage.svelte'
 	import UnifiedMediaModal from './UnifiedMediaModal.svelte'
 	import MediaDetailsModal from './MediaDetailsModal.svelte'
+	import FileIcon from '$icons/FileIcon.svelte'
+	import { validateImageFile, uploadMediaFiles } from '$lib/utils/mediaHelpers'

 	// Gallery items can be either Media objects or objects with a mediaId reference
 	type GalleryItem = Media | (Partial<Media> & { mediaId?: number })
@ -55,43 +57,9 @@
 	const canAddMore = $derived(!maxItems || !value || value.length < maxItems)
 	const remainingSlots = $derived(maxItems ? maxItems - (value?.length || 0) : Infinity)

-	// File validation
+	// File validation using shared helper
 	function validateFile(file: File): string | null {
-		// Check file type
-		if (!file.type.startsWith('image/')) {
-			return 'Please select image files only'
-		}
-
-		// Check file size
-		const sizeMB = file.size / 1024 / 1024
-		if (sizeMB > maxFileSize) {
-			return `File size must be less than ${maxFileSize}MB`
-		}
-
-		return null
-	}
-
-	// Upload multiple files to server
-	async function uploadFiles(files: File[]): Promise<Media[]> {
-		const uploadPromises = files.map(async (file) => {
-			const formData = new FormData()
-			formData.append('file', file)
-
-			const response = await fetch('/api/media/upload', {
-				method: 'POST',
-				body: formData,
-				credentials: 'same-origin'
-			})
-
-			if (!response.ok) {
-				const errorData = await response.json()
-				throw new Error(errorData.error || `Upload failed for ${file.name}`)
-			}
-
-			return await response.json()
-		})
-
-		return Promise.all(uploadPromises)
+		return validateImageFile(file, maxFileSize)
 	}

 	// Handle file selection/drop
@ -140,7 +108,8 @@
 				}, 100)
 			})

-			const uploadedMedia = await uploadFiles(filesToUpload)
+			// Upload files using shared helper
+			const uploadedMedia = await uploadMediaFiles(filesToUpload) as Media[]

 			// Clear progress intervals
 			progressIntervals.forEach((interval) => clearInterval(interval))
@ -459,54 +428,7 @@
 			{:else}
 				<!-- Upload Prompt -->
 				<div class="upload-prompt">
-					<svg
-						class="upload-icon"
-						width="48"
-						height="48"
-						viewBox="0 0 24 24"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							d="M14 2H6A2 2 0 0 0 4 4V20A2 2 0 0 0 6 22H18A2 2 0 0 0 20 20V8L14 2Z"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						/>
-						<polyline
-							points="14,2 14,8 20,8"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						/>
-						<line
-							x1="16"
-							y1="13"
-							x2="8"
-							y2="13"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-						/>
-						<line
-							x1="16"
-							y1="17"
-							x2="8"
-							y2="17"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-						/>
-						<polyline
-							points="10,9 9,9 8,9"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						/>
-					</svg>
+					<FileIcon size={48} class="upload-icon" />
 					<p class="upload-main-text">{placeholder}</p>
 					<p class="upload-sub-text">
 						Supports JPG, PNG, GIF up to {maxFileSize}MB
--- a/src/lib/components/admin/ImageUploader.svelte
+++ b/src/lib/components/admin/ImageUploader.svelte
@ -5,6 +5,8 @@
 	import SmartImage from '../SmartImage.svelte'
 	import UnifiedMediaModal from './UnifiedMediaModal.svelte'
 	import RefreshIcon from '$icons/refresh.svg?component'
+	import FileIcon from '$icons/FileIcon.svelte'
+	import { validateImageFile, uploadMediaFiles } from '$lib/utils/mediaHelpers'

 	interface Props {
 		label: string
@ -56,45 +58,22 @@
 		return `aspect-ratio: ${w}/${h}; padding-bottom: ${ratio}%;`
 	})

-	// File validation
+	// File validation using shared helper
 	function validateFile(file: File): string | null {
-		// Check file type
-		if (!file.type.startsWith('image/')) {
-			return 'Please select an image file'
+		return validateImageFile(file, maxFileSize)
 	}

-		// Check file size
-		const sizeMB = file.size / 1024 / 1024
-		if (sizeMB > maxFileSize) {
-			return `File size must be less than ${maxFileSize}MB`
-		}
-
-		return null
-	}
-
-	// Upload file to server
+	// Upload file to server using shared helper
 	async function uploadFile(file: File): Promise<Media> {
-		const formData = new FormData()
-		formData.append('file', file)
-
-		// Removed altText upload - description is handled separately
+		const extraFields: Record<string, string> = {}
 		
+		// Add description if provided
 		if (descriptionValue.trim()) {
-			formData.append('description', descriptionValue.trim())
+			extraFields.description = descriptionValue.trim()
 		}

-		const response = await fetch('/api/media/upload', {
-			method: 'POST',
-			body: formData,
-			credentials: 'same-origin'
-		})
-
-		if (!response.ok) {
-			const errorData = await response.json()
-			throw new Error(errorData.error || 'Upload failed')
-		}
-
-		return await response.json()
+		const uploadedMedia = await uploadMediaFiles([file], { extraFields })
+		return uploadedMedia[0] as Media
 	}

 	// Handle file selection/drop
@ -420,54 +399,7 @@
 				{:else}
 					<!-- Upload Prompt -->
 					<div class="upload-prompt">
-						<svg
-							class="upload-icon"
-							width="48"
-							height="48"
-							viewBox="0 0 24 24"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<path
-								d="M14 2H6A2 2 0 0 0 4 4V20A2 2 0 0 0 6 22H18A2 2 0 0 0 20 20V8L14 2Z"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-							<polyline
-								points="14,2 14,8 20,8"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-							<line
-								x1="16"
-								y1="13"
-								x2="8"
-								y2="13"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-							/>
-							<line
-								x1="16"
-								y1="17"
-								x2="8"
-								y2="17"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-							/>
-							<polyline
-								points="10,9 9,9 8,9"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-						</svg>
+						<FileIcon size={48} class="upload-icon" />
 						<p class="upload-main-text">{placeholder}</p>
 						<p class="upload-sub-text">
 							Supports JPG, PNG, GIF up to {maxFileSize}MB
--- a/src/lib/components/admin/PhotoPostForm.svelte
+++ b/src/lib/components/admin/PhotoPostForm.svelte
@ -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)
 			}
--- a/src/lib/components/admin/ProjectBrandingForm.svelte
+++ b/src/lib/components/admin/ProjectBrandingForm.svelte
@ -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>

--- a/src/lib/components/admin/ProjectForm.svelte
+++ b/src/lib/components/admin/ProjectForm.svelte
@ -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;
--- a/src/lib/components/admin/SimplePostForm.svelte
+++ b/src/lib/components/admin/SimplePostForm.svelte
@ -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
@ -110,7 +296,9 @@

    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>
--- a/src/lib/components/admin/composer/ComposerLinkManager.svelte
+++ b/src/lib/components/admin/composer/ComposerLinkManager.svelte
@ -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
--- a/src/lib/components/edra/headless/components/SearchAndReplace.svelte
+++ b/src/lib/components/edra/headless/components/SearchAndReplace.svelte
@ -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' })
--- a/src/lib/components/edra/headless/menus/bubble-menu.svelte
+++ b/src/lib/components/edra/headless/menus/bubble-menu.svelte
@ -15,7 +15,6 @@

 	let isDragging = $state(false)

-	if (editor.view) {
 	editor.view.dom.addEventListener('dragstart', () => {
 		isDragging = true
 	})
@ -28,7 +27,6 @@
 			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
--- a/src/lib/components/edra/utils.ts
+++ b/src/lib/components/edra/utils.ts
@ -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) {
--- a/src/lib/stores/project-form.svelte.ts
+++ b/src/lib/stores/project-form.svelte.ts
@ -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
--- a/src/lib/utils/mediaHelpers.ts
+++ b/src/lib/utils/mediaHelpers.ts
@ -73,6 +73,25 @@ export function validateFileType(file: File, acceptedTypes: string[]): boolean {
 	})
 }

+/**
+ * Validate image file for upload (type and size)
+ * Returns null if valid, error message if invalid
+ */
+export function validateImageFile(file: File, maxSizeMB: number): string | null {
+	// Check file type
+	if (!file.type.startsWith('image/')) {
+		return 'Please select an image file'
+	}
+
+	// Check file size
+	const sizeMB = file.size / 1024 / 1024
+	if (sizeMB > maxSizeMB) {
+		return `File size must be less than ${maxSizeMB}MB`
+	}
+
+	return null
+}
+
 /**
 * Get display name for MIME type
 */
@ -115,3 +134,64 @@ export function formatBitrate(bitrate: number): string {
 	if (bitrate < 1000000) return `${(bitrate / 1000).toFixed(0)} kbps`
 	return `${(bitrate / 1000000).toFixed(1)} Mbps`
 }
+
+/**
+ * Serialized Media type - represents Media as returned from API (dates as strings)
+ */
+export interface SerializedMedia {
+	id: number
+	filename: string
+	originalName: string
+	mimeType: string
+	size: number
+	url: string
+	thumbnailUrl: string | null
+	width: number | null
+	height: number | null
+	description: string | null
+	isPhotography: boolean
+	createdAt: string
+	updatedAt: string
+	exifData: Record<string, unknown> | null
+	usedIn: string[]
+}
+
+/**
+ * Upload media files to the server
+ * Returns serialized media objects (with string dates from JSON)
+ */
+export async function uploadMediaFiles(
+	files: File[],
+	options?: {
+		onProgress?: (fileKey: string, percent: number) => void
+		extraFields?: Record<string, string>
+	}
+): Promise<SerializedMedia[]> {
+	const uploadPromises = files.map(async (file) => {
+		const formData = new FormData()
+		formData.append('file', file)
+
+		// Add any extra fields (e.g., description)
+		if (options?.extraFields) {
+			Object.entries(options.extraFields).forEach(([key, value]) => {
+				formData.append(key, value)
+			})
+		}
+
+		const response = await fetch('/api/media/upload', {
+			method: 'POST',
+			body: formData,
+			credentials: 'same-origin'
+		})
+
+		if (!response.ok) {
+			const errorData = await response.json()
+			throw new Error(errorData.error || `Upload failed for ${file.name}`)
+		}
+
+		const result = await response.json()
+		return result as SerializedMedia
+	})
+
+	return Promise.all(uploadPromises)
+}
--- a/src/routes/api/projects/+server.ts
+++ b/src/routes/api/projects/+server.ts
@ -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
 			}
 		})

--- a/src/routes/api/projects/[id]/+server.ts
+++ b/src/routes/api/projects/[id]/+server.ts
@ -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) {