charles/claude-hooks
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat(board): multiselect combobox with text filtering for milestone + label filters #583

New issue
Closed
opened 2026-04-30 18:58:09 +00:00 by claude-desktop · 0 comments
claude-desktop commented 2026-04-30 18:58:09 +00:00
Collaborator
Copy link

User story

As an operator, I want the Board's Milestone and Label filters to be multiselect comboboxes — typeahead-filterable, picking values from the union of what's actually on the loaded cards — so I can stack area:dashboard + area:sessions or filter to two milestones at once without typing substrings and hoping.

Acceptance criteria

Component

  • New <MultiselectCombobox> primitive in apps/web/src/components/multiselect-combobox.tsx. Built on Base UI's <Combobox> if available, otherwise a custom popover + listbox.
  • Trigger: rounded-compact border border-border chip showing selected count (e.g. +2) or the single value when only one is picked, or the placeholder when empty.
  • Popover: search input pinned at top, listbox below, each row a checkbox + label + (optional) trailing meta (e.g. count). Keyboard navigation: ↑/↓, Enter toggles, Esc closes, ⌘A selects all visible matches.
  • A11y: role="combobox" on the trigger, aria-expanded, aria-controls; the listbox has role="listbox" and rows are role="option" with aria-selected.
  • Reduced-motion: no popover slide animation when prefers-reduced-motion is set.

Board wiring

  • Replace the <TextFilter> for Milestone and Label in apps/web/src/components/board/board-filters.tsx with the new combobox.
  • Available values are derived client-side from BoardResponse.columns.flatMap(c => c.cards):
    • Milestones: Set(cards.map(c => c.milestone).filter(Boolean)), sorted alphabetically.
    • Labels: Set(cards.flatMap(c => c.labels)), sorted alphabetically; excluded prefixes: stage: (covered by group=stage), type:user-story (always present, noise).
  • Each row shows a count: number of cards in the current projection that carry that label / milestone.
  • Empty state when zero cards loaded: the combobox stays disabled with placeholder No cards loaded.

Filter semantics

  • Selecting multiple values is OR within a facet (a card matches if it has any selected label) and AND across facets (matches must satisfy both milestone and label sets).
  • An empty selection means "no filter on this facet" (current behaviour preserved).
  • The substring matcher behaviour disappears — exact-match-from-list only, since the combobox already provides typeahead.

URL

  • Search params switch to repeatable arrays: ?label=area:dashboard&label=area:sessions&milestone=v0.2.0.
  • Backwards-compat: a single legacy ?milestone=foo / ?label=bar value (substring) is decoded as an exact-match selection if foo / bar appears verbatim in the derived facet list. Otherwise dropped silently.
  • validateSearch in apps/web/src/routes/planner.board.tsx updated to decode string | string[] into a normalised string[].

Filter card chrome

  • When at least one combobox has a selection, the chip background flips to bg-accent/10 and a small × clears the facet without opening the popover.
  • The "Stalled (N)" count next to the toggles continues to reflect the filtered projection.

Out of scope

  • Remote search across labels not present on currently-loaded cards (would need a new /board/facets endpoint; defer until the loaded-only set feels insufficient).
  • Persisting selection across reloads beyond the URL (URL is already the source of truth).
  • Saved filter presets (separate ticket if appetite emerges).

References

  • Source: apps/web/src/components/board/board-filters.tsx, apps/web/src/routes/planner.board.tsx.
  • Audit context: § Board-specific in PR #579 spec — filter card collapse / multiselect were both flagged.
  • Adjacent prior art: apps/web/src/components/agents/match-labels-input.tsx for a similar add/remove chip pattern, if useful as a reference.
## User story As an operator, I want the Board's `Milestone` and `Label` filters to be multiselect comboboxes — typeahead-filterable, picking values from the union of what's actually on the loaded cards — so I can stack `area:dashboard + area:sessions` or filter to two milestones at once without typing substrings and hoping. ## Acceptance criteria ### Component - [ ] New `<MultiselectCombobox>` primitive in `apps/web/src/components/multiselect-combobox.tsx`. Built on Base UI's `<Combobox>` if available, otherwise a custom popover + listbox. - [ ] Trigger: `rounded-compact border border-border` chip showing selected count (e.g. `+2`) or the single value when only one is picked, or the placeholder when empty. - [ ] Popover: search input pinned at top, listbox below, each row a checkbox + label + (optional) trailing meta (e.g. count). Keyboard navigation: ↑/↓, Enter toggles, Esc closes, ⌘A selects all visible matches. - [ ] A11y: `role="combobox"` on the trigger, `aria-expanded`, `aria-controls`; the listbox has `role="listbox"` and rows are `role="option"` with `aria-selected`. - [ ] Reduced-motion: no popover slide animation when `prefers-reduced-motion` is set. ### Board wiring - [ ] Replace the `<TextFilter>` for Milestone and Label in `apps/web/src/components/board/board-filters.tsx` with the new combobox. - [ ] Available values are derived client-side from `BoardResponse.columns.flatMap(c => c.cards)`: - Milestones: `Set(cards.map(c => c.milestone).filter(Boolean))`, sorted alphabetically. - Labels: `Set(cards.flatMap(c => c.labels))`, sorted alphabetically; **excluded prefixes:** `stage:` (covered by group=stage), `type:user-story` (always present, noise). - [ ] Each row shows a count: number of cards in the current projection that carry that label / milestone. - [ ] Empty state when zero cards loaded: the combobox stays disabled with placeholder `No cards loaded`. ### Filter semantics - [ ] Selecting multiple values is **OR** within a facet (a card matches if it has any selected label) and **AND** across facets (matches must satisfy both milestone and label sets). - [ ] An empty selection means "no filter on this facet" (current behaviour preserved). - [ ] The substring matcher behaviour disappears — exact-match-from-list only, since the combobox already provides typeahead. ### URL - [ ] Search params switch to repeatable arrays: `?label=area:dashboard&label=area:sessions&milestone=v0.2.0`. - [ ] Backwards-compat: a single legacy `?milestone=foo` / `?label=bar` value (substring) is decoded as an exact-match selection if `foo` / `bar` appears verbatim in the derived facet list. Otherwise dropped silently. - [ ] `validateSearch` in `apps/web/src/routes/planner.board.tsx` updated to decode `string | string[]` into a normalised `string[]`. ### Filter card chrome - [ ] When at least one combobox has a selection, the chip background flips to `bg-accent/10` and a small `×` clears the facet without opening the popover. - [ ] The "Stalled (N)" count next to the toggles continues to reflect the filtered projection. ## Out of scope - Remote search across labels not present on currently-loaded cards (would need a new `/board/facets` endpoint; defer until the loaded-only set feels insufficient). - Persisting selection across reloads beyond the URL (URL is already the source of truth). - Saved filter presets (separate ticket if appetite emerges). ## References - Source: `apps/web/src/components/board/board-filters.tsx`, `apps/web/src/routes/planner.board.tsx`. - Audit context: § Board-specific in PR #579 spec — filter card collapse / multiselect were both flagged. - Adjacent prior art: `apps/web/src/components/agents/match-labels-input.tsx` for a similar add/remove chip pattern, if useful as a reference.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
chore/sync-pre-push-from-forge-base
fix/flows-yaml-dispatch-identity
feat/board-tap-to-assign
dev/1107
code-lead/1106
code-lead/1108
dev/1104
code-lead/1103
code-lead/1080
dev/1087
feat/flows-yaml-ci-events
chore/board-drop-stalled-and-density-controls
fix/flows-yaml-routes-always-register
flows-yaml/api-defaults
dev/1023
fix/event-log-history-bleed
fix/janitor-fix-ci-logs-and-cap
dev/1022
fix/board-card-provider
code-lead/1036
dev/1025
code-lead/1020
dev/1017
code-lead/1026
feat/web-shortcut-registry-1018
dev/1015
code-lead/1009
code-lead/1008
dev/975
dev/969
dev/973
dev/967
code-lead/968
code-lead/953
dev/970
dev/976
code-lead/966
code-lead/956
code-lead/951
dev/962
dev/963
dev/977
dev/955
dev/983
dev/961
dev/974
code-lead/950
code-lead/939
dev/941
dev/940
dev/937
dev/938
dev/936
dev/935
feat/web-i18n-fr-locale
feat/spec-editor-ui-polish
chore/drop-legacy-compat
fix/skills-drop-preview-pane
fix/882-skills-safety-rail
dev/911
dev/909
dev/923
dev/917
dev/915
feat/879-sr11-m2-drop-legacy-skill
code-lead/873
dev/881
code-lead/869
dev/867
code-lead/845
code-lead/843
code-lead/844
dev/837
dev/861
dev/849
code-lead/837
code-lead/842
fix/dedup-rebase-inflight
dev/838
code-lead/847
dev/833
code-lead/848
pr/838
code-lead/841
feat/settings-save-bar/836
code-lead/840
dev/846
code-lead/839
dev/832
fix/board-sse-stale-cache
dev/834
dev/835
feat/settings-breadcrumbs
feat/forge-oauth-credentials
refactor/service-config-consolidation
feat/agent-tokens-to-secrets
feat/gitlab-oauth-to-db
feat/authelia-rip-and-voice-fixes
fix/rebase-storm-and-dead-letter
code-lead/797
code-lead/796
dev/811
code-lead/798
dev/810
code-lead/795
dev/808
code-lead/794
dev/805
dev/802
dev/803
feat/avatar-menu-settings-entry
feat/per-agent-token-tracking
dev/793
dev/747
dev/752
code-lead/790
code-lead/759
dev/756
dev/760
dev/741
dev/767
dev/740
dev/709
dev/644
dev/637
boss/614
dev/600
dev/611
dev/585
fix/login-bonus-fixes
boss/544
dev/542
refactor/api-prefix-and-session-gate
dev/489
boss/531
boss/518
dev/499
boss/516
dev/530
dev/517
dev/519
dev/515
dev/522
dev/503
dev/471
boss/329
dev/417
dev/418
dev/402
boss/327
dev/334
dev/332
boss/326
boss/325
dev/331
boss/324
boss/323
boss/322
dev/294
test/s11-task-analytics
dev/262
boss/270
dev/268
foreman/ui-consolidation-spec
dev/234
boss/196
boss/176
boss/164
fix/124-session-persist-bind
boss/52
dev/87
boss/73
dev/77
dev/81
dev/82
boss/79
dev/42
dev/35
boss/7
No results found.
Labels
Clear labels   
area:agents
Agent types, pool scheduling, per-instance config

  
area:dashboard
Dashboard UI and observability surfaces

  
area:database
DB layer — schema, migrations, ORM, raw SQL

  
area:design
UI/UX mockup work — routes to designer agent

  
area:design-review
Design review dispatch — routes to design-reviewer agent

  
area:flows
Flow runner — YAML loader, executor, op registry, expression eval

  
area:infra
Deployment, isolation, containers, systemd units

  
area:meta
Tracking, scaffolding, project setup

  
area:security
Security — routes to reviewer-security (opus)

  
area:sessions
Session-id store, Claude SDK resume logic

  
area:webhook
Forgejo webhook routing and handlers

  
area:workdir
Clone cache, worktrees, git identity

  
security
Security-sensitive issue

  
type:bug
Bug

  
type:chore
Chore

  
type:meta
Tracking or decisions, not implementation work

  
type:user-story
User story

No labels
area:agents
area:dashboard
area:database
area:design
area:design-review
area:flows
area:infra
area:meta
area:security
area:sessions
area:webhook
area:workdir
security
type:bug
type:chore
type:meta
type:user-story
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
dev
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
charles/claude-hooks#583
No description provided.