add infinite scroll to the home page feed

Reviewed-on: trent_larson/crowd-funder-for-time-pwa#96

CHANGELOG.md

@@ -8,8 +8,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+
+## [0.1.6]
+
+
+## [0.1.5] - 2023.12.09 - 9c36bb509a9bae9bb3306d3bd9eeb144b67aa8ad
 ### Added
-- Web push notifications
+- Web push notifications (though not finalized)
+- Credentials details page
+- See more data without an ID
+- Change units of a give
+
+
+## [0.1.4] - 2023.11.20 - 7311d36726f3667ec4c68f241f91d404273ad4db
+### Added
+- Offer on a project
+### Changed
+- Automatically set as visible when importing a contact
+
 
 ## [0.1.3] - 2023.11.08 - 910f57ec7d2e50803ae3d04f4b927e0f5219fbde
 ### Added

README.md

@@ -22,16 +22,23 @@ npm run lint
 
 If you are deploying in a subdirectory, add it to `publicPath` in vue.config.js, eg: `publicPath: "/app/time-tracker/",`
 
-```
+* `npx prettier --write ./sw_scripts/`
-npm run build
-```
 
-```
+...to make sure the service worker scripts are in proper form
-npx prettier --write ./sw_scripts/
-```
-to make sure the service worker scripts are in proper form
 
-... then copy the contents of the `sw_scripts` folder to the `dist` folder - except additional_scripts.js.
+* Update the CHANGELOG.md & the version in package.json, run `npm install`, and commit. Tag wth the new version: `git tag 0.1.0`
+
+* If production, change src/constants/app.ts DEFAULT_*_SERVER to be PROD.
+
+* `npm run build`
+
+* Revert src/constants/app.ts & change version to "-beta"
+
+* `cp sw_scripts/[ns]* dist/`
+
+... to copy the contents of the `sw_scripts` folder to the `dist` folder - except additional_scripts.js.
+
+* `rsync -azvu -e "ssh -i ~/.ssh/..." dist ubuntu@endorser.ch:time-safari`
 
 
 
@@ -103,9 +110,9 @@ To add an icon, add to main.ts and reference with `fa` element and `icon` attrib
 
 ### Clear/Reset data & restart
 
-* Clear cache for site. (In Chrome, go to `chrome://settings/cookies` and "all site data and permissions"; in Firefox, go to `about:preferences` and search for cache.)
+* Clear cache for site. (In Chrome, go to `chrome://settings/cookies` and "all site data and permissions"; in Firefox, go to `about:preferences` and search for "cache" then "Manage Data".)
-* Unregister service worker (in Chrome, go to `chrome://serviceworker-internals/`; in Firefox, go to `about:serviceworkers` or `about:debugging`).
+* Unregister service worker (in Chrome, go to `chrome://serviceworker-internals/`; in Firefox, go to `about:serviceworkers`).
-* Clear notification permission (in Chrome, go to `chrome://settings/content/notifications`; in Firefox, go to `about:preferences` and search).
+* Clear notification permission (in Chrome, go to `chrome://settings/content/notifications`; in Firefox, go to `about:preferences` and search for "notifications").
 * Clear Cache Storage (in Chrome, in dev tools under Application; in Firefox, in dev tools under Storage).
 
 

package-lock.json

@@ -1,12 +1,12 @@
 {
-  "name": "crowd-funder-for-time-pwa",
+  "name": "TimeSafari",
-  "version": "0.1.4",
+  "version": "0.1.6-beta",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "crowd-funder-for-time-pwa",
+      "name": "TimeSafari",
-      "version": "0.1.4",
+      "version": "0.1.6-beta",
       "dependencies": {
         "@ethersproject/hdnode": "^5.7.0",
         "@fortawesome/fontawesome-svg-core": "^6.4.2",
@@ -33,6 +33,7 @@
         "ethereum-cryptography": "^2.1.2",
         "ethereumjs-util": "^7.1.5",
         "ethr-did-resolver": "^8.1.2",
+        "git-describe": "^4.1.1",
         "jdenticon": "^3.2.0",
         "js-generate-password": "^0.1.9",
         "localstorage-slim": "^2.5.0",
@@ -8894,8 +8895,7 @@
     "node_modules/@types/semver": {
       "version": "7.5.3",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.3.tgz",
-      "integrity": "sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw==",
+      "integrity": "sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw=="
-      "dev": true
     },
     "node_modules/@types/send": {
       "version": "0.17.2",
@@ -16272,6 +16272,30 @@
         "node": ">=6"
       }
     },
+    "node_modules/git-describe": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/git-describe/-/git-describe-4.1.1.tgz",
+      "integrity": "sha512-JC8ganO5kO80G8+XE98TDDjnMXQN3Estk3qdJuG2EGRF/l6zuMTMcN+8OSfQZ5FWpqIRLB015anWX4aSRgnxAQ==",
+      "dependencies": {
+        "@types/semver": "^7.3.8",
+        "lodash": "^4.17.21"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      },
+      "optionalDependencies": {
+        "semver": "^5.6.0"
+      }
+    },
+    "node_modules/git-describe/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -19338,8 +19362,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-      "devOptional": true
     },
     "node_modules/lodash.clonedeep": {
       "version": "4.5.0",

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "crowd-funder-for-time-pwa",
+  "name": "TimeSafari",
-  "version": "0.1.4",
+  "version": "0.1.6-beta",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -33,6 +33,7 @@
     "ethereum-cryptography": "^2.1.2",
     "ethereumjs-util": "^7.1.5",
     "ethr-did-resolver": "^8.1.2",
+    "git-describe": "^4.1.1",
     "jdenticon": "^3.2.0",
     "js-generate-password": "^0.1.9",
     "localstorage-slim": "^2.5.0",

project.task.yaml

@@ -1,22 +1,30 @@
 
 tasks:
 
-- 40 notifications :
+- 08 notifications :
-  - push, where we trigger a ServiceWorker(?) in the app to reach out and check for new data assignee:matthew
+  - get it to work on Android
-  - extract private_key_hex in py-push-server webpush.py
+  - get it to work on iOS
   - lock down regenerate_vapid endpoint (so only we admins can do it on demand)
-  - remove sleep in py-push-server app.py
+  - make the app behave correctly when App Notifications are turned off
-  - revisit "maybe" and "never" buttons on accont screen
+  - remove sleep in py-push-server app.py?
-  - see if we can detect OS-level notifications if turned off
   - write troubleshooting docs for notifications
+  - make the "App Notifications" toggle on when they turn notifications on
+  - make the "App Notifications" toggle off when they turn notifications off
   - in py-push-server, when sending a push to a subscriber and we get on a 410 "error #106", delete the subscription record
+  - https://gitea.anomalistdesign.com/trent_larson/py-push-server/pulls/3/files
+  - remove "notification push server" advanced setting since it only makes sense on the current domain
+  - prompt user to install on their home screen
 
-- .3 fix the Project-location-selection map display to not show on top of bottom icons (and any other UI tweaks on the map flow) assignee-group:ui
+- back-and-forth on discovery & project pages led to "You need an identity to load your projects." error on product page when I had an identity
+- fix the projects on /discover to show the issuer (currently all "Someone Anonymous")
+
+- .3 bug - make or edit a project, choose "Include location", and see the map display shows on top of the bottom icons assignee-group:ui
 
 - .5 Add infinite scroll to gifts on the home page
 
 - .5 If notifications are not enabled, add message to front page with link/button to enable
 
+- 01 server - show all claim details when issued by the issuer
 - add note after contact addition that they can see your info
 - enhance help page instructions for debugging
 - add way to test quickly a push notification
@@ -30,7 +38,6 @@ tasks:
   - add VC confirmation?
 
 - Release Minimum Viable Product :
-  - generate new webpush.db entry, webpush.py private_key_hex & subscription_info & vapid_claims email
   - .5 deploy endorser.ch server above Dec 1 (to get plan searches by names as well as descriptions)
   - 08 thorough testing for errors & edge cases
   - 01 ensure ability to recover server remotely, and add redundant access
@@ -43,8 +50,10 @@ tasks:
   - Other features - donation vs give, show offers, show give & outstanding totals, show network view, restrict registration, connect to contacts
   blocks: ref:https://raw.githubusercontent.com/trentlarson/lives-of-gifts/master/project.yaml#kickstarter%20for%20time
 
+- remove 'rowid' references (that are sqlite-specific)
 - make identicons for contacts into more-memorable faces (and maybe change project identicons, too)
-- allow some gives even if they aren't registered
+- 01 make the prod build copy the sw_scripts
+- 01 send visibility signal as a VC and store it
 - .5 Add start date to project
 - .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?
@@ -58,6 +67,9 @@ tasks:
 - switch some checks for activeDid to check for isRegistered
 - .2 in SeedBackupView, don't load the mnemonic and keep it in memory; only load it when they click "show"
 - .5 fix cert generation on server (since it didn't happen automatically for Nov 30)
+
+- 04 fix lack of initial notification in Firefox (on MacOS, maybe others)
+
 - contacts v+ :
   - 01 Import all the non-sensitive data (ie. contacts & settings).
   - .2 show error to user when adding a duplicate contact
@@ -99,6 +111,8 @@ tasks:
 - automated tests, eg. cypress
 
 - Notifications (wake on the phone, push notifications)
+  - pull instead of push, maybe via scheduled runs
+  - have a notification pop-up on Mac screen
 
 - Connect with phone contacts
 
@@ -111,12 +125,11 @@ tasks:
 
 - Do we want split first name & last name?
 
-- 40 notifications v+ :
-  - pull, w/ scheduled runs
-
 - 01 On nearby search, if user starts changing their box but cancels and goes back to the map it is zoomed far out. Fix to fit the box better.
 - 16 From the home screen, make the quick action even easier.
 
+- allow some gives even if they aren't registered - maybe someday as a gift to the world, but we really want this to be built via personal connections
+
 log:
 - videos for multiple identities https://youtu.be/p8L87AeD76w and for adding time to contacts https://youtu.be/7Yylczevp10 done:2023-03-29
 - project lists, contact totals & actions, multiple identifiers, stats-world, activity feed, rename of this project file (use "--follow --") milestone:2 done:2023-06-27

src/App.vue

@@ -169,20 +169,12 @@
                 >
                   Turn on Notifications
                 </button>
-                <div class="grid grid-cols-2 gap-2">
+                <button
-                  <button
+                  @click="close(notification.id)"
-                    @click="maybeLater(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 px-2 py-2 rounded-md"
+                >
-                  >
+                  Maybe Later
-                    Maybe Later
+                </button>
-                  </button>
-                  <button
-                    @click="never(notification.id)"
-                    class="block w-full text-center text-md font-bold uppercase bg-rose-600 text-white px-2 py-2 rounded-md"
-                  >
-                    Never
-                  </button>
-                </div>
               </div>
             </div>
           </div>
@@ -238,6 +230,10 @@
                 </p>
 
                 <button
+                  @click="
+                    close(notification.id);
+                    turnOffNotifications();
+                  "
                   class="block w-full text-center text-md font-bold uppercase bg-rose-600 text-white px-2 py-2 rounded-md mb-2"
                 >
                   Turn Off Notifications
@@ -332,16 +328,23 @@ export default class App extends Vue {
         );
       }
     } catch (error) {
-      console.error("Got an error initializing notifications:", error);
+      if (window.location.host.startsWith("localhost")) {
-      this.$notify(
+        console.log(
-        {
+          "Ignoring this error getting VAPID for local development:",
-          group: "alert",
+          error,
-          type: "danger",
+        );
-          title: "Error Setting Notifications",
+      } else {
-          text: "Got an error setting notifications.",
+        console.error("Got an error initializing notifications:", error);
-        },
+        this.$notify(
-        -1,
+          {
-      );
+            group: "alert",
+            type: "danger",
+            title: "Error Setting Notifications",
+            text: "Got an error setting notifications.",
+          },
+          -1,
+        );
+      }
     }
   }
 
@@ -410,7 +413,10 @@ export default class App extends Vue {
   private requestNotificationPermission(): Promise<NotificationPermission> {
     return Notification.requestPermission().then((permission) => {
       if (permission !== "granted") {
-        alert("We need notification permission to provide certain features.");
+        alert(
+          "Allow this app permission to make notifications for personal reminders." +
+            " You can adjust them at any time in your settings.",
+        );
         throw new Error("We weren't granted permission.");
       }
       return permission;
@@ -452,8 +458,13 @@ export default class App extends Vue {
           });
       })
       .catch((error) => {
-        console.error("An error occurred:", error);
+        console.error(
-        alert("Some error occurred." + error);
+          "An error occurred setting notification permissions:",
+          error,
+        );
+        alert(
+          "Some error occurred setting notification permissions. See logs.",
+        );
       });
   }
 
@@ -520,7 +531,7 @@ export default class App extends Vue {
   private sendSubscriptionToServer(
     subscription: PushSubscription,
   ): Promise<void> {
-    console.log(subscription);
+    console.log("About to send subscription", subscription);
     return fetch("/web-push/subscribe", {
       method: "POST",
       headers: {
@@ -535,12 +546,49 @@ export default class App extends Vue {
     });
   }
 
-  never(ID: string) {
+  async turnOffNotifications() {
-    alert(ID);
+    let subscription;
-  }
+    const pushProviderSuccess = await navigator.serviceWorker.ready
+      .then((registration) => {
+        return registration.pushManager.getSubscription();
+      })
+      .then((subscript) => {
+        subscription = subscript;
+        if (subscription) {
+          return subscription.unsubscribe();
+        } else {
+          console.log("Subscription object is not available.");
+          return false;
+        }
+      })
+      .catch((error) => {
+        console.log("Push provider server communication failed:", error);
+        return false;
+      });
 
-  maybeLater(ID: string) {
+    const pushServerSuccess = await fetch("/web-push/unsubscribe", {
-    alert(ID);
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(subscription),
+    })
+      .then((response) => {
+        return response.ok;
+      })
+      .catch((error) => {
+        console.log("Push server communication failed:", error);
+        return false;
+      });
+
+    alert(
+      "Notifications are off. Push provider unsubscribe " +
+        (pushProviderSuccess ? "succeeded" : "failed") +
+        (pushProviderSuccess === pushServerSuccess ? " and" : " but") +
+        " push server unsubscribe " +
+        (pushServerSuccess ? "succeeded" : "failed") +
+        ".",
+    );
   }
 }
 </script>

src/db/tables/settings.ts

@@ -16,7 +16,7 @@ export type Settings = {
   activeDid?: string; // Active Decentralized ID
   apiServer?: string; // API server URL
   firstName?: string; // User's first name
-  lastName?: string; // User's last name
+  lastName?: string; // deprecated - put all names in firstName
   lastViewedClaimId?: string; // Last viewed claim ID
   lastNotifiedClaimId?: string; // Last notified claim ID
   isRegistered?: boolean;

src/router/index.ts

@@ -39,7 +39,6 @@ const routes: Array<RouteRecordRaw> = [
     name: "account",
     component: () =>
       import(/* webpackChunkName: "account" */ "../views/AccountViewView.vue"),
-    beforeEnter: enterOrStart,
   },
   {
     path: "/claim/:id?",

src/views/AccountViewView.vue

@@ -32,8 +32,24 @@
       </span>
     </div>
 
+    <!-- ID notice -->
+    <div
+      v-if="!activeDid"
+      class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mb-4"
+    >
+      <p class="mb-4">
+        <b>Note:</b> Before you can take any action, you need an ID.
+      </p>
+      <router-link
+        :to="{ name: 'start' }"
+        class="inline-block text-md uppercase bg-amber-600 text-white px-4 py-2 rounded-md"
+      >
+        Generate Identity
+      </router-link>
+    </div>
+
     <!-- Registration notice -->
-    <!-- We won't show any loading indicator; we'll just pop the message in once we know they need it. -->
+    <!-- We won't show any loading indicator because it usually doesn't change anything. We'll just pop the message in only if we discover that they need it. -->
     <div
       v-if="!loadingLimits && !limits?.nextWeekBeginDateTime"
       class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mb-4"
@@ -58,9 +74,9 @@
       <span v-else>
         <router-link
           :to="{ name: 'new-edit-account' }"
-          class="text-xs bg-blue-500 text-white px-1.5 py-1 rounded-md"
+          class="block w-full text-center text-md text-slate-500 uppercase border border-dashed border-slate-400 px-1.5 py-2 rounded-md mb-2"
         >
-          (set name)
+          (Set Your Name)
         </router-link>
       </span>
 
@@ -89,15 +105,23 @@
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
       <label
         for="toggleNotifications"
-        class="flex items-center cursor-pointer"
+        class="flex items-center justify-between cursor-pointer"
         @click="
-          this.$notify(
+          !toggleNotifications
-            {
+            ? this.$notify(
-              group: 'modal',
+                {
-              type: 'notification-permission',
+                  group: 'modal',
-            },
+                  type: 'notification-permission',
-            -1,
+                },
-          )
+                -1,
+              )
+            : this.$notify(
+                {
+                  group: 'modal',
+                  type: 'notification-off',
+                },
+                -1,
+              )
         "
       >
         <!-- label -->
@@ -119,45 +143,13 @@
           ></div>
         </div>
       </label>
-      <label
-        for="toggleMuteNotifications"
-        class="flex items-center cursor-pointer mt-4"
-        @click="
-          this.$notify(
-            {
-              group: 'modal',
-              type: 'notification-mute',
-            },
-            -1,
-          )
-        "
-      >
-        <!-- label -->
-        <div>Mute Notifications</div>
-        <!-- toggle -->
-        <div class="relative ml-2">
-          <!-- input -->
-          <input
-            type="checkbox"
-            name="toggleMuteNotifications"
-            class="sr-only"
-            disabled
-          />
-          <!-- line -->
-          <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
-          <!-- dot -->
-          <div
-            class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
-          ></div>
-        </div>
-      </label>
     </div>
 
     <h3 class="text-sm uppercase font-semibold mb-3">Data</h3>
 
     <router-link
       :to="{ name: 'seed-backup' }"
-      href=""
+      v-if="activeDid"
       class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
     >
       Backup Identifier Seed
@@ -172,30 +164,42 @@
     </a>
     <a ref="downloadLink" />
 
-    <div v-if="activeDid" class="flex py-2">
+    <div v-if="activeDid" class="my-8">
-      <button class="text-center text-md text-blue-500" @click="checkLimits()">
+      <h3 class="text-sm uppercase font-semibold mb-3">Rate Limits</h3>
+      <button
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+        @click="checkLimits()"
+      >
         Check Limits
       </button>
       <!-- show spinner if loading limits -->
-      <div v-if="loadingLimits" class="ml-2">
+      <div v-if="loadingLimits" class="text-center mb-4">
-        Checking... <fa icon="spinner" class="fa-spin"></fa>
+        Checking&hellip; <fa icon="spinner" class="fa-spin"></fa>
       </div>
-      <div class="ml-2">
+      <div class="mb-4">
         {{ limitsMessage }}
       </div>
-      <div v-if="!!limits?.nextWeekBeginDateTime" class="px-9">
+      <div v-if="!!limits?.nextWeekBeginDateTime">
-        <span class="font-bold">Rate Limits</span>
+        <p class="mb-3 text-sm">
-        <p>
+          You have done <b>{{ limits.doneClaimsThisWeek }}</b> claims out of
-          You have done {{ limits.doneClaimsThisWeek }} claims out of
+          <b>{{ limits.maxClaimsPerWeek }}</b> for this week. Your claims
-          {{ limits.maxClaimsPerWeek }} for this week. Your claims counter
+          counter resets at
-          resets at {{ readableTime(limits.nextWeekBeginDateTime) }}
+          <b class="whitespace-nowrap">{{
+            readableTime(limits.nextWeekBeginDateTime)
+          }}</b>
         </p>
-        <p>
+        <p class="text-sm">
-          You have done {{ limits.doneRegistrationsThisMonth }} registrations
+          You have done
-          out of {{ limits.maxRegistrationsPerMonth }} for this month. (You can
+          <b>{{ limits.doneRegistrationsThisMonth }}</b> registrations out of
-          register nobody on your first day, and after that only one a day in
+          <b>{{ limits.maxRegistrationsPerMonth }}</b> for this month.
-          your first month.) Your registration counter resets at
+          <i
-          {{ readableTime(limits.nextMonthBeginDateTime) }}
+            >(You can register nobody on your first day, and after that only one
+            a day in your first month.)</i
+          >
+          Your registration counter resets at
+          <b class="whitespace-nowrap">
+            {{ readableTime(limits.nextMonthBeginDateTime) }}
+          </b>
         </p>
       </div>
     </div>
@@ -209,13 +213,13 @@
       Advanced
     </h3>
     <div v-if="showAdvanced">
-      <p>
+      <p class="text-rose-600 mb-8">
         Beware: the features here can be confusing and even change data in ways
         you do not expect. But we support your freedoms!
       </p>
 
       <!-- Deep Identity Details -->
-      <h2 class="text-slate-500 text-sm font-bold mb-2 py-2">
+      <h2 class="text-sm uppercase font-semibold mb-3">
         Deep Identity Details
       </h2>
       <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
@@ -273,13 +277,11 @@
 
       <label
         for="toggleShowAmounts"
-        class="flex items-center cursor-pointer py-2"
+        class="flex items-center justify-between cursor-pointer my-4"
         @click="handleChange"
       >
         <!-- label -->
-        <h2 class="text-slate-500 text-sm font-bold mb-2">
+        <h2>Show amounts given with contacts</h2>
-          Show amounts given with contacts
-        </h2>
         <!-- toggle -->
         <div class="relative ml-2">
           <!-- input -->
@@ -298,26 +300,28 @@
         </div>
       </label>
 
-      <div class="flex py-2">
+      <router-link
-        <button class="text-blue-500">
+        :to="{ name: 'statistics' }"
-          <router-link :to="{ name: 'statistics' }" class="block text-center">
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
-            See Global Animated History of Giving
+      >
-          </router-link>
+        See Global Animated History of Giving
-        </button>
+      </router-link>
-      </div>
 
-      <div class="flex py-2">
+      <!-- id used by puppeteer test script -->
-        <button class="text-blue-500">
+      <router-link
-          <!-- id used by puppeteer test script -->
+        id="switch-identity-link"
-          <router-link
+        :to="{ name: 'identity-switcher' }"
-            id="switch-identity-link"
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
-            :to="{ name: 'identity-switcher' }"
+      >
-            class="block text-center"
+        Switch Identity
-          >
+      </router-link>
-            Switch Identity / No Identity
+
-          </router-link>
+      <button
-        </button>
+        @click="alertWebPushSubscription()"
-      </div>
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+      >
+        Show Subscription from Web Push Server
+      </button>
 
       <div class="flex py-4">
         <h2 class="text-slate-500 text-sm font-bold mb-2">Claim Server</h2>
@@ -457,12 +461,12 @@ export default class AccountViewView extends Vue {
 
   showAdvanced = false;
 
-  private isSubscribed = false;
+  subscription: PushSubscription | null = null;
 
+  private isSubscribed = false;
   get toggleNotifications() {
     return this.isSubscribed;
   }
-
   set toggleNotifications(value) {
     this.isSubscribed = value;
   }
@@ -549,7 +553,6 @@ export default class AccountViewView extends Vue {
    * @throws Will display specific messages to the user based on different errors.
    */
   async created() {
-    console.error("created");
     try {
       await db.open();
 
@@ -569,13 +572,12 @@ export default class AccountViewView extends Vue {
   }
 
   async mounted() {
-    console.error("mounted()");
     try {
       const registration = await navigator.serviceWorker.ready;
-      const subscription = await registration.pushManager.getSubscription();
+      this.subscription = await registration.pushManager.getSubscription();
-      this.toggleNotifications = !!subscription;
+      this.toggleNotifications = !!this.subscription;
     } catch (error) {
-      console.error(error);
+      console.error("Mount error:", error);
       this.toggleNotifications = false;
     }
   }
@@ -927,6 +929,23 @@ export default class AccountViewView extends Vue {
       webPushServer: this.webPushServerInput,
     });
     this.webPushServer = this.webPushServerInput;
+    this.$notify(
+      {
+        group: "alert",
+        type: "warning",
+        title: "Reload",
+        text: "Now reload the app to get a new VAPID to use with this push server.",
+      },
+      -1,
+    );
+  }
+
+  alertWebPushSubscription() {
+    console.log(
+      "Web push subscription:",
+      JSON.parse(JSON.stringify(this.subscription)), // gives more info than plain console logging
+    );
+    alert(JSON.stringify(this.subscription));
   }
 }
 </script>

src/views/ContactAmountsView.vue

@@ -124,7 +124,7 @@ interface Notification {
 }
 
 @Component({ components: { QuickNav } })
-export default class ContactsView extends Vue {
+export default class ContactAmountssView extends Vue {
   $notify!: (notification: Notification, timeout?: number) => void;
 
   activeDid = "";

src/views/ContactQRScanShowView.vue

@@ -18,6 +18,16 @@
       <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4">
         Your Contact Info
       </h1>
+      <p v-if="!givenName" class="text-center mt-2">
+        <span class="text-red">Beware!</span>
+        You aren't sharing your name, so hurry and
+        <router-link
+          :to="{ name: 'new-edit-account' }"
+          class="bg-blue-500 text-white px-1.5 py-1 rounded-md"
+        >
+          go here to set it for them.
+        </router-link>
+      </p>
     </div>
 
     <div @click="onCopyToClipboard()" v-if="activeDid">
@@ -87,6 +97,7 @@ export default class ContactQRScanShow extends Vue {
 
   activeDid = "";
   apiServer = "";
+  givenName = "";
   qrValue = "";
 
   public async getIdentity(activeDid: string) {
@@ -111,6 +122,7 @@ export default class ContactQRScanShow extends Vue {
     const settings = await db.settings.get(MASTER_SETTINGS_KEY);
     this.activeDid = settings?.activeDid || "";
     this.apiServer = settings?.apiServer || "";
+    this.givenName = settings?.firstName || "";
 
     await accountsDB.open();
     const accounts = await accountsDB.accounts.toArray();

src/views/ContactsView.vue

@@ -19,12 +19,13 @@
     </div>
 
     <!-- New Contact -->
-    <div class="mb-4 flex">
+    <div class="mb-4 flex items-stretch">
-      <span class="self-center bg-slate-500 text-white px-1.5 py-1 rounded-md">
+      <router-link
-        <router-link :to="{ name: 'contact-qr' }">
+        :to="{ name: 'contact-qr' }"
-          <fa icon="qrcode" class="fa-fw" />
+        class="flex items-center bg-slate-500 text-white px-1.5 py-1 mr-1 rounded-md"
-        </router-link>
+      >
-      </span>
+        <fa icon="qrcode" class="fa-fw text-2xl" />
+      </router-link>
       <input
         type="text"
         placeholder="DID, Name, Public Key (base 16 or 64)"
@@ -170,7 +171,7 @@
               <button
                 class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded-l-md"
                 @click="onClickAddGive(activeDid, contact.did)"
-                title="givenByMeDescriptions[contact.did]"
+                :title="givenByMeDescriptions[contact.did] || ''"
               >
                 To:
                 {{
@@ -189,7 +190,7 @@
               <button
                 class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded-r-md -ml-1.5 border-l border-blue-400"
                 @click="onClickAddGive(contact.did, activeDid)"
-                title="givenToMeDescriptions[contact.did]"
+                :title="givenToMeDescriptions[contact.did] || ''"
               >
                 From:
                 {{
@@ -366,6 +367,10 @@ export default class ContactsView extends Vue {
   }
 
   async loadGives() {
+    if (!this.activeDid) {
+      return;
+    }
+
     const handleResponse = (
       resp: { status: number; data: { data: GiveServerRecord[] } },
       descriptions: Record<string, string>,
@@ -400,11 +405,11 @@ export default class ContactsView extends Vue {
           {
             group: "alert",
             type: "danger",
-            title: "Server Error",
+            title: "Retrieval Error",
             text:
               "Got an error retrieving your " +
               (useRecipient ? "given" : "received") +
-              " time from the server.",
+              " data from the server.",
           },
           -1,
         );
@@ -455,12 +460,13 @@ export default class ContactsView extends Vue {
       this.givenToMeConfirmed = givenToMeConfirmed;
       this.givenToMeUnconfirmed = givenToMeUnconfirmed;
     } catch (error) {
+      console.log("Error loading gives", error);
       this.$notify(
         {
           group: "alert",
           type: "danger",
-          title: "Server Error",
+          title: "Load Error",
-          text: error as string,
+          text: "Got an error loading your gives.",
         },
         -1,
       );
@@ -704,6 +710,7 @@ export default class ContactsView extends Vue {
             );
           }
         } catch (error) {
+          console.error("Error when registering:", error);
           let userMessage = "There was an error. See logs for more info.";
           const serverError = error as AxiosError;
           if (serverError) {
@@ -720,7 +727,7 @@ export default class ContactsView extends Vue {
             {
               group: "alert",
               type: "danger",
-              title: "Server Error",
+              title: "Registration Error",
               text: userMessage,
             },
             -1,
@@ -766,27 +773,28 @@ export default class ContactsView extends Vue {
       } else {
         console.error(
           "Got some bad server response when setting visibility: ",
+          resp.status,
           resp,
         );
         const message =
-          resp.data.error?.message || "Bad server response of " + resp.status;
+          resp.data.error?.message || "Got some error setting visibility.";
         this.$notify(
           {
             group: "alert",
             type: "danger",
-            title: "Server Error",
+            title: "Error Setting Visibility",
             text: message,
           },
           -1,
         );
       }
     } catch (err) {
-      console.error("Got some server error when setting visibility:", err);
+      console.error("Got some error when setting visibility:", err);
       this.$notify(
         {
           group: "alert",
           type: "danger",
-          title: "Server Error",
+          title: "Error Setting Visibility",
           text: "Check connectivity and try again.",
         },
         -1,
@@ -829,19 +837,19 @@ export default class ContactsView extends Vue {
           {
             group: "alert",
             type: "danger",
-            title: "Server Error",
+            title: "Error Checking Visibility",
             text: message,
           },
           -1,
         );
       }
     } catch (err) {
-      console.log("Caught error from server request to check visibility:", err);
+      console.log("Caught error from request to check visibility:", err);
       this.$notify(
         {
           group: "alert",
           type: "danger",
-          title: "Server Error",
+          title: "Error Checking Visibility",
           text: "Check connectivity and try again.",
         },
         -1,
@@ -1027,6 +1035,7 @@ export default class ContactsView extends Vue {
           }
         }
       } catch (error) {
+        console.log("Error in createAndSubmitGive: ", error);
         let userMessage = "There was an error. See logs for more info.";
         const serverError = error as AxiosError;
         if (serverError) {
@@ -1043,7 +1052,7 @@ export default class ContactsView extends Vue {
           {
             group: "alert",
             type: "danger",
-            title: "Server Error",
+            title: "Error Sending Give",
             text: userMessage,
           },
           -1,

src/views/HelpNotificationsView.vue

@@ -28,13 +28,35 @@
       <p>Somehow call the service-worker self.showNotification</p>
 
       <h2 class="text-xl font-semibold">Check OS-level permissions</h2>
-      <p>
+      <div>
         Walk-throughs & screenshots, maybe for all combinations of OS &
         browsers.
-      </p>
+        <div>
+          <h3 class="text-lg font-semibold">Mobile Phone - Apple iOS</h3>
+          <div>
+            Notifications require iOS 16.4 or higher. To check your iOS version,
+            go to Settings > General > About > Software Version.
+          </div>
+
+          <h3 class="text-lg font-semibold">Mobile Phone - Google Android</h3>
+          <div>See the browser section.</div>
+
+          <h3 class="text-lg font-semibold">Desktop - Mac</h3>
+          <div>Requires Mac OS 13.</div>
+        </div>
+      </div>
 
       <h2 class="text-xl font-semibold">Check browser-level permissions</h2>
       <p>Walk-throughs & screenshots for browser settings</p>
+      <div>
+        <div>
+          <h3 class="text-lg font-semibold">Mobile Phone - Apple iOS</h3>
+          <div>Make sure your OS (above) supports it.</div>
+
+          <h3 class="text-lg font-semibold">Mobile Phone - Android</h3>
+          <div>Chrome requires version 50.</div>
+        </div>
+      </div>
 
       <h2 class="text-xl font-semibold">Explain full reset to start again</h2>
       <p>

src/views/HelpView.vue

@@ -214,9 +214,7 @@
       </p>
 
       <h2 class="text-xl font-semibold">What app version is this?</h2>
-      <p>
+      <p>{{ package.version }} ({{ commitHash }})</p>
-        {{ package.version }}
-      </p>
 
       <h2 class="text-xl font-semibold">
         For any other questions, including removing your data:
@@ -246,6 +244,7 @@ export default class Help extends Vue {
   $notify!: (notification: Notification, timeout?: number) => void;
 
   package = Package;
+  commitHash = process.env.VUE_APP_GIT_HASH;
 
   showOnboardInfo() {
     this.$notify(

src/views/HomeView.vue

@@ -8,28 +8,44 @@
 
     <!-- show the actions for recognizing a give -->
     <div class="mb-8">
-      <div v-if="!activeDid">
+      <div
-        To record others' giving,
+        v-if="!activeDid"
-        <router-link :to="{ name: 'start' }" class="text-blue-500">
+        class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
-          create your identifier.</router-link
+      >
+        <p class="text-lg mb-3">
+          You need an <b>identifier</b> before you can record anyone's gives.
+        </p>
+        <router-link
+          :to="{ name: 'start' }"
+          class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
+        >
+          Create Your Identifier</router-link
         >
       </div>
 
-      <div v-else-if="!isRegistered">
+      <div
-        To record others' giving, someone must register your account, so show
+        v-else-if="!isRegistered"
-        them
+        class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
-        <router-link :to="{ name: 'contact-qr' }" class="text-blue-500">
+      >
-          your identity info</router-link
+        Someone must register your account before you can record anyone's gives.
+        To do this:
+        <router-link
+          :to="{ name: 'contact-qr' }"
+          class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
         >
-        and then
+          1. Show Them Your Identity Info</router-link
-        <router-link :to="{ name: 'account' }" class="text-blue-500">
+        >
-          check your limits.</router-link
+        <router-link
+          :to="{ name: 'account' }"
+          class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
+        >
+          2. Check Your Limits</router-link
         >
       </div>
 
       <div v-else>
         <!-- activeDid && isRegistered -->
-        <h2 class="text-xl font-bold">Record Something Given</h2>
+        <h2 class="text-xl font-bold mb-4">Record Something Given</h2>
 
         <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
           <li @click="openDialog()">
@@ -87,42 +103,52 @@
       showGivenToUser="true"
     />
 
+    <!-- Results List -->
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
       <h2 class="text-xl font-bold mb-4">Latest Activity</h2>
+      <InfiniteScroll @reached-bottom="loadMoreGives">
+        <ul class="border-t border-slate-300">
+          <li
+            class="border-b border-slate-300 py-2"
+            v-for="record in feedData"
+            :key="record.jwtId"
+          >
+            <div
+              class="border-b border-dashed border-slate-400 text-orange-400 pb-2 mb-2 font-bold uppercase text-sm"
+              v-if="record.jwtId == feedLastViewedClaimId"
+            >
+              You've seen all the following
+            </div>
+
+            <div class="flex">
+              <fa icon="gift" class="pt-1 pr-2 text-slate-500"></fa>
+              <span class="">{{ this.giveDescription(record) }}</span>
+              <a @click="onClickLoadClaim(record.jwtId)">
+                <fa icon="circle-info" class="pl-2 pt-1 text-slate-500"></fa>
+              </a>
+            </div>
+          </li>
+        </ul>
+      </InfiniteScroll>
       <div :class="{ hidden: isHiddenSpinner }">
         <p class="text-slate-500 text-center italic mt-4 mb-4">
           <fa icon="spinner" class="fa-spin-pulse"></fa> Loading&hellip;
         </p>
       </div>
-      <ul class="border-t border-slate-300">
-        <li
-          class="border-b border-slate-300 py-2"
-          v-for="record in feedData"
-          :key="record.jwtId"
-        >
-          <div
-            class="border-b border-dashed border-slate-400 text-orange-400 pb-2 mb-2 font-bold uppercase text-sm"
-            v-if="record.jwtId == feedLastViewedId"
-          >
-            You've seen all the following
-          </div>
-          <div class="flex">
-            <fa icon="gift" class="pt-1 pr-2 text-slate-500"></fa>
-            <span class="">{{ this.giveDescription(record) }}</span>
-            <a @click="onClickLoadClaim(record.jwtId)">
-              <fa icon="circle-info" class="pl-2 pt-1 text-slate-500"></fa>
-            </a>
-          </div>
-        </li>
-      </ul>
     </div>
   </section>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+
+import EntityIcon from "@/components/EntityIcon.vue";
 import GiftedDialog from "@/components/GiftedDialog.vue";
+import InfiniteScroll from "@/components/InfiniteScroll.vue";
+import QuickNav from "@/components/QuickNav.vue";
 import { db, accountsDB } from "@/db/index";
+import { Account } from "@/db/tables/accounts";
+import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import {
@@ -130,11 +156,7 @@ import {
   GiverInputInfo,
   GiveServerRecord,
 } from "@/libs/endorserServer";
-import { Contact } from "@/db/tables/contacts";
-import QuickNav from "@/components/QuickNav.vue";
-import EntityIcon from "@/components/EntityIcon.vue";
 import { IIdentifier } from "@veramo/core";
-import { Account } from "@/db/tables/accounts";
 
 interface Notification {
   group: string;
@@ -144,7 +166,7 @@ interface Notification {
 }
 
 @Component({
-  components: { GiftedDialog, QuickNav, EntityIcon },
+  components: { GiftedDialog, QuickNav, EntityIcon, InfiniteScroll },
 })
 export default class HomeView extends Vue {
   $notify!: (notification: Notification, timeout?: number) => void;
@@ -153,10 +175,9 @@ export default class HomeView extends Vue {
   allContacts: Array<Contact> = [];
   allMyDids: Array<string> = [];
   apiServer = "";
-  feedAllLoaded = false;
   feedData = [];
   feedPreviousOldestId?: string;
-  feedLastViewedId?: string;
+  feedLastViewedClaimId?: string;
   isHiddenSpinner = true;
   isRegistered = false;
   numAccounts = 0;
@@ -196,9 +217,12 @@ export default class HomeView extends Vue {
       this.apiServer = settings?.apiServer || "";
       this.activeDid = settings?.activeDid || "";
       this.allContacts = await db.contacts.toArray();
-      this.feedLastViewedId = settings?.lastViewedClaimId;
+      this.feedLastViewedClaimId = settings?.lastViewedClaimId;
       this.isRegistered = !!settings?.isRegistered;
+
+      // this returns a Promise but we don't need to wait for it
       this.updateAllFeed();
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       this.$notify(
@@ -241,24 +265,33 @@ export default class HomeView extends Vue {
     return headers;
   }
 
+  /**
+   * Data loader used by infinite scroller
+   * @param payload is the flag from the InfiniteScroll indicating if it should load
+   **/
+  public async loadMoreGives(payload: boolean) {
+    if (payload) {
+      this.updateAllFeed();
+    }
+  }
+
   public async updateAllFeed() {
     this.isHiddenSpinner = false;
-    await this.retrieveClaims(this.apiServer, this.feedPreviousOldestId)
+    await this.retrieveGives(this.apiServer, this.feedPreviousOldestId)
       .then(async (results) => {
         if (results.data.length > 0) {
           this.feedData = this.feedData.concat(results.data);
-          this.feedAllLoaded = results.hitLimit;
           this.feedPreviousOldestId =
             results.data[results.data.length - 1].jwtId;
+          // The following update is only done on the first load.
           if (
-            this.feedLastViewedId == null ||
+            this.feedLastViewedClaimId == null ||
-            this.feedLastViewedId < results.data[0].jwtId
+            this.feedLastViewedClaimId < results.data[0].jwtId
           ) {
             await db.open();
             db.settings.update(MASTER_SETTINGS_KEY, {
               lastViewedClaimId: results.data[0].jwtId,
             });
-            // but not for this page because we need to remember what it was before
           }
         }
       })
@@ -268,17 +301,22 @@ export default class HomeView extends Vue {
           {
             group: "alert",
             type: "danger",
-            title: "Export Error",
+            title: "Feed Error",
             text: e.userMessage || "There was an error retrieving feed data.",
           },
           -1,
         );
       });
-
     this.isHiddenSpinner = true;
   }
 
-  public async retrieveClaims(endorserApiServer: string, beforeId?: string) {
+  /**
+   * Retrieve claims in reverse chronological order
+   *
+   * @param beforeId the earliest ID (of previous searches) to search earlier
+   * @return claims in reverse chronological order
+   */
+  public async retrieveGives(endorserApiServer: string, beforeId?: string) {
     const beforeQuery = beforeId == null ? "" : "&beforeId=" + beforeId;
     const response = await fetch(
       endorserApiServer + "/api/v2/report/gives?" + beforeQuery,

src/views/NewEditAccountView.vue

@@ -68,7 +68,7 @@ export default class NewEditAccountView extends Vue {
     });
     localStorage.setItem("firstName", this.givenName as string);
     localStorage.setItem("lastName", ""); // deprecated, pre v 0.1.3
-    this.$router.push({ name: "account" });
+    this.$router.back();
   }
 
   onClickCancel() {

src/views/NewEditProjectView.vue

@@ -37,7 +37,7 @@
       maxlength="5000"
     ></textarea>
     <div class="text-xs text-slate-500 italic -mt-3 mb-4">
-      {{ fullClaim.description.length }}/5000 max. characters
+      {{ fullClaim.description?.length }}/5000 max. characters
     </div>
 
     <input

src/views/NewIdentifierView.vue

@@ -88,7 +88,7 @@ export default class NewIdentifierView extends Vue {
 
     this.loading = false;
     setTimeout(() => {
-      this.$router.push({ name: "account" });
+      this.$router.push({ name: "home" });
     }, 1000);
   }
 }

src/views/ProjectViewView.vue

@@ -88,8 +88,8 @@
       </button>
     </div>
 
-    <div class="mb-4">
+    <div v-if="activeDid" class="mb-4">
-      <div v-if="activeDid" class="text-center">
+      <div class="text-center">
         <button
           @click="openOfferDialog({ name: 'you', did: activeDid })"
           class="block w-full text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md"
@@ -99,17 +99,16 @@
       </div>
     </div>
 
-    <div>
+    <div v-if="activeDid">
-      <div v-if="activeDid" class="text-center">
+      <div class="text-center">
         <button
           @click="openGiftDialog({ name: 'you', did: activeDid })"
           class="block w-full text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md"
         >
           I gave&hellip;
         </button>
-        <p class="mt-2 mb-4 text-center">Or, record a gift from:</p>
+        <p class="mt-2 mb-4 text-center">Or, record a contribution from:</p>
       </div>
-      <p v-if="!activeDid" class="mt-2 mb-4">Record a gift from:</p>
 
       <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
         <li @click="openGiftDialog()">
@@ -234,28 +233,32 @@
           <h3 class="text-sm uppercase font-semibold mb-3">
             Contributions To This Idea
           </h3>
-          <ul>
+          <!-- centering because long, wrapped project names didn't left align with blank or "text-left" -->
-            <li v-for="plan in fulfillersToThis" :key="plan.handleId">
+          <div class="text-center">
+            <div v-for="plan in fulfillersToThis" :key="plan.handleId">
               <button
                 @click="onClickLoadProject(plan.handleId)"
                 class="text-blue-500"
               >
                 {{ plan.name }}
               </button>
-            </li>
+            </div>
-          </ul>
+          </div>
         </div>
 
         <div v-if="fulfilledByThis" class="bg-slate-100 px-4 py-3 rounded-md">
           <h3 class="text-sm uppercase font-semibold mb-3">
             Contributions By This Idea
           </h3>
-          <button
+          <!-- centering because long, wrapped project names didn't left align with blank or "text-left" -->
-            @click="onClickLoadProject(fulfilledByThis.handleId)"
+          <div class="text-center">
-            class="text-blue-500"
+            <button
-          >
+              @click="onClickLoadProject(fulfilledByThis.handleId)"
-            {{ fulfilledByThis.name }}
+              class="text-blue-500"
-          </button>
+            >
+              {{ fulfilledByThis.name }}
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -356,12 +359,6 @@ export default class ProjectViewView extends Vue {
       .equals(activeDid)
       .first()) as Account;
     const identity = JSON.parse(account?.identity || "null");
-
-    if (!identity) {
-      throw new Error(
-        "Attempted to load project records with no identity available.",
-      );
-    }
     return identity;
   }
 

src/views/ProjectsView.vue

@@ -3,7 +3,7 @@
   <section id="Content" class="p-6 pb-24">
     <!-- Heading -->
     <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      Your Plans
+      Your Ideas
     </h1>
 
     <!-- Quick Search -->

sw_scripts/additional-scripts.js

@@ -5,7 +5,7 @@ importScripts(
 );
 
 self.addEventListener("install", (event) => {
-  console.error("Adding event listener for:", event);
+  console.log("Adding event listener for:", event);
   importScripts(
     "safari-notifications.js",
     "nacl.js",

sw_scripts/safari-notifications.js

@@ -395,12 +395,12 @@ async function setMostRecentNotified(id) {
       data["lastNotifiedClaimId"] = id;
       await updateRecord(store, data);
     } else {
-      console.error("Record not found");
+      console.error("IndexedDB settings record not found.");
     }
 
     transaction.oncomplete = () => db.close();
   } catch (error) {
-    console.error("Database error: " + error.message);
+    console.error("IndexedDB error:", error);
   }
 }
 
@@ -520,7 +520,11 @@ async function getNotificationCount() {
           const most_recent_notified = claims[0]["id"];
           await setMostRecentNotified(most_recent_notified);
         } else {
-          console.error("The service worker got a bad response status when fetching claims:", response.status, response);
+          console.error(
+            "The service worker got a bad response status when fetching claims:",
+            response.status,
+            response,
+          );
         }
         break;
       }

vue.config.js

@@ -1,4 +1,8 @@
 const { defineConfig } = require("@vue/cli-service");
+const { gitDescribeSync } = require("git-describe");
+
+process.env.VUE_APP_GIT_HASH = gitDescribeSync().hash;
+
 module.exports = defineConfig({
   transpileDependencies: true,
   configureWebpack: {

web-push.md

@@ -400,3 +400,22 @@ While notifications are turned on, the user can tap on the App Notifications tog
   * Active. (User can change to Muted when the user mutes notifications.)
   * Muted. (User can change to Active when the user toggles it.)
     (Turning mute off automatically after some amount of time is not planned in version 1.)
+
+
+# TROUBLESHOOTING
+
+## Desktop
+
+#### Firefox
+
+Go to `about:debugging` and click on `Inspect` for the service worker.
+
+#### Chrome
+
+Go to `chrome://inspect/#service-workers` and click on `Inspect` for the service worker.
+
+## Mobile
+
+#### Android
+
+#### iOS