From 5d9f455fc8744ddb3c325d899d8b0f664c2dabc0 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Tue, 16 Sep 2025 18:10:17 +0800
Subject: [PATCH] feat: move mark-as-read logic from navigation to view loading

- Remove mark-as-read logic from NewActivityView navigation handlers
- Add mark-as-read logic to RecentOffersToUserView and RecentOffersToUserProjectsView after data loading
- Improve "You've already seen all the following" marker positioning
- Update marker styling with dashed border and centered text

This ensures the marker appears at the correct position in the list
instead of always at the top, providing better UX when viewing offers.
---
 src/views/NewActivityView.vue                |  2 --
 src/views/RecentOffersToUserProjectsView.vue | 21 ++++++++++++++------
 src/views/RecentOffersToUserView.vue         | 20 +++++++++++++------
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/views/NewActivityView.vue b/src/views/NewActivityView.vue
index a37ca36a..233a8f4d 100644
--- a/src/views/NewActivityView.vue
+++ b/src/views/NewActivityView.vue
@@ -322,12 +322,10 @@ export default class NewActivityView extends Vue {
   }
 
   async handleSeeAllOffersToUser() {
-    await this.expandOffersToUserAndMarkRead(true);
     this.$router.push("/recent-offers-to-user");
   }
 
   async handleSeeAllOffersToUserProjects() {
-    await this.expandOffersToUserProjectsAndMarkRead(true);
     this.$router.push("/recent-offers-to-user-projects");
   }
 }
diff --git a/src/views/RecentOffersToUserProjectsView.vue b/src/views/RecentOffersToUserProjectsView.vue
index c294d053..4125f983 100644
--- a/src/views/RecentOffersToUserProjectsView.vue
+++ b/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>{{
@@ -142,6 +142,15 @@ 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,
+        });
+        this.notify.info("The offers are marked as viewed.", TIMEOUTS.LONG);
+      }
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       logger.error("Error retrieving settings & contacts:", err);
diff --git a/src/views/RecentOffersToUserView.vue b/src/views/RecentOffersToUserView.vue
index 5996f7ce..b6bc5809 100644
--- a/src/views/RecentOffersToUserView.vue
+++ b/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>{{
@@ -133,6 +133,14 @@ 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,
+        });
+        this.notify.info("The offers are marked as viewed.", TIMEOUTS.LONG);
+      }
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       logger.error("Error retrieving settings & contacts:", err);