feat: simplify the user-profile-sharing prompts (where you contact via a current user)

src/views/UserProfileView.vue

@@ -57,8 +57,8 @@
       <!-- Nearest Neighbors Section -->
       <div
         v-if="
-          profile.issuerDid !== activeDid &&
+          profile.issuerDid !== activeDid && // only show neighbors if they're not current user
-          profile.issuerDid !== neighbors?.[0]?.did
+          profile.issuerDid !== neighbors?.[0]?.did // and they're not directly connected (since there's no in-between)
         "
         class="mt-6"
       >
@@ -85,62 +85,52 @@
           </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"
+              class="bg-slate-50 border border-slate-300 rounded-md"
+            >
+              <div class="flex items-center justify-between gap-3 p-3">
+                <div class="flex items-center gap-2 flex-1 min-w-0">
+                  <button
+                    title="Copy profile link and expand"
+                    class="text-blue-600 flex-shrink-0"
+                    @click="onNeighborExpandClick(neighbor.did)"
+                  >
+                    <font-awesome
+                      :icon="
+                        expandedNeighborDid === neighbor.did
+                          ? 'chevron-down'
+                          : 'chevron-right'
+                      "
+                      class="text-sm"
+                    />
+                    {{ getNeighborDisplayName(neighbor.did) }}
+                  </button>
+                  <span :class="getRelationBadgeClass(neighbor.relation)">
+                    {{ getRelationLabel(neighbor.relation) }}
+                  </span>
+                </div>
+              </div>
+              <div
+                v-if="expandedNeighborDid === neighbor.did"
+                class="border-t border-slate-300 p-3 bg-white"
               >
                 <router-link
                   :to="{ name: 'did', params: { did: neighbor.did } }"
-                class="flex-1 min-w-0"
+                  class="text-blue-600 hover:text-blue-800 font-medium underline"
                 >
-                <p class="font-medium truncate text-blue-600">
+                  Go to contact info
-                  {{ getNeighborDisplayName(neighbor.did) }}
+                </router-link>
-                </p>
+                and send them the link in your clipboard and ask for an
+                introduction to this person.
                 <div
                   v-if="
                     getNeighborDisplayName(neighbor.did) === '' ||
                     neighborIsNotInContacts(neighbor.did)
                   "
-                  class="flex flex-col gap-1 mt-1"
+                  class="flex flex-col gap-1 mt-2"
                 >
                   <p class="text-xs text-slate-600">
                     This person is connected to you, but they are not in this
@@ -160,10 +150,7 @@
                     </button>
                   </span>
                 </div>
-              </router-link>
+              </div>
-              <span :class="getRelationBadgeClass(neighbor.relation)">
-                {{ getRelationLabel(neighbor.relation) }}
-              </span>
             </div>
           </div>
         </div>
@@ -274,12 +261,13 @@ export default class UserProfileView extends Vue {
   activeDid = "";
   allContacts: Array<Contact> = [];
   allMyDids: Array<string> = [];
+  expandedNeighborDid: string | null = null;
   isLoading = true;
   loadingNeighbors = false;
+  neighbors: Array<{ did: string; relation: string }> = [];
   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;
@@ -431,6 +419,31 @@ export default class UserProfileView extends Vue {
     }
   }
 
+  /**
+   * Handles clicking the expand button next to a neighbor's name
+   * Copies the profile link to clipboard and toggles the expanded section
+   */
+  async onNeighborExpandClick(did: string) {
+    if (this.expandedNeighborDid === did) {
+      this.expandedNeighborDid = null;
+      // don't copy the link
+      return;
+    }
+
+    // Copy the profile link
+    const deepLink = `${APP_SERVER}/deep-link/user-profile/${this.profile?.rowId}`;
+    try {
+      await copyToClipboard(deepLink);
+      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.");
+    }
+
+    // Toggle the expanded section
+    this.expandedNeighborDid = did;
+  }
+
   /**
    * Computed properties for template logic streamlining
    */