Fix channel loading

src/app/components/ChannelMessage.svelte

@@ -83,9 +83,9 @@
       </p>
     </div>
   {/if}
-  <div class="flex w-full gap-2">
+  <div class="flex w-full gap-3">
     {#if showPubkey}
-      <Avatar src={$profile?.picture} class="border border-solid border-base-content" size={10} />
+      <Avatar src={$profile?.picture} class="border border-solid border-base-content" size={8} />
     {:else}
       <div class="w-10 min-w-10 max-w-10" />
     {/if}
@@ -100,7 +100,7 @@
       <div class="text-sm">
         <Content {event} />
         {#if thunk}
-          <div class="badge">
+          <div class="badge badge-neutral">
             <ThunkStatus {thunk} />
           </div>
         {/if}

src/app/components/ChatMessage.svelte

@@ -85,7 +85,7 @@
             <Avatar
               src={$profile?.picture}
               class="border border-solid border-base-content"
-              size={10} />
+              size={8} />
           </Button>
         {/if}
         <div class="-mt-1 flex-grow pr-1">

src/app/state.ts

@@ -163,18 +163,16 @@ export const pullConservatively = ({relays, filters}: AppSyncOpts) => {
   const [smart, dumb] = partition(hasNegentropy, relays)
   const promises = [pull({relays: smart, filters})]
 
-  // Since pulling from relays without negentropy is expensive, only do it 30% of the time,
-  // unless we have very few matching events. If that's the case, either we haven't synced
-  // this filter yet, or there are few enough events that we don't really need to worry about
-  // downloading duplicates. Otherwise, add a reasonable since value to make sure we at
-  // least fetch recent events.
-  if (Math.random() > 0.7 || repository.query(filters).length < 100) {
-    promises.push(pull({relays: dumb, filters}))
-  } else {
+  // Since pulling from relays without negentropy is expensive, limit how many
+  // duplicates we repeatedly download
+  if (dumb.length > 0) {
     const events = sortBy(e => -e.created_at, repository.query(filters))
-    const since = events[50]!.created_at
 
-    promises.push(pull({relays: dumb, filters: filters.map(assoc("since", since))}))
+    if (events.length > 100) {
+      filters = filters.map(assoc('since', events[100]!.created_at))
+    }
+
+    promises.push(pull({relays: dumb, filters}))
   }
 
   return Promise.all(promises)
@@ -326,11 +324,8 @@ export const {
   getKey: channel => channel.id,
   load: (id: string, request: Partial<SubscribeRequestWithHandlers> = {}) => {
     const [url, room] = splitChannelId(id)
-    const channel = get(channelsById).get(id)
-    const timestamps = channel?.messages.map(m => m.event.created_at) || []
-    const since = Math.max(0, max(timestamps) - 3600)
 
-    return load({...request, relays: [url], filters: [{"#~": [room], since}]})
+    return load({...request, relays: [url], filters: [{"#~": [room]}]})
   },
 })
 

src/routes/home/+layout.svelte

@@ -25,12 +25,10 @@
 
   onMount(() => {
     const filter = {kinds: [WRAP], "#p": [$pubkey!]}
-    const sub = subscribe({filters: [{...filter, since: ago(30)}]})
+    const relays = ctx.app.router.InboxRelays().getUrls()
+    const sub = subscribe({filters: [{...filter, since: ago(30)}], relays})
 
-    pullConservatively({
-      filters: [filter],
-      relays: ctx.app.router.InboxRelays().getUrls(),
-    })
+    pullConservatively({filters: [filter], relays})
 
     return () => sub.close()
   })
@@ -68,11 +66,13 @@
     <Icon icon="magnifer" />
     <input bind:value={term} class="grow" type="text" />
   </label>
-  <div class="overflow-auto">
-    {#each chats as { id, pubkeys, messages } (id)}
-      <ChatItem {id} {pubkeys} {messages} />
-    {/each}
-  </div>
+  {#key $page.params.chat}
+    <div class="overflow-auto">
+      {#each chats as { id, pubkeys, messages } (id)}
+        <ChatItem {id} {pubkeys} {messages} />
+      {/each}
+    </div>
+  {/key}
 </SecondaryNav>
 
 <Page>

src/routes/home/[chat]/+page.svelte

@@ -11,7 +11,7 @@
   import {onMount} from "svelte"
   import {page} from "$app/stores"
   import {derived} from "svelte/store"
-  import {sortBy, remove} from "@welshman/lib"
+  import {ctx, sortBy, now, remove} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {createEvent, DIRECT_MESSAGE} from "@welshman/util"
   import {
@@ -91,10 +91,8 @@
     elements.reverse()
   }
 
-  onMount(() => {
-    for (const pk of others) {
-      loadInboxRelaySelections(pk)
-    }
+  onMount(async () => {
+    await Promise.all(others.map(pk => loadInboxRelaySelections(pk)))
   })
 
   setTimeout(() => {

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

@@ -25,7 +25,6 @@
   import ChannelMessage from "@app/components/ChannelMessage.svelte"
   import ChannelCompose from "@app/components/ChannelCompose.svelte"
   import {
-    loadChannel,
     userMembership,
     decodeNRelay,
     makeChannelId,
@@ -39,8 +38,7 @@
 
   const {nrelay, room = GENERAL} = $page.params
   const url = decodeNRelay(nrelay)
-  const id = makeChannelId(url, room)
-  const channel = deriveChannel(id)
+  const channel = deriveChannel(makeChannelId(url, room))
   const thunks = writable({} as Record<string, Thunk>)
 
   const assertEvent = (e: any) => e as TrustedEvent
@@ -84,7 +82,6 @@
   }
 
   onMount(() => {
-    loadChannel(id)
     subscribe({filters: [{'#~': [room], since: now()}], relays: [url]})
   })