Add follows abstraction

src/Onboarding.svelte

@@ -0,0 +1,2 @@
+
+onboarding

src/Shell.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import Onboarding from 'src/Onboarding.svelte'
+  import App from 'src/App.svelte'
+  import {relays} from 'src/agent/relays'
+  import {showOnboarding} from 'src/app/ui'
+
+  $: {
+    if ($relays.length === 0) {
+      showOnboarding.set(true)
+    }
+  }
+</script>
+
+{#if $showOnboarding}
+<Onboarding />
+{:else}
+<App />
+{/if}

src/agent/user.ts

@@ -1,8 +1,11 @@
+import {pipe, concat, reject, nth, map} from 'ramda'
 import type {Person} from 'src/util/types'
 import type {Readable} from 'svelte/store'
-import {derived} from 'svelte/store'
+import {derived, get, writable} from 'svelte/store'
 import database from 'src/agent/database'
+import {getUserWriteRelays} from 'src/agent/relays'
 import keys from 'src/agent/keys'
+import cmd from 'src/agent/cmd'
 
 export const user = derived(
   [keys.pubkey, database.people as Readable<any>],
@@ -14,3 +17,39 @@ export const user = derived(
     return ($people[pubkey] || {pubkey})
   }
 ) as Readable<Person>
+
+// Create a special wrapper to manage follows the same way whether
+// the user is logged in or not
+
+export const follows = (() => {
+  const anonPetnames = writable([])
+
+  const petnames = derived(
+    [user, anonPetnames],
+    ([$user, $anonPetnames]) =>
+      $user?.petnames || $anonPetnames
+  )
+
+  return {
+    petnames,
+    pubkeys: derived(petnames, pipe(nth(0), map(nth(1)))),
+    update(f) {
+      const $petnames = f(get(petnames))
+
+      anonPetnames.set($petnames)
+
+      if (get(user)) {
+        cmd.setPetnames(getUserWriteRelays(), $petnames)
+      }
+    },
+    addFollow(pubkey, url, name) {
+      const tag = ["p", pubkey, url, name || ""]
+
+      this.update(pipe(reject(t => t[1] === pubkey), concat([tag])))
+    },
+    removeFollow(pubkey) {
+      this.update(reject(t => t[1] === pubkey))
+    },
+  }
+})()
+

src/app/ui.ts

@@ -110,3 +110,5 @@ export const logUsage = async name => {
     }
   }
 }
+
+export const showOnboarding = writable(false)

src/main.js

@@ -7,9 +7,9 @@ Bugsnag.start({
   collectUserIp: false,
 })
 
-import App from 'src/App.svelte'
+import Shell from 'src/Shell.svelte'
 
-const app = new App({
+const app = new Shell({
   target: document.getElementById('app')
 })
 

src/routes/Person.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {last, find, reject} from 'ramda'
+  import {last, find} from 'ramda'
   import {onMount} from 'svelte'
   import {tweened} from 'svelte/motion'
   import {nip19} from 'nostr-tools'
@@ -16,14 +16,13 @@
   import Notes from "src/views/person/Notes.svelte"
   import Likes from "src/views/person/Likes.svelte"
   import Relays from "src/views/person/Relays.svelte"
-  import {user} from "src/agent/user"
-  import {getPubkeyWriteRelays, getUserWriteRelays} from "src/agent/relays"
+  import {user, follows} from "src/agent/user"
+  import {getPubkeyWriteRelays} from "src/agent/relays"
   import network from "src/agent/network"
   import keys from "src/agent/keys"
   import database from "src/agent/database"
   import {routes} from "src/app/ui"
   import {modal} from "src/app"
-  import cmd from "src/agent/cmd"
 
   export let npub
   export let activeTab
@@ -88,16 +87,11 @@
    }
 
   const follow = async () => {
-    const tag = ["p", pubkey, relays[0].url, person.name || ""]
-    const petnames = reject(t => t[1] === pubkey, $user.petnames).concat([tag])
-
-    cmd.setPetnames(getUserWriteRelays(), petnames)
+    follows.addFollow(pubkey, relays[0].url, person.name)
   }
 
   const unfollow = async () => {
-    const petnames = reject(t => t[1] === pubkey, $user.petnames)
-
-    cmd.setPetnames(getUserWriteRelays(), petnames)
+    follows.removeFollow(pubkey)
   }
 
   const openAdvanced = () => {