From 2fba7a8c77b189aea087931d69fd021190002e9d Mon Sep 17 00:00:00 2001
From: Jonathan Staab <shtaab@gmail.com>
Date: Fri, 3 Mar 2023 17:24:22 -0600
Subject: [PATCH] Clean up QR Codes

---
 ROADMAP.md                                    |  1 +
 src/App.svelte                                | 64 +++++++++----------
 src/partials/QRCode.svelte                    | 27 ++++++++
 src/{views/alerts => routes}/Alerts.svelte    |  0
 src/{views => routes}/Bech32Entity.svelte     |  2 +-
 src/{views/chat => routes}/ChatDetail.svelte  |  0
 src/{views/chat => routes}/ChatList.svelte    |  0
 src/{views => routes}/Debug.svelte            |  0
 .../NotesList.svelte => routes/Feeds.svelte}  |  0
 src/{views => routes}/Keys.svelte             |  0
 src/{views/login => routes}/Login.svelte      |  0
 src/{views/login => routes}/Logout.svelte     |  0
 .../messages => routes}/MessagesDetail.svelte |  0
 .../messages => routes}/MessagesList.svelte   |  0
 src/{views => routes}/NotFound.svelte         |  0
 .../person => routes}/PersonDetail.svelte     |  0
 .../relays => routes}/RelayDetail.svelte      |  0
 src/{views/relays => routes}/RelayList.svelte |  0
 src/{views/search => routes}/Search.svelte    |  0
 src/views/notes/Note.svelte                   | 16 ++---
 src/views/person/PersonShare.svelte           | 20 +-----
 21 files changed, 67 insertions(+), 63 deletions(-)
 create mode 100644 src/partials/QRCode.svelte
 rename src/{views/alerts => routes}/Alerts.svelte (100%)
 rename src/{views => routes}/Bech32Entity.svelte (94%)
 rename src/{views/chat => routes}/ChatDetail.svelte (100%)
 rename src/{views/chat => routes}/ChatList.svelte (100%)
 rename src/{views => routes}/Debug.svelte (100%)
 rename src/{views/notes/NotesList.svelte => routes/Feeds.svelte} (100%)
 rename src/{views => routes}/Keys.svelte (100%)
 rename src/{views/login => routes}/Login.svelte (100%)
 rename src/{views/login => routes}/Logout.svelte (100%)
 rename src/{views/messages => routes}/MessagesDetail.svelte (100%)
 rename src/{views/messages => routes}/MessagesList.svelte (100%)
 rename src/{views => routes}/NotFound.svelte (100%)
 rename src/{views/person => routes}/PersonDetail.svelte (100%)
 rename src/{views/relays => routes}/RelayDetail.svelte (100%)
 rename src/{views/relays => routes}/RelayList.svelte (100%)
 rename src/{views/search => routes}/Search.svelte (100%)

diff --git a/ROADMAP.md b/ROADMAP.md
index a2f3679b..42b32022 100644
--- a/ROADMAP.md
+++ b/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
 
diff --git a/src/App.svelte b/src/App.svelte
index a62bf2b4..869fccb6 100644
--- a/src/App.svelte
+++ b/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>
diff --git a/src/partials/QRCode.svelte b/src/partials/QRCode.svelte
new file mode 100644
index 00000000..b637cc38
--- /dev/null
+++ b/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>
diff --git a/src/views/alerts/Alerts.svelte b/src/routes/Alerts.svelte
similarity index 100%
rename from src/views/alerts/Alerts.svelte
rename to src/routes/Alerts.svelte
diff --git a/src/views/Bech32Entity.svelte b/src/routes/Bech32Entity.svelte
similarity index 94%
rename from src/views/Bech32Entity.svelte
rename to src/routes/Bech32Entity.svelte
index a49c27b4..d23c6f95 100644
--- a/src/views/Bech32Entity.svelte
+++ b/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
diff --git a/src/views/chat/ChatDetail.svelte b/src/routes/ChatDetail.svelte
similarity index 100%
rename from src/views/chat/ChatDetail.svelte
rename to src/routes/ChatDetail.svelte
diff --git a/src/views/chat/ChatList.svelte b/src/routes/ChatList.svelte
similarity index 100%
rename from src/views/chat/ChatList.svelte
rename to src/routes/ChatList.svelte
diff --git a/src/views/Debug.svelte b/src/routes/Debug.svelte
similarity index 100%
rename from src/views/Debug.svelte
rename to src/routes/Debug.svelte
diff --git a/src/views/notes/NotesList.svelte b/src/routes/Feeds.svelte
similarity index 100%
rename from src/views/notes/NotesList.svelte
rename to src/routes/Feeds.svelte
diff --git a/src/views/Keys.svelte b/src/routes/Keys.svelte
similarity index 100%
rename from src/views/Keys.svelte
rename to src/routes/Keys.svelte
diff --git a/src/views/login/Login.svelte b/src/routes/Login.svelte
similarity index 100%
rename from src/views/login/Login.svelte
rename to src/routes/Login.svelte
diff --git a/src/views/login/Logout.svelte b/src/routes/Logout.svelte
similarity index 100%
rename from src/views/login/Logout.svelte
rename to src/routes/Logout.svelte
diff --git a/src/views/messages/MessagesDetail.svelte b/src/routes/MessagesDetail.svelte
similarity index 100%
rename from src/views/messages/MessagesDetail.svelte
rename to src/routes/MessagesDetail.svelte
diff --git a/src/views/messages/MessagesList.svelte b/src/routes/MessagesList.svelte
similarity index 100%
rename from src/views/messages/MessagesList.svelte
rename to src/routes/MessagesList.svelte
diff --git a/src/views/NotFound.svelte b/src/routes/NotFound.svelte
similarity index 100%
rename from src/views/NotFound.svelte
rename to src/routes/NotFound.svelte
diff --git a/src/views/person/PersonDetail.svelte b/src/routes/PersonDetail.svelte
similarity index 100%
rename from src/views/person/PersonDetail.svelte
rename to src/routes/PersonDetail.svelte
diff --git a/src/views/relays/RelayDetail.svelte b/src/routes/RelayDetail.svelte
similarity index 100%
rename from src/views/relays/RelayDetail.svelte
rename to src/routes/RelayDetail.svelte
diff --git a/src/views/relays/RelayList.svelte b/src/routes/RelayList.svelte
similarity index 100%
rename from src/views/relays/RelayList.svelte
rename to src/routes/RelayList.svelte
diff --git a/src/views/search/Search.svelte b/src/routes/Search.svelte
similarity index 100%
rename from src/views/search/Search.svelte
rename to src/routes/Search.svelte
diff --git a/src/views/notes/Note.svelte b/src/views/notes/Note.svelte
index 7e0f5cc3..910d7980 100644
--- a/src/views/notes/Note.svelte
+++ b/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>
diff --git a/src/views/person/PersonShare.svelte b/src/views/person/PersonShare.svelte
index 1209192a..cc8ef0c7 100644
--- a/src/views/person/PersonShare.svelte
+++ b/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>