feat: implement member visibility dialog with checkbox selection and refresh

- Add "Set Visibility" dialog for meeting members who need visibility settings
- Filter members to show only those not in contacts or without seesMe set
- Implement checkbox selection with "Select All" functionality
- Add reactive checkbox behavior with proper state management
- Default all checkboxes to checked when dialog opens
- Implement "Set Visibility" action to add contacts and set seesMe property
- Add success notifications with count of affected members
- Disable "Set Visibility" button when no members are selected
- Use notification callbacks for data refresh
- Hide "Set Visibility" buttons when no members need visibility settings
- Add proper dialog state management and cleanup
- Ensure dialog closes before triggering data refresh to prevent stale states

The implementation provides a smooth user experience for managing member visibility settings with proper state synchronization between components.

src/components/MembersList.vue

@@ -67,6 +67,7 @@
         </button>
 
         <button
+          v-if="getMembersForVisibility().length > 0"
           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"
@@ -162,6 +163,7 @@
         </button>
 
         <button
+          v-if="getMembersForVisibility().length > 0"
           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"
@@ -264,6 +266,12 @@ export default class MembersList extends Vue {
     await this.loadContacts();
   }
 
+  async refreshData() {
+    // Force refresh both contacts and members
+    await this.loadContacts();
+    await this.fetchMembers();
+  }
+
   async fetchMembers() {
     try {
       this.isLoading = true;
@@ -391,6 +399,28 @@ export default class MembersList extends Vue {
     return this.contacts.find((contact) => contact.did === did);
   }
 
+  getMembersForVisibility() {
+    return this.decryptedMembers
+      .filter((member) => {
+        // Exclude the current user
+        if (member.did === this.activeDid) {
+          return false;
+        }
+
+        const contact = this.getContactFor(member.did);
+
+        // Include members who:
+        // 1. Haven't been added as contacts yet, OR
+        // 2. Are contacts but don't have visibility set (seesMe property)
+        return !contact || !contact.seesMe;
+      })
+      .map((member) => ({
+        ...member,
+        isContact: !!this.getContactFor(member.did),
+        contact: this.getContactFor(member.did),
+      }));
+  }
+
   checkWhetherContactBeforeAdmitting(decrMember: DecryptedMember) {
     const contact = this.getContactFor(decrMember.did);
     if (!decrMember.member.admitted && !contact) {
@@ -530,14 +560,17 @@ export default class MembersList extends Vue {
   }
 
   showAddMembersNotification() {
+    // Filter members to show only those who need visibility set
+    const membersForVisibility = this.getMembersForVisibility();
+
     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");
+        membersData: membersForVisibility, // Pass the filtered members data
+        callback: async () => {
+          // Refresh data when dialog is closed (regardless of action taken)
+          await this.refreshData();
         },
       },
       -1,