Support copying and pasting npubs better

CHANGELOG.md

@@ -8,6 +8,8 @@
 * Support multiple platform relays
 * Remove default general room
 * Remove room tag from threads/calendars
+* Show pubkey on profile detail
+* Support pasting pubkey into chat start dialog
 
 # 1.0.4
 

src/app/components/ChatStart.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
+  import * as nip19 from "nostr-tools/nip19"
+  import {onMount} from "svelte"
+  import {writable} from "svelte/store"
   import {goto} from "$app/navigation"
+  import {tryCatch, uniq} from "@welshman/lib"
+  import {fromNostrURI} from "@welshman/util"
   import {pubkey} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import Field from "@lib/components/Field.svelte"
@@ -14,7 +19,36 @@
 
   const onSubmit = () => goto(makeChatPath([...pubkeys, $pubkey!]))
 
+  const addPubkey = (pubkey: string) => {
+    pubkeys = uniq([...pubkeys, pubkey])
+    term.set("")
+  }
+
+  const term = writable("")
+
   let pubkeys: string[] = $state([])
+
+  onMount(() => {
+    return term.subscribe(t => {
+      if (t.match(/^[0-9a-f]{64}$/)) {
+        addPubkey(t)
+      }
+
+      if (t.match(/^(nostr:)?(npub1|nprofile1)/)) {
+        tryCatch(() => {
+          const {type, data} = nip19.decode(fromNostrURI(t))
+
+          if (type === "npub") {
+            addPubkey(data)
+          }
+
+          if (type === "nprofile") {
+            addPubkey(data.pubkey)
+          }
+        })
+      }
+    })
+  })
 </script>
 
 <form class="column gap-4" onsubmit={preventDefault(onSubmit)}>
@@ -28,7 +62,7 @@
   </ModalHeader>
   <Field>
     {#snippet input()}
-      <ProfileMultiSelect autofocus bind:value={pubkeys} />
+      <ProfileMultiSelect autofocus bind:value={pubkeys} {term} />
     {/snippet}
   </Field>
   <ModalFooter>

src/app/components/Profile.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import * as nip19 from "nostr-tools/nip19"
   import {removeNil} from "@welshman/lib"
   import {displayPubkey, getPubkeyTagValues, getListTags} from "@welshman/util"
   import {
@@ -10,18 +11,22 @@
     deriveProfile,
     deriveProfileDisplay,
   } from "@welshman/app"
+  import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import WotScore from "@lib/components/WotScore.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import {pushModal} from "@app/modal"
+  import {clip} from "@app/toast"
 
   type Props = {
     pubkey: string
     url?: string
+    showPubkey?: boolean
+    avatarSize?: number
   }
 
-  const {pubkey, url}: Props = $props()
+  const {pubkey, url, showPubkey, avatarSize = 10}: Props = $props()
 
   const relays = removeNil([url])
   const profile = deriveProfile(pubkey, relays)
@@ -31,14 +36,16 @@
 
   const openProfile = () => pushModal(ProfileDetail, {pubkey, url})
 
+  const copyPubkey = () => clip(nip19.npubEncode(pubkey))
+
   const following = $derived(
     pubkey === $session!.pubkey || getPubkeyTagValues(getListTags($userFollows)).includes(pubkey),
   )
 </script>
 
-<div class="flex max-w-full gap-3">
+<div class="flex max-w-full items-start gap-3">
   <Button onclick={openProfile} class="py-1">
-    <Avatar src={$profile?.picture} size={10} />
+    <Avatar src={$profile?.picture} size={avatarSize} />
   </Button>
   <div class="flex min-w-0 flex-col">
     <div class="flex items-center gap-2">
@@ -47,8 +54,18 @@
       </Button>
       <WotScore score={$score} active={following} />
     </div>
-    <div class="overflow-hidden text-ellipsis text-sm opacity-75">
-      {$handle ? displayHandle($handle) : displayPubkey(pubkey)}
-    </div>
+    {#if $handle}
+      <div class="overflow-hidden text-ellipsis text-sm opacity-75">
+        {displayHandle($handle)}
+      </div>
+    {/if}
+    {#if showPubkey}
+      <div class="flex items-center gap-1 overflow-hidden text-ellipsis text-xs opacity-60">
+        {displayPubkey(pubkey)}
+        <Button onclick={copyPubkey} class="pt-1">
+          <Icon size={3} icon="copy" />
+        </Button>
+      </div>
+    {/if}
   </div>
 </div>

src/app/components/ProfileDetail.svelte

@@ -1,22 +1,10 @@
 <script lang="ts">
   import {goto} from "$app/navigation"
-  import {removeNil} from "@welshman/lib"
-  import {displayPubkey, getPubkeyTagValues, getListTags} from "@welshman/util"
-  import {
-    session,
-    userFollows,
-    deriveUserWotScore,
-    deriveHandleForPubkey,
-    displayHandle,
-    deriveProfile,
-    deriveProfileDisplay,
-  } from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
-  import Avatar from "@lib/components/Avatar.svelte"
-  import WotScore from "@lib/components/WotScore.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import Profile from "@app/components/Profile.svelte"
   import ProfileInfo from "@app/components/ProfileInfo.svelte"
   import ChatEnable from "@app/components/ChatEnable.svelte"
   import {canDecrypt, pubkeyLink} from "@app/state"
@@ -30,40 +18,15 @@
 
   const {pubkey, url}: Props = $props()
 
-  const relays = removeNil([url])
-  const profile = deriveProfile(pubkey, relays)
-  const display = deriveProfileDisplay(pubkey, relays)
-  const handle = deriveHandleForPubkey(pubkey)
-  const score = deriveUserWotScore(pubkey)
-
   const back = () => history.back()
 
   const chatPath = makeChatPath([pubkey])
 
   const openChat = () => ($canDecrypt ? goto(chatPath) : pushModal(ChatEnable, {next: chatPath}))
-
-  const following = $derived(
-    pubkey === $session!.pubkey || getPubkeyTagValues(getListTags($userFollows)).includes(pubkey),
-  )
 </script>
 
 <div class="column gap-4">
-  <div class="flex max-w-full gap-3">
-    <span class="py-1">
-      <Avatar src={$profile?.picture} size={10} />
-    </span>
-    <div class="flex min-w-0 flex-col">
-      <div class="flex items-center gap-2">
-        <span class="text-bold overflow-hidden text-ellipsis">
-          {$display}
-        </span>
-        <WotScore score={$score} active={following} />
-      </div>
-      <div class="overflow-hidden text-ellipsis text-sm opacity-75">
-        {$handle ? displayHandle($handle) : displayPubkey(pubkey)}
-      </div>
-    </div>
-  </div>
+  <Profile showPubkey avatarSize={14} {pubkey} {url} />
   <ProfileInfo {pubkey} {url} />
   <ModalFooter>
     <Button onclick={back} class="hidden md:btn md:btn-link">

src/app/components/ProfileMultiSelect.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {writable} from "svelte/store"
+  import type {Writable} from "svelte/store"
   import {type Instance} from "tippy.js"
   import {append, remove, uniq} from "@welshman/lib"
   import {profileSearch} from "@welshman/app"
@@ -15,11 +16,10 @@
   interface Props {
     value: string[]
     autofocus?: boolean
+    term?: Writable<string>
   }
 
-  let {value = $bindable(), autofocus = false}: Props = $props()
-
-  const term = writable("")
+  let {value = $bindable(), term = writable(""), autofocus = false}: Props = $props()
 
   const search = (term: string) => $profileSearch.searchValues(term)
 
@@ -44,6 +44,9 @@
   let instance: any = $state()
 
   $effect(() => {
+    // @ts-ignore
+    oninput?.($term)
+
     if ($term) {
       popover?.show()
     } else {

src/lib/components/Avatar.svelte

@@ -13,7 +13,7 @@
       const image = new Image()
 
       image.addEventListener("error", () => {
-        element.querySelector(".hidden")?.classList.remove("hidden")
+        element?.querySelector(".hidden")?.classList.remove("hidden")
       })
 
       image.src = src

src/lib/components/Suggestions.svelte

@@ -3,7 +3,7 @@
   import {throttle, clamp} from "@welshman/lib"
   import {preventDefault, stopPropagation} from "@lib/html"
 
-  const {term, search, select, component: Component, allowCreate = false} = $props()
+  const {term, search, select, component: Component, style = "", allowCreate = false} = $props()
 
   let index = $state(0)
   let items: string[] = $state([])
@@ -57,7 +57,7 @@
   })
 </script>
 
-<div transition:fly|local={{duration: 200}} class="tiptap-suggestions">
+<div transition:fly|local={{duration: 200}} class="tiptap-suggestions" {style}>
   <div class="tiptap-suggestions__content max-h-[40vh]">
     {#if $term && allowCreate && !items.includes($term)}
       <button

src/lib/components/Tippy.svelte

@@ -14,8 +14,6 @@
     ...restProps
   } = $props()
 
-  const reactiveProps = $derived(props)
-
   let element: Element
 
   onMount(() => {
@@ -28,7 +26,7 @@
       ...params,
     })
 
-    instance = mount(component, {target, props: reactiveProps})
+    instance = mount(component, {target, props})
 
     return () => {
       popover?.destroy()