From 4f3a1b390dae0d655f6da45c1433e6ee6eb15a2b Mon Sep 17 00:00:00 2001
From: Jose Olarte III <jose.anomalist.design@gmail.com>
Date: Fri, 17 Oct 2025 19:17:47 +0800
Subject: [PATCH] feat: auto-show visibility dialog for meeting members

- Show dialog on initial load if members need visibility settings
- Show dialog during auto-refresh only when new members are added (not removed)
- Show dialog on manual refresh if any members need visibility settings
- Remove manual "Set Visibility" buttons from UI as dialog now appears automatically
- Add logic to track previous visibility members and detect changes
- Improve UX by proactively prompting users to set visibility for new meeting members

The dialog now appears automatically in these scenarios:
- Component initialization with members needing visibility
- Auto-refresh when new members join the meeting
- Manual refresh when members need visibility settings
---
 src/components/MembersList.vue | 87 +++++++++++++++++++++++++---------
 1 file changed, 65 insertions(+), 22 deletions(-)

diff --git a/src/components/MembersList.vue b/src/components/MembersList.vue
index f39676ed..e26613bf 100644
--- a/src/components/MembersList.vue
+++ b/src/components/MembersList.vue
@@ -66,16 +66,6 @@
           Refresh
           <span class="text-xs">({{ countdownTimer }}s)</span>
         </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="showSetBulkVisibilityDialog"
-        >
-          <font-awesome icon="eye" />
-          Set Visibility
-        </button>
       </div>
       <ul
         v-if="membersToShow().length > 0"
@@ -163,16 +153,6 @@
           Refresh
           <span class="text-xs">({{ countdownTimer }}s)</span>
         </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="showSetBulkVisibilityDialog"
-        >
-          <font-awesome icon="eye" />
-          Set Visibility
-        </button>
       </div>
 
       <p v-if="members.length === 0" class="text-gray-500 py-4">
@@ -272,6 +252,9 @@ export default class MembersList extends Vue {
   autoRefreshInterval: NodeJS.Timeout | null = null;
   lastRefreshTime = 0;
 
+  // Track previous visibility members to detect changes
+  previousVisibilityMembers: string[] = [];
+
   /**
    * Get the unnamed member constant
    */
@@ -296,12 +279,18 @@ export default class MembersList extends Vue {
 
     // Start auto-refresh
     this.startAutoRefresh();
+
+    // Check if we should show the visibility dialog on initial load
+    this.checkAndShowVisibilityDialog();
   }
 
   async refreshData() {
     // Force refresh both contacts and members
     await this.loadContacts();
     await this.fetchMembers();
+
+    // Check if we should show the visibility dialog after refresh
+    this.checkAndShowVisibilityDialog();
   }
 
   async fetchMembers() {
@@ -456,6 +445,55 @@ export default class MembersList extends Vue {
       }));
   }
 
+  /**
+   * Check if we should show the visibility dialog
+   * Returns true if there are members for visibility and either:
+   * - This is the first time (no previous members tracked), OR
+   * - New members have been added since last check (not removed)
+   */
+  shouldShowVisibilityDialog(): boolean {
+    const currentMembers = this.getMembersForVisibility();
+
+    if (currentMembers.length === 0) {
+      return false;
+    }
+
+    // If no previous members tracked, show dialog
+    if (this.previousVisibilityMembers.length === 0) {
+      return true;
+    }
+
+    // Check if new members have been added (not just any change)
+    const currentMemberIds = currentMembers.map((m) => m.did);
+    const previousMemberIds = this.previousVisibilityMembers;
+
+    // Find new members (members in current but not in previous)
+    const newMembers = currentMemberIds.filter(
+      (id) => !previousMemberIds.includes(id),
+    );
+
+    // Only show dialog if there are new members added
+    return newMembers.length > 0;
+  }
+
+  /**
+   * Update the tracking of previous visibility members
+   */
+  updatePreviousVisibilityMembers() {
+    const currentMembers = this.getMembersForVisibility();
+    this.previousVisibilityMembers = currentMembers.map((m) => m.did);
+  }
+
+  /**
+   * Show the visibility dialog if conditions are met
+   */
+  checkAndShowVisibilityDialog() {
+    if (this.shouldShowVisibilityDialog()) {
+      this.showSetBulkVisibilityDialog();
+    }
+    this.updatePreviousVisibilityMembers();
+  }
+
   checkWhetherContactBeforeAdmitting(decrMember: DecryptedMember) {
     const contact = this.getContactFor(decrMember.did);
     if (!decrMember.member.admitted && !contact) {
@@ -616,7 +654,7 @@ export default class MembersList extends Vue {
 
       if (timeSinceLastRefresh >= 10) {
         // Time to refresh
-        this.fetchMembers();
+        this.refreshData();
         this.lastRefreshTime = now;
         this.countdownTimer = 10;
       } else {
@@ -644,8 +682,13 @@ export default class MembersList extends Vue {
     }
 
     // Trigger immediate refresh and restart timer
-    this.fetchMembers();
+    this.refreshData();
     this.startAutoRefresh();
+
+    // Always show dialog on manual refresh if there are members for visibility
+    if (this.getMembersForVisibility().length > 0) {
+      this.showSetBulkVisibilityDialog();
+    }
   }
 
   // Set Visibility Dialog methods