show in description when recipient is a project (not just Anonymous)

src/views/HomeView.vue

@@ -200,20 +200,20 @@
             </div>
 
             <div class="grid grid-cols-12">
-              <span class="col-span-11 justify-self-start">
+              <span class="col-span-1 justify-self-start">
                 <span>
                   <fa
                     v-if="record.giver.known || record.receiver.known"
                     icon="circle-user"
-                    class="col-span-1 pt-1 pl-0 pr-3 text-slate-500"
-                  />
-                  <fa
-                    v-else
-                    icon="gift"
-                    class="col-span-1 pt-1 pl-3 pr-0 text-slate-500"
+                    class="pt-1 text-slate-500"
                   />
+                  <fa v-else icon="gift" class="pt-1 pl-3 text-slate-500" />
+                </span>
+              </span>
+              <span class="col-span-10 justify-self-stretch">
+                <span class="pl-2">
+                  {{ giveDescription(record) }}
                 </span>
-                {{ giveDescription(record) }}
                 <a @click="onClickLoadClaim(record.jwtId)">
                   <fa
                     icon="file-lines"
@@ -221,16 +221,15 @@
                   ></fa>
                 </a>
               </span>
-              <span class="col-span-1 justify-self-end shrink">
+              <span class="col-span-1 justify-self-end">
                 <router-link
                   v-if="record.fulfillsPlanHandleId"
                   :to="
                     '/project/' +
                     encodeURIComponent(record.fulfillsPlanHandleId)
                   "
-                  class="justify-end"
                 >
-                  <fa icon="hammer" class="ml-4 pl-2 text-blue-500"></fa>
+                  <fa icon="hammer" class="text-blue-500"></fa>
                 </router-link>
               </span>
             </div>
@@ -296,6 +295,7 @@ interface GiveRecordWithContactInfo extends GiveSummaryRecord {
     known: boolean;
   };
   image: string;
+  recipientProjectName: string | undefined;
   receiver: {
     displayName: string;
     known: boolean;
@@ -488,6 +488,14 @@ 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
+              const plan = await getPlanFromCache(
+                record.fulfillsPlanHandleId,
+                identity,
+                this.axios,
+                this.apiServer,
+              );
+
+              // check if the record should be filtered out
               let anyMatch = false;
               if (
                 this.isFeedFilteredByVisible &&
@@ -499,12 +507,6 @@ export default class HomeView extends Vue {
               if (!anyMatch && this.isFeedFilteredByNearby) {
                 // check if the associated project has a location inside user's search box
                 if (record.fulfillsPlanHandleId) {
-                  const plan = await getPlanFromCache(
-                    record.fulfillsPlanHandleId,
-                    identity,
-                    this.axios,
-                    this.apiServer,
-                  );
                   if (plan?.locLat && plan?.locLon) {
                     if (this.latLongInAnySearchBox(plan.locLat, plan.locLon)) {
                       anyMatch = true;
@@ -515,6 +517,7 @@ export default class HomeView extends Vue {
               if (this.isAnyFeedFilterOn && !anyMatch) {
                 return null;
               }
+
               return {
                 ...record,
                 giver: didInfoForContact(
@@ -524,6 +527,7 @@ export default class HomeView extends Vue {
                   this.allMyDids,
                 ),
                 image: claim.image,
+                recipientProjectName: plan?.name,
                 receiver: didInfoForContact(
                   recipientDid,
                   this.activeDid,
@@ -632,12 +636,28 @@ export default class HomeView extends Vue {
       return `${giverInfo.displayName} gave to ${recipientInfo.displayName}: ${gaveAmount}`;
     } else if (giverInfo.known) {
       // giver is named but recipient is not
+
+      // show the project name if to one
+      if (giveRecord.recipientProjectName) {
+        // retrieve the project name
+        return `${giverInfo.displayName} gave: ${gaveAmount} (to the project ${giveRecord.recipientProjectName})`;
+      }
+
+      // it's not to a project
       return `${giverInfo.displayName} gave: ${gaveAmount} (to ${recipientInfo.displayName})`;
     } else if (recipientInfo.known) {
       // recipient is named but giver is not
       return `${recipientInfo.displayName} received: ${gaveAmount} (from ${giverInfo.displayName})`;
     } else {
       // neither giver nor recipient are named
+
+      // show the project name if to one
+      if (giveRecord.recipientProjectName) {
+        // retrieve the project name
+        return `${gaveAmount} (to the project ${giveRecord.recipientProjectName})`;
+      }
+
+      // it's not to a project
       let peopleInfo;
       if (giverInfo.displayName === recipientInfo.displayName) {
         peopleInfo = `between two who are ${giverInfo.displayName}`;