WIPgit add . Updates to package.json ... much breakage

Reviewed-on: trent_larson/kick-starter-for-time-pwa#62

package.json

@@ -9,58 +9,57 @@
   },
   "dependencies": {
     "@ethersproject/hdnode": "^5.7.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "@pvermeer/dexie-encrypted-addon": "^3.0.0",
     "@tweenjs/tween.js": "^21.0.0",
-    "@veramo/core": "^5.2.0",
+    "@veramo/core": "^5.4.1",
-    "@veramo/credential-w3c": "^5.2.0",
+    "@veramo/credential-w3c": "^5.4.1",
-    "@veramo/data-store": "^5.2.0",
+    "@veramo/data-store": "^5.4.1",
-    "@veramo/did-manager": "^5.1.2",
+    "@veramo/did-manager": "^5.4.1",
-    "@veramo/did-provider-ethr": "^5.1.2",
+    "@veramo/did-provider-ethr": "^5.4.1",
-    "@veramo/did-resolver": "^5.2.0",
+    "@veramo/did-resolver": "^5.4.1",
-    "@veramo/key-manager": "^5.1.2",
+    "@veramo/key-manager": "^5.4.1",
-    "@vueuse/core": "^10.2.1",
+    "@vueuse/core": "^10.4.1",
     "@zxing/text-encoding": "^0.9.0",
-    "axios": "^1.4.0",
+    "axios": "^1.5.0",
     "buffer": "^6.0.3",
     "class-transformer": "^0.5.1",
-    "core-js": "^3.31.1",
+    "core-js": "^3.32.1",
     "dexie": "^3.2.4",
     "dexie-export-import": "^4.0.7",
-    "did-jwt": "^7.2.4",
+    "did-jwt": "^7.2.6",
-    "ethereum-cryptography": "^2.0.0",
+    "ethereum-cryptography": "^2.1.2",
     "ethereumjs-util": "^7.1.5",
-    "ethr-did-resolver": "^8.0.0",
+    "ethr-did-resolver": "^8.1.2",
     "jdenticon": "^3.2.0",
     "js-generate-password": "^0.1.9",
     "localstorage-slim": "^2.4.0",
-    "luxon": "^3.3.0",
+    "luxon": "^3.4.2",
     "merkletreejs": "^0.3.10",
     "moment": "^2.29.4",
     "notiwind": "^2.0.2",
     "papaparse": "^5.4.1",
     "pina": "^0.20.2204228",
-    "pinia-plugin-persistedstate": "^3.1.0",
+    "pinia-plugin-persistedstate": "^3.2.0",
     "qr-code-generator-vue3": "^1.4.21",
     "ramda": "^0.29.0",
     "readable-stream": "^4.4.2",
     "reflect-metadata": "^0.1.13",
     "register-service-worker": "^1.7.2",
-    "three": "^0.154.0",
+    "three": "^0.155.0",
     "vue": "^3.3.4",
     "vue-axios": "^3.5.2",
-    "vue-facing-decorator": "^2.1.20",
+    "vue-facing-decorator": "^3.0.2",
-    "vue-property-decorator": "^9.1.2",
+    "vue-router": "^4.2.4",
-    "vue-router": "^4.2.3",
     "web-did-resolver": "^2.0.27"
   },
   "devDependencies": {
     "@types/ramda": "^0.29.3",
-    "@types/three": "^0.152.1",
+    "@types/three": "^0.155.1",
-    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
-    "@typescript-eslint/parser": "^5.61.0",
+    "@typescript-eslint/parser": "^6.5.0",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
@@ -70,15 +69,15 @@
     "@vue/cli-plugin-vuex": "~5.0.8",
     "@vue/cli-service": "~5.0.8",
     "@vue/eslint-config-typescript": "^11.0.3",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.15",
-    "eslint": "^8.44.0",
+    "eslint": "^8.48.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.0-alpha.1",
+    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-vue": "^9.15.1",
+    "eslint-plugin-vue": "^9.17.0",
     "leaflet": "^1.9.4",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.29",
-    "prettier": "^3.0.0",
+    "prettier": "^3.0.3",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^3.3.3",
-    "typescript": "~5.1.6"
+    "typescript": "~5.2.2"
   }
 }

project.task.yaml

@@ -2,16 +2,12 @@
 tasks:
 - test alerts on all pages -- or refactor to new "notify" (since AlertMessage refactoring may require a change, et. ContactQRScanShowView)
 - .2 bug - on contacts view, click on "to" & "from" and nothing happens
-- 01 add a location for a project via map pin :
-  - add with a "location" field containing this: { "geo":{ "@type":"GeoCoordinates", "latitude":40.883944, "longitude":-111.884787 } }
 - 40 notifications :
   - push, where we trigger a ServiceWorker(?) in the app to reach out and check for new data assignee:matthew
 
-- 01 add a location for a project via map pin
+- 01 add my bounding box(es) of interest for searches on Nearby part of Discovery page
-- 04 search by a bounding box for local projects (see API by clicking on "Nearby")
+- .5 search by a bounding box(s) of interest for local projects (see API by clicking on "Nearby")
 - 01 Replace Gifted/Give in ContactsView with GiftedDialog assignee:matthew
-- 02 Fix images on projectview - allow choice of image from a pallete of images or a url image (discovery page display also)
-  - SEE: https://github.com/dmester/jdenticon assignee:jose
 
 - 08 Scan QR code to import into contacts assignee:matthew
   - SEE: https://github.com/gruhn/vue-qrcode-reader
@@ -36,7 +32,6 @@ tasks:
 - .2 on ProjectViewView, show different messages for "to" and "from" sections if none exist assignee-group:ui
 - .2 fix static icon to the right on project page (Matthew - I've made "Rotary" into issuer?) assignee:jose assignee-group:ui
 - .2 fix rate limit verbiage (with the new one-per-day allowance) assignee:trent
-- .2 move 'switch identity' to the advanced section assignee-group:ui
 - .1 remove the logic to exclude beforeId in list of plans after server has commit 26b25af605e715600d4f12b6416ed9fd7142d164
 - .2 in SeedBackupView, don't load the mnemonic and keep it in memory; only load it when they click "show"
 

src/main.ts

@@ -35,6 +35,7 @@ import {
   faGift,
   faHand,
   faHouseChimney,
+  faLocationDot,
   faLongArrowAltLeft,
   faLongArrowAltRight,
   faMagnifyingGlass,
@@ -80,6 +81,7 @@ library.add(
   faGift,
   faHand,
   faHouseChimney,
+  faLocationDot,
   faLongArrowAltLeft,
   faLongArrowAltRight,
   faMagnifyingGlass,

src/views/AccountViewView.vue

@@ -117,12 +117,6 @@
     >
       Edit Identity
     </router-link>
-    <router-link
-      :to="{ name: 'identity-switcher' }"
-      class="block text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
-    >
-      Switch Identity / No Identity
-    </router-link>
     <button
       @click="
         this.$notify(
@@ -238,6 +232,15 @@
         </div>
       </div>
 
+      <div class="flex py-2">
+        <router-link
+          :to="{ name: 'identity-switcher' }"
+          class="block text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+        >
+          Switch Identity / No Identity
+        </router-link>
+      </div>
+
       <div class="flex py-2">
         Claim Server
         <input
@@ -283,10 +286,6 @@
         </button>
       </div>
     </div>
-    <AlertMessage
-      :alertTitle="alertTitle"
-      :alertMessage="alertMessage"
-    ></AlertMessage>
   </section>
 </template>
 
@@ -300,14 +299,13 @@ import { db, accountsDB } from "@/db";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import { AxiosError } from "axios/index";
-import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
 import { IIdentifier } from "@veramo/core";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
 
-@Component({ components: { AlertMessage, QuickNav } })
+@Component({ components: { QuickNav } })
 export default class AccountViewView extends Vue {
   Constants = AppString;
 
@@ -331,8 +329,6 @@ export default class AccountViewView extends Vue {
   showPubCopy = false;
 
   showAdvanced = false;
-  alertMessage = "";
-  alertTitle = "";
 
   public async getIdentity(activeDid) {
     await accountsDB.open();

src/views/ContactAmountsView.vue

@@ -90,10 +90,6 @@
         </tr>
       </tbody>
     </table>
-    <AlertMessage
-      :alertTitle="alertTitle"
-      :alertMessage="alertMessage"
-    ></AlertMessage>
   </section>
 </template>
 
@@ -113,17 +109,14 @@ import {
 } from "@/libs/endorserServer";
 import * as didJwt from "did-jwt";
 import { AxiosError } from "axios";
-import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
 
-@Component({ components: { AlertMessage, QuickNav } })
+@Component({ components: { QuickNav } })
 export default class ContactsView extends Vue {
   activeDid = "";
   apiServer = "";
   contact: Contact | null = null;
   giveRecords: Array<GiveServerRecord> = [];
-  alertTitle = "";
-  alertMessage = "";
   numAccounts = 0;
 
   async beforeCreate() {

src/views/ContactGiftingView.vue

@@ -76,10 +76,6 @@
       message="Received from"
     >
     </GiftedDialog>
-    <AlertMessage
-      :alertTitle="alertTitle"
-      :alertMessage="alertMessage"
-    ></AlertMessage>
   </section>
 </template>
 
@@ -93,12 +89,11 @@ import { accessToken } from "@/libs/crypto";
 import { createAndSubmitGive } from "@/libs/endorserServer";
 import { Account } from "@/db/tables/accounts";
 import { Contact } from "@/db/tables/contacts";
-import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
 import EntityIcon from "@/components/EntityIcon";
 
 @Component({
-  components: { GiftedDialog, AlertMessage, QuickNav, EntityIcon },
+  components: { GiftedDialog, QuickNav, EntityIcon },
 })
 export default class HomeView extends Vue {
   activeDid = "";
@@ -106,8 +101,6 @@ export default class HomeView extends Vue {
   allContacts: Array<Contact> = [];
   apiServer = "";
   isHiddenSpinner = true;
-  alertTitle = "";
-  alertMessage = "";
   accounts: AccountsSchema;
   numAccounts = 0;
 
@@ -289,11 +282,6 @@ export default class HomeView extends Vue {
     }
   }
 
-  private setAlert(title, message) {
-    this.alertTitle = title;
-    this.alertMessage = message;
-  }
-
   // Helper functions for readability
 
   isGiveCreationError(result) {

src/views/ContactsView.vue

@@ -202,10 +202,6 @@
       </li>
     </ul>
     <p v-else>This identity has no contacts.</p>
-    <AlertMessage
-      :alertTitle="alertTitle"
-      :alertMessage="alertMessage"
-    ></AlertMessage>
   </section>
 </template>
 
@@ -224,7 +220,6 @@ import {
   SERVICE_ID,
 } from "@/libs/endorserServer";
 import { Component, Vue } from "vue-facing-decorator";
-import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
 import EntityIcon from "@/components/EntityIcon";
 
@@ -232,7 +227,7 @@ import EntityIcon from "@/components/EntityIcon";
 const Buffer = require("buffer/").Buffer;
 
 @Component({
-  components: { AlertMessage, QuickNav, EntityIcon },
+  components: { QuickNav, EntityIcon },
 })
 export default class ContactsView extends Vue {
   activeDid = "";
@@ -256,8 +251,6 @@ export default class ContactsView extends Vue {
   showGiveNumbers = false;
   showGiveTotals = true;
   showGiveConfirmed = true;
-  alertTitle = "";
-  alertMessage = "";
 
   async created() {
     await db.open();

src/views/DiscoverView.vue

@@ -103,10 +103,6 @@
         </li>
       </ul>
     </InfiniteScroll>
-    <AlertMessage
-      :alertTitle="alertTitle"
-      :alertMessage="alertMessage"
-    ></AlertMessage>
   </section>
 </template>
 
@@ -118,13 +114,12 @@ import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import { didInfo } from "@/libs/endorserServer";
-import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
 import InfiniteScroll from "@/components/InfiniteScroll";
 import EntityIcon from "@/components/EntityIcon";
 
 @Component({
-  components: { AlertMessage, QuickNav, InfiniteScroll, EntityIcon },
+  components: { QuickNav, InfiniteScroll, EntityIcon },
 })
 export default class DiscoverView extends Vue {
   activeDid = "";
@@ -132,8 +127,6 @@ export default class DiscoverView extends Vue {
   allMyDids: Array<string> = [];
   apiServer = "";
   searchTerms = "";
-  alertMessage = "";
-  alertTitle = "";
   projects: ProjectData[] = [];
   isLocalActive = true;
   isRemoteActive = false;

src/views/HomeView.vue

@@ -111,7 +111,7 @@
 
     <div class="mb-8">
       <h2 class="text-xl font-bold">Quick Action</h2>
-      <p class="mb-4">Show appreciation to a contact:</p>
+      <p class="mb-4">Record a gift from a contact:</p>
 
       <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
         <li @click="openDialog()">
@@ -196,10 +196,6 @@
         </li>
       </ul>
     </div>
-    <AlertMessage
-      :alertTitle="alertTitle"
-      :alertMessage="alertMessage"
-    ></AlertMessage>
   </section>
 </template>
 
@@ -211,12 +207,11 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import { createAndSubmitGive, didInfo } from "@/libs/endorserServer";
 import { Contact } from "@/db/tables/contacts";
-import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
 import EntityIcon from "@/components/EntityIcon";
 
 @Component({
-  components: { GiftedDialog, AlertMessage, QuickNav, EntityIcon },
+  components: { GiftedDialog, QuickNav, EntityIcon },
 })
 export default class HomeView extends Vue {
   activeDid = "";
@@ -228,8 +223,6 @@ export default class HomeView extends Vue {
   feedPreviousOldestId = null;
   feedLastViewedId = null;
   isHiddenSpinner = true;
-  alertTitle = "";
-  alertMessage = "";
   numAccounts = 0;
 
   async beforeCreate() {
@@ -509,11 +502,6 @@ export default class HomeView extends Vue {
     }
   }
 
-  private setAlert(title, message) {
-    this.alertTitle = title;
-    this.alertMessage = message;
-  }
-
   // Helper functions for readability
 
   isGiveCreationError(result) {

src/views/IdentitySwitcherView.vue

@@ -62,11 +62,6 @@
     >
       No Identity
     </a>
-
-    <AlertMessage
-      :alertTitle="alertTitle"
-      :alertMessage="alertMessage"
-    ></AlertMessage>
   </section>
 </template>
 <script lang="ts">
@@ -75,18 +70,15 @@ import { AppString } from "@/constants/app";
 import { db, accountsDB } from "@/db";
 import { AccountsSchema } from "@/db/tables/accounts";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
 
-@Component({ components: { AlertMessage, QuickNav } })
+@Component({ components: { QuickNav } })
 export default class IdentitySwitcherView extends Vue {
   Constants = AppString;
   public accounts: AccountsSchema;
   public activeDid;
   public firstName;
   public lastName;
-  public alertTitle;
-  public alertMessage;
   public otherIdentities = [];
 
   public async getIdentity(activeDid) {

src/views/NewEditProjectView.vue

@@ -97,10 +97,6 @@
         Cancel
       </button>
     </div>
-    <AlertMessage
-      :alertTitle="alertTitle"
-      :alertMessage="alertMessage"
-    ></AlertMessage>
   </section>
 </template>
 
@@ -116,15 +112,12 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken, SimpleSigner } from "@/libs/crypto";
 import { useAppStore } from "@/store/app";
 import { IIdentifier } from "@veramo/core";
-import AlertMessage from "@/components/AlertMessage";
 
 @Component({
-  components: { AlertMessage, LMap, LMarker, LTileLayer },
+  components: { LMap, LMarker, LTileLayer },
 })
 export default class NewEditProjectView extends Vue {
   activeDid = "";
-  alertTitle = "";
-  alertMessage = "";
   apiServer = "";
   description = "";
   errorMessage = "";
@@ -270,8 +263,6 @@ export default class NewEditProjectView extends Vue {
         // version shows up here: https://api.endorser.ch/api-docs/
         if (resp.data?.success?.handleId || resp.data?.success?.fullIri) {
           this.errorMessage = "";
-          this.alertTitle = "";
-          this.alertMessage = "";
           // handleId is new in server v release-1.6.0; remove fullIri when that
           // version shows up here: https://api.endorser.ch/api-docs/
           useAppStore().setProjectId(

src/views/ProjectViewView.vue

@@ -39,6 +39,16 @@
                 <fa icon="calendar" class="fa-fw text-slate-400"></fa>
                 {{ timeSince }}
               </div>
+              <div v-if="latitude || longitude">
+                <fa icon="location-dot" class="fa-fw text-slate-400"></fa>
+                <a
+                  :href="getOpenStreetMapUrl()"
+                  target="_blank"
+                  class="underline"
+                >
+                  Map View
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -190,10 +200,6 @@
       message="Received from"
     >
     </GiftedDialog>
-    <AlertMessage
-      :alertTitle="alertTitle"
-      :alertMessage="alertMessage"
-    ></AlertMessage>
   </section>
 </template>
 
@@ -213,17 +219,14 @@ import {
   didInfo,
   GiveServerRecord,
 } from "@/libs/endorserServer";
-import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
 import EntityIcon from "@/components/EntityIcon";
 
 @Component({
-  components: { GiftedDialog, AlertMessage, QuickNav, EntityIcon },
+  components: { GiftedDialog, QuickNav, EntityIcon },
 })
 export default class ProjectViewView extends Vue {
   activeDid = "";
-  alertMessage = "";
-  alertTitle = "";
   allMyDids: Array<string> = [];
   allContacts: Array<Contact> = [];
   apiServer = "";
@@ -231,6 +234,8 @@ export default class ProjectViewView extends Vue {
   expanded = false;
   givesToThis: Array<GiveServerRecord> = [];
   givesByThis: Array<GiveServerRecord> = [];
+  latitude = 0;
+  longitude = 0;
   name = "";
   issuer = "";
   projectId = localStorage.getItem("projectId") || ""; // handle ID
@@ -326,6 +331,8 @@ export default class ProjectViewView extends Vue {
         this.name = resp.data.claim?.name || "(no name)";
         this.description = resp.data.claim?.description || "(no description)";
         this.truncatedDesc = this.description.slice(0, this.truncateLength);
+        this.latitude = resp.data.claim?.location?.geo?.latitude || 0;
+        this.longitude = resp.data.claim?.location?.geo?.longitude || 0;
       } else if (resp.status === 404) {
         // actually, axios throws an error so we never get here
         this.$notify(
@@ -441,6 +448,20 @@ export default class ProjectViewView extends Vue {
     this.$refs.customDialog.open(contact);
   }
 
+  getOpenStreetMapUrl() {
+    // Google URL is https://maps.google.com/?q=LAT,LONG
+    return (
+      "https://www.openstreetmap.org/?mlat=" +
+      this.latitude +
+      "&mlon=" +
+      this.longitude +
+      "#map=15/" +
+      this.latitude +
+      "/" +
+      this.longitude
+    );
+  }
+
   handleDialogResult(result) {
     if (result.action === "confirm") {
       return new Promise((resolve) => {

src/views/ProjectsView.vue

@@ -67,10 +67,6 @@
         </li>
       </ul>
     </InfiniteScroll>
-    <AlertMessage
-      :alertTitle="alertTitle"
-      :alertMessage="alertMessage"
-    ></AlertMessage>
   </section>
 </template>
 
@@ -81,20 +77,17 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import { IIdentifier } from "@veramo/core";
 import InfiniteScroll from "@/components/InfiniteScroll";
-import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
 import EntityIcon from "@/components/EntityIcon";
 
 @Component({
-  components: { InfiniteScroll, AlertMessage, QuickNav, EntityIcon },
+  components: { InfiniteScroll, QuickNav, EntityIcon },
 })
 export default class ProjectsView extends Vue {
   apiServer = "";
   projects: ProjectData[] = [];
   current: IIdentifier;
   isLoading = false;
-  alertTitle = "";
-  alertMessage = "";
   numAccounts = 0;
 
   async beforeCreate() {

src/views/SeedBackupView.vue

@@ -50,10 +50,6 @@
       </div>
     </div>
     <div v-else>You do not have an active identity.</div>
-    <AlertMessage
-      :alertTitle="alertTitle"
-      :alertMessage="alertMessage"
-    ></AlertMessage>
   </section>
 </template>
 
@@ -62,16 +58,13 @@ import { Component, Vue } from "vue-facing-decorator";
 import { accountsDB, db } from "@/db";
 import * as R from "ramda";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
 
-@Component({ components: { AlertMessage, QuickNav } })
+@Component({ components: { QuickNav } })
 export default class SeedBackupView extends Vue {
   activeAccount = null;
   numAccounts = 0;
   showSeed = false;
-  alertMessage = "";
-  alertTitle = "";
 
   // 'created' hook runs when the Vue instance is first created
   async created() {

src/views/StatisticsView.vue

@@ -34,25 +34,18 @@
     </div>
     <button class="float-right" @click="captureGraphics()">Screenshot</button>
     <div id="scene-container" class="h-screen"></div>
-    <AlertMessage
-      :alertTitle="alertTitle"
-      :alertMessage="alertMessage"
-    ></AlertMessage>   
   </section>
 </template>
 <script lang="ts">
 import { SVGRenderer } from "three/addons/renderers/SVGRenderer.js";
 import { Component, Vue } from "vue-facing-decorator";
 import { World } from "@/components/World/World.js";
-import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
 
-@Component({ components: { AlertMessage, World, QuickNav } })
+@Component({ components: { World, QuickNav } })
 export default class StatisticsView extends Vue {
   world: World;
   worldProperties: WorldProperties = {};
-  alertTitle = "";
-  alertMessage = "";
 
   mounted() {
     try {

web-push.md

@@ -314,3 +314,47 @@ OneSignal) can perform in the role of such proxies.
 
 #4 -The INTERMEDIARY- doesn't appear to be anything we should be spending our
 time on.
+
+A BROWSER may also remove a subscription.   In order to remove a subscription,
+the registration record must be retrieved from the serviceWorker using
+`navigator.serviceWorker.ready`.  Within the `ready` property is the
+`pushManager` which has a `getSubscription` method. Once you have the
+subscription object, you may call the `unsubscribe` method.  `unsubscribe` is
+asynchronnous and returns a boolean true if it is successful in removing the
+subscription and false if not.
+
+
+```
+async function unsubscribeFromPush() {
+  // Check if the browser supports service workers
+  if ("serviceWorker" in navigator) {
+    // Get the registration object for the service worker
+    const registration = await navigator.serviceWorker.ready;
+
+    // Get the existing subscription
+    const subscription = await registration.pushManager.getSubscription();
+
+    if (subscription) {
+      // Unsubscribe
+      const successful = await subscription.unsubscribe();
+      if (successful) {
+        console.log("Successfully unsubscribed from push notifications.");
+        // You can also inform your server to remove this subscription
+      } else {
+        console.log("Failed to unsubscribe from push notifications.");
+      }
+    } else {
+      console.log("No subscription was found.");
+    }
+  } else {
+    console.log("Service workers are not supported by this browser.");
+  }
+}
+
+// Unsubscribe from push notifications
+unsubscribeFromPush().catch((err) => {
+  console.error("An error occurred while unsubscribing from push notifications", err);
+});
+```
+
+NOTE: We could offer an option within the app to "mute" these notifications. This wouldn't turn off the notifications at the browser level, but you could make it so that your Service Worker doesn't display them even if it receives them.