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 1/9] 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`;
-- 
2.30.2


From f7441f39e7b1e7bdfd7cd2e0f7c779ffb1caa3e5 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <jose.anomalist.design@gmail.com>
Date: Thu, 30 Oct 2025 17:31:18 +0800
Subject: [PATCH 2/9] feat: remove Show All navigation card from entity grids

- Remove ShowAllCard component and all related functionality
- Remove showAllRoute, showAllQueryParams, and hideShowAll props
- Remove shouldShowAll computed property from EntityGrid
- Clean up ShowAll-related code from EntitySelectionStep and GiftedDialog
- Delete ShowAllCard.vue component file
- Update component documentation to reflect removal

This simplifies the entity selection interface by removing the navigation
card that allowed users to view all entities in a separate view.
---
 src/components/EntityGrid.vue          | 32 ------------
 src/components/EntitySelectionStep.vue | 68 ++------------------------
 src/components/GiftedDialog.vue        |  2 -
 src/components/ShowAllCard.vue         | 64 ------------------------
 4 files changed, 3 insertions(+), 163 deletions(-)
 delete mode 100644 src/components/ShowAllCard.vue

diff --git a/src/components/EntityGrid.vue b/src/components/EntityGrid.vue
index 4e49c77c..a4d5aa55 100644
--- a/src/components/EntityGrid.vue
+++ b/src/components/EntityGrid.vue
@@ -63,14 +63,6 @@ projects, and special entities with selection. * * @author Matthew Raymer */
         @project-selected="handleProjectSelected"
       />
     </template>
-
-    <!-- Show All navigation -->
-    <ShowAllCard
-      v-if="shouldShowAll"
-      :entity-type="entityType"
-      :route-name="showAllRoute"
-      :query-params="showAllQueryParams"
-    />
   </ul>
 </template>
 
@@ -79,7 +71,6 @@ import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
 import PersonCard from "./PersonCard.vue";
 import ProjectCard from "./ProjectCard.vue";
 import SpecialEntityCard from "./SpecialEntityCard.vue";
-import ShowAllCard from "./ShowAllCard.vue";
 import { Contact } from "../db/tables/contacts";
 import { PlanData } from "../interfaces/records";
 import { NotificationIface } from "../constants/app";
@@ -93,7 +84,6 @@ import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
  * - Special entity integration (You, Unnamed)
  * - Conflict detection integration
  * - Empty state messaging
- * - Show All navigation
  * - Event delegation for entity selection
  * - Warning notifications for conflicted entities
  * - Template streamlined with computed CSS properties
@@ -104,7 +94,6 @@ import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
     PersonCard,
     ProjectCard,
     SpecialEntityCard,
-    ShowAllCard,
   },
 })
 export default class EntityGrid extends Vue {
@@ -144,14 +133,6 @@ export default class EntityGrid extends Vue {
   @Prop({ default: true })
   youSelectable!: boolean;
 
-  /** Route name for "Show All" navigation */
-  @Prop({ default: "" })
-  showAllRoute!: string;
-
-  /** Query parameters for "Show All" navigation */
-  @Prop({ default: () => ({}) })
-  showAllQueryParams!: Record<string, string>;
-
   /** Notification function from parent component */
   @Prop()
   notify?: (notification: NotificationIface, timeout?: number) => void;
@@ -160,10 +141,6 @@ export default class EntityGrid extends Vue {
   @Prop({ default: "other party" })
   conflictContext!: string;
 
-  /** Whether to hide the "Show All" navigation */
-  @Prop({ default: false })
-  hideShowAll!: boolean;
-
   /**
    * Function to determine which entities to display (allows parent control)
    *
@@ -233,15 +210,6 @@ export default class EntityGrid extends Vue {
     }
   }
 
-  /**
-   * Whether to show the "Show All" navigation
-   */
-  get shouldShowAll(): boolean {
-    return (
-      !this.hideShowAll && this.entities.length > 0 && this.showAllRoute !== ""
-    );
-  }
-
   /**
    * Whether the "You" entity is conflicted
    */
diff --git a/src/components/EntitySelectionStep.vue b/src/components/EntitySelectionStep.vue
index 2fb6bcac..b4fada43 100644
--- a/src/components/EntitySelectionStep.vue
+++ b/src/components/EntitySelectionStep.vue
@@ -3,10 +3,9 @@ from GiftedDialog.vue to handle the complete step 1 * entity selection interface
 with dynamic labeling and grid display. * * Features: * - Dynamic step labeling
 based on context * - EntityGrid integration for unified entity display * -
 Conflict detection and prevention * - Special entity handling (You, Unnamed) * -
-Show All navigation with context preservation * - Cancel functionality * - Event
-delegation for entity selection * - Warning notifications for conflicted
-entities * - Template streamlined with computed CSS properties * * @author
-Matthew Raymer */
+Cancel functionality * - Event delegation for entity selection * - Warning
+notifications for conflicted entities * - Template streamlined with computed CSS
+properties * * @author Matthew Raymer */
 <template>
   <div id="sectionGiftedGiver">
     <label class="block font-bold mb-4">
@@ -23,11 +22,8 @@ Matthew Raymer */
       :conflict-checker="conflictChecker"
       :show-you-entity="shouldShowYouEntity"
       :you-selectable="youSelectable"
-      :show-all-route="showAllRoute"
-      :show-all-query-params="showAllQueryParams"
       :notify="notify"
       :conflict-context="conflictContext"
-      :hide-show-all="hideShowAll"
       @entity-selected="handleEntitySelected"
     />
 
@@ -68,7 +64,6 @@ interface EntitySelectionEvent {
  * - EntityGrid integration for unified entity display
  * - Conflict detection and prevention
  * - Special entity handling (You, Unnamed)
- * - Show All navigation with context preservation
  * - Cancel functionality
  * - Event delegation for entity selection
  * - Warning notifications for conflicted entities
@@ -154,10 +149,6 @@ export default class EntitySelectionStep extends Vue {
   @Prop()
   notify?: (notification: NotificationIface, timeout?: number) => void;
 
-  /** Whether to hide the "Show All" navigation */
-  @Prop({ default: false })
-  hideShowAll!: boolean;
-
   /**
    * CSS classes for the cancel button
    */
@@ -222,59 +213,6 @@ export default class EntitySelectionStep extends Vue {
     return !this.conflictChecker(this.activeDid);
   }
 
-  /**
-   * Route name for "Show All" navigation
-   */
-  get showAllRoute(): string {
-    if (this.shouldShowProjects) {
-      return "discover";
-    } else if (this.allContacts.length > 0) {
-      return "contact-gift";
-    }
-    return "";
-  }
-
-  /**
-   * Query parameters for "Show All" navigation
-   */
-  get showAllQueryParams(): Record<string, string> {
-    const baseParams = {
-      stepType: this.stepType,
-      giverEntityType: this.giverEntityType,
-      recipientEntityType: this.recipientEntityType,
-      // Form field values to preserve
-      description: this.description,
-      amountInput: this.amountInput,
-      unitCode: this.unitCode,
-      offerId: this.offerId,
-      fromProjectId: this.fromProjectId,
-      toProjectId: this.toProjectId,
-      showProjects: this.showProjects.toString(),
-      isFromProjectView: this.isFromProjectView.toString(),
-    };
-
-    if (this.shouldShowProjects) {
-      // For project contexts, still pass entity type information
-      return baseParams;
-    }
-
-    return {
-      ...baseParams,
-      // Always pass both giver and recipient info for context preservation
-      giverProjectId: this.fromProjectId || "",
-      giverProjectName: this.giver?.name || "",
-      giverProjectImage: this.giver?.image || "",
-      giverProjectHandleId: this.giver?.handleId || "",
-      giverDid: this.giverEntityType === "person" ? this.giver?.did || "" : "",
-      recipientProjectId: this.toProjectId || "",
-      recipientProjectName: this.receiver?.name || "",
-      recipientProjectImage: this.receiver?.image || "",
-      recipientProjectHandleId: this.receiver?.handleId || "",
-      recipientDid:
-        this.recipientEntityType === "person" ? this.receiver?.did || "" : "",
-    };
-  }
-
   /**
    * Handle entity selection from EntityGrid
    */
diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 482f685e..e9fa0627 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -29,7 +29,6 @@
         :unit-code="unitCode"
         :offer-id="offerId"
         :notify="$notify"
-        :hide-show-all="hideShowAll"
         @entity-selected="handleEntitySelected"
         @cancel="cancel"
       />
@@ -117,7 +116,6 @@ export default class GiftedDialog extends Vue {
   @Prop() fromProjectId = "";
   @Prop() toProjectId = "";
   @Prop() isFromProjectView = false;
-  @Prop() hideShowAll = false;
   @Prop({ default: "person" }) giverEntityType = "person" as
     | "person"
     | "project";
diff --git a/src/components/ShowAllCard.vue b/src/components/ShowAllCard.vue
deleted file mode 100644
index a0e841fc..00000000
--- a/src/components/ShowAllCard.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-/** * ShowAllCard.vue - Show All navigation card component * * Extracted from
-GiftedDialog.vue to handle "Show All" navigation * for both people and projects
-entity types. * * @author Matthew Raymer */
-<template>
-  <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
-      </p>
-    </router-link>
-  </li>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-facing-decorator";
-import { RouteLocationRaw } from "vue-router";
-
-/**
- * ShowAllCard - Displays "Show All" navigation for entity grids
- *
- * Features:
- * - Provides navigation to full entity listings
- * - Supports different routes based on entity type
- * - Maintains context through query parameters
- * - Consistent visual styling with other cards
- */
-@Component({ name: "ShowAllCard" })
-export default class ShowAllCard extends Vue {
-  /** Type of entities being shown */
-  @Prop({ required: true })
-  entityType!: "people" | "projects";
-
-  /** Route name to navigate to */
-  @Prop({ required: true })
-  routeName!: string;
-
-  /** Query parameters to pass to the route */
-  @Prop({ default: () => ({}) })
-  queryParams!: Record<string, string>;
-
-  /**
-   * Computed navigation route with query parameters
-   */
-  get navigationRoute(): RouteLocationRaw {
-    return {
-      name: this.routeName,
-      query: this.queryParams,
-    };
-  }
-}
-</script>
-
-<style scoped>
-/* Ensure router-link styling is consistent */
-a {
-  text-decoration: none;
-}
-</style>
-- 
2.30.2


From a804877a0852a397581e4647953d95053b360c17 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <jose.anomalist.design@gmail.com>
Date: Thu, 30 Oct 2025 21:16:36 +0800
Subject: [PATCH 3/9] feat: Add quick search to EntityGrid with date-based
 contact sorting

- Add search-as-you-type functionality with 500ms debounce
- Implement search across contact names and DIDs, project names and handleIds
- Add loading spinner and dynamic clear button
- Add $contactsByDateAdded() method to PlatformServiceMixin for newest-first sorting
- Update GiftedDialog to use date-based contact ordering
- Maintain backward compatibility with existing $contacts() alphabetical sorting
- Add proper cleanup for search timeouts on component unmount

The search feature provides real-time filtering with visual feedback,
while the new sorting ensures recently added contacts appear first.
---
 src/components/EntityGrid.vue     | 129 +++++++++++++++++++++++++++++-
 src/components/GiftedDialog.vue   |   2 +-
 src/utils/PlatformServiceMixin.ts |  15 ++++
 3 files changed, 142 insertions(+), 4 deletions(-)

diff --git a/src/components/EntityGrid.vue b/src/components/EntityGrid.vue
index a4d5aa55..92c76e81 100644
--- a/src/components/EntityGrid.vue
+++ b/src/components/EntityGrid.vue
@@ -1,7 +1,40 @@
-/** * EntityGrid.vue - Unified entity grid layout component * * Extracted from
-GiftedDialog.vue to provide a reusable grid layout * for displaying people,
-projects, and special entities with selection. * * @author Matthew Raymer */
+/**
+ * EntityGrid.vue - Unified entity grid layout component
+ * 
+ * Extracted from GiftedDialog.vue to provide a reusable grid layout
+ * for displaying people, projects, and special entities with selection.
+ * 
+ * @author Matthew Raymer
+ */
 <template>
+  <!-- Quick Search -->
+  <div
+    id="QuickSearch"
+    class="mb-4 flex items-center text-sm"
+  >
+    <input
+      v-model="searchTerm"
+      type="text"
+      placeholder="Search…"
+      class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-1.5 placeholder:italic placeholder:text-slate-400 focus:outline-none"
+      @input="handleSearchInput"
+      @keydown.enter="performSearch"
+    />
+    <div 
+      v-show="isSearching"
+      class="border-y border-slate-400 ps-2 py-1.5 text-center text-slate-400"
+    >
+      <font-awesome icon="spinner" class="fa-spin-pulse leading-[1.1]"></font-awesome>
+    </div>
+    <button
+      :disabled="!searchTerm"
+      class="px-2 py-1.5 rounded-r bg-white border border-l-0 border-slate-400 text-slate-400 disabled:cursor-not-allowed"
+      @click="clearSearch"
+    >
+      <font-awesome :icon="searchTerm ? 'times' : 'magnifying-glass'" class="fa-fw"></font-awesome>
+    </button>
+  </div>
+  
   <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'">
@@ -101,6 +134,12 @@ export default class EntityGrid extends Vue {
   @Prop({ required: true })
   entityType!: "people" | "projects";
 
+  // Search state
+  searchTerm = "";
+  isSearching = false;
+  searchTimeout: NodeJS.Timeout | null = null;
+  filteredEntities: Contact[] | PlanData[] = [];
+
   /** Array of entities to display */
   @Prop({ required: true })
   entities!: Contact[] | PlanData[];
@@ -184,8 +223,15 @@ export default class EntityGrid extends Vue {
 
   /**
    * Computed entities to display - uses function prop if provided, otherwise defaults
+   * When searching, returns filtered results instead of original logic
    */
   get displayedEntities(): Contact[] | PlanData[] {
+    // If searching, return filtered results
+    if (this.searchTerm.trim()) {
+      return this.filteredEntities;
+    }
+
+    // Original logic when not searching
     if (this.displayEntitiesFunction) {
       return this.displayEntitiesFunction(
         this.entities,
@@ -283,6 +329,74 @@ export default class EntityGrid extends Vue {
     });
   }
 
+  /**
+   * Handle search input with debouncing
+   */
+  handleSearchInput(): void {
+    // Show spinner immediately when user types
+    this.isSearching = true;
+    
+    // Clear existing timeout
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+    }
+
+    // Set new timeout for 500ms delay
+    this.searchTimeout = setTimeout(() => {
+      this.performSearch();
+    }, 500);
+  }
+
+  /**
+   * Perform the actual search
+   */
+  async performSearch(): Promise<void> {
+    if (!this.searchTerm.trim()) {
+      this.filteredEntities = [];
+      return;
+    }
+
+    this.isSearching = true;
+
+    try {
+      // Simulate async search (in case we need to add API calls later)
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      const searchLower = this.searchTerm.toLowerCase().trim();
+      
+      if (this.entityType === "people") {
+        this.filteredEntities = (this.entities as Contact[]).filter((contact: Contact) => {
+          const name = contact.name?.toLowerCase() || "";
+          const did = contact.did.toLowerCase();
+          return name.includes(searchLower) || did.includes(searchLower);
+        });
+      } else {
+        this.filteredEntities = (this.entities as PlanData[]).filter((project: PlanData) => {
+          const name = project.name?.toLowerCase() || "";
+          const handleId = project.handleId.toLowerCase();
+          return name.includes(searchLower) || handleId.includes(searchLower);
+        });
+      }
+    } finally {
+      this.isSearching = false;
+    }
+  }
+
+  /**
+   * Clear the search
+   */
+  clearSearch(): void {
+    this.searchTerm = "";
+    this.filteredEntities = [];
+    this.isSearching = false;
+    
+    // Clear any pending timeout
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+      this.searchTimeout = null;
+    }
+  }
+
   // Emit methods using @Emit decorator
 
   @Emit("entity-selected")
@@ -295,6 +409,15 @@ export default class EntityGrid extends Vue {
   } {
     return data;
   }
+
+  /**
+   * Cleanup timeouts when component is destroyed
+   */
+  beforeUnmount(): void {
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+    }
+  }
 }
 </script>
 
diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index e9fa0627..e08e0021 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -231,7 +231,7 @@ export default class GiftedDialog extends Vue {
         apiServer: this.apiServer,
       });
 
-      this.allContacts = await this.$contacts();
+      this.allContacts = await this.$contactsByDateAdded();
 
       this.allMyDids = await retrieveAccountDids();
 
diff --git a/src/utils/PlatformServiceMixin.ts b/src/utils/PlatformServiceMixin.ts
index ad0b249f..cc649373 100644
--- a/src/utils/PlatformServiceMixin.ts
+++ b/src/utils/PlatformServiceMixin.ts
@@ -970,6 +970,20 @@ export const PlatformServiceMixin = {
       return this.$normalizeContacts(rawContacts);
     },
 
+    /**
+     * Load all contacts sorted by when they were added (by ID)
+     * Always fetches fresh data from database for consistency
+     * Handles JSON string/object duality for contactMethods field
+     * @returns Promise<Contact[]> Array of normalized contact objects sorted by addition date (newest first)
+     */
+    async $contactsByDateAdded(): Promise<Contact[]> {
+      const rawContacts = (await this.$query(
+        "SELECT * FROM contacts ORDER BY id DESC",
+      )) as ContactMaybeWithJsonStrings[];
+
+      return this.$normalizeContacts(rawContacts);
+    },
+
     /**
      * Ultra-concise shortcut for getting number of contacts
      * @returns Promise<number> Total number of contacts
@@ -2057,6 +2071,7 @@ declare module "@vue/runtime-core" {
 
     // Specialized shortcuts - contacts cached, settings fresh
     $contacts(): Promise<Contact[]>;
+    $contactsByDateAdded(): Promise<Contact[]>;
     $contactCount(): Promise<number>;
     $settings(defaults?: Settings): Promise<Settings>;
     $accountSettings(did?: string, defaults?: Settings): Promise<Settings>;
-- 
2.30.2


From 75c89b471c46e08dfa45113a2f0fa5769b4b6f2c Mon Sep 17 00:00:00 2001
From: Jose Olarte III <jose.anomalist.design@gmail.com>
Date: Thu, 30 Oct 2025 21:49:35 +0800
Subject: [PATCH 4/9] fix: linting

---
 src/components/EntityGrid.vue | 62 ++++++++++++++++++-----------------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/components/EntityGrid.vue b/src/components/EntityGrid.vue
index 92c76e81..d7001abe 100644
--- a/src/components/EntityGrid.vue
+++ b/src/components/EntityGrid.vue
@@ -1,17 +1,9 @@
-/**
- * EntityGrid.vue - Unified entity grid layout component
- * 
- * Extracted from GiftedDialog.vue to provide a reusable grid layout
- * for displaying people, projects, and special entities with selection.
- * 
- * @author Matthew Raymer
- */
+/** * EntityGrid.vue - Unified entity grid layout component * * Extracted from
+GiftedDialog.vue to provide a reusable grid layout * for displaying people,
+projects, and special entities with selection. * * @author Matthew Raymer */
 <template>
   <!-- Quick Search -->
-  <div
-    id="QuickSearch"
-    class="mb-4 flex items-center text-sm"
-  >
+  <div id="QuickSearch" class="mb-4 flex items-center text-sm">
     <input
       v-model="searchTerm"
       type="text"
@@ -20,21 +12,27 @@
       @input="handleSearchInput"
       @keydown.enter="performSearch"
     />
-    <div 
+    <div
       v-show="isSearching"
       class="border-y border-slate-400 ps-2 py-1.5 text-center text-slate-400"
     >
-      <font-awesome icon="spinner" class="fa-spin-pulse leading-[1.1]"></font-awesome>
+      <font-awesome
+        icon="spinner"
+        class="fa-spin-pulse leading-[1.1]"
+      ></font-awesome>
     </div>
     <button
       :disabled="!searchTerm"
       class="px-2 py-1.5 rounded-r bg-white border border-l-0 border-slate-400 text-slate-400 disabled:cursor-not-allowed"
       @click="clearSearch"
     >
-      <font-awesome :icon="searchTerm ? 'times' : 'magnifying-glass'" class="fa-fw"></font-awesome>
+      <font-awesome
+        :icon="searchTerm ? 'times' : 'magnifying-glass'"
+        class="fa-fw"
+      ></font-awesome>
     </button>
   </div>
-  
+
   <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'">
@@ -335,7 +333,7 @@ export default class EntityGrid extends Vue {
   handleSearchInput(): void {
     // Show spinner immediately when user types
     this.isSearching = true;
-    
+
     // Clear existing timeout
     if (this.searchTimeout) {
       clearTimeout(this.searchTimeout);
@@ -360,22 +358,26 @@ export default class EntityGrid extends Vue {
 
     try {
       // Simulate async search (in case we need to add API calls later)
-      await new Promise(resolve => setTimeout(resolve, 100));
+      await new Promise((resolve) => setTimeout(resolve, 100));
 
       const searchLower = this.searchTerm.toLowerCase().trim();
-      
+
       if (this.entityType === "people") {
-        this.filteredEntities = (this.entities as Contact[]).filter((contact: Contact) => {
-          const name = contact.name?.toLowerCase() || "";
-          const did = contact.did.toLowerCase();
-          return name.includes(searchLower) || did.includes(searchLower);
-        });
+        this.filteredEntities = (this.entities as Contact[]).filter(
+          (contact: Contact) => {
+            const name = contact.name?.toLowerCase() || "";
+            const did = contact.did.toLowerCase();
+            return name.includes(searchLower) || did.includes(searchLower);
+          },
+        );
       } else {
-        this.filteredEntities = (this.entities as PlanData[]).filter((project: PlanData) => {
-          const name = project.name?.toLowerCase() || "";
-          const handleId = project.handleId.toLowerCase();
-          return name.includes(searchLower) || handleId.includes(searchLower);
-        });
+        this.filteredEntities = (this.entities as PlanData[]).filter(
+          (project: PlanData) => {
+            const name = project.name?.toLowerCase() || "";
+            const handleId = project.handleId.toLowerCase();
+            return name.includes(searchLower) || handleId.includes(searchLower);
+          },
+        );
       }
     } finally {
       this.isSearching = false;
@@ -389,7 +391,7 @@ export default class EntityGrid extends Vue {
     this.searchTerm = "";
     this.filteredEntities = [];
     this.isSearching = false;
-    
+
     // Clear any pending timeout
     if (this.searchTimeout) {
       clearTimeout(this.searchTimeout);
-- 
2.30.2


From 10f2920e110f9dcda6d185e2b5d487adbcd00dbe Mon Sep 17 00:00:00 2001
From: Jose Olarte III <jose.anomalist.design@gmail.com>
Date: Fri, 31 Oct 2025 18:34:54 +0800
Subject: [PATCH 5/9] feat(EntityGrid): display no results message for empty
 search queries

Add contextual feedback message when a search term is entered but no matching entities are found. The message dynamically adjusts its wording based on whether searching for people or projects.
---
 src/components/EntityGrid.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/EntityGrid.vue b/src/components/EntityGrid.vue
index d7001abe..7e76093f 100644
--- a/src/components/EntityGrid.vue
+++ b/src/components/EntityGrid.vue
@@ -33,6 +33,15 @@ projects, and special entities with selection. * * @author Matthew Raymer */
     </button>
   </div>
 
+  <div
+    v-if="searchTerm && !isSearching && filteredEntities.length === 0"
+    class="mb-4 text-sm italic text-slate-500 text-center"
+  >
+    “{{ searchTerm }}” doesn't match any
+    {{ entityType === "people" ? "people" : "projects" }}. Try a different
+    search.
+  </div>
+
   <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'">
-- 
2.30.2


From 82fd7cddf7d7342efcbd608fe3fc6fd96aac7747 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <jose.anomalist.design@gmail.com>
Date: Fri, 31 Oct 2025 18:59:35 +0800
Subject: [PATCH 6/9] feat: Add showUnnamedEntity prop to EntityGrid

Add prop to control visibility of "Unnamed" entity, matching showYouEntity
pattern. Defaults to true for backward compatibility.
---
 src/components/EntityGrid.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/EntityGrid.vue b/src/components/EntityGrid.vue
index 7e76093f..f2c8a6f5 100644
--- a/src/components/EntityGrid.vue
+++ b/src/components/EntityGrid.vue
@@ -61,6 +61,7 @@ projects, and special entities with selection. * * @author Matthew Raymer */
 
       <!-- "Unnamed" entity -->
       <SpecialEntityCard
+        v-if="showUnnamedEntity"
         entity-type="unnamed"
         :label="unnamedEntityName"
         icon="circle-question"
@@ -175,6 +176,10 @@ export default class EntityGrid extends Vue {
   @Prop({ default: true })
   showYouEntity!: boolean;
 
+  /** Whether to show the "Unnamed" entity for people grids */
+  @Prop({ default: true })
+  showUnnamedEntity!: boolean;
+
   /** Whether the "You" entity is selectable */
   @Prop({ default: true })
   youSelectable!: boolean;
-- 
2.30.2


From 9c3002f9c7ee8fe6a15c624fb738a341e32d643a Mon Sep 17 00:00:00 2001
From: Jose Olarte III <jose.anomalist.design@gmail.com>
Date: Fri, 31 Oct 2025 19:07:50 +0800
Subject: [PATCH 7/9] feat(EntityGrid): sort search results alphabetically

Sort search results alphabetically while preserving original order for
default list when no search term is present.
---
 src/components/EntityGrid.vue | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/EntityGrid.vue b/src/components/EntityGrid.vue
index f2c8a6f5..2aa7bd0d 100644
--- a/src/components/EntityGrid.vue
+++ b/src/components/EntityGrid.vue
@@ -377,21 +377,29 @@ export default class EntityGrid extends Vue {
       const searchLower = this.searchTerm.toLowerCase().trim();
 
       if (this.entityType === "people") {
-        this.filteredEntities = (this.entities as Contact[]).filter(
-          (contact: Contact) => {
+        this.filteredEntities = (this.entities as Contact[])
+          .filter((contact: Contact) => {
             const name = contact.name?.toLowerCase() || "";
             const did = contact.did.toLowerCase();
             return name.includes(searchLower) || did.includes(searchLower);
-          },
-        );
+          })
+          .sort((a: Contact, b: Contact) => {
+            // Sort alphabetically by name, falling back to DID if name is missing
+            const nameA = (a.name || a.did).toLowerCase();
+            const nameB = (b.name || b.did).toLowerCase();
+            return nameA.localeCompare(nameB);
+          });
       } else {
-        this.filteredEntities = (this.entities as PlanData[]).filter(
-          (project: PlanData) => {
+        this.filteredEntities = (this.entities as PlanData[])
+          .filter((project: PlanData) => {
             const name = project.name?.toLowerCase() || "";
             const handleId = project.handleId.toLowerCase();
             return name.includes(searchLower) || handleId.includes(searchLower);
-          },
-        );
+          })
+          .sort((a: PlanData, b: PlanData) => {
+            // Sort alphabetically by name
+            return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+          });
       }
     } finally {
       this.isSearching = false;
-- 
2.30.2


From 2f99d0b41627eecd5403e8601628287739bc71e6 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <jose.anomalist.design@gmail.com>
Date: Fri, 31 Oct 2025 19:10:13 +0800
Subject: [PATCH 8/9] fix(components): prevent icon shrinking in PersonCard and
 ProjectCard

Add shrink-0 class to icon elements to maintain consistent icon sizing
when card layouts flex or wrap content.
---
 src/components/PersonCard.vue  | 4 ++--
 src/components/ProjectCard.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/PersonCard.vue b/src/components/PersonCard.vue
index fd657634..56c5dac9 100644
--- a/src/components/PersonCard.vue
+++ b/src/components/PersonCard.vue
@@ -7,12 +7,12 @@ conflict detection. * * @author Matthew Raymer */
       <EntityIcon
         v-if="person.did"
         :contact="person"
-        class="!size-[2rem] border border-slate-300 bg-white overflow-hidden rounded-full"
+        class="!size-[2rem] shrink-0 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"
+        class="text-slate-400 text-5xl mb-1 shrink-0"
       />
     </div>
 
diff --git a/src/components/ProjectCard.vue b/src/components/ProjectCard.vue
index 953746aa..77d2aa34 100644
--- a/src/components/ProjectCard.vue
+++ b/src/components/ProjectCard.vue
@@ -10,7 +10,7 @@ issuer information. * * @author Matthew Raymer */
       :entity-id="project.handleId"
       :icon-size="48"
       :image-url="project.image"
-      class="!size-[2rem] border border-slate-300 bg-white overflow-hidden rounded-full"
+      class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
     />
 
     <div class="overflow-hidden">
-- 
2.30.2


From 4004d9fe5295f2f185951122bce0ef88816600ed Mon Sep 17 00:00:00 2001
From: Jose Olarte III <jose.anomalist.design@gmail.com>
Date: Mon, 3 Nov 2025 16:32:59 +0800
Subject: [PATCH 9/9] feat(EntityGrid): Split contacts into recent and
 alphabetical sections

When displaying contacts (not search results), show the 3 most recently
added contacts at the top with a "Recently Added" heading, followed by
the rest sorted alphabetically with an "Everyone Else" heading.

- Add recentContacts and alphabeticalContacts computed properties
- Hide "You" and "Unnamed" special entities during search
- Only show search spinner when actively searching with a term
- Style section headings with uppercase, improved spacing, and borders
---
 src/components/EntityGrid.vue | 99 ++++++++++++++++++++++++++++++-----
 1 file changed, 86 insertions(+), 13 deletions(-)

diff --git a/src/components/EntityGrid.vue b/src/components/EntityGrid.vue
index 2aa7bd0d..de7d6a12 100644
--- a/src/components/EntityGrid.vue
+++ b/src/components/EntityGrid.vue
@@ -13,7 +13,7 @@ projects, and special entities with selection. * * @author Matthew Raymer */
       @keydown.enter="performSearch"
     />
     <div
-      v-show="isSearching"
+      v-show="isSearching && searchTerm"
       class="border-y border-slate-400 ps-2 py-1.5 text-center text-slate-400"
     >
       <font-awesome
@@ -47,7 +47,7 @@ projects, and special entities with selection. * * @author Matthew Raymer */
     <template v-if="entityType === 'people'">
       <!-- "You" entity -->
       <SpecialEntityCard
-        v-if="showYouEntity"
+        v-if="showYouEntity && !searchTerm.trim()"
         entity-type="you"
         label="You"
         icon="hand"
@@ -61,7 +61,7 @@ projects, and special entities with selection. * * @author Matthew Raymer */
 
       <!-- "Unnamed" entity -->
       <SpecialEntityCard
-        v-if="showUnnamedEntity"
+        v-if="showUnnamedEntity && !searchTerm.trim()"
         entity-type="unnamed"
         :label="unnamedEntityName"
         icon="circle-question"
@@ -79,16 +79,60 @@ projects, and special entities with selection. * * @author Matthew Raymer */
 
     <!-- Entity cards (people or projects) -->
     <template v-if="entityType === 'people'">
-      <PersonCard
-        v-for="person in displayedEntities as Contact[]"
-        :key="person.did"
-        :person="person"
-        :conflicted="isPersonConflicted(person.did)"
-        :show-time-icon="true"
-        :notify="notify"
-        :conflict-context="conflictContext"
-        @person-selected="handlePersonSelected"
-      />
+      <!-- When showing contacts without search: split into recent and alphabetical -->
+      <template v-if="!searchTerm.trim()">
+        <!-- Recently Added Section -->
+        <template v-if="recentContacts.length > 0">
+          <li
+            class="text-xs font-semibold text-slate-500 uppercase pt-5 pb-1.5 px-2 border-b border-slate-300"
+          >
+            Recently Added
+          </li>
+          <PersonCard
+            v-for="person in recentContacts"
+            :key="person.did"
+            :person="person"
+            :conflicted="isPersonConflicted(person.did)"
+            :show-time-icon="true"
+            :notify="notify"
+            :conflict-context="conflictContext"
+            @person-selected="handlePersonSelected"
+          />
+        </template>
+
+        <!-- Alphabetical Section -->
+        <template v-if="alphabeticalContacts.length > 0">
+          <li
+            class="text-xs font-semibold text-slate-500 uppercase pt-5 pb-1.5 px-2 border-b border-slate-300"
+          >
+            Everyone Else
+          </li>
+          <PersonCard
+            v-for="person in alphabeticalContacts"
+            :key="person.did"
+            :person="person"
+            :conflicted="isPersonConflicted(person.did)"
+            :show-time-icon="true"
+            :notify="notify"
+            :conflict-context="conflictContext"
+            @person-selected="handlePersonSelected"
+          />
+        </template>
+      </template>
+
+      <!-- When searching: show filtered results normally -->
+      <template v-else>
+        <PersonCard
+          v-for="person in displayedEntities as Contact[]"
+          :key="person.did"
+          :person="person"
+          :conflicted="isPersonConflicted(person.did)"
+          :show-time-icon="true"
+          :notify="notify"
+          :conflict-context="conflictContext"
+          @person-selected="handlePersonSelected"
+        />
+      </template>
     </template>
 
     <template v-else-if="entityType === 'projects'">
@@ -257,6 +301,35 @@ export default class EntityGrid extends Vue {
     return this.entities.slice(0, maxDisplay);
   }
 
+  /**
+   * Get the 3 most recently added contacts (when showing contacts and not searching)
+   */
+  get recentContacts(): Contact[] {
+    if (this.entityType !== "people" || this.searchTerm.trim()) {
+      return [];
+    }
+    // Entities are already sorted by date added (newest first)
+    return (this.entities as Contact[]).slice(0, 3);
+  }
+
+  /**
+   * Get the remaining contacts sorted alphabetically (when showing contacts and not searching)
+   */
+  get alphabeticalContacts(): Contact[] {
+    if (this.entityType !== "people" || this.searchTerm.trim()) {
+      return [];
+    }
+    // Skip the first 3 (recent contacts) and sort the rest alphabetically
+    // Create a copy to avoid mutating the original array
+    const remaining = (this.entities as Contact[]).slice(3);
+    return [...remaining].sort((a: Contact, b: Contact) => {
+      // Sort alphabetically by name, falling back to DID if name is missing
+      const nameA = (a.name || a.did).toLowerCase();
+      const nameB = (b.name || b.did).toLowerCase();
+      return nameA.localeCompare(nameB);
+    });
+  }
+
   /**
    * Computed empty state message based on entity type
    */
-- 
2.30.2