Improve relay access checks, content loading

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

@@ -26,7 +26,9 @@
     GENERAL,
     MESSAGE,
   } from "@app/state"
+  import {checkRelayConnection, checkRelayAuth} from "@app/commands"
   import {pushModal} from "@app/modal"
+  import {pushToast} from "@app/toast"
   import {makeSpacePath} from "@app/routes"
 
   const openMenu = () => {
@@ -60,13 +62,12 @@
   $: rooms = getMembershipRoomsByUrl(url, $userMembership)
   $: otherRooms = ($roomsByUrl.get(url) || []).filter(room => !rooms.concat(GENERAL).includes(room))
 
-  onMount(() => {
-    const filter = {kinds: [NOTE, REACTION, MESSAGE, EVENT_DATE, EVENT_TIME, CLASSIFIED]}
-    const sub = subscribe({filters: [{...filter, since: ago(30)}]})
+  onMount(async () => {
+    const error = await checkRelayConnection(url) || await checkRelayAuth(url)
 
-    pullConservatively({filters: [filter], relays: [url]})
-
-    return () => sub.close()
+    if (error) {
+      pushToast({theme: "error", message: error})
+    }
   })
 </script>
 

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

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import {onMount} from 'svelte'
   import {page} from "$app/stores"
-  import {sortBy, last} from "@welshman/lib"
+  import {sortBy, last, ago} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
-  import {formatTimestampAsDate} from "@welshman/app"
+  import {EVENT_DATE, EVENT_TIME} from "@welshman/util"
+  import {repository, subscribe, formatTimestampAsDate, trackerStore} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -11,9 +13,11 @@
   import EventItem from "@app/components/EventItem.svelte"
   import EventCreate from "@app/components/EventCreate.svelte"
   import {pushModal} from "@app/modal"
-  import {eventsByUrl, decodeNRelay} from "@app/state"
+  import {deriveEventsForUrl, pullConservatively, decodeNRelay} from "@app/state"
 
   const url = decodeNRelay($page.params.nrelay)
+  const kinds = [EVENT_DATE, EVENT_TIME]
+  const events = deriveEventsForUrl(url, kinds)
 
   const createEvent = () => pushModal(EventCreate, {url})
 
@@ -27,7 +31,8 @@
     dateDisplay?: string
   }
 
-  $: items = sortBy(getStart, $eventsByUrl.get(url) || []).reduce<Item[]>((r, event) => {
+
+  $: items = sortBy(getStart, $events).reduce<Item[]>((r, event) => {
     const prevDateDisplay =
       r.length > 0 ? formatTimestampAsDate(getStart(last(r).event)) : undefined
     const newDateDisplay = formatTimestampAsDate(getStart(event))
@@ -36,6 +41,14 @@
     return [...r, {event, dateDisplay}]
   }, [])
 
+  onMount(() => {
+    const sub = subscribe({filters: [{kinds, since: ago(30)}]})
+
+    pullConservatively({filters: [{kinds}], relays: [url]})
+
+    return () => sub.close()
+  })
+
   setTimeout(() => {
     loading = false
   }, 3000)

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

@@ -2,8 +2,9 @@
   import {onMount} from "svelte"
   import {page} from "$app/stores"
   import {NOTE} from "@welshman/util"
-  import {nthEq, sortBy} from "@welshman/lib"
-  import {repository, trackerStore} from "@welshman/app"
+  import {feedFromFilter} from "@welshman/feeds"
+  import {ago, nthEq, sortBy} from "@welshman/lib"
+  import {repository, trackerStore, feedLoader} from "@welshman/app"
   import {createScroller} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -12,28 +13,27 @@
   import ThreadItem from "@app/components/ThreadItem.svelte"
   import ThreadCreate from "@app/components/ThreadCreate.svelte"
   import {pushModal} from "@app/modal"
-  import {decodeNRelay} from "@app/state"
+  import {pullConservatively, deriveEventsForUrl, decodeNRelay} from "@app/state"
 
   const url = decodeNRelay($page.params.nrelay)
+  const kinds = [NOTE]
+  const events = deriveEventsForUrl(url, kinds)
+  const loader = feedLoader.getLoader(feedFromFilter({kinds}), {})
 
   const createThread = () => pushModal(ThreadCreate, {url})
 
-  let limit = 10
+  let limit = 5
   let loading = true
   let element: Element
 
-  $: events = sortBy(
-    e => -e.created_at,
-    Array.from($trackerStore.getIds(url))
-      .map(id => repository.eventsById.get(id)!)
-      .filter(e => e?.kind === NOTE && !e.tags.some(nthEq(0, "e"))),
-  )
-
   onMount(() => {
     const scroller = createScroller({
-      element: element.closest(".max-h-screen")!,
+      element,
       onScroll: async () => {
-        limit += 10
+        const $loader = await loader
+
+        $loader(5)
+        limit += 5
       },
     })
 
@@ -45,22 +45,24 @@
   }, 3000)
 </script>
 
-<div class="relative flex h-screen flex-col" bind:this={element}>
+<div class="relative flex h-screen flex-col">
   <PageBar>
     <div slot="icon" class="center">
       <Icon icon="notes-minimalistic" />
     </div>
     <strong slot="title">Threads</strong>
   </PageBar>
-  <div class="flex flex-grow flex-col gap-2 overflow-auto p-2">
-    {#each events.slice(0, limit) as event (event.id)}
-      <ThreadItem {event} />
+  <div class="flex flex-grow flex-col gap-2 overflow-auto p-2" bind:this={element}>
+    {#each $events.slice(0, limit) as event (event.id)}
+      {#if !event.tags.some(nthEq(0, "e"))}
+        <ThreadItem {event} />
+      {/if}
     {/each}
     <p class="flex h-10 items-center justify-center py-20">
       <Spinner {loading}>
         {#if loading}
           Looking for threads...
-        {:else if events.length === 0}
+        {:else if $events.length === 0}
           No threads found.
         {/if}
       </Spinner>