feat: Add bulk admit pending members functionality

- Add "Admit Pending" button to admit all pending members at once
- Implement confirmation dialog with options to add members to contacts
- Hide button when no pending members exist
- Pause auto-refresh during dialog interaction for better UX
- Add notification constants for dialog text and actions
- Support both "Admit and Add to Contacts" and "Admit Only" workflows
- Include comprehensive error handling and success feedback

The dialog shows pending member count and allows users to choose whether
to add admitted members to their contacts list, streamlining the
admission process for organizers.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "timesafari",
-  "version": "1.1.1-beta",
+  "version": "1.1.0-beta",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "timesafari",
-      "version": "1.1.1-beta",
+      "version": "1.1.0-beta",
       "dependencies": {
         "@capacitor-community/electron": "^5.0.1",
         "@capacitor-community/sqlite": "6.0.2",

src/assets/styles/tailwind.css

@@ -38,7 +38,7 @@
 	}
 
 	.dialog {
-		@apply bg-white p-4 rounded-lg w-full max-w-lg max-h-[calc(100vh-3rem)] overflow-y-auto;
+		@apply bg-white p-4 rounded-lg w-full max-w-lg;
 	}
 
 	/* Markdown content styling to restore list elements */

src/components/ActivityListItem.vue

@@ -77,86 +77,12 @@
         </a>
       </div>
 
-      <!-- Emoji Section -->
-      <div
-        v-if="hasEmojis || isRegistered"
-        class="float-right ml-3 mb-1 bg-white rounded border border-slate-300 px-1.5 py-0.5 max-w-[240px]"
-      >
-        <div class="flex items-center justify-between gap-1">
-          <!-- Existing Emojis Display -->
-          <div v-if="hasEmojis" class="flex flex-wrap gap-1">
-            <button
-              v-for="(count, emoji) in record.emojiCount"
-              :key="emoji"
-              class="inline-flex items-center gap-0.5 px-1 py-0.5 text-xs bg-slate-50 hover:bg-slate-100 rounded border border-slate-200 transition-colors cursor-pointer"
-              :class="{
-                'bg-blue-50 border-blue-200': isUserEmojiWithoutLoading(emoji),
-                'opacity-75 cursor-wait': loadingEmojis,
-              }"
-              :title="
-                loadingEmojis
-                  ? 'Loading...'
-                  : !emojisOnActivity?.isResolved
-                    ? 'Click to load your emojis'
-                    : isUserEmojiWithoutLoading(emoji)
-                      ? 'Click to remove your emoji'
-                      : 'Click to add this emoji'
-              "
-              :disabled="!isRegistered"
-              @click="toggleThisEmoji(emoji)"
-            >
-              <!-- Show spinner when loading -->
-              <div v-if="loadingEmojis" class="animate-spin text-xs">
-                <font-awesome icon="spinner" class="fa-spin" />
-              </div>
-              <span v-else class="text-sm leading-none">{{ emoji }}</span>
-              <span class="text-xs text-slate-600 font-medium leading-none">{{
-                count
-              }}</span>
-            </button>
-          </div>
-
-          <!-- Add Emoji Button -->
-          <button
-            v-if="isRegistered"
-            class="inline-flex px-1 py-0.5 text-xs bg-slate-100 hover:bg-slate-200 rounded border border-slate-300 transition-colors items-center justify-center ml-2 ml-auto"
-            :title="showEmojiPicker ? 'Close emoji picker' : 'Add emoji'"
-            @click="toggleEmojiPicker"
-          >
-            <span class="px-2 text-sm leading-none">{{
-              showEmojiPicker ? "x" : "😊"
-            }}</span>
-          </button>
-        </div>
-
-        <!-- Emoji Picker (placeholder for now) -->
-        <div
-          v-if="showEmojiPicker"
-          class="mt-1 p-1.5 bg-slate-50 rounded border border-slate-300"
-        >
-          <!-- Temporary emoji buttons for testing -->
-          <div class="flex flex-wrap gap-3 mt-1">
-            <button
-              v-for="emoji in QUICK_EMOJIS"
-              :key="emoji"
-              class="p-0.5 hover:bg-slate-200 rounded text-base transition-opacity"
-              :class="{
-                'opacity-75 cursor-wait': loadingEmojis,
-              }"
-              :disabled="loadingEmojis"
-              @click="toggleThisEmoji(emoji)"
-            >
-              <!-- Show spinner when loading -->
-              <div v-if="loadingEmojis" class="animate-spin text-sm">⟳</div>
-              <span v-else>{{ emoji }}</span>
-            </button>
-          </div>
-        </div>
-      </div>
-
       <!-- Description -->
-      <p class="font-medium">
-        <a class="block cursor-pointer" @click="emitLoadClaim(record.jwtId)">
+      <p class="font-medium overflow-hidden">
+        <a
+          class="block cursor-pointer overflow-hidden text-ellipsis"
+          @click="emitLoadClaim(record.jwtId)"
+        >
           <vue-markdown
             :source="truncatedDescription"
             class="markdown-content"
@@ -165,7 +91,7 @@
       </p>
 
       <div
-        class="clear-right relative flex justify-between gap-4 max-w-[40rem] mx-auto mt-4"
+        class="relative flex justify-between gap-4 max-w-[40rem] mx-auto mt-4"
       >
         <!-- Source -->
         <div
@@ -328,24 +254,17 @@
 
 <script lang="ts">
 import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
-import VueMarkdown from "vue-markdown-render";
-
-import { logger } from "../utils/logger";
-import {
-  createAndSubmitClaim,
-  getHeaders,
-  isHiddenDid,
-} from "../libs/endorserServer";
+import { GiveRecordWithContactInfo } from "@/interfaces/give";
 import EntityIcon from "./EntityIcon.vue";
+import { isHiddenDid } from "../libs/endorserServer";
 import ProjectIcon from "./ProjectIcon.vue";
-import { createNotifyHelpers, NotifyFunction, TIMEOUTS } from "@/utils/notify";
+import { createNotifyHelpers, NotifyFunction } from "@/utils/notify";
 import {
   NOTIFY_PERSON_HIDDEN,
   NOTIFY_UNKNOWN_PERSON,
 } from "@/constants/notifications";
-import { EmojiSummaryRecord, GenericVerifiableCredential } from "@/interfaces";
-import { GiveRecordWithContactInfo } from "@/interfaces/give";
-import { PromiseTracker } from "@/libs/util";
+import { TIMEOUTS } from "@/utils/notify";
+import VueMarkdown from "vue-markdown-render";
 
 @Component({
   components: {
@@ -355,24 +274,15 @@ import { PromiseTracker } from "@/libs/util";
   },
 })
 export default class ActivityListItem extends Vue {
-  readonly QUICK_EMOJIS = ["👍", "👏", "❤️", "🎉", "😊", "😆", "🔥"];
-
   @Prop() record!: GiveRecordWithContactInfo;
   @Prop() lastViewedClaimId?: string;
   @Prop() isRegistered!: boolean;
   @Prop() activeDid!: string;
-  @Prop() apiServer!: string;
 
   isHiddenDid = isHiddenDid;
   notify!: ReturnType<typeof createNotifyHelpers>;
   $notify!: NotifyFunction;
 
-  // Emoji-related data
-  showEmojiPicker = false;
-  loadingEmojis = false; // Track if emojis are currently loading
-
-  emojisOnActivity: PromiseTracker<EmojiSummaryRecord[]> | null = null; // load this only when needed
-
   created() {
     this.notify = createNotifyHelpers(this.$notify);
   }
@@ -436,186 +346,5 @@ export default class ActivityListItem extends Vue {
       day: "numeric",
     });
   }
-
-  // Emoji-related computed properties and methods
-  get hasEmojis(): boolean {
-    return Object.keys(this.record.emojiCount).length > 0;
-  }
-
-  triggerUserEmojiLoad(): PromiseTracker<EmojiSummaryRecord[]> {
-    if (!this.emojisOnActivity) {
-      const promise = new Promise<EmojiSummaryRecord[]>((resolve) => {
-        (async () => {
-          this.axios
-            .get(
-              `${this.apiServer}/api/v2/report/emoji?parentHandleId=${encodeURIComponent(this.record.handleId)}`,
-              { headers: await getHeaders(this.activeDid) },
-            )
-            .then((response) => {
-              const userEmojiRecords = response.data.data.filter(
-                (e: EmojiSummaryRecord) => e.issuerDid === this.activeDid,
-              );
-              resolve(userEmojiRecords);
-            })
-            .catch((error) => {
-              logger.error("Error loading user emojis:", error);
-              resolve([]);
-            });
-        })();
-      });
-
-      this.emojisOnActivity = new PromiseTracker(promise);
-    }
-    return this.emojisOnActivity;
-  }
-
-  /**
-   *
-   * @param emoji - The emoji to check.
-   * @returns True if the emoji is in the user's emojis, false otherwise.
-   *
-   * @note This method is quick and synchronous, and can check resolved emojis
-   * without triggering a server request. Returns false if emojis haven't been loaded yet.
-   */
-  isUserEmojiWithoutLoading(emoji: string): boolean {
-    if (this.emojisOnActivity?.isResolved && this.emojisOnActivity.value) {
-      return this.emojisOnActivity.value.some(
-        (record) => record.text === emoji,
-      );
-    }
-    return false;
-  }
-
-  async toggleEmojiPicker() {
-    this.triggerUserEmojiLoad(); // trigger it, but don't wait for it to complete
-    this.showEmojiPicker = !this.showEmojiPicker;
-  }
-
-  async toggleThisEmoji(emoji: string) {
-    // Start loading indicator
-    this.loadingEmojis = true;
-    this.showEmojiPicker = false; // always close the picker when an emoji is clicked
-
-    try {
-      this.triggerUserEmojiLoad(); // trigger just in case
-
-      const userEmojiList = await this.emojisOnActivity!.promise; // must wait now that they've chosen
-
-      const userHasEmoji: boolean = userEmojiList.some(
-        (record) => record.text === emoji,
-      );
-
-      if (userHasEmoji) {
-        this.$notify(
-          {
-            group: "modal",
-            type: "confirm",
-            title: "Remove Emoji",
-            text: `Do you want to remove your ${emoji} ?`,
-            yesText: "Remove",
-            onYes: async () => {
-              await this.removeEmoji(emoji);
-            },
-          },
-          TIMEOUTS.MODAL,
-        );
-      } else {
-        // User doesn't have this emoji, add it
-        await this.submitEmoji(emoji);
-      }
-    } finally {
-      // Remove loading indicator
-      this.loadingEmojis = false;
-    }
-  }
-
-  async submitEmoji(emoji: string) {
-    try {
-      // Create an Emoji claim and send to the server
-      const emojiClaim: GenericVerifiableCredential = {
-        "@context": "https://endorser.ch",
-        "@type": "Emoji",
-        text: emoji,
-        parentItem: { lastClaimId: this.record.jwtId },
-      };
-      const claim = await createAndSubmitClaim(
-        emojiClaim,
-        this.activeDid,
-        this.apiServer,
-        this.axios,
-      );
-      if (claim.success && !claim.embeddedRecordError) {
-        // Update emoji count
-        this.record.emojiCount[emoji] =
-          (this.record.emojiCount[emoji] || 0) + 1;
-
-        // Create a new emoji record (we'll get the actual jwtId from the server response later)
-        const newEmojiRecord: EmojiSummaryRecord = {
-          issuerDid: this.activeDid,
-          jwtId: claim.claimId || "",
-          text: emoji,
-          parentHandleId: this.record.jwtId,
-        };
-
-        // Update user emojis list by creating a new promise with the updated data
-        // (Trigger shouldn't be necessary since all calls should come through a toggle, but just in case someone calls this directly)
-        this.triggerUserEmojiLoad();
-        const currentEmojis = await this.emojisOnActivity!.promise; // must wait now that they've clicked one
-        this.emojisOnActivity = new PromiseTracker(
-          Promise.resolve([...currentEmojis, newEmojiRecord]),
-        );
-      } else {
-        this.notify.error("Failed to add emoji.", TIMEOUTS.STANDARD);
-      }
-    } catch (error) {
-      logger.error("Error submitting emoji:", error);
-      this.notify.error("Got error adding emoji.", TIMEOUTS.STANDARD);
-    }
-  }
-
-  async removeEmoji(emoji: string) {
-    try {
-      // Create an Emoji claim and send to the server
-      const emojiClaim: GenericVerifiableCredential = {
-        "@context": "https://endorser.ch",
-        "@type": "Emoji",
-        text: emoji,
-        parentItem: { lastClaimId: this.record.jwtId },
-      };
-      const claim = await createAndSubmitClaim(
-        emojiClaim,
-        this.activeDid,
-        this.apiServer,
-        this.axios,
-      );
-      if (claim.success && !claim.embeddedRecordError) {
-        // Update emoji count
-        const newCount = Math.max(0, (this.record.emojiCount[emoji] || 0) - 1);
-        if (newCount === 0) {
-          delete this.record.emojiCount[emoji];
-        } else {
-          this.record.emojiCount[emoji] = newCount;
-        }
-
-        // Update user emojis list by creating a new promise with the updated data
-        // (Trigger shouldn't be necessary since all calls should come through a toggle, but just in case someone calls this directly)
-        this.triggerUserEmojiLoad();
-        const currentEmojis = await this.emojisOnActivity!.promise; // must wait now that they've clicked one
-        this.emojisOnActivity = new PromiseTracker(
-          Promise.resolve(
-            currentEmojis.filter(
-              (record) =>
-                record.issuerDid === this.activeDid && record.text !== emoji,
-            ),
-          ),
-        );
-      } else {
-        this.notify.error("Failed to remove emoji.", TIMEOUTS.STANDARD);
-      }
-    } catch (error) {
-      logger.error("Error removing emoji:", error);
-      this.notify.error("Got error removing emoji.", TIMEOUTS.STANDARD);
-    }
-  }
 }
 </script>

src/components/EntityGrid.vue

@@ -2,55 +2,12 @@
 GiftedDialog.vue to provide a reusable grid layout * for displaying people,
 projects, and special entities with selection. * * @author Matthew Raymer */
 <template>
-  <!-- Quick Search -->
-  <div id="QuickSearch" class="mb-4 flex items-center text-sm">
-    <input
-      v-model="searchTerm"
-      type="text"
-      placeholder="Search…"
-      class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-1.5 placeholder:italic placeholder:text-slate-400 focus:outline-none"
-      @input="handleSearchInput"
-      @keydown.enter="performSearch"
-    />
-    <div
-      v-show="isSearching && 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"
-  >
+  <ul :class="gridClasses">
     <!-- Special entities (You, Unnamed) for people grids -->
     <template v-if="entityType === 'people'">
       <!-- "You" entity -->
       <SpecialEntityCard
-        v-if="showYouEntity && !searchTerm.trim()"
+        v-if="showYouEntity"
         entity-type="you"
         label="You"
         icon="hand"
@@ -64,7 +21,6 @@ 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"
@@ -82,60 +38,16 @@ projects, and special entities with selection. * * @author Matthew Raymer */
 
     <!-- Entity cards (people or projects) -->
     <template v-if="entityType === 'people'">
-      <!-- When showing contacts without search: split into recent and alphabetical -->
-      <template v-if="!searchTerm.trim()">
-        <!-- Recently Added Section -->
-        <template v-if="recentContacts.length > 0">
-          <li
-            class="text-xs font-semibold text-slate-500 uppercase pt-5 pb-1.5 px-2 border-b border-slate-300"
-          >
-            Recently Added
-          </li>
-          <PersonCard
-            v-for="person in recentContacts"
-            :key="person.did"
-            :person="person"
-            :conflicted="isPersonConflicted(person.did)"
-            :show-time-icon="true"
-            :notify="notify"
-            :conflict-context="conflictContext"
-            @person-selected="handlePersonSelected"
-          />
-        </template>
-
-        <!-- Alphabetical Section -->
-        <template v-if="alphabeticalContacts.length > 0">
-          <li
-            class="text-xs font-semibold text-slate-500 uppercase pt-5 pb-1.5 px-2 border-b border-slate-300"
-          >
-            Everyone Else
-          </li>
-          <PersonCard
-            v-for="person in alphabeticalContacts"
-            :key="person.did"
-            :person="person"
-            :conflicted="isPersonConflicted(person.did)"
-            :show-time-icon="true"
-            :notify="notify"
-            :conflict-context="conflictContext"
-            @person-selected="handlePersonSelected"
-          />
-        </template>
-      </template>
-
-      <!-- When searching: show filtered results normally -->
-      <template v-else>
-        <PersonCard
-          v-for="person in displayedEntities as Contact[]"
-          :key="person.did"
-          :person="person"
-          :conflicted="isPersonConflicted(person.did)"
-          :show-time-icon="true"
-          :notify="notify"
-          :conflict-context="conflictContext"
-          @person-selected="handlePersonSelected"
-        />
-      </template>
+      <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 v-else-if="entityType === 'projects'">
@@ -151,27 +63,28 @@ 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, Watch } from "vue-facing-decorator";
-import { useInfiniteScroll } from "@vueuse/core";
+import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
 import PersonCard from "./PersonCard.vue";
 import ProjectCard from "./ProjectCard.vue";
 import SpecialEntityCard from "./SpecialEntityCard.vue";
+import ShowAllCard from "./ShowAllCard.vue";
 import { Contact } from "../db/tables/contacts";
 import { PlanData } from "../interfaces/records";
 import { NotificationIface } from "../constants/app";
 import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
 
-/**
- * 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
  *
@@ -180,6 +93,7 @@ const RECENT_CONTACTS_COUNT = 3;
  * - 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
@@ -190,6 +104,7 @@ const RECENT_CONTACTS_COUNT = 3;
     PersonCard,
     ProjectCard,
     SpecialEntityCard,
+    ShowAllCard,
   },
 })
 export default class EntityGrid extends Vue {
@@ -197,21 +112,14 @@ export default class EntityGrid extends Vue {
   @Prop({ required: true })
   entityType!: "people" | "projects";
 
-  // Search state
-  searchTerm = "";
-  isSearching = false;
-  searchTimeout: NodeJS.Timeout | null = null;
-  filteredEntities: Contact[] | PlanData[] = [];
-
-  // Infinite scroll state
-  displayedCount = INITIAL_BATCH_SIZE;
-  infiniteScrollReset?: () => void;
-  scrollContainer?: HTMLElement;
-
   /** Array of entities to display */
   @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;
@@ -232,14 +140,18 @@ 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;
@@ -248,31 +160,42 @@ 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 and sorting.
-   * Note: Infinite scroll is disabled when this prop is provided.
+   * are displayed in the grid, enabling advanced filtering, sorting, and
+   * display logic beyond the default simple slice behavior.
    *
    * @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) =>
-   *   entities.filter(e => e.profileImageUrl)"
+   * :display-entities-function="(entities, type, max) =>
+   *   entities.filter(e => e.profileImageUrl).slice(0, max)"
    *
    * @example
    * // Custom sorting: sort projects by name
-   * :display-entities-function="(entities, type) =>
-   *   entities.sort((a, b) => a.name.localeCompare(b.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)"
    */
   @Prop({ default: null })
   displayEntitiesFunction?: (
     entities: Contact[] | PlanData[],
     entityType: "people" | "projects",
+    maxItems: number,
   ) => Contact[] | PlanData[];
 
   /**
@@ -283,60 +206,33 @@ export default class EntityGrid extends Vue {
   }
 
   /**
-   * Computed entities to display - uses function prop if provided, otherwise uses infinite scroll
-   * When searching, returns filtered results with infinite scroll applied
+   * Computed CSS classes for the grid layout
+   */
+  get gridClasses(): string {
+    const baseClasses = "grid gap-x-2 gap-y-4 text-center mb-4";
+
+    if (this.entityType === "projects") {
+      return `${baseClasses} grid-cols-3 md:grid-cols-4`;
+    } else {
+      return `${baseClasses} grid-cols-4 sm:grid-cols-5 md:grid-cols-6`;
+    }
+  }
+
+  /**
+   * Computed entities to display - uses function prop if provided, otherwise defaults
    */
   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);
+      return this.displayEntitiesFunction(
+        this.entities,
+        this.entityType,
+        this.maxItems,
+      );
     }
 
-    // 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 [];
-  }
-
-  /**
-   * Get the 3 most recently added contacts (when showing contacts and not searching)
-   */
-  get recentContacts(): Contact[] {
-    if (this.entityType !== "people" || this.searchTerm.trim()) {
-      return [];
-    }
-    // Entities are already sorted by date added (newest first)
-    return (this.entities as Contact[]).slice(0, 3);
-  }
-
-  /**
-   * Get the remaining contacts sorted alphabetically (when showing contacts and not searching)
-   * Uses infinite scroll to control how many are displayed
-   */
-  get alphabeticalContacts(): Contact[] {
-    if (this.entityType !== "people" || this.searchTerm.trim()) {
-      return [];
-    }
-    // Skip the first 3 (recent contacts) and sort the rest alphabetically
-    // Create a copy to avoid mutating the original array
-    const remaining = (this.entities as Contact[]).slice(RECENT_CONTACTS_COUNT);
-    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 3 recent)
-    const toShow = Math.max(0, this.displayedCount - RECENT_CONTACTS_COUNT);
-    return sorted.slice(0, toShow);
+    // Default implementation for backward compatibility
+    const maxDisplay = this.entityType === "projects" ? 7 : this.maxItems;
+    return this.entities.slice(0, maxDisplay);
   }
 
   /**
@@ -350,6 +246,15 @@ 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
    */
@@ -423,144 +328,6 @@ export default class EntityGrid extends Vue {
     });
   }
 
-  /**
-   * Handle search input with debouncing
-   */
-  handleSearchInput(): void {
-    // Show spinner immediately when user types
-    this.isSearching = true;
-
-    // Clear existing timeout
-    if (this.searchTimeout) {
-      clearTimeout(this.searchTimeout);
-    }
-
-    // Set new timeout for 500ms delay
-    this.searchTimeout = setTimeout(() => {
-      this.performSearch();
-    }, 500);
-  }
-
-  /**
-   * Perform the actual search
-   */
-  async performSearch(): Promise<void> {
-    if (!this.searchTerm.trim()) {
-      this.filteredEntities = [];
-      this.displayedCount = INITIAL_BATCH_SIZE;
-      this.infiniteScrollReset?.();
-      return;
-    }
-
-    this.isSearching = true;
-
-    try {
-      // Simulate async search (in case we need to add API calls later)
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      const searchLower = this.searchTerm.toLowerCase().trim();
-
-      if (this.entityType === "people") {
-        this.filteredEntities = (this.entities as Contact[])
-          .filter((contact: Contact) => {
-            const name = contact.name?.toLowerCase() || "";
-            const did = contact.did.toLowerCase();
-            return name.includes(searchLower) || did.includes(searchLower);
-          })
-          .sort((a: Contact, b: Contact) => {
-            // Sort alphabetically by name, falling back to DID if name is missing
-            const nameA = (a.name || a.did).toLowerCase();
-            const nameB = (b.name || b.did).toLowerCase();
-            return nameA.localeCompare(nameB);
-          });
-      } else {
-        this.filteredEntities = (this.entities as PlanData[])
-          .filter((project: PlanData) => {
-            const name = project.name?.toLowerCase() || "";
-            const handleId = project.handleId.toLowerCase();
-            return name.includes(searchLower) || handleId.includes(searchLower);
-          })
-          .sort((a: PlanData, b: PlanData) => {
-            // Sort alphabetically by name
-            return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
-          });
-      }
-
-      // Reset displayed count when search completes
-      this.displayedCount = INITIAL_BATCH_SIZE;
-      this.infiniteScrollReset?.();
-    } finally {
-      this.isSearching = false;
-    }
-  }
-
-  /**
-   * Clear the search
-   */
-  clearSearch(): void {
-    this.searchTerm = "";
-    this.filteredEntities = [];
-    this.isSearching = false;
-    this.displayedCount = INITIAL_BATCH_SIZE;
-    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 filtered entities
-      return this.displayedCount < this.filteredEntities.length;
-    }
-
-    if (this.entityType === "projects") {
-      // Projects: check if more available
-      return this.displayedCount < this.entities.length;
-    }
-
-    // People: check if more alphabetical contacts available
-    // Total available = 3 recent + all alphabetical
-    const remaining = (this.entities as Contact[]).slice(RECENT_CONTACTS_COUNT);
-    const totalAvailable = RECENT_CONTACTS_COUNT + remaining.length;
-    return this.displayedCount < totalAvailable;
-  }
-
-  /**
-   * Initialize infinite scroll on mount
-   */
-  mounted(): void {
-    this.$nextTick(() => {
-      const container = this.$refs.scrollContainer as HTMLElement;
-
-      if (container) {
-        const { reset } = useInfiniteScroll(
-          container,
-          () => {
-            // Load more: increment displayedCount
-            this.displayedCount += INCREMENT_SIZE;
-          },
-          {
-            distance: 50, // pixels from bottom
-            canLoadMore: () => this.canLoadMore(),
-          },
-        );
-        this.infiniteScrollReset = reset;
-      }
-    });
-  }
-
   // Emit methods using @Emit decorator
 
   @Emit("entity-selected")
@@ -573,33 +340,6 @@ export default class EntityGrid extends Vue {
   } {
     return data;
   }
-
-  /**
-   * Watch for changes in search term to reset displayed count
-   */
-  @Watch("searchTerm")
-  onSearchTermChange(): void {
-    this.displayedCount = INITIAL_BATCH_SIZE;
-    this.infiniteScrollReset?.();
-  }
-
-  /**
-   * Watch for changes in entities prop to reset displayed count
-   */
-  @Watch("entities")
-  onEntitiesChange(): void {
-    this.displayedCount = INITIAL_BATCH_SIZE;
-    this.infiniteScrollReset?.();
-  }
-
-  /**
-   * Cleanup timeouts when component is destroyed
-   */
-  beforeUnmount(): void {
-    if (this.searchTimeout) {
-      clearTimeout(this.searchTimeout);
-    }
-  }
 }
 </script>
 

src/components/EntitySelectionStep.vue

@@ -3,9 +3,10 @@ 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) * -
-Cancel functionality * - Event delegation for entity selection * - Warning
-notifications for conflicted entities * - Template streamlined with computed CSS
-properties * * @author Matthew Raymer */
+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 */
 <template>
   <div id="sectionGiftedGiver">
     <label class="block font-bold mb-4">
@@ -15,14 +16,18 @@ properties * * @author 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"
       @entity-selected="handleEntitySelected"
     />
 
@@ -63,6 +68,7 @@ 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
@@ -148,6 +154,10 @@ export default class EntitySelectionStep extends Vue {
   @Prop()
   notify?: (notification: NotificationIface, timeout?: number) => void;
 
+  /** Whether to hide the "Show All" navigation */
+  @Prop({ default: false })
+  hideShowAll!: boolean;
+
   /**
    * CSS classes for the cancel button
    */
@@ -212,6 +222,59 @@ 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
    */

src/components/GiftedDialog.vue

@@ -29,6 +29,7 @@
         :unit-code="unitCode"
         :offer-id="offerId"
         :notify="$notify"
+        :hide-show-all="hideShowAll"
         @entity-selected="handleEntitySelected"
         @cancel="cancel"
       />
@@ -116,6 +117,7 @@ export default class GiftedDialog extends Vue {
   @Prop() fromProjectId = "";
   @Prop() toProjectId = "";
   @Prop() isFromProjectView = false;
+  @Prop() hideShowAll = false;
   @Prop({ default: "person" }) giverEntityType = "person" as
     | "person"
     | "project";
@@ -231,7 +233,7 @@ export default class GiftedDialog extends Vue {
         apiServer: this.apiServer,
       });
 
-      this.allContacts = await this.$contactsByDateAdded();
+      this.allContacts = await this.$contacts();
 
       this.allMyDids = await retrieveAccountDids();
 

src/components/MembersList.vue

@@ -28,26 +28,14 @@
           v-if="membersToShow().length > 0 && showOrganizerTools && isOrganizer"
         >
           Click
-          <span
-            class="inline-block w-5 h-5 rounded-full bg-blue-100 text-blue-600 text-center"
-          >
-            <font-awesome icon="plus" class="text-sm" />
-          </span>
+          <font-awesome icon="circle-plus" class="text-blue-500 text-sm" />
           /
-          <span
-            class="inline-block w-5 h-5 rounded-full bg-blue-100 text-blue-600 text-center"
-          >
-            <font-awesome icon="minus" class="text-sm" />
-          </span>
+          <font-awesome icon="circle-minus" class="text-rose-500 text-sm" />
           to add/remove them to/from the meeting.
         </li>
         <li v-if="membersToShow().length > 0">
           Click
-          <span
-            class="inline-block w-5 h-5 rounded-full bg-green-100 text-green-600 text-center"
-          >
-            <font-awesome icon="circle-user" class="text-sm" />
-          </span>
+          <font-awesome icon="circle-user" class="text-green-600 text-sm" />
           to add them to your contacts.
         </li>
       </ul>
@@ -66,6 +54,15 @@
           Refresh
           <span class="text-xs">({{ countdownTimer }}s)</span>
         </button>
+
+        <button
+          v-if="getPendingMembersCount() > 0"
+          class="text-sm bg-gradient-to-b from-blue-100 to-blue-200 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.2)] text-blue-800 px-3 py-1.5 rounded-md"
+          @click="showAdmitAllPendingDialog"
+        >
+          <font-awesome icon="circle-plus" class="text-blue-500" />
+          Admit Pending
+        </button>
       </div>
       <ul
         v-if="membersToShow().length > 0"
@@ -74,16 +71,38 @@
         <li
           v-for="member in membersToShow()"
           :key="member.member.memberId"
-          class="border-b border-slate-300 py-1.5"
+          :class="[
+            'border-b px-2 sm:px-3 py-1.5',
+            {
+              'bg-blue-50 border-t border-blue-300 -mt-[1px]':
+                !member.member.admitted,
+            },
+            { 'border-slate-300': member.member.admitted },
+          ]"
         >
           <div class="flex items-center gap-2 justify-between">
             <div class="flex items-center gap-1 overflow-hidden">
-              <h3 class="font-semibold truncate">
+              <h3
+                :class="[
+                  'font-semibold truncate',
+                  { 'text-slate-500': !member.member.admitted },
+                ]"
+              >
+                <font-awesome
+                  v-if="member.member.memberId === members[0]?.memberId"
+                  icon="crown"
+                  class="fa-fw text-amber-400"
+                />
+                <font-awesome
+                  v-if="!member.member.admitted"
+                  icon="hourglass-half"
+                  class="fa-fw text-slate-400"
+                />
                 {{ member.name || unnamedMember }}
               </h3>
               <div
                 v-if="!getContactFor(member.did) && member.did !== activeDid"
-                class="flex items-center gap-1"
+                class="flex items-center gap-1.5 ms-1"
               >
                 <button
                   class="btn-add-contact"
@@ -102,7 +121,7 @@
                     )
                   "
                 >
-                  <font-awesome icon="circle-info" class="text-sm" />
+                  <font-awesome icon="circle-info" />
                 </button>
               </div>
             </div>
@@ -110,17 +129,23 @@
               v-if="
                 showOrganizerTools && isOrganizer && member.did !== activeDid
               "
-              class="flex items-center gap-1"
+              class="flex items-center gap-1.5"
             >
               <button
-                class="btn-admission"
+                :class="
+                  member.member.admitted
+                    ? 'btn-admission-remove'
+                    : 'btn-admission-add'
+                "
                 :title="
                   member.member.admitted ? 'Remove member' : 'Admit member'
                 "
                 @click="checkWhetherContactBeforeAdmitting(member)"
               >
                 <font-awesome
-                  :icon="member.member.admitted ? 'minus' : 'plus'"
+                  :icon="
+                    member.member.admitted ? 'circle-minus' : 'circle-plus'
+                  "
                 />
               </button>
 
@@ -129,7 +154,7 @@
                 title="Admission Info"
                 @click="informAboutAdmission()"
               >
-                <font-awesome icon="circle-info" class="text-sm" />
+                <font-awesome icon="circle-info" />
               </button>
             </span>
           </div>
@@ -189,6 +214,7 @@ import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
 import {
   NOTIFY_ADD_CONTACT_FIRST,
   NOTIFY_CONTINUE_WITHOUT_ADDING,
+  NOTIFY_ADMIT_ALL_PENDING,
 } from "@/constants/notifications";
 import { SOMEONE_UNNAMED } from "@/constants/entities";
 import SetBulkVisibilityDialog from "./SetBulkVisibilityDialog.vue";
@@ -378,17 +404,44 @@ export default class MembersList extends Vue {
   }
 
   membersToShow(): DecryptedMember[] {
+    let members: DecryptedMember[] = [];
+
     if (this.isOrganizer) {
       if (this.showOrganizerTools) {
-        return this.decryptedMembers;
+        members = this.decryptedMembers;
       } else {
-        return this.decryptedMembers.filter(
+        members = this.decryptedMembers.filter(
           (member: DecryptedMember) => member.member.admitted,
         );
       }
+    } else {
+      // non-organizers only get visible members from server
+      members = this.decryptedMembers;
     }
-    // non-organizers only get visible members from server
-    return this.decryptedMembers;
+
+    // Sort members according to priority:
+    // 1. Organizer at the top
+    // 2. Non-admitted members next
+    // 3. Everyone else after
+    return members.sort((a, b) => {
+      // Check if either member is the organizer (first member in original list)
+      const aIsOrganizer = a.member.memberId === this.members[0]?.memberId;
+      const bIsOrganizer = b.member.memberId === this.members[0]?.memberId;
+
+      // Organizer always comes first
+      if (aIsOrganizer && !bIsOrganizer) return -1;
+      if (!aIsOrganizer && bIsOrganizer) return 1;
+
+      // If both are organizers or neither are organizers, sort by admission status
+      if (aIsOrganizer && bIsOrganizer) return 0; // Both organizers, maintain original order
+
+      // Non-admitted members come before admitted members
+      if (!a.member.admitted && b.member.admitted) return -1;
+      if (a.member.admitted && !b.member.admitted) return 1;
+
+      // If admission status is the same, maintain original order
+      return 0;
+    });
   }
 
   informAboutAdmission() {
@@ -701,6 +754,114 @@ export default class MembersList extends Vue {
     this.startAutoRefresh();
   }
 
+  /**
+   * Get count of pending (non-admitted) members
+   */
+  getPendingMembersCount(): number {
+    return this.decryptedMembers.filter(
+      (member) => !member.member.admitted && member.did !== this.activeDid,
+    ).length;
+  }
+
+  /**
+   * Get list of pending members
+   */
+  getPendingMembers(): DecryptedMember[] {
+    return this.decryptedMembers.filter(
+      (member) => !member.member.admitted && member.did !== this.activeDid,
+    );
+  }
+
+  /**
+   * Show the admit all pending members dialog
+   */
+  showAdmitAllPendingDialog() {
+    const pendingCount = this.getPendingMembersCount();
+
+    if (pendingCount === 0) {
+      this.notify.info(
+        "There are no pending members to admit.",
+        TIMEOUTS.STANDARD,
+      );
+      return;
+    }
+
+    // Pause auto-refresh when dialog opens
+    this.stopAutoRefresh();
+
+    const dialogText = NOTIFY_ADMIT_ALL_PENDING.text.replace(
+      "{count}",
+      pendingCount.toString(),
+    );
+
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: NOTIFY_ADMIT_ALL_PENDING.title,
+        text: dialogText,
+        yesText: NOTIFY_ADMIT_ALL_PENDING.yesText,
+        noText: NOTIFY_ADMIT_ALL_PENDING.noText,
+        onYes: async () => {
+          await this.admitAllPendingMembers(true); // true = add to contacts
+          // Resume auto-refresh after action
+          this.startAutoRefresh();
+        },
+        onNo: async () => {
+          await this.admitAllPendingMembers(false); // false = don't add to contacts
+          // Resume auto-refresh after action
+          this.startAutoRefresh();
+        },
+        onCancel: async () => {
+          // Do nothing - user cancelled
+          // Resume auto-refresh after cancellation
+          this.startAutoRefresh();
+        },
+      },
+      TIMEOUTS.MODAL,
+    );
+  }
+
+  /**
+   * Admit all pending members with optional contact addition
+   */
+  async admitAllPendingMembers(addToContacts: boolean) {
+    const pendingMembers = this.getPendingMembers();
+
+    if (pendingMembers.length === 0) {
+      return;
+    }
+
+    try {
+      // Process each pending member
+      for (const member of pendingMembers) {
+        // Add to contacts if requested and not already a contact
+        if (addToContacts && !this.getContactFor(member.did)) {
+          await this.addAsContact(member);
+        }
+
+        // Admit the member
+        await this.toggleAdmission(member);
+      }
+
+      // Show success message
+      const contactMessage = addToContacts ? " and added to your contacts" : "";
+      this.notify.success(
+        `All ${pendingMembers.length} pending members have been admitted${contactMessage}.`,
+        TIMEOUTS.STANDARD,
+      );
+    } catch (error) {
+      this.$logAndConsole(
+        "Error admitting all pending members: " + errorStringForLog(error),
+        true,
+      );
+      this.notify.error(
+        "Failed to admit some members. Please try again.",
+        TIMEOUTS.LONG,
+      );
+    }
+  }
+
   beforeDestroy() {
     this.stopAutoRefresh();
   }
@@ -718,23 +879,26 @@ export default class MembersList extends Vue {
 
 .btn-add-contact {
   /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply w-6 h-6 flex items-center justify-center rounded-full 
-    bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800 
+  @apply text-lg text-green-600 hover:text-green-800 
     transition-colors;
 }
 
 .btn-info-contact,
 .btn-info-admission {
   /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply w-6 h-6 flex items-center justify-center rounded-full 
-    bg-slate-100 text-slate-400 hover:text-slate-600 
+  @apply text-slate-400 hover:text-slate-600 
     transition-colors;
 }
 
-.btn-admission {
+.btn-admission-add {
   /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply w-6 h-6 flex items-center justify-center rounded-full 
-    bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 
+  @apply text-lg text-blue-500 hover:text-blue-700 
+    transition-colors;
+}
+
+.btn-admission-remove {
+  /* stylelint-disable-next-line at-rule-no-unknown */
+  @apply text-lg text-rose-500 hover:text-rose-700 
     transition-colors;
 }
 </style>

src/components/PersonCard.vue

@@ -3,25 +3,30 @@ GiftedDialog.vue to handle person entity display * with selection states and
 conflict detection. * * @author Matthew Raymer */
 <template>
   <li :class="cardClasses" @click="handleClick">
-    <div>
+    <div class="relative w-fit mx-auto">
       <EntityIcon
         v-if="person.did"
         :contact="person"
-        class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
+        class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
       />
       <font-awesome
         v-else
         icon="circle-question"
-        class="text-slate-400 text-5xl mb-1 shrink-0"
+        class="text-slate-400 text-5xl mb-1"
       />
+
+      <!-- Time icon overlay for contacts -->
+      <div
+        v-if="person.did && showTimeIcon"
+        class="rounded-full bg-slate-400 absolute bottom-0 right-0 p-1 translate-x-1/3"
+      >
+        <font-awesome icon="clock" class="block text-white text-xs w-[1em]" />
+      </div>
     </div>
 
-    <div class="overflow-hidden">
-      <h3 :class="nameClasses">
-        {{ displayName }}
-      </h3>
-      <p class="text-xs text-slate-500 truncate">{{ person.did }}</p>
-    </div>
+    <h3 :class="nameClasses">
+      {{ displayName }}
+    </h3>
   </li>
 </template>
 
@@ -76,32 +81,29 @@ 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 `${baseCardClasses} *:opacity-50 cursor-not-allowed`;
+      return "opacity-50 cursor-not-allowed";
     }
-
-    return `${baseCardClasses} cursor-pointer hover:bg-slate-50`;
+    return "cursor-pointer hover:bg-slate-50";
   }
 
   /**
    * Computed CSS classes for the person name
    */
   get nameClasses(): string {
-    const baseNameClasses = "text-sm font-semibold truncate";
+    const baseClasses =
+      "text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden";
 
     if (this.conflicted) {
-      return `${baseNameClasses} text-slate-500`;
+      return `${baseClasses} text-slate-400`;
     }
 
     // Add italic styling for entities without set names
     if (!this.person.name) {
-      return `${baseNameClasses} italic text-slate-500`;
+      return `${baseClasses} italic text-slate-500`;
     }
 
-    return baseNameClasses;
+    return baseClasses;
   }
 
   /**

src/components/ProjectCard.vue

@@ -2,26 +2,25 @@
 GiftedDialog.vue to handle project entity display * with selection states and
 issuer information. * * @author Matthew Raymer */
 <template>
-  <li
-    class="flex items-center gap-2 px-2 py-1.5 border-b border-slate-300 hover:bg-slate-50 cursor-pointer"
-    @click="handleClick"
-  >
-    <ProjectIcon
-      :entity-id="project.handleId"
-      :icon-size="48"
-      :image-url="project.image"
-      class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
-    />
+  <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>
 
-    <div class="overflow-hidden">
-      <h3 class="text-sm font-semibold truncate">
-        {{ project.name || unnamedProject }}
-      </h3>
+    <h3
+      class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+    >
+      {{ project.name || unnamedProject }}
+    </h3>
 
-      <div class="text-xs text-slate-500 truncate">
-        <font-awesome icon="user" class="text-slate-400" />
-        {{ issuerDisplayName }}
-      </div>
+    <div class="text-xs text-slate-500 truncate">
+      <font-awesome icon="user" class="fa-fw text-slate-400" />
+      {{ issuerDisplayName }}
     </div>
   </li>
 </template>

src/components/ShowAllCard.vue

@@ -0,0 +1,66 @@
+/** * 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>

src/components/SpecialEntityCard.vue

@@ -63,24 +63,23 @@ export default class SpecialEntityCard extends Vue {
   conflictContext!: string;
 
   /**
-   * Computed CSS classes for the card
+   * Computed CSS classes for the card container
    */
   get cardClasses(): string {
-    const baseCardClasses =
-      "flex items-center gap-2 px-2 py-1.5 border-b border-slate-300";
+    const baseClasses = "block";
 
     if (!this.selectable || this.conflicted) {
-      return `${baseCardClasses} *:opacity-50 cursor-not-allowed`;
+      return `${baseClasses} cursor-not-allowed opacity-50`;
     }
 
-    return `${baseCardClasses} cursor-pointer hover:bg-slate-50`;
+    return `${baseClasses} cursor-pointer`;
   }
 
   /**
    * Computed CSS classes for the icon
    */
   get iconClasses(): string {
-    const baseClasses = "text-[2rem]";
+    const baseClasses = "text-5xl mb-1";
 
     if (this.conflicted) {
       return `${baseClasses} text-slate-400`;
@@ -102,7 +101,7 @@ export default class SpecialEntityCard extends Vue {
    */
   get nameClasses(): string {
     const baseClasses =
-      "text-sm font-semibold text-ellipsis whitespace-nowrap overflow-hidden";
+      "text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden";
 
     if (this.conflicted) {
       return `${baseClasses} text-slate-400`;

src/constants/notifications.ts

@@ -471,6 +471,14 @@ export const NOTIFY_CONTINUE_WITHOUT_ADDING = {
   noText: "No, Cancel",
 };
 
+// Used in: MembersList.vue (complex modal for admitting all pending members)
+export const NOTIFY_ADMIT_ALL_PENDING = {
+  title: "Admit All Pending Members",
+  text: "You are about to admit {count} pending member/s. Would you also like to add them to your Contacts list?",
+  yesText: "Admit and Add to Contacts",
+  noText: "Admit Only",
+};
+
 // HelpNotificationsView.vue specific constants
 // Used in: HelpNotificationsView.vue (sendTestWebPushMessage method - not subscribed error)
 export const NOTIFY_PUSH_NOT_SUBSCRIBED = {

src/db-sql/migration.ts

@@ -234,20 +234,32 @@ export async function runMigrations<T>(
   sqlQuery: (sql: string, params?: unknown[]) => Promise<T>,
   extractMigrationNames: (result: T) => Set<string>,
 ): Promise<void> {
-  logger.debug("[Migration] Starting database migrations");
+  // Only log migration start in development
+  const isDevelopment = process.env.VITE_PLATFORM === "development";
+  if (isDevelopment) {
+    logger.debug("[Migration] Starting database migrations");
+  }
 
   for (const migration of MIGRATIONS) {
-    logger.debug("[Migration] Registering migration:", migration.name);
+    if (isDevelopment) {
+      logger.debug("[Migration] Registering migration:", migration.name);
+    }
     registerMigration(migration);
   }
 
-  logger.debug("[Migration] Running migration service");
+  if (isDevelopment) {
+    logger.debug("[Migration] Running migration service");
+  }
   await runMigrationsService(sqlExec, sqlQuery, extractMigrationNames);
 
-  logger.debug("[Migration] Database migrations completed");
+  if (isDevelopment) {
+    logger.debug("[Migration] Database migrations completed");
+  }
 
   // Bootstrapping: Ensure active account is selected after migrations
-  logger.debug("[Migration] Running bootstrapping hooks");
+  if (isDevelopment) {
+    logger.debug("[Migration] Running bootstrapping hooks");
+  }
   try {
     // Check if we have accounts but no active selection
     const accountsResult = await sqlQuery("SELECT COUNT(*) FROM accounts");
@@ -262,14 +274,18 @@ export async function runMigrations<T>(
       activeDid = (extractSingleValue(activeResult) as string) || null;
     } catch (error) {
       // Table doesn't exist - migration 004 may not have run yet
-      logger.debug(
-        "[Migration] active_identity table not found - migration may not have run",
-      );
+      if (isDevelopment) {
+        logger.debug(
+          "[Migration] active_identity table not found - migration may not have run",
+        );
+      }
       activeDid = null;
     }
 
     if (accountsCount > 0 && (!activeDid || activeDid === "")) {
-      logger.debug("[Migration] Auto-selecting first account as active");
+      if (isDevelopment) {
+        logger.debug("[Migration] Auto-selecting first account as active");
+      }
       const firstAccountResult = await sqlQuery(
         "SELECT did FROM accounts ORDER BY dateCreated, did LIMIT 1",
       );

src/interfaces/claims.ts

@@ -14,13 +14,6 @@ export interface AgreeActionClaim extends ClaimObject {
   object: Record<string, unknown>;
 }
 
-export interface EmojiClaim extends ClaimObject {
-  // default context is "https://endorser.ch"
-  "@type": "Emoji";
-  text: string;
-  parentItem: { lastClaimId: string };
-}
-
 // Note that previous VCs may have additional fields.
 // https://endorser.ch/doc/html/transactions.html#id4
 export interface GiveActionClaim extends ClaimObject {

src/interfaces/common.ts

@@ -81,9 +81,7 @@ export interface UserInfo {
 
 export interface CreateAndSubmitClaimResult {
   success: boolean;
-  embeddedRecordError?: string;
   error?: string;
-  claimId?: string;
   handleId?: string;
 }
 

src/interfaces/index.ts

@@ -1,6 +1,36 @@
-export * from "./claims";
-export * from "./claims-result";
-export * from "./common";
-export * from "./deepLinks";
+export type {
+  // From common.ts
+  CreateAndSubmitClaimResult,
+  GenericCredWrapper,
+  GenericVerifiableCredential,
+  KeyMeta,
+  // Exclude types that are also exported from other files
+  // GiveVerifiableCredential,
+  // OfferVerifiableCredential,
+  // RegisterVerifiableCredential,
+  // PlanSummaryRecord,
+  // UserInfo,
+} from "./common";
+
+export type {
+  // From claims.ts
+  GiveActionClaim,
+  OfferClaim,
+  RegisterActionClaim,
+} from "./claims";
+
+export type {
+  // From records.ts
+  PlanSummaryRecord,
+} from "./records";
+
+export type {
+  // From user.ts
+  UserInfo,
+} from "./user";
+
 export * from "./limits";
+export * from "./deepLinks";
+export * from "./common";
+export * from "./claims-result";
 export * from "./records";

src/interfaces/records.ts

@@ -1,26 +1,14 @@
 import { GiveActionClaim, OfferClaim, PlanActionClaim } from "./claims";
 import { GenericCredWrapper } from "./common";
 
-export interface EmojiSummaryRecord {
-  issuerDid: string;
-  jwtId: string;
-  text: string;
-  parentHandleId: string;
-}
-
 // a summary record; the VC is found the fullClaim field
 export interface GiveSummaryRecord {
-  [x: string]:
-    | PropertyKey
-    | undefined
-    | GiveActionClaim
-    | Record<string, number>;
+  [x: string]: PropertyKey | undefined | GiveActionClaim;
   type?: string;
   agentDid: string;
   amount: number;
   amountConfirmed: number;
   description: string;
-  emojiCount: Record<string, number>; // Map of emoji character to count
   fullClaim: GiveActionClaim;
   fulfillsHandleId: string;
   fulfillsPlanHandleId?: string;

src/libs/endorserServer.ts

@@ -630,7 +630,11 @@ async function performPlanRequest(
 
       return cred;
     } else {
-      logger.debug(
+      // Use debug level for development to reduce console noise
+      const isDevelopment = process.env.VITE_PLATFORM === "development";
+      const log = isDevelopment ? logger.debug : logger.log;
+
+      log(
         "[Plan Loading] ⚠️ Plan cache is empty for handle",
         handleId,
         " Got data:",
@@ -1222,12 +1226,7 @@ export async function createAndSubmitClaim(
       timestamp: new Date().toISOString(),
     });
 
-    return {
-      success: true,
-      claimId: response.data?.claimId,
-      handleId: response.data?.handleId,
-      embeddedRecordError: response.data?.embeddedRecordError,
-    };
+    return { success: true, handleId: response.data?.handleId };
   } catch (error: unknown) {
     // Enhanced error logging with comprehensive context
     const requestId = `claim_error_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;

src/libs/fontawesome.ts

@@ -29,6 +29,7 @@ import {
   faCircle,
   faCircleCheck,
   faCircleInfo,
+  faCircleMinus,
   faCirclePlus,
   faCircleQuestion,
   faCircleRight,
@@ -37,6 +38,7 @@ import {
   faCoins,
   faComment,
   faCopy,
+  faCrown,
   faDollar,
   faDownload,
   faEllipsis,
@@ -58,6 +60,7 @@ import {
   faHand,
   faHandHoldingDollar,
   faHandHoldingHeart,
+  faHourglassHalf,
   faHouseChimney,
   faImage,
   faImagePortrait,
@@ -123,6 +126,7 @@ library.add(
   faCircle,
   faCircleCheck,
   faCircleInfo,
+  faCircleMinus,
   faCirclePlus,
   faCircleQuestion,
   faCircleRight,
@@ -131,6 +135,7 @@ library.add(
   faCoins,
   faComment,
   faCopy,
+  faCrown,
   faDollar,
   faDownload,
   faEllipsis,
@@ -152,6 +157,7 @@ library.add(
   faHand,
   faHandHoldingDollar,
   faHandHoldingHeart,
+  faHourglassHalf,
   faHouseChimney,
   faImage,
   faImagePortrait,

src/libs/util.ts

@@ -1147,29 +1147,3 @@ export async function checkForDuplicateAccount(
 
   return (existingAccount?.values?.length ?? 0) > 0;
 }
-
-export class PromiseTracker<T> {
-  private _promise: Promise<T>;
-  private _resolved = false;
-  private _value: T | undefined;
-
-  constructor(promise: Promise<T>) {
-    this._promise = promise.then((value) => {
-      this._resolved = true;
-      this._value = value;
-      return value;
-    });
-  }
-
-  get isResolved(): boolean {
-    return this._resolved;
-  }
-
-  get value(): T | undefined {
-    return this._value;
-  }
-
-  get promise(): Promise<T> {
-    return this._promise;
-  }
-}

src/services/platforms/WebPlatformService.ts

@@ -48,13 +48,15 @@ export class WebPlatformService implements PlatformService {
   constructor() {
     WebPlatformService.instanceCount++;
 
-    logger.debug("[WebPlatformService] Initializing web platform service");
+    // Use debug level logging for development mode to reduce console noise
+    const isDevelopment = process.env.VITE_PLATFORM === "development";
+    const log = isDevelopment ? logger.debug : logger.log;
+
+    log("[WebPlatformService] Initializing web platform service");
 
     // Only initialize SharedArrayBuffer setup for web platforms
     if (this.isWorker()) {
-      logger.debug(
-        "[WebPlatformService] Skipping initBackend call in worker context",
-      );
+      log("[WebPlatformService] Skipping initBackend call in worker context");
       return;
     }
 

src/test/EntityGridFunctionPropTest.vue

@@ -19,6 +19,7 @@
       <EntityGrid
         entity-type="people"
         :entities="people"
+        :max-items="5"
         :active-did="activeDid"
         :all-my-dids="allMyDids"
         :all-contacts="people"
@@ -38,6 +39,7 @@
       <EntityGrid
         entity-type="projects"
         :entities="projects"
+        :max-items="3"
         :active-did="activeDid"
         :all-my-dids="allMyDids"
         :all-contacts="people"
@@ -150,8 +152,11 @@ export default class EntityGridFunctionPropTest extends Vue {
   customPeopleFunction = (
     entities: Contact[],
     _entityType: string,
+    maxItems: number,
   ): Contact[] => {
-    return entities.filter((person) => person.profileImageUrl);
+    return entities
+      .filter((person) => person.profileImageUrl)
+      .slice(0, maxItems);
   };
 
   /**
@@ -160,6 +165,7 @@ 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);
   };
@@ -194,16 +200,16 @@ export default class EntityGridFunctionPropTest extends Vue {
    */
   get displayedPeopleCount(): number {
     if (this.useCustomFunction) {
-      return this.customPeopleFunction(this.people, "people").length;
+      return this.customPeopleFunction(this.people, "people", 5).length;
     }
-    return Math.min(10, this.people.length); // Initial batch size for infinite scroll
+    return Math.min(5, this.people.length);
   }
 
   get displayedProjectsCount(): number {
     if (this.useCustomFunction) {
-      return this.customProjectsFunction(this.projects, "projects").length;
+      return this.customProjectsFunction(this.projects, "projects", 3).length;
     }
-    return Math.min(10, this.projects.length); // Initial batch size for infinite scroll
+    return Math.min(7, this.projects.length);
   }
 }
 </script>

src/utils/PlatformServiceMixin.ts

@@ -970,20 +970,6 @@ 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
@@ -2071,7 +2057,6 @@ 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>;

src/views/ClaimView.vue

@@ -91,15 +91,12 @@
           <div class="text-sm overflow-hidden">
             <div
               data-testId="description"
-              class="flex items-start gap-2 overflow-hidden"
+              class="overflow-hidden text-ellipsis"
             >
-              <font-awesome
-                icon="message"
-                class="fa-fw text-slate-400 flex-shrink-0 mt-1"
-              />
+              <font-awesome icon="message" class="fa-fw text-slate-400" />
               <vue-markdown
                 :source="claimDescription"
-                class="markdown-content flex-1 min-w-0"
+                class="markdown-content"
               />
             </div>
             <div class="overflow-hidden text-ellipsis">
@@ -554,7 +551,7 @@ import VueMarkdown from "vue-markdown-render";
 import { Router, RouteLocationNormalizedLoaded } from "vue-router";
 import { copyToClipboard } from "../services/ClipboardService";
 
-import { EmojiClaim, GenericVerifiableCredential } from "../interfaces";
+import { GenericVerifiableCredential } from "../interfaces";
 import GiftedDialog from "../components/GiftedDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
 import { NotificationIface } from "../constants/app";
@@ -670,10 +667,6 @@ export default class ClaimView extends Vue {
       return giveClaim.description || "";
     }
 
-    if (this.veriClaim.claimType === "Emoji") {
-      return (claim as EmojiClaim).text || "";
-    }
-
     // Fallback for other claim types
     return (claim as { description?: string })?.description || "";
   }

src/views/HomeView.vue

@@ -245,7 +245,6 @@ Raymer * @version 1.0.0 */
             :last-viewed-claim-id="feedLastViewedClaimId"
             :is-registered="isRegistered"
             :active-did="activeDid"
-            :api-server="apiServer"
             @load-claim="onClickLoadClaim"
             @view-image="openImageViewer"
           />
@@ -1265,7 +1264,6 @@ export default class HomeView extends Vue {
       provider,
       fulfillsPlan,
       providedByPlan,
-      record.emojiCount,
     );
   }
 
@@ -1489,14 +1487,12 @@ export default class HomeView extends Vue {
     provider: Provider | undefined,
     fulfillsPlan?: FulfillsPlan,
     providedByPlan?: ProvidedByPlan,
-    emojiCount?: Record<string, number>,
   ): GiveRecordWithContactInfo {
     return {
       ...record,
       jwtId: record.jwtId,
       fullClaim: record.fullClaim,
       description: record.description || "",
-      emojiCount: emojiCount || {},
       handleId: record.handleId,
       issuerDid: record.issuerDid,
       fulfillsPlanHandleId: record.fulfillsPlanHandleId,