Clean up QR Codes

ROADMAP.md

@@ -6,6 +6,7 @@
 - [ ] 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
 

src/App.svelte

@@ -24,45 +24,45 @@
   import {loadAppData} from "src/app"
   import alerts from "src/app/alerts"
   import {modal, routes, menuIsOpen, logUsage} from "src/app/ui"
-  import AddRelay from "src/views/relays/AddRelay.svelte"
-  import Alerts from "src/views/alerts/Alerts.svelte"
-  import Anchor from 'src/partials/Anchor.svelte'
-  import Bech32Entity from "src/views/Bech32Entity.svelte"
-  import ChatDetail from "src/views/chat/ChatDetail.svelte"
+  import Anchor from "src/partials/Anchor.svelte"
+  import Content from "src/partials/Content.svelte"
+  import EnsureData from "src/partials/EnsureData.svelte"
+  import Modal from "src/partials/Modal.svelte"
+  import Spinner from "src/partials/Spinner.svelte"
+  import Alerts from "src/routes/Alerts.svelte"
+  import Bech32Entity from "src/routes/Bech32Entity.svelte"
+  import ChatDetail from "src/routes/ChatDetail.svelte"
+  import ChatList from "src/routes/ChatList.svelte"
+  import Debug from "src/routes/Debug.svelte"
+  import Feeds from "src/routes/Feeds.svelte"
+  import Keys from "src/routes/Keys.svelte"
+  import Login from "src/routes/Login.svelte"
+  import Logout from "src/routes/Logout.svelte"
+  import MessagesDetail from "src/routes/MessagesDetail.svelte"
+  import MessagesList from "src/routes/MessagesList.svelte"
+  import NotFound from "src/routes/NotFound.svelte"
+  import PersonDetail from "src/routes/PersonDetail.svelte"
+  import Search from "src/routes/Search.svelte"
+  import RelayDetail from "src/routes/RelayDetail.svelte"
+  import RelayList from "src/routes/RelayList.svelte"
+  import Profile from "src/views/Profile.svelte"
+  import Settings from "src/views/Settings.svelte"
+  import SideNav from "src/views/SideNav.svelte"
+  import Toast from "src/views/Toast.svelte"
+  import TopNav from "src/views/TopNav.svelte"
   import ChatEdit from "src/views/chat/ChatEdit.svelte"
-  import ChatList from "src/views/chat/ChatList.svelte"
   import ConnectUser from "src/views/login/ConnectUser.svelte"
-  import Content from 'src/partials/Content.svelte'
-  import Debug from "src/views/Debug.svelte"
-  import EnsureData from 'src/partials/EnsureData.svelte'
-  import Keys from "src/views/Keys.svelte"
-  import Login from "src/views/login/Login.svelte"
-  import Logout from "src/views/login/Logout.svelte"
-  import MessagesDetail from "src/views/messages/MessagesDetail.svelte"
-  import MessagesList from "src/views/messages/MessagesList.svelte"
-  import Modal from 'src/partials/Modal.svelte'
-  import NotFound from "src/views/NotFound.svelte"
+  import PrivKeyLogin from "src/views/login/PrivKeyLogin.svelte"
+  import PubKeyLogin from "src/views/login/PubKeyLogin.svelte"
+  import SignUp from "src/views/login/SignUp.svelte"
   import NoteCreate from "src/views/notes/NoteCreate.svelte"
   import NoteDetail from "src/views/notes/NoteDetail.svelte"
-  import NotesList from "src/views/notes/NotesList.svelte"
-  import PersonDetail from "src/views/person/PersonDetail.svelte"
   import PersonList from "src/views/person/PersonList.svelte"
-  import PersonSettings from "src/views/person/PersonSettings.svelte"
   import PersonProfileInfo from "src/views/person/PersonProfileInfo.svelte"
+  import PersonSettings from "src/views/person/PersonSettings.svelte"
   import PersonShare from "src/views/person/PersonShare.svelte"
-  import PrivKeyLogin from "src/views/login/PrivKeyLogin.svelte"
-  import Profile from "src/views/Profile.svelte"
-  import PubKeyLogin from "src/views/login/PubKeyLogin.svelte"
+  import AddRelay from "src/views/relays/AddRelay.svelte"
   import RelayCard from "src/views/relays/RelayCard.svelte"
-  import RelayDetail from "src/views/relays/RelayDetail.svelte"
-  import RelayList from "src/views/relays/RelayList.svelte"
-  import Search from "src/views/search/Search.svelte"
-  import Settings from "src/views/Settings.svelte"
-  import SideNav from 'src/views/SideNav.svelte'
-  import SignUp from "src/views/login/SignUp.svelte"
-  import Spinner from 'src/partials/Spinner.svelte'
-  import Toast from 'src/views/Toast.svelte'
-  import TopNav from 'src/views/TopNav.svelte'
 
   Object.assign(window, {cmd, database, user, keys, network, pool, sync})
 
@@ -184,7 +184,7 @@
       </Route>
       <Route path="/notes/:activeTab" let:params>
         <EnsureData>
-          <NotesList activeTab={params.activeTab} />
+          <Feeds activeTab={params.activeTab} />
         </EnsureData>
       </Route>
       <Route path="/people/:npub/:activeTab" let:params>

src/partials/QRCode.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import QRCode from 'qrcode'
+  import {onMount} from 'svelte'
+  import Input from 'src/partials/Input.svelte'
+  import {copyToClipboard} from "src/util/html"
+  import {toast} from 'src/app/ui'
+
+  export let code
+
+  let canvas
+
+  const copy = () => {
+    copyToClipboard(code)
+    toast.show("info", "The QR Code has been copied to your clipboard.")
+  }
+
+  onMount(() => {
+    QRCode.toCanvas(canvas, code)
+  })
+</script>
+
+<div class="rounded bg-black border border-solid border-medium p-4 flex flex-col gap-4 max-w-sm m-auto">
+  <canvas class="m-auto rounded" bind:this={canvas} />
+  <Input value={code}>
+    <button slot="after" class="fa fa-copy" on:click={copy} />
+  </Input>
+</div>

src/routes/Bech32Entity.svelte

@@ -5,7 +5,7 @@
   import {warn} from 'src/util/logger'
   import Content from 'src/partials/Content.svelte'
   import NoteDetail from 'src/views/notes/NoteDetail.svelte'
-  import Person from 'src/views/person/PersonDetail.svelte'
+  import Person from 'src/routes/PersonDetail.svelte'
   import {sampleRelays} from 'src/agent/relays'
 
   export let entity

src/views/notes/Note.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import cx from 'classnames'
-  import QRCode from 'qrcode'
   import {nip19} from 'nostr-tools'
   import {find, sum, last, whereEq, without, uniq, pluck, reject, propEq} from 'ramda'
   import {onMount} from 'svelte'
@@ -10,9 +9,10 @@
   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, copyToClipboard} from "src/util/html"
+  import {extractUrls} from "src/util/html"
   import {invoiceAmount} from 'src/util/lightning'
   import ImageCircle from 'src/partials/ImageCircle.svelte'
+  import QRCode from 'src/partials/QRCode.svelte'
   import ImageInput from 'src/partials/ImageInput.svelte'
   import Input from 'src/partials/Input.svelte'
   import Textarea from 'src/partials/Textarea.svelte'
@@ -61,7 +61,7 @@
   const interactive = !anchorId || !showEntire
   const person = database.watch('people', () => database.getPersonWithFallback(note.pubkey))
 
-  let likes, flags, zaps, like, flag, border, childrenContainer, noteContainer, canZap, zapCanvas
+  let likes, flags, zaps, like, flag, border, childrenContainer, noteContainer, canZap
 
   const interpolate = (a, b) => t => a + Math.round((b - a) * t)
   const likesCount = tweened(0, {interpolate})
@@ -121,7 +121,6 @@
   $: $repliesCount = note.replies.length
   $: visibleNotes = note.replies.filter(r => showContext ? true : !r.isContext)
   $: canZap = $person?.zapper && user.canZap()
-  $: zapCanvas && zap && QRCode.toCanvas(zapCanvas, zap.invoice)
 
   const onClick = e => {
     const target = e.target as HTMLElement
@@ -279,10 +278,6 @@
     })
   }
 
-  const copyZapInvoice = () => {
-    copyToClipboard(zap.invoice)
-  }
-
   const cleanupZap = () => {
     if (zap) {
       zap.sub?.then(s => s.unsub())
@@ -515,10 +510,7 @@
       <p>to {displayPerson($person)}</p>
     </div>
     {#if zap.invoice}
-      <canvas class="m-auto" bind:this={zapCanvas} />
-      <Input value={zap.invoice}>
-        <button slot="after" class="fa fa-copy" on:click={copyZapInvoice} />
-      </Input>
+      <QRCode code={zap.invoice} />
       <div class="text-center text-light">
         Copy or scan using a lightning wallet to pay your zap.
       </div>

src/views/person/PersonShare.svelte

@@ -1,35 +1,19 @@
 <script lang="ts">
-  import QRCode from 'qrcode'
   import {prop} from 'ramda'
   import {nip19} from 'nostr-tools'
-  import {copyToClipboard} from "src/util/html"
-  import {onMount} from 'svelte'
   import Content from 'src/partials/Content.svelte'
-  import Input from 'src/partials/Input.svelte'
+  import QRCode from 'src/partials/QRCode.svelte'
   import {getPubkeyWriteRelays} from 'src/agent/relays'
-  import {toast} from 'src/app/ui'
 
   export let person
 
   const {pubkey} = person
   const relays = [prop('url', getPubkeyWriteRelays(pubkey))]
   const nprofile = nip19.nprofileEncode({pubkey, relays})
-
-  let canvas
-
-  const copyKey = () => {
-    copyToClipboard(nprofile)
-    toast.show("info", "Profile has been copied to the clipboard!")
-  }
-
-  onMount(() => QRCode.toCanvas(canvas, nprofile))
 </script>
 
 <Content size="lg">
-  <canvas class="m-auto" bind:this={canvas} />
-  <Input value={nprofile}>
-    <button slot="after" class="fa fa-copy" on:click={copyKey} />
-  </Input>
+  <QRCode code={nprofile} />
   <div class="text-center text-light">
     Copy or scan from a nostr app to share this profile.
   </div>