on home page: fix images for all persons, remove excessive verbiage, fix project icon, allow click on image to close

src/components/ActivityListItem.vue

@@ -12,15 +12,21 @@
 
     <div class="bg-slate-100 rounded-t-md border border-slate-300 p-3 sm:p-4">
       <div class="flex items-center gap-2 mb-6">
-        <img
-          src="https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg"
-          class="size-8 object-cover rounded-full"
-        />
+
+        <div v-if="record.issuerDid">
+          <EntityIcon
+            :entity-id="record.issuerDid"
+            class="rounded size-[3rem] sm:size-[4rem] object-cover"
+          />
+        </div>
+        <div v-else>
+          <font-awesome icon="person-circle-question" class="text-slate-300 text-[3rem] sm:text-[4rem]" />
+        </div>
 
         <div>
           <h3 class="font-semibold">
             {{
-              record.giver.known ? record.giver.displayName : "Anonymous Giver"
+              record.issuer.known ? record.issuer.displayName : ""
             }}
           </h3>
           <p class="ms-auto text-xs text-slate-500 italic">
@@ -54,48 +60,40 @@
           class="w-28 sm:w-40 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
         >
           <div class="relative w-fit mx-auto">
-            <template v-if="record.giver.profileImageUrl">
-              <EntityIcon
-                :profile-image-url="record.giver.profileImageUrl"
-                :class="[
-                  !record.providerPlanName
-                    ? 'rounded-full size-[3rem] sm:size-[4rem] object-cover'
-                    : 'rounded size-[3rem] sm:size-[4rem] object-cover',
-                ]"
-              />
-            </template>
-            <template v-else>
+            <div>
               <!-- Project Icon -->
-              <template v-if="record.providerPlanName">
+              <div v-if="record.providerPlanName">
                 <ProjectIcon
                   :entity-id="record.providerPlanName"
                   :icon-size="48"
                   class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
                 />
-              </template>
+              </div>
               <!-- Identicon for DIDs -->
-              <template v-else-if="record.giver.did">
-                <img
-                  :src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
-                  class="rounded-full size-[3rem] sm:size-[4rem]"
-                  alt="Identicon"
+              <div v-else-if="record.agentDid">
+                <EntityIcon
+                  :entity-id="record.agentDid"
+                  :profile-image-url="record.issuer.profileImageUrl"
+                  class="rounded size-[3rem] sm:size-[4rem]"
                 />
-              </template>
+              </div>
               <!-- Unknown Person -->
-              <template v-else>
+              <div v-else>
                 <font-awesome
                   icon="person-circle-question"
                   class="text-slate-300 text-[3rem] sm:text-[4rem]"
                 />
-              </template>
-            </template>
+              </div>
+            </div>
           </div>
           <div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
-            <font-awesome
-              :icon="record.providerPlanName ? 'building' : 'user'"
-              class="fa-fw text-slate-400"
-            />
-            {{ record.giver.displayName }}
+            <div v-if="record.providerPlanName || record.giver.known">
+              <font-awesome
+                :icon="record.providerPlanName ? 'users' : 'user'"
+                class="fa-fw text-slate-400"
+              />
+              {{ record.providerPlanName || record.giver.displayName }}
+            </div>
           </div>
         </div>
 
@@ -123,48 +121,40 @@
           class="w-28 sm:w-40 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
         >
           <div class="relative w-fit mx-auto">
-            <template v-if="record.receiver.profileImageUrl">
-              <EntityIcon
-                :profile-image-url="record.receiver.profileImageUrl"
-                :class="[
-                  !record.recipientProjectName
-                    ? 'rounded-full size-[3rem] sm:size-[4rem] object-cover'
-                    : 'rounded size-[3rem] sm:size-[4rem] object-cover',
-                ]"
-              />
-            </template>
-            <template v-else>
+            <div>
               <!-- Project Icon -->
-              <template v-if="record.recipientProjectName">
+              <div v-if="record.recipientProjectName">
                 <ProjectIcon
                   :entity-id="record.recipientProjectName"
                   :icon-size="48"
                   class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
                 />
-              </template>
+              </div>
               <!-- Identicon for DIDs -->
-              <template v-else-if="record.receiver.did">
-                <img
-                  :src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
-                  class="rounded-full size-[3rem] sm:size-[4rem]"
-                  alt="Identicon"
+              <div v-else-if="record.recipientDid">
+                <EntityIcon
+                  :entity-id="record.recipientDid"
+                  :profile-image-url="record.receiver.profileImageUrl"
+                  class="rounded size-[3rem] sm:size-[4rem]"
                 />
-              </template>
+              </div>
               <!-- Unknown Person -->
-              <template v-else>
+              <div v-else>
                 <font-awesome
                   icon="person-circle-question"
                   class="text-slate-300 text-[3rem] sm:text-[4rem]"
                 />
-              </template>
-            </template>
+              </div>
+            </div>
           </div>
           <div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
-            <font-awesome
-              :icon="record.recipientProjectName ? 'building' : 'user'"
-              class="fa-fw text-slate-400"
-            />
-            {{ record.receiver.displayName }}
+            <div v-if="record.recipientProjectName || record.receiver.known">
+              <font-awesome
+                :icon="record.recipientProjectName ? 'users' : 'user'"
+                class="fa-fw text-slate-400"
+              />
+              {{ record.recipientProjectName || record.receiver.displayName }}
+            </div>
           </div>
         </div>
       </div>
@@ -175,7 +165,6 @@
           {{ description }}
         </a>
       </p>
-      <p class="text-sm">{{ subDescription }}</p>
     </div>
 
     <div
@@ -220,53 +209,6 @@ export default class ActivityListItem extends Vue {
     return amount;
   }
 
-  private formatParticipantInfo(): string {
-    const { giver, receiver } = this.record;
-
-    // Both participants are known contacts
-    if (giver.known && receiver.known) {
-      return `${giver.displayName} gave to ${receiver.displayName}`;
-    }
-
-    // Only giver is known
-    if (giver.known) {
-      const recipient = this.record.recipientProjectName
-        ? `the project "${this.record.recipientProjectName}"`
-        : receiver.displayName;
-      return `${giver.displayName} gave to ${recipient}`;
-    }
-
-    // Only receiver is known
-    if (receiver.known) {
-      const provider = this.record.providerPlanName
-        ? `the project "${this.record.providerPlanName}"`
-        : giver.displayName;
-      return `${receiver.displayName} received from ${provider}`;
-    }
-
-    // Neither is known
-    return this.formatUnknownParticipants();
-  }
-
-  private formatUnknownParticipants(): string {
-    const { giver, receiver, providerPlanName, recipientProjectName } =
-      this.record;
-
-    if (providerPlanName || recipientProjectName) {
-      const from = providerPlanName
-        ? `the project "${providerPlanName}"`
-        : giver.displayName;
-      const to = recipientProjectName
-        ? `the project "${recipientProjectName}"`
-        : receiver.displayName;
-      return `from ${from} to ${to}`;
-    }
-
-    return giver.displayName === receiver.displayName
-      ? `between two who are ${giver.displayName}`
-      : `from ${giver.displayName} to ${receiver.displayName}`;
-  }
-
   get description(): string {
     const claim =
       (this.record.fullClaim as unknown).claim || this.record.fullClaim;
@@ -278,12 +220,6 @@ export default class ActivityListItem extends Vue {
     return `${claim.description}`;
   }
 
-  get subDescription(): string {
-    const participants = this.formatParticipantInfo();
-
-    return `${participants}`;
-  }
-
   private displayAmount(code: string, amt: number) {
     return `${amt} ${this.currencyShortWordForCode(code, amt === 1)}`;
   }
@@ -292,11 +228,6 @@ export default class ActivityListItem extends Vue {
     return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode;
   }
 
-  get formattedTimestamp() {
-    // Add your timestamp formatting logic here
-    return this.record.timestamp;
-  }
-
   get canConfirm(): boolean {
     if (!this.isRegistered) return false;
     if (!isGiveClaimType(this.record.fullClaim?.["@type"])) return false;