refactor: remove debug loggers from EntityGrid component

Remove three logger.debug() calls used for debugging project search results and pagination state. Error logging remains intact.
refactor: defer project loading until MeetingProjectDialog opens
2025-11-13 21:41:34 +08:00 · 2025-11-13 21:28:47 +08:00 · 2025-11-13 19:21:22 +08:00 · 2025-11-13 18:10:35 +08:00 · 2025-11-12 21:06:20 +08:00 · 2025-11-12 17:10:03 +08:00
29 changed files with 1572 additions and 455 deletions
--- a/BUILDING.md
+++ b/BUILDING.md
@@ -1158,10 +1158,10 @@ If you need to build manually or want to understand the individual steps:
   export GEM_PATH=$shortened_path
   ```

-##### 1. Bump the version in package.json, then here
+##### 1. Bump the version in package.json for `MARKETING_VERSION`, then `grep CURRENT_PROJECT_VERSION ios/App/App.xcodeproj/project.pbxproj` and add 1 for the numbered version;

   ```bash
-   cd ios/App && xcrun agvtool new-version 40 && perl -p -i -e "s/MARKETING_VERSION = .*;/MARKETING_VERSION = 1.0.7;/g" App.xcodeproj/project.pbxproj && cd -
+   cd ios/App && xcrun agvtool new-version 46 && perl -p -i -e "s/MARKETING_VERSION = .*;/MARKETING_VERSION = 1.1.1;/g" App.xcodeproj/project.pbxproj && cd -
   # Unfortunately this edits Info.plist directly.
   #xcrun agvtool new-marketing-version 0.4.5
   ```
@@ -1318,8 +1318,8 @@ The recommended way to build for Android is using the automated build script:
 ##### 1. Bump the version in package.json, then here: android/app/build.gradle

  ```bash
-  perl -p -i -e 's/versionCode .*/versionCode 40/g' android/app/build.gradle
-  perl -p -i -e 's/versionName .*/versionName "1.0.7"/g' android/app/build.gradle
+  perl -p -i -e 's/versionCode .*/versionCode 46/g' android/app/build.gradle
+  perl -p -i -e 's/versionName .*/versionName "1.1.1"/g' android/app/build.gradle
  ```

 ##### 2. Build
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

+
+## [1.1.1] - 2025.11.03
+
+### Added
+- Meeting onboarding via prompts
+- Emojis on gift feed
+- Starred projects with notification
+
+
 ## [1.0.7] - 2025.08.18

 ### Fixed
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -31,8 +31,8 @@ android {
        applicationId "app.timesafari.app"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 41
-        versionName "1.0.8"
+        versionCode 46
+        versionName "1.1.1"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        aaptOptions {
             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
--- a/ios/App/App.xcodeproj/project.pbxproj
+++ b/ios/App/App.xcodeproj/project.pbxproj
@@ -403,7 +403,7 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 41;
+				CURRENT_PROJECT_VERSION = 46;
 				DEVELOPMENT_TEAM = GM3FS5JQPH;
 				ENABLE_APP_SANDBOX = NO;
 				ENABLE_USER_SCRIPT_SANDBOXING = NO;
@@ -413,7 +413,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.0.8;
+				MARKETING_VERSION = 1.1.1;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = app.timesafari;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -430,7 +430,7 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 41;
+				CURRENT_PROJECT_VERSION = 46;
 				DEVELOPMENT_TEAM = GM3FS5JQPH;
 				ENABLE_APP_SANDBOX = NO;
 				ENABLE_USER_SCRIPT_SANDBOXING = NO;
@@ -440,7 +440,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.0.8;
+				MARKETING_VERSION = 1.1.1;
 				PRODUCT_BUNDLE_IDENTIFIER = app.timesafari;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "timesafari",
-  "version": "1.1.1-beta",
+  "version": "1.1.2-beta",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "timesafari",
-      "version": "1.1.1-beta",
+      "version": "1.1.2-beta",
      "dependencies": {
        "@capacitor-community/electron": "^5.0.1",
        "@capacitor-community/sqlite": "6.0.2",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "timesafari",
-  "version": "1.1.1-beta",
+  "version": "1.1.2-beta",
  "description": "Time Safari Application",
  "author": {
    "name": "Time Safari Team"
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -38,7 +38,7 @@
 	}

 	.dialog {
-		@apply bg-white px-4 py-6 rounded-lg w-full max-w-lg max-h-[90%] overflow-y-auto;
+		@apply bg-white px-4 py-6 rounded-lg w-full max-w-lg max-h-[calc(100vh-3rem)] overflow-y-auto;
 	}

 	/* Markdown content styling to restore list elements */
--- a/src/components/BulkMembersDialog.vue
+++ b/src/components/BulkMembersDialog.vue
@@ -111,7 +111,7 @@
                ? 'bg-blue-600 text-white cursor-pointer'
                : 'bg-slate-400 text-slate-200 cursor-not-allowed',
            ]"
-            @click="handleMainAction"
+            @click="processSelectedMembers"
          >
            {{ buttonText }}
          </button>
@@ -134,8 +134,9 @@ import { Vue, Component, Prop } from "vue-facing-decorator";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { SOMEONE_UNNAMED } from "@/constants/entities";
 import { MemberData } from "@/interfaces";
-import { setVisibilityUtil, getHeaders } from "@/libs/endorserServer";
+import { setVisibilityUtil, getHeaders, register } from "@/libs/endorserServer";
 import { createNotifyHelpers } from "@/utils/notify";
+import { Contact } from "@/db/tables/contacts";

@Component({
  mixins: [PlatformServiceMixin],
@@ -144,7 +145,7 @@ import { createNotifyHelpers } from "@/utils/notify";
 export default class BulkMembersDialog extends Vue {
  @Prop({ default: "" }) activeDid!: string;
  @Prop({ default: "" }) apiServer!: string;
-  @Prop({ required: true }) dialogType!: "admit" | "visibility";
+  // isOrganizer: true = organizer mode (admit members), false = member mode (set visibility)
  @Prop({ required: true }) isOrganizer!: boolean;

  // Vue notification system
@@ -251,35 +252,35 @@ export default class BulkMembersDialog extends Vue {
    return this.selectedMembers.includes(memberDid);
  }

-  async handleMainAction() {
-    if (this.dialogType === "admit") {
-      await this.admitWithVisibility();
-    } else {
-      await this.addContactWithVisibility();
-    }
-  }
-
-  async admitWithVisibility() {
+  async processSelectedMembers() {
    try {
-      const selectedMembers = this.membersData.filter((member) =>
+      const selectedMembers: MemberData[] = this.membersData.filter((member) =>
        this.selectedMembers.includes(member.did),
      );
-      const notSelectedMembers = this.membersData.filter(
+      const notSelectedMembers: MemberData[] = this.membersData.filter(
        (member) => !this.selectedMembers.includes(member.did),
      );

      let admittedCount = 0;
      let contactAddedCount = 0;
+      let errors = 0;

      for (const member of selectedMembers) {
        try {
-          // First, admit the member
-          await this.admitMember(member);
-          admittedCount++;
+          // Organizer mode: admit and register the member first
+          if (this.isOrganizer) {
+            await this.admitMember(member);
+            await this.registerMember(member);
+            admittedCount++;
+          }

          // If they're not a contact yet, add them as a contact
          if (!member.isContact) {
-            await this.addAsContact(member);
+            // Organizer mode: set isRegistered to true, member mode: undefined
+            await this.addAsContact(
+              member,
+              this.isOrganizer ? true : undefined,
+            );
            contactAddedCount++;
          }

@@ -289,85 +290,62 @@ export default class BulkMembersDialog extends Vue {
          // eslint-disable-next-line no-console
          console.error(`Error processing member ${member.did}:`, error);
          // Continue with other members even if one fails
+          errors++;
        }
      }

      // Show success notification
-      this.$notify(
-        {
-          group: "alert",
-          type: "success",
-          title: "Members Admitted Successfully",
-          text: `${admittedCount} member${admittedCount === 1 ? "" : "s"} admitted${contactAddedCount === 0 ? "" : admittedCount === contactAddedCount ? " and" : `, ${contactAddedCount}`}${contactAddedCount === 0 ? "" : ` added as contact${contactAddedCount === 1 ? "" : "s"}`}.`,
-        },
-        10000,
-      );
+      if (this.isOrganizer) {
+        if (admittedCount > 0) {
+          this.$notify(
+            {
+              group: "alert",
+              type: "success",
+              title: "Members Admitted Successfully",
+              text: `${admittedCount} member${admittedCount === 1 ? "" : "s"} admitted and registered${contactAddedCount === 0 ? "" : admittedCount === contactAddedCount ? " and" : `, ${contactAddedCount}`}${contactAddedCount === 0 ? "" : ` added as contact${contactAddedCount === 1 ? "" : "s"}`}.`,
+            },
+            5000,
+          );
+        }
+        if (errors > 0) {
+          this.$notify(
+            {
+              group: "alert",
+              type: "danger",
+              title: "Error",
+              text: "Failed to fully admit some members. Work with them individually below.",
+            },
+            5000,
+          );
+        }
+      } else {
+        // Member mode: show contacts added notification
+        if (contactAddedCount > 0) {
+          this.$notify(
+            {
+              group: "alert",
+              type: "success",
+              title: "Contacts Added Successfully",
+              text: `${contactAddedCount} member${contactAddedCount === 1 ? "" : "s"} added as contact${contactAddedCount === 1 ? "" : "s"}.`,
+            },
+            5000,
+          );
+        }
+      }

      this.close(notSelectedMembers.map((member) => member.did));
    } catch (error) {
      // eslint-disable-next-line no-console
-      console.error("Error admitting members:", error);
+      console.error(
+        `Error ${this.isOrganizer ? "admitting members" : "adding contacts"}:`,
+        error,
+      );
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
-          text: "Failed to admit some members. Please try again.",
-        },
-        5000,
-      );
-    }
-  }
-
-  async addContactWithVisibility() {
-    try {
-      const selectedMembers = this.membersData.filter((member) =>
-        this.selectedMembers.includes(member.did),
-      );
-      const notSelectedMembers = this.membersData.filter(
-        (member) => !this.selectedMembers.includes(member.did),
-      );
-
-      let contactsAddedCount = 0;
-
-      for (const member of selectedMembers) {
-        try {
-          // If they're not a contact yet, add them as a contact first
-          if (!member.isContact) {
-            await this.addAsContact(member);
-            contactsAddedCount++;
-          }
-
-          // Set their seesMe to true
-          await this.updateContactVisibility(member.did, true);
-        } catch (error) {
-          // eslint-disable-next-line no-console
-          console.error(`Error processing member ${member.did}:`, error);
-          // Continue with other members even if one fails
-        }
-      }
-
-      // Show success notification
-      this.$notify(
-        {
-          group: "alert",
-          type: "success",
-          title: "Contacts Added Successfully",
-          text: `${contactsAddedCount} member${contactsAddedCount === 1 ? "" : "s"} added as contact${contactsAddedCount === 1 ? "" : "s"}.`,
-        },
-        5000,
-      );
-
-      this.close(notSelectedMembers.map((member) => member.did));
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error("Error adding contacts:", error);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "Failed to add some members as contacts. Please try again.",
+          text: "Some errors occurred. Work with members individually below.",
        },
        5000,
      );
@@ -393,11 +371,39 @@ export default class BulkMembersDialog extends Vue {
    }
  }

-  async addAsContact(member: { did: string; name: string }) {
+  async registerMember(member: MemberData) {
    try {
-      const newContact = {
+      const contact: Contact = { did: member.did };
+      const result = await register(
+        this.activeDid,
+        this.apiServer,
+        this.axios,
+        contact,
+      );
+      if (result.success) {
+        if (result.embeddedRecordError) {
+          throw new Error(result.embeddedRecordError);
+        }
+        await this.$updateContact(member.did, { registered: true });
+      } else {
+        throw result;
+      }
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error("Error registering member:", err);
+      throw err;
+    }
+  }
+
+  async addAsContact(
+    member: { did: string; name: string },
+    isRegistered?: boolean,
+  ) {
+    try {
+      const newContact: Contact = {
        did: member.did,
        name: member.name,
+        registered: isRegistered,
      };

      await this.$insertContact(newContact);
@@ -440,10 +446,10 @@ export default class BulkMembersDialog extends Vue {
  }

  showContactInfo() {
-    const message =
-      this.dialogType === "admit"
-        ? "This user is already your contact, but they are not yet admitted to the meeting."
-        : "This user is already your contact, but your activities are not visible to them yet.";
+    // isOrganizer: true = admit mode, false = visibility mode
+    const message = this.isOrganizer
+      ? "This user is already your contact, but they are not yet admitted to the meeting."
+      : "This user is already your contact, but your activities are not visible to them yet.";

    this.$notify(
      {
--- a/src/components/EntityGrid.vue
+++ b/src/components/EntityGrid.vue
@@ -2,12 +2,55 @@
 GiftedDialog.vue to provide a reusable grid layout * for displaying people,
 projects, and special entities with selection. * * @author Matthew Raymer */
 <template>
-  <ul :class="gridClasses">
+  <!-- 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 && searchTerm"
+      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>
+
+  <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
+    ref="scrollContainer"
+    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 -->
      <SpecialEntityCard
-        v-if="showYouEntity"
+        v-if="showYouEntity && !searchTerm.trim()"
        entity-type="you"
        label="You"
        icon="hand"
@@ -21,6 +64,7 @@ projects, and special entities with selection. * * @author Matthew Raymer */

      <!-- "Unnamed" entity -->
      <SpecialEntityCard
+        v-if="showUnnamedEntity && !searchTerm.trim()"
        entity-type="unnamed"
        :label="unnamedEntityName"
        icon="circle-question"
@@ -38,16 +82,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
+          </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'">
@@ -63,27 +151,30 @@ 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>

 <script lang="ts">
-import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
+import { Component, Prop, Vue, Emit, Watch } from "vue-facing-decorator";
+import { useInfiniteScroll } from "@vueuse/core";
 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";
 import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
+import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
+import { getHeaders } from "../libs/endorserServer";
+import { logger } from "../utils/logger";
+import { TIMEOUTS } from "@/utils/notify";
+
+/**
+ * Constants for infinite scroll configuration
+ */
+const INITIAL_BATCH_SIZE = 20;
+const INCREMENT_SIZE = 20;
+const RECENT_CONTACTS_COUNT = 3;

 /**
 * EntityGrid - Unified grid layout for displaying people or projects
@@ -93,7 +184,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,22 +194,47 @@ import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
    PersonCard,
    ProjectCard,
    SpecialEntityCard,
-    ShowAllCard,
  },
+  mixins: [PlatformServiceMixin],
 })
 export default class EntityGrid extends Vue {
  /** Type of entities to display */
  @Prop({ required: true })
  entityType!: "people" | "projects";

-  /** Array of entities to display */
+  // Search state
+  searchTerm = "";
+  isSearching = false;
+  searchTimeout: NodeJS.Timeout | null = null;
+  filteredEntities: Contact[] | PlanData[] = [];
+  searchBeforeId: string | undefined = undefined;
+  isLoadingSearchMore = false;
+
+  // API server for project searches
+  apiServer = "";
+
+  // Infinite scroll state
+  displayedCount = INITIAL_BATCH_SIZE;
+  infiniteScrollReset?: () => void;
+  scrollContainer?: HTMLElement;
+  isLoadingMore = false; // Prevent duplicate callback calls
+
+  /**
+   * Array of entities to display
+   *
+   * For contacts: Must be a COMPLETE list from local database.
+   * Use $contactsByDateAdded() to ensure all contacts are included.
+   * Client-side filtering assumes the complete list is available.
+   * IMPORTANT: When passing Contact[] arrays, they must be sorted by date added
+   * (newest first) for the "Recently Added" section to display correctly.
+   *
+   * For projects: Can be partial list (pagination supported).
+   * Server-side search will fetch matching results with pagination,
+   * regardless of what's in this prop.
+   */
  @Prop({ required: true })
  entities!: Contact[] | PlanData[];

-  /** Maximum number of entities to display */
-  @Prop({ default: 10 })
-  maxItems!: number;
-
  /** Active user's DID */
  @Prop({ required: true })
  activeDid!: string;
@@ -140,18 +255,14 @@ 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;

-  /** 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,44 +271,50 @@ 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)
   *
   * This function prop allows parent components to customize which entities
-   * are displayed in the grid, enabling advanced filtering, sorting, and
-   * display logic beyond the default simple slice behavior.
+   * are displayed in the grid, enabling advanced filtering and sorting.
+   * Note: Infinite scroll is disabled when this prop is provided.
   *
   * @param entities - The full array of entities (Contact[] or PlanData[])
   * @param entityType - The type of entities being displayed ("people" or "projects")
-   * @param maxItems - The maximum number of items to display (from maxItems prop)
   * @returns Filtered/sorted array of entities to display
   *
   * @example
   * // Custom filtering: only show contacts with profile images
-   * :display-entities-function="(entities, type, max) =>
-   *   entities.filter(e => e.profileImageUrl).slice(0, max)"
+   * :display-entities-function="(entities, type) =>
+   *   entities.filter(e => e.profileImageUrl)"
   *
   * @example
   * // Custom sorting: sort projects by name
-   * :display-entities-function="(entities, type, max) =>
-   *   entities.sort((a, b) => a.name.localeCompare(b.name)).slice(0, max)"
-   *
-   * @example
-   * // Advanced logic: different limits for different entity types
-   * :display-entities-function="(entities, type, max) =>
-   *   type === 'projects' ? entities.slice(0, 5) : entities.slice(0, max)"
+   * :display-entities-function="(entities, type) =>
+   *   entities.sort((a, b) => a.name.localeCompare(b.name))"
   */
  @Prop({ default: null })
  displayEntitiesFunction?: (
    entities: Contact[] | PlanData[],
    entityType: "people" | "projects",
-    maxItems: number,
  ) => Contact[] | PlanData[];

+  /**
+   * Optional callback function to load more entities from server
+   * Called when infinite scroll reaches end and more data is available
+   * Required for projects when using server-side pagination
+   *
+   * @param entities - Current array of entities
+   * @returns Promise that resolves when more entities are loaded
+   *
+   * @example
+   * :load-more-callback="async (entities) => {
+   *   const lastEntity = entities[entities.length - 1];
+   *   await loadMoreFromServer(lastEntity.rowId);
+   * }"
+   */
+  @Prop({ default: null })
+  loadMoreCallback?: (entities: Contact[] | PlanData[]) => Promise<void>;
+
  /**
   * CSS classes for the empty state message
   */
@@ -206,33 +323,63 @@ export default class EntityGrid extends Vue {
  }

  /**
-   * Computed CSS classes for the grid layout
+   * Computed entities to display - uses function prop if provided, otherwise uses infinite scroll
+   * When searching, returns filtered results with infinite scroll applied
   */
-  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`;
+  get displayedEntities(): Contact[] | PlanData[] {
+    // If searching, return filtered results with infinite scroll
+    if (this.searchTerm.trim()) {
+      return this.filteredEntities.slice(0, this.displayedCount);
    }
+
+    // If custom function provided, use it (disables infinite scroll)
+    if (this.displayEntitiesFunction) {
+      return this.displayEntitiesFunction(this.entities, this.entityType);
+    }
+
+    // Default: projects use infinite scroll
+    if (this.entityType === "projects") {
+      return (this.entities as PlanData[]).slice(0, this.displayedCount);
+    }
+
+    // People: handled by recentContacts + alphabeticalContacts (both use displayedCount)
+    return [];
  }

  /**
-   * Computed entities to display - uses function prop if provided, otherwise defaults
+   * Get the most recently added contacts (when showing contacts and not searching)
+   *
+   * NOTE: This assumes entities are already sorted by date added (newest first).
+   * See the entities prop documentation for details on using $contactsByDateAdded().
   */
-  get displayedEntities(): Contact[] | PlanData[] {
-    if (this.displayEntitiesFunction) {
-      return this.displayEntitiesFunction(
-        this.entities,
-        this.entityType,
-        this.maxItems,
-      );
+  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, RECENT_CONTACTS_COUNT);
+  }

-    // Default implementation for backward compatibility
-    const maxDisplay = this.entityType === "projects" ? 7 : this.maxItems;
-    return this.entities.slice(0, maxDisplay);
+  /**
+   * Get the remaining contacts sorted alphabetically (when showing contacts and not searching)
+   * Uses infinite scroll to control how many are displayed
+   */
+  get alphabeticalContacts(): Contact[] {
+    if (this.entityType !== "people" || this.searchTerm.trim()) {
+      return [];
+    }
+    // Skip the first few (recent contacts) and sort the rest alphabetically
+    // Create a copy to avoid mutating the original array
+    const remaining = this.entities as Contact[];
+    const sorted = [...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);
+    });
+    // Apply infinite scroll: show based on displayedCount (minus the recent contacts)
+    const toShow = Math.max(0, this.displayedCount - RECENT_CONTACTS_COUNT);
+    return sorted.slice(0, toShow);
  }

  /**
@@ -246,15 +393,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
   */
@@ -328,6 +466,326 @@ 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
+   * Routes to server-side search for projects or client-side filtering for contacts
+   */
+  async performSearch(): Promise<void> {
+    if (!this.searchTerm.trim()) {
+      this.filteredEntities = [];
+      this.displayedCount = INITIAL_BATCH_SIZE;
+      this.searchBeforeId = undefined;
+      this.infiniteScrollReset?.();
+      return;
+    }
+
+    this.isSearching = true;
+    this.searchBeforeId = undefined; // Reset pagination for new search
+
+    try {
+      if (this.entityType === "projects") {
+        // Server-side search for projects (initial load, no beforeId)
+        await this.performProjectSearch();
+      } else {
+        // Client-side filtering for contacts (complete list)
+        await this.performContactSearch();
+      }
+
+      // Reset displayed count when search completes
+      this.displayedCount = INITIAL_BATCH_SIZE;
+      this.infiniteScrollReset?.();
+    } finally {
+      this.isSearching = false;
+    }
+  }
+
+  /**
+   * Perform server-side project search with optional pagination
+   * Uses claimContents parameter for search and beforeId for pagination.
+   * Results are appended when paginating, replaced on initial search.
+   *
+   * @param beforeId - Optional rowId for pagination (loads projects before this ID)
+   */
+  async performProjectSearch(beforeId?: string): Promise<void> {
+    if (!this.apiServer) {
+      this.filteredEntities = [];
+      if (this.notify) {
+        this.notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "API server not configured",
+          },
+          TIMEOUTS.SHORT,
+        );
+      }
+      return;
+    }
+
+    const searchLower = this.searchTerm.toLowerCase().trim();
+    let url = `${this.apiServer}/api/v2/report/plans?claimContents=${encodeURIComponent(searchLower)}`;
+
+    if (beforeId) {
+      url += `&beforeId=${encodeURIComponent(beforeId)}`;
+    }
+
+    try {
+      const response = await fetch(url, {
+        method: "GET",
+        headers: await getHeaders(this.activeDid),
+      });
+
+      if (response.status !== 200) {
+        throw new Error("Failed to search projects");
+      }
+
+      const results = await response.json();
+      if (results.data) {
+        const newProjects = results.data.map(
+          (plan: PlanData & { rowId?: string }) => ({
+            ...plan,
+            rowId: plan.rowId,
+          }),
+        );
+
+        if (beforeId) {
+          // Pagination: append new projects to existing search results
+          this.filteredEntities.push(...newProjects);
+        } else {
+          // Initial search: replace array
+          this.filteredEntities = newProjects;
+        }
+
+        // Update searchBeforeId for next pagination
+        // Use the last project's rowId, or undefined if no more results
+        if (newProjects.length > 0) {
+          const lastProject = newProjects[newProjects.length - 1];
+          // Only set searchBeforeId if rowId exists (indicates more results available)
+          this.searchBeforeId = lastProject.rowId || undefined;
+        } else {
+          this.searchBeforeId = undefined; // No more results
+        }
+      } else {
+        if (!beforeId) {
+          // Only clear on initial search, not pagination
+          this.filteredEntities = [];
+        }
+        this.searchBeforeId = undefined;
+      }
+    } catch (error) {
+      logger.error("Error searching projects:", error);
+      if (!beforeId) {
+        // Only clear on initial search error, not pagination error
+        this.filteredEntities = [];
+      }
+      this.searchBeforeId = undefined;
+      if (this.notify) {
+        this.notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "Failed to search projects. Please try again.",
+          },
+          TIMEOUTS.STANDARD,
+        );
+      }
+    }
+  }
+
+  /**
+   * Client-side contact search
+   * Assumes entities prop contains complete contact list from local database
+   */
+  async performContactSearch(): Promise<void> {
+    // Simulate async (for consistency with project search)
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    const searchLower = this.searchTerm.toLowerCase().trim();
+
+    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);
+      });
+
+    // Contacts don't need pagination (complete list)
+    this.searchBeforeId = undefined;
+  }
+
+  /**
+   * Clear the search
+   */
+  clearSearch(): void {
+    this.searchTerm = "";
+    this.filteredEntities = [];
+    this.isSearching = false;
+    this.displayedCount = INITIAL_BATCH_SIZE;
+    this.searchBeforeId = undefined;
+    this.infiniteScrollReset?.();
+
+    // Clear any pending timeout
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+      this.searchTimeout = null;
+    }
+  }
+
+  /**
+   * Determine if more entities can be loaded
+   */
+  canLoadMore(): boolean {
+    if (this.displayEntitiesFunction) {
+      // Custom function disables infinite scroll
+      return false;
+    }
+
+    if (this.searchTerm.trim()) {
+      // Search mode: check if more results available
+      if (this.entityType === "projects") {
+        // Projects: can load more if:
+        // 1. We have more already-loaded results to show, OR
+        // 2. We've shown all loaded results AND there's a searchBeforeId to load more
+        const hasMoreLoaded =
+          this.displayedCount < this.filteredEntities.length;
+        const canLoadMoreFromServer =
+          this.displayedCount >= this.filteredEntities.length &&
+          !!this.searchBeforeId &&
+          !this.isLoadingSearchMore;
+        return hasMoreLoaded || canLoadMoreFromServer;
+      } else {
+        // Contacts: client-side filtering returns all results at once
+        return this.displayedCount < this.filteredEntities.length;
+      }
+    }
+
+    // Non-search mode: existing logic
+    if (this.entityType === "projects") {
+      // Projects: if we've shown all loaded entities and callback exists, callback handles server-side availability
+      if (
+        this.displayedCount >= this.entities.length &&
+        this.loadMoreCallback
+      ) {
+        return !this.isLoadingMore; // Only return true if not already loading
+      }
+      // Otherwise, check if more in memory
+      return this.displayedCount < this.entities.length;
+    }
+
+    // People: check if more alphabetical contacts available
+    // Total available = recent + all alphabetical
+    const totalAvailable = RECENT_CONTACTS_COUNT + this.entities.length;
+    return this.displayedCount < totalAvailable;
+  }
+
+  /**
+   * Initialize infinite scroll on mount
+   */
+  async mounted(): Promise<void> {
+    // Load apiServer for project searches
+    if (this.entityType === "projects") {
+      const settings = await this.$accountSettings();
+      this.apiServer = settings.apiServer || "";
+    }
+
+    this.$nextTick(() => {
+      const container = this.$refs.scrollContainer as HTMLElement;
+
+      if (container) {
+        const { reset } = useInfiniteScroll(
+          container,
+          async () => {
+            // Search mode: handle search pagination
+            if (this.searchTerm.trim()) {
+              if (this.entityType === "projects") {
+                // Projects: load more search results if available
+                if (
+                  this.displayedCount >= this.filteredEntities.length &&
+                  this.searchBeforeId &&
+                  !this.isLoadingSearchMore
+                ) {
+                  this.isLoadingSearchMore = true;
+                  try {
+                    await this.performProjectSearch(this.searchBeforeId);
+                    // After loading more, reset scroll state to allow further loading
+                    this.infiniteScrollReset?.();
+                  } catch (error) {
+                    logger.error("Error loading more search results:", error);
+                    // Error already handled in performProjectSearch
+                  } finally {
+                    this.isLoadingSearchMore = false;
+                  }
+                } else {
+                  // Show more from already-loaded search results
+                  this.displayedCount += INCREMENT_SIZE;
+                }
+              } else {
+                // Contacts: show more from already-filtered results
+                this.displayedCount += INCREMENT_SIZE;
+              }
+            } else {
+              // Non-search mode: existing logic
+              // For projects: if we've shown all entities and callback exists, call it
+              if (
+                this.entityType === "projects" &&
+                this.displayedCount >= this.entities.length &&
+                this.loadMoreCallback &&
+                !this.isLoadingMore
+              ) {
+                this.isLoadingMore = true;
+                try {
+                  await this.loadMoreCallback(this.entities);
+                  // After callback, entities prop will update via Vue reactivity
+                  // Reset scroll state to allow further loading
+                  this.infiniteScrollReset?.();
+                } catch (error) {
+                  // Error handling is up to the callback, but we should reset loading state
+                  console.error("Error in loadMoreCallback:", error);
+                } finally {
+                  this.isLoadingMore = false;
+                }
+              } else {
+                // Normal case: increment displayedCount to show more from memory
+                this.displayedCount += INCREMENT_SIZE;
+              }
+            }
+          },
+          {
+            distance: 50, // pixels from bottom
+            canLoadMore: () => this.canLoadMore(),
+          },
+        );
+        this.infiniteScrollReset = reset;
+      }
+    });
+  }
+
  // Emit methods using @Emit decorator

  @Emit("entity-selected")
@@ -340,6 +798,41 @@ export default class EntityGrid extends Vue {
  } {
    return data;
  }
+
+  /**
+   * Watch for changes in search term to reset displayed count and pagination
+   */
+  @Watch("searchTerm")
+  onSearchTermChange(): void {
+    // Reset displayed count and pagination when search term changes
+    this.displayedCount = INITIAL_BATCH_SIZE;
+    this.searchBeforeId = undefined;
+    this.infiniteScrollReset?.();
+  }
+
+  /**
+   * Watch for changes in entities prop to clear search and reset displayed count
+   */
+  @Watch("entities")
+  onEntitiesChange(): void {
+    // Clear search when entities change (fresh dialog open)
+    if (this.searchTerm) {
+      this.searchTerm = "";
+      this.filteredEntities = [];
+      this.searchBeforeId = undefined;
+    }
+    this.displayedCount = INITIAL_BATCH_SIZE;
+    this.infiniteScrollReset?.();
+  }
+
+  /**
+   * Cleanup timeouts when component is destroyed
+   */
+  beforeUnmount(): void {
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+    }
+  }
 }
 </script>

--- 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">
@@ -16,18 +15,15 @@ Matthew Raymer */
    <EntityGrid
      :entity-type="shouldShowProjects ? 'projects' : 'people'"
      :entities="shouldShowProjects ? projects : allContacts"
-      :max-items="10"
      :active-did="activeDid"
      :all-my-dids="allMyDids"
      :all-contacts="allContacts"
      :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"
+      :load-more-callback="shouldShowProjects ? loadMoreCallback : undefined"
      @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,9 +149,9 @@ 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;
+  /** Callback function to load more projects from server */
+  @Prop()
+  loadMoreCallback?: (entities: PlanData[]) => Promise<void>;

  /**
   * CSS classes for the cancel button
@@ -222,59 +217,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
   */
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -29,7 +29,11 @@
        :unit-code="unitCode"
        :offer-id="offerId"
        :notify="$notify"
-        :hide-show-all="hideShowAll"
+        :load-more-callback="
+          giverEntityType === 'project' || recipientEntityType === 'project'
+            ? handleLoadMoreProjects
+            : undefined
+        "
        @entity-selected="handleEntitySelected"
        @cancel="cancel"
      />
@@ -117,7 +121,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";
@@ -233,7 +236,7 @@ export default class GiftedDialog extends Vue {
        apiServer: this.apiServer,
      });

-      this.allContacts = await this.$contacts();
+      this.allContacts = await this.$contactsByDateAdded();

      this.allMyDids = await retrieveAccountDids();

@@ -491,9 +494,17 @@ export default class GiftedDialog extends Vue {
    this.firstStep = false;
  }

-  async loadProjects() {
+  /**
+   * Load projects from the API
+   * @param beforeId - Optional rowId for pagination (loads projects before this ID)
+   */
+  async loadProjects(beforeId?: string) {
    try {
-      const response = await fetch(this.apiServer + "/api/v2/report/plans", {
+      let url = this.apiServer + "/api/v2/report/plans";
+      if (beforeId) {
+        url += `?beforeId=${encodeURIComponent(beforeId)}`;
+      }
+      const response = await fetch(url, {
        method: "GET",
        headers: await getHeaders(this.activeDid),
      });
@@ -504,14 +515,56 @@ export default class GiftedDialog extends Vue {

      const results = await response.json();
      if (results.data) {
-        this.projects = results.data;
+        // Ensure rowId is included in project data
+        const newProjects = results.data.map(
+          (plan: PlanData & { rowId?: string }) => ({
+            ...plan,
+            rowId: plan.rowId,
+          }),
+        );
+
+        if (beforeId) {
+          // Pagination: append new projects
+          this.projects.push(...newProjects);
+        } else {
+          // Initial load: replace array
+          this.projects = newProjects;
+        }
      }
    } catch (error) {
      logger.error("Error loading projects:", error);
      this.safeNotify.error("Failed to load projects", TIMEOUTS.STANDARD);
+      // Don't clear existing projects if this was a pagination request
+      if (!beforeId) {
+        this.projects = [];
+      }
    }
  }

+  /**
+   * Handle loading more projects when EntityGrid reaches the end
+   * Called by EntitySelectionStep via loadMoreCallback
+   * @param entities - Current array of projects
+   */
+  async handleLoadMoreProjects(
+    entities: Array<{
+      handleId: string;
+      rowId?: string;
+    }>,
+  ): Promise<void> {
+    if (entities.length === 0) {
+      return;
+    }
+
+    const lastProject = entities[entities.length - 1];
+    if (!lastProject.rowId) {
+      // No rowId means we can't paginate - likely end of data
+      return;
+    }
+
+    await this.loadProjects(lastProject.rowId);
+  }
+
  selectProject(project: PlanData) {
    this.giver = {
      did: project.handleId,
--- a/src/components/MeetingProjectDialog.vue
+++ b/src/components/MeetingProjectDialog.vue
@@ -0,0 +1,140 @@
+<template>
+  <div v-if="visible" class="dialog-overlay">
+    <div class="dialog">
+      <!-- Header -->
+      <h2 class="text-lg font-semibold leading-[1.25] mb-4">Select Project</h2>
+
+      <!-- EntityGrid for projects -->
+      <EntityGrid
+        :entity-type="'projects'"
+        :entities="allProjects"
+        :active-did="activeDid"
+        :all-my-dids="allMyDids"
+        :all-contacts="allContacts"
+        :conflict-checker="() => false"
+        :show-you-entity="false"
+        :show-unnamed-entity="false"
+        :notify="notify"
+        :conflict-context="'project'"
+        :load-more-callback="loadMoreCallback"
+        @entity-selected="handleEntitySelected"
+      />
+
+      <!-- Cancel Button -->
+      <div class="flex gap-2 mt-4">
+        <button
+          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-md"
+          @click="handleCancel"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
+import EntityGrid from "./EntityGrid.vue";
+import { Contact } from "../db/tables/contacts";
+import { PlanData } from "../interfaces/records";
+import { NotificationIface } from "../constants/app";
+
+/**
+ * MeetingProjectDialog - Dialog for selecting a project link for a meeting
+ *
+ * Features:
+ * - EntityGrid integration for project selection
+ * - No special entities (You, Unnamed)
+ * - Immediate assignment on project selection
+ * - Cancel button to close without selection
+ */
+@Component({
+  components: {
+    EntityGrid,
+  },
+})
+export default class MeetingProjectDialog extends Vue {
+  /** Whether the dialog is visible */
+  visible = false;
+
+  /** Array of available projects */
+  @Prop({ required: true })
+  allProjects!: PlanData[];
+
+  /** Active user's DID */
+  @Prop({ required: true })
+  activeDid!: string;
+
+  /** All user's DIDs */
+  @Prop({ required: true })
+  allMyDids!: string[];
+
+  /** All contacts */
+  @Prop({ required: true })
+  allContacts!: Contact[];
+
+  /** Notification function from parent component */
+  @Prop()
+  notify?: (notification: NotificationIface, timeout?: number) => void;
+
+  /** Callback function to load more projects from server */
+  @Prop()
+  loadMoreCallback?: (entities: PlanData[]) => Promise<void>;
+
+  /**
+   * Handle entity selection from EntityGrid
+   * Immediately assigns the selected project and closes the dialog
+   */
+  handleEntitySelected(event: {
+    type: "person" | "project";
+    data: Contact | PlanData;
+  }) {
+    const project = event.data as PlanData;
+    this.emitAssign(project);
+    this.close();
+  }
+
+  /**
+   * Handle cancel button click
+   */
+  handleCancel(): void {
+    this.close();
+  }
+
+  /**
+   * Open the dialog
+   */
+  open(): void {
+    this.visible = true;
+    this.emitOpen();
+  }
+
+  /**
+   * Close the dialog
+   */
+  close(): void {
+    this.visible = false;
+    this.emitClose();
+  }
+
+  // Emit methods using @Emit decorator
+
+  @Emit("assign")
+  emitAssign(project: PlanData): PlanData {
+    return project;
+  }
+
+  @Emit("open")
+  emitOpen(): void {
+    // Emit when dialog opens
+  }
+
+  @Emit("close")
+  emitClose(): void {
+    // Emit when dialog closes
+  }
+}
+</script>
+
+<style scoped></style>
--- a/src/components/MembersList.vue
+++ b/src/components/MembersList.vue
@@ -99,7 +99,7 @@
                  <font-awesome
                    v-if="member.did === activeDid"
                    icon="hand"
-                    class="fa-fw text-blue-500"
+                    class="fa-fw text-slate-500"
                  />
                  <font-awesome
                    v-if="
@@ -113,10 +113,10 @@
                </h3>
                <div
                  v-if="!getContactFor(member.did) && member.did !== activeDid"
-                  class="flex items-center gap-1.5 ms-1"
+                  class="flex items-center gap-1.5 ml-2 ms-1"
                >
                  <button
-                    class="btn-add-contact"
+                    class="btn-add-contact ml-2"
                    title="Add as contact"
                    @click="addAsContact(member)"
                  >
@@ -124,7 +124,7 @@
                  </button>

                  <button
-                    class="btn-info-contact"
+                    class="btn-info-contact ml-2"
                    title="Contact Info"
                    @click="
                      informAboutAddingContact(
@@ -135,6 +135,27 @@
                    <font-awesome icon="circle-info" />
                  </button>
                </div>
+                <div
+                  v-if="getContactFor(member.did) && member.did !== activeDid"
+                  class="flex items-center gap-1.5 ms-1"
+                >
+                  <router-link
+                    :to="{ name: 'contact-edit', params: { did: member.did } }"
+                  >
+                    <font-awesome
+                      icon="pen"
+                      class="text-sm text-blue-500 ml-2 mb-1"
+                    />
+                  </router-link>
+                  <router-link
+                    :to="{ name: 'did', params: { did: member.did } }"
+                  >
+                    <font-awesome
+                      icon="arrow-up-right-from-square"
+                      class="text-sm text-blue-500 ml-2 mb-1"
+                    />
+                  </router-link>
+                </div>
              </div>
              <span
                v-if="
@@ -202,7 +223,6 @@
      ref="bulkMembersDialog"
      :active-did="activeDid"
      :api-server="apiServer"
-      :dialog-type="isOrganizer ? 'admit' : 'visibility'"
      :is-organizer="isOrganizer"
      @close="closeBulkMembersDialogCallback"
    />
--- 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] 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"
      />
-
-      <!-- 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;
  }

  /**
--- 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="30"
+      :image-url="project.image"
+      class="!size-[2rem] shrink-0 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>
--- a/src/components/ProjectRepresentativeDialog.vue
+++ b/src/components/ProjectRepresentativeDialog.vue
@@ -0,0 +1,117 @@
+<template>
+  <div v-if="visible" class="dialog-overlay">
+    <div class="dialog">
+      <!-- Header -->
+      <h2 class="text-lg font-semibold leading-[1.25] mb-4">
+        Select Representative
+      </h2>
+
+      <!-- EntityGrid for contacts -->
+      <EntityGrid
+        :entity-type="'people'"
+        :entities="allContacts"
+        :active-did="activeDid"
+        :all-my-dids="allMyDids"
+        :all-contacts="allContacts"
+        :conflict-checker="() => false"
+        :show-you-entity="false"
+        :show-unnamed-entity="false"
+        :notify="notify"
+        :conflict-context="'representative'"
+        @entity-selected="handleEntitySelected"
+      />
+
+      <!-- Cancel Button -->
+      <div class="flex gap-2 mt-4">
+        <button
+          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-md"
+          @click="handleCancel"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
+import EntityGrid from "./EntityGrid.vue";
+import { Contact } from "../db/tables/contacts";
+import { NotificationIface } from "../constants/app";
+
+/**
+ * ProjectRepresentativeDialog - Dialog for selecting an authorized representative
+ *
+ * Features:
+ * - EntityGrid integration for contact selection
+ * - No special entities (You, Unnamed)
+ * - Immediate assignment on contact selection
+ * - Cancel button to close without selection
+ */
+@Component({
+  components: {
+    EntityGrid,
+  },
+})
+export default class ProjectRepresentativeDialog extends Vue {
+  /** Whether the dialog is visible */
+  visible = false;
+
+  /** Array of available contacts */
+  @Prop({ required: true })
+  allContacts!: Contact[];
+
+  /** Active user's DID */
+  @Prop({ required: true })
+  activeDid!: string;
+
+  /** All user's DIDs */
+  @Prop({ required: true })
+  allMyDids!: string[];
+
+  /** Notification function from parent component */
+  @Prop()
+  notify?: (notification: NotificationIface, timeout?: number) => void;
+
+  /**
+   * Handle entity selection from EntityGrid
+   * Immediately assigns the selected contact and closes the dialog
+   */
+  handleEntitySelected(event: { type: "person" | "project"; data: Contact }) {
+    const contact = event.data as Contact;
+    this.emitAssign(contact);
+    this.close();
+  }
+
+  /**
+   * Handle cancel button click
+   */
+  handleCancel(): void {
+    this.close();
+  }
+
+  /**
+   * Open the dialog
+   */
+  open(): void {
+    this.visible = true;
+  }
+
+  /**
+   * Close the dialog
+   */
+  close(): void {
+    this.visible = false;
+  }
+
+  // Emit methods using @Emit decorator
+
+  @Emit("assign")
+  emitAssign(contact: Contact): Contact {
+    return contact;
+  }
+}
+</script>
+
+<style scoped></style>
--- a/src/components/ShowAllCard.vue
+++ b/src/components/ShowAllCard.vue
@@ -1,66 +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="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"
-      >
-        Show All
-      </h3>
-    </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;
-}
-
-a:hover .fa-circle-right {
-  transform: scale(1.1);
-  transition: transform 0.2s ease;
-}
-</style>
--- 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`;
--- a/src/constants/notifications.ts
+++ b/src/constants/notifications.ts
@@ -510,14 +510,6 @@ export const NOTIFY_REGISTER_CONTACT = {
  text: "Do you want to register them?",
 };

-// Used in: ContactsView.vue (showOnboardMeetingDialog method - complex modal for onboarding meeting)
-export const NOTIFY_ONBOARDING_MEETING = {
-  title: "Onboarding Meeting",
-  text: "Would you like to start a new meeting?",
-  yesText: "Start New Meeting",
-  noText: "Join Existing Meeting",
-};
-
 // TestView.vue specific constants
 // Used in: TestView.vue (executeSql method - SQL error handling)
 export const NOTIFY_SQL_ERROR = {
--- a/src/interfaces/common.ts
+++ b/src/interfaces/common.ts
@@ -70,15 +70,6 @@ export interface AxiosErrorResponse {
  [key: string]: unknown;
 }

-export interface UserInfo {
-  did: string;
-  name: string;
-  publicEncKey: string;
-  registered: boolean;
-  profileImageUrl?: string;
-  nextPublicEncKeyHash?: string;
-}
-
 export interface CreateAndSubmitClaimResult {
  success: boolean;
  embeddedRecordError?: string;
--- a/src/interfaces/index.ts
+++ b/src/interfaces/index.ts
@@ -4,3 +4,4 @@ export * from "./common";
 export * from "./deepLinks";
 export * from "./limits";
 export * from "./records";
+export * from "./user";
--- a/src/libs/endorserServer.ts
+++ b/src/libs/endorserServer.ts
@@ -42,9 +42,6 @@ import {
  PlanActionClaim,
  RegisterActionClaim,
  TenureClaim,
-} from "../interfaces/claims";
-
-import {
  GenericCredWrapper,
  GenericVerifiableCredential,
  AxiosErrorResponse,
@@ -55,13 +52,11 @@ import {
  QuantitativeValue,
  KeyMetaWithPrivate,
  KeyMetaMaybeWithPrivate,
-} from "../interfaces/common";
-import {
  OfferSummaryRecord,
  OfferToPlanSummaryRecord,
  PlanSummaryAndPreviousClaim,
  PlanSummaryRecord,
-} from "../interfaces/records";
+} from "../interfaces";
 import { logger, safeStringify } from "../utils/logger";
 import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 import { APP_SERVER } from "@/constants/app";
@@ -1662,30 +1657,35 @@ export async function register(
      message?: string;
    }>(url, { jwtEncoded: vcJwt });

-    if (resp.data?.success?.handleId) {
-      return { success: true };
-    } else if (resp.data?.success?.embeddedRecordError) {
+    if (resp.data?.success?.embeddedRecordError) {
      let message =
        "There was some problem with the registration and so it may not be complete.";
      if (typeof resp.data.success.embeddedRecordError === "string") {
        message += " " + resp.data.success.embeddedRecordError;
      }
      return { error: message };
+    } else if (resp.data?.success?.handleId) {
+      return { success: true };
    } else {
-      logger.error("Registration error:", JSON.stringify(resp.data));
-      return { error: "Got a server error when registering." };
+      logger.error("Registration non-thrown error:", JSON.stringify(resp.data));
+      return {
+        error:
+          (resp.data?.error as { message?: string })?.message ||
+          (resp.data?.error as string) ||
+          "Got a server error when registering.",
+      };
    }
  } catch (error: unknown) {
    if (error && typeof error === "object") {
      const err = error as AxiosErrorResponse;
      const errorMessage =
-        err.message ||
-        (err.response?.data &&
-        typeof err.response.data === "object" &&
-        "message" in err.response.data
-          ? (err.response.data as { message: string }).message
-          : undefined);
-      logger.error("Registration error:", errorMessage || JSON.stringify(err));
+        err.response?.data?.error?.message ||
+        err.response?.data?.error ||
+        err.message;
+      logger.error(
+        "Registration thrown error:",
+        errorMessage || JSON.stringify(err),
+      );
      return { error: errorMessage || "Got a server error when registering." };
    }
    return { error: "Got a server error when registering." };
--- a/src/test/EntityGridFunctionPropTest.vue
+++ b/src/test/EntityGridFunctionPropTest.vue
@@ -19,7 +19,6 @@
      <EntityGrid
        entity-type="people"
        :entities="people"
-        :max-items="5"
        :active-did="activeDid"
        :all-my-dids="allMyDids"
        :all-contacts="people"
@@ -39,7 +38,6 @@
      <EntityGrid
        entity-type="projects"
        :entities="projects"
-        :max-items="3"
        :active-did="activeDid"
        :all-my-dids="allMyDids"
        :all-contacts="people"
@@ -152,11 +150,8 @@ export default class EntityGridFunctionPropTest extends Vue {
  customPeopleFunction = (
    entities: Contact[],
    _entityType: string,
-    maxItems: number,
  ): Contact[] => {
-    return entities
-      .filter((person) => person.profileImageUrl)
-      .slice(0, maxItems);
+    return entities.filter((person) => person.profileImageUrl);
  };

  /**
@@ -165,7 +160,6 @@ export default class EntityGridFunctionPropTest extends Vue {
  customProjectsFunction = (
    entities: PlanData[],
    _entityType: string,
-    _maxItems: number,
  ): PlanData[] => {
    return entities.sort((a, b) => a.name.localeCompare(b.name)).slice(0, 3);
  };
@@ -200,16 +194,16 @@ export default class EntityGridFunctionPropTest extends Vue {
   */
  get displayedPeopleCount(): number {
    if (this.useCustomFunction) {
-      return this.customPeopleFunction(this.people, "people", 5).length;
+      return this.customPeopleFunction(this.people, "people").length;
    }
-    return Math.min(5, this.people.length);
+    return Math.min(10, this.people.length); // Initial batch size for infinite scroll
  }

  get displayedProjectsCount(): number {
    if (this.useCustomFunction) {
-      return this.customProjectsFunction(this.projects, "projects", 3).length;
+      return this.customProjectsFunction(this.projects, "projects").length;
    }
-    return Math.min(7, this.projects.length);
+    return Math.min(10, this.projects.length); // Initial batch size for infinite scroll
  }
 }
 </script>
--- 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>;
--- a/src/views/ContactEditView.vue
+++ b/src/views/ContactEditView.vue
@@ -346,9 +346,7 @@ export default class ContactEditView extends Vue {

    // Notify success and redirect
    this.notify.success(NOTIFY_CONTACT_SAVED.message, TIMEOUTS.STANDARD);
-    (this.$router as Router).push({
-      path: "/did/" + encodeURIComponent(this.contact?.did || ""),
-    });
+    this.$router.back();
  }
 }
 </script>
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -171,9 +171,11 @@ import {
  CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI,
  CONTACT_URL_PATH_ENDORSER_CH_OLD,
 } from "../libs/endorserServer";
-import { GiveSummaryRecord } from "@/interfaces/records";
-import { UserInfo } from "@/interfaces/common";
-import { VerifiableCredential } from "@/interfaces/claims-result";
+import {
+  GiveSummaryRecord,
+  UserInfo,
+  VerifiableCredential,
+} from "@/interfaces";
 import * as libsUtil from "../libs/util";
 import {
  generateSaveAndActivateIdentity,
--- a/src/views/DIDView.vue
+++ b/src/views/DIDView.vue
@@ -12,20 +12,20 @@
      </h1>

      <!-- Back -->
-      <router-link
+      <button
        class="order-first text-lg text-center leading-none p-1"
-        :to="{ name: 'contacts' }"
+        @click="goBack()"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
-      </router-link>
+      </button>

      <!-- Help button -->
-      <router-link
-        :to="{ name: 'help' }"
+      <button
        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+        @click="goToHelp()"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
-      </router-link>
+      </button>
    </div>

    <!-- Identity Details -->
@@ -476,7 +476,7 @@ export default class DIDView extends Vue {
   * Navigation helper methods
   */
  goBack() {
-    this.$router.go(-1);
+    this.$router.back();
  }

  /**
--- a/src/views/NewEditProjectView.vue
+++ b/src/views/NewEditProjectView.vue
@@ -60,12 +60,60 @@
    </div>
    <ImageMethodDialog ref="imageDialog" default-camera-mode="environment" />

-    <input
-      v-model="agentDid"
-      type="text"
-      placeholder="Other Authorized Representative"
-      class="mt-4 block w-full rounded border border-slate-400 px-3 py-2"
+    <!-- Authorized Representative Selection -->
+    <div class="w-full flex items-stretch my-4">
+      <div
+        class="flex items-center gap-2 grow border border-slate-400 border-r-0 last:border-r px-3 py-2 rounded-l last:rounded overflow-hidden cursor-pointer hover:bg-slate-100"
+        @click="openRepresentativeDialog"
+      >
+        <div>
+          <EntityIcon
+            v-if="selectedRepresentative"
+            :contact="selectedRepresentative"
+            class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
+          />
+          <font-awesome v-else icon="user" class="text-slate-400" />
+        </div>
+        <div class="overflow-hidden">
+          <div
+            :class="{
+              'text-sm font-semibold': selectedRepresentative,
+              'text-slate-400': !selectedRepresentative,
+            }"
+            class="truncate"
+          >
+            {{
+              selectedRepresentative
+                ? selectedRepresentative.name || AppString.NO_CONTACT_NAME
+                : "Assign Authorized Representative…"
+            }}
+          </div>
+          <div
+            v-if="selectedRepresentative"
+            class="text-xs text-slate-500 truncate"
+          >
+            {{ agentDid }}
+          </div>
+        </div>
+      </div>
+      <button
+        v-if="selectedRepresentative"
+        class="text-rose-600 px-3 py-2 border border-slate-400 border-l-0 rounded-r hover:bg-rose-600 hover:text-white hover:border-rose-600"
+        @click="unsetRepresentative"
+      >
+        <font-awesome icon="trash-can" />
+      </button>
+    </div>
+
+    <ProjectRepresentativeDialog
+      ref="representativeDialog"
+      :all-contacts="allContacts"
+      :active-did="activeDid"
+      :all-my-dids="allMyDids"
+      :notify="$notify"
+      @assign="handleRepresentativeAssigned"
    />
+
    <div class="mb-4">
      <p v-if="shouldShowOwnershipWarning">
        <span class="text-red-500">Beware!</span>
@@ -232,9 +280,12 @@ import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
 import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 import { LeafletMouseEvent } from "leaflet";

+import EntityIcon from "../components/EntityIcon.vue";
 import ImageMethodDialog from "../components/ImageMethodDialog.vue";
+import ProjectRepresentativeDialog from "../components/ProjectRepresentativeDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
 import {
+  AppString,
  DEFAULT_IMAGE_API_SERVER,
  DEFAULT_PARTNER_API_SERVER,
  NotificationIface,
@@ -268,6 +319,7 @@ import {
  retrieveAccountCount,
  retrieveFullyDecryptedAccount,
 } from "../libs/util";
+import { Contact } from "../db/tables/contacts";

 import {
  EventTemplate,
@@ -323,7 +375,15 @@ import { logger } from "../utils/logger";
 */

@Component({
-  components: { ImageMethodDialog, LMap, LMarker, LTileLayer, QuickNav },
+  components: {
+    EntityIcon,
+    ImageMethodDialog,
+    ProjectRepresentativeDialog,
+    LMap,
+    LMarker,
+    LTileLayer,
+    QuickNav,
+  },
  mixins: [PlatformServiceMixin],
 })
 export default class NewEditProjectView extends Vue {
@@ -334,6 +394,9 @@ export default class NewEditProjectView extends Vue {
  // Notification helpers
  private notify!: ReturnType<typeof createNotifyHelpers>;

+  // Constants
+  AppString = AppString;
+
  /**
   * Display error notification to user
   * Provides consistent error messaging with 5-second timeout
@@ -346,6 +409,8 @@ export default class NewEditProjectView extends Vue {
  // Component state properties
  activeDid = "";
  agentDid = "";
+  allContacts: Array<Contact> = [];
+  allMyDids: string[] = [];
  apiServer = "";
  endDateInput?: string;
  endTimeInput?: string;
@@ -392,16 +457,24 @@ export default class NewEditProjectView extends Vue {
    const activeIdentity = await (this as any).$getActiveIdentity();
    this.activeDid = activeIdentity.activeDid || "";

+    // Get all user's DIDs
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.allMyDids = await (this as any).$getAllAccountDids();
+
+    // Load contacts sorted by date added (newest first) for consistent "Recently Added" display
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.allContacts = await (this as any).$contactsByDateAdded();
+
    this.apiServer = settings.apiServer || "";
    this.showGeneralAdvanced = !!settings.showGeneralAdvanced;

    this.projectId = (this.$route.query["projectId"] as string) || "";

-    if (this.projectId) {
+    if (this.isSavedProject()) {
      if (this.numAccounts === 0) {
        this.notify.error(NOTIFY_PROJECT_ACCOUNT_LOADING_ERROR.message);
      } else {
-        this.loadProject(this.activeDid);
+        this.loadProject(this.activeDid, this.projectId);
      }
    }
  }
@@ -411,11 +484,9 @@ export default class NewEditProjectView extends Vue {
   * Retrieves project information from the API and populates form fields
   * @param userDid - User's decentralized identifier
   */
-  async loadProject(userDid: string) {
+  async loadProject(userDid: string, projectId: string) {
    const url =
-      this.apiServer +
-      "/api/claim/byHandle/" +
-      encodeURIComponent(this.projectId);
+      this.apiServer + "/api/claim/byHandle/" + encodeURIComponent(projectId);
    const headers = await getHeaders(userDid);

    try {
@@ -432,6 +503,12 @@ export default class NewEditProjectView extends Vue {
        }
        if (this.fullClaim?.agent?.identifier) {
          this.agentDid = this.fullClaim.agent.identifier;
+          if (this.activeDid !== this.projectIssuerDid) {
+            this.agentDid = this.projectIssuerDid;
+            this.notify.warning(
+              "You were previously the agent, so the agent has been set to the previous owner. You can change it.",
+            );
+          }
        }
        if (this.fullClaim.startTime) {
          const localDateTime = DateTime.fromISO(
@@ -536,7 +613,7 @@ export default class NewEditProjectView extends Vue {
  private async saveProject() {
    // Make a claim
    const vcClaim: PlanActionClaim = this.fullClaim;
-    if (this.projectId) {
+    if (this.isSavedProject()) {
      vcClaim.lastClaimId = this.lastClaimJwtId;
    }
    if (this.agentDid) {
@@ -870,6 +947,10 @@ export default class NewEditProjectView extends Vue {
    this.longitude = event.latlng.lng;
  }

+  private isSavedProject(): boolean {
+    return !!this.projectId;
+  }
+
  /**
   * Computed property for character count display
   * Shows current description length and maximum character limit
@@ -885,6 +966,7 @@ export default class NewEditProjectView extends Vue {
   */
  get shouldShowOwnershipWarning(): boolean {
    return (
+      this.isSavedProject() &&
      this.activeDid !== this.projectIssuerDid &&
      this.agentDid !== this.projectIssuerDid
    );
@@ -961,5 +1043,37 @@ export default class NewEditProjectView extends Vue {
  get shouldShowSpinner(): boolean {
    return !this.isHiddenSpinner;
  }
+
+  /**
+   * Computed property for selected representative contact
+   * Derives the contact from agentDid by finding it in allContacts
+   */
+  get selectedRepresentative(): Contact | null {
+    if (!this.agentDid) {
+      return null;
+    }
+    return this.allContacts.find((c) => c.did === this.agentDid) || null;
+  }
+
+  /**
+   * Open the representative selection dialog
+   */
+  openRepresentativeDialog(): void {
+    (this.$refs.representativeDialog as ProjectRepresentativeDialog).open();
+  }
+
+  /**
+   * Handle representative assignment from dialog
+   */
+  handleRepresentativeAssigned(contact: Contact): void {
+    this.agentDid = contact.did;
+  }
+
+  /**
+   * Unset the representative and revert to initial state
+   */
+  unsetRepresentative(): void {
+    this.agentDid = "";
+  }
 }
 </script>
--- a/src/views/OnboardMeetingSetupView.vue
+++ b/src/views/OnboardMeetingSetupView.vue
@@ -186,16 +186,59 @@
        <div>
          <label
            for="projectLink"
-            class="block text-sm font-medium text-gray-700"
+            class="block text-sm font-medium text-gray-700 mb-1"
            >Project Link</label
          >
-          <input
-            id="projectLink"
-            v-model="newOrUpdatedMeetingInputs.projectLink"
-            type="text"
-            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
-            placeholder="Project ID"
-          />
+          <div class="w-full flex items-stretch">
+            <div
+              class="flex items-center gap-2 grow border border-slate-400 border-r-0 last:border-r px-3 py-2 rounded-l last:rounded overflow-hidden cursor-pointer hover:bg-slate-100"
+              @click="openProjectLinkDialog"
+            >
+              <div>
+                <ProjectIcon
+                  v-if="selectedProject"
+                  :entity-id="selectedProject.handleId"
+                  :icon-size="30"
+                  :image-url="selectedProject.image"
+                  class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
+                />
+                <font-awesome
+                  v-else
+                  icon="folder-open"
+                  class="text-slate-400"
+                />
+              </div>
+              <div class="overflow-hidden">
+                <div
+                  :class="{
+                    'text-sm font-semibold': selectedProject,
+                    'text-slate-400': !selectedProject,
+                  }"
+                  class="truncate"
+                >
+                  {{
+                    selectedProject
+                      ? selectedProject.name || "Unnamed Project"
+                      : "Select Project…"
+                  }}
+                </div>
+                <div
+                  v-if="selectedProject"
+                  class="text-xs text-slate-500 truncate"
+                >
+                  <font-awesome icon="user" class="text-slate-400" />
+                  {{ selectedProjectIssuerName }}
+                </div>
+              </div>
+            </div>
+            <button
+              v-if="selectedProject"
+              class="text-rose-600 px-3 py-2 border border-slate-400 border-l-0 rounded-r hover:bg-rose-600 hover:text-white hover:border-rose-600"
+              @click="unsetProjectLink"
+            >
+              <font-awesome icon="trash-can" />
+            </button>
+          </div>
        </div>

        <button
@@ -224,6 +267,19 @@
      </form>
    </div>

+    <MeetingProjectDialog
+      ref="meetingProjectDialog"
+      :all-projects="allProjects"
+      :active-did="activeDid"
+      :all-my-dids="allMyDids"
+      :all-contacts="allContacts"
+      :notify="$notify"
+      :load-more-callback="handleLoadMoreProjects"
+      @assign="handleProjectLinkAssigned"
+      @open="handleDialogOpen"
+      @close="handleDialogClose"
+    />
+
    <!-- Members Section -->
    <div
      v-if="!isLoading && currentMeeting != null && !!currentMeeting.password"
@@ -254,6 +310,7 @@
      </ul>

      <MembersList
+        ref="membersList"
        :password="currentMeeting.password || ''"
        :show-organizer-tools="true"
        class="mt-4"
@@ -292,10 +349,13 @@ import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 import QuickNav from "../components/QuickNav.vue";
 import TopMessage from "../components/TopMessage.vue";
 import MembersList from "../components/MembersList.vue";
+import MeetingProjectDialog from "../components/MeetingProjectDialog.vue";
+import ProjectIcon from "../components/ProjectIcon.vue";
 import {
  errorStringForLog,
  getHeaders,
  serverMessageForUser,
+  didInfo,
 } from "../libs/endorserServer";
 import { encryptMessage } from "../libs/crypto";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
@@ -309,6 +369,8 @@ import {
  NOTIFY_MEETING_DELETED,
  NOTIFY_MEETING_LINK_COPIED,
 } from "@/constants/notifications";
+import { PlanData } from "../interfaces/records";
+import { Contact } from "../db/tables/contacts";
 interface ServerMeeting {
  groupId: number; // from the server
  name: string; // to & from the server
@@ -331,6 +393,8 @@ interface MeetingSetupInputs {
    QuickNav,
    TopMessage,
    MembersList,
+    MeetingProjectDialog,
+    ProjectIcon,
  },
  mixins: [PlatformServiceMixin],
 })
@@ -354,6 +418,10 @@ export default class OnboardMeetingView extends Vue {
  isRegistered = false;
  showDeleteConfirm = false;
  fullName = "";
+  allProjects: PlanData[] = [];
+  allContacts: Contact[] = [];
+  allMyDids: string[] = [];
+  selectedProjectData: PlanData | null = null;
  get minDateTime() {
    const now = new Date();
    now.setMinutes(now.getMinutes() + 5); // Set minimum 5 minutes in the future
@@ -370,7 +438,17 @@ export default class OnboardMeetingView extends Vue {
    this.fullName = settings?.firstName || "";
    this.isRegistered = !!settings?.isRegistered;

+    // Load contacts and DIDs for dialog
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.allContacts = await (this as any).$contactsByDateAdded();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.allMyDids = await (this as any).$getAllAccountDids();
+
    await this.fetchCurrentMeeting();
+
+    // Ensure selected project is loaded if projectLink exists
+    await this.ensureSelectedProjectLoaded();
+
    this.isLoading = false;
  }

@@ -442,6 +520,54 @@ export default class OnboardMeetingView extends Vue {
    }
  }

+  /**
+   * Ensure the selected project is loaded if projectLink exists
+   */
+  async ensureSelectedProjectLoaded(): Promise<void> {
+    const projectLink =
+      this.currentMeeting?.projectLink ||
+      this.newOrUpdatedMeetingInputs?.projectLink;
+
+    if (!projectLink) {
+      this.selectedProjectData = null;
+      return;
+    }
+
+    await this.fetchProjectByHandleId(projectLink);
+  }
+
+  /**
+   * Fetch a single project by handleId
+   * @param handleId - The project handleId to fetch
+   */
+  async fetchProjectByHandleId(handleId: string): Promise<void> {
+    try {
+      const headers = await getHeaders(this.activeDid);
+      const url = `${this.apiServer}/api/v2/report/plans?handleId=${encodeURIComponent(handleId)}`;
+      const resp = await this.axios.get(url, { headers });
+
+      if (resp.status === 200 && resp.data.data && resp.data.data.length > 0) {
+        const project = resp.data.data[0];
+        this.selectedProjectData = {
+          name: project.name,
+          description: project.description,
+          image: project.image,
+          handleId: project.handleId,
+          issuerDid: project.issuerDid,
+          rowId: project.rowId,
+        };
+      } else {
+        this.selectedProjectData = null;
+      }
+    } catch (error) {
+      this.$logAndConsole(
+        "Error fetching project by handleId: " + errorStringForLog(error),
+        true,
+      );
+      this.selectedProjectData = null;
+    }
+  }
+
  async createMeeting() {
    this.isLoading = true;

@@ -473,6 +599,7 @@ export default class OnboardMeetingView extends Vue {
        );
        return;
      }
+      const password: string = this.newOrUpdatedMeetingInputs.password;

      // create content with user's name & DID encrypted with password
      const content = {
@@ -482,7 +609,7 @@ export default class OnboardMeetingView extends Vue {
      };
      const encryptedContent = await encryptMessage(
        JSON.stringify(content),
-        this.newOrUpdatedMeetingInputs.password,
+        password,
      );

      const headers = await getHeaders(this.activeDid);
@@ -505,6 +632,11 @@ export default class OnboardMeetingView extends Vue {

        this.newOrUpdatedMeetingInputs = null;
        this.notify.success(NOTIFY_MEETING_CREATED.message, TIMEOUTS.STANDARD);
+        // redirect to the same page with the password parameter set
+        this.$router.push({
+          name: "onboard-meeting-setup",
+          query: { password: password },
+        });
      } else {
        throw { response: response };
      }
@@ -570,7 +702,7 @@ export default class OnboardMeetingView extends Vue {
    }
  }

-  startEditing() {
+  async startEditing() {
    // Populate form with existing meeting data
    if (this.currentMeeting) {
      const localExpiresAt = new Date(this.currentMeeting.expiresAt);
@@ -581,6 +713,10 @@ export default class OnboardMeetingView extends Vue {
        password: this.currentMeeting.password || "",
        projectLink: this.currentMeeting.projectLink || "",
      };
+      // Ensure selected project is loaded if projectLink exists
+      if (this.currentMeeting.projectLink) {
+        await this.ensureSelectedProjectLoaded();
+      }
    } else {
      this.$logError(
        "There is no current meeting to edit. We should never get here.",
@@ -588,9 +724,15 @@ export default class OnboardMeetingView extends Vue {
    }
  }

-  cancelEditing() {
+  async cancelEditing() {
    // Reset form data
    this.newOrUpdatedMeetingInputs = null;
+    // Restore selected project from currentMeeting if it exists
+    if (this.currentMeeting?.projectLink) {
+      await this.ensureSelectedProjectLoaded();
+    } else {
+      this.selectedProjectData = null;
+    }
  }

  async updateMeeting() {
@@ -704,5 +846,159 @@ export default class OnboardMeetingView extends Vue {
      this.notify.error("Failed to copy meeting link to clipboard.");
    }
  }
+
+  /**
+   * Load projects from the API
+   * @param beforeId - Optional rowId for pagination (loads projects before this ID)
+   */
+  async loadProjects(beforeId?: string) {
+    try {
+      const headers = await getHeaders(this.activeDid);
+      let url = `${this.apiServer}/api/v2/report/plans`;
+      if (beforeId) {
+        url += `?beforeId=${encodeURIComponent(beforeId)}`;
+      }
+      const resp = await this.axios.get(url, { headers });
+
+      if (resp.status === 200 && resp.data.data) {
+        const newProjects = resp.data.data.map(
+          (plan: {
+            name: string;
+            description: string;
+            image?: string;
+            handleId: string;
+            issuerDid: string;
+            rowId?: string;
+          }) => ({
+            name: plan.name,
+            description: plan.description,
+            image: plan.image,
+            handleId: plan.handleId,
+            issuerDid: plan.issuerDid,
+            rowId: plan.rowId,
+          }),
+        );
+
+        if (beforeId) {
+          // Pagination: append new projects
+          this.allProjects.push(...newProjects);
+        } else {
+          // Initial load: replace array
+          this.allProjects = newProjects;
+        }
+      }
+    } catch (error) {
+      this.$logAndConsole(
+        "Error loading projects: " + errorStringForLog(error),
+        true,
+      );
+      // Don't show error to user - just leave projects empty (or keep existing if pagination)
+      if (!beforeId) {
+        this.allProjects = [];
+      }
+    }
+  }
+
+  /**
+   * Handle loading more projects when EntityGrid reaches the end
+   * Called by MeetingProjectDialog via loadMoreCallback
+   * @param entities - Current array of projects
+   */
+  async handleLoadMoreProjects(
+    entities: Array<{
+      handleId: string;
+      rowId?: string;
+    }>,
+  ): Promise<void> {
+    if (entities.length === 0) {
+      return;
+    }
+
+    const lastProject = entities[entities.length - 1];
+    if (!lastProject.rowId) {
+      // No rowId means we can't paginate - likely end of data
+      return;
+    }
+
+    await this.loadProjects(lastProject.rowId);
+  }
+
+  /**
+   * Computed property for selected project
+   * Returns the separately stored selected project data
+   */
+  get selectedProject(): PlanData | null {
+    return this.selectedProjectData;
+  }
+
+  /**
+   * Computed property for selected project issuer display name
+   * Uses didInfo to format the issuer name similar to ProjectCard
+   */
+  get selectedProjectIssuerName(): string {
+    if (!this.selectedProject) {
+      return "";
+    }
+    return didInfo(
+      this.selectedProject.issuerDid,
+      this.activeDid,
+      this.allMyDids,
+      this.allContacts,
+    );
+  }
+
+  /**
+   * Open the project link selection dialog
+   */
+  openProjectLinkDialog(): void {
+    (this.$refs.meetingProjectDialog as MeetingProjectDialog).open();
+  }
+
+  /**
+   * Handle project assignment from dialog
+   */
+  handleProjectLinkAssigned(project: PlanData): void {
+    // Store the selected project directly
+    this.selectedProjectData = project;
+
+    if (this.newOrUpdatedMeetingInputs) {
+      this.newOrUpdatedMeetingInputs.projectLink = project.handleId;
+    }
+  }
+
+  /**
+   * Unset the project link and revert to initial state
+   */
+  unsetProjectLink(): void {
+    this.selectedProjectData = null;
+    if (this.newOrUpdatedMeetingInputs) {
+      this.newOrUpdatedMeetingInputs.projectLink = "";
+    }
+  }
+
+  /**
+   * Handle dialog open event - stop auto-refresh in MembersList and load projects
+   */
+  async handleDialogOpen(): Promise<void> {
+    const membersList = this.$refs.membersList as MembersList;
+    if (membersList) {
+      membersList.stopAutoRefresh();
+    }
+
+    // Load projects when dialog opens (if not already loaded)
+    if (this.allProjects.length === 0) {
+      await this.loadProjects();
+    }
+  }
+
+  /**
+   * Handle dialog close event - start auto-refresh in MembersList
+   */
+  handleDialogClose(): void {
+    const membersList = this.$refs.membersList as MembersList;
+    if (membersList) {
+      membersList.startAutoRefresh();
+    }
+  }
 }
 </script>
Author	SHA1	Message	Date
Jose Olarte III	acf104eaa7	refactor: remove debug loggers from EntityGrid component Remove three logger.debug() calls used for debugging project search results and pagination state. Error logging remains intact.	2025-11-13 21:41:34 +08:00
Jose Olarte III	e793d7a9e2	refactor: defer project loading until MeetingProjectDialog opens - Move loadProjects() call from created() to handleDialogOpen() - Remove allProjects check from ensureSelectedProjectLoaded() - Projects now load only when dialog is opened, improving initial page load performance - ensureSelectedProjectLoaded() now directly fetches project by handleId when needed	2025-11-13 21:28:47 +08:00
Jose Olarte III	3ecae0be0f	refactor(OnboardMeetingSetupView): fix selected project display after refresh Refactor selectedProject computation to use separate storage instead of relying on allProjects array. This fixes a bug where the selected project wouldn't display after page refresh if it wasn't in the initial allProjects batch. Changes: - Add selectedProjectData property to store selected project independently - Simplify selectedProject computed to return selectedProjectData directly - Add fetchProjectByHandleId() to fetch single project by handleId - Add ensureSelectedProjectLoaded() to check allProjects first, then fetch - Update handleProjectLinkAssigned() to store directly in selectedProjectData - Remove band-aid solution of adding selected projects to allProjects array - Update startEditing() and cancelEditing() to ensure selected project loads - Call ensureSelectedProjectLoaded() in created() lifecycle hook This ensures the selected project always displays correctly, even when: - Selected from search results (not in allProjects) - Page is refreshed (allProjects reloads without selected project) - Project is in a later pagination batch	2025-11-13 19:21:22 +08:00
Jose Olarte III	d37e53b1a9	fix: pause MembersList auto-refresh during project dialog interaction Stop auto-refresh when MeetingProjectDialog opens and resume when it closes to prevent UI conflicts during project selection.	2025-11-13 18:10:35 +08:00
Jose Olarte III	2f89c7e13b	feat(EntityGrid): add server-side search with pagination for projects Implement server-side search for projects using API endpoint with pagination support via beforeId parameter. Contacts continue using client-side filtering from complete local database. - Add PlatformServiceMixin for internal apiServer access - Implement performProjectSearch() with pagination - Update infinite scroll to handle search pagination - Add search lifecycle management and error handling No breaking changes to parent components.	2025-11-12 21:06:20 +08:00
Jose Olarte III	6bf4055c2f	feat: add pagination support for project lists in dialogs Add server-side pagination to EntityGrid component for projects, enabling infinite scrolling to load all available projects instead of stopping after the initial batch. Changes: - EntityGrid: Add loadMoreCallback prop to trigger server-side loading when scroll reaches end of loaded projects - OnboardMeetingSetupView: Update loadProjects() to support pagination with beforeId parameter and add handleLoadMoreProjects() callback - MeetingProjectDialog: Accept and pass through loadMoreCallback to EntityGrid - GiftedDialog: Add pagination support to loadProjects() and handleLoadMoreProjects() callback - EntitySelectionStep: Accept and pass through loadMoreCallback prop to EntityGrid when showing projects This ensures users can access all projects in MeetingProjectDialog and GiftedDialog by automatically loading more as they scroll, matching the behavior already present in DiscoverView. All project uses of EntityGrid now use pagination by default.	2025-11-12 17:10:03 +08:00
Jose Olarte III	bf7ee630d0	feat(meeting): enable selecting all projects in meeting setup Update loadProjects to fetch all projects instead of only user's projects by switching from plansByIssuer to plans endpoint.	2025-11-12 15:58:23 +08:00
Jose Olarte III	a5a9af5ddc	feat(meetings): add project selection dialog for meeting setup Replace Project Link text input with interactive selection dialog using new MeetingProjectDialog component. Dialog displays user's projects with icons and issuer information, following the same pattern as ProjectRepresentativeDialog. - Create MeetingProjectDialog with EntityGrid integration - Add clickable project field with icon, name, and issuer display - Load projects from /api/v2/report/plansByIssuer endpoint - Show issuer name instead of handleId for better UX - Refactor loadProjects to remove unused rowId field	2025-11-11 21:34:11 +08:00
Jose Olarte III	4e3e293495	refactor(EntityGrid): simplify alphabetical section label Change "Everyone Else" to "Everyone" for clearer, more concise labeling	2025-11-11 15:32:11 +08:00
Jose Olarte III	65533c15d2	Merge branch 'project-representative-dialog' of ssh://173.199.124.46:222/trent_larson/crowd-funder-for-time-pwa into project-representative-dialog	2025-11-11 15:15:01 +08:00
Jose Olarte III	2530bc0ec2	fix: ensure consistent "Recently Added" contacts in ProjectRepresentativeDialog EntityGrid's recentContacts assumes contacts are sorted by date added (newest first), but ProjectRepresentativeDialog was receiving contacts sorted alphabetically from NewEditProjectView, causing it to show different "Recently Added" contacts than GiftedDialog. - Changed NewEditProjectView to use $contactsByDateAdded() instead of $getAllContacts() - Added documentation comments to EntityGrid.vue to prevent this issue in future reuses	2025-11-11 15:06:07 +08:00
Trent Larson	b1fa6ac458	feat: show the recent contacts in the alphabetical section of choosers	2025-11-07 18:27:05 -07:00
Trent Larson	9ff24f8258	fix: in project-edit view, don't show agent warning on new one, and automatically switch if they're changing	2025-11-07 18:11:11 -07:00
Jose Olarte III	9a3409c29f	refactor: remove unused code from ProjectRepresentativeDialog - Remove conflictChecker prop (always passed as no-op function) - Remove unused emitCancel method and cancel event handling - Simplify handleEntitySelected by removing unnecessary type check - Update NewEditProjectView to remove conflict-checker binding and empty cancel handler The conflictChecker prop was not needed since representative selection doesn't require conflict detection. The cancel event was never emitted and the parent handler was empty, so both were removed.	2025-11-07 17:43:44 +08:00
Jose Olarte III	a142737771	feat: replace authorized representative input with contact selection dialog Replace the plain text input for authorized representative with an interactive contact selection interface that provides better UX and maintains data consistency. Changes: - Add ProjectRepresentativeDialog component using EntityGrid for contact selection (excludes "You" and "Unnamed" special entities) - Replace text input with clickable field showing contact icon, name, and DID - Implement conditional UI states: initial "Assign..." placeholder vs assigned representative display with unset button - Refactor selectedRepresentative to computed property derived from agentDid (single source of truth, prevents sync issues) - Inline representativeDisplayName for simplicity - Support changing representative by clicking on assigned field - Support unsetting representative via trash button The new implementation ensures agentDid remains the authoritative state while selectedRepresentative is automatically computed, preventing the previously possible desync when agentDid was set directly (e.g., via the "make original owner an authorized representative" button).	2025-11-05 20:20:43 +08:00
Jose Olarte 3	1053bb6e4c	Merge pull request 'bulk-members-dialog-refactor' (#218 ) from bulk-members-dialog-refactor into master Reviewed-on: #218	2025-11-05 03:34:27 -05:00
Jose Olarte 3	88f46787e5	Merge pull request 'entity-selection-list-component' (#216 ) from entity-selection-list-component into master Reviewed-on: #216	2025-11-05 03:25:35 -05:00
Jose Olarte III	d9230d0be8	fix: restore proper dialog max-height	2025-11-05 16:25:06 +08:00
Jose Olarte III	38f301f053	Merge branch 'master' into entity-selection-list-component	2025-11-05 16:12:39 +08:00
Jose Olarte 3	e42552c67a	Merge pull request 'feat(EntityGrid): implement infinite scroll for entity lists' (#215 ) from entity-selection-list-component-infinite-scroll into entity-selection-list-component Reviewed-on: #215	2025-11-05 02:52:30 -05:00
Trent Larson	0e3c6cb314	chore: bump version to 1.1.2-beta	2025-11-04 08:38:01 -07:00
Trent Larson	232b787b37	chore: bump to version 1.1.1 build 46 (emojis, starred projects, improved onboarding meetings)	2025-11-04 08:36:08 -07:00
Jose Olarte III	c06ffec466	refactor: combine member processing methods in BulkMembersDialog Consolidate organizerAdmitAndAddWithVisibility() and memberAddContactWithVisibility() into a single unified method processSelectedMembers() that handles both organizer and member modes based on the isOrganizer prop. - Remove redundant handleMainAction() wrapper method - Update template to call processSelectedMembers directly - Reduce code duplication by ~30% (140 lines → 98 lines) - Maintain identical functionality for both modes This simplifies the component structure and makes the processing logic easier to maintain.	2025-11-04 18:39:45 +08:00
Jose Olarte III	8b199ec76c	refactor: remove redundant dialogType prop from BulkMembersDialog Remove dialogType prop and consolidate to use only isOrganizer prop. - Remove dialogType prop from BulkMembersDialog component - Replace all dialogType checks with isOrganizer boolean checks - Add comments clarifying isOrganizer true/false meanings - Remove dialog-type prop binding from MembersList component This simplifies the component API while maintaining the same functionality.	2025-11-04 17:57:38 +08:00
Trent Larson	7e861e2fca	fix: when organizer adds people, they automatically register them as well	2025-11-03 20:21:34 -07:00
Trent Larson	73806e78bc	refactor: fix the 'back' links to work consistently, so contact pages can be included in other flows	2025-11-03 19:06:01 -07:00
Jose Olarte III	d32cca4f53	feat(EntityGrid): implement infinite scroll for entity lists Add infinite scroll functionality to EntityGrid component using VueUse's useInfiniteScroll composable to handle large volumes of entities efficiently. Changes: - Integrate @vueuse/core useInfiniteScroll composable - Add infinite scroll state management (displayedCount, reset function) - Configure initial batch size (20 items) and increment size (20 items) - Update displayedEntities, alphabeticalContacts to support progressive loading - Add canLoadMore() logic for people, projects, and search modes - Reset scroll state when search term or entities prop changes - Remove maxItems prop (replaced by infinite scroll) - Simplify displayEntitiesFunction signature (removed maxItems parameter) - Update EntitySelectionStep and test files to remove max-items prop Technical details: - Uses template ref (scrollContainer) to access scrollable container - Recent contacts (3) count toward initial batch for people grid - Special entities (You, Unnamed) always displayed, don't count toward limits - Infinite scroll works for both entity types and search results - Constants are configurable at top of component (INITIAL_BATCH_SIZE, INCREMENT_SIZE) This improves performance and UX when displaying large lists of contacts or projects by loading content progressively as users scroll.	2025-11-03 21:47:25 +08:00
Jose Olarte III	4004d9fe52	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	2025-11-03 16:32:59 +08:00
Jose Olarte III	2f99d0b416	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.	2025-10-31 19:10:13 +08:00
Jose Olarte III	9c3002f9c7	feat(EntityGrid): sort search results alphabetically Sort search results alphabetically while preserving original order for default list when no search term is present.	2025-10-31 19:07:50 +08:00
Jose Olarte III	82fd7cddf7	feat: Add showUnnamedEntity prop to EntityGrid Add prop to control visibility of "Unnamed" entity, matching showYouEntity pattern. Defaults to true for backward compatibility.	2025-10-31 18:59:35 +08:00
Jose Olarte III	10f2920e11	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.	2025-10-31 18:34:54 +08:00
Jose Olarte III	75c89b471c	fix: linting	2025-10-30 21:49:35 +08:00
Jose Olarte III	a804877a08	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.	2025-10-30 21:16:36 +08:00
Jose Olarte III	f7441f39e7	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.	2025-10-30 17:31:18 +08:00
Jose Olarte III	e647af0777	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	2025-10-24 13:26:36 +08:00