Re-work threads page, fix some iphone bugs

capacitor.config.ts

@@ -14,7 +14,7 @@ const config: CapacitorConfig = {
   },
   // Use this for live reload https://capacitorjs.com/docs/guides/live-reload
   // server: {
-  //   url: "http://192.168.1.251:1847",
+  //   url: "http://192.168.1.250:1847",
   //   cleartext: true
   // },
 };

package.json

@@ -51,15 +51,15 @@
     "@vite-pwa/assets-generator": "^0.2.6",
     "@vite-pwa/sveltekit": "^0.6.6",
     "@welshman/app": "~0.0.42",
-    "@welshman/content": "~0.0.17",
+    "@welshman/content": "~0.0.18",
     "@welshman/dvm": "~0.0.14",
-    "@welshman/editor": "~0.0.13",
+    "@welshman/editor": "~0.0.15",
     "@welshman/feeds": "~0.0.30",
-    "@welshman/lib": "~0.0.40",
+    "@welshman/lib": "~0.0.41",
     "@welshman/net": "~0.0.46",
     "@welshman/signer": "~0.0.20",
     "@welshman/store": "~0.0.16",
-    "@welshman/util": "~0.0.60",
+    "@welshman/util": "~0.0.61",
     "daisyui": "^4.12.10",
     "date-picker-svelte": "^2.13.0",
     "dotenv": "^16.4.5",

src/app/components/LogIn.svelte

@@ -16,6 +16,11 @@
   import {loadUserData} from "@app/commands"
   import {setChecked} from "@app/notifications"
 
+  let signers: any[] = $state([])
+  let loading: string | undefined = $state()
+
+  const disabled = $derived(loading ? true : undefined)
+
   const signUp = () => pushModal(SignUp)
 
   const onSuccess = async (session: Session, relays: string[] = []) => {
@@ -70,9 +75,6 @@
 
   const loginWithBunker = () => pushModal(LogInBunker)
 
-  let signers: any[] = $state([])
-  let loading: string | undefined = $state()
-
   const hasSigner = $derived(getNip07() || signers.length > 0)
 
   onMount(async () => {
@@ -90,7 +92,7 @@
     you to own your social identity.
   </p>
   {#if getNip07()}
-    <Button disabled={Boolean(loading)} onclick={loginWithNip07} class="btn btn-primary">
+    <Button {disabled} onclick={loginWithNip07} class="btn btn-primary">
       {#if loading === "nip07"}
         <span class="loading loading-spinner mr-3"></span>
       {:else}
@@ -100,7 +102,7 @@
     </Button>
   {/if}
   {#each signers as app}
-    <Button disabled={Boolean(loading)} class="btn btn-primary" onclick={() => loginWithNip55(app)}>
+    <Button {disabled} class="btn btn-primary" onclick={() => loginWithNip55(app)}>
       {#if loading === "nip55"}
         <span class="loading loading-spinner mr-3"></span>
       {:else}
@@ -110,7 +112,7 @@
     </Button>
   {/each}
   {#if BURROW_URL && !hasSigner}
-    <Button disabled={Boolean(loading)} onclick={loginWithPassword} class="btn btn-primary">
+    <Button {disabled} onclick={loginWithPassword} class="btn btn-primary">
       {#if loading === "password"}
         <span class="loading loading-spinner mr-3"></span>
       {:else}
@@ -121,13 +123,13 @@
   {/if}
   <Button
     onclick={loginWithBunker}
-    disabled={Boolean(loading)}
+    {disabled}
     class="btn {hasSigner || BURROW_URL ? 'btn-neutral' : 'btn-primary'}">
     <Icon icon="cpu" />
     Log in with Remote Signer
   </Button>
   {#if BURROW_URL && hasSigner}
-    <Button disabled={Boolean(loading)} onclick={loginWithPassword} class="btn">
+    <Button {disabled} onclick={loginWithPassword} class="btn">
       {#if loading === "password"}
         <span class="loading loading-spinner mr-3"></span>
       {:else}
@@ -139,7 +141,7 @@
   {#if !hasSigner || !BURROW_URL}
     <Link
       external
-      disabled={Boolean(loading)}
+      {disabled}
       href="https://nostrapps.com#signers"
       class="btn {hasSigner || BURROW_URL ? '' : 'btn-neutral'}">
       <Icon icon="compass" />

src/app/requests.ts

@@ -55,6 +55,7 @@ export const makeFeed = ({
   feedFilters,
   subscriptionFilters,
   element,
+  onEvent,
   onExhausted,
   initialEvents = [],
 }: {
@@ -62,12 +63,21 @@ export const makeFeed = ({
   feedFilters: Filter[]
   subscriptionFilters: Filter[]
   element: HTMLElement
+  onEvent?: (event: TrustedEvent) => void
   onExhausted?: () => void
   initialEvents?: TrustedEvent[]
 }) => {
+  const seen = new Set<string>()
   const buffer = writable<TrustedEvent[]>([])
   const events = writable(initialEvents)
 
+  for (const event of initialEvents) {
+    if (!seen.has(event.id)) {
+      seen.add(event.id)
+      onEvent?.(event)
+    }
+  }
+
   const insertEvent = (event: TrustedEvent) => {
     buffer.update($buffer => {
       for (let i = 0; i < $buffer.length; i++) {
@@ -77,6 +87,11 @@ export const makeFeed = ({
 
       return [...$buffer, event]
     })
+
+    if (!seen.has(event.id)) {
+      seen.add(event.id)
+      onEvent?.(event)
+    }
   }
 
   const removeEvents = (ids: string[]) => {

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}