Merge branch 'master' into notify-initialization-fix

Reviewed-on: #198

src/components/ImageMethodDialog.vue

@@ -293,7 +293,7 @@ const inputImageFileNameRef = ref<Blob>();
 export default class ImageMethodDialog extends Vue {
   $notify!: NotifyFunction;
   $router!: Router;
-  notify = createNotifyHelpers(this.$notify);
+  notify!: ReturnType<typeof createNotifyHelpers>;
 
   /** Active DID for user authentication */
   activeDid = "";
@@ -498,6 +498,9 @@ export default class ImageMethodDialog extends Vue {
    * @throws {Error} When settings retrieval fails
    */
   async mounted() {
+    // Initialize notification helpers
+    this.notify = createNotifyHelpers(this.$notify);
+
     try {
       // Get activeDid from active_identity table (single source of truth)
       // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/views/HelpNotificationsView.vue

@@ -394,7 +394,7 @@ export default class HelpNotificationsView extends Vue {
   notifyingReminderTime = "";
 
   // Notification helper system
-  notify = createNotifyHelpers(this.$notify);
+  notify!: ReturnType<typeof createNotifyHelpers>;
 
   /**
    * Computed property for consistent button styling
@@ -430,6 +430,9 @@ export default class HelpNotificationsView extends Vue {
    * Handles errors gracefully with proper logging without exposing sensitive data.
    */
   async mounted() {
+    // Initialize notification helpers
+    this.notify = createNotifyHelpers(this.$notify);
+
     try {
       const registration = await navigator.serviceWorker?.ready;
       const fullSub = await registration?.pushManager.getSubscription();

src/views/NewActivityView.vue

@@ -32,9 +32,9 @@
           @click="expandOffersToUserAndMarkRead()"
         />
       </div>
-      <router-link to="/recent-offers-to-user" class="text-blue-500">
+      <a class="text-blue-500 cursor-pointer" @click="handleSeeAllOffersToUser">
         See&nbsp;all
-      </router-link>
+      </a>
     </div>
 
     <div v-if="showOffersDetails" class="ml-4 mt-4">
@@ -99,9 +99,12 @@
           @click="expandOffersToUserProjectsAndMarkRead()"
         />
       </div>
-      <router-link to="/recent-offers-to-user-projects" class="text-blue-500">
+      <a
+        class="text-blue-500 cursor-pointer"
+        @click="handleSeeAllOffersToUserProjects"
+      >
         See&nbsp;all
-      </router-link>
+      </a>
     </div>
 
     <div v-if="showOffersToUserProjectsDetails" class="ml-4 mt-4">
@@ -246,7 +249,7 @@ export default class NewActivityView extends Vue {
 
   async expandOffersToUserAndMarkRead() {
     this.showOffersDetails = !this.showOffersDetails;
-    if (this.showOffersDetails) {
+    if (this.showOffersDetails && this.newOffersToUser.length > 0) {
       await this.$updateSettings({
         lastAckedOfferToUserJwtId: this.newOffersToUser[0].jwtId,
       });
@@ -283,7 +286,10 @@ export default class NewActivityView extends Vue {
   async expandOffersToUserProjectsAndMarkRead() {
     this.showOffersToUserProjectsDetails =
       !this.showOffersToUserProjectsDetails;
-    if (this.showOffersToUserProjectsDetails) {
+    if (
+      this.showOffersToUserProjectsDetails &&
+      this.newOffersToUserProjects.length > 0
+    ) {
       await this.$updateSettings({
         lastAckedOfferToUserProjectsJwtId:
           this.newOffersToUserProjects[0].jwtId,
@@ -291,7 +297,7 @@ export default class NewActivityView extends Vue {
       // note that we don't update this.lastAckedOfferToUserProjectsJwtId in case
       // they later choose the last one to keep the offers as new
       this.notify.info(
-        "The offers are now marked as viewed. Click in the list to keep them as new.",
+        "The offers are marked as viewed. Click in the list to keep them as new.",
         TIMEOUTS.LONG,
       );
     }
@@ -319,5 +325,13 @@ export default class NewActivityView extends Vue {
       TIMEOUTS.STANDARD,
     );
   }
+
+  async handleSeeAllOffersToUser() {
+    this.$router.push("/recent-offers-to-user");
+  }
+
+  async handleSeeAllOffersToUserProjects() {
+    this.$router.push("/recent-offers-to-user-projects");
+  }
 }
 </script>

src/views/QuickActionBvcBeginView.vue

@@ -99,7 +99,7 @@ export default class QuickActionBvcBeginView extends Vue {
   $router!: Router;
 
   // Notification helper system
-  private notify = createNotifyHelpers(this.$notify);
+  private notify!: ReturnType<typeof createNotifyHelpers>;
 
   attended = true;
   gaveTime = true;
@@ -111,6 +111,9 @@ export default class QuickActionBvcBeginView extends Vue {
    * Uses America/Denver timezone for Bountiful location
    */
   async mounted() {
+    // Initialize notification helpers
+    this.notify = createNotifyHelpers(this.$notify);
+
     logger.debug(
       "[QuickActionBvcBeginView] Mounted - calculating meeting date",
     );

src/views/RecentOffersToUserProjectsView.vue

@@ -32,20 +32,20 @@
     </div>
 
     <InfiniteScroll @reached-bottom="loadMoreOffersToUserProjects">
-      <ul
-        data-testId="listRecentOffersToUserProjects"
-        class="border-t border-slate-300"
-      >
+      <ul data-testId="listRecentOffersToUserProjects">
         <li
           v-for="offer in newOffersToUserProjects"
           :key="offer.jwtId"
           class="mt-4 relative group"
         >
+          <!-- Last viewed separator -->
           <div
             v-if="offer.jwtId == lastAckedOfferToUserProjectsJwtId"
-            class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
+            class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
           >
-            You've already seen all the following
+            <span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
+              You've already seen all the following
+            </span>
           </div>
 
           <span>{{
@@ -147,6 +147,14 @@ export default class RecentOffersToUserView extends Vue {
       this.newOffersToUserProjects = offersToUserProjectsData.data;
       this.newOffersToUserProjectsAtEnd = !offersToUserProjectsData.hitLimit;
 
+      // Mark offers as read after data is loaded
+      if (this.newOffersToUserProjects.length > 0) {
+        await this.$updateSettings({
+          lastAckedOfferToUserProjectsJwtId:
+            this.newOffersToUserProjects[0].jwtId,
+        });
+      }
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       logger.error("Error retrieving settings & contacts:", err);

src/views/RecentOffersToUserView.vue

@@ -27,20 +27,20 @@
       </p>
     </div>
     <InfiniteScroll @reached-bottom="loadMoreOffersToUser">
-      <ul
-        data-testId="listRecentOffersToUser"
-        class="border-t border-slate-300"
-      >
+      <ul data-testId="listRecentOffersToUser">
         <li
           v-for="offer in newOffersToUser"
           :key="offer.jwtId"
           class="mt-4 relative group"
         >
+          <!-- Last viewed separator -->
           <div
             v-if="offer.jwtId == lastAckedOfferToUserJwtId"
-            class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
+            class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
           >
-            You've already seen all the following
+            <span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
+              You've already seen all the following
+            </span>
           </div>
 
           <span>{{
@@ -138,6 +138,13 @@ export default class RecentOffersToUserView extends Vue {
       this.newOffersToUser = offersToUserData.data;
       this.newOffersToUserAtEnd = !offersToUserData.hitLimit;
 
+      // Mark offers as read after data is loaded
+      if (this.newOffersToUser.length > 0) {
+        await this.$updateSettings({
+          lastAckedOfferToUserJwtId: this.newOffersToUser[0].jwtId,
+        });
+      }
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       logger.error("Error retrieving settings & contacts:", err);

src/views/SeedBackupView.vue

@@ -162,7 +162,7 @@ export default class SeedBackupView extends Vue {
   showSeed = false;
 
   // Notification helper system
-  notify = createNotifyHelpers(this.$notify);
+  notify!: ReturnType<typeof createNotifyHelpers>;
 
   /**
    * Computed property for consistent copy feedback styling
@@ -204,6 +204,9 @@ export default class SeedBackupView extends Vue {
    * Handles errors gracefully with user notifications.
    */
   async created() {
+    // Initialize notification helpers
+    this.notify = createNotifyHelpers(this.$notify);
+
     try {
       let activeDid = "";