[FEATURE] Member overview - filter redesign #548

New issue

Open

opened 2026-06-30 16:06:14 +02:00 by simon · 0 comments

simon commented

2026-06-30 16:06:14 +02:00

Owner

Description

Replaces the current vertical filter panel — which grows without bound (one row per group, fee type, boolean field, date field; already ~1200px tall on the dev seed) — with a compact, scalable Add-Filter-Builder (Polaris/Linear style). Panel height then scales with the number of active filters (a few chips), not the catalog of available fields.

Scope — in

Inline filter row + Add-Filter-Builder

A compact filter row: "+ Add filter" (chip/badge style) · applied-filter chips · "Clear all".
Add-filter flow (Polaris-style): click "+ Add filter" → searchable, grouped field picker (Groups / Fee types / Custom fields / Flags / Quick) → pick a field → picker closes, the filter is placed inline and focus jumps into its type-aware value control; a valid selection commits, dismissing with no selection drops the pending filter (no detail "Add" button).
Type-aware operators/inputs: boolean → toggle/checkbox; single-select → radio; multi-select → checkboxes/listbox; date → presets + range; group/fee → is / is-not.
Applied-filter chips: human-readable ("Group is Vorstand"), removable via keyboard, ≥24px targets; Clear all.

Parity with current filters (results must match today)

Payment status (all/paid/unpaid, tied to cycle view); group (in/not_in, multiple = AND); fee type (in = OR, not_in = AND); boolean custom fields (AND); dates (join range; exit-date modes active/all/inactive/custom; custom date-field ranges).
Active/former quick filter — folds in #328 (maps onto exit-date modes).

Toolbar integration (per mockups)

Payment-cycle Current/Last toggle in row 1 (money symbol + tooltip).
Result count doubles as selection/scope indicator ("250 members" / "3 selected"); Actions contextual at the end of the filter row.

State & a11y

All filter state URL-encoded (bookmarkable); state built serializable so favorite/pinned quick filters and saved views (#512-views) dock on later.
WCAG 2.2 AA: Disclosure (panel/popover, 1.4.13), Combobox (type-ahead value), Listbox/checkboxes (multi-select), focus management (open/close/Escape, return focus), result-count live region.

Scope — out (later)

Saved views → #549.
Pinned/favorite quick filters — architecture-prepared here, configured later (varies per club; not hard-coded).

Acceptance criteria

The resting filter UI height scales with active filters, not available fields — adding many groups/custom fields does not grow it.
Every current filter capability is reachable via the builder with parity results (payment status; group in/not_in AND; fee type in OR / not_in AND; boolean AND; date ranges; exit-date modes).
Add-filter flow: pick field → picker closes → value control opens & is focused → selection commits, dismissal drops the pending filter (no detail "Add" button).
Active/former quick filter works (#328).
Applied filters render as chips, removable via keyboard; Clear all works; filter state is in the URL (bookmarkable/shareable).
Payment-cycle Current/Last toggle present (money symbol, tooltip); count shows result/selection scope; Actions is contextual.
Filter state is serializable (ready for saved views / favorites).
WCAG 2.2 AA (combobox/listbox/disclosure roles, keyboard, focus management, live region); CI green.

Dependencies

Depends on #547 (DB-side filters + streams).
Architecture-prepares #550.

References

Analysis doc issue-512-member-overview-redesign.md — §6.1 (filtering UX), §7 (chosen direction), §9 (decisions).
Mockup: mockups/mockup-3-addfilter.png.
Folds in #328. Parent: #512.

## Description Replaces the current vertical filter panel — which **grows without bound** (one row per group, fee type, boolean field, date field; already ~1200px tall on the dev seed) — with a compact, scalable **Add-Filter-Builder** (Polaris/Linear style). Panel height then scales with the number of **active** filters (a few chips), not the catalog of **available** fields. ## Scope — in **Inline filter row + Add-Filter-Builder** - A compact filter row: **"+ Add filter"** (chip/badge style) · applied-filter **chips** · "Clear all". - **Add-filter flow (Polaris-style):** click "+ Add filter" → **searchable, grouped field picker** (Groups / Fee types / Custom fields / Flags / Quick) → pick a field → **picker closes**, the filter is placed **inline** and **focus jumps into its type-aware value control**; a valid selection **commits**, dismissing with no selection **drops** the pending filter (no detail "Add" button). - **Type-aware operators/inputs:** boolean → toggle/checkbox; single-select → radio; multi-select → checkboxes/listbox; date → presets + range; group/fee → is / is-not. - **Applied-filter chips:** human-readable ("Group is Vorstand"), removable via keyboard, ≥24px targets; **Clear all**. **Parity with current filters** (results must match today) - Payment status (all/paid/unpaid, tied to cycle view); group (in/not_in, multiple = AND); fee type (in = OR, not_in = AND); boolean custom fields (AND); dates (join range; exit-date modes active/all/inactive/custom; custom date-field ranges). - **Active/former** quick filter — folds in **#328** (maps onto exit-date modes). **Toolbar integration** (per mockups) - Payment-cycle **Current/Last** toggle in row 1 (money symbol + tooltip). - **Result count** doubles as selection/scope indicator ("250 members" / "3 selected"); **Actions** contextual at the end of the filter row. **State & a11y** - All filter state **URL-encoded** (bookmarkable); state built **serializable** so favorite/pinned quick filters and saved views (#512-views) dock on later. - WCAG 2.2 AA: Disclosure (panel/popover, 1.4.13), Combobox (type-ahead value), Listbox/checkboxes (multi-select), focus management (open/close/Escape, return focus), result-count live region. ## Scope — out (later) - **Saved views** → #549. - **Pinned/favorite quick filters** — architecture-prepared here, configured later (varies per club; not hard-coded). ## Acceptance criteria - [ ] The resting filter UI height scales with **active** filters, not available fields — adding many groups/custom fields does **not** grow it. - [ ] Every current filter capability is reachable via the builder with **parity results** (payment status; group in/not_in AND; fee type in OR / not_in AND; boolean AND; date ranges; exit-date modes). - [ ] **Add-filter flow:** pick field → picker closes → value control opens & is **focused** → selection commits, dismissal drops the pending filter (no detail "Add" button). - [ ] **Active/former** quick filter works (#328). - [ ] Applied filters render as **chips**, removable via keyboard; **Clear all** works; filter state is in the **URL** (bookmarkable/shareable). - [ ] Payment-cycle Current/Last toggle present (money symbol, tooltip); count shows result/selection scope; Actions is contextual. - [ ] Filter state is **serializable** (ready for saved views / favorites). - [ ] WCAG 2.2 AA (combobox/listbox/disclosure roles, keyboard, focus management, live region); CI green. ## Dependencies - **Depends on #547** (DB-side filters + streams). - **Architecture-prepares #550.** ## References - Analysis doc `issue-512-member-overview-redesign.md` — §6.1 (filtering UX), §7 (chosen direction), §9 (decisions). - Mockup: `mockups/mockup-3-addfilter.png`. - Folds in #328. Parent: #512.