feat: add instructions to connect to any profile

Reviewed-on: #219

BUILDING.md

@@ -1151,28 +1151,28 @@ If you need to build manually or want to understand the individual steps:
 
 - ... and you may have to fix these, especially with pkgx:
 
-   ```bash
+```bash
-   gem_path=$(which gem)
+gem_path=$(which gem)
-   shortened_path="${gem_path:h:h}"
+shortened_path="${gem_path:h:h}"
-   export GEM_HOME=$shortened_path
+export GEM_HOME=$shortened_path
-   export GEM_PATH=$shortened_path
+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
+```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 47 && perl -p -i -e "s/MARKETING_VERSION = .*;/MARKETING_VERSION = 1.1.2;/g" App.xcodeproj/project.pbxproj && cd -
-   # Unfortunately this edits Info.plist directly.
+# Unfortunately this edits Info.plist directly.
-   #xcrun agvtool new-marketing-version 0.4.5
+#xcrun agvtool new-marketing-version 0.4.5
-   ```
+```
 
 ##### 2. Build
 
-  Here's prod. Also available: test, dev
+Here's prod. Also available: test, dev
 
-  ```bash
+```bash
-  npm run build:ios:prod
+npm run build:ios:prod
-  ```
+```
 
 3.1. Use Xcode to build and run on simulator or device.
 
@@ -1197,7 +1197,8 @@ If you need to build manually or want to understand the individual steps:
   - It can take 15 minutes for the build to show up in the list of builds.
   - You'll probably have to "Manage" something about encryption, disallowed in France.
   - Then "Save" and "Add to Review" and "Resubmit to App Review".
-- Eventually it'll be "Ready for Distribution" which means
+- Eventually it'll be "Ready for Distribution" which means it's live
+- When finished, bump package.json version
 
 ### Android Build
 
@@ -1315,26 +1316,26 @@ The recommended way to build for Android is using the automated build script:
 
 #### Android Manual Build Process
 
-##### 1. Bump the version in package.json, then here: android/app/build.gradle
+##### 1. Bump the version in package.json, then update these versions & run:
 
-  ```bash
+```bash
-  perl -p -i -e 's/versionCode .*/versionCode 40/g' android/app/build.gradle
+perl -p -i -e 's/versionCode .*/versionCode 47/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/versionName .*/versionName "1.1.2"/g' android/app/build.gradle
-  ```
+```
 
 ##### 2. Build
 
   Here's prod. Also available: test, dev
 
-  ```bash
+```bash
-  npm run build:android:prod
+npm run build:android:prod
-  ```
+```
 
 ##### 3. Open the project in Android Studio
 
-   ```bash
+```bash
-   npx cap open android
+npx cap open android
-   ```
+```
 
 ##### 4. Use Android Studio to build and run on emulator or device
 
@@ -1379,6 +1380,8 @@ At play.google.com/console:
 - Note that if you add testers, you have to go to "Publishing Overview" and send
   those changes or your (closed) testers won't see it.
 
+- When finished, bump package.json version
+
 ### Capacitor Operations
 
 ```bash

CHANGELOG.md

@@ -5,6 +5,21 @@ 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.2] - 2025.11.06
+
+### Fixed
+- Bad page when user follows prompt to backup seed
+
+
+## [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

android/app/build.gradle

@@ -31,8 +31,8 @@ android {
         applicationId "app.timesafari.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 41
+        versionCode 47
-        versionName "1.0.8"
+        versionName "1.1.2"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

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 = 47;
 				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.2;
 				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 = 47;
 				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.2;
 				PRODUCT_BUNDLE_IDENTIFIER = app.timesafari;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "timesafari",
-  "version": "1.1.1-beta",
+  "version": "1.1.3-beta",
   "description": "Time Safari Application",
   "author": {
     "name": "Time Safari Team"

scripts/build-android.sh

@@ -436,7 +436,21 @@ fi
 log_info "Cleaning dist directory..."
 clean_build_artifacts "dist"
 
-# Step 4: Build Capacitor version with mode
+# Step 4: Run TypeScript type checking for test and production builds
+if [ "$BUILD_MODE" = "production" ] || [ "$BUILD_MODE" = "test" ]; then
+    log_info "Running TypeScript type checking for $BUILD_MODE mode..."
+    
+    if ! measure_time npm run type-check; then
+        log_error "TypeScript type checking failed for $BUILD_MODE mode!"
+        exit 2
+    fi
+    
+    log_success "TypeScript type checking completed for $BUILD_MODE mode"
+else
+    log_debug "Skipping TypeScript type checking for development mode"
+fi
+
+# Step 5: Build Capacitor version with mode
 if [ "$BUILD_MODE" = "development" ]; then
     safe_execute "Building Capacitor version (development)" "npm run build:capacitor" || exit 3
 elif [ "$BUILD_MODE" = "test" ]; then
@@ -445,23 +459,23 @@ elif [ "$BUILD_MODE" = "production" ]; then
     safe_execute "Building Capacitor version (production)" "npm run build:capacitor -- --mode production" || exit 3
 fi
 
-# Step 5: Clean Gradle build
+# Step 6: Clean Gradle build
 safe_execute "Cleaning Gradle build" "cd android && ./gradlew clean && cd .." || exit 4
 
-# Step 6: Build based on type
+# Step 7: Build based on type
 if [ "$BUILD_TYPE" = "debug" ]; then
     safe_execute "Assembling debug build" "cd android && ./gradlew assembleDebug && cd .." || exit 5
 elif [ "$BUILD_TYPE" = "release" ]; then
     safe_execute "Assembling release build" "cd android && ./gradlew assembleRelease && cd .." || exit 5
 fi
 
-# Step 7: Sync with Capacitor
+# Step 8: Sync with Capacitor
 safe_execute "Syncing with Capacitor" "npx cap sync android" || exit 6
 
-# Step 8: Generate assets
+# Step 9: Generate assets
 safe_execute "Generating assets" "npx capacitor-assets generate --android" || exit 7
 
-# Step 9: Build APK/AAB if requested
+# Step 10: Build APK/AAB if requested
 if [ "$BUILD_APK" = true ]; then
     if [ "$BUILD_TYPE" = "debug" ]; then
         safe_execute "Building debug APK" "cd android && ./gradlew assembleDebug && cd .." || exit 5
@@ -474,7 +488,7 @@ if [ "$BUILD_AAB" = true ]; then
     safe_execute "Building AAB" "cd android && ./gradlew bundleRelease && cd .." || exit 5
 fi
 
-# Step 10: Auto-run app if requested
+# Step 11: Auto-run app if requested
 if [ "$AUTO_RUN" = true ]; then
     log_step "Auto-running Android app..."
     safe_execute "Launching app" "npx cap run android" || {
@@ -485,7 +499,7 @@ if [ "$AUTO_RUN" = true ]; then
     log_success "Android app launched successfully!"
 fi
 
-# Step 11: Open Android Studio if requested
+# Step 12: Open Android Studio if requested
 if [ "$OPEN_STUDIO" = true ]; then
     safe_execute "Opening Android Studio" "npx cap open android" || exit 8
 fi

scripts/build-ios.sh

@@ -381,7 +381,21 @@ safe_execute "Cleaning iOS build" "clean_ios_build" || exit 1
 log_info "Cleaning dist directory..."
 clean_build_artifacts "dist"
 
-# Step 4: Build Capacitor version with mode
+# Step 4: Run TypeScript type checking for test and production builds
+if [ "$BUILD_MODE" = "production" ] || [ "$BUILD_MODE" = "test" ]; then
+    log_info "Running TypeScript type checking for $BUILD_MODE mode..."
+    
+    if ! measure_time npm run type-check; then
+        log_error "TypeScript type checking failed for $BUILD_MODE mode!"
+        exit 2
+    fi
+    
+    log_success "TypeScript type checking completed for $BUILD_MODE mode"
+else
+    log_debug "Skipping TypeScript type checking for development mode"
+fi
+
+# Step 5: Build Capacitor version with mode
 if [ "$BUILD_MODE" = "development" ]; then
     safe_execute "Building Capacitor version (development)" "npm run build:capacitor" || exit 3
 elif [ "$BUILD_MODE" = "test" ]; then
@@ -390,16 +404,16 @@ elif [ "$BUILD_MODE" = "production" ]; then
     safe_execute "Building Capacitor version (production)" "npm run build:capacitor -- --mode production" || exit 3
 fi
 
-# Step 5: Sync with Capacitor
+# Step 6: Sync with Capacitor
 safe_execute "Syncing with Capacitor" "npx cap sync ios" || exit 6
 
-# Step 6: Generate assets
+# Step 7: Generate assets
 safe_execute "Generating assets" "npx capacitor-assets generate --ios" || exit 7
 
-# Step 7: Build iOS app
+# Step 8: Build iOS app
 safe_execute "Building iOS app" "build_ios_app" || exit 5
 
-# Step 8: Build IPA/App if requested
+# Step 9: Build IPA/App if requested
 if [ "$BUILD_IPA" = true ]; then
     log_info "Building IPA package..."
     cd ios/App
@@ -426,12 +440,12 @@ if [ "$BUILD_APP" = true ]; then
     log_success "App bundle built successfully"
 fi
 
-# Step 9: Auto-run app if requested
+# Step 10: Auto-run app if requested
 if [ "$AUTO_RUN" = true ]; then
     safe_execute "Auto-running iOS app" "auto_run_ios_app" || exit 9
 fi
 
-# Step 10: Open Xcode if requested
+# Step 11: Open Xcode if requested
 if [ "$OPEN_STUDIO" = true ]; then
     safe_execute "Opening Xcode" "npx cap open ios" || exit 8
 fi

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 */

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
+      <!-- When showing contacts without search: split into recent and alphabetical -->
-        v-for="person in displayedEntities as Contact[]"
+      <template v-if="!searchTerm.trim()">
-        :key="person.did"
+        <!-- Recently Added Section -->
-        :person="person"
+        <template v-if="recentContacts.length > 0">
-        :conflicted="isPersonConflicted(person.did)"
+          <li
-        :show-time-icon="true"
+            class="text-xs font-semibold text-slate-500 uppercase pt-5 pb-1.5 px-2 border-b border-slate-300"
-        :notify="notify"
+          >
-        :conflict-context="conflictContext"
+            Recently Added
-        @person-selected="handlePersonSelected"
+          </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,28 +151,27 @@ 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";
 
+/**
+ * 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 +180,6 @@ import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
  * - Special entity integration (You, Unnamed)
  * - Conflict detection integration
  * - Empty state messaging
- * - Show All navigation
  * - Event delegation for entity selection
  * - Warning notifications for conflicted entities
  * - Template streamlined with computed CSS properties
@@ -104,7 +190,6 @@ import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
     PersonCard,
     ProjectCard,
     SpecialEntityCard,
-    ShowAllCard,
   },
 })
 export default class EntityGrid extends Vue {
@@ -112,14 +197,32 @@ export default class EntityGrid extends Vue {
   @Prop({ required: true })
   entityType!: "people" | "projects";
 
-  /** Array of entities to display */
+  // 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
+   *
+   * IMPORTANT: When passing Contact[] arrays, they must be sorted by date added
+   * (newest first) for the "Recently Added" section to display correctly.
+   * Use $contactsByDateAdded() instead of $getAllContacts() or $contacts().
+   *
+   * The recentContacts computed property assumes contacts are already sorted
+   * by date added and simply takes the first 3. If contacts are sorted
+   * alphabetically or in another order, the wrong contacts will appear in
+   * "Recently Added".
+   */
   @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 +243,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,42 +259,31 @@ 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
+   * are displayed in the grid, enabling advanced filtering and sorting.
-   * display logic beyond the default simple slice behavior.
+   * 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) =>
+   * :display-entities-function="(entities, type) =>
-   *   entities.filter(e => e.profileImageUrl).slice(0, max)"
+   *   entities.filter(e => e.profileImageUrl)"
    *
    * @example
    * // Custom sorting: sort projects by name
-   * :display-entities-function="(entities, type, max) =>
+   * :display-entities-function="(entities, type) =>
-   *   entities.sort((a, b) => a.name.localeCompare(b.name)).slice(0, max)"
+   *   entities.sort((a, b) => a.name.localeCompare(b.name))"
-   *
-   * @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[];
 
   /**
@@ -206,33 +294,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 {
+  get displayedEntities(): Contact[] | PlanData[] {
-    const baseClasses = "grid gap-x-2 gap-y-4 text-center mb-4";
+    // If searching, return filtered results with infinite scroll
-
+    if (this.searchTerm.trim()) {
-    if (this.entityType === "projects") {
+      return this.filteredEntities.slice(0, this.displayedCount);
-      return `${baseClasses} grid-cols-3 md:grid-cols-4`;
-    } else {
-      return `${baseClasses} grid-cols-4 sm:grid-cols-5 md:grid-cols-6`;
     }
+
+    // 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[] {
+  get recentContacts(): Contact[] {
-    if (this.displayEntitiesFunction) {
+    if (this.entityType !== "people" || this.searchTerm.trim()) {
-      return this.displayEntitiesFunction(
+      return [];
-        this.entities,
-        this.entityType,
-        this.maxItems,
-      );
     }
+    // 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;
+   * Get the remaining contacts sorted alphabetically (when showing contacts and not searching)
-    return this.entities.slice(0, maxDisplay);
+   * 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 +364,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 +437,143 @@ 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 = recent + all alphabetical
+    const totalAvailable = RECENT_CONTACTS_COUNT + this.entities.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")
@@ -340,6 +586,33 @@ 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,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
+Cancel functionality * - Event delegation for entity selection * - Warning
-delegation for entity selection * - Warning notifications for conflicted
+notifications for conflicted entities * - Template streamlined with computed CSS
-entities * - Template streamlined with computed CSS properties * * @author
+properties * * @author Matthew Raymer */
-Matthew Raymer */
 <template>
   <div id="sectionGiftedGiver">
     <label class="block font-bold mb-4">
@@ -16,18 +15,14 @@ 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"
     />
 
@@ -68,7 +63,6 @@ interface EntitySelectionEvent {
  * - EntityGrid integration for unified entity display
  * - Conflict detection and prevention
  * - Special entity handling (You, Unnamed)
- * - Show All navigation with context preservation
  * - Cancel functionality
  * - Event delegation for entity selection
  * - Warning notifications for conflicted entities
@@ -154,10 +148,6 @@ export default class EntitySelectionStep extends Vue {
   @Prop()
   notify?: (notification: NotificationIface, timeout?: number) => void;
 
-  /** Whether to hide the "Show All" navigation */
-  @Prop({ default: false })
-  hideShowAll!: boolean;
-
   /**
    * CSS classes for the cancel button
    */
@@ -222,59 +212,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
    */

src/components/GiftedDialog.vue

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

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">
+    <div class="overflow-hidden">
-      {{ displayName }}
+      <h3 :class="nameClasses">
-    </h3>
+        {{ 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 =
+    const baseNameClasses = "text-sm font-semibold truncate";
-      "text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden";
 
     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;
   }
 
   /**

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">
+  <li
-    <div class="relative w-fit mx-auto">
+    class="flex items-center gap-2 px-2 py-1.5 border-b border-slate-300 hover:bg-slate-50 cursor-pointer"
-      <ProjectIcon
+    @click="handleClick"
-        :entity-id="project.handleId"
+  >
-        :icon-size="48"
+    <ProjectIcon
-        :image-url="project.image"
+      :entity-id="project.handleId"
-        class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
+      :icon-size="48"
-      />
+      :image-url="project.image"
-    </div>
+      class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
+    />
 
-    <h3
+    <div class="overflow-hidden">
-      class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+      <h3 class="text-sm font-semibold truncate">
-    >
+        {{ project.name || unnamedProject }}
-      {{ project.name || unnamedProject }}
+      </h3>
-    </h3>
 
-    <div class="text-xs text-slate-500 truncate">
+      <div class="text-xs text-slate-500 truncate">
-      <font-awesome icon="user" class="fa-fw text-slate-400" />
+        <font-awesome icon="user" class="text-slate-400" />
-      {{ issuerDisplayName }}
+        {{ issuerDisplayName }}
+      </div>
     </div>
   </li>
 </template>

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>

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>

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`;

src/constants/contacts.ts

@@ -0,0 +1,29 @@
+/**
+ * Constants for contact-related functionality
+ * Created: 2025-11-16
+ */
+
+/**
+ * Contact method types with user-friendly labels
+ * Used in: ContactEditView.vue, DIDView.vue
+ */
+export const CONTACT_METHOD_TYPES = [
+  { value: "CELL", label: "Mobile" },
+  { value: "EMAIL", label: "Email" },
+  { value: "WHATSAPP", label: "WhatsApp" },
+] as const;
+
+/**
+ * Type for contact method type values
+ */
+export type ContactMethodType = (typeof CONTACT_METHOD_TYPES)[number]["value"];
+
+/**
+ * Helper function to get label for a contact method type
+ * @param type - The contact method type value (e.g., "CELL", "EMAIL")
+ * @returns The user-friendly label or the original type if not found
+ */
+export function getContactMethodLabel(type: string): string {
+  const methodType = CONTACT_METHOD_TYPES.find((m) => m.value === type);
+  return methodType ? methodType.label : type;
+}

src/libs/endorserServer.ts

@@ -1686,7 +1686,10 @@ export async function register(
         "Registration thrown error:",
         errorMessage || JSON.stringify(err),
       );
-      return { error: errorMessage || "Got a server error when registering." };
+      return {
+        error:
+          (errorMessage as string) || "Got a server error when registering.",
+      };
     }
     return { error: "Got a server error when registering." };
   }

src/services/platforms/CapacitorPlatformService.ts

@@ -91,16 +91,92 @@ export class CapacitorPlatformService
     }
 
     try {
-      // Create/Open database
+      // Try to create/Open database connection
-      this.db = await this.sqlite.createConnection(
+      try {
-        this.dbName,
+        this.db = await this.sqlite.createConnection(
-        false,
+          this.dbName,
-        "no-encryption",
+          false,
-        1,
+          "no-encryption",
-        false,
+          1,
-      );
+          false,
+        );
+      } catch (createError: unknown) {
+        // If connection already exists, try to retrieve it or handle gracefully
+        const errorMessage =
+          createError instanceof Error
+            ? createError.message
+            : String(createError);
+        const errorObj =
+          typeof createError === "object" && createError !== null
+            ? (createError as { errorMessage?: string; message?: string })
+            : {};
 
-      await this.db.open();
+        const fullErrorMessage =
+          errorObj.errorMessage || errorObj.message || errorMessage;
+
+        if (fullErrorMessage.includes("already exists")) {
+          logger.debug(
+            "[CapacitorPlatformService] Connection already exists on native side, attempting to retrieve",
+          );
+          // Check if connection exists in JavaScript Map
+          const isConnResult = await this.sqlite.isConnection(
+            this.dbName,
+            false,
+          );
+          if (isConnResult.result) {
+            // Connection exists in Map, retrieve it
+            this.db = await this.sqlite.retrieveConnection(this.dbName, false);
+            logger.debug(
+              "[CapacitorPlatformService] Successfully retrieved existing connection from Map",
+            );
+          } else {
+            // Connection exists on native side but not in JavaScript Map
+            // This can happen when the app is restarted but native connections persist
+            // Try to close the native connection first, then create a new one
+            logger.debug(
+              "[CapacitorPlatformService] Connection exists natively but not in Map, closing and recreating",
+            );
+            try {
+              await this.sqlite.closeConnection(this.dbName, false);
+            } catch (closeError) {
+              // Ignore close errors - connection might not be properly tracked
+              logger.debug(
+                "[CapacitorPlatformService] Error closing connection (may be expected):",
+                closeError,
+              );
+            }
+            // Now try to create the connection again
+            this.db = await this.sqlite.createConnection(
+              this.dbName,
+              false,
+              "no-encryption",
+              1,
+              false,
+            );
+            logger.debug(
+              "[CapacitorPlatformService] Successfully created connection after cleanup",
+            );
+          }
+        } else {
+          // Re-throw if it's a different error
+          throw createError;
+        }
+      }
+
+      // Open the connection if it's not already open
+      try {
+        await this.db.open();
+      } catch (openError: unknown) {
+        const openErrorMessage =
+          openError instanceof Error ? openError.message : String(openError);
+        // If already open, that's fine - continue
+        if (!openErrorMessage.includes("already open")) {
+          throw openError;
+        }
+        logger.debug(
+          "[CapacitorPlatformService] Database connection already open",
+        );
+      }
 
       // Set journal mode to WAL for better performance
       // await this.db.execute("PRAGMA journal_mode=WAL;");

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
+    return entities.filter((person) => person.profileImageUrl);
-      .filter((person) => person.profileImageUrl)
-      .slice(0, maxItems);
   };
 
   /**
@@ -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>

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>;

src/views/ContactEditView.vue

@@ -85,22 +85,12 @@
             class="absolute bg-white border border-gray-300 rounded-md mt-1"
           >
             <div
+              v-for="methodType in contactMethodTypes"
+              :key="methodType.value"
               class="px-4 py-2 hover:bg-gray-100 cursor-pointer"
-              @click="setMethodType(index, 'CELL')"
+              @click="setMethodType(index, methodType.value)"
             >
-              CELL
+              {{ methodType.label }}
-            </div>
-            <div
-              class="px-4 py-2 hover:bg-gray-100 cursor-pointer"
-              @click="setMethodType(index, 'EMAIL')"
-            >
-              EMAIL
-            </div>
-            <div
-              class="px-4 py-2 hover:bg-gray-100 cursor-pointer"
-              @click="setMethodType(index, 'WHATSAPP')"
-            >
-              WHATSAPP
             </div>
           </div>
         </div>
@@ -157,6 +147,7 @@ import {
 } from "../constants/notifications";
 import { Contact, ContactMethod } from "../db/tables/contacts";
 import { AppString } from "../constants/app";
+import { CONTACT_METHOD_TYPES } from "../constants/contacts";
 
 /**
  * Contact Edit View Component
@@ -224,6 +215,8 @@ export default class ContactEditView extends Vue {
 
   /** App string constants */
   AppString = AppString;
+  /** Contact method types for dropdown */
+  contactMethodTypes = CONTACT_METHOD_TYPES;
 
   /**
    * Component lifecycle hook that initializes the contact edit form

src/views/DIDView.vue

@@ -20,12 +20,12 @@
       </button>
 
       <!-- Help button -->
-      <button
+      <router-link
+        :to="{ name: 'help' }"
         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]" />
-      </button>
+      </router-link>
     </div>
 
     <!-- Identity Details -->
@@ -42,6 +42,39 @@
             <font-awesome icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
           </router-link>
         </h2>
+
+        <!-- Notes -->
+        <div v-if="contactFromDid.notes" class="mt-3">
+          <p class="text-sm text-slate-700 whitespace-pre-wrap">
+            {{ contactFromDid.notes }}
+          </p>
+        </div>
+
+        <!-- Contact Methods -->
+        <div v-if="contactFromDid.contactMethods?.length" class="mt-3">
+          <div class="flex flex-wrap gap-2">
+            <div
+              v-for="(method, index) in contactFromDid.contactMethods"
+              :key="index"
+              class="inline-flex items-center gap-2 text-sm"
+            >
+              <span class="font-semibold text-slate-600"
+                >{{ getContactMethodLabel(method.type) }}:</span
+              >
+              <span class="text-slate-700">{{ method.label }}</span>
+              <span class="text-slate-600">{{ method.value }}</span>
+              <a
+                v-if="method.type === 'CELL'"
+                :href="`sms:${method.value}`"
+                class="ml-2 text-blue-500 hover:text-blue-700"
+                title="Send text message"
+              >
+                <font-awesome icon="message" class="text-base" />
+              </a>
+            </div>
+          </div>
+        </div>
+
         <button class="ml-2 mr-2 mt-4" @click="toggleDidDetails">
           Details
           <font-awesome
@@ -302,6 +335,7 @@ import {
   NOTIFY_CONTACT_INVALID_DID,
 } from "@/constants/notifications";
 import { THAT_UNNAMED_PERSON } from "@/constants/entities";
+import { getContactMethodLabel } from "@/constants/contacts";
 
 /**
  * DIDView Component
@@ -352,6 +386,7 @@ export default class DIDView extends Vue {
   capitalizeAndInsertSpacesBeforeCaps = capitalizeAndInsertSpacesBeforeCaps;
   didInfoForContact = didInfoForContact;
   displayAmount = displayAmount;
+  getContactMethodLabel = getContactMethodLabel;
 
   /**
    * Initializes notification helpers

src/views/NewEditProjectView.vue

@@ -60,12 +60,60 @@
     </div>
     <ImageMethodDialog ref="imageDialog" default-camera-mode="environment" />
 
-    <input
+    <!-- Authorized Representative Selection -->
-      v-model="agentDid"
+    <div class="w-full flex items-stretch my-4">
-      type="text"
+      <div
-      placeholder="Other Authorized Representative"
+        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"
-      class="mt-4 block w-full rounded border border-slate-400 px-3 py-2"
+        @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 +
+      this.apiServer + "/api/claim/byHandle/" + encodeURIComponent(projectId);
-      "/api/claim/byHandle/" +
-      encodeURIComponent(this.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>

src/views/UserProfileView.vue

@@ -54,6 +54,121 @@
         </p>
       </div>
 
+      <!-- Nearest Neighbors Section -->
+      <div
+        v-if="
+          profile.issuerDid !== activeDid &&
+          profile.issuerDid !== neighbors?.[0]?.did
+        "
+        class="mt-6"
+      >
+        <h2 class="text-lg font-semibold mb-3">Network Connections</h2>
+
+        <div v-if="loadingNeighbors">
+          <div class="flex justify-center items-center py-8">
+            <font-awesome
+              icon="spinner"
+              class="fa-spin-pulse text-2xl text-slate-400"
+            />
+          </div>
+        </div>
+        <div
+          v-else-if="neighborsError"
+          class="bg-red-50 border border-red-300 rounded-md p-4"
+        >
+          <div class="flex items-start gap-2">
+            <font-awesome
+              icon="exclamation-triangle"
+              class="text-red-500 mt-0.5"
+            />
+            <p class="text-red-700">{{ neighborsError }}</p>
+          </div>
+        </div>
+        <div v-else>
+          <div
+            v-if="neighbors"
+            class="mb-4 bg-blue-50 border border-blue-200 rounded-lg p-4"
+          >
+            <p class="text-sm text-slate-700 mb-3">
+              The following
+              {{ neighbors.length === 1 ? "user is" : "users are" }}
+              closer to the person who owns this profile.
+            </p>
+            <div class="space-y-2 text-sm">
+              <div class="flex items-start gap-3">
+                <span
+                  class="flex-shrink-0 w-6 h-6 flex items-center justify-center bg-blue-600 text-white rounded-full text-xs font-semibold"
+                  >1</span
+                >
+                <p class="text-slate-700 pt-0.5">
+                  <a
+                    class="text-blue-600 hover:text-blue-800 font-medium underline cursor-pointer"
+                    @click="onCopyLinkClick()"
+                  >
+                    Click to copy this profile reference
+                  </a>
+                  to your clipboard
+                </p>
+              </div>
+              <div class="flex items-start gap-3">
+                <span
+                  class="flex-shrink-0 w-6 h-6 flex items-center justify-center bg-blue-600 text-white rounded-full text-xs font-semibold"
+                  >2</span
+                >
+                <p class="text-slate-700 pt-0.5">
+                  Contact a user listed below and share the reference to request
+                  an introduction
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="space-y-2">
+            <div
+              v-for="neighbor in neighbors"
+              :key="neighbor.did"
+              class="flex items-center justify-between gap-3 bg-slate-50 border border-slate-300 rounded-md p-3"
+            >
+              <router-link
+                :to="{ name: 'did', params: { did: neighbor.did } }"
+                class="flex-1 min-w-0"
+              >
+                <p class="font-medium truncate text-blue-600">
+                  {{ getNeighborDisplayName(neighbor.did) }}
+                </p>
+                <div
+                  v-if="
+                    getNeighborDisplayName(neighbor.did) === '' ||
+                    neighborIsNotInContacts(neighbor.did)
+                  "
+                  class="flex flex-col gap-1 mt-1"
+                >
+                  <p class="text-xs text-slate-600">
+                    This person is connected to you, but they are not in this
+                    device's contacts. Copy this DID link and check on another
+                    device or check with different people.
+                  </p>
+                  <span class="flex items-center gap-1 min-w-0">
+                    <span class="text-xs truncate text-slate-600 min-w-0">
+                      {{ neighbor.did }}
+                    </span>
+                    <button
+                      title="Copy DID Link"
+                      class="text-blue-600 hover:text-blue-800 underline cursor-pointer flex-shrink-0"
+                      @click.prevent="onCopyDidClick(neighbor.did)"
+                    >
+                      <font-awesome icon="copy" class="text-sm" />
+                    </button>
+                  </span>
+                </div>
+              </router-link>
+              <span :class="getRelationBadgeClass(neighbor.relation)">
+                {{ getRelationLabel(neighbor.relation) }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <!-- Map for first coordinates -->
       <div v-if="hasFirstLocation" class="mt-4">
         <h2 class="text-lg font-semibold">Location</h2>
@@ -160,8 +275,11 @@ export default class UserProfileView extends Vue {
   allContacts: Array<Contact> = [];
   allMyDids: Array<string> = [];
   isLoading = true;
+  loadingNeighbors = false;
+  neighborsError = "";
   partnerApiServer = DEFAULT_PARTNER_API_SERVER;
   profile: UserProfile | null = null;
+  neighbors: Array<{ did: string; relation: string }> = [];
 
   // make this function available to the Vue template
   didInfo = didInfo;
@@ -183,8 +301,8 @@ export default class UserProfileView extends Vue {
    */
   async mounted() {
     await this.initializeSettings();
-    await this.loadContacts();
     await this.loadProfile();
+    await this.loadNeighbors();
   }
 
   /**
@@ -199,12 +317,7 @@ export default class UserProfileView extends Vue {
     this.activeDid = activeIdentity.activeDid || "";
 
     this.partnerApiServer = settings.partnerApiServer || this.partnerApiServer;
-  }
 
-  /**
-   * Loads all contacts from database
-   */
-  private async loadContacts() {
     this.allContacts = await this.$getAllContacts();
     this.allMyDids = await retrieveAccountDids();
   }
@@ -249,23 +362,75 @@ export default class UserProfileView extends Vue {
   }
 
   /**
-   * Copies profile link to clipboard
+   * Loads nearest neighbors from partner API
    *
-   * Creates a deep link to the profile and copies it to the clipboard
+   * Fetches network connections for the profile and displays them
-   * Shows success notification when completed
+   * with appropriate relation labels
+   */
+  async loadNeighbors() {
+    const profileId: string = this.$route.params.id as string;
+    if (!profileId) {
+      return;
+    }
+
+    this.loadingNeighbors = true;
+    this.neighborsError = "";
+    try {
+      const response = await fetch(
+        `${this.partnerApiServer}/api/partner/userProfileNearestNeighbors/${encodeURIComponent(profileId)}`,
+        {
+          method: "GET",
+          headers: await getHeaders(this.activeDid),
+        },
+      );
+
+      if (response.status === 200) {
+        const result = await response.json();
+        this.neighbors = result.data;
+        this.neighborsError = "";
+      } else {
+        logger.warn("Failed to load neighbors:", response.status);
+        this.neighbors = [];
+        this.neighborsError = "Failed to load network connections.";
+      }
+    } catch (error) {
+      logger.error("Error loading neighbors:", error);
+      this.neighbors = [];
+      this.neighborsError =
+        "An error occurred while loading network connections.";
+    } finally {
+      this.loadingNeighbors = false;
+    }
+  }
+
+  /**
+   * Copies a deep link to the profile to the clipboard
    */
   async onCopyLinkClick() {
-    // Use production URL for sharing to avoid localhost issues in development
     const deepLink = `${APP_SERVER}/deep-link/user-profile/${this.profile?.rowId}`;
     try {
       await copyToClipboard(deepLink);
-      this.notify.copied("profile link", TIMEOUTS.STANDARD);
+      this.notify.copied("Profile link", TIMEOUTS.STANDARD);
     } catch (error) {
       this.$logAndConsole(`Error copying profile link: ${error}`, true);
       this.notify.error("Failed to copy profile link.");
     }
   }
 
+  /**
+   * Copies a deep link to the provided DID to the clipboard
+   */
+  async onCopyDidClick(did: string) {
+    const deepLink = `${APP_SERVER}/deep-link/did/${encodeURIComponent(did)}`;
+    try {
+      await copyToClipboard(deepLink);
+      this.notify.copied("DID link", TIMEOUTS.STANDARD);
+    } catch (error) {
+      this.$logAndConsole(`Error copying DID link: ${error}`, true);
+      this.notify.error("Failed to copy DID link.");
+    }
+  }
+
   /**
    * Computed properties for template logic streamlining
    */
@@ -330,5 +495,64 @@ export default class UserProfileView extends Vue {
   get tileLayerUrl() {
     return "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
   }
+
+  /**
+   * Gets display name for a neighbor's DID
+   * Uses didInfo utility to show contact name if available, otherwise DID
+   * @param did - The DID to get display name for
+   * @returns Formatted display name
+   */
+  getNeighborDisplayName(did: string): string {
+    return this.didInfo(did, this.activeDid, this.allMyDids, this.allContacts);
+  }
+
+  neighborIsNotInContacts(did: string) {
+    return !this.allContacts.some((contact) => contact.did === did);
+  }
+
+  noNeighborsAreInContacts() {
+    return this.neighbors.every(
+      (neighbor) =>
+        !this.allContacts.some((contact) => contact.did === neighbor.did),
+    );
+  }
+
+  /**
+   * Gets human-readable label for relation type
+   * @param relation - The relation type from API
+   * @returns Display label for the relation
+   */
+  getRelationLabel(relation: string): string {
+    switch (relation) {
+      case "REGISTERED_BY_YOU":
+        return "Registered by You";
+      case "REGISTERED_YOU":
+        return "Registered You";
+      case "TARGET":
+        return "Yourself";
+      default:
+        return relation;
+    }
+  }
+
+  /**
+   * Gets CSS classes for relation badge styling
+   * @param relation - The relation type from API
+   * @returns CSS class string for badge
+   */
+  getRelationBadgeClass(relation: string): string {
+    const baseClasses =
+      "text-xs font-semibold px-2 py-1 rounded whitespace-nowrap";
+    switch (relation) {
+      case "REGISTERED_BY_YOU":
+        return `${baseClasses} bg-blue-100 text-blue-700`;
+      case "REGISTERED_YOU":
+        return `${baseClasses} bg-green-100 text-green-700`;
+      case "TARGET":
+        return `${baseClasses} bg-purple-100 text-purple-700`;
+      default:
+        return `${baseClasses} bg-slate-100 text-slate-700`;
+    }
+  }
 }
 </script>