Clickable person & project icons

- Known entities get routed to their corresponding detail views
- Unknown entities pop up a notification

src/components/ActivityListItem.vue

@@ -14,22 +14,37 @@
       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">
+        <router-link
+          v-if="record.issuerDid && !isHiddenDid(record.issuerDid)"
+          :to="{
+            path: '/did/' + encodeURIComponent(record.issuerDid),
+          }"
+          title="More details about this person"
+        >
           <EntityIcon
             :entity-id="record.issuerDid"
             class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
           />
-        </div>
-        <div v-else>
-          <font-awesome
-            icon="person-circle-question"
-            class="text-slate-300 text-[2rem]"
-          />
-        </div>
+        </router-link>
+        <font-awesome
+          v-else-if="isHiddenDid(record.issuerDid)"
+          icon="eye-slash"
+          class="text-slate-400 !size-[2rem] cursor-pointer"
+          @click="notifyHiddenPerson"
+        />
+        <font-awesome
+          v-else
+          icon="person-circle-question"
+          class="text-slate-400 !size-[2rem] cursor-pointer"
+          @click="notifyUnknownPerson"
+        />
 
         <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 +61,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,33 +78,55 @@
       </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>
               <!-- Project Icon -->
               <div v-if="record.providerPlanName">
-                <ProjectIcon
-                  :entity-id="record.providerPlanName"
-                  :icon-size="48"
-                  class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
-                />
+                <router-link
+                  :to="{
+                    path: '/project/' + encodeURIComponent(record.providerPlanHandleId || ''),
+                  }"
+                  title="View project details"
+                >
+                  <ProjectIcon
+                    :entity-id="record.providerPlanHandleId || ''"
+                    :icon-size="48"
+                    class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
+                  />
+                </router-link>
               </div>
               <!-- Identicon for DIDs -->
               <div v-else-if="record.agentDid">
-                <EntityIcon
-                  :entity-id="record.agentDid"
-                  :profile-image-url="record.issuer.profileImageUrl"
-                  class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]"
+                <router-link
+                  v-if="!isHiddenDid(record.agentDid)"
+                  :to="{
+                    path: '/did/' + encodeURIComponent(record.agentDid),
+                  }"
+                  title="More details about this person"
+                >
+                  <EntityIcon
+                    :entity-id="record.agentDid"
+                    :profile-image-url="record.issuer.profileImageUrl"
+                    class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]"
+                  />
+                </router-link>
+                <font-awesome
+                  v-else
+                  @click="notifyHiddenPerson"
+                  icon="eye-slash"
+                  class="text-slate-300 !size-[3rem] sm:!size-[4rem]"
                 />
               </div>
               <!-- Unknown Person -->
               <div v-else>
                 <font-awesome
+                  @click="notifyUnknownPerson"
                   icon="person-circle-question"
                   class="text-slate-300 text-[3rem] sm:text-[4rem]"
                 />
@@ -110,9 +147,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,29 +166,51 @@
 
         <!-- 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>
               <!-- Project Icon -->
               <div v-if="record.recipientProjectName">
-                <ProjectIcon
-                  :entity-id="record.recipientProjectName"
-                  :icon-size="48"
-                  class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
-                />
+                <router-link
+                  :to="{
+                    path: '/project/' + encodeURIComponent(record.fulfillsPlanHandleId || ''),
+                  }"
+                  title="View project details"
+                >
+                  <ProjectIcon
+                    :entity-id="record.fulfillsPlanHandleId || ''"
+                    :icon-size="48"
+                    class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
+                  />
+                </router-link>
               </div>
               <!-- Identicon for DIDs -->
               <div v-else-if="record.recipientDid">
-                <EntityIcon
-                  :entity-id="record.recipientDid"
-                  :profile-image-url="record.receiver.profileImageUrl"
-                  class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]"
+                <router-link
+                  v-if="!isHiddenDid(record.recipientDid)"
+                  :to="{
+                    path: '/did/' + encodeURIComponent(record.recipientDid),
+                  }"
+                  title="More details about this person"
+                >
+                  <EntityIcon
+                    :entity-id="record.recipientDid"
+                    :profile-image-url="record.receiver.profileImageUrl"
+                    class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]"
+                  />
+                </router-link>
+                <font-awesome
+                  v-else
+                  @click="notifyHiddenPerson"
+                  icon="eye-slash"
+                  class="text-slate-300 !size-[3rem] sm:!size-[4rem]"
                 />
               </div>
               <!-- Unknown Person -->
               <div v-else>
                 <font-awesome
+                  @click="notifyUnknownPerson"
                   icon="person-circle-question"
                   class="text-slate-300 text-[3rem] sm:text-[4rem]"
                 />
@@ -186,8 +245,9 @@ 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";
+import { NotificationIface } from "../constants/app";
 
 @Component({
   components: {
@@ -202,6 +262,33 @@ export default class ActivityListItem extends Vue {
   @Prop() activeDid!: string;
   @Prop() confirmerIdList?: string[];
 
+  isHiddenDid = isHiddenDid;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  notifyHiddenPerson() {
+    this.$notify(
+      {
+        group: "alert",
+        type: "warning",
+        title: "Hidden Person",
+        text: "This person is not visible to you.",
+      },
+      3000
+    );
+  }
+
+  notifyUnknownPerson() {
+    this.$notify(
+      {
+        group: "alert",
+        type: "warning",
+        title: "Unknown Person",
+        text: "This person is not known.",
+      },
+      3000
+    );
+  }
+
   @Emit()
   cacheImage(image: string) {
     return image;