LCFS - Comment Log filter bar, active chips, and client-side find
- Dominant language
- Python
- Stars
- 6
- Forks
- 6
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 87
Description
**Description:**
Add the full filter bar to the Comment Log UI, wired to `useOrganizationComments` and URL query params. Render active filter chips with accessible remove buttons and a clear-all control. Add a client-side find input that highlights and navigates matches within the currently loaded results.
Controls (per wireframe):
- Keyword search input (calls server-side `search`)
- Category select (agreed list plus `All`)
- Compliance year select
- Date range picker
- Visibility segmented control (IDIR only)
- Active filter chips with remove buttons
- Clear filters button
- Result count
- Find input with next/previous buttons
**Wireframe:** https://preview.uxpin.com/7264e34749e7af420559b8cfc0ca8001c76db3ec#/pages/223328163/simulate/no-panels
**Purpose and benefit to user:**
Lets users quickly narrow large comment histories and locate specific text within the visible results without re-querying the server on every keystroke.
**Acceptance Criteria:**
- [ ] Given I select a category, When results update, Then an active chip appears and the URL reflects the selection.
- [ ] Given I click remove on a chip, When the chip is removed, Then the filter is cleared and results refresh.
- [ ] Given I click `Clear filters`, When the action completes, Then all filter params are removed from the URL and results reset.
- [ ] Given I type in the find input, When matches exist in the loaded results, Then matches are highlighted and I can navigate via next/previous with a visible current-match indicator.
- [ ] Given I am a BCeID user, When the filter bar renders, Then the visibility segmented control is not visible.
- [ ] Given I use only the keyboard, When I interact with the filter bar, chips, and find controls, Then all controls are reachable and operable.
**Development Checklist:**
- [ ] Category select bound to `category` param
- [ ] Compliance year select bound to `compliance_year` param
- [ ] Date range picker bound to `date_from`/`date_to`
- [ ] Visibility segmented control (IDIR only) bound to `visibility`
- [ ] Active filter chips with accessible remove labels (e.g. `Remove Year: 2025 filter`)
- [ ] Clear-all filters button
- [ ] Result count display
- [ ] Client-side find with next/previous navigation
- [ ] Highlight matches in `plainTextComment` only (not raw HTML)
- [ ] Real form labels on all inputs (no placeholder-only labels)
- [ ] axe scan on filter bar and chip interactions
**Notes:**
- Find is client-side only and operates on the loaded page of results.
- Do not inject highlight markup into the rich-text comment body.
Contributor guide
Assessment
This issue has not been assessed yet.