fix problem with duplicates in feed, plus some other UI tweaks

src/views/HomeView.vue

@@ -85,7 +85,7 @@
         </p>
         <router-link
           :to="{ name: 'start' }"
-          class="block text-center text-md font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
+          class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
         >
           Create An Identifier</router-link
         >
@@ -201,7 +201,7 @@
             :key="record.jwtId"
           >
             <div
-              class="border-b border-dashed border-slate-400 text-orange-400 pb-2 mb-2 font-bold uppercase text-sm"
+              class="border-b border-dashed border-slate-400 text-orange-400 pb-2 mb-2 font-bold text-sm"
               v-if="record.jwtId == feedLastViewedClaimId"
             >
               You've already seen all the following
@@ -491,7 +491,10 @@ export default class HomeView extends Vue {
    * @param payload is the flag from the InfiniteScroll indicating if it should load
    **/
   public async loadMoreGives(payload: boolean) {
-    if (payload) {
+    // Since feed now loads projects along the way, it takes longer
+    // and the InfiniteScroll component triggers a load before finished.
+    // One alternative is to totally separate the project link loading.
+    if (payload && !this.isFeedLoading) {
       this.updateAllFeed();
     }
   }
@@ -529,6 +532,9 @@ export default class HomeView extends Vue {
             // recipient.did is for legacy data, before March 2023
             const recipientDid =
               claim.recipient?.identifier || (claim.recipient as any)?.did; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+            // This has indeed proven problematic. See loadMoreGives
+            // We should display it immediately and then get the plan later.
             const plan = await getPlanFromCache(
               record.fulfillsPlanHandleId,
               identity,
@@ -618,7 +624,7 @@ export default class HomeView extends Vue {
     const beforeQuery = beforeId == null ? "" : "&beforeId=" + beforeId;
     const response = await fetch(
       endorserApiServer +
-        "/api/v2/report/gives?giftNotTrade=true&" +
+        "/api/v2/report/gives?giftNotTrade=true" +
         beforeQuery,
       {
         method: "GET",

src/views/ProjectViewView.vue

@@ -5,7 +5,7 @@
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="ViewBreadcrumb">
       <h1 class="text-lg text-center font-light relative px-7">
         <!-- Back -->
         <button
@@ -15,11 +15,12 @@
           <fa icon="chevron-left" class="fa-fw"></fa>
         </button>
         Idea
+        <h2 class="text-xl font-semibold">{{ name }}</h2>
       </h1>
     </div>
 
     <!-- Project Details -->
-    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
+    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mt-4">
       <div>
         <div class="block pb-4 flex gap-4">
           <div class="flex-none w-16 pt-1">
@@ -31,7 +32,6 @@
           </div>
 
           <div class="overflow-hidden">
-            <h2 class="text-xl font-semibold">{{ name }}</h2>
             <div class="text-sm mb-3">
               <div class="truncate">
                 <fa icon="user" class="fa-fw text-slate-400"></fa>
@@ -113,7 +113,7 @@
       </button>
     </div>
 
-    <div v-if="activeDid" class="mb-4">
+    <div v-if="activeDid" class="mt-4">
       <div class="text-center">
         <button
           @click="openOfferDialog()"
@@ -127,7 +127,7 @@
 
     <div v-if="activeDid">
       <div class="text-center">
-        <p class="mt-2 mb-4 text-center">Record a contribution from:</p>
+        <p class="mt-2 mt-4 text-center">Record a contribution from:</p>
       </div>
       <ul
         class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5"
@@ -184,9 +184,7 @@
     <!-- Offers & Gifts to & from this -->
     <div class="grid items-start grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
       <div class="bg-slate-100 px-4 py-3 rounded-md">
-        <h3 class="text-sm font-semibold mb-3">
-          Offered To This Idea
-        </h3>
+        <h3 class="text-sm font-semibold mb-3">Offered To This Idea</h3>
 
         <div v-if="offersToThis.length === 0">
           (None yet. Wanna