From 7d4ba6c806a2877de134863c689d90b0d267cd3a Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Mon, 3 Feb 2025 20:43:18 -0800
Subject: [PATCH] Use snapshots in some places

---
 src/app/components/ProfileEdit.svelte         |  4 +++-
 src/app/editor/index.ts                       | 18 ++++++++++++++----
 src/lib/components/InputProfilePicture.svelte | 12 ++++++------
 src/lib/components/Page.svelte                |  2 +-
 src/routes/settings/+page.svelte              |  9 +++++----
 5 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/app/components/ProfileEdit.svelte b/src/app/components/ProfileEdit.svelte
index 1fde68fb..a367cc03 100644
--- a/src/app/components/ProfileEdit.svelte
+++ b/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})
diff --git a/src/app/editor/index.ts b/src/app/editor/index.ts
index b62f985b..41477721 100644
--- a/src/app/editor/index.ts
+++ b/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 {createEditor, SvelteNodeViewRenderer} from "svelte-tiptap"
+import {derived, readable} from "svelte/store"
+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()
+  })
+}
diff --git a/src/lib/components/InputProfilePicture.svelte b/src/lib/components/InputProfilePicture.svelte
index 1bdc07d8..7921251f 100644
--- a/src/lib/components/InputProfilePicture.svelte
+++ b/src/lib/components/InputProfilePicture.svelte
@@ -4,11 +4,11 @@
   import Icon from "@lib/components/Icon.svelte"
 
   interface Props {
-    file?: File | null
-    url?: string | null
+    file?: File | undefined
+    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
-    file = null
-    url = null
+    initialUrl = undefined
+    file = undefined
+    url = undefined
   }
 
   let active = $state(false)
diff --git a/src/lib/components/Page.svelte b/src/lib/components/Page.svelte
index 5a135786..688a448f 100644
--- a/src/lib/components/Page.svelte
+++ b/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>
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index a18db3bb..78c525eb 100644
--- a/src/routes/settings/+page.svelte
+++ b/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, {
-        content: await $signer!.nip04.encrypt($pubkey!, JSON.stringify(settings)),
-      }),
+      event: createEvent(SETTINGS, {content}),
       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>