Re-work loading/syncing

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} />
-          <p class="overflow-hidden text-ellipsis whitespace-nowrap">
-            <ProfileName pubkey={others[0]} />
-            and {others.length - 1}
-            {others.length > 2 ? "others" : "other"}
-            <Button on:click={showMembers} class="btn btn-link">Show all members</Button>
-          </p>
+          <div class="flex items-center gap-2">
+            <ProfileCircles pubkeys={others} size={5} />
+            <p class="overflow-hidden text-ellipsis whitespace-nowrap">
+              <ProfileName pubkey={others[0]} />
+              and
+              {#if others.length === 2}
+                <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, load} from "@welshman/app"
+  import {pubkey} 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}