feat: Add bulk admit pending members functionality

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

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

src/components/MembersList.vue

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

src/constants/notifications.ts

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

src/libs/fontawesome.ts

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