Implement Volunteer Table Sort Modal

[a1-su]

Implements the sort modal for the volunteer table, related to this issue. This is currently a draft PR as it depends on and refactors the filter modal PR.

Screenshots

Description / Notes

• I've also added the count beside the filter and sort buttons showing how many filters and sorts there are, according to the Figma
• Note that multi-column sorting is already supported by Tanstack Table; simply click on a column to add a sort, and shift + click on another column to keep the current sort(s) while adding another sort at the same time
  • This is still available with this PR, the sort modal just provides a more user-friendly UI for this functionality
• We don't need to debounce the sorting because no API calls are being made
• It also supports sorting by single-tag and multi-tag cells

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
trcc	Ignored		Mar 26, 2026 0:46am

[Copilot]

Pull request overview

Implements a “Sort” modal UI for the Volunteers table (TanStack Table sorting), refactors the filter column-picking UI into a shared ColumnSelector, and updates the volunteers table controls styling/count badges to match the intended design.

Changes:

• Add SortModal (multi-column sort UI) and wire it into VolunteersTable + FilterBar.
• Introduce reusable ColumnSelector and refactor FilterModal to use it.
• Update theme variables and volunteers controls styling; add tag color tokens; debounce global search input.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/styles/variables.css	Switches to Tailwind v4 @theme tokens and adds tag palette variables.
src/components/volunteers/volunteerColumns.tsx	Exports column config and sets sortDescFirst: false for columns.
src/components/volunteers/utils.ts	Adjusts tag color mapping rules.
src/components/volunteers/VolunteersTable.tsx	Wires in sort modal, debounces global filter, updates control styles/counts, and tweaks filter option extraction/loading behavior.
src/components/volunteers/SortModal.tsx	New sort modal UI for managing multi-column sorting.
src/components/volunteers/FilterModal.tsx	Refactors column selection to use shared ColumnSelector; styling tweaks.
src/components/volunteers/FilterBar.tsx	Displays active sorts and provides access to sort modal from the bar.
src/components/volunteers/ColumnSelector.tsx	New shared searchable column picker used by filter/sort modals.

Comments suppressed due to low confidence (2)

src/styles/variables.css:6

• variables.css no longer defines legacy tokens like --color-primary-purple, --color-secondary-purple, --color-accent-purple, etc., but there are still CSS modules referencing them (e.g. src/app/admin-settings/account-info/page.module.css). This will resolve those var(...) usages to empty and break styling; either reintroduce these variables (mapping them to the new palette) or update remaining consumers to use the new token names/classes.

@theme {
  /* Purple Palette */
  --color-purple-900: #311d38;
  --color-purple-800: #492a55;
  --color-purple-700: #663d75;
  --color-purple-600: #78468c;

src/components/volunteers/VolunteersTable.tsx:155

• Building filter option sets uses else if (value) which skips valid falsy values (notably opt_in_communication === false). As a result, the "No" option will never appear in the filter modal. Use a null/undefined check instead, and keep the boolean special-case so both Yes/No are included.

            value.forEach((v) => {
              if (v) options[col.id]?.add(v);
            });
          } else if (value) {
            if (col.id === "opt_in_communication") {
              options[col.id]?.add(value ? "Yes" : "No");
            } else {
              options[col.id]?.add(String(value));
            }
          }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (2)

src/components/volunteers/VolunteersTable.tsx:155

• filterOptions building skips falsy scalar values because it checks else if (value). This prevents options like opt_in_communication = false ("No") from ever being added, so users can’t filter by that value. Use a null/undefined check instead (e.g., value != null) and keep the boolean mapping logic intact.

          } else if (value) {
            if (col.id === "opt_in_communication") {
              options[col.id]?.add(value ? "Yes" : "No");
            } else {
              options[col.id]?.add(String(value));
            }
          }

src/components/volunteers/volunteerColumns.tsx:103

• COLUMNS_CONFIG no longer includes the position field. This removes the Position column from the table and also removes it from FILTERABLE_COLUMNS, so users can no longer filter/sort by position even though the backend/API still supports the position field. If Position is still intended to be part of the volunteers table UX, it should be restored in the config (including its tag rendering and options filter).

  {
    id: "phone",
    label: "Phone",
    icon: Phone,
    filterType: "text",
    size: 140,
  },
  {
    id: "cohorts",
    label: "Cohort",
    icon: List,
    filterType: "options",
    isMulti: true,
    size: 150,
    cell: renderMultiTags,
  },
  {

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.