From 531717119e1d171afd07890f5536fb61d8652198 Mon Sep 17 00:00:00 2001
From: Jon Staab <jstaab@protonmail.com>
Date: Thu, 2 Jul 2026 17:01:31 -0700
Subject: [PATCH] Add profile info modal

---
 AGENTS.md                                                     | 2 +-
 src/app/components/PeopleItem.svelte                          | 4 ++--
 .../components/{ProfileInfo.svelte => ProfileAbout.svelte}    | 0
 src/app/components/ProfileDetail.svelte                       | 4 ++--
 src/app/components/ProfilePage.svelte                         | 3 +--
 src/app/components/SpaceMember.svelte                         | 4 ++--
 6 files changed, 8 insertions(+), 9 deletions(-)
 rename src/app/components/{ProfileInfo.svelte => ProfileAbout.svelte} (100%)

diff --git a/AGENTS.md b/AGENTS.md
index 614fc69f..eb742ba3 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -170,7 +170,7 @@ src/
 - Do not define svelte event handlers inline, instead name them and put them in the script section of templates
 - Avoid using `as`, except where necessary. Instead, annotate function parameters, and ensure upstream values are typed correctly.
 - Instead of `getTag(tagName, event.tags)?.[1] || ""`, use `getTagValue(tagName, event.tags)`
-- Do not render a profile's `about` directly (e.g. `profile.about`); use the `ProfileInfo` component instead.
+- Do not render a profile's `about` directly (e.g. `profile.about`); use the `ProfileAbout` component instead.
 - Use `type Props` instead of interface when defining props for svelte components.
 - When a component's value/prop shape mirrors a subset of an existing type, derive it with `Pick`/`Partial` and `export` that type from the component's `<script module>` (e.g. a `Values` type) for callers to import, instead of re-enumerating its sub-properties.
 
diff --git a/src/app/components/PeopleItem.svelte b/src/app/components/PeopleItem.svelte
index 1c5831b0..1c6fc5b2 100644
--- a/src/app/components/PeopleItem.svelte
+++ b/src/app/components/PeopleItem.svelte
@@ -3,7 +3,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Profile from "@app/components/Profile.svelte"
-  import ProfileInfo from "@app/components/ProfileInfo.svelte"
+  import ProfileAbout from "@app/components/ProfileAbout.svelte"
   import ProfileBadges from "@app/components/ProfileBadges.svelte"
   import {makeProfilePath} from "@app/routes"
 
@@ -23,7 +23,7 @@
       View Profile
     </Link>
   </div>
-  <ProfileInfo {pubkey} {url} />
+  <ProfileAbout {pubkey} {url} />
   <ProfileBadges {pubkey} {url} />
   <Link href={makeProfilePath(pubkey)} class="button button-primary sm:hidden">
     <Icon icon={UserCircle} />
diff --git a/src/app/components/ProfileInfo.svelte b/src/app/components/ProfileAbout.svelte
similarity index 100%
rename from src/app/components/ProfileInfo.svelte
rename to src/app/components/ProfileAbout.svelte
diff --git a/src/app/components/ProfileDetail.svelte b/src/app/components/ProfileDetail.svelte
index 70643acd..db03e4c6 100644
--- a/src/app/components/ProfileDetail.svelte
+++ b/src/app/components/ProfileDetail.svelte
@@ -17,7 +17,7 @@
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Profile from "@app/components/Profile.svelte"
-  import ProfileInfo from "@app/components/ProfileInfo.svelte"
+  import ProfileAbout from "@app/components/ProfileAbout.svelte"
   import ProfileBadges from "@app/components/ProfileBadges.svelte"
   import {
     deriveUserIsSpaceAdmin,
@@ -142,7 +142,7 @@
           </div>
         {/if}
       </div>
-      <ProfileInfo {pubkey} {url} />
+      <ProfileAbout {pubkey} {url} />
       <ProfileBadges {pubkey} {url} />
     </div>
   </ModalBody>
diff --git a/src/app/components/ProfilePage.svelte b/src/app/components/ProfilePage.svelte
index e4728faf..56a5161e 100644
--- a/src/app/components/ProfilePage.svelte
+++ b/src/app/components/ProfilePage.svelte
@@ -49,7 +49,6 @@
 
   const profile = deriveProfile(target)
   const profileDisplay = deriveProfileDisplay(target)
-  const encodedNpub = nip19.npubEncode(target)
   const isSelf = $derived($pubkey === target)
   const isFollowing = $derived.by(() => {
     void $followLists
@@ -67,7 +66,7 @@
   let bannerLoading = $state(false)
   let bannerInput: HTMLInputElement | undefined = $state()
 
-  const copyNpub = () => clip(encodedNpub)
+  const copyNpub = () => clip(nip19.npubEncode(target))
 
   const showShare = () => {
     closeMenu()
diff --git a/src/app/components/SpaceMember.svelte b/src/app/components/SpaceMember.svelte
index 7bb61f6a..cda9f458 100644
--- a/src/app/components/SpaceMember.svelte
+++ b/src/app/components/SpaceMember.svelte
@@ -11,7 +11,7 @@
   import Popover from "@lib/components/Popover.svelte"
   import Confirm from "@lib/components/Confirm.svelte"
   import Profile from "@app/components/Profile.svelte"
-  import ProfileInfo from "@app/components/ProfileInfo.svelte"
+  import ProfileAbout from "@app/components/ProfileAbout.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import SpaceMemberRoles from "@app/components/SpaceMemberRoles.svelte"
   import RoleBadge from "@app/components/RoleBadge.svelte"
@@ -104,7 +104,7 @@
         </div>
       {/if}
       <div class="line-clamp-1 text-sm opacity-70">
-        <ProfileInfo {pubkey} {url} singleLine />
+        <ProfileAbout {pubkey} {url} singleLine />
       </div>
     </div>
     {#if canAssign || canUnassign || canUnallow || canBan}