WIP: meeting members adjustments

src/App.vue

@@ -354,7 +354,7 @@
           </div>
 
           <div
-            v-if="notification.type === 'set-visibility-to-meeting-members'"
+            v-if="notification.type === 'set-visibility-meeting-members'"
             class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
           >
             <div

src/components/MembersList.vue

@@ -11,7 +11,7 @@
     <!-- Members List -->
 
     <div v-else>
-      <div class="text-center text-red-600 py-4">
+      <div class="text-center text-red-600 my-4">
         {{ decryptionErrorMessage() }}
       </div>
 
@@ -23,131 +23,125 @@
         to set it.
       </div>
 
-      <div>
+      <ul class="list-disc text-sm ps-4 space-y-2 mb-4">
-        <span
+        <li
           v-if="membersToShow().length > 0 && showOrganizerTools && isOrganizer"
-          class="inline-flex items-center flex-wrap"
         >
-          <span class="inline-flex items-center">
+          Click
-            &bull; Click
-            <span
-              class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
-            >
-              <font-awesome icon="plus" class="text-sm" />
-            </span>
-            /
-            <span
-              class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
-            >
-              <font-awesome icon="minus" class="text-sm" />
-            </span>
-            to add/remove them to/from the meeting.
-          </span>
-        </span>
-      </div>
-      <div>
-        <span
-          v-if="membersToShow().length > 0"
-          class="inline-flex items-center"
-        >
-          &bull; Click
           <span
-            class="mx-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600"
+            class="inline-block w-5 h-5 rounded-full bg-blue-100 text-blue-600 text-center"
           >
-            <font-awesome icon="circle-user" class="text-xl" />
+            <font-awesome icon="plus" class="text-sm" />
+          </span>
+          /
+          <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>
+          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>
           to add them to your contacts.
-        </span>
+        </li>
-      </div>
+      </ul>
 
-      <div class="flex justify-center">
+      <div class="flex justify-between">
         <!-- 
         always have at least one refresh button even without members in case the organizer 
          changes the password 
          -->
         <button
-          class="btn-action-refresh"
+          class="text-sm 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-3 py-1.5 rounded-md"
           title="Refresh members list"
           @click="fetchMembers"
         >
           <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
+          Refresh <span class="text-xs">(10s)</span>
+        </button>
+
+        <button
+          class="text-sm 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-3 py-1.5 rounded-md"
+          title="Set visibility for meeting members"
+          @click="showAddMembersNotification"
+        >
+          <font-awesome icon="eye" />
+          Set Visibility
         </button>
       </div>
-      <div
+      <ul
-        v-for="member in membersToShow()"
+        v-if="membersToShow().length > 0"
-        :key="member.member.memberId"
+        class="border-t border-slate-300 my-2"
-        class="mt-2 p-4 bg-gray-50 rounded-lg"
       >
-        <div class="flex items-center justify-between">
+        <li
-          <div class="flex items-center">
+          v-for="member in membersToShow()"
-            <h3 class="text-lg font-medium">
+          :key="member.member.memberId"
-              {{ member.name || unnamedMember }}
+          class="border-b border-slate-300 py-1.5"
-            </h3>
+        >
-            <div
+          <div class="flex items-center justify-between">
-              v-if="!getContactFor(member.did) && member.did !== activeDid"
+            <div class="flex items-center overflow-hidden">
-              class="flex justify-end"
+              <h3 class="font-semibold truncate">
-            >
+                {{ member.name || unnamedMember }}
-              <button
+              </h3>
-                class="btn-add-contact"
+              <div
-                title="Add as contact"
+                v-if="!getContactFor(member.did) && member.did !== activeDid"
-                @click="addAsContact(member)"
+                class="flex justify-end"
               >
-                <font-awesome icon="circle-user" class="text-xl" />
+                <button
-              </button>
+                  class="btn-add-contact"
+                  title="Add as contact"
+                  @click="addAsContact(member)"
+                >
+                  <font-awesome icon="circle-user" class="text-sm" />
+                </button>
+              </div>
             </div>
-            <button
+            <div class="flex">
-              v-if="member.did !== activeDid"
+              <span
-              class="btn-info-contact"
+                v-if="
-              title="Contact info"
+                  showOrganizerTools && isOrganizer && member.did !== activeDid
-              @click="
-                informAboutAddingContact(
-                  getContactFor(member.did) !== undefined,
-                )
-              "
-            >
-              <font-awesome icon="circle-info" class="text-base" />
-            </button>
-          </div>
-          <div class="flex">
-            <span
-              v-if="
-                showOrganizerTools && isOrganizer && member.did !== activeDid
-              "
-              class="flex items-center"
-            >
-              <button
-                class="btn-admission"
-                :title="
-                  member.member.admitted ? 'Remove member' : 'Admit member'
                 "
-                @click="checkWhetherContactBeforeAdmitting(member)"
+                class="flex items-center"
               >
-                <font-awesome
+                <button
-                  :icon="member.member.admitted ? 'minus' : 'plus'"
+                  class="btn-admission"
-                  class="text-sm"
+                  :title="
-                />
+                    member.member.admitted ? 'Remove member' : 'Admit member'
-              </button>
+                  "
-              <button
+                  @click="checkWhetherContactBeforeAdmitting(member)"
-                class="btn-info-admission"
+                >
-                title="Admission info"
+                  <font-awesome
-                @click="informAboutAdmission()"
+                    :icon="member.member.admitted ? 'minus' : 'plus'"
-              >
+                    class="text-sm"
-                <font-awesome icon="circle-info" class="text-base" />
+                  />
-              </button>
+                </button>
-            </span>
+              </span>
+            </div>
           </div>
-        </div>
+          <p class="text-xs text-gray-600 truncate">
-        <p class="text-sm text-gray-600 truncate">
+            {{ member.did }}
-          {{ member.did }}
+          </p>
-        </p>
+        </li>
-      </div>
+      </ul>
-      <div v-if="membersToShow().length > 0" class="flex justify-center mt-4">
+
+      <div v-if="membersToShow().length > 0" class="flex justify-between">
+        <!-- 
+        always have at least one refresh button even without members in case the organizer 
+         changes the password 
+         -->
         <button
-          class="btn-action-refresh"
+          class="text-sm 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-3 py-1.5 rounded-md"
           title="Refresh members list"
           @click="fetchMembers"
         >
           <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
+          Refresh <span class="text-xs">(10s)</span>
         </button>
       </div>
 
@@ -508,6 +502,21 @@ export default class MembersList extends Vue {
       this.notify.error(message, TIMEOUTS.LONG);
     }
   }
+
+  showAddMembersNotification() {
+    this.$notify(
+      {
+        group: "modal",
+        type: "set-visibility-meeting-members",
+        title: "Set Visibility for Meeting Members",
+        onYes: async () => {
+          // Handle the "Add Selected" action - you can implement the actual logic here
+          console.log("User confirmed adding selected members as contacts");
+        },
+      },
+      -1,
+    ); // -1 means no auto-dismiss, stays open until user acts
+  }
 }
 </script>
 
@@ -522,7 +531,7 @@ export default class MembersList extends Vue {
 
 .btn-add-contact {
   /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply ml-2 w-8 h-8 flex items-center justify-center rounded-full 
+  @apply ml-2 w-5 h-5 flex items-center justify-center rounded-full 
     bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800 
     transition-colors;
 }
@@ -536,14 +545,14 @@ export default class MembersList extends Vue {
 
 .btn-admission {
   /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply mr-2 w-6 h-6 flex items-center justify-center rounded-full 
+  @apply w-5 h-5 flex items-center justify-center rounded-full 
     bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 
     transition-colors;
 }
 
 .btn-info-admission {
   /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply mr-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full 
+  @apply w-6 h-6 flex items-center justify-center rounded-full 
     bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 
     transition-colors;
 }

src/views/OnboardMeetingMembersView.vue

@@ -7,7 +7,7 @@
     <!-- Sub View Heading -->
     <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
       <h1 class="grow text-xl text-center font-semibold leading-tight">
-        Meeting Member<a href="#" @click="showAddMembersNotification">s</a>
+        Meeting Members
       </h1>
 
       <!-- Spacer (no Back button) -->
@@ -259,19 +259,5 @@ export default class OnboardMeetingMembersView extends Vue {
   handleError(message: string) {
     this.errorMessage = message;
   }
-
-  showAddMembersNotification() {
-    this.$notify(
-      {
-        group: "modal",
-        type: "set-visibility-to-meeting-members",
-        onYes: async () => {
-          // Handle the "Add Selected" action - you can implement the actual logic here
-          console.log("User confirmed adding selected members as contacts");
-        },
-      },
-      -1,
-    ); // -1 means no auto-dismiss, stays open until user acts
-  }
 }
 </script>

src/views/OnboardMeetingSetupView.vue

@@ -230,26 +230,28 @@
       class="mt-8 p-4 border rounded-lg bg-white shadow"
     >
       <div class="flex items-center justify-between">
-        <h2 class="text-2xl">Meeting Members</h2>
+        <h2 class="font-bold">Meeting Members</h2>
-      </div>
-      <div class="mt-4">
-        &bull; Page for Members
-        <span
-          class="ml-4 cursor-pointer text-blue-600"
-          title="Click to copy link for members"
-          @click="copyMembersLinkToClipboard"
-        >
-          <font-awesome icon="link" />
-        </span>
-        <a
-          v-if="!!currentMeeting.password"
-          :href="onboardMeetingMembersLink()"
-          class="ml-4 text-blue-600"
-          target="_blank"
-        >
-          <font-awesome icon="external-link" />
-        </a>
       </div>
+      <ul class="list-disc text-sm mt-4 mb-2 ps-4 space-y-2">
+        <li>
+          Page for Members:
+          <span
+            class="ml-4 cursor-pointer text-blue-600"
+            title="Click to copy link for members"
+            @click="copyMembersLinkToClipboard"
+          >
+            <font-awesome icon="link" />
+          </span>
+          <a
+            v-if="!!currentMeeting.password"
+            :href="onboardMeetingMembersLink()"
+            class="ml-4 text-blue-600"
+            target="_blank"
+          >
+            <font-awesome icon="external-link" />
+          </a>
+        </li>
+      </ul>
 
       <MembersList
         :password="currentMeeting.password || ''"