Use snapshots in some places

src/app/components/ProfileEdit.svelte

@@ -23,7 +23,9 @@
 
   const saveEdit = () => {
     const relays = ctx.app.router.FromUser().getUrls()
-    const template = isPublishedProfile(values) ? editProfile(values) : createProfile(values)
+    const template = isPublishedProfile(values)
+      ? editProfile($state.snapshot(values))
+      : createProfile($state.snapshot(values))
     const event = createEvent(template.kind, template)
 
     publishThunk({event, relays})

src/app/editor/index.ts

@@ -1,7 +1,7 @@
 import {asClassComponent} from "svelte/legacy"
 import type {Writable} from "svelte/store"
-import {derived} from "svelte/store"
+import {derived, readable} from "svelte/store"
-import {createEditor, SvelteNodeViewRenderer} from "svelte-tiptap"
+import {Editor, SvelteNodeViewRenderer} from "svelte-tiptap"
 import {ctx} from "@welshman/lib"
 import type {StampedEvent} from "@welshman/util"
 import {signer, profileSearch} from "@welshman/app"
@@ -44,8 +44,10 @@ export const makeEditor = ({
   submit: () => void
   uploading?: Writable<boolean>
   wordCount?: Writable<number>
-}) =>
+}) => {
-  createEditor({
+  let setter: (editor: Editor) => void
+
+  const _editor = new Editor({
     content,
     autofocus,
     extensions: [
@@ -94,7 +96,15 @@ export const makeEditor = ({
       }),
     ],
     onUpdate({editor}) {
+      setter?.(editor)
       wordCount?.set(editor.storage.wordCount.words)
       charCount?.set(editor.storage.wordCount.chars)
     },
   })
+
+  return readable(_editor, set => {
+    setter = set
+
+    return () => _editor.destroy()
+  })
+}

src/lib/components/InputProfilePicture.svelte

@@ -4,11 +4,11 @@
   import Icon from "@lib/components/Icon.svelte"
 
   interface Props {
-    file?: File | null
+    file?: File | undefined
-    url?: string | null
+    url?: string | undefined
   }
 
-  let {file = $bindable(null), url = $bindable(null)}: Props = $props()
+  let {file = $bindable(), url = $bindable()}: Props = $props()
 
   const id = randomId()
 
@@ -35,9 +35,9 @@
   }
 
   const onClear = () => {
-    initialUrl = null
+    initialUrl = undefined
-    file = null
+    file = undefined
-    url = null
+    url = undefined
   }
 
   let active = $state(false)

src/lib/components/Page.svelte

@@ -8,6 +8,6 @@
 </script>
 
 <div
-  class="sait saib sair scroll-container max-h-screen flex-grow overflow-auto bg-base-200 pb-14 md:pb-0 {props.class}">
+  class="sait saib sair scroll-container mb-14 max-h-screen flex-grow overflow-auto bg-base-200 md:mb-0 {props.class}">
   {@render props.children?.()}
 </div>

src/routes/settings/+page.svelte

@@ -17,10 +17,11 @@
   }
 
   const onsubmit = preventDefault(async () => {
+    const json = JSON.stringify($state.snapshot(settings))
+    const content = await $signer!.nip04.encrypt($pubkey!, json)
+
     publishThunk({
-      event: createEvent(SETTINGS, {
+      event: createEvent(SETTINGS, {content}),
-        content: await $signer!.nip04.encrypt($pubkey!, JSON.stringify(settings)),
-      }),
       relays: ctx.app.router.FromUser().getUrls(),
     })
 
@@ -102,7 +103,7 @@
         <p>Media Server</p>
       {/snippet}
       {#snippet input()}
-        <div class="flex flex-col gap-2 sm:flex-row">
+        <div class="flex flex-col gap-2 lg:flex-row">
           <select bind:value={settings.upload_type} class="select select-bordered">
             <option value="nip96">NIP 96 (default)</option>
             <option value="blossom">Blossom</option>