feat(committees): add quick-filter chips on Members tab (#684)

* feat(committees): add quick-filter chips on Members tab

Add a row of clickable filter chips above the existing search/filter row
on the committee Members tab. Four chips ship in this PR:

- All (n) — default, shows all members
- Voting Reps (n) — filters to members with voting_status = "Voting Rep"
- Observers (n) — filters to members with voting_status = "Observer"
- Chairs (n) — filters to members with role.name in {Chair, Vice Chair}

Selecting a chip resets the dropdown filters (role / votingStatus /
organization) so the user starts from a known state; search and dropdowns
still compose on top of the chip selection.

The "At Risk" chip is intentionally deferred — it depends on attendance
data from LFXV2-1705. The All Voting Status dropdown is kept so users can
still reach the long-tail statuses (Alternate Voting Rep, Emeritus, None)
that don't have dedicated chips.

LFXV2-1717

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Signed-off-by: Manish Dixit <mdixit@linuxfoundation.org>

* fix(review): address PR #684 review feedback

Address review comments from @coderabbitai and @copilot-pull-request-reviewer:

- committee-members.component.html: add type="button" and
  [attr.aria-pressed] to each chip button so assistive tech can announce
  which filter is active and to defend against accidental form submit.
  Addresses both reviewers' a11y comment (toggle group needs aria-pressed).

- committee-members.component.ts: replace hardcoded 'Voting Rep',
  'Observer', 'Chair', 'Vice Chair' string literals in the chip counts
  and chipFilteredMembers computed with CommitteeMemberVotingStatus and
  CommitteeMemberRole enum references from @lfx-one/shared/enums. No
  runtime change — the enum values are these same strings — but the
  component will now break-build if the canonical enums drift, instead
  of silently mis-filtering. Per @copilot-pull-request-reviewer.

Resolves 3 review threads.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Signed-off-by: Manish Dixit <mdixit@linuxfoundation.org>

* fix(review): address PR #684 review feedback from @dealako

Address two observations from @dealako:

- packages/shared/src/interfaces/committee.interface.ts: introduce a
  CommitteeMemberFilterChip type alias ('all' | 'voting' | 'observers' |
  'chairs') and re-use it in three places where it was previously
  duplicated inline (memberFilterChip signal, chipFilteredMembers switch
  parameter, selectChip method parameter). Adding a new chip is now a
  one-line change. Per .claude/rules/component-organization.md §5 and
  @dealako's first observation.

- committee-members.component.{ts,html}: replace the four near-identical
  chip button blocks with an @for loop over a chipConfig() computed that
  carries { key, label, count } for each chip. Cuts the template roughly
  in half and eliminates copy-paste drift risk if a future styling
  change forgets one button. Per @dealako's second observation.

The "Chairs" label is intentionally kept short (covers both Chair and
Vice Chair) — chip labels favor brevity and the leadership intent is
clear from context. Responded to @dealako's design-question observation
on the PR.

Resolves @dealako's review.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Signed-off-by: Manish Dixit <mdixit@linuxfoundation.org>

* fix(review): address PR #684 CodeRabbit nitpick — wrap chip row

committee-members.component.html: add `flex-wrap` to the chip row
container so the chips wrap onto a second line on narrow viewports
instead of horizontally clipping. Pure presentational change; no
behavior difference at desktop widths.

Per @coderabbitai's quick-win nitpick.

Signed-off-by: Manish Dixit <mdixit@linuxfoundation.org>

* fix(review): address PR #684 review feedback from @MRashad26

Address three convention-compliance comments from @MRashad26 citing
.claude/rules/component-organization.md §3 and §5:

- packages/shared/src/interfaces/committee.interface.ts: collapse the
  3-line JSDoc on CommitteeMemberFilterChip into a single line so it
  matches the project's "no comments unless WHY is non-obvious"
  convention.

- packages/shared/src/interfaces/committee.interface.ts: extract the
  previously-inline `{ key, label, count }` chip shape into a named
  CommitteeMemberFilterChipConfig interface, per §5 (interfaces belong
  in @lfx-one/shared/interfaces, never inline in component files).

- committee-members.component.ts: move the five computed signals
  (votingRepCount, observerCount, chairCount, chipConfig,
  chipFilteredMembers) out of the "Simple writable signals" block.
  The three simple counts now live inline under "Computed signals"
  next to canManageMembers/isMembersVisible; chipConfig and
  chipFilteredMembers — both non-trivial (array literal / switch) —
  now use the private init function pattern (initChipConfig,
  initChipFilteredMembers) per §3, mirroring the existing
  initializeFilteredMembers() pattern in the same file.

No runtime behavior change — purely structural and typing cleanup so
the class layout matches the project's organization rules.

Resolves 3 review threads.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Signed-off-by: Manish Dixit <mdixit@linuxfoundation.org>

---------

Signed-off-by: Manish Dixit <mdixit@linuxfoundation.org>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: manishdixitlfx

apps/lfx-one/src/app/modules/committees/components/committee-members/committee-members.component.html

@@ -7,6 +7,21 @@
     @if (!isMembersVisible()) {
       <div class="text-sm text-gray-500 text-center py-6" data-testid="members-hidden-placeholder">Member list is not publicly visible for this group.</div>
     } @else {
+      <!-- Quick Filter Chips -->
+      <div class="flex flex-wrap items-center gap-2 mb-4" data-testid="members-filter-chips">
+        @for (chip of chipConfig(); track chip.key) {
+          <button
+            type="button"
+            class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors"
+            [attr.aria-pressed]="memberFilterChip() === chip.key"
+            [class]="memberFilterChip() === chip.key ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
+            (click)="selectChip(chip.key)"
+            [attr.data-testid]="'members-chip-' + chip.key">
+            {{ chip.label }} ({{ chip.count }})
+          </button>
+        }
+      </div>
+
       <!-- Search, Filter Controls, and Add Member -->
       <div class="flex flex-col md:flex-row md:items-center gap-3 md:gap-4 mb-6">
         <!-- Search Input -->

apps/lfx-one/src/app/modules/committees/components/committee-members/committee-members.component.ts

@@ -15,7 +15,16 @@ import { SelectComponent } from '@components/select/select.component';
 import { TableComponent } from '@components/table/table.component';
 import { TagComponent } from '@components/tag/tag.component';
 import { COMMITTEE_LABEL } from '@lfx-one/shared/constants';
-import { Committee, CommitteeMember, CommitteePermissionLevel, CommitteeUser, TagSeverity } from '@lfx-one/shared/interfaces';
+import { CommitteeMemberRole, CommitteeMemberVotingStatus } from '@lfx-one/shared/enums';
+import {
+  Committee,
+  CommitteeMember,
+  CommitteeMemberFilterChip,
+  CommitteeMemberFilterChipConfig,
+  CommitteePermissionLevel,
+  CommitteeUser,
+  TagSeverity,
+} from '@lfx-one/shared/interfaces';
 import { CommitteeService } from '@services/committee.service';
 import { ConfirmationService, MenuItem, MessageService } from 'primeng/api';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
@@ -65,6 +74,7 @@ export class CommitteeMembersComponent implements OnInit {
   // Simple writable signals
   public selectedMember = signal<CommitteeMember | null>(null);
   public isDeleting = signal<boolean>(false);
+  public memberFilterChip = signal<CommitteeMemberFilterChip>('all');
   public memberActionMenuItems: MenuItem[] = [];
   public committeeLabel = COMMITTEE_LABEL;
 
@@ -77,6 +87,19 @@ export class CommitteeMembersComponent implements OnInit {
     if (!committee) return false;
     return committee.member_visibility !== 'hidden' || this.canManageMembers();
   });
+  public readonly votingRepCount: Signal<number> = computed(
+    () => this.members().filter((m) => m.voting?.status === CommitteeMemberVotingStatus.VOTING_REP).length
+  );
+  public readonly observerCount: Signal<number> = computed(
+    () => this.members().filter((m) => m.voting?.status === CommitteeMemberVotingStatus.OBSERVER).length
+  );
+  public readonly chairCount: Signal<number> = computed(
+    () => this.members().filter((m) => m.role?.name === CommitteeMemberRole.CHAIR || m.role?.name === CommitteeMemberRole.VICE_CHAIR).length
+  );
+
+  // Complex computed signals — use private init functions
+  public readonly chipConfig: Signal<CommitteeMemberFilterChipConfig[]> = this.initChipConfig();
+  private readonly chipFilteredMembers: Signal<CommitteeMember[]> = this.initChipFilteredMembers();
 
   // Filter-related variables
   public filterForm: FormGroup;
@@ -136,6 +159,11 @@ export class CommitteeMembersComponent implements OnInit {
     return 'Member';
   }
 
+  public selectChip(chip: CommitteeMemberFilterChip): void {
+    this.memberFilterChip.set(chip);
+    this.filterForm.patchValue({ role: null, votingStatus: null, organization: null });
+  }
+
   public openAddMemberDialog(): void {
     const dialogRef = this.dialogService.open(AddMemberDialogComponent, {
       header: 'Add Member',
@@ -420,7 +448,7 @@ export class CommitteeMembersComponent implements OnInit {
 
   private initializeFilteredMembers(): Signal<CommitteeMember[]> {
     return computed(() => {
-      let filtered = this.members();
+      let filtered = this.chipFilteredMembers();
 
       // Apply search filter
       const searchTerm = this.searchTerm().toLowerCase();
@@ -456,4 +484,30 @@ export class CommitteeMembersComponent implements OnInit {
       return filtered;
     });
   }
+
+  private initChipConfig(): Signal<CommitteeMemberFilterChipConfig[]> {
+    return computed(() => [
+      { key: 'all', label: 'All', count: this.members().length },
+      { key: 'voting', label: 'Voting Reps', count: this.votingRepCount() },
+      { key: 'observers', label: 'Observers', count: this.observerCount() },
+      { key: 'chairs', label: 'Chairs', count: this.chairCount() },
+    ]);
+  }
+
+  private initChipFilteredMembers(): Signal<CommitteeMember[]> {
+    return computed(() => {
+      const chip = this.memberFilterChip();
+      const members = this.members();
+      switch (chip) {
+        case 'voting':
+          return members.filter((m) => m.voting?.status === CommitteeMemberVotingStatus.VOTING_REP);
+        case 'observers':
+          return members.filter((m) => m.voting?.status === CommitteeMemberVotingStatus.OBSERVER);
+        case 'chairs':
+          return members.filter((m) => m.role?.name === CommitteeMemberRole.CHAIR || m.role?.name === CommitteeMemberRole.VICE_CHAIR);
+        default:
+          return members;
+      }
+    });
+  }
 }

packages/shared/src/interfaces/committee.interface.ts

@@ -310,6 +310,16 @@ export interface CommitteeSettingsData {
 /** Status of an open vote */
 export type CommitteeVoteStatus = 'open' | 'closed' | 'cancelled';
 
+/** Quick-filter chip keys for the committee Members tab; `'all'` is the default. */
+export type CommitteeMemberFilterChip = 'all' | 'voting' | 'observers' | 'chairs';
+
+/** A single chip entry in the committee Members quick-filter row. */
+export interface CommitteeMemberFilterChipConfig {
+  key: CommitteeMemberFilterChip;
+  label: string;
+  count: number;
+}
+
 /**
  * An open or recent vote in a governing board or oversight committee.
  */