Add profile info modal

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.
 

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} />

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>

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()

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}