Add topic modal

ROADMAP.md

@@ -1,10 +1,8 @@
 # Current
 
-- [ ] Refactor
-  - Move global modals to child components?
-  - Combine app/agent, rename app
-- [ ] Improve topic suggestions and rendering
-- [ ] Add topic search
+- [ ] Topics
+  - [ ] Improve topic suggestions and rendering
+  - [ ] Add topic search, keep cache of topics
 - [ ] Relays bounty
   - [ ] Ability to create custom feeds
   - [ ] Add global/following/network tabs to relay detail

src/app/Modal.svelte

@@ -14,6 +14,7 @@
   import PersonList from "src/app/shared/PersonList.svelte"
   import PersonProfileInfo from "src/app/views/PersonProfileInfo.svelte"
   import PersonShare from "src/app/views/PersonShare.svelte"
+  import TopicFeed from "src/app/views/TopicFeed.svelte"
   import AddRelay from "src/app/views/RelayAdd.svelte"
 
   const closeModal = async () => {
@@ -50,6 +51,10 @@
       <PersonList type="follows" pubkey={$modal.pubkey} />
     {:else if $modal.type === "person/followers"}
       <PersonList type="followers" pubkey={$modal.pubkey} />
+    {:else if $modal.type === "topic/feed"}
+      {#key $modal.topic}
+        <TopicFeed topic={$modal.topic} />
+      {/key}
     {:else if $modal.type === "message"}
       <Content size="lg">
         <div class="text-center">{$modal.message}</div>

src/app/shared/Feed.svelte

@@ -17,6 +17,7 @@
 
   export let filter
   export let relays = []
+  export let inModal = false
   export let delta = timedelta(6, "hours")
   export let shouldDisplay = always(true)
   export let parentsTimeout = 500
@@ -105,7 +106,8 @@
   }
 
   const loadMore = async () => {
-    if ($modal) {
+    console.log("here")
+    if ($modal && !inModal) {
       return
     }
 
@@ -127,7 +129,9 @@
       onChunk,
     })
 
-    const scroller = createScroller(loadMore)
+    const scroller = createScroller(loadMore, {
+      element: inModal ? document.querySelector(".modal-content") : null,
+    })
 
     return () => {
       scroller.stop()

src/app/shared/NoteContent.svelte

@@ -49,7 +49,7 @@
       const next = content[i + 1]
 
       if ((!prev || prev.type === "newline") && (!next || next.type === "newline")) {
-        let n = 0
+        let n = 1
         for (let j = i - 1; ; j--) {
           if (content[j]?.type === "newline") {
             n += 1
@@ -58,7 +58,7 @@
           }
         }
 
-        ranges.push({i, n})
+        ranges.push({i: i + 1, n})
       }
     }
   }
@@ -108,6 +108,10 @@
   const openQuote = id => {
     modal.set({type: "note/detail", note: {id}})
   }
+
+  const openTopic = topic => {
+    modal.set({type: "topic/feed", topic})
+  }
 </script>
 
 <div class="flex flex-col gap-2 overflow-hidden text-ellipsis">
@@ -117,6 +121,8 @@
         {#each value as _}
           <br />
         {/each}
+      {:else if type === "topic"}
+        <Anchor on:click={() => openTopic(value)}>{value}</Anchor>
       {:else if type === "link"}
         <Anchor external href={value}>
           {value.replace(/https?:\/\/(www\.)?/, "")}

src/app/views/TopicFeed.svelte

@@ -0,0 +1,15 @@
+<script>
+  import Feed from "src/app/shared/Feed.svelte"
+  import Content from "src/partials/Content.svelte"
+  import Heading from "src/partials/Heading.svelte"
+  import {sampleRelays, getUserReadRelays} from "src/agent/relays"
+
+  export let topic
+  const relays = sampleRelays(getUserReadRelays())
+  const filter = [{kinds: [1], "#t": [topic.replace("#", "")]}]
+</script>
+
+<Content>
+  <Heading class="text-center">{topic}</Heading>
+  <Feed inModal {relays} {filter} />
+</Content>

src/util/misc.ts

@@ -120,9 +120,11 @@ export const poll = (t, cb) => {
   }
 }
 
-export const createScroller = (loadMore, {reverse = false, element = document.body} = {}) => {
+export const createScroller = (loadMore, {reverse = false, element = null} = {}) => {
   const THRESHOLD = 2000
 
+  element = element || document.body
+
   // NOTE TO FUTURE SELF
   // If the scroller is saturating request channels on a slow relay, the
   // loadMore function is not properly awaiting all the work necessary.