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

src/views/ClaimView.vue

@@ -45,21 +45,7 @@
             </div>
             <div>
               <fa icon="user" class="fa-fw text-slate-400" />
-              {{ veriClaim.issuer }}
-              <span v-if="!serverUtil.isEmptyOrHiddenDid(veriClaim.issuer)">
-                <button
-                  @click="
-                    libsUtil.doCopyTwoSecRedo(
-                      veriClaim.issuer as string,
-                      () => (showDidCopy = !showDidCopy),
-                    )
-                  "
-                  class="ml-2 mr-2"
-                >
-                  <fa icon="copy" class="text-slate-400 fa-fw" />
-                </button>
-                <span v-show="showDidCopy">Copied DID</span>
-              </span>
+              {{ didInfo(veriClaim.issuer) }}
             </div>
             <div>
               <fa icon="calendar" class="fa-fw text-slate-400" />
@@ -519,7 +505,6 @@ export default class ClaimView extends Vue {
   isRegistered = false;
   numConfsNotVisible = 0; // number of hidden DIDs in the confirmerIdList, minus the issuer if they aren't visible
   providersForGive: ProviderInfo[] = [];
-  showDidCopy = false;
   showIdCopy = false;
   showVeriClaimDump = false;
   veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;

src/views/HomeView.vue

@@ -198,7 +198,7 @@
 
       <div
         v-if="numNewOffersToUser"
-        @click="goToActivityToUserPage"
+        @click="goToActivityToUserPage()"
         class="border-t p-2 border-slate-300"
       >
         <div class="flex justify-center">

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>
+    <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"
-          @click="showOffersDetails = !showOffersDetails"
+        class="cursor-pointer ml-4 text-lg"
+        @click="expandOffersToUserAndMarkRead()"
       />
     </div>
-      <span class="text-lg font-medium">{{ newOffersToUser.length }}</span>
-    </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>