Consolidate PersonInfo

ROADMAP.md

@@ -2,6 +2,8 @@
 
 - [ ] Refactor
   - Move global modals to child components?
+  - Consolidate person search/list, other person components
+  - Consolidate relay components
 
 - [ ] Relays bounty
   - [ ] Ability to create custom feeds

src/app2/App.svelte

@@ -10,7 +10,7 @@
   import {warn} from "src/util/logger"
   import {timedelta, hexToBech32, bech32ToHex, shuffle, now} from "src/util/misc"
   import cmd from "src/agent/cmd"
-  import {onReady, relays, people} from "src/agent/tables"
+  import {onReady, relays} from "src/agent/tables"
   import keys from "src/agent/keys"
   import network from "src/agent/network"
   import pool from "src/agent/pool"

src/app2/SideNav.svelte

@@ -6,7 +6,7 @@
   import {menuIsOpen, installPrompt, routes} from "src/app/ui"
   import {newNotifications, newDirectMessages, newChatMessages} from "src/app/listener"
   import {slowConnections} from "src/app/connection"
-  import PersonCircle from "src/partials/PersonCircle.svelte"
+  import PersonCircle from "src/app2/shared/PersonCircle.svelte"
 
   const {profile, canPublish} = user
 

src/app2/shared/Note.svelte

@@ -40,7 +40,7 @@
   import Content from "src/partials/Content.svelte"
   import Badge from "src/partials/Badge.svelte"
   import Popover from "src/partials/Popover.svelte"
-  import PersonCircle from "src/partials/PersonCircle.svelte"
+  import PersonCircle from "src/app2/shared/PersonCircle.svelte"
   import PersonSummary from "src/app2/shared/PersonSummary.svelte"
   import RelayCard from "src/app2/shared/RelayCard.svelte"
   import Modal from "src/partials/Modal.svelte"

src/app2/shared/NoteContent.svelte

@@ -10,7 +10,7 @@
   import Card from "src/partials/Card.svelte"
   import Spinner from "src/partials/Spinner.svelte"
   import Anchor from "src/partials/Anchor.svelte"
-  import PersonCircle from "src/partials/PersonCircle.svelte"
+  import PersonCircle from "src/app2/shared/PersonCircle.svelte"
   import {sampleRelays} from "src/agent/relays"
   import user from "src/agent/user"
   import network from "src/agent/network"

src/app2/shared/PersonInfo.svelte

@@ -1,25 +1,55 @@
 <script lang="ts">
+  import {last, nth} from "ramda"
+  import {fly} from "svelte/transition"
+  import {noEvent} from "src/util/html"
   import {displayPerson} from "src/util/nostr"
-  import PersonInfo from "src/partials/PersonInfo.svelte"
+  import Anchor from "src/partials/Anchor.svelte"
+  import PersonCircle from "src/app2/shared/PersonCircle.svelte"
+  import PersonAbout from "src/app2/shared/PersonAbout.svelte"
   import {getPubkeyWriteRelays, sampleRelays} from "src/agent/relays"
   import user from "src/agent/user"
+  import {routes} from "src/app/ui"
 
   export let person
 
-  const {petnamePubkeys} = user
+  export let hasPetname = pubkey => user.getPetnames().map(nth(1)).includes(pubkey)
 
-  const addPetname = ({pubkey}) => {
+  export let removePetname = ({pubkey}) => user.removePetname(pubkey)
+
+  export let addPetname = ({pubkey}) => {
     const [{url}] = sampleRelays(getPubkeyWriteRelays(pubkey))
 
     user.addPetname(pubkey, url, displayPerson(person))
   }
-
-  const removePetname = ({pubkey}) => {
-    user.removePetname(pubkey)
-  }
 </script>
 
-<PersonInfo
-  {person}
-  addPetname={$petnamePubkeys.includes(person.pubkey) ? null : addPetname}
-  removePetname={$petnamePubkeys.includes(person.pubkey) ? removePetname : null} />
+<a
+  in:fly={{y: 20}}
+  href={routes.person(person.pubkey)}
+  class="flex gap-4 overflow-hidden border-l-2 border-solid border-gray-7 py-3 px-4
+         transition-all hover:border-accent hover:bg-gray-8">
+  <PersonCircle {person} size={12} />
+  <div class="flex min-w-0 flex-grow flex-col gap-4">
+    <div class="flex items-start justify-between gap-2">
+      <div class="flex flex-col gap-2">
+        <h1 class="text-xl">{displayPerson(person)}</h1>
+        {#if person.verified_as}
+          <div class="flex gap-1 text-sm">
+            <i class="fa fa-user-check text-accent" />
+            <span class="text-gray-1">{last(person.verified_as.split("@"))}</span>
+          </div>
+        {/if}
+      </div>
+      {#if hasPetname(person.pubkey)}
+        <Anchor type="button-accent" on:click={noEvent(() => removePetname(person))}>
+          Following
+        </Anchor>
+      {:else}
+        <Anchor type="button" on:click={noEvent(() => addPetname(person))}>Follow</Anchor>
+      {/if}
+    </div>
+    <p class="overflow-hidden text-ellipsis">
+      <PersonAbout truncate {person} />
+    </p>
+  </div>
+</a>

src/app2/shared/PersonSummary.svelte

@@ -8,8 +8,8 @@
   import {getPersonWithFallback} from "src/agent/tables"
   import {watch} from "src/agent/storage"
   import {routes} from "src/app/ui"
-  import PersonCircle from "src/partials/PersonCircle.svelte"
-  import PersonAbout from "src/partials/PersonAbout.svelte"
+  import PersonCircle from "src/app2/shared/PersonCircle.svelte"
+  import PersonAbout from "src/app2/shared/PersonAbout.svelte"
 
   export let pubkey
 

src/app2/views/MessagesDetail.svelte

@@ -16,8 +16,8 @@
   import cmd from "src/agent/cmd"
   import {routes} from "src/app/ui"
   import {lastChecked} from "src/app/listener"
-  import PersonCircle from "src/partials/PersonCircle.svelte"
-  import PersonAbout from "src/partials/PersonAbout.svelte"
+  import PersonCircle from "src/app2/shared/PersonCircle.svelte"
+  import PersonAbout from "src/app2/shared/PersonAbout.svelte"
 
   export let entity
 

src/app2/views/MessagesListItem.svelte

@@ -5,7 +5,7 @@
   import {displayPerson} from "src/util/nostr"
   import {getPersonWithFallback} from "src/agent/tables"
   import {lastChecked} from "src/app/listener"
-  import PersonCircle from "src/partials/PersonCircle.svelte"
+  import PersonCircle from "src/app2/shared/PersonCircle.svelte"
   import Card from "src/partials/Card.svelte"
 
   export let contact

src/app2/views/OnboardingFollows.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import {without} from "ramda"
+  import {without, always} from "ramda"
   import {fuzzy} from "src/util/misc"
   import Input from "src/partials/Input.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import Heading from "src/partials/Heading.svelte"
   import Content from "src/partials/Content.svelte"
-  import PersonInfo from "src/partials/PersonInfo.svelte"
+  import PersonInfo from "src/app2/shared/PersonInfo.svelte"
   import {getPersonWithFallback} from "src/agent/tables"
   import {watch} from "src/agent/storage"
   import {modal} from "src/app/ui"
@@ -55,7 +55,10 @@
     </div>
   {:else}
     {#each follows as pubkey}
-      <PersonInfo person={getPersonWithFallback(pubkey)} {removePetname} />
+      <PersonInfo
+        person={getPersonWithFallback(pubkey)}
+        hasPetname={always(true)}
+        {removePetname} />
     {/each}
   {/if}
   <div class="flex items-center gap-2">
@@ -66,6 +69,6 @@
     <i slot="before" class="fa-solid fa-search" />
   </Input>
   {#each search(q).slice(0, 50) as person (person.pubkey)}
-    <PersonInfo {person} {addPetname} />
+    <PersonInfo {person} hasPetname={always(false)} {addPetname} />
   {/each}
 </Content>

src/app2/views/PersonDetail.svelte

@@ -21,8 +21,8 @@
   import network from "src/agent/network"
   import {getPersonWithFallback} from "src/agent/tables"
   import {routes, modal, theme, getThemeColor} from "src/app/ui"
-  import PersonCircle from "src/partials/PersonCircle.svelte"
-  import PersonAbout from "src/partials/PersonAbout.svelte"
+  import PersonCircle from "src/app2/shared/PersonCircle.svelte"
+  import PersonAbout from "src/app2/shared/PersonAbout.svelte"
 
   export let npub
   export let activeTab

src/partials/Badge.svelte

@@ -3,7 +3,7 @@
   import {killEvent} from "src/util/html"
   import {displayPerson} from "src/util/nostr"
   import {routes} from "src/app/ui"
-  import PersonCircle from "src/partials/PersonCircle.svelte"
+  import PersonCircle from "src/app2/shared/PersonCircle.svelte"
 
   export let person
   export let inert = false

src/partials/PersonInfo.svelte

@@ -1,46 +0,0 @@
-<script lang="ts">
-  import {last} from "ramda"
-  import {fly} from "svelte/transition"
-  import {noEvent} from "src/util/html"
-  import {displayPerson} from "src/util/nostr"
-  import Anchor from "src/partials/Anchor.svelte"
-  import PersonCircle from "src/partials/PersonCircle.svelte"
-  import PersonAbout from "src/partials/PersonAbout.svelte"
-  import {routes} from "src/app/ui"
-
-  export let person
-  export let addPetname = null
-  export let removePetname = null
-</script>
-
-<a
-  in:fly={{y: 20}}
-  href={routes.person(person.pubkey)}
-  class="flex gap-4 overflow-hidden border-l-2 border-solid border-gray-7 py-3 px-4
-         transition-all hover:border-accent hover:bg-gray-8">
-  <PersonCircle {person} size={12} />
-  <div class="flex min-w-0 flex-grow flex-col gap-4">
-    <div class="flex items-start justify-between gap-2">
-      <div class="flex flex-col gap-2">
-        <h1 class="text-xl">{displayPerson(person)}</h1>
-        {#if person.verified_as}
-          <div class="flex gap-1 text-sm">
-            <i class="fa fa-user-check text-accent" />
-            <span class="text-gray-1">{last(person.verified_as.split("@"))}</span>
-          </div>
-        {/if}
-      </div>
-      {#if removePetname}
-        <Anchor type="button-accent" on:click={noEvent(() => removePetname(person))}>
-          Following
-        </Anchor>
-      {/if}
-      {#if addPetname}
-        <Anchor type="button" on:click={noEvent(() => addPetname(person))}>Follow</Anchor>
-      {/if}
-    </div>
-    <p class="overflow-hidden text-ellipsis">
-      <PersonAbout truncate {person} />
-    </p>
-  </div>
-</a>