Fix followers list

CHANGELOG.md

@@ -6,6 +6,7 @@
 - [x] Avoid pruning profiles we know we'll use more often
 - [x] Re-write pool to remove dependency on nostr-tools.relay
 - [x] Add support for AUTH
+- [x] Use COUNT for counting follows
 
 ## 0.2.18
 

ROADMAP.md

@@ -1,11 +1,13 @@
 # Current
 
-- [ ] Merge COUNT
-- [ ] Multiplex, charge past a certain usage level based on bandwidth
+- [ ] Fix follows list modal
 - [ ] Fix compose, topics
-- [ ] Fix onboarding workflow w/forced relays
-- [ ] https://github.com/staab/coracle/issues/42
+- [ ] Fix onboarding workflow w/forced relays (skip relays step)
+
 - [ ] Fix iOS/safari/firefox
+- [ ] https://github.com/staab/coracle/issues/42
+- [ ] Multiplex, charge past a certain usage level based on bandwidth
+- [ ] Move blog to https://twitter.com/fiatjaf/status/1638514052014940162
 
 # Others
 
@@ -20,6 +22,7 @@
 
 # Custom views
 
+- [ ] Link/embed good chat/DM micro-apps
 - [ ] Add QR code that pre-fills follows and relays for a new user
   - If logged in, open a detail page that shows the relays and people
   - If not logged in, pre-populate follows/relays in onboarding flow

src/App.svelte

@@ -280,8 +280,10 @@
           <PersonProfileInfo person={$modal.person} />
         {:else if $modal.type === "person/share"}
           <PersonShare person={$modal.person} />
-        {:else if $modal.type === "person/list"}
-          <PersonList pubkeys={$modal.pubkeys} />
+        {:else if $modal.type === "person/follows"}
+          <PersonList type="follows" pubkey={$modal.pubkey} />
+        {:else if $modal.type === "person/followers"}
+          <PersonList type="followers" pubkey={$modal.pubkey} />
         {:else if $modal.type === "message"}
           <Content size="lg">
             <div class="text-center">{$modal.message}</div>

src/agent/storage.ts

@@ -239,12 +239,12 @@ export const watch = (names, f) => {
   }
 
   // Debounce refresh so we don't get UI lag
-  const refresh = throttle(300, async () => store.set(await f(...tables)))
+  store.refresh = throttle(300, async () => store.set(await f(...tables)))
 
   // Listen for changes
   listener.subscribe(name => {
     if (names.includes(name)) {
-      refresh()
+      store.refresh()
     }
   })
 

src/routes/PersonDetail.svelte

@@ -7,7 +7,7 @@
   import {log} from "src/util/logger"
   import {renderContent, parseHex} from "src/util/html"
   import {numberFmt} from "src/util/misc"
-  import {displayPerson, Tags, toHex} from "src/util/nostr"
+  import {displayPerson, toHex} from "src/util/nostr"
   import Tabs from "src/partials/Tabs.svelte"
   import Content from "src/partials/Content.svelte"
   import Anchor from "src/partials/Anchor.svelte"
@@ -36,7 +36,6 @@
   let pubkey = toHex(npub)
   let following = false
   let muted = false
-  let followers = new Set()
   let followersCount = tweened(0, {interpolate, duration: 1000})
   let person = getPersonWithFallback(pubkey)
   let loading = true
@@ -111,6 +110,8 @@
     if (count) {
       followersCount.set(count)
     } else {
+      const followers = new Set()
+
       await network.load({
         shouldProcess: false,
         relays: getRelays(),
@@ -133,13 +134,11 @@
   const setActiveTab = tab => navigate(routes.person(pubkey, tab))
 
   const showFollows = () => {
-    const pubkeys = Tags.wrap(person.petnames).pubkeys()
-
-    modal.set({type: "person/list", pubkeys})
+    modal.set({type: "person/follows", pubkey})
   }
 
   const showFollowers = () => {
-    modal.set({type: "person/list", pubkeys: Array.from(followers)})
+    modal.set({type: "person/followers", pubkey})
   }
 
   const follow = async () => {

src/views/person/PersonList.svelte

@@ -1,19 +1,49 @@
 <script type="ts">
+  import {onMount} from "svelte"
+  import {uniq, sortBy, pluck} from "ramda"
+  import {Tags} from "src/util/nostr"
   import Content from "src/partials/Content.svelte"
+  import Spinner from "src/partials/Spinner.svelte"
   import PersonInfo from "src/views/person/PersonInfo.svelte"
+  import {sampleRelays, getPubkeyWriteRelays} from "src/agent/relays"
   import {getPersonWithFallback} from "src/agent/tables"
   import {watch} from "src/agent/storage"
   import network from "src/agent/network"
 
-  export let pubkeys
+  export let type
+  export let pubkey
 
-  const people = watch("people", t => pubkeys.map(getPersonWithFallback))
+  let pubkeys = []
 
-  network.loadPeople(pubkeys)
+  const person = getPersonWithFallback(pubkey)
+  const people = watch("people", t => {
+    return sortBy(p => (p.kind0 ? 0 : 1), pubkeys.map(getPersonWithFallback))
+  })
+
+  onMount(async () => {
+    if (type === "follows") {
+      pubkeys = Tags.wrap(person.petnames).values().all()
+      people.refresh()
+    } else {
+      await network.load({
+        shouldProcess: false,
+        relays: sampleRelays(getPubkeyWriteRelays(pubkey)),
+        filter: [{kinds: [3], "#p": [pubkey]}],
+        onChunk: events => {
+          pubkeys = uniq(pubkeys.concat(pluck("pubkey", events)))
+          people.refresh()
+        },
+      })
+    }
+
+    network.loadPeople(pubkeys)
+  })
 </script>
 
 <Content gap={2}>
   {#each $people || [] as person}
     <PersonInfo {person} />
+  {:else}
+    <Spinner />
   {/each}
 </Content>