Fix room subscription

src/app/commands.ts

@@ -21,7 +21,7 @@ import {
   getRelayTagValues,
 } from "@welshman/util"
 import type {TrustedEvent, EventTemplate, List} from "@welshman/util"
-import type {SubscribeRequestWithHandlers} from "@welshman/net"
+import type {SubscribeRequestWithHandlers, Subscription} from "@welshman/net"
 import {PublishStatus, AuthStatus, ConnectionStatus} from "@welshman/net"
 import {Nip59, makeSecret, stamp, Nip46Broker} from "@welshman/signer"
 import type {Nip46Handler} from "@welshman/signer"
@@ -47,6 +47,7 @@ import {
   loadRelay,
   addSession,
   nip46Perms,
+  subscribe,
 } from "@welshman/app"
 import {
   COMMENT,
@@ -89,6 +90,33 @@ export const makeIMeta = (url: string, data: Record<string, string>) => [
   ...Object.entries(data).map(([k, v]) => [k, v].join(" ")),
 ]
 
+export const subscribePersistent = (request: SubscribeRequestWithHandlers) => {
+  let sub: Subscription
+  let done = false
+
+  const start = async () => {
+    // If the subscription gets closed quickly, don't start flapping
+    await Promise.all([
+      sleep(30_000),
+      new Promise(resolve => {
+        sub = subscribe(request)
+        sub.emitter.on("close", resolve)
+      })
+    ])
+
+    if (!done) {
+      start()
+    }
+  }
+
+  start()
+
+  return () => {
+    done = true
+    sub?.close()
+  }
+}
+
 // Log in
 
 export const loginWithNip46 = async (token: string, handler: Nip46Handler) => {

src/app/components/Chat.svelte

@@ -10,7 +10,7 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {derived, writable} from "svelte/store"
-  import {assoc, sortBy, remove} from "@welshman/lib"
+  import {int, assoc, MINUTE, now, sortBy, remove} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {createEvent, DIRECT_MESSAGE} from "@welshman/util"
   import {
@@ -70,6 +70,7 @@
 
     let previousDate
     let previousPubkey
+    let previousCreatedAt = 0
 
     for (const event of sortBy(e => e.created_at, $chat?.messages || [])) {
       const {id, pubkey, created_at} = event
@@ -83,11 +84,12 @@
         id,
         type: "note",
         value: event,
-        showPubkey: date !== previousDate || previousPubkey !== pubkey,
+        showPubkey: ((created_at - previousCreatedAt) > int(15, MINUTE)) || previousPubkey !== pubkey,
       })
 
       previousDate = date
       previousPubkey = pubkey
+      previousCreatedAt = created_at
     }
 
     elements.reverse()

src/app/components/ChatMessage.svelte

@@ -81,33 +81,29 @@
     </button>
   </Tippy>
   <div class="flex flex-col">
-    <LongPress class="chat-bubble mx-1 max-w-sm text-left" onLongPress={showMobileMenu}>
-      <div class="flex w-full items-start gap-2">
-        {#if showPubkey}
-          <Link external href={pubkeyLink(event.pubkey)}>
+    <LongPress class="chat-bubble mx-1 max-w-sm text-left flex flex-col gap-1" onLongPress={showMobileMenu}>
+      {#if showPubkey && event.pubkey !== $pubkey}
+        <div class="flex items-center gap-2">
+          <Link external href={pubkeyLink(event.pubkey)} class="flex gap-1 items-center">
             <Avatar
               src={$profile?.picture}
               class="border border-solid border-base-content"
-              size={8} />
+              size={4} />
+              <div class="flex items-center gap-2">
+                <Link
+                  external
+                  href={pubkeyLink(event.pubkey)}
+                  class="text-sm font-bold"
+                  style="color: {colorValue}">
+                  {$profileDisplay}
+                </Link>
+              </div>
           </Link>
-        {/if}
-        <div class="-mt-1 flex-grow pr-1">
-          {#if showPubkey}
-            <div class="flex items-center gap-2">
-              <Link
-                external
-                href={pubkeyLink(event.pubkey)}
-                class="text-sm font-bold"
-                style="color: {colorValue}">
-                {$profileDisplay}
-              </Link>
-              <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
-            </div>
-          {/if}
-          <div class="text-sm">
-            <Content showEntire {event} />
-          </div>
+          <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
         </div>
+      {/if}
+      <div class="text-sm">
+        <Content showEntire {event} />
       </div>
     </LongPress>
     <div class="row-2 z-feature -mt-1 ml-4">