WIP: mockup for set visibility dialog

src/App.vue

@@ -352,6 +352,109 @@
               </div>
             </div>
           </div>
+
+          <div
+            v-if="notification.type === 'set-visibility-to-meeting-members'"
+            class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
+          >
+            <div
+              class="flex w-11/12 max-w-lg mx-auto my-4 overflow-y-scroll bg-white rounded-lg shadow-lg"
+            >
+              <div class="w-full px-6 py-6 text-slate-900 text-center">
+                <h3 class="text-lg font-semibold leading-[1.25] mb-2">
+                  Set Visibility to Meeting Members
+                </h3>
+                <p class="text-sm mb-4">
+                  Would you like to <b>make your activities visible</b> to the
+                  following members? (This will also add them as contacts if
+                  they aren't already.)
+                </p>
+
+                <!-- Custom table area - you can customize this -->
+                <div class="mb-4">
+                  <table
+                    class="w-full border-collapse border border-slate-300 text-sm text-start"
+                  >
+                    <thead>
+                      <tr class="bg-slate-100 font-medium">
+                        <th class="border border-slate-300 px-3 py-2">
+                          <label class="flex items-center gap-2">
+                            <input type="checkbox" checked />
+                            Select All
+                          </label>
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <!-- Sample data - replace with your actual data -->
+                      <tr>
+                        <td class="border border-slate-300 px-3 py-2">
+                          <label class="flex items-center gap-2">
+                            <input type="checkbox" checked />
+                            John Doe
+
+                            <!-- Friend indicator -->
+                            <font-awesome
+                              icon="user-circle"
+                              class="fa-fw ms-auto text-slate-400"
+                            />
+                          </label>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="border border-slate-300 px-3 py-2">
+                          <label class="flex items-center gap-2">
+                            <input type="checkbox" checked />
+                            Jane Smith
+
+                            <!-- Friend indicator -->
+                            <font-awesome
+                              icon="user-circle"
+                              class="fa-fw ms-auto text-slate-400"
+                            />
+                          </label>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="border border-slate-300 px-3 py-2">
+                          <label class="flex items-center gap-2">
+                            <input type="checkbox" checked />
+                            Jim Beam
+                          </label>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="border border-slate-300 px-3 py-2">
+                          <label class="flex items-center gap-2">
+                            <input type="checkbox" checked />
+                            Susie Q
+                          </label>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+
+                <div class="space-y-2">
+                  <button
+                    class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md"
+                    @click="
+                      notification.onYes ? notification.onYes() : null;
+                      close(notification.id);
+                    "
+                  >
+                    Set Visibility
+                  </button>
+                  <button
+                    class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
+                    @click="close(notification.id)"
+                  >
+                    Maybe Later
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </Notification>
     </div>

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 Members
+        Meeting Member<a href="#" @click="showAddMembersNotification">s</a>
       </h1>
 
       <!-- Spacer (no Back button) -->
@@ -77,6 +77,7 @@ import {
 } from "../libs/endorserServer";
 import { generateSaveAndActivateIdentity } from "../libs/util";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
+import { NotificationIface } from "../constants/app";
 
 @Component({
   components: {
@@ -97,6 +98,7 @@ export default class OnboardMeetingMembersView extends Vue {
   projectLink = "";
   $route!: RouteLocationNormalizedLoaded;
   $router!: Router;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   userNameDialog!: InstanceType<typeof UserNameDialog>;
 
@@ -257,5 +259,19 @@ 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>