Icon for hidden DID entity

- Display EntityIcon for known entities, eye-slash icon for hidden entities, and the person-question icon for unknown entities
- Design tweaks (spacings, mostly)

src/components/ActivityListItem.vue

@@ -14,22 +14,27 @@
       class="flex items-center justify-between gap-2 text-lg bg-slate-200 border border-slate-300 border-b-0 rounded-t-md px-3 sm:px-4 py-1 sm:py-2"
     >
       <div class="flex items-center gap-2">
-        <div v-if="record.issuerDid">
         <EntityIcon
+          v-if="record.issuerDid && !isHiddenDid(record.issuerDid)"
           :entity-id="record.issuerDid"
           class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
         />
-        </div>
-        <div v-else>
         <font-awesome
+          v-else-if="isHiddenDid(record.issuerDid)"
+          icon="eye-slash"
+          class="text-slate-400 !size-[2rem]"
+        />
+        <font-awesome v-else
           icon="person-circle-question"
-            class="text-slate-300 text-[2rem]"
+          class="text-slate-400 !size-[2rem]"
         />
-        </div>
 
         <div>
-          <h3 class="font-semibold">
-            {{ record.issuer.known ? record.issuer.displayName : "" }}
+          <h3
+            v-if="record.issuer.known"
+            class="font-semibold leading-tight"
+          >
+            {{ record.issuer.displayName }}
           </h3>
           <p class="ms-auto text-xs text-slate-500 italic">
             {{ friendlyDate }}
@@ -46,7 +51,7 @@
       <!-- Record Image -->
       <div
         v-if="record.image"
-        class="bg-cover mb-6 -mt-3 sm:-mt-4 -mx-3 sm:-mx-4"
+        class="bg-cover mb-4 -mt-3 sm:-mt-4 -mx-3 sm:-mx-4"
         :style="`background-image: url(${record.image});`"
       >
         <a
@@ -63,11 +68,11 @@
       </div>
 
       <div
-        class="relative flex justify-between gap-4 max-w-[40rem] mx-auto mb-5"
+        class="relative flex justify-between gap-4 max-w-[40rem] mx-auto mb-3"
       >
         <!-- Source -->
         <div
-          class="w-[8rem] sm:w-[12rem] text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
+          class="w-[7rem] sm:w-[12rem] text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
         >
           <div class="relative w-fit mx-auto">
             <div>
@@ -82,10 +87,16 @@
               <!-- Identicon for DIDs -->
               <div v-else-if="record.agentDid">
                 <EntityIcon
+                  v-if="!isHiddenDid(record.agentDid)"
                   :entity-id="record.agentDid"
                   :profile-image-url="record.issuer.profileImageUrl"
                   class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]"
                 />
+                <font-awesome
+                  v-else
+                  icon="eye-slash"
+                  class="text-slate-300 !size-[3rem] sm:!size-[4rem]"
+                />
               </div>
               <!-- Unknown Person -->
               <div v-else>
@@ -110,9 +121,9 @@
 
         <!-- Arrow -->
         <div
-          class="absolute inset-x-[8rem] sm:inset-x-[12rem] mx-2 top-1/2 -translate-y-1/2"
+          class="absolute inset-x-[7rem] sm:inset-x-[12rem] mx-2 top-1/2 -translate-y-1/2"
         >
-          <div class="text-sm text-center leading-none font-semibold pe-[15px]">
+          <div class="text-sm text-center leading-none font-semibold pe-2 sm:pe-4">
             {{ fetchAmount }}
           </div>
 
@@ -129,7 +140,7 @@
 
         <!-- Destination -->
         <div
-          class="w-[8rem] sm:w-[12rem] text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
+          class="w-[7rem] sm:w-[12rem] text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
         >
           <div class="relative w-fit mx-auto">
             <div>
@@ -144,10 +155,16 @@
               <!-- Identicon for DIDs -->
               <div v-else-if="record.recipientDid">
                 <EntityIcon
+                  v-if="!isHiddenDid(record.recipientDid)"
                   :entity-id="record.recipientDid"
                   :profile-image-url="record.receiver.profileImageUrl"
                   class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]"
                 />
+                <font-awesome
+                  v-else
+                  icon="eye-slash"
+                  class="text-slate-300 !size-[3rem] sm:!size-[4rem]"
+                />
               </div>
               <!-- Unknown Person -->
               <div v-else>
@@ -186,7 +203,7 @@ import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
 import { GiveRecordWithContactInfo } from "../types";
 import EntityIcon from "./EntityIcon.vue";
 import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util";
-import { containsHiddenDid } from "../libs/endorserServer";
+import { containsHiddenDid, isHiddenDid } from "../libs/endorserServer";
 import ProjectIcon from "./ProjectIcon.vue";
 
 @Component({
@@ -202,6 +219,8 @@ export default class ActivityListItem extends Vue {
   @Prop() activeDid!: string;
   @Prop() confirmerIdList?: string[];
 
+  isHiddenDid = isHiddenDid;
+
   @Emit()
   cacheImage(image: string) {
     return image;