feat: persist composer drafts in memory across navigation

src/app/components/CalendarEventForm.svelte

@@ -20,6 +20,7 @@
   import EditorContent from "@app/editor/EditorContent.svelte"
   import {PROTECTED} from "@app/core/state"
   import {makeEditor} from "@app/editor"
+  import {DraftKey} from "@app/util/drafts"
   import {pushToast} from "@app/util/toast"
   import {canEnforceNip70} from "@app/core/commands"
 
@@ -28,16 +29,32 @@
     h?: string
     header: Snippet
     initialValues?: {
-      d: string
-      title: string
-      content: string
-      location: string
-      start: number
-      end: number
+      d?: string
+      title?: string
+      content?: string
+      location?: string
+      start?: number
+      end?: number
     }
   }
 
-  const {url, h, header, initialValues}: Props = $props()
+  let {url, h, header, initialValues}: Props = $props()
+
+  type CalendarDraft = {
+    editorContent?: unknown
+    d?: string
+    title?: string
+    content?: string
+    location?: string
+    start?: number
+    end?: number
+  }
+
+  const draftKey = new DraftKey<CalendarDraft>(`calendar:${url}:${h ?? ""}`)
+  const draft = draftKey.get()
+  if (!initialValues) {
+    initialValues = draft
+  }
 
   const shouldProtect = canEnforceNip70(url)
 
@@ -95,17 +112,30 @@
 
     pushToast({message: "Your event has been saved!"})
     publishThunk({event, relays: [url]})
+    draftKey.clear()
     history.back()
   }
 
-  const content = initialValues?.content || ""
-  const editor = makeEditor({url, submit, uploading, content})
+  const onChange = (json: unknown) => {
+    draftKey.update({editorContent: json})
+  }
+  const editor = makeEditor({
+    url,
+    submit,
+    uploading,
+    onChange,
+    content: draft?.editorContent ?? initialValues?.content ?? "",
+  })
 
-  let title = $state(initialValues?.title || "")
-  let location = $state(initialValues?.location || "")
+  let title = $state(initialValues?.title ?? "")
+  let location = $state(initialValues?.location ?? "")
   let start: number | undefined = $state(initialValues?.start)
   let end: number | undefined = $state(initialValues?.end)
-  let endDirty = Boolean(initialValues?.end)
+  let endDirty = $state(Boolean(initialValues?.end))
+
+  $effect(() => {
+    draftKey.update({title, location, start, end})
+  })
 
   $effect(() => {
     if (!endDirty && start) {