Add lots more detail to note info

CHANGELOG.md

@@ -4,6 +4,11 @@
 
 - [x] Add ability to collapse threads
 - [x] Add titles to overflow menu on note detail
+- [x] Re-work streamContext to keep listening for updates
+- [x] Render notes within notifications properly
+- [x] Remove flag reactions, since they're somewhat redundant with mutes
+- [x] Generally improve UI consistency and feel
+- [x] Add event id, likers, and zappers to note info popover
 
 ## 0.2.21
 

ROADMAP.md

@@ -7,9 +7,7 @@
   - Fix force relays on login: http://localhost:5173/messages/npub1l66wvfm7dxhd6wmvpukpjpyhvwtlxzu0qqajqxjfpr4rlfa8hl5qlkfr3q
 - [ ] Fix iOS/safari/firefox
 - [ ] Revisit profile page and info
-  - [ ] include similar access to hex keys etc on notes
   - [ ] Add zaps to likes tab
-  - [ ] Add hex key, like and zap info to note details
 - [ ] Sort DMs, remember message status
 - [ ] Image classification
   - https://github.com/bhky/opennsfw2

src/views/notes/Note.svelte

@@ -15,10 +15,12 @@
   import ImageInput from "src/partials/ImageInput.svelte"
   import Input from "src/partials/Input.svelte"
   import Textarea from "src/partials/Textarea.svelte"
+  import CopyValue from "src/partials/CopyValue.svelte"
   import Content from "src/partials/Content.svelte"
-  import PersonSummary from "src/views/person/PersonSummary.svelte"
+  import Badge from "src/partials/Badge.svelte"
   import Popover from "src/partials/Popover.svelte"
   import PersonCircle from "src/partials/PersonCircle.svelte"
+  import PersonSummary from "src/views/person/PersonSummary.svelte"
   import RelayCard from "src/views/relays/RelayCard.svelte"
   import Modal from "src/partials/Modal.svelte"
   import Media from "src/partials/Media.svelte"
@@ -54,7 +56,7 @@
   let replyMentions = getDefaultReplyMentions()
   let replyContainer = null
   let visibleNotes = []
-  let showRelays = false
+  let showDetails = false
   let collapsed = false
 
   const {profile, canPublish, mutes} = user
@@ -63,6 +65,8 @@
   const showEntire = anchorId === note.id
   const interactive = !anchorId || !showEntire
   const person = watch("people", () => getPersonWithFallback(note.pubkey))
+  const nevent = nip19.neventEncode({id: note.id, relays: [note.seen_on]})
+  const bech32Note = nip19.noteEncode(note.id)
 
   let likes, zaps, like, border, childrenContainer, noteContainer, canZap, actions
   let muted = false
@@ -139,7 +143,7 @@
         label: "Details",
         icon: "info",
         onClick: () => {
-          showRelays = true
+          showDetails = true
         },
       })
     }
@@ -561,14 +565,39 @@
     </div>
   {/if}
 
-  {#if showRelays}
+  {#if showDetails}
     <Modal
       onEscape={() => {
-        showRelays = false
+        showDetails = false
       }}>
       <Content>
-        <p class="text-center">This note was found on the relay below.</p>
+        {#if zaps.length > 0}
+          <h1 class="staatliches text-2xl">Zapped By</h1>
+          <div class="grid grid-cols-2 gap-2">
+            {#each zaps as zap}
+              <div class="flex flex-col gap-1">
+                <Badge person={getPersonWithFallback(zap.request.pubkey)} />
+                <span class="ml-6 text-sm text-gray-5"
+                  >{formatSats(zap.invoiceAmount / 1000)} sats</span>
+              </div>
+            {/each}
+          </div>
+        {/if}
+        {#if likes.length > 0}
+          <h1 class="staatliches text-2xl">Liked By</h1>
+          <div class="grid grid-cols-2 gap-2">
+            {#each likes as like}
+              <Badge person={getPersonWithFallback(like.pubkey)} />
+            {/each}
+          </div>
+        {/if}
+        <h1 class="staatliches text-2xl">Relays</h1>
+        <p>This note was found on the relay below.</p>
         <RelayCard theme="black" showControls relay={{url: note.seen_on}} />
+        <h1 class="staatliches text-2xl">Details</h1>
+        <CopyValue label="Identifier" value={nevent} />
+        <CopyValue label="Event ID (note)" value={bech32Note} />
+        <CopyValue label="Event ID (hex)" value={note.id} />
       </Content>
     </Modal>
   {/if}

src/views/person/PersonProfileInfo.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
   import {nip05, nip19} from "nostr-tools"
-  import {toast} from "src/app/ui"
   import Content from "src/partials/Content.svelte"
   import RelayCard from "src/views/relays/RelayCard.svelte"
-  import {copyToClipboard} from "src/util/html"
+  import CopyValue from "src/partials/CopyValue.svelte"
   import {onMount} from "svelte"
   import {fly} from "svelte/transition"
 
@@ -39,62 +38,21 @@
 
     loaded = true
   })
-
-  const copy = (label, text) => {
-    copyToClipboard(text)
-    toast.show("info", `${label} copied to clipboard!`)
-  }
 </script>
 
 <div in:fly={{y: 20}}>
   <Content>
     <h1 class="staatliches text-2xl">Profile Details</h1>
-    <div>
+    <CopyValue label="Public Key (Hex)" value={person.pubkey} />
-      <div class="mb-1 text-lg">Public Key (Hex)</div>
+    <CopyValue label="Public Key (npub)" value={npub} />
-      <div class="font-mono text-sm">
-        <button
-          class="fa-solid fa-copy cursor-pointer"
-          on:click={() => copy("Public key", person.pubkey)} />
-        {person.pubkey}
-      </div>
-    </div>
-    <div>
-      <div class="mb-1 text-lg">Public Key (npub)</div>
-      <div class="font-mono text-sm">
-        {#if npub}
-          <button
-            class="fa-solid fa-copy cursor-pointer"
-            on:click={() => copy("Public key", npub)} />
-        {/if}
-        {npub}
-      </div>
-    </div>
     {#if nprofile}
-      <div class="flex flex-col gap-2">
+      <CopyValue label="Profile Link" value={nprofile} />
-        <div class="text-lg">Profile Link</div>
-        <div class="break-all font-mono text-sm">
-          <button
-            class="fa-solid fa-copy inline cursor-pointer"
-            on:click={() => copy("Profile", nprofile)} />
-          {nprofile}
-        </div>
-      </div>
     {/if}
 
     <h1 class="staatliches mt-4 text-2xl">NIP05</h1>
 
     {#if loaded && person.verified_as}
-      <div>
+      <CopyValue label="NIP 05 Identifier" value={person.verified_as} />
-        <div class="mb-1 text-lg">NIP05 Identifier</div>
-        <div class="font-mono text-sm">
-          {#if person.verified_as}
-            <button
-              class="fa-solid fa-copy inline cursor-pointer"
-              on:click={() => copy("NIP05 Identifier", person.verified_as)} />
-          {/if}
-          {person.verified_as || "?"}
-        </div>
-      </div>
       {#if nip05ProfileData}
         <div>
           <div class="mb-2 text-lg">NIP05 Relay Configuration</div>