Show popover on hover on desktop

ROADMAP.md

@@ -2,11 +2,7 @@
 
 - [ ] Show loading/success on zap invoice screen
 - [ ] Fix iOS/safari/firefox
-- [ ] Add dynamic title tag
 - [ ] Show more link on long notes (rather than just an ellipsis)
-- [ ] Show popover on delayed hover rather than click (on mobile, keep it click)
-- [ ] QR code component that sizes input to qr code width to make it tidy
-- [ ] Auto-follow hodlbod and fiatjaf, auto join relay when creating new account
 
 # Image uploads
 
@@ -48,6 +44,10 @@
 
 # More
 
+- [ ] Onboarding
+  - [ ] Auto-follow hodlbod
+  - [ ] Add a friendly tour
+  - [ ] Send a note to @coracle for help
 - [ ] https://media.nostr.band/
 - [ ] Make the note relays button modal make sense, one relay with no explanation is not good
 - [ ] Linkify invoices

src/partials/Popover.svelte

@@ -4,6 +4,8 @@
   import tippy from 'tippy.js'
   import {onMount} from 'svelte'
 
+  export let triggerType = 'click'
+
   let trigger
   let tooltip
   let instance
@@ -13,18 +15,21 @@
       appendTo: () => document.body,
       allowHTML: true,
       interactive: true,
-      trigger: 'click',
+      trigger: triggerType,
       animation: 'shift-away',
       onShow: () => {
         const [tooltipContents] = tooltip.children
 
-        instance.popper.querySelector('.tippy-content').appendChild(tooltipContents)
-        instance.popper.addEventListener('mouseleave', e => instance.hide())
-        instance.popper.addEventListener('click', e => {
-          if (e.target.closest('.tippy-close')) {
-            instance.hide()
-          }
-        })
+        // If we've already triggered it, tooltipContents will be empty
+        if (tooltipContents) {
+          instance.popper.querySelector('.tippy-content').appendChild(tooltipContents)
+          instance.popper.addEventListener('mouseleave', e => instance.hide())
+          instance.popper.addEventListener('click', e => {
+            if (e.target.closest('.tippy-close')) {
+              instance.hide()
+            }
+          })
+        }
       },
       onHidden: () => {
         const [tooltipContents] = instance.popper.querySelector('.tippy-content').children

src/util/html.ts

@@ -145,3 +145,4 @@ export const renderContent = content => {
   return content.trim()
 }
 
+export const isMobile = localStorage.mobile || window.navigator.maxTouchPoints > 1

src/views/notes/Note.svelte

@@ -9,7 +9,7 @@
   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 {extractUrls} from "src/util/html"
+  import {extractUrls, isMobile} from "src/util/html"
   import {invoiceAmount} from 'src/util/lightning'
   import ImageCircle from 'src/partials/ImageCircle.svelte'
   import QRCode from 'src/partials/QRCode.svelte'
@@ -341,7 +341,7 @@
     </div>
     <div class="flex flex-col gap-2 flex-grow min-w-0">
       <div class="flex items-center justify-between">
-        <Popover>
+        <Popover triggerType={isMobile ? 'click' : 'mouseenter'}>
           <div slot="trigger">
             <Anchor type="unstyled" class="text-lg font-bold flex gap-2 items-center">
               <span>{displayPerson($person)}</span>