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>

src/app/components/ChatMessage.svelte

@@ -85,7 +85,7 @@
       <Icon icon="menu-dots" size={4} />
     </button>
   </Tippy>
-  <div class="flex min-w-0 flex-col">
+  <div class="flex min-w-0 flex-col" class:items-end={event.pubkey === $pubkey}>
     <LongPress
       class="bg-alt chat-bubble mx-1 flex cursor-auto flex-col gap-1 text-left lg:max-w-2xl"
       onLongPress={showMobileMenu}>

src/app/components/ChatStart.svelte

@@ -23,7 +23,7 @@
   </ModalHeader>
   <Field>
     <div slot="input">
-      <ProfileMultiSelect bind:value={pubkeys} />
+      <ProfileMultiSelect autofocus bind:value={pubkeys} />
     </div>
   </Field>
   <ModalFooter>

src/app/components/EventCreate.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 {randomId} from "@welshman/lib"
   import {createEvent, EVENT_DATE, EVENT_TIME} from "@welshman/util"
@@ -13,18 +12,16 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import DateTimeInput from "@lib/components/DateTimeInput.svelte"
   import {getPubkeyHints} from "@app/commands"
-  import {getEditorOptions, addFile, uploadFiles, getEditorTags} from "@lib/editor"
+  import {getEditorOptions, getEditorTags} from "@lib/editor"
   import {pushToast} from "@app/toast"
 
   export let url
 
-  const startSubmit = () => uploadFiles($editor)
-
   const back = () => history.back()
 
-  const loading = writable(false)
-
   const submit = () => {
+    if ($loading) return
+
     if (!title) {
       return pushToast({
         theme: "error",
@@ -63,12 +60,14 @@
   let start: Date
   let end: Date
 
+  $: loading = $editor?.storage.fileUpload.loading
+
   onMount(() => {
-    editor = createEditor(getEditorOptions({submit, loading, getPubkeyHints}))
+    editor = createEditor(getEditorOptions({submit, getPubkeyHints}))
   })
 </script>
 
-<form class="column gap-4" on:submit|preventDefault={startSubmit}>
+<form class="column gap-4" on:submit|preventDefault={submit}>
   <ModalHeader>
     <div slot="title">Create an Event</div>
     <div slot="info">Invite other group members to events online or in real life.</div>
@@ -87,7 +86,10 @@
       <div class="input-editor flex-grow overflow-hidden">
         <EditorContent editor={$editor} />
       </div>
-      <Button data-tip="Add an image" class="center btn tooltip" on:click={() => addFile($editor)}>
+      <Button
+        data-tip="Add an image"
+        class="center btn tooltip"
+        on:click={$editor.commands.selectFiles}>
         {#if $loading}
           <span class="loading loading-spinner loading-xs"></span>
         {:else}

src/app/components/ProfileMultiSelect.svelte

@@ -13,6 +13,7 @@
   import {pubkeyLink} from "@app/state"
 
   export let value: string[]
+  export let autofocus = false
 
   let term = ""
   let input: Element
@@ -59,7 +60,9 @@
   </div>
   <label class="input input-bordered flex w-full items-center gap-2" bind:this={input}>
     <Icon icon="magnifer" />
+    <!-- svelte-ignore a11y-autofocus -->
     <input
+      {autofocus}
       class="grow"
       type="text"
       placeholder="Search for profiles..."

src/app/components/ThreadCreate.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 {createEvent} from "@welshman/util"
   import {publishThunk} from "@welshman/app"
@@ -13,19 +12,16 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {pushToast} from "@app/toast"
   import {THREAD, GENERAL, tagRoom} from "@app/state"
-
   import {getPubkeyHints} from "@app/commands"
-  import {getEditorOptions, addFile, uploadFiles, getEditorTags} from "@lib/editor"
+  import {getEditorOptions, getEditorTags} from "@lib/editor"
 
   export let url
 
-  const startSubmit = () => uploadFiles($editor)
-
   const back = () => history.back()
 
-  const loading = writable(false)
-
   const submit = () => {
+    if ($loading) return
+
     if (!title) {
       return pushToast({
         theme: "error",
@@ -55,19 +51,16 @@
   let title: string
   let editor: Readable<Editor>
 
+  $: loading = $editor?.storage.fileUpload.loading
+
   onMount(() => {
     editor = createEditor(
-      getEditorOptions({
-        submit,
-        loading,
-        getPubkeyHints,
-        placeholder: "What's on your mind?",
-      }),
+      getEditorOptions({submit, getPubkeyHints, placeholder: "What's on your mind?"}),
     )
   })
 </script>
 
-<form class="column gap-4" on:submit|preventDefault={startSubmit}>
+<form class="column gap-4" on:submit|preventDefault={submit}>
   <ModalHeader>
     <div slot="title">Create a Thread</div>
     <div slot="info">Share a link, or start a discussion.</div>
@@ -94,7 +87,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}

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}