Clean up some jank with nested modals

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+# 0.2.29
+
+- [x] Register url handler for web+nostr and use that for sharing
+
 # 0.2.28
 
 - [x] Add basic naddr support

ROADMAP.md

@@ -1,5 +1,7 @@
 # Current
 
+- [ ] Combine search and scan
+- [ ] Fix white screen on cold scan
 - [ ] Relay reviews
   - New kind, d as url? Combine with labeling?
   - Show reviews in relay detail rather than events. Warn about events tab

src/app/App.svelte

@@ -8,7 +8,7 @@
   import {identity, isNil, last} from "ramda"
   import {first} from "hurdak/lib/hurdak"
   import {warn} from "src/util/logger"
-  import {timedelta, hexToBech32, bech32ToHex, shuffle, now} from "src/util/misc"
+  import {timedelta, hexToBech32, bech32ToHex, shuffle, now, tryFunc} from "src/util/misc"
   import cmd from "src/agent/cmd"
   import {onReady, relays} from "src/agent/db"
   import keys from "src/agent/keys"
@@ -39,6 +39,8 @@
 
   $: style.textContent = `:root { ${getThemeVariables($theme)}; background: var(--gray-8); }`
 
+  tryFunc(() => navigator.registerProtocolHandler("web+nostr", `${location.origin}/%s`))
+
   const seenChallenges = new Set()
 
   // When we get an AUTH challenge from our pool, attempt to authenticate

src/app/Modal.svelte

@@ -15,8 +15,12 @@
   }
 </script>
 
-{#each nonVirtual as m}
-  <Modal virtual={false} onEscape={!m.noEscape && m === last($stack) ? closeModal : null}>
+{#each nonVirtual as m, i}
+  <Modal
+    index={i}
+    virtual={false}
+    isOnTop={m === last($stack)}
+    onEscape={m.noEscape ? null : closeModal}>
     <ModalRoutes {m} />
   </Modal>
 {/each}

src/app/ModalRoutes.svelte

@@ -8,6 +8,7 @@
   import Onboarding from "src/app/views/Onboarding.svelte"
   import NoteCreate from "src/app/views/NoteCreate.svelte"
   import NoteZap from "src/app/views/NoteZap.svelte"
+  import NoteShare from "src/app/views/NoteShare.svelte"
   import NoteDetail from "src/app/views/NoteDetail.svelte"
   import PersonFeed from "src/app/views/PersonFeed.svelte"
   import PersonList from "src/app/shared/PersonList.svelte"
@@ -30,6 +31,8 @@
   <NoteCreate pubkey={m.pubkey} nevent={m.nevent} writeTo={m.relays} />
 {:else if m.type === "note/zap"}
   <NoteZap note={m.note} />
+{:else if m.type === "note/share"}
+  <NoteShare note={m.note} />
 {:else if m.type === "relay/add"}
   <RelayAdd url={m.url} />
 {:else if m.type === "onboarding"}

src/app/shared/NoteActions.svelte

@@ -3,11 +3,10 @@
   import {nip19} from "nostr-tools"
   import {tweened} from "svelte/motion"
   import {find, reject, identity, propEq, pathEq, sum, pluck, sortBy} from "ramda"
-  import {copyToClipboard} from "src/util/html"
   import {stringToHue, formatSats, hsl} from "src/util/misc"
   import {displayRelay, isLike, processZaps} from "src/util/nostr"
   import {quantify, first} from "hurdak/lib/hurdak"
-  import {toast, modal} from "src/partials/state"
+  import {modal} from "src/partials/state"
   import Popover from "src/partials/Popover.svelte"
   import Content from "src/partials/Content.svelte"
   import Modal from "src/partials/Modal.svelte"
@@ -37,11 +36,8 @@
   const zapsTotal = tweened(0, {interpolate})
   const repliesCount = tweened(0, {interpolate})
 
-  const copyLink = () => {
-    const nevent = nip19.neventEncode({id: note.id, relays: note.seen_on})
-
-    copyToClipboard("nostr:" + nevent)
-    toast.show("info", "Note link copied to clipboard!")
+  const share = () => {
+    modal.push({type: "note/share", note})
   }
 
   const quote = () => modal.push({type: "note/create", nevent})
@@ -84,7 +80,7 @@
   $: {
     actions = []
 
-    actions.push({label: "Share", icon: "share-nodes", onClick: copyLink})
+    actions.push({label: "Share", icon: "share-nodes", onClick: share})
     actions.push({label: "Quote", icon: "quote-left", onClick: quote})
 
     if (muted) {

src/app/views/NoteShare.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import {nip19} from "nostr-tools"
+  import Content from "src/partials/Content.svelte"
+  import QRCode from "src/partials/QRCode.svelte"
+  import {getRelayForEventHint} from "src/agent/relays"
+
+  export let note
+
+  const nevent = nip19.neventEncode({id: note.id, relays: [getRelayForEventHint(note)]})
+</script>
+
+<Content size="lg">
+  <QRCode code={`nostr:${nevent}`} />
+  <div class="text-center text-gray-1">Copy or scan from a nostr app to share this note.</div>
+</Content>

src/app/views/PersonShare.svelte

@@ -13,6 +13,6 @@
 </script>
 
 <Content size="lg">
-  <QRCode code={`${window.location.origin}/${nprofile}`} />
+  <QRCode code={`nostr:${nprofile}`} />
   <div class="text-center text-gray-1">Copy or scan from a nostr app to share this profile.</div>
 </Content>

src/partials/Modal.svelte

@@ -4,7 +4,9 @@
   import {fly, fade} from "svelte/transition"
   import {modal} from "src/partials/state"
 
+  export let index = null
   export let virtual = true
+  export let isOnTop = true
   export let onEscape = null
 
   let root, content
@@ -12,6 +14,9 @@
   const id = randomId()
   const {stack} = modal
 
+  $: _isOnTop = virtual || isOnTop
+  $: _onEscape = _isOnTop ? onEscape : null
+
   onMount(() => {
     if (virtual) {
       modal.push({id, virtual: true})
@@ -28,20 +33,20 @@
 <svelte:body
   on:keydown={e => {
     if (e.key === "Escape" && !root.querySelector(".modal")) {
-      onEscape?.()
+      _onEscape?.()
     }
   }} />
 
 <div class="modal fixed inset-0 z-30" bind:this={root} transition:fade>
   <div
     class="fixed inset-0 cursor-pointer bg-black opacity-50"
-    on:click|stopPropagation={onEscape} />
+    on:click|stopPropagation={_onEscape} />
   <div
     class="modal-content h-full overflow-auto"
     bind:this={content}
     transition:fly={{y: 1000}}
-    class:cursor-pointer={onEscape}
-    on:click={onEscape}>
+    class:cursor-pointer={_onEscape}
+    on:click={_onEscape}>
     <div class="mt-12 min-h-full">
       {#if onEscape}
         <div class="pointer-events-none sticky top-0 z-10 flex w-full flex-col items-end gap-2 p-2">
@@ -50,7 +55,7 @@
                  border border-solid border-accent-light bg-accent text-white transition-colors hover:bg-accent-light">
             <i class="fa fa-times fa-lg" />
           </div>
-          {#if $stack.length > 1}
+          {#if $stack.length > 1 && index > 0}
             <div
               on:click|stopPropagation={() => modal.clear()}
               class="pointer-events-auto flex h-10 w-10 cursor-pointer items-center justify-center rounded-full

src/partials/QRCode.svelte

@@ -11,7 +11,7 @@
 
   const copy = () => {
     copyToClipboard(code)
-    toast.show("info", "The QR Code has been copied to your clipboard.")
+    toast.show("info", "Copied to clipboard!")
   }
 
   onMount(() => {