Skip to content

Conversation

hestro
Copy link
Member

@hestro hestro commented Nov 11, 2026 •

This PR replaces the filter popover with the shadcn Drawer. The drawer slides in from the right on desktop and from the bottom on mobile. This improves accessibility by putting the filters in one dialog instead of a popover with more popups opening on top of it, and is implemented from the idea in this comment.

Changes include:

  • Add the shadcn Drawer component and fix its lint errors
  • Add a useIsMobile hook, built with useSyncExternalStore and matchMedia, so the drawer direction updates live when the window is resized
  • Move the title and the reset button out of BookFilters into the drawer
    • BookFilters now consists only of the filter inputs, which makes it simpler and easier to reuse

Closes #128

Add a hook that returns whether the viewport is below the md breakpoint and updates on resize
Remove the heading, the reset button and the clearFilters logic from BookFilters, so it only renders the filter inputs. The drawer in SearchBar now provides the title and the reset button
@hestro hestro added the enhancement New feature or request label Nov 11, 2026
@hestro hestro added this to the Deliverable 4 milestone Nov 11, 2026
@hestro hestro self-assigned this Nov 11, 2026
@hestro hestro marked this pull request as ready for review November 12, 2026 10:13
@hestro hestro requested a review from a team as a code owner November 12, 2026 10:13
Copy link
Member

@martakam martakam left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks nice! I hope it's fine that I'll open another PR after this to change the design a little bit, so the filters are always displayed on desktop, and that we do not need to open a dropdown inside the Sheet

Sign in to join this conversation on GitHub.
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat: use drawer instead of popover for book filters
2 participants