From 0dbc018c8d4bfb7d2fd98e19d5c1915ffd26600f Mon Sep 17 00:00:00 2001
From: Matthew Aaron Raymer <matthew.raymer@anomalistdesign.com>
Date: Sat, 13 May 2023 11:19:53 +0800
Subject: [PATCH 1/4] A bit of infinity and hack for copy message

---
 src/components/InfiniteScroll.vue | 42 +++++++++++++++++
 src/views/AccountViewView.vue     | 75 ++++++++++++++++++++++++++++---
 2 files changed, 112 insertions(+), 5 deletions(-)
 create mode 100644 src/components/InfiniteScroll.vue

diff --git a/src/components/InfiniteScroll.vue b/src/components/InfiniteScroll.vue
new file mode 100644
index 00000000..2afdb9ec
--- /dev/null
+++ b/src/components/InfiniteScroll.vue
@@ -0,0 +1,42 @@
+<template>
+  <div ref="scrollContainer">
+    <slot />
+    <div ref="sentinel" style="height: 1px"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Emit, Prop, Vue } from "vue-facing-decorator";
+
+@Component
+export default class InfiniteScroll extends Vue {
+  @Prop({ default: 100 })
+  readonly distance!: number;
+  private observer!: IntersectionObserver;
+
+  mounted() {
+    const options = {
+      root: this.$refs.scrollContainer as HTMLElement,
+      rootMargin: `0px 0px ${this.distance}px 0px`,
+      threshold: 1.0,
+    };
+    this.observer = new IntersectionObserver(this.handleIntersection, options);
+    this.observer.observe(this.$refs.sentinel as HTMLElement);
+  }
+
+  beforeUnmount() {
+    this.observer.disconnect();
+  }
+  @Emit("reached-bottom")
+  handleIntersection(entries: IntersectionObserverEntry[]) {
+    const entry = entries[0];
+    if (entry.isIntersecting) {
+      return true;
+    }
+    return false;
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped></style>
diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index f9cce60e..6f63eb33 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -89,7 +89,16 @@
       <div class="text-slate-500 text-sm font-bold">ID</div>
       <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
         <code class="truncate">{{ activeDid }}</code>
-        <button @click="copy(activeDid)" class="ml-2">
+        <button
+          @click="
+            copyText($event, activeDid, 'did');
+            did = !did;
+            st(function () {
+              did = !did;
+            });
+          "
+          class="ml-2"
+        >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
         <span class="whitespace-nowrap ml-4">
@@ -104,30 +113,52 @@
             <fa icon="qrcode" class="fa-fw"></fa>
           </button>
         </span>
+        <span v-show="did">Copied!</span>
       </div>
 
       <div class="text-slate-500 text-sm font-bold">Public Key (base 64)</div>
       <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
         <code class="truncate">{{ publicBase64 }}</code>
-        <button @click="copy(publicBase64)" class="ml-2">
+        <button
+          @click="
+            copyText($event, publicBase64, 'base64');
+            base64 = !base64;
+          "
+          class="ml-2"
+        >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
+        <span v-show="base64">Copied!</span>
       </div>
 
       <div class="text-slate-500 text-sm font-bold">Public Key (hex)</div>
       <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
         <code class="truncate">{{ publicHex }}</code>
-        <button @click="copy(publicHex)" class="ml-2">
+        <button
+          @click="
+            copyText($event, publicHex, 'pubhex');
+            pubhex = !pubhex;
+          "
+          class="ml-2"
+        >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
+        <span v-show="pubhex">Copied!</span>
       </div>
 
       <div class="text-slate-500 text-sm font-bold">Derivation Path</div>
       <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
         <code class="truncate">{{ derivationPath }}</code>
-        <button @click="copy(derivationPath)" class="ml-2">
+        <button
+          @click="
+            copyText($event, derivationPath, 'derpath');
+            derpath = !derpath;
+          "
+          class="ml-2"
+        >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
+        <span v-show="derpath">Copied!</span>
       </div>
     </div>
 
@@ -288,7 +319,38 @@ export default class AccountViewView extends Vue {
   limits: RateLimits | null = null;
   showContactGives = false;
 
+  did = false;
+  derpath = false;
+  base64 = false;
+  pubhex = false;
+
   copy = useClipboard().copy;
+  text = useClipboard().text;
+
+  showCopyMessage() {
+    this.did = true;
+  }
+
+  st(f) {
+    setTimeout(f, 10000);
+  }
+
+  copyText = (e: MouseEvent, inputText: string, loc: string) => {
+    console.log(this);
+    console.log(e, inputText);
+    this.copy(inputText).then(() => {
+      if (loc == "did") {
+        this.showCopyMessage();
+        console.log(this);
+      } else if (loc == "derpath") {
+        this.derpath = true;
+      } else if (loc == "base64") {
+        this.base64 = true;
+      } else if (loc == "pubhex") {
+        this.pubhex = true;
+      }
+    });
+  };
 
   handleChange() {
     this.showContactGives = !this.showContactGives;
@@ -299,6 +361,9 @@ export default class AccountViewView extends Vue {
     return timeStr.substring(0, timeStr.indexOf("T"));
   }
 
+  mounted() {
+    console.log("Mounted", this);
+  }
   // 'created' hook runs when the Vue instance is first created
   async created() {
     // Uncomment to register this user on the test server.
@@ -306,7 +371,7 @@ export default class AccountViewView extends Vue {
     // assign this to a class variable, eg. "registerThisUser = testServerRegisterUser",
     // select a component in the extension, and enter in the console: $vm.ctx.registerThisUser()
     //testServerRegisterUser();
-
+    console.log("created", this);
     try {
       await db.open();
       const settings = await db.settings.get(MASTER_SETTINGS_KEY);

From 44ed39b5c1700ca66b2e3d50e5d699b15ffcf543 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Fri, 12 May 2023 21:40:10 -0600
Subject: [PATCH 2/4] eliminate extra code for quick-message-display

---
 src/views/AccountViewView.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 6f63eb33..b448d412 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -151,8 +151,12 @@
         <code class="truncate">{{ derivationPath }}</code>
         <button
           @click="
-            copyText($event, derivationPath, 'derpath');
-            derpath = !derpath;
+            derpath = true;
+            copy(derivationPath).then(() => {
+              st(function () {
+                derpath = !derpath;
+              });
+            });
           "
           class="ml-2"
         >
@@ -332,7 +336,7 @@ export default class AccountViewView extends Vue {
   }
 
   st(f) {
-    setTimeout(f, 10000);
+    setTimeout(f, 2000);
   }
 
   copyText = (e: MouseEvent, inputText: string, loc: string) => {
@@ -342,8 +346,6 @@ export default class AccountViewView extends Vue {
       if (loc == "did") {
         this.showCopyMessage();
         console.log(this);
-      } else if (loc == "derpath") {
-        this.derpath = true;
       } else if (loc == "base64") {
         this.base64 = true;
       } else if (loc == "pubhex") {

From d7d53a5b8c29c8f61317d7a8df5a046551fec8fc Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Sun, 14 May 2023 20:38:27 -0600
Subject: [PATCH 3/4] refactor & shorten the 'copied' message display logic

---
 src/views/AccountViewView.vue | 67 ++++++++++-------------------------
 1 file changed, 19 insertions(+), 48 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index b448d412..b128074d 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -91,16 +91,13 @@
         <code class="truncate">{{ activeDid }}</code>
         <button
           @click="
-            copyText($event, activeDid, 'did');
-            did = !did;
-            st(function () {
-              did = !did;
-            });
+            doCopyTwoSecRedo(activeDid, () => (showDidCopy = !showDidCopy))
           "
           class="ml-2"
         >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
+        <span v-show="showDidCopy">Copied!</span>
         <span class="whitespace-nowrap ml-4">
           <button
             class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md"
@@ -113,7 +110,6 @@
             <fa icon="qrcode" class="fa-fw"></fa>
           </button>
         </span>
-        <span v-show="did">Copied!</span>
       </div>
 
       <div class="text-slate-500 text-sm font-bold">Public Key (base 64)</div>
@@ -121,14 +117,13 @@
         <code class="truncate">{{ publicBase64 }}</code>
         <button
           @click="
-            copyText($event, publicBase64, 'base64');
-            base64 = !base64;
+            doCopyTwoSecRedo(publicBase64, () => (showB64Copy = !showB64Copy))
           "
           class="ml-2"
         >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
-        <span v-show="base64">Copied!</span>
+        <span v-show="showB64Copy">Copied!</span>
       </div>
 
       <div class="text-slate-500 text-sm font-bold">Public Key (hex)</div>
@@ -136,14 +131,13 @@
         <code class="truncate">{{ publicHex }}</code>
         <button
           @click="
-            copyText($event, publicHex, 'pubhex');
-            pubhex = !pubhex;
+            doCopyTwoSecRedo(publicHex, () => (showPubCopy = !showPubCopy))
           "
           class="ml-2"
         >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
-        <span v-show="pubhex">Copied!</span>
+        <span v-show="showPubCopy">Copied!</span>
       </div>
 
       <div class="text-slate-500 text-sm font-bold">Derivation Path</div>
@@ -151,18 +145,13 @@
         <code class="truncate">{{ derivationPath }}</code>
         <button
           @click="
-            derpath = true;
-            copy(derivationPath).then(() => {
-              st(function () {
-                derpath = !derpath;
-              });
-            });
+            doCopyTwoSecRedo(derivationPath, () => (showDerCopy = !showDerCopy))
           "
           class="ml-2"
         >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
-        <span v-show="derpath">Copied!</span>
+        <span v-show="showDerCopy">Copied!</span>
       </div>
     </div>
 
@@ -323,37 +312,19 @@ export default class AccountViewView extends Vue {
   limits: RateLimits | null = null;
   showContactGives = false;
 
-  did = false;
-  derpath = false;
-  base64 = false;
-  pubhex = false;
-
-  copy = useClipboard().copy;
-  text = useClipboard().text;
-
-  showCopyMessage() {
-    this.did = true;
-  }
-
-  st(f) {
-    setTimeout(f, 2000);
+  showDidCopy = false;
+  showDerCopy = false;
+  showB64Copy = false;
+  showPubCopy = false;
+
+  // call fn, copy text to the clipboard, then redo fn after 2 seconds
+  doCopyTwoSecRedo(text, fn) {
+    fn();
+    useClipboard()
+      .copy(text)
+      .then(() => setTimeout(fn, 2000));
   }
 
-  copyText = (e: MouseEvent, inputText: string, loc: string) => {
-    console.log(this);
-    console.log(e, inputText);
-    this.copy(inputText).then(() => {
-      if (loc == "did") {
-        this.showCopyMessage();
-        console.log(this);
-      } else if (loc == "base64") {
-        this.base64 = true;
-      } else if (loc == "pubhex") {
-        this.pubhex = true;
-      }
-    });
-  };
-
   handleChange() {
     this.showContactGives = !this.showContactGives;
     this.updateShowContactAmounts();

From e4f3f9b2e010ce0e8c535cf529765f662d4eee59 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Mon, 15 May 2023 16:45:22 -0600
Subject: [PATCH 4/4] remove extra logging

---
 src/views/AccountViewView.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index b128074d..9a9f87ef 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -334,9 +334,6 @@ export default class AccountViewView extends Vue {
     return timeStr.substring(0, timeStr.indexOf("T"));
   }
 
-  mounted() {
-    console.log("Mounted", this);
-  }
   // 'created' hook runs when the Vue instance is first created
   async created() {
     // Uncomment to register this user on the test server.
@@ -344,7 +341,6 @@ export default class AccountViewView extends Vue {
     // assign this to a class variable, eg. "registerThisUser = testServerRegisterUser",
     // select a component in the extension, and enter in the console: $vm.ctx.registerThisUser()
     //testServerRegisterUser();
-    console.log("created", this);
     try {
       await db.open();
       const settings = await db.settings.get(MASTER_SETTINGS_KEY);