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.
1.6 KiB
1.6 KiB
+++ title = "quotesdb/ui: collapsible filter panel on browse page" priority = 5 status = "todo" 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:
- Author — a text input labelled "Author:"
- Tag — a text input labelled "Tag:"
- 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:
cargo fmt && cargo check && cargo clippy
trunk build