add marker in feed to show where they've seen claims, plus other small clean-up

src/views/HomeView.vue

@@ -57,12 +57,12 @@
           v-for="contact in allContacts"
           :key="contact.did"
           @click="openDialog(contact)"
-          style="color: blue"
+          class="text-blue-500"
         >
            {{ contact.name }},
         </button>
         or
-        <button @click="openDialog()" style="color: blue">
+        <button @click="openDialog()" class="text-blue-500">
           nobody in particular
         </button>
       </div>
@@ -85,8 +85,14 @@
         <li
           class="border-b border-slate-300"
           v-for="record in feedData"
-          :key="record.id"
+          :key="record.jwtId"
         >
+          <div
+            class="border-b text-orange-400 px-8 py-4"
+            v-if="record.jwtId == feedLastViewedId"
+          >
+            You've seen all claims below.
+          </div>
           {{ this.giveDescription(record) }}
         </li>
       </ul>
@@ -129,8 +135,8 @@ export default class HomeView extends Vue {
   feedAllLoaded = false;
   feedData = [];
   feedPreviousOldestId = null;
+  feedLastViewedId = null;
   isHiddenSpinner = true;
-  showInput = false;
 
   // 'created' hook runs when the Vue instance is first created
   async created() {
@@ -140,6 +146,7 @@ export default class HomeView extends Vue {
     const settings = await db.settings.get(MASTER_SETTINGS_KEY);
     this.activeDid = settings?.activeDid || "";
     this.allContacts = await db.contacts.toArray();
+    this.feedLastViewedId = settings?.lastViewedClaimId;
   }
 
   // 'mounted' hook runs after initial render
@@ -168,7 +175,19 @@ export default class HomeView extends Vue {
           this.feedData = this.feedData.concat(results.data);
           //console.log("Feed data:", this.feedData);
           this.feedAllLoaded = results.hitLimit;
-          this.feedPreviousOldestId = results.data[results.data.length - 1].id;
+          this.feedPreviousOldestId =
+            results.data[results.data.length - 1].jwtId;
+          if (
+            this.feedLastViewedId == null ||
+            this.feedLastViewedId < results.data[0].jwtId
+          ) {
+            // save it to storage
+            await db.open();
+            db.settings.update(MASTER_SETTINGS_KEY, {
+              lastViewedClaimId: results.data[0].jwtId,
+            });
+            // but not for this page because we need to remember what it was before
+          }
         }
       })
       .catch((e) => {
@@ -190,7 +209,10 @@ export default class HomeView extends Vue {
         this.allAccounts
       );
       //console.log("about to parse from", this.activeDid, account?.identity);
-      const identity = JSON.parse(account?.identity || "undefined");
+      const identity = JSON.parse(account?.identity || "null");
+      if (!identity) {
+        throw new Error("No identity found.");
+      }
       const token = await accessToken(identity);
       headers["Authorization"] = "Bearer " + token;
     } else {
@@ -278,7 +300,10 @@ export default class HomeView extends Vue {
       this.allAccounts
     );
     //console.log("about to parse from", this.activeDid, account?.identity);
-    const identity = JSON.parse(account?.identity || "undefined");
+    const identity = JSON.parse(account?.identity || "null");
+    if (!identity) {
+      throw new Error("No identity found.");
+    }
     createAndSubmitGive(
       this.axios,
       this.apiServer,