From 4e227fc07a9aa92f962aba9abe6b43d85f8f0dd1 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Tue, 26 Mar 2024 16:02:24 +0800
Subject: [PATCH 01/10] Added close icon to gifted prompts dialog

---
 src/components/GiftedPrompts.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/GiftedPrompts.vue b/src/components/GiftedPrompts.vue
index 8d6aeba67..798bbeece 100644
--- a/src/components/GiftedPrompts.vue
+++ b/src/components/GiftedPrompts.vue
@@ -1,7 +1,15 @@
 <template>
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
-      <h1 class="text-xl font-bold text-center mb-4">Here's one:</h1>
+      <h1 class="text-xl font-bold text-center mb-4 relative">
+        Here's one:
+        <div
+          class="text-lg text-center p-2 leading-none absolute right-0 -top-1"
+          @click="cancel"
+        >
+          <fa icon="xmark" class="w-[1em]"></fa>
+        </div>
+      </h1>
       <span class="flex justify-between">
         <span
           class="rounded-l border border-slate-400 bg-slate-200 px-4 py-2 flex"

From 0dab475d8b37add6f5eb4d62e0e650a3646e0c32 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Tue, 26 Mar 2024 16:54:43 +0800
Subject: [PATCH 02/10] Fixed map z-index

---
 src/views/NewEditProjectView.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/views/NewEditProjectView.vue b/src/views/NewEditProjectView.vue
index cab2b8756..b971c0aad 100644
--- a/src/views/NewEditProjectView.vue
+++ b/src/views/NewEditProjectView.vue
@@ -73,16 +73,17 @@
       />
       <label for="includeLocation">Include Location</label>
     </div>
-    <div v-if="includeLocation" style="height: 600px; width: 800px">
-      <div class="px-2 py-2">
+    <div v-if="includeLocation" class="mb-4 aspect-video">
+      <p class="text-sm mb-2 text-slate-500">
         For your security, choose a location nearby but not exactly at the
         place.
-      </div>
+      </p>
 
       <l-map
         ref="map"
         v-model:zoom="zoom"
         :center="[0, 0]"
+        class="!z-40 rounded-md"
         @click="
           (event) => {
             latitude = event.latlng.lat;

From e028197a2ac2e683254c4d6bdf4f60650716c1c2 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Tue, 26 Mar 2024 17:12:55 +0800
Subject: [PATCH 03/10] Optimized grid space for wider screens

---
 src/views/HomeView.vue        | 4 +++-
 src/views/ProjectViewView.vue | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 4edf0b99a..153de0604 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -118,7 +118,9 @@
           <h2 class="text-xl font-bold">Record Something Given By:</h2>
         </div>
 
-        <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
+        <ul
+          class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5"
+        >
           <li @click="openDialog()">
             <img
               src="../assets/blank-square.svg"
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index c7da06cc4..f6b09781a 100644
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -134,7 +134,9 @@
       <div class="text-center">
         <p class="mt-2 mb-4 text-center">Record a contribution from:</p>
       </div>
-      <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
+      <ul
+        class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5"
+      >
         <li @click="openGiftDialog({ name: 'you', did: activeDid })">
           <fa icon="hand" class="fa-fw text-slate-400 text-5xl" />
           <h3

From dce4d3cc721f92940548db9461a1884d24834d84 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Tue, 26 Mar 2024 19:55:16 +0800
Subject: [PATCH 04/10] Button width changes

For buttons that are next to each other
---
 src/components/GiftedDialog.vue        | 26 ++++++-----
 src/components/OfferDialog.vue         | 26 ++++++-----
 src/views/AccountViewView.vue          |  2 +-
 src/views/ConfirmContactView.vue       | 24 +++++-----
 src/views/ContactScanView.vue          | 24 +++++-----
 src/views/GiftedDetails.vue            | 26 ++++++-----
 src/views/HomeView.vue                 |  2 +-
 src/views/ImportAccountView.vue        | 28 +++++------
 src/views/ImportDerivedAccountView.vue | 28 +++++------
 src/views/NewEditAccountView.vue       | 32 +++++++------
 src/views/NewEditProjectView.vue       | 42 +++++++++--------
 src/views/StartView.vue                | 64 ++++++++++++++------------
 12 files changed, 173 insertions(+), 151 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 57cf34917..ec5a77bb1 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -65,18 +65,20 @@
           @click="explainData()"
         />
       </p>
-      <button
-        class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
-        @click="confirm"
-      >
-        Sign &amp; Send
-      </button>
-      <button
-        class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
-        @click="cancel"
-      >
-        Cancel
-      </button>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+        <button
+          class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
+          @click="confirm"
+        >
+          Sign &amp; Send
+        </button>
+        <button
+          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+          @click="cancel"
+        >
+          Cancel
+        </button>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/OfferDialog.vue b/src/components/OfferDialog.vue
index 20425cbd3..efbe7d789 100644
--- a/src/components/OfferDialog.vue
+++ b/src/components/OfferDialog.vue
@@ -50,18 +50,20 @@
       <p class="text-center mt-6 mb-2 italic">
         Sign & Send to publish to the world
       </p>
-      <button
-        class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
-        @click="confirm"
-      >
-        Sign &amp; Send
-      </button>
-      <button
-        class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
-        @click="cancel"
-      >
-        Cancel
-      </button>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+        <button
+          class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
+          @click="confirm"
+        >
+          Sign &amp; Send
+        </button>
+        <button
+          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+          @click="cancel"
+        >
+          Cancel
+        </button>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index b1dd6e6fc..1c2ccc503 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -503,7 +503,7 @@
         <button>
           <router-link
             :to="{ name: 'statistics' }"
-            class="block w-fit text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2"
+            class="block w-fit text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md mb-2"
           >
             See Global Animated History of Giving
           </router-link>
diff --git a/src/views/ConfirmContactView.vue b/src/views/ConfirmContactView.vue
index 1ef054624..4e15c5755 100644
--- a/src/views/ConfirmContactView.vue
+++ b/src/views/ConfirmContactView.vue
@@ -30,17 +30,19 @@
     </div>
 
     <div class="mt-8">
-      <input
-        type="submit"
-        class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
-        value="Add Contact"
-      />
-      <button
-        type="button"
-        class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
-      >
-        Cancel
-      </button>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+        <input
+          type="submit"
+          class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
+          value="Add Contact"
+        />
+        <button
+          type="button"
+          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+        >
+          Cancel
+        </button>
+      </div>
     </div>
   </section>
 </template>
diff --git a/src/views/ContactScanView.vue b/src/views/ContactScanView.vue
index 9ca3b0bf1..7a8a87d9a 100644
--- a/src/views/ContactScanView.vue
+++ b/src/views/ContactScanView.vue
@@ -65,17 +65,19 @@
     />
 
     <div class="mt-8">
-      <input
-        type="submit"
-        class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
-        value="Look Up Contact"
-      />
-      <button
-        type="button"
-        class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
-      >
-        Cancel
-      </button>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+        <input
+          type="submit"
+          class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
+          value="Look Up Contact"
+        />
+        <button
+          type="button"
+          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+        >
+          Cancel
+        </button>
+      </div>
     </div>
   </section>
 </template>
diff --git a/src/views/GiftedDetails.vue b/src/views/GiftedDetails.vue
index d2cb8f162..5b911aefe 100644
--- a/src/views/GiftedDetails.vue
+++ b/src/views/GiftedDetails.vue
@@ -98,18 +98,20 @@
         @click="explainData()"
       />
     </p>
-    <button
-      class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
-      @click="confirm"
-    >
-      Sign &amp; Send
-    </button>
-    <button
-      class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
-      @click="cancel"
-    >
-      Cancel
-    </button>
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+      <button
+        class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
+        @click="confirm"
+      >
+        Sign &amp; Send
+      </button>
+      <button
+        class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+        @click="cancel"
+      >
+        Cancel
+      </button>
+    </div>
   </section>
 </template>
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 153de0604..29a89a391 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -160,7 +160,7 @@
           </router-link>
           <button
             @click="openGiftedPrompts()"
-            class="block text-center text-md font-bold bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
+            class="block text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
           >
             Ideas...
           </button>
diff --git a/src/views/ImportAccountView.vue b/src/views/ImportAccountView.vue
index e3ffdf2da..e185c97a8 100644
--- a/src/views/ImportAccountView.vue
+++ b/src/views/ImportAccountView.vue
@@ -56,19 +56,21 @@
     </div>
 
     <div class="mt-8">
-      <button
-        @click="fromMnemonic()"
-        class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
-      >
-        Import
-      </button>
-      <button
-        @click="onCancelClick()"
-        type="button"
-        class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
-      >
-        Cancel
-      </button>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+        <button
+          @click="fromMnemonic()"
+          class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
+        >
+          Import
+        </button>
+        <button
+          @click="onCancelClick()"
+          type="button"
+          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+        >
+          Cancel
+        </button>
+      </div>
     </div>
   </section>
 </template>
diff --git a/src/views/ImportDerivedAccountView.vue b/src/views/ImportDerivedAccountView.vue
index 1505620e3..09dbb51c2 100644
--- a/src/views/ImportDerivedAccountView.vue
+++ b/src/views/ImportDerivedAccountView.vue
@@ -49,19 +49,21 @@
       </ul>
     </div>
     <div class="mt-8">
-      <button
-        @click="incrementDerivation()"
-        class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
-      >
-        Increment and Import
-      </button>
-      <button
-        @click="onCancelClick()"
-        type="button"
-        class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
-      >
-        Cancel
-      </button>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+        <button
+          @click="incrementDerivation()"
+          class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
+        >
+          Increment and Import
+        </button>
+        <button
+          @click="onCancelClick()"
+          type="button"
+          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+        >
+          Cancel
+        </button>
+      </div>
     </div>
   </section>
 </template>
diff --git a/src/views/NewEditAccountView.vue b/src/views/NewEditAccountView.vue
index a3f1435ea..cae8c7d68 100644
--- a/src/views/NewEditAccountView.vue
+++ b/src/views/NewEditAccountView.vue
@@ -22,21 +22,23 @@
     />
 
     <div class="mt-8">
-      <button
-        type="button"
-        class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
-        @click="onClickSaveChanges()"
-      >
-        Save Changes
-      </button>
-      <!-- SHOW ME instead while processing saving changes -->
-      <button
-        type="button"
-        class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
-        @click="onClickCancel()"
-      >
-        Cancel
-      </button>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+        <button
+          type="button"
+          class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
+          @click="onClickSaveChanges()"
+        >
+          Save Changes
+        </button>
+        <!-- SHOW ME instead while processing saving changes -->
+        <button
+          type="button"
+          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+          @click="onClickCancel()"
+        >
+          Cancel
+        </button>
+      </div>
     </div>
   </section>
 </template>
diff --git a/src/views/NewEditProjectView.vue b/src/views/NewEditProjectView.vue
index b971c0aad..b2392b222 100644
--- a/src/views/NewEditProjectView.vue
+++ b/src/views/NewEditProjectView.vue
@@ -105,28 +105,30 @@
     </div>
 
     <div class="mt-8">
-      <button
-        :disabled="isHiddenSave"
-        class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
-        @click="onSaveProjectClick()"
-      >
-        <!-- SHOW if in idle state -->
-        <span :class="{ hidden: isHiddenSave }">Save Project</span>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+        <button
+          :disabled="isHiddenSave"
+          class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
+          @click="onSaveProjectClick()"
+        >
+          <!-- SHOW if in idle state -->
+          <span :class="{ hidden: isHiddenSave }">Save Project</span>
 
-        <!-- SHOW if in saving state; DISABLE button while in saving state -->
-        <span :class="{ hidden: isHiddenSpinner }">
-          <!-- icon no worky? -->
-          <i class="fa-solid fa-spinner fa-spin-pulse"></i>
-          Saving...</span
+          <!-- SHOW if in saving state; DISABLE button while in saving state -->
+          <span :class="{ hidden: isHiddenSpinner }">
+            <!-- icon no worky? -->
+            <i class="fa-solid fa-spinner fa-spin-pulse"></i>
+            Saving...</span
+          >
+        </button>
+        <button
+          type="button"
+          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+          @click="onCancelClick()"
         >
-      </button>
-      <button
-        type="button"
-        class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
-        @click="onCancelClick()"
-      >
-        Cancel
-      </button>
+          Cancel
+        </button>
+      </div>
     </div>
   </section>
 </template>
diff --git a/src/views/StartView.vue b/src/views/StartView.vue
index e73256ff1..04558e378 100644
--- a/src/views/StartView.vue
+++ b/src/views/StartView.vue
@@ -23,36 +23,40 @@
 
     <!-- id used by puppeteer test script -->
     <div id="start-question" class="mt-8">
-      <p class="text-center text-xl font-light">
-        Do you want a new identifier of your own?
-      </p>
-      <p class="text-center font-light">
-        If you haven't used this before, click "Yes" to generate a new
-        identifier.
-      </p>
-      <p class="text-center mb-4 font-light">
-        Only click "No" if you have a seed of 12 or 24 words generated
-        elsewhere.
-      </p>
-      <a
-        @click="onClickYes()"
-        class="block w-full text-center text-lg uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
-      >
-        Yes, generate one
-      </a>
-      <a
-        @click="onClickNo()"
-        class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mt-2"
-      >
-        No, I have a seed
-      </a>
-      <a
-        v-if="numAccounts > 0"
-        @click="onClickDerive()"
-        class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mt-2"
-      >
-        Derive new address from existing seed
-      </a>
+      <div class="max-w-3xl mx-auto">
+        <p class="text-center text-xl font-light">
+          Do you want a new identifier of your own?
+        </p>
+        <p class="text-center font-light">
+          If you haven't used this before, click "Yes" to generate a new
+          identifier.
+        </p>
+        <p class="text-center mb-4 font-light">
+          Only click "No" if you have a seed of 12 or 24 words generated
+          elsewhere.
+        </p>
+        <a
+          @click="onClickYes()"
+          class="block w-full text-center text-lg uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
+        >
+          Yes, generate one
+        </a>
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          <a
+            @click="onClickNo()"
+            class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+          >
+            No, I have a seed
+          </a>
+          <a
+            v-if="numAccounts > 0"
+            @click="onClickDerive()"
+            class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+          >
+            Derive new address from existing seed
+          </a>
+        </div>
+      </div>
     </div>
   </section>
 </template>

From 55da3d0b1cdf7ce5c487a35e8eb39130a6b504e9 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Tue, 26 Mar 2024 21:38:21 +0800
Subject: [PATCH 05/10] Map fix #2

---
 src/views/SearchAreaView.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/SearchAreaView.vue b/src/views/SearchAreaView.vue
index 4b3a7501e..e4d4444de 100644
--- a/src/views/SearchAreaView.vue
+++ b/src/views/SearchAreaView.vue
@@ -64,10 +64,11 @@
       </div>
     </div>
 
-    <div style="height: 600px; width: 800px">
+    <div class="mb-4 aspect-video">
       <l-map
         ref="map"
         :center="[localCenterLat, localCenterLong]"
+        class="!z-40 rounded-md"
         v-model:zoom="localZoom"
         @click="setMapPoint"
       >

From 7692cc2b35238340f4f96a89831e18b2c54d047e Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Mon, 1 Apr 2024 19:04:54 -0600
Subject: [PATCH 06/10] add logic to send a time for notifications

---
 src/App.vue      | 106 ++++++++++++++++++++++++++++++++++++++++-------
 src/libs/util.ts |   6 ++-
 src/main.ts      |   4 ++
 3 files changed, 100 insertions(+), 16 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 63c3ebab7..d4f9aa0b6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -191,7 +191,7 @@
             >
               <div class="w-full px-6 py-6 text-slate-900 text-center">
                 <p v-if="serviceWorkerReady" class="text-lg mb-4">
-                  Would you like to <b>turn on</b> notifications for this app?
+                  Would you like to be notified of new activity once a day?
                 </p>
                 <p v-else class="text-lg mb-4">
                   Waiting for system initialization, which may take up to 10
@@ -199,22 +199,42 @@
                   <fa icon="spinner" spin />
                 </p>
 
-                <button
-                  v-if="serviceWorkerReady"
-                  class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
-                  @click="
-                    close(notification.id);
-                    turnOnNotifications();
-                  "
-                >
-                  Turn on Notifications
-                </button>
+                <div v-if="serviceWorkerReady">
+                  <span class="flex flex-row justify-center">
+                    <span class="mt-2">Yes, tell me at: </span>
+                    <input
+                      type="number"
+                      class="rounded-l border border-r-0 border-slate-400 ml-2 mt-2 px-2 py-2 text-center w-20"
+                      v-model="hourInput"
+                    />
+                    <span
+                      class="rounded-r border border-slate-400 bg-slate-200 text-center text-blue-500 mt-2 px-2 py-2 w-20"
+                      @click="hourAm = !hourAm"
+                    >
+                      <span v-if="hourAm"> AM <fa icon="chevron-down" /> </span>
+                      <span v-else> PM <fa icon="chevron-up" /> </span>
+                    </span>
+                  </span>
+                  <button
+                    class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white mt-2 px-2 py-2 rounded-md"
+                    @click="
+                      () => {
+                        if (checkHour()) {
+                          close(notification.id);
+                          turnOnNotifications();
+                        }
+                      }
+                    "
+                  >
+                    Turn on Daily Message
+                  </button>
+                </div>
 
                 <button
                   @click="close(notification.id)"
-                  class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
+                  class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white mt-4 px-2 py-2 rounded-md"
                 >
-                  Maybe Later
+                  No, Not Now
                 </button>
               </div>
             </div>
@@ -297,8 +317,11 @@
 <style></style>
 
 <script lang="ts">
-import { Vue, Component } from "vue-facing-decorator";
 import axios from "axios";
+import { Vue, Component } from "vue-facing-decorator";
+
+import * as libsUtil from "@/libs/util";
+
 interface ServiceWorkerMessage {
   type: string;
   data: string;
@@ -332,7 +355,9 @@ export default class App extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   b64 = "";
-  serviceWorkerReady = false;
+  hourAm = true;
+  hourInput = "8";
+  serviceWorkerReady = true;
 
   async mounted() {
     try {
@@ -461,6 +486,48 @@ export default class App extends Vue {
     });
   }
 
+  // this allows us to show an error without closing the dialog
+  checkHour() {
+    if (!libsUtil.isNumeric(this.hourInput)) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Not a Number",
+          text: "The time must be an hour number.",
+        },
+        5000,
+      );
+      return false;
+    }
+    const hourNum = libsUtil.numberOrZero(this.hourInput);
+    if (!Number.isInteger(hourNum)) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Not a Whole Number",
+          text: "The time must be a whole hour number.",
+        },
+        5000,
+      );
+      return false;
+    }
+    if (hourNum < 1 || hourNum > 12) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Not a Whole Number",
+          text: "The time must be an hour between 1 and 12.",
+        },
+        5000,
+      );
+      return false;
+    }
+    return true;
+  }
+
   public async turnOnNotifications() {
     return this.askPermission()
       .then((permission) => {
@@ -486,6 +553,15 @@ export default class App extends Vue {
                 },
                 -1,
               );
+              // we already checked that this is a valid hour number
+              const hourNum = libsUtil.numberOrZero(this.hourInput);
+              const utcHour =
+                hourNum + Math.round(new Date().getTimezoneOffset() / 60);
+
+              // This ignore commentary is because I'm adding non-standard stuff to the subscription object.
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              subscription.notifyTime = { utcHour: utcHour };
               this.sendSubscriptionToServer(subscription);
               return subscription;
             } else {
diff --git a/src/libs/util.ts b/src/libs/util.ts
index 1a613df8c..7c69b7830 100644
--- a/src/libs/util.ts
+++ b/src/libs/util.ts
@@ -56,9 +56,13 @@ export function iconForUnitCode(unitCode: string) {
 }
 
 // from https://stackoverflow.com/a/175787/845494
+// ... though it appears even this isn't precisely right so keep doing "|| 0" or something in sensitive places
 //
 export function isNumeric(str: string): boolean {
-  return !isNaN(+str);
+  // This ignore commentary is because typescript complains when you pass a string to isNaN.
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  return !isNaN(str) && !isNaN(parseFloat(str));
 }
 
 export function numberOrZero(str: string): number {
diff --git a/src/main.ts b/src/main.ts
index ebf431c2e..9d5c93516 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -20,8 +20,10 @@ import {
   faCalendar,
   faCamera,
   faCheck,
+  faChevronDown,
   faChevronLeft,
   faChevronRight,
+  faChevronUp,
   faCircle,
   faCircleCheck,
   faCircleInfo,
@@ -81,8 +83,10 @@ library.add(
   faCalendar,
   faCamera,
   faCheck,
+  faChevronDown,
   faChevronLeft,
   faChevronRight,
+  faChevronUp,
   faCircle,
   faCircleCheck,
   faCircleInfo,

From e4cf79b5583602645d8e6ffcf21d15a32c6baf57 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Mon, 1 Apr 2024 19:06:18 -0600
Subject: [PATCH 07/10] update tasks

---
 project.task.yaml | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/project.task.yaml b/project.task.yaml
index 5a8b1cce1..4d1dc378a 100644
--- a/project.task.yaml
+++ b/project.task.yaml
@@ -1,20 +1,24 @@
 
 tasks :
 
+- finish push server:
+  - get utcHour parameter working
+  - add back the explicit wait for browser subscription timing problems
+- 01 change scanning flow - allow them to stay on the QR/scanning screen after scanning someone
+
 - 24 contextual tutorials https://docs.google.com/document/d/11C_K3RM0rgo0onih20KFhcIzukZyq_CRWqaWX5om_kM/edit#heading=h.iwiwcydou5hw
 
-- 24 Move to Vite
+- 24 Move to Vite assignee:jason
 
+- .1 add shortcut from project (etc?) to the public project page in a browser
 - .1 add KindSpring link to ideas
 - .1 on feed, don't show "to someone anonymous" if it's to a project
-- .1 on ideas, put an "x" to close it assignee-group:ui
 - 16 save data backups in Google
 - 16 generate and use passkeys for identities
 - .5 show "give" buttons (eg. from anonymous) even if they can't give, greyed out, and give them a warning and instructions
 - .2 when adding a claim on home screen, push that claim to the top of the list
 
 - .2 fix give dialog from "more contacts" off home page to allow giving to this user
-- .2 fix bottom of project selection map, where the icons are hidden but a tap goes to the icon's page assignee-group:ui
 - .5 stop from seeing an error on the first page when browser doesn't support service workers (which I've seen on iPhone; visible in Firefox private window)
 - .2 don't show a warning on a totally new project when the authorized agent is set
 - .2 anchor hash into BTC
@@ -24,8 +28,9 @@ tasks :
 
 - 08 add image on profile
 
-- ask to detect location & record it in settings
-- if personal location is set, show potential local affiliations
+- 01 ask to detect location & record it in settings
+- 01 if personal location is set, show potential local affiliations
+- 02 refactor the buttons for chosing a search location so that the actions are clear assignee-group:ui
 
 - 24 compelling UI for credential presentations
   - discover who in my network has activity on a project
@@ -94,7 +99,7 @@ tasks :
 - .3 check that Android shows "back" buttons on screens without bottom tray
 - .1 Make give description text box into something that expands as they type?
 - .2 Show a warning if both giver and recipient are the same (but still allow?)
-- 01 Would it look better to shrink the buttons on many pages so they don't expand to the width of the screen? assignee-group:ui
+- .5 Shrink the buttons on project pages so they don't expand to the width of the screen assignee-group:ui
 - .5 Display a more appealing confirmation on the map when erasing the marker
 - .5 remove references to localStorage for projectId (now that it's pulling from the path)
 - switch some checks for activeDid to check for isRegistered
@@ -142,7 +147,6 @@ tasks :
     - for subtasks: fulfills (is it really the same?), feeds, contributes to, supplies, boosts, advances
     - for blocking: blocks, precedes, comes before, is sought by -- vs follows, seeks, builds on ("contributes to" isn't specific enough, "succeeds" has different, possibly confusing meaning)
 
-- .5 fit as many icons as possible on home & project view screens but only going halfway down the page assignee-group:ui
 - .5 Replace Gifted/Give in ContactsView with GiftedDialog
 
 - Stats :

From 121181c6a1c110d2c3b31ca71bc4398e50f10323 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Tue, 2 Apr 2024 18:38:44 -0600
Subject: [PATCH 08/10] add adjustment to UTC hour for notification time

---
 src/App.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d4f9aa0b6..e133ab1d4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -513,7 +513,7 @@ export default class App extends Vue {
       );
       return false;
     }
-    if (hourNum < 1 || hourNum > 12) {
+    if (hourNum < 1 || 12 < hourNum) {
       this.$notify(
         {
           group: "alert",
@@ -554,15 +554,21 @@ export default class App extends Vue {
                 -1,
               );
               // we already checked that this is a valid hour number
-              const hourNum = libsUtil.numberOrZero(this.hourInput);
+              const rawHourNum = libsUtil.numberOrZero(this.hourInput);
+              const adjHourNum = rawHourNum + (this.hourAm ? 0 : 12);
+              const hourNum = adjHourNum % 24;
               const utcHour =
                 hourNum + Math.round(new Date().getTimezoneOffset() / 60);
+              const finalUtcHour = (utcHour + (utcHour < 0 ? 24 : 0)) % 24;
 
               // This ignore commentary is because I'm adding non-standard stuff to the subscription object.
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment
               // @ts-ignore
-              subscription.notifyTime = { utcHour: utcHour };
-              this.sendSubscriptionToServer(subscription);
+              const subscriptionWithTime = {
+                notifyTime: { utcHour: finalUtcHour },
+                ...subscription,
+              };
+              this.sendSubscriptionToServer(subscriptionWithTime);
               return subscription;
             } else {
               throw new Error("Subscription object is not available.");

From 2ca33bb9ebed50205caecb809b497420daadf3a8 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Tue, 2 Apr 2024 19:18:31 -0600
Subject: [PATCH 09/10] adjust the notification-subscription objects to try and
 send correct info

---
 src/App.vue      | 17 +++++++++--------
 src/libs/util.ts | 14 ++++++++++++--
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e133ab1d4..3d273212e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -345,6 +345,10 @@ interface VapidResponse {
   };
 }
 
+interface PushSubscriptionWithTime extends PushSubscriptionJSON {
+  notifyTime: { utcHour: number };
+}
+
 import { DEFAULT_PUSH_SERVER, NotificationIface } from "@/constants/app";
 import { db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
@@ -561,15 +565,12 @@ export default class App extends Vue {
                 hourNum + Math.round(new Date().getTimezoneOffset() / 60);
               const finalUtcHour = (utcHour + (utcHour < 0 ? 24 : 0)) % 24;
 
-              // This ignore commentary is because I'm adding non-standard stuff to the subscription object.
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
-              const subscriptionWithTime = {
+              const subscriptionWithTime: PushSubscriptionWithTime = {
                 notifyTime: { utcHour: finalUtcHour },
-                ...subscription,
+                ...subscription.toJSON(),
               };
-              this.sendSubscriptionToServer(subscriptionWithTime);
-              return subscription;
+              await this.sendSubscriptionToServer(subscriptionWithTime);
+              return subscriptionWithTime;
             } else {
               throw new Error("Subscription object is not available.");
             }
@@ -665,7 +666,7 @@ export default class App extends Vue {
   }
 
   private sendSubscriptionToServer(
-    subscription: PushSubscription,
+    subscription: PushSubscriptionWithTime,
   ): Promise<void> {
     console.log("About to send subscription...", subscription);
     return fetch("/web-push/subscribe", {
diff --git a/src/libs/util.ts b/src/libs/util.ts
index 7c69b7830..8a25ff681 100644
--- a/src/libs/util.ts
+++ b/src/libs/util.ts
@@ -13,7 +13,7 @@ import { GenericServerRecord, containsHiddenDid } from "@/libs/endorserServer";
 import * as serverUtil from "@/libs/endorserServer";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const Buffer = require("buffer/").Buffer;
+//const Buffer = require("buffer/").Buffer;
 
 export const PRIVACY_MESSAGE =
   "The data you send be visible to the world -- except: your IDs and the IDs of anyone you tag will stay private, only visible to those you allow.";
@@ -241,7 +241,7 @@ export const generateSaveAndActivateIdentity = async (): Promise<string> => {
 };
 
 export const sendTestThroughPushServer = async (
-  subscription: PushSubscription,
+  subscription: PushSubscriptionJSON,
   skipFilter: boolean,
 ): Promise<AxiosResponse> => {
   await db.open();
@@ -256,6 +256,8 @@ export const sendTestThroughPushServer = async (
   // Use something other than "Daily Update" https://gitea.anomalistdesign.com/trent_larson/py-push-server/src/commit/3c0e196c11bc98060ec5934e99e7dbd591b5da4d/app.py#L213
   const DIRECT_PUSH_TITLE = "DIRECT_NOTIFICATION";
 
+  /** remove if the PushSubscriptionJSON approach works
+   *
   const auth = Buffer.from(subscription.getKey("auth"));
   const authB64 = auth
     .toString("base64")
@@ -278,6 +280,14 @@ export const sendTestThroughPushServer = async (
       skipFilter ? "un" : ""
     }filtered.`,
     title: skipFilter ? DIRECT_PUSH_TITLE : "Your Web Push",
+  };
+   *
+   **/
+  const newPayload = {
+    // eslint-disable-next-line prettier/prettier
+    message: `Test, where you will see this message ${ skipFilter ? "un" : "" }filtered.`,
+    title: skipFilter ? DIRECT_PUSH_TITLE : "Your Web Push",
+    ...subscription,
   };
   console.log("Sending a test web push message:", newPayload);
   const payloadStr = JSON.stringify(newPayload);

From 489bb76a60aa58031958994e7dde2001a47e510a Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Tue, 2 Apr 2024 19:32:41 -0600
Subject: [PATCH 10/10] adjust more code to the PushSubscriptionJSON

---
 src/App.vue                         |  2 +-
 src/libs/util.ts                    | 34 ++---------------------------
 src/views/HelpNotificationsView.vue | 13 ++++++-----
 3 files changed, 10 insertions(+), 39 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3d273212e..ad5af339b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -575,7 +575,7 @@ export default class App extends Vue {
               throw new Error("Subscription object is not available.");
             }
           })
-          .then(async (subscription) => {
+          .then(async (subscription: PushSubscriptionWithTime) => {
             console.log(
               "Subscription data sent to server and all finished successfully.",
             );
diff --git a/src/libs/util.ts b/src/libs/util.ts
index 8a25ff681..58b329c1f 100644
--- a/src/libs/util.ts
+++ b/src/libs/util.ts
@@ -12,9 +12,6 @@ import { deriveAddress, generateSeed, newIdentifier } from "@/libs/crypto";
 import { GenericServerRecord, containsHiddenDid } from "@/libs/endorserServer";
 import * as serverUtil from "@/libs/endorserServer";
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-//const Buffer = require("buffer/").Buffer;
-
 export const PRIVACY_MESSAGE =
   "The data you send be visible to the world -- except: your IDs and the IDs of anyone you tag will stay private, only visible to those you allow.";
 
@@ -241,7 +238,7 @@ export const generateSaveAndActivateIdentity = async (): Promise<string> => {
 };
 
 export const sendTestThroughPushServer = async (
-  subscription: PushSubscriptionJSON,
+  subscriptionJSON: PushSubscriptionJSON,
   skipFilter: boolean,
 ): Promise<AxiosResponse> => {
   await db.open();
@@ -256,38 +253,11 @@ export const sendTestThroughPushServer = async (
   // Use something other than "Daily Update" https://gitea.anomalistdesign.com/trent_larson/py-push-server/src/commit/3c0e196c11bc98060ec5934e99e7dbd591b5da4d/app.py#L213
   const DIRECT_PUSH_TITLE = "DIRECT_NOTIFICATION";
 
-  /** remove if the PushSubscriptionJSON approach works
-   *
-  const auth = Buffer.from(subscription.getKey("auth"));
-  const authB64 = auth
-    .toString("base64")
-    .replace(/\+/g, "-")
-    .replace(/\//g, "_")
-    .replace(/=+$/, "");
-  const p256dh = Buffer.from(subscription.getKey("p256dh"));
-  const p256dhB64 = p256dh
-    .toString("base64")
-    .replace(/\+/g, "-")
-    .replace(/\//g, "_")
-    .replace(/=+$/, "");
-  const newPayload = {
-    endpoint: subscription.endpoint,
-    keys: {
-      auth: authB64,
-      p256dh: p256dhB64,
-    },
-    message: `Test, where you will see this message ${
-      skipFilter ? "un" : ""
-    }filtered.`,
-    title: skipFilter ? DIRECT_PUSH_TITLE : "Your Web Push",
-  };
-   *
-   **/
   const newPayload = {
     // eslint-disable-next-line prettier/prettier
     message: `Test, where you will see this message ${ skipFilter ? "un" : "" }filtered.`,
     title: skipFilter ? DIRECT_PUSH_TITLE : "Your Web Push",
-    ...subscription,
+    ...subscriptionJSON,
   };
   console.log("Sending a test web push message:", newPayload);
   const payloadStr = JSON.stringify(newPayload);
diff --git a/src/views/HelpNotificationsView.vue b/src/views/HelpNotificationsView.vue
index 3314dc2c6..313e88b6a 100644
--- a/src/views/HelpNotificationsView.vue
+++ b/src/views/HelpNotificationsView.vue
@@ -301,12 +301,13 @@ import { sendTestThroughPushServer } from "@/libs/util";
 export default class HelpNotificationsView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
-  subscription: PushSubscription | null = null;
+  subscriptionJSON?: PushSubscriptionJSON;
 
   async mounted() {
     try {
       const registration = await navigator.serviceWorker.ready;
-      this.subscription = await registration.pushManager.getSubscription();
+      const fullSub = await registration.pushManager.getSubscription();
+      this.subscriptionJSON = fullSub?.toJSON();
     } catch (error) {
       console.error("Mount error:", error);
     }
@@ -315,13 +316,13 @@ export default class HelpNotificationsView extends Vue {
   alertWebPushSubscription() {
     console.log(
       "Web push subscription:",
-      JSON.parse(JSON.stringify(this.subscription)), // gives more info than plain console logging
+      JSON.parse(JSON.stringify(this.subscriptionJSON)), // gives more info than plain console logging
     );
-    alert(JSON.stringify(this.subscription));
+    alert(JSON.stringify(this.subscriptionJSON));
   }
 
   async sendTestWebPushMessage(skipFilter: boolean = false) {
-    if (!this.subscription) {
+    if (!this.subscriptionJSON) {
       this.$notify(
         {
           group: "alert",
@@ -336,7 +337,7 @@ export default class HelpNotificationsView extends Vue {
     }
 
     try {
-      await sendTestThroughPushServer(this.subscription, skipFilter);
+      await sendTestThroughPushServer(this.subscriptionJSON, skipFilter);
 
       this.$notify(
         {