Show sending in channel

src/app/views/ChannelsDetail.svelte

@@ -46,7 +46,7 @@
       return sendLegacyMessage(channelId, content)
     }
 
-    sendMessage(channelId, content)
+    await sendMessage(channelId, content)
   }
 
   onMount(() => {
@@ -125,10 +125,12 @@
                 >here</Anchor
               >.
             </p>
-            <p>
-              Note that these messages are not yet universally supported. Make sure the person
-              you're chatting with is using a compatible nostr client.
-            </p>
+            {#if message.pubkey === $session.pubkey}
+              <p>
+                Note that these messages are not yet universally supported. Make sure the person
+                you're chatting with is using a compatible nostr client.
+              </p>
+            {/if}
           </div>
         </Popover>
       {/if}

src/engine/commands.ts

@@ -767,12 +767,10 @@ export const markAsSeen = async (kind: number, eventsByKey: Record<string, Trust
   }
 
   const json = JSON.stringify(tags)
+  const relays = hints.WriteRelays().getUrls()
+  const content = await signer.get().nip44.encrypt(pubkey.get(), json)
 
-  await createAndPublish({
-    kind,
-    content: await signer.get().nip44.encrypt(pubkey.get(), json),
-    relays: hints.WriteRelays().getUrls(),
-  })
+  await createAndPublish({kind, content, relays})
 }
 
 // Messages
@@ -821,17 +819,17 @@ export const markChannelsRead = (ids: Set<string>) => {
   const $pubkey = pubkey.get()
   const eventsByKey = {}
 
-  for (const channel of get(channels)) {
-    if (!ids.has(channel.id) || channel.last_sent > channel.last_received) {
+  for (const {id, last_sent = 0, last_received = 0, last_checked = 0} of get(channels)) {
+    if (!ids.has(id) || Math.max(last_sent, last_checked) > last_received) {
       continue
     }
 
-    const key = getChannelSeenKey(channel.id)
-    const members = channel.id.split(",")
-    const filter = {kinds: [4, DIRECT_MESSAGE], authors: members, "#p": members}
+    const members = id.split(",")
+    const key = getChannelSeenKey(id)
+    const since = Math.max(last_sent, last_checked)
     const events = repository
-      .query([filter])
-      .filter(e => getChannelIdFromEvent(e) === channel.id && e.pubkey !== $pubkey)
+      .query([{kinds: [4, DIRECT_MESSAGE], authors: members, "#p": members, since}])
+      .filter(e => getChannelIdFromEvent(e) === id && e.pubkey !== $pubkey)
 
     if (events.length > 0) {
       eventsByKey[key] = events

src/partials/Channel.svelte

@@ -4,7 +4,7 @@
   import {sleep, remove} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {prop, max, reverse, pluck, sortBy, last} from "ramda"
-  import {fly} from "src/util/transition"
+  import {fly, slide} from "src/util/transition"
   import {createScroller} from "src/util/misc"
   import Spinner from "src/partials/Spinner.svelte"
   import Anchor from "src/partials/Anchor.svelte"
@@ -42,7 +42,7 @@
     confirmIsOpen = false
   }
 
-  let textarea, element, scroller
+  let textarea, element, scroller, sending
   let limit = 10
   let showNewMessages = false
   let groupedMessages = []
@@ -104,9 +104,11 @@
 
     if (content) {
       textarea.value = ""
+      sending = true
 
       await sendMessage(content, useNip17)
 
+      sending = false
       stickToBottom()
     }
   }
@@ -148,20 +150,28 @@
   <div class="bg-neutral-900">
     <slot name="header" />
   </div>
-  <ul
+  <div
     bind:this={element}
     class="flex flex-grow flex-col-reverse justify-start overflow-auto p-4 pb-6">
+    <div>
+      {#if sending}
+        <div class="m-auto flex gap-2 justify-center items-center text-neutral-500 pt-2" transition:slide>
+          <i class="fa fa-circle-notch fa-spin" />
+          <span>Sending your message...</span>
+        </div>
+      {/if}
+    </div>
     {#each groupedMessages as m (m.id)}
-      <li in:fly={{y: 20}} class="grid gap-2 py-1">
+      <div in:fly={{y: 20}} class="grid gap-2 py-1">
         <slot name="message" message={m} />
-      </li>
+      </div>
     {/each}
     {#await loading}
       <Spinner>Looking for messages...</Spinner>
     {:then}
       <div in:fly={{y: 20}} class="py-20 text-center">End of message history</div>
     {/await}
-  </ul>
+  </div>
   {#if $hasNip44 || !isGroupMessage}
     <div
       class="flex border-t border-solid border-neutral-600 border-tinted-700 bg-neutral-900 dark:bg-neutral-600">