feat: add instructions to connect to any profile

src/components/EntityGrid.vue

@@ -76,7 +76,7 @@ projects, and special entities with selection. * * @author Matthew Raymer */
     </template>
 
     <!-- Empty state message -->
-    <li v-if="hasNoEntities" :class="emptyStateClasses">
+    <li v-if="entities.length === 0" :class="emptyStateClasses">
       {{ emptyStateMessage }}
     </li>
 
@@ -164,10 +164,6 @@ import { Contact } from "../db/tables/contacts";
 import { PlanData } from "../interfaces/records";
 import { NotificationIface } from "../constants/app";
 import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
-import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
-import { getHeaders } from "../libs/endorserServer";
-import { logger } from "../utils/logger";
-import { TIMEOUTS } from "@/utils/notify";
 
 /**
  * Constants for infinite scroll configuration
@@ -195,7 +191,6 @@ const RECENT_CONTACTS_COUNT = 3;
     ProjectCard,
     SpecialEntityCard,
   },
-  mixins: [PlatformServiceMixin],
 })
 export default class EntityGrid extends Vue {
   /** Type of entities to display */
@@ -207,16 +202,6 @@ export default class EntityGrid extends Vue {
   isSearching = false;
   searchTimeout: NodeJS.Timeout | null = null;
   filteredEntities: Contact[] | PlanData[] = [];
-  searchBeforeId: string | undefined = undefined;
-  isLoadingSearchMore = false;
-
-  // API server for project searches
-  apiServer = "";
-
-  // Internal project state (when entities prop not provided for projects)
-  allProjects: PlanData[] = [];
-  loadBeforeId: string | undefined = undefined;
-  isLoadingProjects = false;
 
   // Infinite scroll state
   displayedCount = INITIAL_BATCH_SIZE;
@@ -226,17 +211,17 @@ export default class EntityGrid extends Vue {
   /**
    * Array of entities to display
    *
-   * For contacts (entityType === 'people'): REQUIRED - Must be a COMPLETE list from local database.
-   * Use $contactsByDateAdded() to ensure all contacts are included.
-   * Client-side filtering assumes the complete list is available.
    * IMPORTANT: When passing Contact[] arrays, they must be sorted by date added
    * (newest first) for the "Recently Added" section to display correctly.
+   * Use $contactsByDateAdded() instead of $getAllContacts() or $contacts().
    *
-   * For projects (entityType === 'projects'): OPTIONAL - If not provided, EntityGrid loads
-   * projects internally from the API server. If provided, uses the provided list.
+   * 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: false })
-  entities?: Contact[] | PlanData[];
+  @Prop({ required: true })
+  entities!: Contact[] | PlanData[];
 
   /** Active user's DID */
   @Prop({ required: true })
@@ -308,33 +293,6 @@ export default class EntityGrid extends Vue {
     return "text-xs text-slate-500 italic col-span-full";
   }
 
-  /**
-   * Check if there are no entities to display
-   */
-  get hasNoEntities(): boolean {
-    if (this.entityType === "projects") {
-      // For projects: check internal state if no entities prop, otherwise check prop
-      const projectsToCheck = this.entities || this.allProjects;
-      return projectsToCheck.length === 0;
-    } else {
-      // For people: entities prop is required
-      return !this.entities || this.entities.length === 0;
-    }
-  }
-
-  /**
-   * Get the entities array to use (prop or internal state)
-   */
-  get entitiesToUse(): Contact[] | PlanData[] {
-    if (this.entityType === "projects") {
-      // For projects: use prop if provided, otherwise use internal state
-      return this.entities || this.allProjects;
-    } else {
-      // For people: entities prop is required
-      return this.entities || [];
-    }
-  }
-
   /**
    * Computed entities to display - uses function prop if provided, otherwise uses infinite scroll
    * When searching, returns filtered results with infinite scroll applied
@@ -347,12 +305,12 @@ export default class EntityGrid extends Vue {
 
     // If custom function provided, use it (disables infinite scroll)
     if (this.displayEntitiesFunction) {
-      return this.displayEntitiesFunction(this.entitiesToUse, this.entityType);
+      return this.displayEntitiesFunction(this.entities, this.entityType);
     }
 
     // Default: projects use infinite scroll
     if (this.entityType === "projects") {
-      return (this.entitiesToUse as PlanData[]).slice(0, this.displayedCount);
+      return (this.entities as PlanData[]).slice(0, this.displayedCount);
     }
 
     // People: handled by recentContacts + alphabeticalContacts (both use displayedCount)
@@ -366,11 +324,7 @@ export default class EntityGrid extends Vue {
    * See the entities prop documentation for details on using $contactsByDateAdded().
    */
   get recentContacts(): Contact[] {
-    if (
-      this.entityType !== "people" ||
-      this.searchTerm.trim() ||
-      !this.entities
-    ) {
+    if (this.entityType !== "people" || this.searchTerm.trim()) {
       return [];
     }
     // Entities are already sorted by date added (newest first)
@@ -382,11 +336,7 @@ export default class EntityGrid extends Vue {
    * Uses infinite scroll to control how many are displayed
    */
   get alphabeticalContacts(): Contact[] {
-    if (
-      this.entityType !== "people" ||
-      this.searchTerm.trim() ||
-      !this.entities
-    ) {
+    if (this.entityType !== "people" || this.searchTerm.trim()) {
       return [];
     }
     // Skip the first few (recent contacts) and sort the rest alphabetically
@@ -507,28 +457,47 @@ export default class EntityGrid extends Vue {
 
   /**
    * Perform the actual search
-   * Routes to server-side search for projects or client-side filtering for contacts
    */
   async performSearch(): Promise<void> {
     if (!this.searchTerm.trim()) {
       this.filteredEntities = [];
       this.displayedCount = INITIAL_BATCH_SIZE;
-      this.searchBeforeId = undefined;
       this.infiniteScrollReset?.();
       return;
     }
 
     this.isSearching = true;
-    this.searchBeforeId = undefined; // Reset pagination for new search
 
     try {
-      if (this.entityType === "projects") {
-        // Server-side search for projects (initial load, no beforeId)
-        const searchLower = this.searchTerm.toLowerCase().trim();
-        await this.fetchProjects(undefined, searchLower);
+      // 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 {
-        // Client-side filtering for contacts (complete list)
-        await this.performContactSearch();
+        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
@@ -539,194 +508,6 @@ export default class EntityGrid extends Vue {
     }
   }
 
-  /**
-   * Fetch projects from API server
-   * Unified method for both loading all projects and searching projects.
-   * If claimContents is provided, performs search and updates filteredEntities.
-   * If claimContents is not provided, loads all projects and updates allProjects.
-   *
-   * @param beforeId - Optional rowId for pagination (loads projects before this ID)
-   * @param claimContents - Optional search term (if provided, performs search; if not, loads all)
-   */
-  async fetchProjects(
-    beforeId?: string,
-    claimContents?: string,
-  ): Promise<void> {
-    if (!this.apiServer) {
-      if (claimContents) {
-        this.filteredEntities = [];
-      } else {
-        this.allProjects = [];
-      }
-      if (this.notify) {
-        this.notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "API server not configured",
-          },
-          TIMEOUTS.SHORT,
-        );
-      }
-      return;
-    }
-
-    const isSearch = !!claimContents;
-    let url = `${this.apiServer}/api/v2/report/plans`;
-
-    // Build query parameters
-    const params: string[] = [];
-    if (claimContents) {
-      params.push(
-        `claimContents=${encodeURIComponent(claimContents.toLowerCase().trim())}`,
-      );
-    }
-    if (beforeId) {
-      params.push(`beforeId=${encodeURIComponent(beforeId)}`);
-    }
-    if (params.length > 0) {
-      url += `?${params.join("&")}`;
-    }
-
-    try {
-      const response = await fetch(url, {
-        method: "GET",
-        headers: await getHeaders(this.activeDid),
-      });
-
-      if (response.status !== 200) {
-        throw new Error(
-          isSearch ? "Failed to search projects" : "Failed to load projects",
-        );
-      }
-
-      const results = await response.json();
-      if (results.data) {
-        const newProjects = results.data.map(
-          (plan: PlanData & { rowId?: string }) => ({
-            ...plan,
-            rowId: plan.rowId,
-          }),
-        );
-
-        if (isSearch) {
-          // Search mode: update filteredEntities
-          if (beforeId) {
-            // Pagination: append new projects to existing search results
-            this.filteredEntities.push(...newProjects);
-          } else {
-            // Initial search: replace array
-            this.filteredEntities = newProjects;
-          }
-
-          // Update searchBeforeId for next pagination
-          if (newProjects.length > 0) {
-            const lastProject = newProjects[newProjects.length - 1];
-            this.searchBeforeId = lastProject.rowId || undefined;
-          } else {
-            this.searchBeforeId = undefined; // No more results
-          }
-        } else {
-          // Load mode: update allProjects
-          if (beforeId) {
-            // Pagination: append new projects
-            this.allProjects.push(...newProjects);
-          } else {
-            // Initial load: replace array
-            this.allProjects = newProjects;
-          }
-
-          // Update loadBeforeId for next pagination
-          if (newProjects.length > 0) {
-            const lastProject = newProjects[newProjects.length - 1];
-            this.loadBeforeId = lastProject.rowId || undefined;
-          } else {
-            this.loadBeforeId = undefined; // No more results
-          }
-        }
-      } else {
-        // No data in response
-        if (isSearch) {
-          if (!beforeId) {
-            // Only clear on initial search, not pagination
-            this.filteredEntities = [];
-          }
-          this.searchBeforeId = undefined;
-        } else {
-          if (!beforeId) {
-            // Only clear on initial load, not pagination
-            this.allProjects = [];
-          }
-          this.loadBeforeId = undefined;
-        }
-      }
-    } catch (error) {
-      logger.error(
-        `Error ${isSearch ? "searching" : "loading"} projects:`,
-        error,
-      );
-      if (isSearch) {
-        if (!beforeId) {
-          // Only clear on initial search error, not pagination error
-          this.filteredEntities = [];
-        }
-        this.searchBeforeId = undefined;
-      } else {
-        if (!beforeId) {
-          // Only clear on initial load error, not pagination error
-          this.allProjects = [];
-        }
-        this.loadBeforeId = undefined;
-      }
-      if (this.notify) {
-        this.notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: isSearch
-              ? "Failed to search projects. Please try again."
-              : "Failed to load projects. Please try again.",
-          },
-          TIMEOUTS.STANDARD,
-        );
-      }
-    }
-  }
-
-  /**
-   * Client-side contact search
-   * Assumes entities prop contains complete contact list from local database
-   */
-  async performContactSearch(): Promise<void> {
-    if (!this.entities) {
-      this.filteredEntities = [];
-      return;
-    }
-
-    // Simulate async (for consistency with project search)
-    await new Promise((resolve) => setTimeout(resolve, 100));
-
-    const searchLower = this.searchTerm.toLowerCase().trim();
-
-    this.filteredEntities = (this.entities as Contact[])
-      .filter((contact: Contact) => {
-        const name = contact.name?.toLowerCase() || "";
-        const did = contact.did.toLowerCase();
-        return name.includes(searchLower) || did.includes(searchLower);
-      })
-      .sort((a: Contact, b: Contact) => {
-        // Sort alphabetically by name, falling back to DID if name is missing
-        const nameA = (a.name || a.did).toLowerCase();
-        const nameB = (b.name || b.did).toLowerCase();
-        return nameA.localeCompare(nameB);
-      });
-
-    // Contacts don't need pagination (complete list)
-    this.searchBeforeId = undefined;
-  }
-
   /**
    * Clear the search
    */
@@ -735,7 +516,6 @@ export default class EntityGrid extends Vue {
     this.filteredEntities = [];
     this.isSearching = false;
     this.displayedCount = INITIAL_BATCH_SIZE;
-    this.searchBeforeId = undefined;
     this.infiniteScrollReset?.();
 
     // Clear any pending timeout
@@ -755,48 +535,17 @@ export default class EntityGrid extends Vue {
     }
 
     if (this.searchTerm.trim()) {
-      // Search mode: check if more results available
-      if (this.entityType === "projects") {
-        // Projects: can load more if:
-        // 1. We have more already-loaded results to show, OR
-        // 2. We've shown all loaded results AND there's a searchBeforeId to load more
-        const hasMoreLoaded =
-          this.displayedCount < this.filteredEntities.length;
-        const canLoadMoreFromServer =
-          this.displayedCount >= this.filteredEntities.length &&
-          !!this.searchBeforeId &&
-          !this.isLoadingSearchMore;
-        return hasMoreLoaded || canLoadMoreFromServer;
-      } else {
-        // Contacts: client-side filtering returns all results at once
-        return this.displayedCount < this.filteredEntities.length;
-      }
+      // Search mode: check filtered entities
+      return this.displayedCount < this.filteredEntities.length;
     }
 
-    // Non-search mode
     if (this.entityType === "projects") {
-      // Projects: check internal state or prop
-      const projectsToCheck = this.entities || this.allProjects;
-      const beforeId = this.entities ? undefined : this.loadBeforeId;
-
-      // Can load more if:
-      // 1. We have more already-loaded results to show, OR
-      // 2. We've shown all loaded results AND there's a beforeId to load more (and not using entities prop)
-      const hasMoreLoaded = this.displayedCount < projectsToCheck.length;
-      const canLoadMoreFromServer =
-        !this.entities &&
-        this.displayedCount >= projectsToCheck.length &&
-        !!beforeId &&
-        !this.isLoadingProjects;
-
-      return hasMoreLoaded || canLoadMoreFromServer;
+      // Projects: check if more available
+      return this.displayedCount < this.entities.length;
     }
 
     // People: check if more alphabetical contacts available
     // Total available = recent + all alphabetical
-    if (!this.entities) {
-      return false;
-    }
     const totalAvailable = RECENT_CONTACTS_COUNT + this.entities.length;
     return this.displayedCount < totalAvailable;
   }
@@ -804,112 +553,16 @@ export default class EntityGrid extends Vue {
   /**
    * Initialize infinite scroll on mount
    */
-  async mounted(): Promise<void> {
-    // Load apiServer for project searches/loads
-    if (this.entityType === "projects") {
-      const settings = await this.$accountSettings();
-      this.apiServer = settings.apiServer || "";
-
-      // Load projects on mount if entities prop not provided
-      if (!this.entities && this.apiServer) {
-        this.isLoadingProjects = true;
-        try {
-          await this.fetchProjects();
-        } catch (error) {
-          logger.error("Error loading projects on mount:", error);
-        } finally {
-          this.isLoadingProjects = false;
-        }
-      }
-    }
-
-    // Validate entities prop for people
-    if (this.entityType === "people" && !this.entities) {
-      logger.error(
-        "EntityGrid: entities prop is required when entityType is 'people'",
-      );
-      if (this.notify) {
-        this.notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "Contacts data is required but not provided.",
-          },
-          TIMEOUTS.SHORT,
-        );
-      }
-    }
-
+  mounted(): void {
     this.$nextTick(() => {
       const container = this.$refs.scrollContainer as HTMLElement;
 
       if (container) {
         const { reset } = useInfiniteScroll(
           container,
-          async () => {
-            // Search mode: handle search pagination
-            if (this.searchTerm.trim()) {
-              if (this.entityType === "projects") {
-                // Projects: load more search results if available
-                if (
-                  this.displayedCount >= this.filteredEntities.length &&
-                  this.searchBeforeId &&
-                  !this.isLoadingSearchMore
-                ) {
-                  this.isLoadingSearchMore = true;
-                  try {
-                    const searchLower = this.searchTerm.toLowerCase().trim();
-                    await this.fetchProjects(this.searchBeforeId, searchLower);
-                    // After loading more, reset scroll state to allow further loading
-                    this.infiniteScrollReset?.();
-                  } catch (error) {
-                    logger.error("Error loading more search results:", error);
-                    // Error already handled in fetchProjects
-                  } finally {
-                    this.isLoadingSearchMore = false;
-                  }
-                } else {
-                  // Show more from already-loaded search results
-                  this.displayedCount += INCREMENT_SIZE;
-                }
-              } else {
-                // Contacts: show more from already-filtered results
-                this.displayedCount += INCREMENT_SIZE;
-              }
-            } else {
-              // Non-search mode
-              if (this.entityType === "projects") {
-                const projectsToCheck = this.entities || this.allProjects;
-                const beforeId = this.entities ? undefined : this.loadBeforeId;
-
-                // If using internal state and need to load more from server
-                if (
-                  !this.entities &&
-                  this.displayedCount >= projectsToCheck.length &&
-                  beforeId &&
-                  !this.isLoadingProjects
-                ) {
-                  this.isLoadingProjects = true;
-                  try {
-                    await this.fetchProjects(beforeId);
-                    // After loading more, reset scroll state to allow further loading
-                    this.infiniteScrollReset?.();
-                  } catch (error) {
-                    logger.error("Error loading more projects:", error);
-                    // Error already handled in fetchProjects
-                  } finally {
-                    this.isLoadingProjects = false;
-                  }
-                } else {
-                  // Normal case: increment displayedCount to show more from memory
-                  this.displayedCount += INCREMENT_SIZE;
-                }
-              } else {
-                // People: increment displayedCount to show more from memory
-                this.displayedCount += INCREMENT_SIZE;
-              }
-            }
+          () => {
+            // Load more: increment displayedCount
+            this.displayedCount += INCREMENT_SIZE;
           },
           {
             distance: 50, // pixels from bottom
@@ -935,35 +588,21 @@ export default class EntityGrid extends Vue {
   }
 
   /**
-   * Watch for changes in search term to reset displayed count and pagination
+   * Watch for changes in search term to reset displayed count
    */
   @Watch("searchTerm")
   onSearchTermChange(): void {
-    // Reset displayed count and pagination when search term changes
     this.displayedCount = INITIAL_BATCH_SIZE;
-    this.searchBeforeId = undefined;
     this.infiniteScrollReset?.();
   }
 
   /**
-   * Watch for changes in entities prop to clear search and reset displayed count
+   * Watch for changes in entities prop to reset displayed count
    */
   @Watch("entities")
   onEntitiesChange(): void {
-    // Clear search when entities change (fresh dialog open)
-    if (this.searchTerm) {
-      this.searchTerm = "";
-      this.filteredEntities = [];
-      this.searchBeforeId = undefined;
-    }
     this.displayedCount = INITIAL_BATCH_SIZE;
     this.infiniteScrollReset?.();
-
-    // For projects: if entities prop is provided, clear internal state
-    if (this.entityType === "projects" && this.entities) {
-      this.allProjects = [];
-      this.loadBeforeId = undefined;
-    }
   }
 
   /**

src/components/EntitySelectionStep.vue

@@ -14,7 +14,7 @@ properties * * @author Matthew Raymer */
 
     <EntityGrid
       :entity-type="shouldShowProjects ? 'projects' : 'people'"
-      :entities="shouldShowProjects ? projects || undefined : allContacts"
+      :entities="shouldShowProjects ? projects : allContacts"
       :active-did="activeDid"
       :all-my-dids="allMyDids"
       :all-contacts="allContacts"
@@ -94,9 +94,9 @@ export default class EntitySelectionStep extends Vue {
   @Prop({ default: false })
   isFromProjectView!: boolean;
 
-  /** Array of available projects (optional - EntityGrid loads internally if not provided) */
-  @Prop({ required: false })
-  projects?: PlanData[];
+  /** Array of available projects */
+  @Prop({ required: true })
+  projects!: PlanData[];
 
   /** Array of available contacts */
   @Prop({ required: true })

src/components/GiftedDialog.vue

@@ -15,6 +15,7 @@
           giverEntityType === 'project' || recipientEntityType === 'project'
         "
         :is-from-project-view="isFromProjectView"
+        :projects="projects"
         :all-contacts="allContacts"
         :active-did="activeDid"
         :all-my-dids="allMyDids"
@@ -67,6 +68,7 @@ import {
   createAndSubmitGive,
   didInfo,
   serverMessageForUser,
+  getHeaders,
 } from "../libs/endorserServer";
 import * as libsUtil from "../libs/util";
 import { Contact } from "../db/tables/contacts";
@@ -132,6 +134,7 @@ export default class GiftedDialog extends Vue {
   firstStep = true; // true = Step 1 (giver/recipient selection), false = Step 2 (amount/description)
   giver?: libsUtil.GiverReceiverInputInfo; // undefined means no identified giver agent
   offerId = "";
+  projects: PlanData[] = [];
   prompt = "";
   receiver?: libsUtil.GiverReceiverInputInfo;
   stepType = "giver";
@@ -231,6 +234,16 @@ export default class GiftedDialog extends Vue {
       this.allContacts = await this.$contactsByDateAdded();
 
       this.allMyDids = await retrieveAccountDids();
+
+      if (
+        this.giverEntityType === "project" ||
+        this.recipientEntityType === "project"
+      ) {
+        await this.loadProjects();
+      } else {
+        // Clear projects array when not needed
+        this.projects = [];
+      }
     } catch (err: unknown) {
       logger.error("Error retrieving settings from database:", err);
       this.safeNotify.error(
@@ -476,6 +489,27 @@ export default class GiftedDialog extends Vue {
     this.firstStep = false;
   }
 
+  async loadProjects() {
+    try {
+      const response = await fetch(this.apiServer + "/api/v2/report/plans", {
+        method: "GET",
+        headers: await getHeaders(this.activeDid),
+      });
+
+      if (response.status !== 200) {
+        throw new Error("Failed to load projects");
+      }
+
+      const results = await response.json();
+      if (results.data) {
+        this.projects = results.data;
+      }
+    } catch (error) {
+      logger.error("Error loading projects:", error);
+      this.safeNotify.error("Failed to load projects", TIMEOUTS.STANDARD);
+    }
+  }
+
   selectProject(project: PlanData) {
     this.giver = {
       did: project.handleId,
@@ -483,13 +517,10 @@ export default class GiftedDialog extends Vue {
       image: project.image,
       handleId: project.handleId,
     };
-    // Only set receiver to "You" if no receiver has been selected yet
-    if (!this.receiver || !this.receiver.did) {
-      this.receiver = {
-        did: this.activeDid,
-        name: "You",
-      };
-    }
+    this.receiver = {
+      did: this.activeDid,
+      name: "You",
+    };
     this.firstStep = false;
   }
 

src/components/MeetingProjectDialog.vue

@@ -1,130 +0,0 @@
-<template>
-  <div v-if="visible" class="dialog-overlay">
-    <div class="dialog">
-      <!-- Header -->
-      <h2 class="text-lg font-semibold leading-[1.25] mb-4">Select Project</h2>
-
-      <!-- EntityGrid for projects -->
-      <EntityGrid
-        :entity-type="'projects'"
-        :active-did="activeDid"
-        :all-my-dids="allMyDids"
-        :all-contacts="allContacts"
-        :conflict-checker="() => false"
-        :show-you-entity="false"
-        :show-unnamed-entity="false"
-        :notify="notify"
-        :conflict-context="'project'"
-        @entity-selected="handleEntitySelected"
-      />
-
-      <!-- Cancel Button -->
-      <div class="flex gap-2 mt-4">
-        <button
-          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-md"
-          @click="handleCancel"
-        >
-          Cancel
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
-import EntityGrid from "./EntityGrid.vue";
-import { Contact } from "../db/tables/contacts";
-import { PlanData } from "../interfaces/records";
-import { NotificationIface } from "../constants/app";
-
-/**
- * MeetingProjectDialog - Dialog for selecting a project link for a meeting
- *
- * Features:
- * - EntityGrid integration for project selection
- * - No special entities (You, Unnamed)
- * - Immediate assignment on project selection
- * - Cancel button to close without selection
- */
-@Component({
-  components: {
-    EntityGrid,
-  },
-})
-export default class MeetingProjectDialog extends Vue {
-  /** Whether the dialog is visible */
-  visible = false;
-
-  /** Active user's DID */
-  @Prop({ required: true })
-  activeDid!: string;
-
-  /** All user's DIDs */
-  @Prop({ required: true })
-  allMyDids!: string[];
-
-  /** All contacts */
-  @Prop({ required: true })
-  allContacts!: Contact[];
-
-  /** Notification function from parent component */
-  @Prop()
-  notify?: (notification: NotificationIface, timeout?: number) => void;
-
-  /**
-   * Handle entity selection from EntityGrid
-   * Immediately assigns the selected project and closes the dialog
-   */
-  handleEntitySelected(event: {
-    type: "person" | "project";
-    data: Contact | PlanData;
-  }) {
-    const project = event.data as PlanData;
-    this.emitAssign(project);
-    this.close();
-  }
-
-  /**
-   * Handle cancel button click
-   */
-  handleCancel(): void {
-    this.close();
-  }
-
-  /**
-   * Open the dialog
-   */
-  open(): void {
-    this.visible = true;
-    this.emitOpen();
-  }
-
-  /**
-   * Close the dialog
-   */
-  close(): void {
-    this.visible = false;
-    this.emitClose();
-  }
-
-  // Emit methods using @Emit decorator
-
-  @Emit("assign")
-  emitAssign(project: PlanData): PlanData {
-    return project;
-  }
-
-  @Emit("open")
-  emitOpen(): void {
-    // Emit when dialog opens
-  }
-
-  @Emit("close")
-  emitClose(): void {
-    // Emit when dialog closes
-  }
-}
-</script>
-
-<style scoped></style>

src/components/ProjectCard.vue

@@ -8,7 +8,7 @@ issuer information. * * @author Matthew Raymer */
   >
     <ProjectIcon
       :entity-id="project.handleId"
-      :icon-size="30"
+      :icon-size="48"
       :image-url="project.image"
       class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
     />

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/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
-            </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
+              {{ methodType.label }}
             </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

@@ -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/OnboardMeetingSetupView.vue

@@ -186,59 +186,16 @@
         <div>
           <label
             for="projectLink"
-            class="block text-sm font-medium text-gray-700 mb-1"
+            class="block text-sm font-medium text-gray-700"
             >Project Link</label
           >
-          <div class="w-full flex items-stretch">
-            <div
-              class="flex items-center gap-2 grow border border-slate-400 border-r-0 last:border-r px-3 py-2 rounded-l last:rounded overflow-hidden cursor-pointer hover:bg-slate-100"
-              @click="openProjectLinkDialog"
-            >
-              <div>
-                <ProjectIcon
-                  v-if="selectedProject"
-                  :entity-id="selectedProject.handleId"
-                  :icon-size="30"
-                  :image-url="selectedProject.image"
-                  class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
-                />
-                <font-awesome
-                  v-else
-                  icon="folder-open"
-                  class="text-slate-400"
-                />
-              </div>
-              <div class="overflow-hidden">
-                <div
-                  :class="{
-                    'text-sm font-semibold': selectedProject,
-                    'text-slate-400': !selectedProject,
-                  }"
-                  class="truncate"
-                >
-                  {{
-                    selectedProject
-                      ? selectedProject.name || "Unnamed Project"
-                      : "Select Project…"
-                  }}
-                </div>
-                <div
-                  v-if="selectedProject"
-                  class="text-xs text-slate-500 truncate"
-                >
-                  <font-awesome icon="user" class="text-slate-400" />
-                  {{ selectedProjectIssuerName }}
-                </div>
-              </div>
-            </div>
-            <button
-              v-if="selectedProject"
-              class="text-rose-600 px-3 py-2 border border-slate-400 border-l-0 rounded-r hover:bg-rose-600 hover:text-white hover:border-rose-600"
-              @click="unsetProjectLink"
-            >
-              <font-awesome icon="trash-can" />
-            </button>
-          </div>
+          <input
+            id="projectLink"
+            v-model="newOrUpdatedMeetingInputs.projectLink"
+            type="text"
+            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
+            placeholder="Project ID"
+          />
         </div>
 
         <button
@@ -267,17 +224,6 @@
       </form>
     </div>
 
-    <MeetingProjectDialog
-      ref="meetingProjectDialog"
-      :active-did="activeDid"
-      :all-my-dids="allMyDids"
-      :all-contacts="allContacts"
-      :notify="$notify"
-      @assign="handleProjectLinkAssigned"
-      @open="handleDialogOpen"
-      @close="handleDialogClose"
-    />
-
     <!-- Members Section -->
     <div
       v-if="!isLoading && currentMeeting != null && !!currentMeeting.password"
@@ -308,7 +254,6 @@
       </ul>
 
       <MembersList
-        ref="membersList"
         :password="currentMeeting.password || ''"
         :show-organizer-tools="true"
         class="mt-4"
@@ -347,13 +292,10 @@ import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 import QuickNav from "../components/QuickNav.vue";
 import TopMessage from "../components/TopMessage.vue";
 import MembersList from "../components/MembersList.vue";
-import MeetingProjectDialog from "../components/MeetingProjectDialog.vue";
-import ProjectIcon from "../components/ProjectIcon.vue";
 import {
   errorStringForLog,
   getHeaders,
   serverMessageForUser,
-  didInfo,
 } from "../libs/endorserServer";
 import { encryptMessage } from "../libs/crypto";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
@@ -367,8 +309,6 @@ import {
   NOTIFY_MEETING_DELETED,
   NOTIFY_MEETING_LINK_COPIED,
 } from "@/constants/notifications";
-import { PlanData } from "../interfaces/records";
-import { Contact } from "../db/tables/contacts";
 interface ServerMeeting {
   groupId: number; // from the server
   name: string; // to & from the server
@@ -391,8 +331,6 @@ interface MeetingSetupInputs {
     QuickNav,
     TopMessage,
     MembersList,
-    MeetingProjectDialog,
-    ProjectIcon,
   },
   mixins: [PlatformServiceMixin],
 })
@@ -416,9 +354,6 @@ export default class OnboardMeetingView extends Vue {
   isRegistered = false;
   showDeleteConfirm = false;
   fullName = "";
-  allContacts: Contact[] = [];
-  allMyDids: string[] = [];
-  selectedProjectData: PlanData | null = null;
   get minDateTime() {
     const now = new Date();
     now.setMinutes(now.getMinutes() + 5); // Set minimum 5 minutes in the future
@@ -435,17 +370,7 @@ export default class OnboardMeetingView extends Vue {
     this.fullName = settings?.firstName || "";
     this.isRegistered = !!settings?.isRegistered;
 
-    // Load contacts and DIDs for dialog
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this.allContacts = await (this as any).$contactsByDateAdded();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this.allMyDids = await (this as any).$getAllAccountDids();
-
     await this.fetchCurrentMeeting();
-
-    // Ensure selected project is loaded if projectLink exists
-    await this.ensureSelectedProjectLoaded();
-
     this.isLoading = false;
   }
 
@@ -517,54 +442,6 @@ export default class OnboardMeetingView extends Vue {
     }
   }
 
-  /**
-   * Ensure the selected project is loaded if projectLink exists
-   */
-  async ensureSelectedProjectLoaded(): Promise<void> {
-    const projectLink =
-      this.currentMeeting?.projectLink ||
-      this.newOrUpdatedMeetingInputs?.projectLink;
-
-    if (!projectLink) {
-      this.selectedProjectData = null;
-      return;
-    }
-
-    await this.fetchProjectByHandleId(projectLink);
-  }
-
-  /**
-   * Fetch a single project by handleId
-   * @param handleId - The project handleId to fetch
-   */
-  async fetchProjectByHandleId(handleId: string): Promise<void> {
-    try {
-      const headers = await getHeaders(this.activeDid);
-      const url = `${this.apiServer}/api/v2/report/plans?handleId=${encodeURIComponent(handleId)}`;
-      const resp = await this.axios.get(url, { headers });
-
-      if (resp.status === 200 && resp.data.data && resp.data.data.length > 0) {
-        const project = resp.data.data[0];
-        this.selectedProjectData = {
-          name: project.name,
-          description: project.description,
-          image: project.image,
-          handleId: project.handleId,
-          issuerDid: project.issuerDid,
-          rowId: project.rowId,
-        };
-      } else {
-        this.selectedProjectData = null;
-      }
-    } catch (error) {
-      this.$logAndConsole(
-        "Error fetching project by handleId: " + errorStringForLog(error),
-        true,
-      );
-      this.selectedProjectData = null;
-    }
-  }
-
   async createMeeting() {
     this.isLoading = true;
 
@@ -699,7 +576,7 @@ export default class OnboardMeetingView extends Vue {
     }
   }
 
-  async startEditing() {
+  startEditing() {
     // Populate form with existing meeting data
     if (this.currentMeeting) {
       const localExpiresAt = new Date(this.currentMeeting.expiresAt);
@@ -710,10 +587,6 @@ export default class OnboardMeetingView extends Vue {
         password: this.currentMeeting.password || "",
         projectLink: this.currentMeeting.projectLink || "",
       };
-      // Ensure selected project is loaded if projectLink exists
-      if (this.currentMeeting.projectLink) {
-        await this.ensureSelectedProjectLoaded();
-      }
     } else {
       this.$logError(
         "There is no current meeting to edit. We should never get here.",
@@ -721,15 +594,9 @@ export default class OnboardMeetingView extends Vue {
     }
   }
 
-  async cancelEditing() {
+  cancelEditing() {
     // Reset form data
     this.newOrUpdatedMeetingInputs = null;
-    // Restore selected project from currentMeeting if it exists
-    if (this.currentMeeting?.projectLink) {
-      await this.ensureSelectedProjectLoaded();
-    } else {
-      this.selectedProjectData = null;
-    }
   }
 
   async updateMeeting() {
@@ -843,78 +710,5 @@ export default class OnboardMeetingView extends Vue {
       this.notify.error("Failed to copy meeting link to clipboard.");
     }
   }
-
-  /**
-   * Computed property for selected project
-   * Returns the separately stored selected project data
-   */
-  get selectedProject(): PlanData | null {
-    return this.selectedProjectData;
-  }
-
-  /**
-   * Computed property for selected project issuer display name
-   * Uses didInfo to format the issuer name similar to ProjectCard
-   */
-  get selectedProjectIssuerName(): string {
-    if (!this.selectedProject) {
-      return "";
-    }
-    return didInfo(
-      this.selectedProject.issuerDid,
-      this.activeDid,
-      this.allMyDids,
-      this.allContacts,
-    );
-  }
-
-  /**
-   * Open the project link selection dialog
-   */
-  openProjectLinkDialog(): void {
-    (this.$refs.meetingProjectDialog as MeetingProjectDialog).open();
-  }
-
-  /**
-   * Handle project assignment from dialog
-   */
-  handleProjectLinkAssigned(project: PlanData): void {
-    // Store the selected project directly
-    this.selectedProjectData = project;
-
-    if (this.newOrUpdatedMeetingInputs) {
-      this.newOrUpdatedMeetingInputs.projectLink = project.handleId;
-    }
-  }
-
-  /**
-   * Unset the project link and revert to initial state
-   */
-  unsetProjectLink(): void {
-    this.selectedProjectData = null;
-    if (this.newOrUpdatedMeetingInputs) {
-      this.newOrUpdatedMeetingInputs.projectLink = "";
-    }
-  }
-
-  /**
-   * Handle dialog open event - stop auto-refresh in MembersList
-   */
-  handleDialogOpen(): void {
-    const membersList = this.$refs.membersList as MembersList;
-    if (membersList) {
-      membersList.stopAutoRefresh();
-    }
-  }
-
-  /**
-   * Handle dialog close event - start auto-refresh in MembersList
-   */
-  handleDialogClose(): void {
-    const membersList = this.$refs.membersList as MembersList;
-    if (membersList) {
-      membersList.startAutoRefresh();
-    }
-  }
 }
 </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
-   * Shows success notification when completed
+   * Fetches network connections for the profile and displays them
+   * 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>