Fix message layout, fix uploads

src/app/components/ThreadReply.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import type {Readable} from "svelte/store"
-  import {writable} from "svelte/store"
   import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
   import {append} from "@welshman/lib"
   import {isMobile} from "@lib/html"
@@ -9,7 +8,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import {getEditorOptions, addFile, uploadFiles, getEditorTags} from "@lib/editor"
+  import {getEditorOptions, getEditorTags} from "@lib/editor"
   import {getPubkeyHints, publishComment} from "@app/commands"
   import {tagRoom, GENERAL} from "@app/state"
   import {pushToast} from "@app/toast"
@@ -19,11 +18,9 @@
   export let onClose
   export let onSubmit
 
-  const startSubmit = () => uploadFiles($editor)
-
-  const loading = writable(false)
-
   const submit = () => {
+    if ($loading) return
+
     const content = $editor.getText({blockSeparator: "\n"})
     const tags = append(tagRoom(GENERAL, url), getEditorTags($editor))
 
@@ -39,15 +36,17 @@
 
   let editor: Readable<Editor>
 
+  $: loading = $editor?.storage.fileUpload.loading
+
   onMount(() => {
-    editor = createEditor(getEditorOptions({submit, loading, getPubkeyHints, autofocus: !isMobile}))
+    editor = createEditor(getEditorOptions({submit, getPubkeyHints, autofocus: !isMobile}))
   })
 </script>
 
 <form
   in:fly
   out:slideAndFade
-  on:submit|preventDefault={startSubmit}
+  on:submit|preventDefault={submit}
   class="card2 sticky bottom-2 z-feature mx-2 mt-2 bg-neutral">
   <div class="relative">
     <div class="note-editor flex-grow overflow-hidden">
@@ -56,7 +55,7 @@
     <Button
       data-tip="Add an image"
       class="tooltip tooltip-left absolute bottom-1 right-2"
-      on:click={() => addFile($editor)}>
+      on:click={$editor.commands.selectFiles}>
       {#if $loading}
         <span class="loading loading-spinner loading-xs"></span>
       {:else}