From 099eac594f74814f5ffb5e8de1abb85a19e32f9a Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Thu, 5 Mar 2026 20:10:58 -0700
Subject: [PATCH] make tweaks to meeting exclusions & do-not-pair for
 consistency & helpful info

---
 CHANGELOG.md                              |   2 +
 src/components/MeetingExclusionGroups.vue | 108 ++++++++++++++--------
 src/components/MeetingMembersList.vue     |   2 +-
 src/views/OnboardMeetingSetupView.vue     |  10 ++
 4 files changed, 82 insertions(+), 40 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6c222e42..e0e6c972 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 
 ## [1.3.7]
+### Added
+- Attendee exclusion and do-not-pair groups for meeting matching.
 ### Fixed
 - Contact deep-links clicked or pasted act consistenly
 
diff --git a/src/components/MeetingExclusionGroups.vue b/src/components/MeetingExclusionGroups.vue
index 7ffadd48..240aeef7 100644
--- a/src/components/MeetingExclusionGroups.vue
+++ b/src/components/MeetingExclusionGroups.vue
@@ -34,10 +34,14 @@
             />
           </div>
           <button
-            v-if="!disabled"
-            class="text-slate-400 hover:text-red-600 transition-colors ml-2 shrink-0"
+            :class="[
+              'transition-colors ml-2 shrink-0',
+              disabled
+                ? 'text-slate-300 cursor-not-allowed'
+                : 'text-slate-400 hover:text-red-600',
+            ]"
             title="Delete group"
-            @click="removeGroup(group.id)"
+            @click="disabled ? notifyLocked() : removeGroup(group.id)"
           >
             <font-awesome icon="trash-can" class="text-sm" />
           </button>
@@ -54,9 +58,12 @@
           >
             {{ getMemberName(did) }}
             <button
-              v-if="!disabled"
-              class="hover:opacity-70"
-              @click="removeMemberFromGroup(group.id, did)"
+              :class="
+                disabled ? 'opacity-40 cursor-not-allowed' : 'hover:opacity-70'
+              "
+              @click="
+                disabled ? notifyLocked() : removeMemberFromGroup(group.id, did)
+              "
             >
               <font-awesome icon="xmark" class="text-xs" />
             </button>
@@ -69,50 +76,57 @@
           </span>
         </div>
 
-        <template v-if="!disabled">
-          <div v-if="addingToGroupId === group.id" class="mt-2">
-            <div
-              class="flex flex-wrap gap-1.5 p-2 bg-white bg-opacity-60 rounded border border-gray-200"
-            >
-              <button
-                v-for="member in availableMembersForGroup(group)"
-                :key="member.did"
-                class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-white border border-gray-300 hover:bg-gray-100 transition-colors"
-                @click="addMemberToGroup(group.id, member.did)"
-              >
-                <font-awesome icon="plus" class="text-xs text-green-600" />
-                {{ member.name }}
-              </button>
-              <span
-                v-if="availableMembersForGroup(group).length === 0"
-                class="text-xs text-slate-400 italic"
-              >
-                All members already assigned
-              </span>
-            </div>
+        <div v-if="!disabled && addingToGroupId === group.id" class="mt-2">
+          <div
+            class="flex flex-wrap gap-1.5 p-2 bg-white bg-opacity-60 rounded border border-gray-200"
+          >
             <button
-              class="text-xs text-slate-500 mt-1"
-              @click="addingToGroupId = ''"
+              v-for="member in availableMembersForGroup(group)"
+              :key="member.did"
+              class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-white border border-gray-300 hover:bg-gray-100 transition-colors"
+              @click="addMemberToGroup(group.id, member.did)"
             >
-              Done
+              <font-awesome icon="plus" class="text-xs text-green-600" />
+              {{ member.name }}
             </button>
+            <span
+              v-if="availableMembersForGroup(group).length === 0"
+              class="text-xs text-slate-400 italic"
+            >
+              All members already assigned
+            </span>
           </div>
           <button
-            v-else
-            class="text-xs text-blue-600 hover:text-blue-800 transition-colors"
-            @click="addingToGroupId = group.id"
+            class="text-xs text-slate-500 mt-1"
+            @click="addingToGroupId = ''"
           >
-            <font-awesome icon="plus" class="text-xs" />
-            Add member
+            Done
           </button>
-        </template>
+        </div>
+        <button
+          v-else
+          :class="[
+            'text-xs transition-colors',
+            disabled
+              ? 'text-slate-400 cursor-not-allowed'
+              : 'text-blue-600 hover:text-blue-800',
+          ]"
+          @click="disabled ? notifyLocked() : (addingToGroupId = group.id)"
+        >
+          <font-awesome icon="plus" class="text-xs" />
+          Add member
+        </button>
       </div>
     </div>
 
     <button
-      v-if="!disabled"
-      class="text-sm text-blue-600 hover:text-blue-800 transition-colors"
-      @click="addGroup"
+      :class="[
+        'text-sm transition-colors',
+        disabled
+          ? 'text-slate-400 cursor-not-allowed'
+          : 'text-blue-600 hover:text-blue-800',
+      ]"
+      @click="disabled ? notifyLocked() : addGroup()"
     >
       <font-awesome icon="plus" class="text-sm" />
       New Group
@@ -123,6 +137,8 @@
 <script lang="ts">
 import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
 import { DoNotPairGroup } from "@/interfaces";
+import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
+import { NotificationIface } from "@/constants/app";
 
 interface MemberInfo {
   did: string;
@@ -170,12 +186,26 @@ const GROUP_COLORS = [
 
 @Component
 export default class MeetingExclusionGroups extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+  notify!: ReturnType<typeof createNotifyHelpers>;
+
   @Prop({ required: true }) groups!: DoNotPairGroup[];
   @Prop({ required: true }) availableMembers!: MemberInfo[];
   @Prop({ default: false }) disabled!: boolean;
 
   addingToGroupId = "";
 
+  created() {
+    this.notify = createNotifyHelpers(this.$notify);
+  }
+
+  notifyLocked(): void {
+    this.notify.warning(
+      "Erase the current matches before changing exclusion groups.",
+      TIMEOUTS.LONG,
+    );
+  }
+
   colorSet(colorIndex: number): (typeof GROUP_COLORS)[0] {
     return GROUP_COLORS[colorIndex % GROUP_COLORS.length];
   }
diff --git a/src/components/MeetingMembersList.vue b/src/components/MeetingMembersList.vue
index 7fff0fec..1f6462d5 100644
--- a/src/components/MeetingMembersList.vue
+++ b/src/components/MeetingMembersList.vue
@@ -42,7 +42,7 @@
             "
           >
             Click
-            <font-awesome icon="ban" class="text-amber-500 text-sm" />
+            <font-awesome icon="ban" class="text-slate-500 text-sm" />
             to exclude someone from matching.
           </li>
           <li
diff --git a/src/views/OnboardMeetingSetupView.vue b/src/views/OnboardMeetingSetupView.vue
index 88f7cda3..1d7c91b3 100644
--- a/src/views/OnboardMeetingSetupView.vue
+++ b/src/views/OnboardMeetingSetupView.vue
@@ -525,6 +525,16 @@
           {{ previousMatchedPairs.length }} previous pair(s) will be avoided.
         </div>
 
+        <div
+          v-if="includedMembers.length % 2 !== 0"
+          class="mb-4 p-2 rounded border border-amber-300 bg-amber-50 text-xs text-amber-800"
+        >
+          <font-awesome icon="triangle-exclamation" class="mr-1" />
+          Odd number of participants ({{ includedMembers.length }}). Matching
+          requires an even number — exclude one more person or add another
+          member.
+        </div>
+
         <div class="flex justify-between space-x-4 pt-2">
           <button
             class="px-4 py-2 bg-slate-500 text-white rounded hover:bg-slate-700"