Fix room subscription

package-lock.json

@@ -32,7 +32,7 @@
         "@welshman/dvm": "~0.0.10",
         "@welshman/feeds": "~0.0.21",
         "@welshman/lib": "~0.0.23",
-        "@welshman/net": "~0.0.30",
+        "@welshman/net": "~0.0.31",
         "@welshman/signer": "~0.0.10",
         "@welshman/store": "~0.0.12",
         "@welshman/util": "~0.0.42",
@@ -3701,9 +3701,9 @@
       }
     },
     "node_modules/@welshman/net": {
-      "version": "0.0.30",
+      "version": "0.0.31",
-      "resolved": "https://registry.npmjs.org/@welshman/net/-/net-0.0.30.tgz",
+      "resolved": "https://registry.npmjs.org/@welshman/net/-/net-0.0.31.tgz",
-      "integrity": "sha512-whFPG/NKW80VAA1RL/RQOvEd6PqAUgLV7gBJ/06rKzmfTtG6SUcro/Qz0c25bEB/BjPvMjTF/M0hv6qQJLRL6Q==",
+      "integrity": "sha512-7UcEuU65XJTtphjtgGPTNO0InOHm9iqvsmsmhRk7QTNALDkIcqofL3TjnI32zPYJhq5QVIO8tXj04iXsld0OdQ==",
       "license": "MIT",
       "dependencies": {
         "@welshman/lib": "~0.0.23",

package.json

@@ -56,7 +56,7 @@
     "@welshman/dvm": "~0.0.10",
     "@welshman/feeds": "~0.0.21",
     "@welshman/lib": "~0.0.23",
-    "@welshman/net": "~0.0.30",
+    "@welshman/net": "~0.0.31",
     "@welshman/signer": "~0.0.10",
     "@welshman/store": "~0.0.12",
     "@welshman/util": "~0.0.42",

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}>
+    <LongPress class="chat-bubble mx-1 max-w-sm text-left flex flex-col gap-1" onLongPress={showMobileMenu}>
-      <div class="flex w-full items-start gap-2">
+      {#if showPubkey && event.pubkey !== $pubkey}
-        {#if showPubkey}
+        <div class="flex items-center gap-2">
-          <Link external href={pubkeyLink(event.pubkey)}>
+          <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}
+          <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
-        <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>
         </div>
+      {/if}
+      <div class="text-sm">
+        <Content showEntire {event} />
       </div>
     </LongPress>
     <div class="row-2 z-feature -mt-1 ml-4">

src/routes/spaces/[relay]/[room]/+page.svelte

@@ -14,7 +14,7 @@
   import {sortBy, now, assoc, append} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {createEvent} from "@welshman/util"
-  import {formatTimestampAsDate, subscribe, publishThunk} from "@welshman/app"
+  import {formatTimestampAsDate, publishThunk} from "@welshman/app"
   import type {Thunk} from "@welshman/app"
   import {slide} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
@@ -36,7 +36,7 @@
     COMMENT,
     getMembershipRoomsByUrl,
   } from "@app/state"
-  import {addRoomMembership, removeRoomMembership} from "@app/commands"
+  import {subscribePersistent, addRoomMembership, removeRoomMembership} from "@app/commands"
   import {pushDrawer} from "@app/modal"
   import {popKey} from "@app/implicit"
 
@@ -93,7 +93,7 @@
   }
 
   onMount(() => {
-    subscribe({filters: [{"#~": [room], since: now()}], relays: [url]})
+    return subscribePersistent({filters: [{"#~": [room], since: now()}], relays: [url]})
   })
 
   setTimeout(() => {