Fix message layout, fix uploads

src/app/components/ChannelCompose.svelte

@@ -1,22 +1,21 @@
 <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 {isMobile} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import {getEditorOptions, getEditorTags, addFile} from "@lib/editor"
+  import {getEditorOptions, getEditorTags} from "@lib/editor"
   import {getPubkeyHints} from "@app/commands"
 
   export let onSubmit
   export let content = ""
 
-  const loading = writable(false)
-
   let editor: Readable<Editor>
 
   const submit = () => {
+    if ($loading) return
+
     onSubmit({
       content: $editor.getText({blockSeparator: "\n"}),
       tags: getEditorTags($editor),
@@ -25,11 +24,12 @@
     $editor.chain().clearContent().run()
   }
 
+  $: loading = $editor?.storage.fileUpload.loading
+
   onMount(() => {
     editor = createEditor(
       getEditorOptions({
         submit,
-        loading,
         getPubkeyHints,
         submitOnEnter: true,
         autofocus: !isMobile,
@@ -40,11 +40,14 @@
   })
 </script>
 
-<div class="relative z-feature flex gap-2 p-2">
+<form
+  class="relative z-feature flex gap-2 p-2"
+  on:submit|preventDefault={$loading ? undefined : submit}>
   <Button
     data-tip="Add an image"
     class="center tooltip tooltip-right h-10 w-10 min-w-10 rounded-box bg-base-300 transition-colors hover:bg-base-200"
-    on:click={() => addFile($editor)}>
+    disabled={$loading}
+    on:click={$editor.commands.selectFiles}>
     {#if $loading}
       <span class="loading loading-spinner loading-xs"></span>
     {:else}
@@ -54,4 +57,4 @@
   <div class="chat-editor flex-grow overflow-hidden">
     <EditorContent editor={$editor} />
   </div>
-</div>
+</form>