Rework some popovers

ROADMAP.md

@@ -1,12 +1,8 @@
 # Current
 
-- [ ] Create my own version of nostr.how and extension explanation
-- [ ] Go over onboarding process, suggest some good relays for newcomers
-- [ ] Submit blog post with new onboarding process built in
-- [ ] Fix hover on notes in modal
 - [ ] Show loading/success on zap invoice screen
 - [ ] Fix iOS/safari/firefox
-- [ ] Show more link on long notes (rather than just an ellipsis)
+- [ ] Update https://nostr.com/clients/coracle
 
 # Coracle website
 
@@ -42,6 +38,8 @@
 
 # More
 
+- [ ] Show an error when something fails to load with a constructive suggestion
+- [ ] Show more link on long notes (rather than just an ellipsis)
 - [ ] Log in as user button
 - [ ] Abort all context subs when navigating
 - [ ] Separate mentions from other notifications
@@ -132,3 +130,4 @@
 - [ ] Offline-first
 - [ ] Add support for nests https://nostrnests.com/
   - nevent1qqs2jm46m9tg9z33av4fp8hhapsx96234htz75wrvpvrax5jjl8m5usprfmhxue69uhhyetvv9ujumn0wd68yurvv438xtnrdaksy4d92m
+- [ ] NIP 39 Support https://github.com/nostr-protocol/nips/pull/201/files

src/app.css

@@ -61,19 +61,53 @@ body,
   height: 100%;
 }
 
-/* Tippy */
+/* Tippy dark */
 
-.tippy-box {
-  background-color: #0f0f0e !important;
+.tippy-box[data-theme~="dark"] {
+  background-color: #0f0f0e;
   border: 1px solid #403d39;
   box-shadow: 3px 3px 20px #0f0f0e, 3px -3px 20px #0f0f0e, -3px 3px 20px #0f0f0e,
     -3px -3px 20px #0f0f0e;
 }
 
-.tippy-box[data-placement^="top"] > .tippy-arrow:before {
-  border-top-color: #403d39 !important;
-}
-
-.tippy-box[data-placement^="top"] > .tippy-arrow {
+.tippy-box[data-theme~="dark"][data-placement^="top"] > .tippy-arrow {
   bottom: -1px !important;
 }
+
+.tippy-box[data-theme~="dark"][data-placement^="top"] > .tippy-arrow:before {
+  border-top-color: #403d39;
+}
+
+.tippy-box[data-theme~="dark"][data-placement^="bottom"] > .tippy-arrow:before {
+  border-bottom-color: #403d39;
+}
+
+.tippy-box[data-theme~="dark"][data-placement^="left"] > .tippy-arrow:before {
+  border-left-color: #403d39;
+}
+
+.tippy-box[data-theme~="dark"][data-placement^="right"] > .tippy-arrow:before {
+  border-right-color: #403d39;
+}
+
+.tippy-box[data-theme~="dark"] > .tippy-backdrop {
+  background-color: #403d39;
+}
+
+.tippy-box[data-theme~="dark"] > .tippy-svg-arrow {
+  fill: #0f0f0e;
+}
+
+/* Tippy transparent */
+
+.tippy-box[data-theme~="transparent"] {
+  background-color: transparent;
+}
+
+.tippy-box[data-theme~="transparent"][data-placement^="top"] > .tippy-arrow:before {
+  border-color: transparent;
+}
+
+.tippy-box[data-theme~="transparent"] > .tippy-svg-arrow {
+  fill: transparent;
+}

src/partials/Popover.svelte

@@ -4,6 +4,7 @@
   import tippy from "tippy.js"
   import {onMount} from "svelte"
 
+  export let theme = "dark"
   export let triggerType = "click"
 
   let trigger
@@ -12,6 +13,7 @@
 
   onMount(() => {
     instance = tippy(trigger, {
+      theme,
       appendTo: () => document.body,
       allowHTML: true,
       interactive: true,
@@ -62,6 +64,6 @@
 
 <div bind:this={tooltip} class="hidden">
   <div>
-    <slot name="tooltip" />
+    <slot name="tooltip" {instance} />
   </div>
 </div>

src/views/alerts/Alert.svelte

@@ -1,9 +1,8 @@
 <script>
-  import {fly} from "svelte/transition"
   import {ellipsize, quantify, switcher} from "hurdak/lib/hurdak"
   import Badge from "src/partials/Badge.svelte"
+  import Popover from "src/partials/Popover.svelte"
   import {formatTimestamp} from "src/util/misc"
-  import {killEvent} from "src/util/html"
   import database from "src/agent/database"
   import {modal} from "src/app/ui"
 
@@ -21,43 +20,26 @@
     likes: "liked your note",
     zaps: "zapped your note",
   })
-
-  let isOpen = false
-
-  const openPopover = e => {
-    killEvent(e)
-
-    isOpen = true
-  }
-
-  const closePopover = e => {
-    killEvent(e)
-
-    isOpen = false
-  }
 </script>
 
 <button
   class="flex w-full cursor-pointer flex-col gap-2 border border-solid border-black py-2
          px-3 text-left text-white transition-all hover:border-medium hover:bg-dark"
   on:click={() => modal.set({type: "note/detail", note})}>
-  <div class="relative flex w-full items-center justify-between gap-2">
-    <button class="cursor-pointer" on:click={openPopover}>
-      {quantify(pubkeys.length, "person", "people")}
-      {actionText}.
-    </button>
-    {#if isOpen}
-      <button in:fly={{y: 20}} class="fixed inset-0 z-10" on:click={closePopover} />
-      <button
-        on:click={killEvent}
-        in:fly={{y: 20}}
-        class="absolute top-0 z-20 mt-8 grid grid-cols-2 gap-y-2 gap-x-4 rounded
-             border border-solid border-medium bg-dark py-2 px-4">
-        {#each pubkeys as pubkey}
-          <Badge person={database.getPersonWithFallback(pubkey)} />
-        {/each}
-      </button>
-    {/if}
+  <div class="relative flex w-full items-center justify-between gap-2" on:click|stopPropagation>
+    <Popover>
+      <div slot="trigger">
+        {quantify(pubkeys.length, "person", "people")}
+        {actionText}.
+      </div>
+      <div slot="tooltip">
+        <div class="grid grid-cols-2 gap-y-2 gap-x-4">
+          {#each pubkeys as pubkey}
+            <Badge person={database.getPersonWithFallback(pubkey)} />
+          {/each}
+        </div>
+      </div>
+    </Popover>
     <p class="text-sm text-light">{formatTimestamp(note.created_at)}</p>
   </div>
   <div class="ml-6 text-light">

src/views/notes/Note.svelte

@@ -8,7 +8,7 @@
   import {navigate} from "svelte-routing"
   import {quantify} from "hurdak/lib/hurdak"
   import {Tags, findRootId, findReplyId, displayPerson, isLike} from "src/util/nostr"
-  import {formatTimestamp, now, tryJson, stringToColor, formatSats, fetchJson} from "src/util/misc"
+  import {formatTimestamp, now, tryJson, formatSats, fetchJson} from "src/util/misc"
   import {extractUrls, isMobile} from "src/util/html"
   import {invoiceAmount} from "src/util/lightning"
   import ImageCircle from "src/partials/ImageCircle.svelte"
@@ -341,7 +341,7 @@
         </Anchor>
       </div>
       <div class="flex min-w-0 flex-grow flex-col gap-2">
-        <div class="flex items-center justify-between">
+        <div class="flex flex-col items-start justify-between sm:flex-row sm:items-center">
           <Popover triggerType={isMobile ? "click" : "mouseenter"}>
             <div slot="trigger">
               <Anchor
@@ -360,7 +360,7 @@
           </Popover>
           <Anchor
             href={"/" + nip19.neventEncode({id: note.id, relays: [note.seen_on]})}
-            class="hidden text-sm text-light sm:block"
+            class="text-sm text-light"
             type="unstyled">
             {timestamp}
           </Anchor>
@@ -422,22 +422,29 @@
                   <i class="fa fa-bolt cursor-pointer" />
                   {formatSats($zapsTotal)}
                 </button>
-                <button
-                  class="hidden w-16 text-left sm:block"
-                  on:click|stopPropagation={() => react("-")}>
-                  <i class="fa fa-flag cursor-pointer" />
-                  {$flagsCount}
-                </button>
               </div>
-              <div
-                class="hidden cursor-pointer items-center gap-1 sm:flex"
-                on:click|stopPropagation={() => {
-                  showRelays = true
-                }}>
-                <i class="fa fa-server" />
-                <div
-                  class="h-1 w-1 rounded-full"
-                  style={`background: ${stringToColor(note.seen_on)}`} />
+              <div on:click|stopPropagation>
+                <Popover theme="transparent">
+                  <div slot="trigger" class="cursor-pointer px-2">
+                    <i class="fa fa-ellipsis-v" />
+                  </div>
+                  <div
+                    slot="tooltip"
+                    let:instance
+                    class="flex flex-col gap-2"
+                    on:click={() => instance.hide()}>
+                    <Anchor
+                      type="button-circle"
+                      on:click={() => {
+                        showRelays = true
+                      }}>
+                      <i class="fa fa-server" />
+                    </Anchor>
+                    <Anchor type="button-circle" on:click={() => react("-")}>
+                      <i class="fa fa-flag" />
+                    </Anchor>
+                  </div>
+                </Popover>
               </div>
             </div>
           {/if}
@@ -529,6 +536,7 @@
         showRelays = false
       }}>
       <Content>
+        <p class="text-center">This note was found on the relay below.</p>
         <RelayCard theme="black" showControls relay={{url: note.seen_on}} />
       </Content>
     </Modal>

src/views/onboarding/OnboardingIntro.svelte

@@ -4,7 +4,7 @@
   import Content from "src/partials/Content.svelte"
   import {modal} from "src/app/ui"
 
-  const tutorialUrl = "https://nostr.how/"
+  const tutorialUrl = "https://nostr.com/"
   const videoUrl = "https://dufflepud.us-southeast-1.linodeobjects.com/coracle_intro.mp4"
 </script>