From e9ea89edae7bb2f35a5080865d078b006610e49b Mon Sep 17 00:00:00 2001
From: Jose Olarte III <jose.anomalist.design@gmail.com>
Date: Tue, 21 Oct 2025 18:13:10 +0800
Subject: [PATCH] feat: enhance members list UI with visual indicators and
 improved styling

- Sort members list with organizer first, then non-admitted, then admitted
- Add crown icon for meeting organizer identification
- Add spinner icon for non-admitted members
- Implement conditional styling for non-admitted members
- Update button styling to use circle icons instead of rounded backgrounds
- Improve visual hierarchy with better spacing and color coding
---
 src/components/MembersList.vue | 114 +++++++++++++++++++++++----------
 src/libs/fontawesome.ts        |   4 ++
 2 files changed, 84 insertions(+), 34 deletions(-)

diff --git a/src/components/MembersList.vue b/src/components/MembersList.vue
index e26613bf..fe54b8d1 100644
--- a/src/components/MembersList.vue
+++ b/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>
@@ -74,16 +62,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="spinner"
+                  class="fa-fw fa-spin-pulse 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 +112,7 @@
                     )
                   "
                 >
-                  <font-awesome icon="circle-info" class="text-sm" />
+                  <font-awesome icon="circle-info" />
                 </button>
               </div>
             </div>
@@ -110,17 +120,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 +145,7 @@
                 title="Admission Info"
                 @click="informAboutAdmission()"
               >
-                <font-awesome icon="circle-info" class="text-sm" />
+                <font-awesome icon="circle-info" />
               </button>
             </span>
           </div>
@@ -378,17 +394,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() {
@@ -718,23 +761,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>
diff --git a/src/libs/fontawesome.ts b/src/libs/fontawesome.ts
index efd8ff03..b2e1ad13 100644
--- a/src/libs/fontawesome.ts
+++ b/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,
@@ -123,6 +125,7 @@ library.add(
   faCircle,
   faCircleCheck,
   faCircleInfo,
+  faCircleMinus,
   faCirclePlus,
   faCircleQuestion,
   faCircleRight,
@@ -131,6 +134,7 @@ library.add(
   faCoins,
   faComment,
   faCopy,
+  faCrown,
   faDollar,
   faDownload,
   faEllipsis,