Skip to content

Conversation

hestro
Copy link
Member

@hestro hestro commented Oct 22, 2026 •

This PR updates existing UI components to use shadcn and introduces several UI improvements and new features.

Changes include:

  • Refactor existing components, including FavoriteButton, BookCard, SearchBar, pagination, filters and the selected book page.
  • Introduce a redesigned and fancy pagination component with proper page links
  • Move the filters into a popover and add a "Reset all filters" button.
  • Add a breadcrumb component to improve navigation.
  • Improve BookCard with hover animations and keyboard focus styling.
  • Add a "Read more" option for long book descriptions.

The shadcn component Popover was imported in this PR.

Not included:

  • Since the app has several different loading and status states, skeletons and other components can be considered together in a separate PR.
  • Further accessibility improvements, adherence to the project's no-div criteria, and dark-mode support can also be addressed in separate PRs.
  • No tests have been added or modified in this PR. Fixing/updating tests should be handled separately

Closes #54
Closes #55

@hestro hestro added enhancement New feature or request refactor Restructuring of existing code in order to easy maintenance, readability or otherwise improve it. labels Oct 22, 2026
@hestro hestro added this to the Deliverable 3 milestone Oct 22, 2026
@hestro hestro self-assigned this Oct 22, 2026
@hestro hestro marked this pull request as ready for review October 22, 2026 13:40
@hestro hestro requested a review from a team as a code owner October 22, 2026 13:40
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.

I really like it! Some smaller comments regarding where things are defined and placed.

It is possible to use this as an opportunity to adjust the animation of the book covers? Instead of increasing their size, I think it would look nicer if they stayed the same size (contain-content), and the animation zoomed slightly "into" the book cover. The animation is now immediately, while is could have the same timing as the BookCard (which is duration-200)

@hestro
Copy link
Member Author

hestro commented Oct 24, 2026

I think I’ve addressed all the comments now. Please take a look at the animation and see if this is what you meant. I wanted to keep it minimal, though. The transition is smooth in my browser, so let me know if it is for you as well.

@hestro hestro requested a review from martakam October 24, 2026 11:21
@martakam
Copy link
Member

Yup, the animation looks great! There is a merge conflict according to GitHub, so I'll just merge main in here to resolve that before approving

@martakam martakam merged commit 134b14f into main Oct 24, 2026
Sign in to join this conversation on GitHub.
Labels
enhancement New feature or request refactor Restructuring of existing code in order to easy maintenance, readability or otherwise improve it.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat: add new shadcn UI features refactor: use shadcn components in existing UI
2 participants