Clean up info modals

CHANGELOG.md

@@ -12,6 +12,7 @@
 - [x] Fix spotify album embed
 - [x] Broadcast note button
 - [x] Open person detail on notification detail
+- [x] Clean up info modals
 
 # 0.3.3
 

src/app/ModalRoutes.svelte

@@ -13,14 +13,13 @@
   import Onboarding from "src/app/views/Onboarding.svelte"
   import NoteCreate from "src/app/views/NoteCreate.svelte"
   import ZapModal from "src/app/views/ZapModal.svelte"
-  import NoteShare from "src/app/views/NoteShare.svelte"
   import PublishInfo from "src/app/views/PublishInfo.svelte"
   import NoteDetail from "src/app/views/NoteDetail.svelte"
   import NotificationInfo from "src/app/views/NotificationInfo.svelte"
   import ThreadDetail from "src/app/views/ThreadDetail.svelte"
   import PersonDetail from "src/app/views/PersonDetail.svelte"
   import PersonList from "src/app/shared/PersonList.svelte"
-  import PersonProfileInfo from "src/app/views/PersonProfileInfo.svelte"
+  import PersonInfo from "src/app/views/PersonInfo.svelte"
   import PersonShare from "src/app/views/PersonShare.svelte"
   import TopicFeed from "src/app/views/TopicFeed.svelte"
   import ListList from "src/app/views/ListList.svelte"
@@ -29,6 +28,7 @@
   import RelayBrowse from "src/app/views/RelayBrowse.svelte"
   import RelayDetail from "src/app/views/RelayDetail.svelte"
   import RelayReview from "src/app/views/RelayReview.svelte"
+  import QRCode from "src/app/views/QRCode.svelte"
 
   export let m
 </script>
@@ -41,8 +41,6 @@
   <NoteCreate pubkey={m.pubkey} quote={m.quote} writeTo={m.relays} />
 {:else if m.type === "zap/create"}
   <ZapModal pubkey={m.pubkey} note={m.note} author={m.author} zapper={m.zapper} />
-{:else if m.type === "note/share"}
-  <NoteShare note={m.note} />
 {:else if m.type === "notification/info"}
   <NotificationInfo zaps={m.zaps} likes={m.likes} replies={m.replies} />
 {:else if m.type === "thread/detail"}
@@ -76,7 +74,7 @@
 {:else if m.type === "person/detail"}
   <PersonDetail npub={nip19.npubEncode(m.pubkey)} />
 {:else if m.type === "person/info"}
-  <PersonProfileInfo pubkey={m.pubkey} />
+  <PersonInfo pubkey={m.pubkey} />
 {:else if m.type === "person/share"}
   <PersonShare pubkey={m.pubkey} />
 {:else if m.type === "person/follows"}
@@ -93,6 +91,8 @@
   <ListSelect item={m.item} />
 {:else if m.type === "list/edit"}
   <ListEdit list={m.list} />
+{:else if m.type === "qrcode"}
+  <QRCode value={m.value} />
 {:else if m.type === "message"}
   <Content size="lg">
     <div class="text-center">{m.message}</div>

src/app/shared/NoteActions.svelte

@@ -4,7 +4,7 @@
   import {tweened} from "svelte/motion"
   import {find, reject, identity, propEq, sum, pluck, sortBy} from "ramda"
   import {stringToHue, formatSats, hsl} from "src/util/misc"
-  import {isLike} from "src/util/nostr"
+  import {isLike, toNostrURI} from "src/util/nostr"
   import {quantify} from "hurdak"
   import {modal} from "src/partials/state"
   import Popover from "src/partials/Popover.svelte"
@@ -24,15 +24,12 @@
   export let setFeedRelay
 
   const zapper = Nip57.zappers.key(note.pubkey)
-  const bech32Note = nip19.noteEncode(note.id)
   const nevent = nip19.neventEncode({id: note.id, relays: [note.seen_on]})
   const interpolate = (a, b) => t => a + Math.round((b - a) * t)
   const likesCount = tweened(0, {interpolate})
   const zapsTotal = tweened(0, {interpolate})
   const repliesCount = tweened(0, {interpolate})
 
-  const share = () => modal.push({type: "note/share", note})
-
   const quote = () => modal.push({type: "note/create", quote: note})
 
   const unmute = () => user.unmute(note.id)
@@ -99,7 +96,6 @@
   $: {
     actions = []
 
-    actions.push({label: "Share", icon: "share-nodes", onClick: share})
     actions.push({label: "Quote", icon: "quote-left", onClick: quote})
 
     if (muted) {
@@ -229,9 +225,8 @@
         {/each}
       </div>
       <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} />
+      <CopyValue label="Link" value={toNostrURI(nevent)} />
+      <CopyValue label="Event ID" encode={nip19.noteEncode} value={note.id} />
     </Content>
   </Modal>
 {/if}

src/app/shared/PersonActions.svelte

@@ -29,8 +29,6 @@
       })
     }
 
-    actions.push({onClick: share, label: "Share", icon: "share-nodes"})
-
     if (!isSelf && $canSign) {
       if ($canUseGiftWrap) {
         actions.push({
@@ -71,8 +69,6 @@
 
   const openProfileInfo = () => modal.push({type: "person/info", pubkey})
 
-  const share = () => modal.push({type: "person/share", pubkey})
-
   const unfollow = () => user.unfollow(pubkey)
 
   const follow = () => user.follow(pubkey)

src/app/shared/PersonName.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import cx from "classnames"
   import {defaultTo} from "ramda"
   import {Directory, user} from "src/app/engine"
 
@@ -8,7 +9,7 @@
   const following = user.followsSet.derived(s => s.has(pubkey))
 </script>
 
-<div class={$$props.class}>
+<div class={cx("flex items-center gap-2", $$props.class)}>
   <span>{Directory.displayProfile($profile)}</span>
   {#if $following}
     <i class="fa fa-user-check ml-2 text-xs text-accent" />

src/app/views/NoteShare.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-  import {nip19} from "nostr-tools"
-  import {toNostrURI} from "src/util/nostr"
-  import Content from "src/partials/Content.svelte"
-  import QRCode from "src/partials/QRCode.svelte"
-  import {Nip65} from "src/app/engine"
-
-  export let note
-
-  const nevent = nip19.neventEncode({id: note.id, relays: Nip65.getEventHints(3, note)})
-</script>
-
-<Content size="lg">
-  <QRCode code={toNostrURI(nevent)} />
-  <div class="text-center text-gray-1">Copy or scan from a nostr app to share this note.</div>
-</Content>

src/app/views/PersonInfo.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import {nip19} from "nostr-tools"
+  import {fly} from "src/util/transition"
+  import Content from "src/partials/Content.svelte"
+  import CopyValue from "src/partials/CopyValue.svelte"
+  import RelayCard from "src/app/shared/RelayCard.svelte"
+  import {Settings, Nip05, Nip65} from "src/app/engine"
+
+  export let pubkey
+
+  const handle = Nip05.getHandle(pubkey)
+  const relays = Nip65.getPubkeyHints(Settings.getSetting("relay_limit"), pubkey, "write")
+  const nprofile = nip19.nprofileEncode({pubkey, relays})
+</script>
+
+<div in:fly={{y: 20}}>
+  <Content>
+    <h1 class="staatliches text-2xl">Details</h1>
+    <CopyValue label="Link" value={nprofile} />
+    <CopyValue label="Public Key" encode={nip19.npubEncode} value={pubkey} />
+    {#if handle}
+      {@const display = Nip05.displayHandle(handle)}
+      <CopyValue label="Nostr Address" value={display} />
+      <Content size="inherit" gap="gap-2">
+        <strong>Nostr Address Relays</strong>
+        {#each handle.profile.relays as url}
+          <RelayCard relay={{url}} />
+        {:else}
+          <p class="flex gap-2 items-center">
+            <i class="fa fa-info-circle" />
+            No relays are advertised at {display}.
+          </p>
+        {/each}
+      </Content>
+    {:else}
+      <p>
+        <i class="fa-solid fa-info-circle" />
+        Nostr Address address not available.
+      </p>
+    {/if}
+  </Content>
+</div>

src/app/views/PersonProfileInfo.svelte

@@ -1,55 +0,0 @@
-<script lang="ts">
-  import {nip19} from "nostr-tools"
-  import {fly} from "src/util/transition"
-  import Content from "src/partials/Content.svelte"
-  import CopyValue from "src/partials/CopyValue.svelte"
-  import RelayCard from "src/app/shared/RelayCard.svelte"
-  import {Settings, Nip05, Nip65} from "src/app/engine"
-
-  export let pubkey
-
-  const handle = Nip05.getHandle(pubkey)
-  const npub = nip19.npubEncode(pubkey)
-  const relays = Nip65.getPubkeyHints(Settings.getSetting("relay_limit"), pubkey, "write")
-  const nprofile = nip19.nprofileEncode({pubkey, relays})
-</script>
-
-<div in:fly={{y: 20}}>
-  <Content>
-    <h1 class="staatliches text-2xl">Profile Details</h1>
-    <CopyValue label="Public Key (Hex)" value={pubkey} />
-    <CopyValue label="Public Key (npub)" value={npub} />
-    {#if nprofile}
-      <CopyValue label="Profile Link" value={nprofile} />
-    {/if}
-
-    <h1 class="staatliches mt-4 text-2xl">NIP05</h1>
-
-    {#if handle}
-      <CopyValue label="NIP 05 Identifier" value={Nip05.displayHandle(handle)} />
-      <div>
-        <div class="mb-2 text-lg">NIP05 Relay Configuration</div>
-        {#if handle.profile.relays?.length > 0}
-          <p class="mb-4 text-sm text-gray-1">
-            These relays are advertised by the NIP05 identifier's validation endpoint.
-          </p>
-          <div class="grid grid-cols-1 gap-4">
-            {#each handle.profile.relays as url}
-              <RelayCard relay={{url}} />
-            {/each}
-          </div>
-        {:else}
-          <p class="mb-4 text-sm">
-            <i class="fa-solid fa-info-circle" />
-            No relays are advertised by the NIP05 identifier's validation endpoint.
-          </p>
-        {/if}
-      </div>
-    {:else}
-      <p class="mb-4 text-sm text-gray-1">
-        <i class="fa-solid fa-info-circle" />
-        NIP05 identifier not available.
-      </p>
-    {/if}
-  </Content>
-</div>

src/app/views/QRCode.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import Content from "src/partials/Content.svelte"
+  import QRCode from "src/partials/QRCode.svelte"
+
+  export let value
+</script>
+
+<Content size="lg">
+  <QRCode code={value} />
+</Content>

src/partials/CopyValue.svelte

@@ -1,18 +1,42 @@
 <script lang="ts">
   import {copyToClipboard} from "src/util/html"
-  import {toast} from "src/partials/state"
+  import {toast, modal} from "src/partials/state"
+  import Popover from "src/partials/Popover.svelte"
+  import Toggle from "src/partials/Toggle.svelte"
 
   export let label
   export let value
+  export let encode = null
+
+  let showEncoded = true
+
+  $: displayValue = showEncoded && encode ? encode(value) : value
 
   const copy = () => {
     copyToClipboard(value)
     toast.show("info", `${label} copied to clipboard!`)
   }
+
+  const share = () => modal.push({type: "qrcode", value: displayValue})
 </script>
 
-<strong>{label}</strong>
-<div class="flex items-center gap-2 font-mono text-sm">
-  <i class="fa-solid fa-copy cursor-pointer" on:click={copy} />
-  {value.length > 80 ? value.slice(0, 50) + "..." : value}
+<div class="flex flex-col gap-2">
+  <div class="flex items-center justify-between">
+    <strong>{label}</strong>
+    {#if encode}
+      <Popover triggerType="mouseenter">
+        <div slot="trigger">
+          <Toggle bind:value={showEncoded} />
+        </div>
+        <span slot="tooltip">Show {showEncoded ? "raw" : "encoded"} version</span>
+      </Popover>
+    {/if}
+  </div>
+  <div class="flex min-w-0 items-center gap-4 font-mono text-sm">
+    <i class="fa-solid fa-copy cursor-pointer" on:click={copy} />
+    <i class="fa-solid fa-qrcode cursor-pointer" on:click={share} />
+    <p class="min-w-0 overflow-hidden text-ellipsis">
+      {displayValue}
+    </p>
+  </div>
 </div>

src/partials/Input.svelte

@@ -9,7 +9,7 @@
   export let hideAfter = false
 
   const showBefore = $$slots.before && !hideBefore
-  const showAfter = $$slots.before && !hideAfter
+  const showAfter = $$slots.after && !hideAfter
   const className = cx(
     $$props.class,
     "rounded-full shadow-inset py-2 px-4 w-full placeholder:text-gray-5",