agama-project / agama / 24830762752

push

github

feat(web): polish patterns selection page UX (#3417)

## Summary

Polish the patterns selection page focused on two small UX wins:

- **Sticky category headers, inline counters, smarter filter feedback**:
categories
stay visible when scrolling; each one shows "X of Y selected"; filter
feedback is contextual ("N of M patterns" / "No patterns match") instead
of bare numbers.
- **"Auto selected" label fades on touch**: once the user explicitly
toggles an auto-selected pattern, the badge steps aside (the choice is
no longer purely
  automatic).

## Motivation

After revamping the software page, a few rough edges showed in the
selection patterns form

- With long lists or small enough viewports, you lose track of which
category you're in once you scroll past the heading.
- It was hidding categories on filter, making user lost the information
about patterns selected on them.
- The search input badge was just a number, which works for sighted
users who have the list right there but doesn't anchor the count to
anything.
- The "auto selected" badge stayed on a pattern even after the user
explicitly unchecked or rechecked it, which was misleading: the system
isn't choosing it anymore, the user is.
- The badge color was loud enough to compete visually with the pattern
title.

## Changes

### Sticky headers + inline counters

- Category headings are sticky below the search input as the user
scrolls.
- Each category shows "X of Y selected" (live, reacts to checkbox
toggles).
- When filtering: appends "N matches the filter" or "No patterns match
the filter" inline. The body placeholder is gone.
- The SearchInput results badge now reads "N of M patterns" or "No
patterns match" instead of a bare number.
- Adds a screen-reader live region announcing filter result changes.
- Pattern rows refactored into a small `PatternCheckbox` so a
non-clickable badge (the "auto selected" label) can sit next to the
title without being part of the click target.

### "Auto selected" la... (continued)

3778 of 6082 branches covered (62.12%)

Branch coverage included in aggregate %.

39 of 40 new or added lines in 1 file covered. (97.5%)

13850 of 18352 relevant lines covered (75.47%)

86.01 hits per line