Clean up feeds and listeners

src/app/commands.ts

@@ -268,7 +268,7 @@ export const setInboxRelayPolicy = (url: string, enabled: boolean) => {
 export const checkRelayAccess = async (url: string, claim = "") => {
   const connection = ctx.net.pool.get(url)
 
-  await connection.auth.attempt()
+  await connection.auth.attempt(5000)
 
   const thunk = publishThunk({
     event: createEvent(AUTH_JOIN, {tags: [["claim", claim]]}),
@@ -309,9 +309,10 @@ export const checkRelayAuth = async (url: string) => {
   const connection = ctx.net.pool.get(url)
   const okStatuses = [AuthStatus.None, AuthStatus.Ok]
 
-  await connection.auth.attempt()
+  await connection.auth.attempt(5000)
 
   if (!okStatuses.includes(connection.auth.status)) {
+    console.log(connection.auth.status, connection)
     return `Failed to authenticate: "${connection.auth.message}"`
   }
 }

src/app/components/NoteItem.svelte

@@ -3,7 +3,7 @@
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import type {TrustedEvent} from "@welshman/util"
   import {REACTION} from "@welshman/util"
-  import {pubkey, load, formatTimestamp} 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"
@@ -40,8 +40,5 @@
         <Icon icon="smile-circle" size={4} />
       </EmojiButton>
     </ReactionSummary>
-    <p class="whitespace-nowrap text-sm opacity-75">
-      {formatTimestamp(event.created_at)}
-    </p>
   </div>
 </NoteCard>

src/app/components/ProfileFeed.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {sortBy, flatten} from "@welshman/lib"
-  import {deriveEvents} from "@welshman/store"
+  import {sortBy, uniqBy} from "@welshman/lib"
   import {feedFromFilter} from "@welshman/feeds"
   import {NOTE, getAncestorTags} from "@welshman/util"
-  import {repository, createFeedController} from "@welshman/app"
+  import type {TrustedEvent} from "@welshman/util"
+  import {createFeedController} from "@welshman/app"
   import {createScroller} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import NoteItem from "@app/components/NoteItem.svelte"
@@ -12,18 +12,36 @@
   export let url
   export let pubkey
 
-  const filter = {kinds: [NOTE], authors: [pubkey]}
-  const events = deriveEvents(repository, {filters: [filter]})
+  const ctrl = createFeedController({
+    useWindowing: true,
+    feed: feedFromFilter({kinds: [NOTE], authors: [pubkey]}),
+    onEvent: (event: TrustedEvent) => {
+      if (getAncestorTags(event.tags).replies.length === 0) {
+        buffer.push(event)
+      }
+    },
+  })
 
   let element: Element
+  let buffer: TrustedEvent[] = []
+  let events: TrustedEvent[] = []
 
   onMount(() => {
-    const ctrl = createFeedController({feed: feedFromFilter(filter)})
     const scroller = createScroller({
       element,
       delay: 300,
       threshold: 3000,
-      onScroll: () => ctrl.load(5),
+      onScroll: () => {
+        buffer = uniqBy(
+          e => e.id,
+          sortBy(e => -e.created_at, buffer),
+        )
+        events = [...events, ...buffer.splice(0, 5)]
+
+        if (buffer.length < 50) {
+          ctrl.load(50)
+        }
+      },
     })
 
     return () => scroller.stop()
@@ -32,10 +50,8 @@
 
 <div class="col-4" bind:this={element}>
   <div class="flex flex-col gap-2">
-    {#each sortBy(e => -e.created_at, $events) as event (event.id)}
-      {#if flatten(Object.values(getAncestorTags(event.tags))).length === 0}
-        <NoteItem {url} {event} />
-      {/if}
+    {#each events as event (event.id)}
+      <NoteItem {url} {event} />
     {/each}
     <p class="center my-12 flex">
       <Spinner loading />