Subscribe to thread updates

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

@@ -40,56 +40,56 @@
       </Button>
     </div>
   </PageBar>
-  {#if pubkey}
+  <div class="col-2 p-2">
-    <div class="col-2 p-2">
+    <div class="card2 bg-alt col-4 text-left">
-      <div class="card2 bg-alt col-4 text-left">
+      <div class="relative flex gap-4">
-        <div class="relative flex gap-4">
+        <div class="relative">
-          <div class="relative">
+          <div class="avatar relative">
-            <div class="avatar relative">
+            <div
-              <div
+              class="center !flex h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
-                class="center !flex h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
+              {#if $relay?.profile?.icon}
-                {#if $relay?.profile?.icon}
+                <img alt="" src={$relay.profile.icon} />
-                  <img alt="" src={$relay.profile.icon} />
+              {:else}
-                {:else}
+                <Icon icon="ghost" size={5} />
-                  <Icon icon="ghost" size={5} />
+              {/if}
-                {/if}
-              </div>
             </div>
           </div>
-          <div>
-            <h2 class="ellipsize whitespace-nowrap text-xl">
-              <RelayName {url} />
-            </h2>
-            <p class="text-sm opacity-75">{url}</p>
-          </div>
         </div>
-        <RelayDescription {url} />
+        <div>
-        {#if $relay?.profile}
+          <h2 class="ellipsize whitespace-nowrap text-xl">
-          {@const {software, version, supported_nips, limitation} = $relay.profile}
+            <RelayName {url} />
-          <div class="flex flex-wrap gap-1">
+          </h2>
-            {#if limitation?.auth_required}
+          <p class="text-sm opacity-75">{url}</p>
-              <p class="badge badge-neutral">Authentication Required</p>
+        </div>
-            {/if}
-            {#if limitation?.payment_required}
-              <p class="badge badge-neutral">Payment Required</p>
-            {/if}
-            {#if limitation?.min_pow_difficulty}
-              <p class="badge badge-neutral">Requires PoW {limitation?.min_pow_difficulty}</p>
-            {/if}
-            {#if supported_nips}
-              <p class="badge badge-neutral">NIPs: {supported_nips.join(", ")}</p>
-            {/if}
-            {#if software}
-              <p class="badge badge-neutral">Software: {software}</p>
-            {/if}
-            {#if version}
-              <p class="badge badge-neutral">Version: {version}</p>
-            {/if}
-          </div>
-        {/if}
       </div>
+      <RelayDescription {url} />
+      {#if $relay?.profile}
+        {@const {software, version, supported_nips, limitation} = $relay.profile}
+        <div class="flex flex-wrap gap-1">
+          {#if limitation?.auth_required}
+            <p class="badge badge-neutral">Authentication Required</p>
+          {/if}
+          {#if limitation?.payment_required}
+            <p class="badge badge-neutral">Payment Required</p>
+          {/if}
+          {#if limitation?.min_pow_difficulty}
+            <p class="badge badge-neutral">Requires PoW {limitation?.min_pow_difficulty}</p>
+          {/if}
+          {#if supported_nips}
+            <p class="badge badge-neutral">NIPs: {supported_nips.join(", ")}</p>
+          {/if}
+          {#if software}
+            <p class="badge badge-neutral">Software: {software}</p>
+          {/if}
+          {#if version}
+            <p class="badge badge-neutral">Version: {version}</p>
+          {/if}
+        </div>
+      {/if}
+    </div>
+    {#if pubkey}
       <Divider>Recent posts from the relay admin</Divider>
       <ProfileFeed {url} {pubkey} />
-    </div>
+    {/if}
-  {/if}
+  </div>
 </div>

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

@@ -11,7 +11,7 @@
   import {onMount} from "svelte"
   import {page} from "$app/stores"
   import {writable} from "svelte/store"
-  import {sortBy, now, assoc, append} from "@welshman/lib"
+  import {sortBy, ago, assoc, append} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {createEvent} from "@welshman/util"
   import {formatTimestampAsDate, publishThunk} from "@welshman/app"
@@ -94,7 +94,12 @@
   }
 
   onMount(() => {
-    return subscribePersistent({filters: [{"#~": [room], since: now()}], relays: [url]})
+    const unsub = subscribePersistent({
+      filters: [{"#~": [room], since: ago(30)}],
+      relays: [url],
+    })
+
+    return () => unsub()
   })
 
   setTimeout(() => {

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {now, assoc} from "@welshman/lib"
+  import {ago, assoc} from "@welshman/lib"
   import {getListTags, getPubkeyTagValues} from "@welshman/util"
   import type {Filter} from "@welshman/util"
   import {feedsFromFilters, makeIntersectionFeed, makeRelayFeed} from "@welshman/feeds"
@@ -22,7 +22,7 @@
   const url = decodeRelay($page.params.relay)
   const events = deriveEventsForUrl(url, [{kinds: [THREAD]}])
   const mutedPubkeys = getPubkeyTagValues(getListTags($userMutes))
-  const filters: Filter[] = [{kinds: [THREAD]}, {kinds: [COMMENT], "#k": [String(THREAD)]}]
+  const filters: Filter[] = [{kinds: [THREAD]}, {kinds: [COMMENT], "#K": [String(THREAD)]}]
   const feed = makeIntersectionFeed(makeRelayFeed(url), feedsFromFilters(filters))
   const loader = feedLoader.getLoader(feed, {
     onExhausted: () => {
@@ -40,7 +40,7 @@
 
   onMount(() => {
     const unsub = subscribePersistent({
-      filters: filters.map(assoc('since', now())),
+      filters: filters.map(assoc('since', ago(30))),
       relays: [url],
     })
 
@@ -52,6 +52,7 @@
         const $loader = await loader
 
         await $loader(5)
+
         limit += 5
       },
     })
@@ -63,7 +64,7 @@
   })
 </script>
 
-<div class="relative flex h-screen flex-col">
+<div class="relative flex h-screen flex-col" bind:this={element}>
   <PageBar>
     <div slot="icon" class="center">
       <Icon icon="notes-minimalistic" />
@@ -79,7 +80,7 @@
       </Button>
     </div>
   </PageBar>
-  <div class="flex flex-grow flex-col gap-2 overflow-auto p-2" bind:this={element}>
+  <div class="flex flex-grow flex-col gap-2 overflow-auto p-2">
     {#each $events.slice(0, limit) as event (event.id)}
       {#if !event.tags.some(nthEq(0, "e")) && !mutedPubkeys.includes(event.pubkey)}
         <ThreadItem {url} {event} />