mark new-activity offers as seen, and mark them unseen again

src/views/NewActivityView.vue

@@ -16,26 +16,26 @@
     </div>
 
     <!-- Display a single row with the name of "New Offers To You" with a count. -->
-    <div class="new-offers-row flex justify-between items-center mb-4">
-      <div class="flex justify-between items-center">
-        <span class="text-lg font-medium">New Offers To You</span>
-        <fa
-          :icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
-          class="cursor-pointer ml-4"
-          @click="showOffersDetails = !showOffersDetails"
-        />
-      </div>
+    <div class="mb-4">
       <span class="text-lg font-medium">{{ newOffersToUser.length }}</span>
+      <span class="text-lg font-medium ml-4"
+        >New Offer{{ newOffersToUser.length === 1 ? "" : "s" }} To You</span
+      >
+      <fa
+        :icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
+        class="cursor-pointer ml-4 text-lg"
+        @click="expandOffersToUserAndMarkRead()"
+      />
     </div>
 
     <div v-if="showOffersDetails" class="ml-4">
-      <ul>
-        <li v-for="offer in newOffersToUser" :key="offer.id" class="mt-2">
+      <ul class="list-disc ml-4">
+        <li v-for="offer in newOffersToUser" :key="offer.id" class="mt-4 relative group">
           <span>{{
             didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
           }}</span>
           offers
-          <span v-if="offer.description">{{ offer.description }}</span>
+          <span v-if="offer.objectDescription">{{ offer.objectDescription }}</span>
           <span v-if="offer.amount">{{
             displayAmount(offer.unit, offer.amount)
           }}</span>
@@ -45,6 +45,14 @@
           >
             <fa icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
           </router-link>
+          <!-- New line that appears on hover -->
+          <div
+            @click="markOffersAsReadStartingWith(offer.jwtId)"
+            class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
+          >
+            <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
+            Click to keep all above as new offers
+          </div>
         </li>
       </ul>
     </div>
@@ -58,7 +66,7 @@ import GiftedDialog from "@/components/GiftedDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import EntityIcon from "@/components/EntityIcon.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { accountsDB, db, retrieveSettingsForActiveAccount, updateAccountSettings } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import {
   didInfo,
@@ -120,5 +128,49 @@ export default class NewActivityView extends Vue {
       );
     }
   }
+
+  async expandOffersToUserAndMarkRead() {
+    this.showOffersDetails = !this.showOffersDetails;
+    if (this.newOffersToUser.length > 0) {
+      await updateAccountSettings(this.activeDid, {
+        lastAckedOfferToUserJwtId: this.newOffersToUser[0].jwtId,
+      });
+      // note that we don't update this.lastAckedOfferToUserJwtId in case they
+      // later choose the last one to keep the offers as new
+    }
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        title: "Marked as Read",
+        text: "The offers are marked as viewed. Click in the list to keep them as new.",
+      },
+      5000,
+    );
+  }
+
+  async markOffersAsReadStartingWith(jwtId: string) {
+    const index = this.newOffersToUser.findIndex(offer => offer.jwtId === jwtId);
+    if (index !== -1 && index < this.newOffersToUser.length - 1) {
+      // Set to the next offer's jwtId
+      await updateAccountSettings(this.activeDid, {
+        lastAckedOfferToUserJwtId: this.newOffersToUser[index + 1].jwtId,
+      });
+    } else {
+      // it's the last entry (or not found), so just keep it the same
+      await updateAccountSettings(this.activeDid, {
+        lastAckedOfferToUserJwtId: this.lastAckedOfferToUserJwtId,
+      });
+    }
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        title: "Marked as Unread",
+        text: "All offers above that one are marked as unread.",
+      },
+      3000,
+    );
+  }
 }
 </script>