Listen for new threads and replies

src/app/components/Content.svelte

@@ -92,7 +92,7 @@
       style={expandBlock ? "mask-image: linear-gradient(0deg, transparent 0px, black 100px)" : ""}>
       {#each shortContent as parsed, i}
         {#if isNewline(parsed)}
-          <ContentNewline value={parsed.value.slice(1) || "\n"} />
+          <ContentNewline value={parsed.value} />
         {:else if isTopic(parsed)}
           <ContentTopic value={parsed.value} />
         {:else if isCode(parsed)}

src/app/components/PrimaryNav.svelte

@@ -44,10 +44,7 @@
           </PrimaryNavItem>
         {/each}
         <PrimaryNavItem title="Add Space" on:click={addSpace} class="tooltip-right">
-          <Avatar icon="add-circle" class="!h-10 !w-10" />
+          <Avatar icon="settings-minimalistic" class="!h-10 !w-10" />
-        </PrimaryNavItem>
-        <PrimaryNavItem title="Discover Spaces" href="/discover" class="tooltip-right">
-          <Avatar icon="compass-big" class="!h-10 !w-10" />
         </PrimaryNavItem>
       {/if}
     </div>

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
+  import {now, assoc} from "@welshman/lib"
   import {getListTags, getPubkeyTagValues} from "@welshman/util"
   import type {Filter} from "@welshman/util"
   import {feedsFromFilters, makeIntersectionFeed, makeRelayFeed} from "@welshman/feeds"
@@ -16,6 +17,7 @@
   import ThreadCreate from "@app/components/ThreadCreate.svelte"
   import {THREAD, COMMENT, deriveEventsForUrl, decodeRelay} from "@app/state"
   import {pushModal, pushDrawer} from "@app/modal"
+  import {subscribePersistent} from "@app/commands"
 
   const url = decodeRelay($page.params.relay)
   const events = deriveEventsForUrl(url, [{kinds: [THREAD]}])
@@ -37,21 +39,26 @@
   let element: Element
 
   onMount(() => {
-    // Why is element not defined sometimes? SVELTEKIT
+    const unsub = subscribePersistent({
-    if (element) {
+      filters: filters.map(assoc('since', now())),
-      const scroller = createScroller({
+      relays: [url],
-        element,
+    })
-        delay: 300,
-        threshold: 3000,
-        onScroll: async () => {
-          const $loader = await loader
 
-          await $loader(5)
+    const scroller = createScroller({
-          limit += 5
+      element,
-        },
+      delay: 300,
-      })
+      threshold: 3000,
+      onScroll: async () => {
+        const $loader = await loader
 
-      return () => scroller.stop()
+        await $loader(5)
+        limit += 5
+      },
+    })
+
+    return () => {
+      unsub()
+      scroller.stop()
     }
   })
 </script>