Improve relay access checks, content loading

src/routes/+layout.svelte

@@ -25,6 +25,8 @@
     storageAdapters,
     tracker,
   } from "@welshman/app"
+  import * as lib from "@welshman/lib"
+  import * as util from "@welshman/util"
   import * as app from "@welshman/app"
   import ModalBox from "@lib/components/ModalBox.svelte"
   import Drawer from "@lib/components/Drawer.svelte"
@@ -71,7 +73,7 @@
   }
 
   onMount(async () => {
-    Object.assign(window, {get, ...app, ...state})
+    Object.assign(window, {get, ...lib, ...util, ...app, ...state})
 
     const getScoreEvent = () => {
       const ALWAYS_KEEP = Infinity

src/routes/discover/+page.svelte

@@ -23,7 +23,7 @@
   onMount(() => {
     const sub = discoverRelays()
     const scroller = createScroller({
-      element: element.closest(".max-h-screen")!,
+      element: element.closest(".overflow-auto")!,
       onScroll: () => {
         limit += 20
       },
@@ -54,36 +54,37 @@
     idKey="url"
     let:item={relay}>
     <Button
-      class="card2 !py-20 center bg-alt flex flex-col gap-2 text-center shadow-xl transition-all hover:shadow-2xl hover:brightness-[1.1]"
+      class="card2 bg-alt text-left flex flex-col gap-2 shadow-xl transition-all hover:shadow-2xl hover:brightness-[1.1]"
       on:click={() => openSpace(relay.url)}>
-      <div class="center avatar">
-        <div
-          class="center relative !flex w-20 rounded-full border-2 border-solid border-base-300 bg-base-300">
-          {#if relay.profile?.icon}
-            <img alt="" src={relay.profile.icon} />
-          {:else}
-            <Icon icon="ghost" size={7} />
-          {/if}
-        </div>
-      </div>
-      {#if getMembershipUrls($userMembership).includes(relay.url)}
-        <div class="flex justify-center">
-          <div class="relative">
-            <div
-              class="tooltip absolute -top-[88px] left-5 h-5 w-5 rounded-full bg-primary"
-              data-tip="You are already a member of this space.">
-              <Icon icon="check-circle" class="scale-110" />
-            </div>
+      <div class="flex gap-4">
+        <div class="avatar">
+          <div class="center !flex h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
+            {#if relay.profile?.icon}
+              <img alt="" src={relay.profile.icon} />
+            {:else}
+              <Icon icon="ghost" size={5} />
+            {/if}
           </div>
         </div>
-      {/if}
-      <div>
-        <h2 class="text-center text-xl">
-          <RelayName url={relay.url} />
-        </h2>
-        <p class="text-sm opacity-75">{relay.url}</p>
+        {#if getMembershipUrls($userMembership).includes(relay.url)}
+          <div class="flex justify-center">
+            <div class="relative">
+              <div
+                class="tooltip absolute -top-[88px] left-5 h-5 w-5 rounded-full bg-primary"
+                data-tip="You are already a member of this space.">
+                <Icon icon="check-circle" class="scale-110" />
+              </div>
+            </div>
+          </div>
+        {/if}
+        <div>
+          <h2 class="text-xl">
+            <RelayName url={relay.url} />
+          </h2>
+          <p class="text-sm opacity-75">{relay.url}</p>
+        </div>
       </div>
-      <RelayDescription url={relay.url} />
+      <RelayDescription url={relay.url} class="ml-16" />
     </Button>
   </Masonry>
 </div>

src/routes/home/network/+page.svelte

@@ -56,7 +56,7 @@
     load({filters: [notesFilter, reactionsFilter], timeout: 30_000})
 
     const scroller = createScroller({
-      element: element.closest(".max-h-screen")!,
+      element: element.closest(".overflow-auto")!,
       onScroll: () => {
         const seen = new Set(events.map(e => e.id))
         const eligible = sortBy(

src/routes/home/people/+page.svelte

@@ -18,7 +18,7 @@
 
   onMount(() => {
     const scroller = createScroller({
-      element: element.closest(".max-h-screen")!,
+      element: element.closest(".overflow-auto")!,
       onScroll: () => {
         limit += 10
       },

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>