refactor(EntityGrid): simplify alphabetical section label

Change "Everyone Else" to "Everyone" for clearer, more concise labeling

src/components/BulkMembersDialog.vue

@@ -111,7 +111,7 @@
                 ? 'bg-blue-600 text-white cursor-pointer'
                 : 'bg-slate-400 text-slate-200 cursor-not-allowed',
             ]"
-            @click="handleMainAction"
+            @click="processSelectedMembers"
           >
             {{ buttonText }}
           </button>
@@ -145,7 +145,7 @@ import { Contact } from "@/db/tables/contacts";
 export default class BulkMembersDialog extends Vue {
   @Prop({ default: "" }) activeDid!: string;
   @Prop({ default: "" }) apiServer!: string;
-  @Prop({ required: true }) dialogType!: "admit" | "visibility";
+  // isOrganizer: true = organizer mode (admit members), false = member mode (set visibility)
   @Prop({ required: true }) isOrganizer!: boolean;
 
   // Vue notification system
@@ -252,15 +252,7 @@ export default class BulkMembersDialog extends Vue {
     return this.selectedMembers.includes(memberDid);
   }
 
-  async handleMainAction() {
-    if (this.dialogType === "admit") {
-      await this.organizerAdmitAndAddWithVisibility();
-    } else {
-      await this.memberAddContactWithVisibility();
-    }
-  }
-
-  async organizerAdmitAndAddWithVisibility() {
+  async processSelectedMembers() {
     try {
       const selectedMembers: MemberData[] = this.membersData.filter((member) =>
         this.selectedMembers.includes(member.did),
@@ -275,16 +267,20 @@ export default class BulkMembersDialog extends Vue {
 
       for (const member of selectedMembers) {
         try {
-          // First, admit the member
-          await this.admitMember(member);
-
-          // Register them
-          await this.registerMember(member);
-          admittedCount++;
+          // Organizer mode: admit and register the member first
+          if (this.isOrganizer) {
+            await this.admitMember(member);
+            await this.registerMember(member);
+            admittedCount++;
+          }
 
           // If they're not a contact yet, add them as a contact
           if (!member.isContact) {
-            await this.addAsContact(member, true);
+            // Organizer mode: set isRegistered to true, member mode: undefined
+            await this.addAsContact(
+              member,
+              this.isOrganizer ? true : undefined,
+            );
             contactAddedCount++;
           }
 
@@ -299,88 +295,51 @@ export default class BulkMembersDialog extends Vue {
       }
 
       // Show success notification
-      if (admittedCount > 0) {
-        this.$notify(
-          {
-            group: "alert",
-            type: "success",
-            title: "Members Admitted Successfully",
-            text: `${admittedCount} member${admittedCount === 1 ? "" : "s"} admitted and registered${contactAddedCount === 0 ? "" : admittedCount === contactAddedCount ? " and" : `, ${contactAddedCount}`}${contactAddedCount === 0 ? "" : ` added as contact${contactAddedCount === 1 ? "" : "s"}`}.`,
-          },
-          10000,
-        );
-      }
-      if (errors > 0) {
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "Failed to fully admit some members. Work with them individually below.",
-          },
-          5000,
-        );
-      }
-
-      this.close(notSelectedMembers.map((member) => member.did));
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error("Error admitting members:", error);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "Some errors occurred. Work with members individually below.",
-        },
-        5000,
-      );
-    }
-  }
-
-  async memberAddContactWithVisibility() {
-    try {
-      const selectedMembers: MemberData[] = this.membersData.filter((member) =>
-        this.selectedMembers.includes(member.did),
-      );
-      const notSelectedMembers: MemberData[] = this.membersData.filter(
-        (member) => !this.selectedMembers.includes(member.did),
-      );
-
-      let contactsAddedCount = 0;
-
-      for (const member of selectedMembers) {
-        try {
-          // If they're not a contact yet, add them as a contact first
-          if (!member.isContact) {
-            await this.addAsContact(member, undefined);
-            contactsAddedCount++;
-          }
-
-          // Set their seesMe to true
-          await this.updateContactVisibility(member.did, true);
-        } catch (error) {
-          // eslint-disable-next-line no-console
-          console.error(`Error processing member ${member.did}:`, error);
-          // Continue with other members even if one fails
+      if (this.isOrganizer) {
+        if (admittedCount > 0) {
+          this.$notify(
+            {
+              group: "alert",
+              type: "success",
+              title: "Members Admitted Successfully",
+              text: `${admittedCount} member${admittedCount === 1 ? "" : "s"} admitted and registered${contactAddedCount === 0 ? "" : admittedCount === contactAddedCount ? " and" : `, ${contactAddedCount}`}${contactAddedCount === 0 ? "" : ` added as contact${contactAddedCount === 1 ? "" : "s"}`}.`,
+            },
+            5000,
+          );
+        }
+        if (errors > 0) {
+          this.$notify(
+            {
+              group: "alert",
+              type: "danger",
+              title: "Error",
+              text: "Failed to fully admit some members. Work with them individually below.",
+            },
+            5000,
+          );
+        }
+      } else {
+        // Member mode: show contacts added notification
+        if (contactAddedCount > 0) {
+          this.$notify(
+            {
+              group: "alert",
+              type: "success",
+              title: "Contacts Added Successfully",
+              text: `${contactAddedCount} member${contactAddedCount === 1 ? "" : "s"} added as contact${contactAddedCount === 1 ? "" : "s"}.`,
+            },
+            5000,
+          );
         }
       }
 
-      // Show success notification
-      this.$notify(
-        {
-          group: "alert",
-          type: "success",
-          title: "Contacts Added Successfully",
-          text: `${contactsAddedCount} member${contactsAddedCount === 1 ? "" : "s"} added as contact${contactsAddedCount === 1 ? "" : "s"}.`,
-        },
-        5000,
-      );
-
       this.close(notSelectedMembers.map((member) => member.did));
     } catch (error) {
       // eslint-disable-next-line no-console
-      console.error("Error adding contacts:", error);
+      console.error(
+        `Error ${this.isOrganizer ? "admitting members" : "adding contacts"}:`,
+        error,
+      );
       this.$notify(
         {
           group: "alert",
@@ -487,10 +446,10 @@ export default class BulkMembersDialog extends Vue {
   }
 
   showContactInfo() {
-    const message =
-      this.dialogType === "admit"
-        ? "This user is already your contact, but they are not yet admitted to the meeting."
-        : "This user is already your contact, but your activities are not visible to them yet.";
+    // isOrganizer: true = admit mode, false = visibility mode
+    const message = this.isOrganizer
+      ? "This user is already your contact, but they are not yet admitted to the meeting."
+      : "This user is already your contact, but your activities are not visible to them yet.";
 
     this.$notify(
       {

src/components/EntityGrid.vue

@@ -108,7 +108,7 @@ projects, and special entities with selection. * * @author Matthew Raymer */
           <li
             class="text-xs font-semibold text-slate-500 uppercase pt-5 pb-1.5 px-2 border-b border-slate-300"
           >
-            Everyone Else
+            Everyone
           </li>
           <PersonCard
             v-for="person in alphabeticalContacts"
@@ -208,7 +208,18 @@ export default class EntityGrid extends Vue {
   infiniteScrollReset?: () => void;
   scrollContainer?: HTMLElement;
 
-  /** Array of entities to display */
+  /**
+   * 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[];
 
@@ -307,14 +318,17 @@ export default class EntityGrid extends Vue {
   }
 
   /**
-   * Get the 3 most recently added contacts (when showing contacts and not searching)
+   * 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 recentContacts(): Contact[] {
     if (this.entityType !== "people" || this.searchTerm.trim()) {
       return [];
     }
     // Entities are already sorted by date added (newest first)
-    return (this.entities as Contact[]).slice(0, 3);
+    return (this.entities as Contact[]).slice(0, RECENT_CONTACTS_COUNT);
   }
 
   /**
@@ -325,16 +339,16 @@ export default class EntityGrid extends Vue {
     if (this.entityType !== "people" || this.searchTerm.trim()) {
       return [];
     }
-    // Skip the first 3 (recent contacts) and sort the rest alphabetically
+    // 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[]).slice(RECENT_CONTACTS_COUNT);
+    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 3 recent)
+    // 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);
   }
@@ -531,9 +545,8 @@ export default class EntityGrid extends Vue {
     }
 
     // People: check if more alphabetical contacts available
-    // Total available = 3 recent + all alphabetical
-    const remaining = (this.entities as Contact[]).slice(RECENT_CONTACTS_COUNT);
-    const totalAvailable = RECENT_CONTACTS_COUNT + remaining.length;
+    // Total available = recent + all alphabetical
+    const totalAvailable = RECENT_CONTACTS_COUNT + this.entities.length;
     return this.displayedCount < totalAvailable;
   }
 

src/components/MembersList.vue

@@ -223,7 +223,6 @@
       ref="bulkMembersDialog"
       :active-did="activeDid"
       :api-server="apiServer"
-      :dialog-type="isOrganizer ? 'admit' : 'visibility'"
       :is-organizer="isOrganizer"
       @close="closeBulkMembersDialogCallback"
     />

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/views/NewEditProjectView.vue

@@ -60,12 +60,60 @@
     </div>
     <ImageMethodDialog ref="imageDialog" default-camera-mode="environment" />
 
-    <input
-      v-model="agentDid"
-      type="text"
-      placeholder="Other Authorized Representative"
-      class="mt-4 block w-full rounded border border-slate-400 px-3 py-2"
+    <!-- Authorized Representative Selection -->
+    <div class="w-full flex items-stretch my-4">
+      <div
+        class="flex items-center gap-2 grow border border-slate-400 border-r-0 last:border-r px-3 py-2 rounded-l last:rounded overflow-hidden cursor-pointer hover:bg-slate-100"
+        @click="openRepresentativeDialog"
+      >
+        <div>
+          <EntityIcon
+            v-if="selectedRepresentative"
+            :contact="selectedRepresentative"
+            class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
+          />
+          <font-awesome v-else icon="user" class="text-slate-400" />
+        </div>
+        <div class="overflow-hidden">
+          <div
+            :class="{
+              'text-sm font-semibold': selectedRepresentative,
+              'text-slate-400': !selectedRepresentative,
+            }"
+            class="truncate"
+          >
+            {{
+              selectedRepresentative
+                ? selectedRepresentative.name || AppString.NO_CONTACT_NAME
+                : "Assign Authorized Representative…"
+            }}
+          </div>
+          <div
+            v-if="selectedRepresentative"
+            class="text-xs text-slate-500 truncate"
+          >
+            {{ agentDid }}
+          </div>
+        </div>
+      </div>
+      <button
+        v-if="selectedRepresentative"
+        class="text-rose-600 px-3 py-2 border border-slate-400 border-l-0 rounded-r hover:bg-rose-600 hover:text-white hover:border-rose-600"
+        @click="unsetRepresentative"
+      >
+        <font-awesome icon="trash-can" />
+      </button>
+    </div>
+
+    <ProjectRepresentativeDialog
+      ref="representativeDialog"
+      :all-contacts="allContacts"
+      :active-did="activeDid"
+      :all-my-dids="allMyDids"
+      :notify="$notify"
+      @assign="handleRepresentativeAssigned"
     />
+
     <div class="mb-4">
       <p v-if="shouldShowOwnershipWarning">
         <span class="text-red-500">Beware!</span>
@@ -232,9 +280,12 @@ import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
 import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 import { LeafletMouseEvent } from "leaflet";
 
+import EntityIcon from "../components/EntityIcon.vue";
 import ImageMethodDialog from "../components/ImageMethodDialog.vue";
+import ProjectRepresentativeDialog from "../components/ProjectRepresentativeDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
 import {
+  AppString,
   DEFAULT_IMAGE_API_SERVER,
   DEFAULT_PARTNER_API_SERVER,
   NotificationIface,
@@ -268,6 +319,7 @@ import {
   retrieveAccountCount,
   retrieveFullyDecryptedAccount,
 } from "../libs/util";
+import { Contact } from "../db/tables/contacts";
 
 import {
   EventTemplate,
@@ -323,7 +375,15 @@ import { logger } from "../utils/logger";
  */
 
 @Component({
-  components: { ImageMethodDialog, LMap, LMarker, LTileLayer, QuickNav },
+  components: {
+    EntityIcon,
+    ImageMethodDialog,
+    ProjectRepresentativeDialog,
+    LMap,
+    LMarker,
+    LTileLayer,
+    QuickNav,
+  },
   mixins: [PlatformServiceMixin],
 })
 export default class NewEditProjectView extends Vue {
@@ -334,6 +394,9 @@ export default class NewEditProjectView extends Vue {
   // Notification helpers
   private notify!: ReturnType<typeof createNotifyHelpers>;
 
+  // Constants
+  AppString = AppString;
+
   /**
    * Display error notification to user
    * Provides consistent error messaging with 5-second timeout
@@ -346,6 +409,8 @@ export default class NewEditProjectView extends Vue {
   // Component state properties
   activeDid = "";
   agentDid = "";
+  allContacts: Array<Contact> = [];
+  allMyDids: string[] = [];
   apiServer = "";
   endDateInput?: string;
   endTimeInput?: string;
@@ -392,16 +457,24 @@ export default class NewEditProjectView extends Vue {
     const activeIdentity = await (this as any).$getActiveIdentity();
     this.activeDid = activeIdentity.activeDid || "";
 
+    // Get all user's DIDs
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.allMyDids = await (this as any).$getAllAccountDids();
+
+    // Load contacts sorted by date added (newest first) for consistent "Recently Added" display
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.allContacts = await (this as any).$contactsByDateAdded();
+
     this.apiServer = settings.apiServer || "";
     this.showGeneralAdvanced = !!settings.showGeneralAdvanced;
 
     this.projectId = (this.$route.query["projectId"] as string) || "";
 
-    if (this.projectId) {
+    if (this.isSavedProject()) {
       if (this.numAccounts === 0) {
         this.notify.error(NOTIFY_PROJECT_ACCOUNT_LOADING_ERROR.message);
       } else {
-        this.loadProject(this.activeDid);
+        this.loadProject(this.activeDid, this.projectId);
       }
     }
   }
@@ -411,11 +484,9 @@ export default class NewEditProjectView extends Vue {
    * Retrieves project information from the API and populates form fields
    * @param userDid - User's decentralized identifier
    */
-  async loadProject(userDid: string) {
+  async loadProject(userDid: string, projectId: string) {
     const url =
-      this.apiServer +
-      "/api/claim/byHandle/" +
-      encodeURIComponent(this.projectId);
+      this.apiServer + "/api/claim/byHandle/" + encodeURIComponent(projectId);
     const headers = await getHeaders(userDid);
 
     try {
@@ -432,6 +503,12 @@ export default class NewEditProjectView extends Vue {
         }
         if (this.fullClaim?.agent?.identifier) {
           this.agentDid = this.fullClaim.agent.identifier;
+          if (this.activeDid !== this.projectIssuerDid) {
+            this.agentDid = this.projectIssuerDid;
+            this.notify.warning(
+              "You were previously the agent, so the agent has been set to the previous owner. You can change it.",
+            );
+          }
         }
         if (this.fullClaim.startTime) {
           const localDateTime = DateTime.fromISO(
@@ -536,7 +613,7 @@ export default class NewEditProjectView extends Vue {
   private async saveProject() {
     // Make a claim
     const vcClaim: PlanActionClaim = this.fullClaim;
-    if (this.projectId) {
+    if (this.isSavedProject()) {
       vcClaim.lastClaimId = this.lastClaimJwtId;
     }
     if (this.agentDid) {
@@ -870,6 +947,10 @@ export default class NewEditProjectView extends Vue {
     this.longitude = event.latlng.lng;
   }
 
+  private isSavedProject(): boolean {
+    return !!this.projectId;
+  }
+
   /**
    * Computed property for character count display
    * Shows current description length and maximum character limit
@@ -885,6 +966,7 @@ export default class NewEditProjectView extends Vue {
    */
   get shouldShowOwnershipWarning(): boolean {
     return (
+      this.isSavedProject() &&
       this.activeDid !== this.projectIssuerDid &&
       this.agentDid !== this.projectIssuerDid
     );
@@ -961,5 +1043,37 @@ export default class NewEditProjectView extends Vue {
   get shouldShowSpinner(): boolean {
     return !this.isHiddenSpinner;
   }
+
+  /**
+   * Computed property for selected representative contact
+   * Derives the contact from agentDid by finding it in allContacts
+   */
+  get selectedRepresentative(): Contact | null {
+    if (!this.agentDid) {
+      return null;
+    }
+    return this.allContacts.find((c) => c.did === this.agentDid) || null;
+  }
+
+  /**
+   * Open the representative selection dialog
+   */
+  openRepresentativeDialog(): void {
+    (this.$refs.representativeDialog as ProjectRepresentativeDialog).open();
+  }
+
+  /**
+   * Handle representative assignment from dialog
+   */
+  handleRepresentativeAssigned(contact: Contact): void {
+    this.agentDid = contact.did;
+  }
+
+  /**
+   * Unset the representative and revert to initial state
+   */
+  unsetRepresentative(): void {
+    this.agentDid = "";
+  }
 }
 </script>