Re-work loading/syncing

src/app/commands.ts

@@ -22,7 +22,7 @@ import {
 } from "@welshman/util"
 import type {TrustedEvent, EventTemplate, List} from "@welshman/util"
 import type {SubscribeRequestWithHandlers, Subscription} from "@welshman/net"
-import {PublishStatus, AuthStatus, SocketStatus} from "@welshman/net"
+import {PublishStatus, AuthStatus, SocketStatus, SubscriptionEvent} from "@welshman/net"
 import {Nip59, makeSecret, stamp, Nip46Broker} from "@welshman/signer"
 import type {Nip46Handler} from "@welshman/signer"
 import {
@@ -58,6 +58,7 @@ import {
   loadMembership,
   loadSettings,
   getDefaultPubkeys,
+  getMembershipUrls,
 } from "@app/state"
 
 // Utils
@@ -100,7 +101,7 @@ export const subscribePersistent = (request: SubscribeRequestWithHandlers) => {
       sleep(30_000),
       new Promise(resolve => {
         sub = subscribe(request)
-        sub.emitter.on("close", resolve)
+        sub.emitter.on(SubscriptionEvent.Complete, resolve)
       }),
     ])
 
@@ -191,16 +192,20 @@ export const addSpaceMembership = async (url: string) => {
   const event = await addToListPublicly(list, ["r", url]).reconcile(nip44EncryptToSelf)
   const relays = uniq([...ctx.app.router.FromUser().getUrls(), ...getRelayTagValues(event.tags)])
 
-  return publishThunk({event, relays}).result
+  return publishThunk({event, relays})
 }
 
 export const removeSpaceMembership = async (url: string) => {
   const list = get(userMembership) || makeList({kind: MEMBERSHIPS})
   const pred = (t: string[]) => t[t[0] === "r" ? 1 : 2] === url
   const event = await removeFromListByPredicate(list, pred).reconcile(nip44EncryptToSelf)
-  const relays = uniq([...ctx.app.router.FromUser().getUrls(), ...getRelayTagValues(event.tags)])
+  const relays = uniq([
+    url,
+    ...ctx.app.router.FromUser().getUrls(),
+    ...getRelayTagValues(event.tags),
+  ])
 
-  return publishThunk({event, relays}).result
+  return publishThunk({event, relays})
 }
 
 export const addRoomMembership = async (url: string, room: string) => {
@@ -208,16 +213,20 @@ export const addRoomMembership = async (url: string, room: string) => {
   const event = await addToListPublicly(list, tagRoom(room, url)).reconcile(nip44EncryptToSelf)
   const relays = uniq([...ctx.app.router.FromUser().getUrls(), ...getRelayTagValues(event.tags)])
 
-  return publishThunk({event, relays}).result
+  return publishThunk({event, relays})
 }
 
 export const removeRoomMembership = async (url: string, room: string) => {
   const list = get(userMembership) || makeList({kind: MEMBERSHIPS})
   const pred = (t: string[]) => equals(tagRoom(room, url), t)
   const event = await removeFromListByPredicate(list, pred).reconcile(nip44EncryptToSelf)
-  const relays = uniq([...ctx.app.router.FromUser().getUrls(), ...getRelayTagValues(event.tags)])
+  const relays = uniq([
+    url,
+    ...ctx.app.router.FromUser().getUrls(),
+    ...getRelayTagValues(event.tags),
+  ])
 
-  return publishThunk({event, relays}).result
+  return publishThunk({event, relays})
 }
 
 export const setRelayPolicy = (url: string, read: boolean, write: boolean) => {
@@ -234,8 +243,13 @@ export const setRelayPolicy = (url: string, read: boolean, write: boolean) => {
 
   return publishThunk({
     event: createEvent(list.kind, {tags}),
-    relays: [...INDEXER_RELAYS, ...ctx.app.router.FromUser().getUrls()],
+    relays: [
-  }).result
+      url,
+      ...INDEXER_RELAYS,
+      ...ctx.app.router.FromUser().getUrls(),
+      ...getMembershipUrls(userMembership.get()),
+    ],
+  })
 }
 
 export const setInboxRelayPolicy = (url: string, enabled: boolean) => {
@@ -251,8 +265,12 @@ export const setInboxRelayPolicy = (url: string, enabled: boolean) => {
 
     return publishThunk({
       event: createEvent(list.kind, {tags}),
-      relays: [...INDEXER_RELAYS, ...ctx.app.router.FromUser().getUrls()],
+      relays: [
-    }).result
+        ...INDEXER_RELAYS,
+        ...ctx.app.router.FromUser().getUrls(),
+        ...getMembershipUrls(userMembership.get()),
+      ],
+    })
   }
 }
 

src/app/components/ChannelMessage.svelte

@@ -78,7 +78,7 @@
     {:else}
       <div class="w-10 min-w-10 max-w-10" />
     {/if}
-    <div class="-mt-1 flex-grow pr-1">
+    <div class="-mt-1 min-w-0 flex-grow pr-1">
       {#if showPubkey}
         <div class="flex items-center gap-2">
           <Link
@@ -101,9 +101,9 @@
   </div>
   <div class="row-2 ml-12">
     {#if !isHead}
-      <ReplySummary {event} on:click={onClick} />
+      <ReplySummary relays={[url]} {event} on:click={onClick} />
     {/if}
-    <ReactionSummary {event} {onReactionClick} />
+    <ReactionSummary relays={[url]} {event} {onReactionClick} />
   </div>
   <button
     class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all"

src/app/components/Chat.svelte

@@ -96,7 +96,7 @@
   }
 
   onMount(() => {
-    // Don't use loadInboxRelaySelections because we want to force reload
+    // Don't use loadInboxRelaySelection because we want to force reload
     load({filters: [{kinds: [INBOX_RELAYS], authors: others}]})
   })
 
@@ -108,7 +108,7 @@
 <div class="relative flex h-full w-full flex-col">
   {#if others.length > 0}
     <PageBar>
-      <div slot="title" class="row-2">
+      <div slot="title" class="flex flex-col gap-1 sm:flex-row sm:gap-2">
         {#if others.length === 1}
           {@const pubkey = others[0]}
           <Link external href={pubkeyLink(pubkey)} class="row-2">
@@ -116,13 +116,21 @@
             <ProfileName {pubkey} />
           </Link>
         {:else}
-          <ProfileCircles pubkeys={others} size={5} />
+          <div class="flex items-center gap-2">
-          <p class="overflow-hidden text-ellipsis whitespace-nowrap">
+            <ProfileCircles pubkeys={others} size={5} />
-            <ProfileName pubkey={others[0]} />
+            <p class="overflow-hidden text-ellipsis whitespace-nowrap">
-            and {others.length - 1}
+              <ProfileName pubkey={others[0]} />
-            {others.length > 2 ? "others" : "other"}
+              and
-            <Button on:click={showMembers} class="btn btn-link">Show all members</Button>
+              {#if others.length === 2}
-          </p>
+                <ProfileName pubkey={others[1]} />
+              {:else}
+                {others.length - 1}
+                {others.length > 2 ? "others" : "other"}
+              {/if}
+            </p>
+          </div>
+          <Button on:click={showMembers} class="btn btn-link hidden sm:block"
+            >Show all members</Button>
         {/if}
       </div>
       <div slot="action">

src/app/components/ChatMessage.svelte

@@ -56,7 +56,7 @@
 </script>
 
 {#if thunk}
-  <ThunkStatus {thunk} />
+  <ThunkStatus {thunk} class="mt-1" />
 {/if}
 <div
   class="group chat flex items-center justify-end gap-1 px-2"

src/app/components/MenuSpaceButton.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import {page} from "$app/stores"
+  import {derived} from "svelte/store"
+  import {max} from "@welshman/lib"
+  import {matchFilter} from "@welshman/util"
+  import {pubkey} from "@welshman/app"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import MenuSpace from "@app/components/MenuSpace.svelte"
+  import {checked, getNotification, deriveNotification, THREAD_FILTERS} from "@app/notifications"
+  import {
+    userMembership,
+    getMembershipRoomsByUrl,
+    deriveEventsForUrl,
+    MESSAGE,
+    GENERAL,
+  } from "@app/state"
+  import {makeRoomPath, makeSpacePath} from "@app/routes"
+  import {pushDrawer} from "@app/modal"
+
+  export let url
+
+  const openMenu = () => pushDrawer(MenuSpace, {url})
+
+  const events = deriveEventsForUrl(url, [{kinds: [MESSAGE]}])
+
+  const threadsPath = makeSpacePath(url, "threads")
+
+  const threadsNotification = deriveNotification(threadsPath, THREAD_FILTERS, url)
+
+  const notification = derived(
+    [page, events, checked, userMembership],
+    ([$page, $events, $checked, $userMembership]) => {
+      console.log(getMembershipRoomsByUrl(url, $userMembership).concat(GENERAL))
+      return getMembershipRoomsByUrl(url, $userMembership)
+        .concat(GENERAL)
+        .some(room => {
+          const path = makeRoomPath(url, room)
+
+          if ($page.url.pathname === path) return false
+
+          const lastChecked = max([$checked["*"], $checked[path]])
+          const roomEvents = $events.filter(e => matchFilter({"#~": [room]}, e))
+
+          return getNotification($pubkey, lastChecked, roomEvents)
+        })
+    },
+  )
+</script>
+
+<Button on:click={openMenu} class="btn btn-neutral btn-sm relative md:hidden">
+  <Icon icon="menu-dots" />
+  {#if $threadsNotification || $notification}
+    <div class="absolute right-0 top-0 -mr-1 -mt-1 h-2 w-2 rounded-full bg-primary" />
+  {/if}
+</Button>

src/app/components/MenuSpacesItem.svelte

@@ -5,12 +5,11 @@
   import RelayName from "@app/components/RelayName.svelte"
   import RelayDescription from "@app/components/RelayDescription.svelte"
   import {makeSpacePath} from "@app/routes"
-  import {deriveNotification, SPACE_FILTERS} from "@app/notifications"
+  import {spacesNotifications} from "@app/notifications"
 
   export let url
 
   const path = makeSpacePath(url)
-  const notification = deriveNotification(path, SPACE_FILTERS, url)
 </script>
 
 <Link replaceState href={path}>
@@ -18,7 +17,7 @@
     <div slot="icon"><SpaceAvatar {url} /></div>
     <div slot="title" class="flex gap-1">
       <RelayName {url} />
-      {#if $notification}
+      {#if $spacesNotifications.includes(url)}
         <div class="relative top-1 h-2 w-2 rounded-full bg-primary" />
       {/if}
     </div>

src/app/components/NoteItem.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-  import {onMount} from "svelte"
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import type {TrustedEvent} from "@welshman/util"
-  import {REACTION} from "@welshman/util"
+  import {pubkey} from "@welshman/app"
-  import {pubkey, load} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import EmojiButton from "@lib/components/EmojiButton.svelte"
   import Content from "@app/components/Content.svelte"
@@ -26,16 +24,12 @@
 
   const onEmoji = (emoji: NativeEmoji) =>
     publishReaction({event, relays: [url], content: emoji.unicode})
-
-  onMount(() => {
-    load({filters: [{kinds: [REACTION], "#e": [event.id]}]})
-  })
 </script>
 
 <NoteCard {event} class="card2 bg-alt">
   <Content {event} expandMode="inline" />
   <div class="flex w-full justify-between gap-2">
-    <ReactionSummary {event} {onReactionClick}>
+    <ReactionSummary relays={[url]} {event} {onReactionClick}>
       <EmojiButton {onEmoji} class="btn btn-neutral btn-xs h-[26px] rounded-box">
         <Icon icon="smile-circle" size={4} />
       </EmojiButton>

src/app/components/PrimaryNav.svelte

@@ -9,7 +9,7 @@
   import PrimaryNavItemSpace from "@app/components/PrimaryNavItemSpace.svelte"
   import {userMembership, getMembershipUrls, PLATFORM_RELAY, PLATFORM_LOGO} from "@app/state"
   import {pushModal} from "@app/modal"
-  import {deriveNotification, spacesNotification, CHAT_FILTERS} from "@app/notifications"
+  import {deriveNotification, inactiveSpacesNotifications, CHAT_FILTERS} from "@app/notifications"
 
   const chatNotification = deriveNotification("/chat", CHAT_FILTERS)
 
@@ -79,7 +79,10 @@
       <PrimaryNavItem title="Messages" href="/chat" notification={$chatNotification}>
         <Avatar icon="letter" class="!h-10 !w-10" />
       </PrimaryNavItem>
-      <PrimaryNavItem title="Spaces" on:click={showSpacesMenu} notification={$spacesNotification}>
+      <PrimaryNavItem
+        title="Spaces"
+        on:click={showSpacesMenu}
+        notification={$inactiveSpacesNotifications.length > 0}>
         <Avatar icon="settings-minimalistic" class="!h-10 !w-10" />
       </PrimaryNavItem>
     </div>

src/app/components/ProfileCircles.svelte

@@ -7,7 +7,7 @@
 <div class="flex pr-3">
   {#each pubkeys.slice(0, 15) as pubkey (pubkey)}
     <div class="z-feature -mr-3 inline-block">
-      <ProfileCircle class="h-8 w-8" {pubkey} {...$$props} />
+      <ProfileCircle class="h-8 w-8 bg-base-300" {pubkey} {...$$props} />
     </div>
   {/each}
 </div>

src/app/components/ReactionSummary.svelte

@@ -1,19 +1,26 @@
 <script lang="ts">
+  import {onMount} from "svelte"
   import {groupBy, uniqBy} from "@welshman/lib"
   import {REACTION} from "@welshman/util"
   import {deriveEvents} from "@welshman/store"
-  import {pubkey, repository} from "@welshman/app"
+  import {pubkey, repository, load} from "@welshman/app"
   import {displayReaction} from "@app/state"
 
   export let event
   export let onReactionClick
+  export let relays: string[] = []
 
-  const reactions = deriveEvents(repository, {filters: [{kinds: [REACTION], "#e": [event.id]}]})
+  const filters = [{kinds: [REACTION], "#e": [event.id]}]
+  const reactions = deriveEvents(repository, {filters})
 
   $: groupedReactions = groupBy(
     e => e.content,
     uniqBy(e => e.pubkey + e.content, $reactions),
   )
+
+  onMount(() => {
+    load({relays, filters})
+  })
 </script>
 
 {#if $reactions.length > 0}
@@ -27,7 +34,7 @@
         class:border={isOwn}
         class:border-solid={isOwn}
         class:border-primary={isOwn}
-        on:click|stopPropagation={onClick}>
+        on:click|preventDefault|stopPropagation={onClick}>
         <span>{displayReaction(content)}</span>
         {#if events.length > 1}
           <span>{events.length}</span>

src/app/components/ReplySummary.svelte

@@ -1,12 +1,19 @@
 <script lang="ts">
+  import {onMount} from "svelte"
   import {deriveEvents} from "@welshman/store"
-  import {repository} from "@welshman/app"
+  import {repository, load} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import {COMMENT} from "@app/state"
 
   export let event
+  export let relays: string[] = []
 
-  const replies = deriveEvents(repository, {filters: [{kinds: [COMMENT], "#E": [event.id]}]})
+  const filters = [{kinds: [COMMENT], "#E": [event.id]}]
+  const replies = deriveEvents(repository, {filters})
+
+  onMount(() => {
+    load({relays, filters})
+  })
 </script>
 
 {#if $replies.length > 0}

src/app/components/ThreadActions.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
+  import {onMount} from "svelte"
   import {type Instance} from "tippy.js"
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import {max} from "@welshman/lib"
   import {deriveEvents, deriveIsDeleted} from "@welshman/store"
   import type {TrustedEvent} from "@welshman/util"
-  import {thunks, pubkey, repository, formatTimestampRelative} from "@welshman/app"
+  import {thunks, load, pubkey, repository, formatTimestampRelative} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -25,8 +26,8 @@
   const deleted = deriveIsDeleted(repository, event)
   const path = makeSpacePath(url, "threads", event.id)
   const filters = [{kinds: [COMMENT], "#E": [event.id]}]
-  const notification = deriveNotification(path, filters, url)
   const replies = deriveEvents(repository, {filters})
+  const notification = deriveNotification(path, filters, url)
 
   const showPopover = () => popover.show()
 
@@ -48,10 +49,14 @@
   let popover: Instance
 
   $: lastActive = max([...$replies, event].map(e => e.created_at))
+
+  onMount(() => {
+    load({relays: [url], filters})
+  })
 </script>
 
 <div class="flex flex-wrap items-center justify-between gap-2">
-  <ReactionSummary {event} {onReactionClick} />
+  <ReactionSummary relays={[url]} {event} {onReactionClick} />
   <div class="flex flex-grow flex-wrap justify-end gap-2">
     {#if $deleted}
       <div class="btn btn-error btn-xs rounded-full">Deleted</div>

src/app/components/ThreadCreate.svelte

@@ -44,8 +44,8 @@
     const tags = [["title", title], tagRoom(GENERAL, url), ...getEditorTags($editor)]
 
     publishThunk({
-      event: createEvent(THREAD, {content, tags}),
       relays: [url],
+      event: createEvent(THREAD, {content, tags}),
     })
 
     history.back()

src/app/components/ThunkStatus.svelte

@@ -44,6 +44,7 @@
   {#if isFailure && failure}
     {@const [url, {message, status}] = failure}
     <Tippy
+      class={$$props.class}
       component={ThunkStatusDetail}
       props={{url, message, status, retry}}
       params={{interactive: true}}>
@@ -53,7 +54,7 @@
       </span>
     </Tippy>
   {:else if canCancel || isPending}
-    <span class="flex items-center gap-1">
+    <span class="flex items-center gap-1 {$$props.class}">
       <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
       <span class="opacity-50">Sending...</span>
       {#if canCancel}

src/app/notifications.ts

@@ -1,8 +1,9 @@
 import {writable, derived} from "svelte/store"
+import {page} from "$app/stores"
 import {deriveEvents} from "@welshman/store"
 import {repository, pubkey} from "@welshman/app"
 import {prop, max, sortBy, assoc, lt, now} from "@welshman/lib"
-import type {Filter} from "@welshman/util"
+import type {Filter, TrustedEvent} from "@welshman/util"
 import {DIRECT_MESSAGE} from "@welshman/util"
 import {makeSpacePath} from "@app/routes"
 import {
@@ -43,25 +44,31 @@ export const getRoomFilters = (room: string): Filter[] => ROOM_FILTERS.map(assoc
 
 // Notification derivation
 
+export const getNotification = (
+  pubkey: string | null,
+  lastChecked: number,
+  events: TrustedEvent[],
+) => {
+  const [latestEvent] = sortBy($e => -$e.created_at, events)
+
+  return latestEvent?.pubkey !== pubkey && lt(lastChecked, latestEvent?.created_at)
+}
+
 export const deriveNotification = (path: string, filters: Filter[], url?: string) => {
   const events = url ? deriveEventsForUrl(url, filters) : deriveEvents(repository, {filters})
 
   return derived(
     [pubkey, deriveChecked("*"), deriveChecked(path), events],
     ([$pubkey, $allChecked, $checked, $events]) => {
-      const [latestEvent] = sortBy($e => -$e.created_at, $events)
+      return getNotification($pubkey, max([$allChecked, $checked]), $events)
-
-      return (
-        latestEvent?.pubkey !== $pubkey && lt(max([$allChecked, $checked]), latestEvent?.created_at)
-      )
     },
   )
 }
 
-export const spacesNotification = derived(
+export const spacesNotifications = derived(
   [pubkey, checked, userMembership, deriveEvents(repository, {filters: SPACE_FILTERS})],
   ([$pubkey, $checked, $userMembership, $events]) => {
-    return getMembershipUrls($userMembership).some(url => {
+    return getMembershipUrls($userMembership).filter(url => {
       const path = makeSpacePath(url)
       const lastChecked = max([$checked["*"], $checked[path]])
       const [latestEvent] = sortBy($e => -$e.created_at, $events)
@@ -70,3 +77,9 @@ export const spacesNotification = derived(
     })
   },
 )
+
+export const inactiveSpacesNotifications = derived(
+  [page, spacesNotifications],
+  ([$page, $spacesNotifications]) =>
+    $spacesNotifications.filter(url => !$page.url.pathname.startsWith(makeSpacePath(url))),
+)

src/lib/components/Tippy.svelte

@@ -36,6 +36,6 @@
   })
 </script>
 
-<div bind:this={element}>
+<div bind:this={element} class={$$props.class}>
   <slot />
 </div>

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}
+    {#await discoverRelays($memberships)}
-      <Spinner loading>Loading more relays...</Spinner>
+      <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">
+      <MenuSpaceButton {url} />
-        <Icon icon="menu-dots" />
-      </Button>
     </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 {addRoomMembership, removeRoomMembership, subscribePersistent} from "@app/commands"
-  import {pushDrawer} from "@app/modal"
   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">
+      <MenuSpaceButton {url} />
-        <Icon icon="menu-dots" />
-      </Button>
     </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">
+      <MenuSpaceButton {url} />
-        <Icon icon="menu-dots" />
-      </Button>
     </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 {THREAD, COMMENT, decodeRelay, getEventsForUrl} from "@app/state"
-  import {pushModal, pushDrawer} from "@app/modal"
+  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) {
+            if (buffer.length < 50) {
-      scroller = createScroller({
+              ctrl.load(50)
-        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) {
+    const unsub = subscribePersistent({
-            ctrl.load(50)
+      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">
+      <MenuSpaceButton {url} />
-        <Icon icon="menu-dots" />
-      </Button>
     </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()
+    return () => {
-  })
+      unsub()
-
+      setChecked($page.url.pathname)
-  onDestroy(() => {
+    }
-    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">
+      <MenuSpaceButton {url} />
-        <Icon icon="menu-dots" />
-      </Button>
     </div>
   </PageBar>
 </div>