You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.6 KiB
Markdown
47 lines
1.6 KiB
Markdown
+++
|
|
title = "quotesdb/ui: collapsible filter panel on browse page"
|
|
priority = 5
|
|
status = "done"
|
|
ticket_type = "feature"
|
|
dependencies = []
|
|
+++
|
|
|
|
## Summary
|
|
|
|
On the Browse Quotes page (`/browse`), move all filter controls (author, tag, date range) behind a collapsible "Filters" button. Filters are hidden by default and expand when the button is clicked.
|
|
|
|
## Details
|
|
|
|
### Filter Button
|
|
- A single "Filters" button (or "Filters ▼" / "Filters ▲" to indicate state) sits above the quote list.
|
|
- Clicking it toggles the filter panel open or closed.
|
|
- The panel is collapsed by default when the page loads.
|
|
|
|
### Filter Panel Layout
|
|
Each filter occupies its own line inside the panel:
|
|
|
|
1. **Author** — a text input labelled "Author:"
|
|
2. **Tag** — a text input labelled "Tag:"
|
|
3. **Date range** — displayed as:
|
|
`Date: after [date input], before [date input]`
|
|
Both date inputs are on the same line, after the "Date:" label.
|
|
|
|
### Styling
|
|
- All three filter rows must be visually consistent with each other (same label width, same input style, same spacing).
|
|
- The panel and button should fit the existing site theme.
|
|
|
|
## Acceptance Criteria
|
|
- [ ] Filter controls are hidden by default on `/browse`
|
|
- [ ] A "Filters" button toggles the panel open/closed
|
|
- [ ] Author, tag, and date range each appear on their own line
|
|
- [ ] Date range is labelled `Date: after [input], before [input]`
|
|
- [ ] All three filter rows share consistent visual styling
|
|
- [ ] Existing filter functionality (querying the API with author/tag/date params) is unchanged
|
|
|
|
## Validation
|
|
Run from `quotesdb/` root:
|
|
```sh
|
|
cargo fmt && cargo check && cargo clippy
|
|
trunk build
|
|
```
|