change the notification detection to our own variables, and save the selected time

src/views/AccountViewView.vue

@@ -54,7 +54,10 @@
       >
         <button
           @click="
-            () => $refs.userNameDialog.open((name) => (this.givenName = name))
+            () =>
+              (this.$refs.userNameDialog as UserNameDialog).open(
+                (name) => (this.givenName = name),
+              )
           "
           class="inline-block text-md 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-4 py-2 rounded-md"
         >
@@ -178,19 +181,25 @@
     >
       <!-- label -->
       <div class="mb-2 font-bold">Notifications</div>
-      <div
-        v-if="!notificationMaybeChanged"
-        class="flex items-center justify-between cursor-pointer"
-        @click="showNotificationChoice()"
-      >
+      <div class="flex items-center justify-between">
         <!-- label -->
-        <div>App Notifications</div>
+        <div>
+          New Activity Notifications
+          <fa
+            icon="question-circle"
+            class="text-slate-400 fa-fw ml-2 cursor-pointer"
+            @click.stop="showNewActivityNotificationInfo"
+          />
+        </div>
         <!-- toggle -->
-        <div class="relative ml-2">
+        <div
+          class="relative ml-2 cursor-pointer"
+          @click="showNewActivityNotificationChoice()"
+        >
           <!-- input -->
           <input
             type="checkbox"
-            v-model="isSubscribed"
+            v-model="notifyingNewActivity"
             name="toggleNotificationsInput"
             class="sr-only"
           />
@@ -202,9 +211,8 @@
           ></div>
         </div>
       </div>
-      <div v-else>
-        Notification status may have changed. Refresh this page to see the
-        latest setting.
+      <div v-if="notifyingNewActivityTime" class="w-full text-right">
+        {{ notifyingNewActivityTime }}
       </div>
       <router-link class="pl-4 text-sm text-blue-500" to="/help-notifications">
         Troubleshoot your notification setup.
@@ -803,10 +811,10 @@ export default class AccountViewView extends Vue {
   imageLimits: ImageRateLimits | null = null;
   imageServer = "";
   isRegistered = false;
-  isSubscribed = false;
   limitsMessage = "";
   loadingLimits = false;
-  notificationMaybeChanged = false;
+  notifyingNewActivity = false;
+  notifyingNewActivityTime = "";
   passkeyExpirationDescription = "";
   passkeyExpirationMinutes = DEFAULT_PASSKEY_EXPIRATION_MINUTES;
   previousPasskeyExpirationMinutes = DEFAULT_PASSKEY_EXPIRATION_MINUTES;
@@ -849,7 +857,12 @@ export default class AccountViewView extends Vue {
        */
       const registration = await navigator.serviceWorker?.ready;
       this.subscription = await registration.pushManager.getSubscription();
-      this.isSubscribed = !!this.subscription;
+      if (!this.subscription) {
+        if (this.notifyingNewActivity) {
+          // the app thought there was a subscription but there isn't, so fix the settings
+          this.turnOffNotifyingFlags();
+        }
+      }
       // console.log("Got to the end of 'mounted' call in AccountViewView.");
       /**
        * Beware! I've seen where we never get to this point because "ready" never resolves.
@@ -902,6 +915,8 @@ export default class AccountViewView extends Vue {
     this.showContactGives = !!settings.showContactGivesInline;
     this.hideRegisterPromptOnNewContact =
       !!settings.hideRegisterPromptOnNewContact;
+    this.notifyingNewActivity = !!settings.notifyingNewActivity;
+    this.notifyingNewActivityTime = settings.notifyingNewActivityTime || "";
     this.passkeyExpirationMinutes =
       settings.passkeyExpirationMinutes ?? DEFAULT_PASSKEY_EXPIRATION_MINUTES;
     this.previousPasskeyExpirationMinutes = this.passkeyExpirationMinutes;
@@ -921,29 +936,44 @@ export default class AccountViewView extends Vue {
       .then(() => setTimeout(fn, 2000));
   }
 
-  toggleShowContactAmounts() {
+  async toggleShowContactAmounts() {
     this.showContactGives = !this.showContactGives;
-    this.updateShowContactAmounts();
+    await db.open();
+    await db.settings.update(MASTER_SETTINGS_KEY, {
+      showContactGivesInline: this.showContactGives,
+    });
   }
 
-  toggleShowGeneralAdvanced() {
+  async toggleShowGeneralAdvanced() {
     this.showGeneralAdvanced = !this.showGeneralAdvanced;
-    this.updateShowGeneralAdvanced();
+    await db.open();
+    await db.settings.update(MASTER_SETTINGS_KEY, {
+      showGeneralAdvanced: this.showGeneralAdvanced,
+    });
   }
 
-  toggleProdWarning() {
+  async toggleProdWarning() {
     this.warnIfProdServer = !this.warnIfProdServer;
-    this.updateWarnIfProdServer(this.warnIfProdServer);
+    await db.open();
+    await db.settings.update(MASTER_SETTINGS_KEY, {
+      warnIfProdServer: this.warnIfProdServer,
+    });
   }
 
-  toggleTestWarning() {
+  async toggleTestWarning() {
     this.warnIfTestServer = !this.warnIfTestServer;
-    this.updateWarnIfTestServer(this.warnIfTestServer);
+    await db.open();
+    await db.settings.update(MASTER_SETTINGS_KEY, {
+      warnIfTestServer: this.warnIfTestServer,
+    });
   }
 
-  toggleShowShortcutBvc() {
+  async toggleShowShortcutBvc() {
     this.showShortcutBvc = !this.showShortcutBvc;
-    this.updateShowShortcutBvc(this.showShortcutBvc);
+    await db.open();
+    await db.settings.update(MASTER_SETTINGS_KEY, {
+      showShortcutBvc: this.showShortcutBvc,
+    });
   }
 
   readableDate(timeStr: string) {
@@ -968,11 +998,39 @@ export default class AccountViewView extends Vue {
     }
   }
 
-  async showNotificationChoice() {
-    if (!this.subscription) {
+  async showNewActivityNotificationInfo() {
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "New Activity Notification",
+        text: `
+          This will only notify you when there is new relevant activity for you personally.
+          Note that it runs on your device and many factors may affect delivery,
+          so if you want a reliable but simple daily notification then choose a 'Reminder'.
+          Do you want more details?
+        `,
+        onYes: async () => {
+          await (this.$router as Router).push({
+            name: "help-notification-types",
+          });
+        },
+        yesText: "tell me more.",
+      },
+      -1,
+    );
+  }
+
+  async showNewActivityNotificationChoice() {
+    if (!this.notifyingNewActivity) {
       (
         this.$refs.pushNotificationPermission as PushNotificationPermission
-      ).open();
+      ).open((success: boolean, time: string) => {
+        if (success) {
+          this.notifyingNewActivity = true;
+          this.notifyingNewActivityTime = time;
+        }
+      });
     } else {
       this.$notify(
         {
@@ -980,55 +1038,16 @@ export default class AccountViewView extends Vue {
           type: "notification-off",
           title: "", // unused, only here to satisfy type check
           text: "", // unused, only here to satisfy type check
+          callback: async (success) => {
+            if (success) {
+              this.notifyingNewActivity = false;
+              this.notifyingNewActivityTime = "";
+            }
+          },
         },
         -1,
       );
     }
-    this.notificationMaybeChanged = true;
-  }
-
-  public async updateShowContactAmounts() {
-    await db.open();
-    await db.settings.update(MASTER_SETTINGS_KEY, {
-      showContactGivesInline: this.showContactGives,
-    });
-  }
-
-  public async updateShowGeneralAdvanced() {
-    await db.open();
-    await db.settings.update(MASTER_SETTINGS_KEY, {
-      showGeneralAdvanced: this.showGeneralAdvanced,
-    });
-  }
-
-  public async updateWarnIfProdServer(newSetting: boolean) {
-    try {
-      await db.open();
-      await db.settings.update(MASTER_SETTINGS_KEY, {
-        warnIfProdServer: newSetting,
-      });
-    } catch (err) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error Updating Prod Warning",
-          text: "The setting may not have saved. Try again, maybe after restarting the app.",
-        },
-        -1,
-      );
-      console.error(
-        "Telling user to try again after prod-server-warning setting update because:",
-        err,
-      );
-    }
-  }
-
-  public async updateWarnIfTestServer(newSetting: boolean) {
-    await db.open();
-    await db.settings.update(MASTER_SETTINGS_KEY, {
-      warnIfTestServer: newSetting,
-    });
   }
 
   public async toggleHideRegisterPromptOnNewContact() {
@@ -1049,11 +1068,14 @@ export default class AccountViewView extends Vue {
     this.passkeyExpirationDescription = tokenExpiryTimeDescription();
   }
 
-  public async updateShowShortcutBvc(newSetting: boolean) {
+  public async turnOffNotifyingFlags() {
     await db.open();
     await db.settings.update(MASTER_SETTINGS_KEY, {
-      showShortcutBvc: newSetting,
+      notifyingNewActivity: false,
+      notifyingNewActivityTime: "",
     });
+    this.notifyingNewActivity = false;
+    this.notifyingNewActivityTime = "";
   }
 
   /**

src/views/HelpNotificationTypesView.vue

@@ -0,0 +1,68 @@
+<template>
+  <QuickNav />
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- Breadcrumb -->
+    <div class="mb-8">
+      <!-- Back -->
+      <div class="text-lg text-center font-light relative px-7">
+        <h1
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          @click="$router.back()"
+        >
+          <fa icon="chevron-left" class="fa-fw"></fa>
+        </h1>
+      </div>
+
+      <!-- Heading -->
+      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+        Notification Types
+      </h1>
+    </div>
+
+    <!-- eslint-disable prettier/prettier -->
+    <div>
+      <p>There are two types of notifications:</p>
+
+      <h2 class="text-xl font-semibold mt-4">Reminder Notifications</h2>
+      <div>
+        <p>
+          The Reminder Notification will be sent to you daily with a specific message,
+          at whatever time you choose. Use it to remind
+          yourself to act, for example: pause and consider who has given you
+          something, so you can record thanks in here.
+        </p>
+        <p>
+          This is a reliable message, but it doesn't contain any details about
+          activity that might be especially interesting to you.
+        </p>
+      </div>
+
+      <h2 class="text-xl font-semibold mt-4">New Activity Notifications</h2>
+      <div>
+        <p>
+          The New Activity Notification will be sent to you when there is new, relevant activity for you.
+          It will only trigger if something involves you or a project of interest; it will not
+          bug you for other, general activity.
+        </p>
+        <p>
+          This type is not as reliable as a Reminder Notification because mobile devices often suppress
+          such notifications to save battery. (We are working on other ways to notify you more
+          reliably. If you want to quickly check for relevant activity daily, use the Reminder
+          Notification and open the app and look for a large green button that points out new
+          activity that is personal to you.)
+        </p>
+      </div>
+    </div>
+    <!-- eslint-enable -->
+  </section>
+</template>
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+
+import QuickNav from "@/components/QuickNav.vue";
+
+@Component({ components: { QuickNav } })
+export default class HelpNotificationTypesView extends Vue {}
+</script>