Re-work loading/syncing

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import {onMount, onDestroy} from "svelte"
+  import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {sortBy, sleep, uniqBy} from "@welshman/lib"
+  import {sortBy, sleep, uniqBy, now} from "@welshman/lib"
   import {getListTags, getPubkeyTagValues} from "@welshman/util"
   import type {TrustedEvent} from "@welshman/util"
   import {feedsFromFilters, makeIntersectionFeed, makeRelayFeed} from "@welshman/feeds"
@@ -13,17 +13,17 @@
   import Button from "@lib/components/Button.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
-  import MenuSpace from "@app/components/MenuSpace.svelte"
+  import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
   import ThreadItem from "@app/components/ThreadItem.svelte"
   import ThreadCreate from "@app/components/ThreadCreate.svelte"
-  import {THREAD, decodeRelay, getEventsForUrl} from "@app/state"
-  import {pushModal, pushDrawer} from "@app/modal"
+  import {THREAD, COMMENT, decodeRelay, getEventsForUrl} from "@app/state"
+  import {subscribePersistent} from "@app/commands"
   import {THREAD_FILTERS, setChecked} from "@app/notifications"
+  import {pushModal} from "@app/modal"
 
   const url = decodeRelay($page.params.relay)
-  const mutedPubkeys = getPubkeyTagValues(getListTags($userMutes))
 
-  const openMenu = () => pushDrawer(MenuSpace, {url})
+  const mutedPubkeys = getPubkeyTagValues(getListTags($userMutes))
 
   const createThread = () => pushModal(ThreadCreate, {url})
 
@@ -51,32 +51,38 @@
   let buffer: TrustedEvent[] = []
   let events: TrustedEvent[] = sortBy(e => -e.created_at, getEventsForUrl(url, [{kinds: [THREAD]}]))
 
-  onMount(async () => {
+  onMount(() => {
     // Element is frequently not defined. I don't know why
-    await sleep(1000)
+    sleep(1000).then(() => {
+      if (!unmounted) {
+        scroller = createScroller({
+          element,
+          delay: 300,
+          threshold: 3000,
+          onScroll: () => {
+            buffer = sortBy(e => -e.created_at, buffer)
+            events = uniqBy(e => e.id, [...events, ...buffer.splice(0, 5)])
 
-    if (!unmounted) {
-      scroller = createScroller({
-        element,
-        delay: 300,
-        threshold: 3000,
-        onScroll: () => {
-          buffer = sortBy(e => -e.created_at, buffer)
-          events = uniqBy(e => e.id, [...events, ...buffer.splice(0, 5)])
+            if (buffer.length < 50) {
+              ctrl.load(50)
+            }
+          },
+        })
+      }
+    })
 
-          if (buffer.length < 50) {
-            ctrl.load(50)
-          }
-        },
-      })
+    const unsub = subscribePersistent({
+      relays: [url],
+      filters: [{kinds: [COMMENT], "#K": [String(THREAD)], since: now()}],
+    })
+
+    return () => {
+      unsub()
+      unmounted = true
+      scroller?.stop()
+      setChecked($page.url.pathname)
     }
   })
-
-  onDestroy(() => {
-    unmounted = true
-    scroller?.stop()
-    setChecked($page.url.pathname)
-  })
 </script>
 
 <div class="relative flex h-screen flex-col" bind:this={element}>
@@ -90,9 +96,7 @@
         <Icon icon="notes-minimalistic" />
         Create a Thread
       </Button>
-      <Button on:click={openMenu} class="btn btn-neutral btn-sm md:hidden">
-        <Icon icon="menu-dots" />
-      </Button>
+      <MenuSpaceButton {url} />
     </div>
   </PageBar>
   <div class="flex flex-grow flex-col gap-2 overflow-auto p-2">

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import {onMount, onDestroy} from "svelte"
+  import {onMount} from "svelte"
   import {sortBy, nthEq, sleep} from "@welshman/lib"
   import {page} from "$app/stores"
-  import {repository, subscribe} from "@welshman/app"
+  import {repository} from "@welshman/app"
   import {deriveEvents} from "@welshman/store"
   import Icon from "@lib/components/Icon.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
@@ -10,12 +10,12 @@
   import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
-  import MenuSpace from "@app/components/MenuSpace.svelte"
+  import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
   import ThreadActions from "@app/components/ThreadActions.svelte"
   import ThreadReply from "@app/components/ThreadReply.svelte"
   import {COMMENT, deriveEvent, decodeRelay} from "@app/state"
+  import {subscribePersistent} from "@app/commands"
   import {setChecked} from "@app/notifications"
-  import {pushDrawer} from "@app/modal"
 
   const {relay, id} = $page.params
   const url = decodeRelay(relay)
@@ -25,8 +25,6 @@
 
   const back = () => history.back()
 
-  const openMenu = () => pushDrawer(MenuSpace, {url})
-
   const openReply = () => {
     showReply = true
   }
@@ -40,13 +38,12 @@
   $: title = $event?.tags.find(nthEq(0, "title"))?.[1] || ""
 
   onMount(() => {
-    const sub = subscribe({filters, relays: [url]})
+    const unsub = subscribePersistent({relays: [url], filters})
 
-    return () => sub.close()
-  })
-
-  onDestroy(() => {
-    setChecked($page.url.pathname)
+    return () => {
+      unsub()
+      setChecked($page.url.pathname)
+    }
   })
 </script>
 
@@ -91,9 +88,7 @@
     </div>
     <h1 slot="title" class="text-xl">{title}</h1>
     <div slot="action">
-      <Button on:click={openMenu} class="btn btn-neutral btn-sm md:hidden">
-        <Icon icon="menu-dots" />
-      </Button>
+      <MenuSpaceButton {url} />
     </div>
   </PageBar>
 </div>