From e647af0777515a806176eab65239c149dfc4b278 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <jose.anomalist.design@gmail.com>
Date: Fri, 24 Oct 2025 13:26:36 +0800
Subject: [PATCH] refactor: convert entity display to list style

- Switch from grid display to list layout for persons and projects
- Re-styled special entities (unnamed, You) to match
- Added max-height limit to list in preparation for scrolling and displaying more items
---
 src/assets/styles/tailwind.css       |  2 +-
 src/components/EntityGrid.vue        | 17 ++-----------
 src/components/PersonCard.vue        | 38 +++++++++++++---------------
 src/components/ProjectCard.vue       | 35 ++++++++++++-------------
 src/components/ShowAllCard.vue       | 20 +++++++--------
 src/components/SpecialEntityCard.vue | 13 +++++-----
 6 files changed, 55 insertions(+), 70 deletions(-)

diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css
index 03063394..396d6b96 100644
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -38,7 +38,7 @@
 	}
 
 	.dialog {
-		@apply bg-white p-4 rounded-lg w-full max-w-lg;
+		@apply bg-white p-4 rounded-lg w-full max-w-lg max-h-[calc(100vh-3rem)] overflow-y-auto;
 	}
 
 	/* Markdown content styling to restore list elements */
diff --git a/src/components/EntityGrid.vue b/src/components/EntityGrid.vue
index ec5fe236..4e49c77c 100644
--- a/src/components/EntityGrid.vue
+++ b/src/components/EntityGrid.vue
@@ -2,7 +2,7 @@
 GiftedDialog.vue to provide a reusable grid layout * for displaying people,
 projects, and special entities with selection. * * @author Matthew Raymer */
 <template>
-  <ul :class="gridClasses">
+  <ul class="border-t border-slate-300 mb-4 max-h-[60vh] overflow-y-auto">
     <!-- Special entities (You, Unnamed) for people grids -->
     <template v-if="entityType === 'people'">
       <!-- "You" entity -->
@@ -205,19 +205,6 @@ export default class EntityGrid extends Vue {
     return "text-xs text-slate-500 italic col-span-full";
   }
 
-  /**
-   * Computed CSS classes for the grid layout
-   */
-  get gridClasses(): string {
-    const baseClasses = "grid gap-x-2 gap-y-4 text-center mb-4";
-
-    if (this.entityType === "projects") {
-      return `${baseClasses} grid-cols-3 md:grid-cols-4`;
-    } else {
-      return `${baseClasses} grid-cols-4 sm:grid-cols-5 md:grid-cols-6`;
-    }
-  }
-
   /**
    * Computed entities to display - uses function prop if provided, otherwise defaults
    */
@@ -231,7 +218,7 @@ export default class EntityGrid extends Vue {
     }
 
     // Default implementation for backward compatibility
-    const maxDisplay = this.entityType === "projects" ? 7 : this.maxItems;
+    const maxDisplay = this.entityType === "projects" ? 10 : this.maxItems;
     return this.entities.slice(0, maxDisplay);
   }
 
diff --git a/src/components/PersonCard.vue b/src/components/PersonCard.vue
index bf2b72b9..fd657634 100644
--- a/src/components/PersonCard.vue
+++ b/src/components/PersonCard.vue
@@ -3,30 +3,25 @@ GiftedDialog.vue to handle person entity display * with selection states and
 conflict detection. * * @author Matthew Raymer */
 <template>
   <li :class="cardClasses" @click="handleClick">
-    <div class="relative w-fit mx-auto">
+    <div>
       <EntityIcon
         v-if="person.did"
         :contact="person"
-        class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
+        class="!size-[2rem] border border-slate-300 bg-white overflow-hidden rounded-full"
       />
       <font-awesome
         v-else
         icon="circle-question"
         class="text-slate-400 text-5xl mb-1"
       />
-
-      <!-- Time icon overlay for contacts -->
-      <div
-        v-if="person.did && showTimeIcon"
-        class="rounded-full bg-slate-400 absolute bottom-0 right-0 p-1 translate-x-1/3"
-      >
-        <font-awesome icon="clock" class="block text-white text-xs w-[1em]" />
-      </div>
     </div>
 
-    <h3 :class="nameClasses">
-      {{ displayName }}
-    </h3>
+    <div class="overflow-hidden">
+      <h3 :class="nameClasses">
+        {{ displayName }}
+      </h3>
+      <p class="text-xs text-slate-500 truncate">{{ person.did }}</p>
+    </div>
   </li>
 </template>
 
@@ -81,29 +76,32 @@ export default class PersonCard extends Vue {
    * Computed CSS classes for the card
    */
   get cardClasses(): string {
+    const baseCardClasses =
+      "flex items-center gap-2 px-2 py-1.5 border-b border-slate-300";
+
     if (!this.selectable || this.conflicted) {
-      return "opacity-50 cursor-not-allowed";
+      return `${baseCardClasses} *:opacity-50 cursor-not-allowed`;
     }
-    return "cursor-pointer hover:bg-slate-50";
+
+    return `${baseCardClasses} cursor-pointer hover:bg-slate-50`;
   }
 
   /**
    * Computed CSS classes for the person name
    */
   get nameClasses(): string {
-    const baseClasses =
-      "text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden";
+    const baseNameClasses = "text-sm font-semibold truncate";
 
     if (this.conflicted) {
-      return `${baseClasses} text-slate-400`;
+      return `${baseNameClasses} text-slate-500`;
     }
 
     // Add italic styling for entities without set names
     if (!this.person.name) {
-      return `${baseClasses} italic text-slate-500`;
+      return `${baseNameClasses} italic text-slate-500`;
     }
 
-    return baseClasses;
+    return baseNameClasses;
   }
 
   /**
diff --git a/src/components/ProjectCard.vue b/src/components/ProjectCard.vue
index f0ba9e6c..953746aa 100644
--- a/src/components/ProjectCard.vue
+++ b/src/components/ProjectCard.vue
@@ -2,25 +2,26 @@
 GiftedDialog.vue to handle project entity display * with selection states and
 issuer information. * * @author Matthew Raymer */
 <template>
-  <li class="cursor-pointer" @click="handleClick">
-    <div class="relative w-fit mx-auto">
-      <ProjectIcon
-        :entity-id="project.handleId"
-        :icon-size="48"
-        :image-url="project.image"
-        class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
-      />
-    </div>
+  <li
+    class="flex items-center gap-2 px-2 py-1.5 border-b border-slate-300 hover:bg-slate-50 cursor-pointer"
+    @click="handleClick"
+  >
+    <ProjectIcon
+      :entity-id="project.handleId"
+      :icon-size="48"
+      :image-url="project.image"
+      class="!size-[2rem] border border-slate-300 bg-white overflow-hidden rounded-full"
+    />
 
-    <h3
-      class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
-    >
-      {{ project.name || unnamedProject }}
-    </h3>
+    <div class="overflow-hidden">
+      <h3 class="text-sm font-semibold truncate">
+        {{ project.name || unnamedProject }}
+      </h3>
 
-    <div class="text-xs text-slate-500 truncate">
-      <font-awesome icon="user" class="fa-fw text-slate-400" />
-      {{ issuerDisplayName }}
+      <div class="text-xs text-slate-500 truncate">
+        <font-awesome icon="user" class="text-slate-400" />
+        {{ issuerDisplayName }}
+      </div>
     </div>
   </li>
 </template>
diff --git a/src/components/ShowAllCard.vue b/src/components/ShowAllCard.vue
index b4a43c43..a0e841fc 100644
--- a/src/components/ShowAllCard.vue
+++ b/src/components/ShowAllCard.vue
@@ -2,14 +2,17 @@
 GiftedDialog.vue to handle "Show All" navigation * for both people and projects
 entity types. * * @author Matthew Raymer */
 <template>
-  <li class="cursor-pointer">
-    <router-link :to="navigationRoute" class="block text-center">
-      <font-awesome icon="circle-right" class="text-blue-500 text-5xl mb-1" />
-      <h3
-        class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
+  <li class="border-b border-slate-300 hover:bg-slate-50">
+    <router-link
+      :to="navigationRoute"
+      class="flex items-center gap-2 px-2 py-1.5 w-full cursor-pointer"
+    >
+      <font-awesome icon="circle-right" class="text-blue-500 text-[2rem]" />
+      <p
+        class="text-sm font-semibold text-ellipsis whitespace-nowrap overflow-hidden"
       >
         Show All
-      </h3>
+      </p>
     </router-link>
   </li>
 </template>
@@ -58,9 +61,4 @@ export default class ShowAllCard extends Vue {
 a {
   text-decoration: none;
 }
-
-a:hover .fa-circle-right {
-  transform: scale(1.1);
-  transition: transform 0.2s ease;
-}
 </style>
diff --git a/src/components/SpecialEntityCard.vue b/src/components/SpecialEntityCard.vue
index e489d003..30e6131c 100644
--- a/src/components/SpecialEntityCard.vue
+++ b/src/components/SpecialEntityCard.vue
@@ -63,23 +63,24 @@ export default class SpecialEntityCard extends Vue {
   conflictContext!: string;
 
   /**
-   * Computed CSS classes for the card container
+   * Computed CSS classes for the card
    */
   get cardClasses(): string {
-    const baseClasses = "block";
+    const baseCardClasses =
+      "flex items-center gap-2 px-2 py-1.5 border-b border-slate-300";
 
     if (!this.selectable || this.conflicted) {
-      return `${baseClasses} cursor-not-allowed opacity-50`;
+      return `${baseCardClasses} *:opacity-50 cursor-not-allowed`;
     }
 
-    return `${baseClasses} cursor-pointer`;
+    return `${baseCardClasses} cursor-pointer hover:bg-slate-50`;
   }
 
   /**
    * Computed CSS classes for the icon
    */
   get iconClasses(): string {
-    const baseClasses = "text-5xl mb-1";
+    const baseClasses = "text-[2rem]";
 
     if (this.conflicted) {
       return `${baseClasses} text-slate-400`;
@@ -101,7 +102,7 @@ export default class SpecialEntityCard extends Vue {
    */
   get nameClasses(): string {
     const baseClasses =
-      "text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden";
+      "text-sm font-semibold text-ellipsis whitespace-nowrap overflow-hidden";
 
     if (this.conflicted) {
       return `${baseClasses} text-slate-400`;