From 8f7d794962517b9e9ee5c68e894883c55dcd61e8 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <mraymer@osinetwork.net>
Date: Fri, 7 Mar 2025 12:58:14 +0000
Subject: [PATCH] fix: improve image handling and icon support

- Fix image load event handler signature
- Add alt text for accessibility
- Add building icon to FontAwesome library

Technical Changes:
- Update cacheImage event to pass only image URL
- Add proper alt text for activity images
- Add faBuilding icon to FontAwesome library

This improves image handling and accessibility while adding
needed icon support for the activity feed interface.
---
 src/components/ActivityListItem.vue | 89 +++++++++++++++++------------
 src/main.ts                         |  2 +
 2 files changed, 54 insertions(+), 37 deletions(-)

diff --git a/src/components/ActivityListItem.vue b/src/components/ActivityListItem.vue
index 3291fc1..5de7482 100644
--- a/src/components/ActivityListItem.vue
+++ b/src/components/ActivityListItem.vue
@@ -43,7 +43,8 @@
           <img
             class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
             :src="record.image"
-            @load="$emit('cacheImage', $event, record.image)"
+            @load="$emit('cacheImage', record.image)"
+            alt="Activity image"
           />
         </a>
       </div>
@@ -59,35 +60,41 @@
               <EntityIcon
                 :profile-image-url="record.giver.profileImageUrl"
                 :class="[
-                  record.giver.known
+                  !record.providerPlanName
                     ? 'rounded-full size-12 sm:size-24 object-cover'
                     : 'rounded size-12 sm:size-24 object-cover'
                 ]"
               />
             </template>
             <template v-else>
+              <!-- Project Icon -->
+              <template v-if="record.providerPlanName">
+                <ProjectIcon
+                  :entityId="record.providerPlanName"
+                  :iconSize="96"
+                  class="rounded size-12 sm:size-24"
+                />
+              </template>
               <!-- Identicon for DIDs -->
-              <img
-                v-if="record.giver.did"
-                :src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
-                :class="[
-                  record.giver.known
-                    ? 'rounded-full size-12 sm:size-24'
-                    : 'rounded size-12 sm:size-24'
-                ]"
-                alt="Identicon"
-              />
-              <!-- Fallback icon for projects -->
-              <fa
-                v-else
-                icon="person-circle-question"
-                class="text-slate-300 text-5xl sm:text-8xl"
-              />
+              <template v-else-if="record.giver.did">
+                <img
+                  :src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
+                  class="rounded-full size-12 sm:size-24"
+                  alt="Identicon"
+                />
+              </template>
+              <!-- Unknown Person -->
+              <template v-else>
+                <fa
+                  icon="person-circle-question"
+                  class="text-slate-300 text-5xl sm:text-8xl"
+                />
+              </template>
             </template>
           </div>
           <div class="text-xs mt-2 line-clamp-2">
             <fa
-              :icon="record.giver.known ? 'user' : 'hammer'"
+              :icon="record.providerPlanName ? 'building' : 'user'"
               class="fa-fw text-slate-400"
             />
             {{ record.giver.displayName }}
@@ -114,35 +121,41 @@
               <EntityIcon
                 :profile-image-url="record.receiver.profileImageUrl"
                 :class="[
-                  record.receiver.known
+                  !record.recipientProjectName
                     ? 'rounded-full size-12 sm:size-24 object-cover'
                     : 'rounded size-12 sm:size-24 object-cover'
                 ]"
               />
             </template>
             <template v-else>
+              <!-- Project Icon -->
+              <template v-if="record.recipientProjectName">
+                <ProjectIcon
+                  :entityId="record.recipientProjectName"
+                  :iconSize="96"
+                  class="rounded size-12 sm:size-24"
+                />
+              </template>
               <!-- Identicon for DIDs -->
-              <img
-                v-if="record.receiver.did"
-                :src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
-                :class="[
-                  record.receiver.known
-                    ? 'rounded-full size-12 sm:size-24'
-                    : 'rounded size-12 sm:size-24'
-                ]"
-                alt="Identicon"
-              />
-              <!-- Fallback icon for projects -->
-              <fa
-                v-else
-                icon="image"
-                class="text-slate-300 text-5xl sm:text-8xl"
-              />
+              <template v-else-if="record.receiver.did">
+                <img
+                  :src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
+                  class="rounded-full size-12 sm:size-24"
+                  alt="Identicon"
+                />
+              </template>
+              <!-- Unknown Person -->
+              <template v-else>
+                <fa
+                  icon="person-circle-question"
+                  class="text-slate-300 text-5xl sm:text-8xl"
+                />
+              </template>
             </template>
           </div>
           <div class="text-xs mt-2 line-clamp-2">
             <fa
-              :icon="record.receiver.known ? 'user' : 'hammer'"
+              :icon="record.recipientProjectName ? 'building' : 'user'"
               class="fa-fw text-slate-400"
             />
             {{ record.receiver.displayName }}
@@ -187,10 +200,12 @@ import { GiveRecordWithContactInfo } from "../types";
 import EntityIcon from "./EntityIcon.vue";
 import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util";
 import { containsHiddenDid } from "../libs/endorserServer";
+import ProjectIcon from "./ProjectIcon.vue";
 
 @Component({
   components: {
     EntityIcon,
+    ProjectIcon,
   },
 })
 export default class ActivityListItem extends Vue {
diff --git a/src/main.ts b/src/main.ts
index 04671f9..ee985b6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -88,6 +88,7 @@ import {
   faUser,
   faUsers,
   faXmark,
+  faBuilding,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -168,6 +169,7 @@ library.add(
   faUser,
   faUsers,
   faXmark,
+  faBuilding,
 );
 
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";