Bump welshman, rework channel loading

package-lock.json

@@ -17,28 +17,17 @@
         "@poppanator/sveltekit-svg": "^4.2.1",
         "@sentry/browser": "^8.35.0",
         "@sveltejs/adapter-static": "^3.0.4",
-        "@tiptap/extension-code": "^2.6.6",
-        "@tiptap/extension-code-block": "^2.6.6",
-        "@tiptap/extension-document": "^2.6.6",
-        "@tiptap/extension-dropcursor": "^2.6.6",
-        "@tiptap/extension-gapcursor": "^2.6.6",
-        "@tiptap/extension-hard-break": "^2.6.6",
-        "@tiptap/extension-history": "^2.6.6",
-        "@tiptap/extension-paragraph": "^2.6.6",
-        "@tiptap/extension-placeholder": "^2.9.1",
-        "@tiptap/extension-text": "^2.6.6",
-        "@tiptap/suggestion": "^2.6.4",
         "@types/qrcode": "^1.5.5",
         "@vite-pwa/assets-generator": "^0.2.6",
         "@vite-pwa/sveltekit": "^0.6.6",
-        "@welshman/app": "~0.0.39",
+        "@welshman/app": "~0.0.40",
         "@welshman/content": "~0.0.15",
-        "@welshman/dvm": "~0.0.13",
+        "@welshman/dvm": "~0.0.14",
-        "@welshman/editor": "~0.0.7",
+        "@welshman/editor": "~0.0.8",
         "@welshman/feeds": "~0.0.30",
-        "@welshman/lib": "~0.0.37",
+        "@welshman/lib": "~0.0.38",
-        "@welshman/net": "~0.0.45",
+        "@welshman/net": "~0.0.46",
-        "@welshman/signer": "~0.0.19",
+        "@welshman/signer": "~0.0.20",
         "@welshman/store": "~0.0.15",
         "@welshman/util": "~0.0.59",
         "daisyui": "^4.12.10",
@@ -48,12 +37,10 @@
         "fuse.js": "^7.0.0",
         "husky": "^9.1.6",
         "idb": "^8.0.0",
-        "nostr-editor": "^0.0.3",
         "nostr-signer-capacitor-plugin": "^0.0.3",
         "nostr-tools": "^2.7.2",
         "prettier-plugin-tailwindcss": "^0.6.5",
-        "qrcode": "^1.5.4",
+        "qrcode": "^1.5.4"
-        "svelte-tiptap": "^1.1.3"
       },
       "devDependencies": {
         "@capacitor/assets": "^3.0.5",
@@ -3757,6 +3744,7 @@
       "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-2.11.3.tgz",
       "integrity": "sha512-w36Pb4DlB/cQZwsIpd5pSDwYuLBBSGh6dwGc9TVUdv+hdh8vIsnkGCjynapXgUrT2RFEJwObRYK+r5Gw84uGSA==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -3770,6 +3758,7 @@
       "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-2.11.3.tgz",
       "integrity": "sha512-7VsufXUJt1Aq0UjQ2gQg6+boYsHdCi3+OBabbSMcf5TUWBmPlZnHAsDaocw2c/ZnOeu8Gmg6yrtBxbwjaiIO6g==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -3784,6 +3773,7 @@
       "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-2.11.3.tgz",
       "integrity": "sha512-utY1JZgxRLt0/oFPPUH8OT8Ltu3nmdycM2EwkM85vil83MnM5kuEYHF1l1q2xhnJ52wdU3afx+e7dFgvMDuunA==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -3797,6 +3787,7 @@
       "resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-2.11.3.tgz",
       "integrity": "sha512-Ppw46/1Vt9PlTT6TMloL1KjO2W89QUjRRptk5OtDvAGoOahLWwLji2k7dHyPeeCsG1J2KpHIPxngs922uhOEMw==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -3829,6 +3820,7 @@
       "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-2.11.3.tgz",
       "integrity": "sha512-QNVoMNvsinnpvIBAADCbPXMAxY6nv38dxLY3mmPBF0j51H1ggGRX2MdD8VsSBM+AP5az9vTa1+rO+0wBfDwDWw==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -3843,6 +3835,7 @@
       "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-2.11.3.tgz",
       "integrity": "sha512-Jsz1qV/h4GFZiBtcrJ2yAF1Euw25IXgx5m4EBr/33TV6gT5+zRUr4e0y6h3jHicyInviZeXd9HXELCcQCEtHRg==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -3856,6 +3849,7 @@
       "resolved": "https://registry.npmjs.org/@tiptap/extension-history/-/extension-history-2.11.3.tgz",
       "integrity": "sha512-dxJeuGuLEn9V4iGfsvMOBcTwufcw971NoBdsyW1TOzYvucDkYHgIlOVE4DEWIVuOkfIjKEiCGl8IdZLaHWU8Sg==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -3902,6 +3896,7 @@
       "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-2.11.3.tgz",
       "integrity": "sha512-snH9aIRJGpHCLm0zzuBwhXpRYMyZvyNBlF5MulJKxkwremFhD9fVP26UtQEneL/CnwpNs3q1QOQGTRlqFP2hbg==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -3915,6 +3910,7 @@
       "resolved": "https://registry.npmjs.org/@tiptap/extension-placeholder/-/extension-placeholder-2.11.3.tgz",
       "integrity": "sha512-wXNcqsxkc+85NPrNpA/iuLa86RL2oOiOGWheJoIjtW2m9BEJSDsyHdUa9Nxwm28+PgonzG1uUfEv4JEzT5m4xg==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -3929,6 +3925,7 @@
       "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.11.3.tgz",
       "integrity": "sha512-DhrwR9tmDU2U4yjqdaX6odrnOYaE/Ai2ERs2bU4Sgm0ZF5QCyO31Cflg1OQ4erTi0IiqD5ilDPRXqFuu6FGzOQ==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -3973,6 +3970,7 @@
       "resolved": "https://registry.npmjs.org/@tiptap/suggestion/-/suggestion-2.11.3.tgz",
       "integrity": "sha512-w3zTPAYGbUxrgA1kUjhCZ4H6Js5RhbAjHqvNV9zJzREC8A/aiAYfQXCwhA5pYwRNedmQx6l4AVwtHxiCHfwtwA==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -4490,16 +4488,16 @@
       }
     },
     "node_modules/@welshman/app": {
-      "version": "0.0.39",
+      "version": "0.0.40",
-      "resolved": "https://registry.npmjs.org/@welshman/app/-/app-0.0.39.tgz",
+      "resolved": "https://registry.npmjs.org/@welshman/app/-/app-0.0.40.tgz",
-      "integrity": "sha512-lEEG8Tp2TZLN1VfqR9JRJj2TtT16zozqaJBTMt6thggxVYxxFEGtLAyYA5s73kDqhvsTC/TlGoxt6a6OV5CLHw==",
+      "integrity": "sha512-WnoNI++tZZkotrQ0uhBrHkcgn3CO7AyvuQjzZ3n62Av9bzvKbPTn/gMbUsT/tgtwnN8K7SACld8JOrUqF7d7GA==",
       "license": "MIT",
       "dependencies": {
         "@types/throttle-debounce": "^5.0.2",
         "@welshman/dvm": "~0.0.13",
         "@welshman/feeds": "~0.0.30",
         "@welshman/lib": "~0.0.37",
-        "@welshman/net": "~0.0.45",
+        "@welshman/net": "~0.0.46",
         "@welshman/signer": "~0.0.19",
         "@welshman/store": "~0.0.15",
         "@welshman/util": "~0.0.58",
@@ -4524,22 +4522,22 @@
       }
     },
     "node_modules/@welshman/dvm": {
-      "version": "0.0.13",
+      "version": "0.0.14",
-      "resolved": "https://registry.npmjs.org/@welshman/dvm/-/dvm-0.0.13.tgz",
+      "resolved": "https://registry.npmjs.org/@welshman/dvm/-/dvm-0.0.14.tgz",
-      "integrity": "sha512-C8y4s7wDJTJ6DVuzQoRLAhMpFD+kBoRHlc7kCTmjzh62VOmDSY+46xKttK/WaEnypPiPbIbBg3hd3+tO2A9KoQ==",
+      "integrity": "sha512-C7nJ3Z3QQv5ZRVxH57rqM/z7m9ljDAaAPCjhZdnO/MXzkGdy6AfczSiXK8IXTe9q4dYyEJ7kADo7UVfwES/t5Q==",
       "license": "MIT",
       "dependencies": {
         "@noble/hashes": "^1.6.1",
-        "@welshman/lib": "~0.0.34",
+        "@welshman/lib": "~0.0.37",
-        "@welshman/net": "~0.0.43",
+        "@welshman/net": "~0.0.46",
-        "@welshman/util": "~0.0.52",
+        "@welshman/util": "~0.0.58",
         "nostr-tools": "^2.7.2"
       }
     },
     "node_modules/@welshman/editor": {
-      "version": "0.0.7",
+      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/@welshman/editor/-/editor-0.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/@welshman/editor/-/editor-0.0.8.tgz",
-      "integrity": "sha512-dnhntOisr+mSTGH9DXFcH4gvKvs5XyAghucm2WwunlISNHgbFnUcAyUyrCnw5Fzuq5k8k8Fawf4K9bcfKAxDXw==",
+      "integrity": "sha512-9zQy1MjbGhTARTPH3QEgyhEGNKy239VSD5Jo4llsiUUhHQVNQj1KpdSVQnTLOwUBbfSLeYPIfMRUm2Gq5Cn/Ew==",
       "peerDependencies": {
         "@tiptap/core": "^2.9.1",
         "@tiptap/extension-code": "^2.9.1",
@@ -4556,7 +4554,7 @@
         "@tiptap/suggestion": "^2.9.1",
         "@welshman/lib": "~0.0.36",
         "@welshman/util": "~0.0.53",
-        "nostr-editor": "github:cesardeazevedo/nostr-editor#a211491c",
+        "nostr-editor": "^0.0.4-pre.6",
         "nostr-tools": "^2.8.1",
         "svelte": "^4.0.0",
         "svelte-tiptap": "^1.0.0"
@@ -4584,28 +4582,28 @@
       }
     },
     "node_modules/@welshman/net": {
-      "version": "0.0.45",
+      "version": "0.0.46",
-      "resolved": "https://registry.npmjs.org/@welshman/net/-/net-0.0.45.tgz",
+      "resolved": "https://registry.npmjs.org/@welshman/net/-/net-0.0.46.tgz",
-      "integrity": "sha512-sXYmfGdqvrj1ssr5xaSUxmJAFo+ScJtodBpzgya0CTLYorKRGoeQRJsyPWdh5VBVtoldPclzGhfvZ11d8d8Lyw==",
+      "integrity": "sha512-ehH4grz0VHjuofyVUE3r5GoynHTh+cIT/XFH6ov6nOGRU/LZXCLGk/9CUPlqNYHRfc/zBtaIyfVu0AelLqV6lw==",
       "license": "MIT",
       "dependencies": {
         "@welshman/lib": "~0.0.37",
-        "@welshman/util": "~0.0.54",
+        "@welshman/util": "~0.0.58",
         "isomorphic-ws": "^5.0.0",
         "ws": "^8.16.0"
       }
     },
     "node_modules/@welshman/signer": {
-      "version": "0.0.19",
+      "version": "0.0.20",
-      "resolved": "https://registry.npmjs.org/@welshman/signer/-/signer-0.0.19.tgz",
+      "resolved": "https://registry.npmjs.org/@welshman/signer/-/signer-0.0.20.tgz",
-      "integrity": "sha512-+pKkm5HeaSJB6ET456w0zVnbVAjRzYuDagYUns1BQ6Co22nUSp2CntWFFckwbH2eQ9bjdlC65LjRfIP9qhNSrg==",
+      "integrity": "sha512-t7ulAMtx+b1NedTzs91D/2WTdM0OzTQHsv15qtXQoIyqrdhJ7QQsMHkDdFUkyPK8CBxAWO8kVorbDM8DbVyeCQ==",
       "license": "MIT",
       "dependencies": {
         "@noble/curves": "^1.7.0",
         "@noble/hashes": "^1.6.1",
         "@welshman/lib": "~0.0.37",
-        "@welshman/net": "~0.0.45",
+        "@welshman/net": "~0.0.46",
-        "@welshman/util": "~0.0.54",
+        "@welshman/util": "~0.0.58",
         "nostr-tools": "^2.7.2"
       },
       "engines": {
@@ -9070,6 +9068,7 @@
       "resolved": "https://registry.npmjs.org/light-bolt11-decoder/-/light-bolt11-decoder-3.2.0.tgz",
       "integrity": "sha512-3QEofgiBOP4Ehs9BI+RkZdXZNtSys0nsJ6fyGeSiAGCBsMwHGUDS/JQlY/sTnWs91A2Nh0S9XXfA8Sy9g6QpuQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@scure/base": "1.1.1"
       }
@@ -9084,7 +9083,8 @@
           "url": "https://paulmillr.com/funding/"
         }
       ],
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lilconfig": {
       "version": "2.1.0",
@@ -9880,9 +9880,11 @@
       }
     },
     "node_modules/nostr-editor": {
-      "version": "0.0.3",
+      "version": "0.0.4-pre.6",
-      "resolved": "git+ssh://git@github.com/cesardeazevedo/nostr-editor.git#a211491c7cfeb792ae58ba91d295fe747c151ded",
+      "resolved": "https://registry.npmjs.org/nostr-editor/-/nostr-editor-0.0.4-pre.6.tgz",
+      "integrity": "sha512-njOWThC8tfvyw59rcCeJjwTycZ0QdwBYURpMJAzPVoWFjxZmzmTeBNNznf00g3U7jwXde0VuI9OElzAaTdkz8w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "light-bolt11-decoder": "^3.1.1"
       },
@@ -13248,6 +13250,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@tiptap/core": "^2.0.3",
         "@tiptap/extension-bubble-menu": "^2.0.3",

package.json

@@ -49,28 +49,17 @@
     "@poppanator/sveltekit-svg": "^4.2.1",
     "@sentry/browser": "^8.35.0",
     "@sveltejs/adapter-static": "^3.0.4",
-    "@tiptap/extension-code": "^2.6.6",
-    "@tiptap/extension-code-block": "^2.6.6",
-    "@tiptap/extension-document": "^2.6.6",
-    "@tiptap/extension-dropcursor": "^2.6.6",
-    "@tiptap/extension-gapcursor": "^2.6.6",
-    "@tiptap/extension-hard-break": "^2.6.6",
-    "@tiptap/extension-history": "^2.6.6",
-    "@tiptap/extension-paragraph": "^2.6.6",
-    "@tiptap/extension-placeholder": "^2.9.1",
-    "@tiptap/extension-text": "^2.6.6",
-    "@tiptap/suggestion": "^2.6.4",
     "@types/qrcode": "^1.5.5",
     "@vite-pwa/assets-generator": "^0.2.6",
     "@vite-pwa/sveltekit": "^0.6.6",
-    "@welshman/app": "~0.0.39",
+    "@welshman/app": "~0.0.40",
     "@welshman/content": "~0.0.15",
-    "@welshman/dvm": "~0.0.13",
+    "@welshman/dvm": "~0.0.14",
-    "@welshman/editor": "~0.0.7",
+    "@welshman/editor": "~0.0.8",
     "@welshman/feeds": "~0.0.30",
-    "@welshman/lib": "~0.0.37",
+    "@welshman/lib": "~0.0.38",
-    "@welshman/net": "~0.0.45",
+    "@welshman/net": "~0.0.46",
-    "@welshman/signer": "~0.0.19",
+    "@welshman/signer": "~0.0.20",
     "@welshman/store": "~0.0.15",
     "@welshman/util": "~0.0.59",
     "daisyui": "^4.12.10",
@@ -80,11 +69,9 @@
     "fuse.js": "^7.0.0",
     "husky": "^9.1.6",
     "idb": "^8.0.0",
-    "nostr-editor": "^0.0.3",
     "nostr-signer-capacitor-plugin": "^0.0.3",
     "nostr-tools": "^2.7.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
-    "qrcode": "^1.5.4",
+    "qrcode": "^1.5.4"
-    "svelte-tiptap": "^1.1.3"
   }
 }

src/app/components/Chat.svelte

@@ -58,9 +58,9 @@
 
   const replyTo = (event: TrustedEvent) => {
     const relays = ctx.app.router.Event(event).getUrls()
-    const nevent = nip19.neventEncode({...event, relays})
+    const bech32 = nip19.neventEncode({...event, relays})
 
-    $editor.commands.insertNEvent({nevent})
+    $editor.commands.insertNEvent({bech32})
     $editor.commands.insertContent("\n")
     $editor.commands.focus()
   }

src/app/components/LogInBunker.svelte

@@ -26,7 +26,7 @@
   const back = () => history.back()
 
   const onSubmit = async () => {
-    const {signerPubkey, connectSecret, relays} = broker.parseBunkerUrl(input)
+    const {signerPubkey, connectSecret, relays} = Nip46Broker.parseBunkerUrl(input)
 
     if (loading) {
       return

src/app/requests.ts

@@ -1,9 +1,12 @@
-import {get} from "svelte/store"
+import {get, writable} from "svelte/store"
-import {partition, assoc, now} from "@welshman/lib"
+import {partition, insert, sortBy, assoc, now} from "@welshman/lib"
-import {MESSAGE, THREAD, COMMENT} from "@welshman/util"
+import {MESSAGE, DELETE, THREAD, COMMENT, matchFilters, getTagValues} from "@welshman/util"
+import type {TrustedEvent, Filter} from "@welshman/util"
+import {feedFromFilters, makeRelayFeed, makeIntersectionFeed} from "@welshman/feeds"
 import type {Subscription} from "@welshman/net"
 import type {AppSyncOpts} from "@welshman/app"
-import {subscribe, load, repository, pull, hasNegentropy} from "@welshman/app"
+import {subscribe, load, repository, pull, hasNegentropy, createFeedController} from "@welshman/app"
+import {createScroller} from "@lib/html"
 import {userRoomsByUrl, getUrlsForEvent} from "@app/state"
 
 // Utils
@@ -29,6 +32,82 @@ export const pullConservatively = ({relays, filters}: AppSyncOpts) => {
   return Promise.all(promises)
 }
 
+export const makeFeed = ({
+  relays,
+  feedFilters,
+  subscriptionFilters,
+  element,
+  onExhausted,
+  initialEvents = [],
+}: {
+  relays: string[]
+  feedFilters: Filter[]
+  subscriptionFilters: Filter[]
+  element: HTMLElement
+  onExhausted?: () => void
+  initialEvents?: TrustedEvent[]
+}) => {
+  const buffer = writable<TrustedEvent[]>([])
+  const events = writable(initialEvents)
+
+  const onEvent = (event: TrustedEvent) => {
+    buffer.update($buffer => {
+      for (let i = 0; i < $buffer.length; i++) {
+        if ($buffer[i].id === event.id) return $buffer
+        if ($buffer[i].created_at < event.created_at) return insert(i, event, $buffer)
+      }
+
+      return [...$buffer, event]
+    })
+  }
+
+  const deleteEvent = (e: TrustedEvent) => {
+    const ids = getTagValues(["e", "a"], e.tags)
+
+    buffer.update($buffer => $buffer.filter(e => !ids.includes(e.id)))
+    events.update($events => $events.filter(e => !ids.includes(e.id)))
+  }
+
+  const ctrl = createFeedController({
+    useWindowing: true,
+    feed: makeIntersectionFeed(makeRelayFeed(...relays), feedFromFilters(feedFilters)),
+    onEvent,
+    onExhausted,
+  })
+
+  const sub = subscribe({
+    relays,
+    filters: subscriptionFilters,
+    onEvent: (e: TrustedEvent) => {
+      if (matchFilters(feedFilters, e)) onEvent(e)
+      if (e.kind === DELETE) deleteEvent(e)
+    },
+  })
+
+  const scroller = createScroller({
+    element,
+    delay: 300,
+    threshold: 10_000,
+    onScroll: async () => {
+      const $buffer = get(buffer)
+
+      events.update($events => sortBy(e => -e.created_at, [...$events, ...$buffer.splice(0, 100)]))
+
+      if ($buffer.length < 100) {
+        ctrl.load(100)
+      }
+    },
+  })
+
+  return {
+    events,
+    cleanup: () => {
+      scroller.stop()
+      sub.close()
+    },
+  }
+}
+
 // Application requests
 
 export const listenForNotifications = () => {

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

@@ -1,22 +1,20 @@
 <script lang="ts">
-  import {nip19} from "nostr-tools"
+  import * as nip19 from "nostr-tools/nip19"
   import {onMount} from "svelte"
-  import {derived} from "svelte/store"
   import {page} from "$app/stores"
-  import {sleep, ago, MONTH, ctx} from "@welshman/lib"
+  import type {Readable} from "svelte/store"
+  import {now, ctx} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
-  import {throttled} from "@welshman/store"
+  import {createEvent, toNostrURI, MESSAGE, DELETE, REACTION} from "@welshman/util"
-  import {feedsFromFilter, makeIntersectionFeed, makeRelayFeed} from "@welshman/feeds"
-  import {createEvent, MESSAGE, DELETE, REACTION} from "@welshman/util"
   import {
+    displayProfileByPubkey,
     formatTimestampAsDate,
-    createFeedController,
+    tagEventForQuote,
-    subscribe,
     publishThunk,
     deriveRelay,
+    repository,
   } from "@welshman/app"
-  import {slide} from "@lib/transition"
+  import {slide, fade} from "@lib/transition"
-  import {createScroller, type Scroller} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -24,39 +22,31 @@
   import Divider from "@lib/components/Divider.svelte"
   import type {getEditor} from "@app/editor"
   import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
+  import Content from "@app/components/Content.svelte"
   import ChannelName from "@app/components/ChannelName.svelte"
   import ChannelMessage from "@app/components/ChannelMessage.svelte"
   import ChannelCompose from "@app/components/ChannelCompose.svelte"
   import {
     userSettingValues,
     decodeRelay,
-    deriveEventsForUrl,
     GENERAL,
     tagRoom,
     userRoomsByUrl,
     displayChannel,
+    getEventsForUrl,
   } from "@app/state"
   import {setChecked} from "@app/notifications"
   import {nip29, addRoomMembership, removeRoomMembership, getThunkError} from "@app/commands"
   import {PROTECTED, hasNip29} from "@app/state"
+  import {makeFeed} from "@app/requests"
   import {popKey} from "@app/implicit"
   import {pushToast} from "@app/toast"
 
   const {room = GENERAL} = $page.params
   const content = popKey<string>("content") || ""
   const url = decodeRelay($page.params.relay)
+  const filter = {kinds: [MESSAGE], "#h": [room]}
   const relay = deriveRelay(url)
-  const feeds = feedsFromFilter({kinds: [MESSAGE], "#h": [room]})
-
-  const events = throttled(300, deriveEventsForUrl(url, [{kinds: [MESSAGE], "#h": [room]}]))
-
-  const ctrl = createFeedController({
-    useWindowing: true,
-    feed: makeIntersectionFeed(makeRelayFeed(url), ...feeds),
-    onExhausted: () => {
-      loading = false
-    },
-  })
 
   const assertEvent = (e: any) => e as TrustedEvent
 
@@ -81,85 +71,107 @@
   }
 
   const replyTo = (event: TrustedEvent) => {
-    const relays = ctx.app.router.Event(event).getUrls()
+    parent = event
-    const nevent = nip19.neventEncode({...event, relays})
-
-    $editor.commands.insertNEvent({nevent})
-    $editor.commands.insertContent("\n")
-    $editor.commands.focus()
   }
 
-  const onSubmit = ({content, tags}: EventContent) =>
+  const clearParent = () => {
+    parent = undefined
+  }
+
+  const onSubmit = ({content, tags}: EventContent) => {
+    tags.push(tagRoom(room, url))
+    tags.push(PROTECTED)
+
+    if (parent) {
+      const nevent = nip19.neventEncode({
+        id: parent.id,
+        kind: parent.kind,
+        author: parent.pubkey,
+        relays: ctx.app.router.Event(parent).limit(3).getUrls(),
+      })
+
+      tags.push(tagEventForQuote(parent))
+      content = toNostrURI(nevent) + "\n\n" + content
+    }
+
     publishThunk({
       relays: [url],
-      event: createEvent(MESSAGE, {content, tags: [...tags, tagRoom(room, url), PROTECTED]}),
+      event: createEvent(MESSAGE, {content, tags}),
       delay: $userSettingValues.send_delay,
     })
+  }
 
-  let limit = 100
+  const scrollToBottom = () => element.scrollTo({top: 0, behavior: "smooth"})
+
+  let parent: TrustedEvent | undefined
   let loading = true
-  let unmounted = false
   let element: HTMLElement
-  let scroller: Scroller
+  let showScrollButton = false
   let editor: ReturnType<typeof getEditor>
+  let cleanup: () => void
+  let events: Readable<TrustedEvent[]>
+  let elements: any[] = []
 
-  const elements = derived(events, $events => {
+  $: {
-    const $elements = []
+    elements = []
+
+    const seen = new Set()
 
     let previousDate
     let previousPubkey
 
-    for (const event of $events.toReversed()) {
+    if (events) {
-      const {id, pubkey, created_at} = event
+      for (const event of $events.toReversed()) {
-      const date = formatTimestampAsDate(created_at)
+        const {id, pubkey, created_at} = event
 
-      if (date !== previousDate) {
+        if (seen.has(id)) {
-        $elements.push({type: "date", value: date, id: date, showPubkey: false})
+          continue
+        }
+
+        const date = formatTimestampAsDate(created_at)
+
+        if (date !== previousDate) {
+          elements.push({type: "date", value: date, id: date, showPubkey: false})
+        }
+
+        elements.push({
+          id,
+          type: "note",
+          value: event,
+          showPubkey: date !== previousDate || previousPubkey !== pubkey,
+        })
+
+        previousDate = date
+        previousPubkey = pubkey
+        seen.add(id)
       }
-
-      $elements.push({
-        id,
-        type: "note",
-        value: event,
-        showPubkey: date !== previousDate || previousPubkey !== pubkey,
-      })
-
-      previousDate = date
-      previousPubkey = pubkey
     }
 
-    return $elements.reverse()
+    elements.reverse()
-  })
+  }
+
+  $: {
+    if (element) {
+      element.addEventListener("scroll", () => {
+        showScrollButton = Math.abs(element.scrollTop) > 1500
+      })
+      ;({events, cleanup} = makeFeed({
+        element,
+        relays: [url],
+        feedFilters: [filter],
+        subscriptionFilters: [{kinds: [DELETE, REACTION, MESSAGE], "#h": [room], since: now()}],
+        initialEvents: getEventsForUrl(repository, url, [{...filter, limit: 20}]),
+        onExhausted: () => {
+          loading = false
+        },
+      }))
+    }
+  }
 
   onMount(() => {
-    // Element is frequently not defined. I don't know why
-    sleep(1000).then(() => {
-      if (!unmounted) {
-        scroller = createScroller({
-          element,
-          delay: 300,
-          threshold: 10_000,
-          onScroll: () => {
-            limit += 100
-
-            if ($events.length - limit < 100) {
-              ctrl.load(200)
-            }
-          },
-        })
-      }
-    })
-
-    const sub = subscribe({
-      relays: [url],
-      filters: [{kinds: [DELETE, REACTION, MESSAGE], "#h": [room], since: ago(MONTH)}],
-    })
-
     return () => {
-      unmounted = true
       setChecked($page.url.pathname)
-      scroller?.stop()
+      cleanup()
-      sub.close()
     }
   })
 </script>
@@ -192,11 +204,11 @@
   <div
     class="scroll-container -mt-2 flex flex-grow flex-col-reverse overflow-y-auto overflow-x-hidden py-2"
     bind:this={element}>
-    {#each $elements.slice(0, limit) as { type, id, value, showPubkey } (id)}
+    {#each elements as { type, id, value, showPubkey } (id)}
       {#if type === "date"}
         <Divider>{value}</Divider>
       {:else}
-        <div in:slide class:-mt-4={!showPubkey}>
+        <div in:slide class:-mt-1={!showPubkey}>
           <ChannelMessage {url} {room} {replyTo} event={assertEvent(value)} {showPubkey} />
         </div>
       {/if}
@@ -209,5 +221,26 @@
       {/if}
     </p>
   </div>
-  <ChannelCompose bind:editor {content} {onSubmit} />
+  <div>
+    {#if parent}
+      <div
+        class="relative border-l-2 border-solid border-primary bg-base-300 px-2 py-1 text-xs"
+        transition:slide>
+        <p class="text-primary">Replying to @{displayProfileByPubkey(parent.pubkey)}</p>
+        <Content event={parent} minLength={30} maxLength={200} />
+        <Button class="absolute right-2 top-2 cursor-pointer" on:click={clearParent}>
+          <Icon icon="close-circle" />
+        </Button>
+      </div>
+    {/if}
+    <ChannelCompose bind:editor {content} {onSubmit} />
+  </div>
 </div>
+
+{#if showScrollButton}
+  <div in:fade class="fixed bottom-14 right-4">
+    <Button class="btn btn-circle btn-neutral" on:click={scrollToBottom}>
+      <Icon icon="alt-arrow-down" />
+    </Button>
+  </div>
+{/if}