Re-work loading/syncing

src/routes/+layout.svelte

@@ -15,7 +15,6 @@
     RELAYS,
     INBOX_RELAYS,
     WRAP,
-    DELETE,
     getPubkeyTagValues,
     getListTags,
   } from "@welshman/util"
@@ -37,9 +36,11 @@
     dropSession,
     getRelayUrls,
     userInboxRelaySelections,
+    load,
   } from "@welshman/app"
   import * as lib from "@welshman/lib"
   import * as util from "@welshman/util"
+  import * as welshmanSigner from "@welshman/signer"
   import * as net from "@welshman/net"
   import * as app from "@welshman/app"
   import AppContainer from "@app/components/AppContainer.svelte"
@@ -53,13 +54,13 @@
     getMembershipRooms,
     userMembership,
     ensureUnwrapped,
-    MEMBERSHIPS,
     MESSAGE,
     COMMENT,
     THREAD,
     GENERAL,
   } from "@app/state"
   import {loadUserData, subscribePersistent} from "@app/commands"
+  import * as commands from "@app/commands"
   import {checked} from "@app/notifications"
   import * as notifications from "@app/notifications"
   import * as state from "@app/state"
@@ -72,7 +73,18 @@
   let ready: Promise<unknown> = Promise.resolve()
 
   onMount(async () => {
-    Object.assign(window, {get, nip19, ...lib, ...util, ...net, ...app, ...state, ...notifications})
+    Object.assign(window, {
+      get,
+      nip19,
+      ...lib,
+      ...welshmanSigner,
+      ...util,
+      ...net,
+      ...app,
+      ...state,
+      ...commands,
+      ...notifications,
+    })
 
     const getScoreEvent = () => {
       const ALWAYS_KEEP = Infinity
@@ -183,17 +195,23 @@
         const rooms = uniq(getMembershipRooms($membership).map(m => m.room)).concat(GENERAL)
         const relays = uniq(getMembershipUrls($membership))
 
+        // Get one event for each of our notification categories
+        load({
+          relays,
+          filters: [
+            {kinds: [THREAD], limit: 1},
+            {kinds: [COMMENT], "#K": [String(THREAD)], limit: 1},
+            ...rooms.map(room => ({kinds: [MESSAGE], "#~": [room], limit: 1})),
+          ],
+        })
+
+        // Listen for new notifications/memberships
         subscribePersistent({
           relays,
           filters: [
             {kinds: [THREAD], since},
-            {kinds: [THREAD], limit: 1},
+            {kinds: [COMMENT], "#K": [String(THREAD)], since},
             {kinds: [MESSAGE], "#~": rooms, since},
-            {kinds: [MESSAGE], "#~": rooms, limit: 1},
-            {kinds: [COMMENT], "#K": [THREAD, MESSAGE].map(String), since},
-            {kinds: [COMMENT], "#K": [THREAD, MESSAGE].map(String), limit: 1},
-            {kinds: [DELETE], "#k": [THREAD, COMMENT, MESSAGE].map(String), since},
-            {kinds: [MEMBERSHIPS], "#r": relays, since: ago(WEEK, 2)},
           ],
         })
       })

src/routes/discover/+page.svelte

@@ -3,7 +3,7 @@
   import {derived} from "svelte/store"
   import {addToMapKey, dec, gt} from "@welshman/lib"
   import type {Relay} from "@welshman/app"
-  import {relays, createSearch, relaySelections} from "@welshman/app"
+  import {relays, createSearch} from "@welshman/app"
   import {createScroller} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
@@ -41,7 +41,6 @@
   let term = ""
   let limit = 20
   let element: Element
-  let promise: Promise<any>
 
   $: relaySearch = createSearch($relays, {
     getValue: (relay: Relay) => relay.url,
@@ -59,8 +58,6 @@
   })
 
   onMount(() => {
-    promise = Promise.all([discoverRelays($memberships), discoverRelays($relaySelections)])
-
     const scroller = createScroller({
       element,
       onScroll: () => {
@@ -126,8 +123,10 @@
         {/if}
       </Button>
     {/each}
-    {#await promise}
-      <Spinner loading>Loading more relays...</Spinner>
+    {#await discoverRelays($memberships)}
+      <div class="flex justify-center">
+        <Spinner loading>Loading more relays...</Spinner>
+      </div>
     {/await}
   </div>
 </Page>

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

@@ -1,14 +1,16 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {ifLet} from "@welshman/lib"
+  import {ifLet, now} from "@welshman/lib"
+  import {subscribe} from "@welshman/app"
+  import {DELETE, REACTION} from "@welshman/util"
   import Page from "@lib/components/Page.svelte"
   import SecondaryNav from "@lib/components/SecondaryNav.svelte"
   import MenuSpace from "@app/components/MenuSpace.svelte"
   import {pushToast} from "@app/toast"
   import {setChecked} from "@app/notifications"
   import {checkRelayConnection, checkRelayAuth} from "@app/commands"
-  import {decodeRelay} from "@app/state"
+  import {decodeRelay, MEMBERSHIPS} from "@app/state"
   import {deriveNotification, SPACE_FILTERS} from "@app/notifications"
 
   const url = decodeRelay($page.params.relay)
@@ -34,6 +36,15 @@
 
   onMount(() => {
     checkConnection()
+
+    const sub = subscribe({
+      relays: [url],
+      filters: [{kinds: [MEMBERSHIPS]}, {kinds: [DELETE, REACTION], since: now()}],
+    })
+
+    return () => {
+      sub.close()
+    }
   })
 </script>
 

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

@@ -3,22 +3,18 @@
   import {deriveRelay} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
-  import Button from "@lib/components/Button.svelte"
   import Divider from "@lib/components/Divider.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
-  import MenuSpace from "@app/components/MenuSpace.svelte"
+  import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
   import ProfileFeed from "@app/components/ProfileFeed.svelte"
   import RelayName from "@app/components/RelayName.svelte"
   import RelayDescription from "@app/components/RelayDescription.svelte"
   import {decodeRelay} from "@app/state"
-  import {pushDrawer} from "@app/modal"
   import {makeChatPath} from "@app/routes"
 
   const url = decodeRelay($page.params.relay)
   const relay = deriveRelay(url)
 
-  const openMenu = () => pushDrawer(MenuSpace, {url})
-
   $: pubkey = $relay?.profile?.pubkey
 </script>
 
@@ -35,9 +31,7 @@
           Contact Owner
         </Link>
       {/if}
-      <Button on:click={openMenu} class="btn btn-neutral btn-sm md:hidden">
-        <Icon icon="menu-dots" />
-      </Button>
+      <MenuSpaceButton {url} />
     </div>
   </PageBar>
   <div class="col-2 p-2">

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

@@ -8,11 +8,11 @@
 </script>
 
 <script lang="ts">
-  import {onDestroy} from "svelte"
+  import {onMount, onDestroy} from "svelte"
   import {page} from "$app/stores"
-  import {sortBy, append} from "@welshman/lib"
+  import {sortBy, append, now} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
-  import {createEvent} from "@welshman/util"
+  import {createEvent, DELETE} from "@welshman/util"
   import {formatTimestampAsDate, publishThunk} from "@welshman/app"
   import {slide} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
@@ -20,10 +20,11 @@
   import Spinner from "@lib/components/Spinner.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import Divider from "@lib/components/Divider.svelte"
-  import MenuSpace from "@app/components/MenuSpace.svelte"
+  import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
   import ChannelMessage from "@app/components/ChannelMessage.svelte"
   import ChannelCompose from "@app/components/ChannelCompose.svelte"
   import {
+    pullConservatively,
     userSettingValues,
     userMembership,
     decodeRelay,
@@ -36,8 +37,7 @@
     getMembershipRoomsByUrl,
   } from "@app/state"
   import {setChecked} from "@app/notifications"
-  import {addRoomMembership, removeRoomMembership} from "@app/commands"
-  import {pushDrawer} from "@app/modal"
+  import {addRoomMembership, removeRoomMembership, subscribePersistent} from "@app/commands"
   import {popKey} from "@app/implicit"
 
   const {room = GENERAL} = $page.params
@@ -45,8 +45,6 @@
   const url = decodeRelay($page.params.relay)
   const channel = deriveChannel(makeChannelId(url, room))
 
-  const openMenu = () => pushDrawer(MenuSpace, {url})
-
   const assertEvent = (e: any) => e as TrustedEvent
 
   const onSubmit = ({content, tags}: EventContent) =>
@@ -91,6 +89,22 @@
     elements.reverse()
   }
 
+  onMount(() => {
+    pullConservatively({
+      relays: [url],
+      filters: [{kinds: [MESSAGE, DELETE], "#~": [room]}],
+    })
+
+    const unsub = subscribePersistent({
+      relays: [url],
+      filters: [{kinds: [MESSAGE, COMMENT], "#~": [room], since: now()}],
+    })
+
+    return () => {
+      unsub()
+    }
+  })
+
   onDestroy(() => {
     setChecked($page.url.pathname)
   })
@@ -120,9 +134,7 @@
           </Button>
         {/if}
       {/if}
-      <Button on:click={openMenu} class="btn btn-neutral btn-sm md:hidden">
-        <Icon icon="menu-dots" />
-      </Button>
+      <MenuSpaceButton {url} />
     </div>
   </PageBar>
   <div class="-mt-2 flex flex-grow flex-col-reverse overflow-auto py-2">

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

@@ -10,10 +10,10 @@
   import Spinner from "@lib/components/Spinner.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import Divider from "@lib/components/Divider.svelte"
-  import MenuSpace from "@app/components/MenuSpace.svelte"
+  import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
   import EventItem from "@app/components/EventItem.svelte"
   import EventCreate from "@app/components/EventCreate.svelte"
-  import {pushModal, pushDrawer} from "@app/modal"
+  import {pushModal} from "@app/modal"
   import {deriveEventsForUrl, pullConservatively, decodeRelay} from "@app/state"
   import {setChecked} from "@app/notifications"
 
@@ -21,8 +21,6 @@
   const kinds = [EVENT_DATE, EVENT_TIME]
   const events = deriveEventsForUrl(url, [{kinds}])
 
-  const openMenu = () => pushDrawer(MenuSpace, {url})
-
   const createEvent = () => pushModal(EventCreate, {url})
 
   const getEnd = (event: TrustedEvent) => parseInt(event.tags.find(t => t[0] === "end")?.[1] || "")
@@ -78,9 +76,7 @@
     </div>
     <strong slot="title">Calendar</strong>
     <div slot="action" class="md:hidden">
-      <Button on:click={openMenu} class="btn btn-neutral btn-sm">
-        <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/+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>