Re-work threads page, fix some iphone bugs

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

@@ -217,7 +217,7 @@
   })
 </script>
 
-<div class="saib relative flex h-full flex-col">
+<div class="relative flex h-full flex-col">
   <PageBar>
     {#snippet icon()}
       <div class="center">
@@ -287,7 +287,7 @@
       </div>
     </div>
   {/if}
-  <div class="saib">
+  <div>
     {#if parent}
       <ChannelComposeParent event={parent} clear={clearParent} verb="Replying to" />
     {/if}

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

@@ -126,7 +126,11 @@
       <strong>Calendar</strong>
     {/snippet}
     {#snippet action()}
-      <div class="md:hidden">
+      <div class="row-2">
+        <Button class="btn btn-primary btn-sm" onclick={createEvent}>
+          <Icon icon="calendar-add" />
+          Create an Event
+        </Button>
         <MenuSpaceButton {url} />
       </div>
     {/snippet}
@@ -157,12 +161,4 @@
       <p class="flex h-10 items-center justify-center py-20" transition:fly>That's all!</p>
     {/if}
   </div>
-  <Button
-    class="tooltip tooltip-left fixed bottom-16 right-2 z-feature p-1 md:bottom-4 md:right-4"
-    data-tip="Create an Event"
-    onclick={createEvent}>
-    <div class="btn btn-circle btn-primary flex h-12 w-12 items-center justify-center">
-      <Icon icon="calendar-add" />
-    </div>
-  </Button>
 </div>

src/routes/spaces/[relay]/calendar/[id]/+page.svelte

@@ -110,9 +110,9 @@
   <PageBar class="!mx-0">
     {#snippet icon()}
       <div>
-        <Button class="btn btn-neutral btn-sm" onclick={back}>
+        <Button class="btn btn-neutral btn-sm flex-nowrap whitespace-nowrap" onclick={back}>
           <Icon icon="alt-arrow-left" />
-          Go back
+          <span class="hidden sm:inline">Go back</span>
         </Button>
       </div>
     {/snippet}

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

@@ -1,13 +1,10 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {derived} from "svelte/store"
   import {page} from "$app/stores"
-  import {sortBy, min, nthEq} from "@welshman/lib"
-  import {THREAD, COMMENT, getListTags, getPubkeyTagValues} from "@welshman/util"
-  import {throttled} from "@welshman/store"
-  import {feedFromFilters, makeIntersectionFeed, makeRelayFeed} from "@welshman/feeds"
-  import {createFeedController, userMutes} from "@welshman/app"
-  import {createScroller, type Scroller} from "@lib/html"
+  import {sortBy, max, nthEq} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
+  import {THREAD, REACTION, DELETE, COMMENT, getListTags, getPubkeyTagValues} from "@welshman/util"
+  import {userMutes} from "@welshman/app"
   import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -16,69 +13,63 @@
   import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
   import ThreadItem from "@app/components/ThreadItem.svelte"
   import ThreadCreate from "@app/components/ThreadCreate.svelte"
-  import {decodeRelay, deriveEventsForUrl} from "@app/state"
+  import {decodeRelay, getEventsForUrl} from "@app/state"
   import {setChecked} from "@app/notifications"
+  import {makeFeed} from "@app/requests"
   import {pushModal} from "@app/modal"
 
   const url = decodeRelay($page.params.relay)
-  const threadFilter = {kinds: [THREAD]}
-  const commentFilter = {kinds: [COMMENT], "#K": [String(THREAD)]}
-  const feed = feedFromFilters([threadFilter, commentFilter])
-  const threads = deriveEventsForUrl(url, [threadFilter])
-  const comments = deriveEventsForUrl(url, [commentFilter])
   const mutedPubkeys = getPubkeyTagValues(getListTags($userMutes))
+  const threads: TrustedEvent[] = $state([])
+  const comments: TrustedEvent[] = $state([])
 
-  const events = throttled(
-    800,
-    derived([threads, comments], ([$threads, $comments]) => {
-      const scores = new Map<string, number>()
-
-      for (const comment of $comments) {
-        const id = comment.tags.find(nthEq(0, "E"))?.[1]
-
-        if (id) {
-          scores.set(id, min([scores.get(id), -comment.created_at]))
-        }
-      }
-
-      return sortBy(
-        e => min([scores.get(e.id), -e.created_at]),
-        $threads.filter(e => !mutedPubkeys.includes(e.pubkey)),
-      )
-    }),
-  )
+  let loading = $state(true)
+  let element: HTMLElement | undefined = $state()
 
   const createThread = () => pushModal(ThreadCreate, {url})
 
-  const ctrl = createFeedController({
-    useWindowing: true,
-    feed: makeIntersectionFeed(makeRelayFeed(url), feed),
-    onExhausted: () => {
-      loading = false
-    },
+  const events = $derived.by(() => {
+    const scores = new Map<string, number>()
+
+    for (const comment of comments) {
+      const id = comment.tags.find(nthEq(0, "E"))?.[1]
+
+      if (id) {
+        scores.set(id, max([scores.get(id), comment.created_at]))
+      }
+    }
+
+    return sortBy(e => -max([scores.get(e.id), e.created_at]), threads)
   })
 
-  let limit = 10
-  let loading = $state(true)
-  let element: Element | undefined = $state()
-  let scroller: Scroller
+  $inspect({threads, comments, events})
 
   onMount(() => {
-    scroller = createScroller({
+    const {cleanup} = makeFeed({
       element: element!,
-      delay: 300,
-      threshold: 3000,
-      onScroll: () => {
-        limit += 10
-
-        if ($events.length - limit < 10) {
-          ctrl.load(50)
+      relays: [url],
+      feedFilters: [{kinds: [THREAD, COMMENT]}],
+      subscriptionFilters: [
+        {kinds: [THREAD, REACTION, DELETE]},
+        {kinds: [COMMENT], "#K": [String(THREAD)]},
+      ],
+      initialEvents: getEventsForUrl(url, [{kinds: [THREAD, COMMENT], limit: 10}]),
+      onEvent: event => {
+        if (event.kind === THREAD && !mutedPubkeys.includes(event.pubkey)) {
+          threads.push(event)
         }
+
+        if (event.kind === COMMENT) {
+          comments.push(event)
+        }
+      },
+      onExhausted: () => {
+        loading = false
       },
     })
 
     return () => {
-      scroller?.stop()
+      cleanup()
       setChecked($page.url.pathname)
     }
   })
@@ -105,21 +96,21 @@
     {/snippet}
   </PageBar>
   <div class="flex flex-grow flex-col gap-2 overflow-auto p-2">
-    {#each $events as event (event.id)}
+    {#each events as event (event.id)}
       <div in:fly>
         <ThreadItem {url} {event} />
       </div>
     {/each}
-    {#if loading || $events.length === 0}
-      <p class="flex h-10 items-center justify-center py-20" out:fly>
-        <Spinner {loading}>
-          {#if loading}
-            Looking for threads...
-          {:else if $events.length === 0}
-            No threads found.
-          {/if}
-        </Spinner>
-      </p>
-    {/if}
+    <p class="flex h-10 items-center justify-center py-20">
+      <Spinner {loading}>
+        {#if loading}
+          Looking for threads...
+        {:else if events.length === 0}
+          No threads found.
+        {:else}
+          That's all!
+        {/if}
+      </Spinner>
+    </p>
   </div>
 </div>

src/routes/spaces/[relay]/threads/[id]/+page.svelte

@@ -93,9 +93,9 @@
   <PageBar class="!mx-0">
     {#snippet icon()}
       <div>
-        <Button class="btn btn-neutral btn-sm" onclick={back}>
+        <Button class="btn btn-neutral btn-sm flex-nowrap whitespace-nowrap" onclick={back}>
           <Icon icon="alt-arrow-left" />
-          Go back
+          <span class="hidden sm:inline">Go back</span>
         </Button>
       </div>
     {/snippet}