From b84546686a34320418755b3f8f6587998b757133 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <jose.anomalist.design@gmail.com>
Date: Mon, 13 Oct 2025 21:38:12 +0800
Subject: [PATCH] WIP: button and icon additions

- Mirrored "Refresh" and "Visibility" buttons on top and bottom of member list
- Added back info icons for list actions
- When clicked, Person icon shows informative notification
---
 src/App.vue                    | 58 +++++++++++++++-------
 src/components/MembersList.vue | 90 +++++++++++++++++++++-------------
 2 files changed, 95 insertions(+), 53 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 84d2b203..c4638fe0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -389,46 +389,56 @@
                       <!-- 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
+                          <div class="flex items-center justify-between gap-2">
+                            <label class="flex items-center gap-2">
+                              <input type="checkbox" checked />
+                              John Doe
+                            </label>
 
                             <!-- Friend indicator -->
                             <font-awesome
                               icon="user-circle"
-                              class="fa-fw ms-auto text-slate-400"
+                              class="fa-fw ms-auto text-slate-400 cursor-pointer hover:text-slate-600"
+                              @click="showContactInfo"
                             />
-                          </label>
+                          </div>
                         </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
+                          <div class="flex items-center justify-between gap-2">
+                            <label class="flex items-center gap-2">
+                              <input type="checkbox" checked />
+                              Jane Smith
+                            </label>
 
                             <!-- Friend indicator -->
                             <font-awesome
                               icon="user-circle"
-                              class="fa-fw ms-auto text-slate-400"
+                              class="fa-fw ms-auto text-slate-400 cursor-pointer hover:text-slate-600"
+                              @click="showContactInfo"
                             />
-                          </label>
+                          </div>
                         </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>
+                          <div class="flex items-center justify-between gap-2">
+                            <label class="flex items-center gap-2">
+                              <input type="checkbox" checked />
+                              Jim Beam
+                            </label>
+                          </div>
                         </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>
+                          <div class="flex items-center justify-between gap-2">
+                            <label class="flex items-center gap-2">
+                              <input type="checkbox" checked />
+                              Susie Q
+                            </label>
+                          </div>
                         </td>
                       </tr>
                     </tbody>
@@ -482,6 +492,18 @@ export default class App extends Vue {
 
   stopAsking = false;
 
+  showContactInfo() {
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        title: "Contact Info",
+        text: "This user is already your contact, but your activities are not visible to them yet.",
+      },
+      5000,
+    );
+  }
+
   async turnOffNotifications(
     notification: NotificationIface,
   ): Promise<boolean> {
diff --git a/src/components/MembersList.vue b/src/components/MembersList.vue
index 53970408..65da0c0c 100644
--- a/src/components/MembersList.vue
+++ b/src/components/MembersList.vue
@@ -84,45 +84,62 @@
           :key="member.member.memberId"
           class="border-b border-slate-300 py-1.5"
         >
-          <div class="flex items-center justify-between">
-            <div class="flex items-center overflow-hidden">
+          <div class="flex items-center gap-2 justify-between">
+            <div class="flex items-center gap-1 overflow-hidden">
               <h3 class="font-semibold truncate">
                 {{ member.name || unnamedMember }}
               </h3>
               <div
                 v-if="!getContactFor(member.did) && member.did !== activeDid"
-                class="flex justify-end"
+                class="flex items-center gap-1"
               >
                 <button
                   class="btn-add-contact"
                   title="Add as contact"
                   @click="addAsContact(member)"
                 >
-                  <font-awesome icon="circle-user" class="text-sm" />
+                  <font-awesome icon="circle-user" />
                 </button>
-              </div>
-            </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'
+                  class="btn-info-contact"
+                  title="Contact Info"
+                  @click="
+                    informAboutAddingContact(
+                      getContactFor(member.did) !== undefined,
+                    )
                   "
-                  @click="checkWhetherContactBeforeAdmitting(member)"
                 >
-                  <font-awesome
-                    :icon="member.member.admitted ? 'minus' : 'plus'"
-                    class="text-sm"
-                  />
+                  <font-awesome icon="circle-info" class="text-sm" />
                 </button>
-              </span>
+              </div>
             </div>
+            <span
+              v-if="
+                showOrganizerTools && isOrganizer && member.did !== activeDid
+              "
+              class="flex items-center gap-1"
+            >
+              <button
+                class="btn-admission"
+                :title="
+                  member.member.admitted ? 'Remove member' : 'Admit member'
+                "
+                @click="checkWhetherContactBeforeAdmitting(member)"
+              >
+                <font-awesome
+                  :icon="member.member.admitted ? 'minus' : 'plus'"
+                />
+              </button>
+
+              <button
+                class="btn-info-admission"
+                title="Admission Info"
+                @click="informAboutAdmission()"
+              >
+                <font-awesome icon="circle-info" class="text-sm" />
+              </button>
+            </span>
           </div>
           <p class="text-xs text-gray-600 truncate">
             {{ member.did }}
@@ -143,6 +160,15 @@
           <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>
 
       <p v-if="members.length === 0" class="text-gray-500 py-4">
@@ -338,7 +364,7 @@ export default class MembersList extends Vue {
 
   informAboutAdmission() {
     this.notify.info(
-      "This is to register people in Time Safari and to admit them to the meeting. A '+' symbol means they are not yet admitted and you can register and admit them. A '-' means you can remove them, but they will stay registered.",
+      "This is to register people in Time Safari and to admit them to the meeting. A (+) symbol means they are not yet admitted and you can register and admit them. A (-) symbol means you can remove them, but they will stay registered.",
       TIMEOUTS.VERY_LONG,
     );
   }
@@ -531,29 +557,23 @@ export default class MembersList extends Vue {
 
 .btn-add-contact {
   /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply ml-2 w-5 h-5 flex items-center justify-center rounded-full 
+  @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 
     transition-colors;
 }
 
-.btn-info-contact {
+.btn-info-contact,
+.btn-info-admission {
   /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply ml-2 mb-2 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 
+  @apply w-6 h-6 flex items-center justify-center rounded-full 
+    bg-slate-100 text-slate-400 hover:text-slate-600 
     transition-colors;
 }
 
 .btn-admission {
-  /* stylelint-disable-next-line at-rule-no-unknown */
-  @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 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 
+    bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 
     transition-colors;
 }
 </style>