Update pagination, icons, border radius #306

yxuko · 2025-11-09T18:47:09Z

Switch icons from maybe-finance/lucide-rails to heyvito/lucide-rails
Add more pagination options 100 and 200
Reduce border radius from full to sm (smoothly squared)

Summary by CodeRabbit

New Features
- Extended pagination options to include larger page sizes (100, 200 items per page).
Style
- Updated avatar and icon styling with slightly rounded corners instead of full circular shapes across the interface.
Chores
- Updated icon library source reference.

coderabbitai · 2025-11-09T18:47:20Z

Walkthrough

The pull request updates the lucide-rails gem source repository, systematically replaces the "rounded-full" CSS class with "rounded-sm" across avatar and icon components throughout the application, and extends pagination per-page options to include larger values of 100 and 200.

Changes

Cohort / File(s)	Summary
Gem dependency update `Gemfile`	Updated lucide-rails GitHub source from `maybe-finance/lucide-rails` to `heyvito/lucide-rails`
Icon and avatar rounding refactor `app/components/DS/filled_icon.rb`, `app/views/categories/_color_avatar.html.erb`, `app/views/family_merchants/_family_merchant.html.erb`, `app/views/family_merchants/_form.html.erb`, `app/views/shared/_color_avatar.html.erb`, `app/views/transactions/_transaction.html.erb`	Systematically replaced CSS class `rounded-full` with `rounded-sm` across all avatar and icon components, reducing border-radius from full circle to small rounded corners
Pagination enhancement `app/views/shared/_pagination.html.erb`	Extended per-page select options from `["10", "20", "30", "50"]` to `["10", "20", "30", "50", "100", "200"]`

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Verify that the new lucide-rails GitHub source heyvito/lucide-rails is the intended repository and works as expected
Confirm the visual impact of the rounded-sm styling change is acceptable across all avatar and icon instances

Poem

🐰 Round becomes small, icons now square,
Pagination grows, more options to share,
A gem finds new home, the source takes a turn,
With each tiny radius, we gently relearn! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly addresses all three main changes: pagination updates, icon source change, and border radius modifications throughout the PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b284508 and 80123b9.

⛔ Files ignored due to path filters (1)

Gemfile.lock is excluded by !**/*.lock

📒 Files selected for processing (8)

Gemfile (1 hunks)
app/components/DS/filled_icon.rb (1 hunks)
app/views/categories/_color_avatar.html.erb (1 hunks)
app/views/family_merchants/_family_merchant.html.erb (1 hunks)
app/views/family_merchants/_form.html.erb (1 hunks)
app/views/shared/_color_avatar.html.erb (1 hunks)
app/views/shared/_pagination.html.erb (1 hunks)
app/views/transactions/_transaction.html.erb (1 hunks)

🧰 Additional context used

📓 Path-based instructions (16)

app/views/**/*.erb

📄 CodeRabbit inference engine (AGENTS.md)

app/views/**/*.erb: Keep heavy logic out of ERB views; prefer helpers/components instead
ERB templates are linted by erb-lint per .erb_lint.yml

Always use the icon helper (icon) for icons; never call lucide_icon directly

Files:

app/views/family_merchants/_form.html.erb
app/views/transactions/_transaction.html.erb
app/views/shared/_color_avatar.html.erb
app/views/categories/_color_avatar.html.erb
app/views/shared/_pagination.html.erb
app/views/family_merchants/_family_merchant.html.erb

app/views/**/*.html.*

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

app/views/**/*.html.*: Use partials only for simple, context-specific, mostly static HTML content.
Prefer semantic HTML; use Turbo Frames where possible instead of client-side solutions.
Use query params for state, not localStorage or sessionStorage.
Always perform server-side formatting for currencies, numbers, and dates.

Files:

app/views/family_merchants/_form.html.erb
app/views/transactions/_transaction.html.erb
app/views/shared/_color_avatar.html.erb
app/views/categories/_color_avatar.html.erb
app/views/shared/_pagination.html.erb
app/views/family_merchants/_family_merchant.html.erb

**/*.{html,erb,slim,js,jsx,ts,tsx,css,scss}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Always use functional design tokens (e.g., text-primary, bg-container) from the design system; do not use raw colors or ad-hoc classes.

Files:

app/views/family_merchants/_form.html.erb
app/views/transactions/_transaction.html.erb
app/views/shared/_color_avatar.html.erb
app/views/categories/_color_avatar.html.erb
app/views/shared/_pagination.html.erb
app/views/family_merchants/_family_merchant.html.erb

app/views/**/*.html.erb

📄 CodeRabbit inference engine (.cursor/rules/project-conventions.mdc)

app/views/**/*.html.erb: Prefer native HTML elements (e.g., ,
) over JS-based components
Leverage Turbo frames to break up pages instead of JS-driven client-side solutions
Prefer native client-side form validation when possible

Files:

app/views/family_merchants/_form.html.erb
app/views/transactions/_transaction.html.erb
app/views/shared/_color_avatar.html.erb
app/views/categories/_color_avatar.html.erb
app/views/shared/_pagination.html.erb
app/views/family_merchants/_family_merchant.html.erb

app/{models,controllers,views}/**/*.{rb,erb}

📄 CodeRabbit inference engine (.cursor/rules/project-conventions.mdc)

Avoid N+1 queries

Files:

app/views/family_merchants/_form.html.erb
app/views/transactions/_transaction.html.erb
app/views/shared/_color_avatar.html.erb
app/views/categories/_color_avatar.html.erb
app/views/shared/_pagination.html.erb
app/views/family_merchants/_family_merchant.html.erb

{app/javascript/controllers/**/*.{js,ts},app/views/**/*.erb,app/components/**/*.erb}

📄 CodeRabbit inference engine (.cursor/rules/stimulus_conventions.mdc)

Use declarative Stimulus actions in ERB (data-action) instead of imperative event listeners in controller lifecycle (e.g., avoid addEventListener in connect); controllers should just respond to actions

Files:

app/views/family_merchants/_form.html.erb
app/views/transactions/_transaction.html.erb
app/views/shared/_color_avatar.html.erb
app/views/categories/_color_avatar.html.erb
app/views/shared/_pagination.html.erb
app/views/family_merchants/_family_merchant.html.erb

{app/components/**/*.{js,ts,erb},app/views/**/*.erb}

📄 CodeRabbit inference engine (.cursor/rules/stimulus_conventions.mdc)

Component-scoped Stimulus controllers in app/components must be used only within their component views, not in app/views

Files:

app/views/family_merchants/_form.html.erb
app/views/transactions/_transaction.html.erb
app/views/shared/_color_avatar.html.erb
app/views/categories/_color_avatar.html.erb
app/views/shared/_pagination.html.erb
app/views/family_merchants/_family_merchant.html.erb

{app/views/**,app/helpers/**,app/javascript/controllers/**}

📄 CodeRabbit inference engine (.cursor/rules/ui-ux-design-guidelines.mdc)

{app/views/**,app/helpers/**,app/javascript/controllers/**}: Style UI using TailwindCSS v4.x with the custom design system defined in app/assets/tailwind/maybe-design-system.css
Always start by referencing app/assets/tailwind/maybe-design-system.css to understand available primitives, functional tokens, and component tokens before styling
Prefer functional tokens from the design system over raw Tailwind values (e.g., use text-primary, bg-container, border border-primary instead of text-white, bg-white, border-gray-200)

Files:

app/views/family_merchants/_form.html.erb
app/views/transactions/_transaction.html.erb
app/views/shared/_color_avatar.html.erb
app/views/categories/_color_avatar.html.erb
app/views/shared/_pagination.html.erb
app/views/family_merchants/_family_merchant.html.erb

{app/views/**,app/helpers/**}

📄 CodeRabbit inference engine (.cursor/rules/ui-ux-design-guidelines.mdc)

Always generate semantic HTML

Files:

app/views/family_merchants/_form.html.erb
app/views/transactions/_transaction.html.erb
app/views/shared/_color_avatar.html.erb
app/views/categories/_color_avatar.html.erb
app/views/shared/_pagination.html.erb
app/views/family_merchants/_family_merchant.html.erb

{app/views,app/components}/**/*.html.erb

📄 CodeRabbit inference engine (.cursor/rules/view_conventions.mdc)

{app/views,app/components}/**/*.html.erb: Keep domain logic out of ERB templates; compute values in component/controller code and reference them in the template
Integrate Stimulus declaratively in ERB: templates declare data-controller/data-action; controllers respond to those declarations
Pass data from Rails to Stimulus via data-*-value attributes, not inline JavaScript

Files:

app/views/family_merchants/_form.html.erb
app/views/transactions/_transaction.html.erb
app/views/shared/_color_avatar.html.erb
app/views/categories/_color_avatar.html.erb
app/views/shared/_pagination.html.erb
app/views/family_merchants/_family_merchant.html.erb

app/views/**/_*.html.erb

📄 CodeRabbit inference engine (.cursor/rules/view_conventions.mdc)

Name partials with a leading underscore (e.g., _trend_change.html.erb, _form_errors.html.erb)

Files:

app/views/family_merchants/_form.html.erb
app/views/transactions/_transaction.html.erb
app/views/shared/_color_avatar.html.erb
app/views/categories/_color_avatar.html.erb
app/views/shared/_pagination.html.erb
app/views/family_merchants/_family_merchant.html.erb

app/views/shared/**/_*.html.erb

📄 CodeRabbit inference engine (.cursor/rules/view_conventions.mdc)

Place shared partials in app/views/shared for reuse across views

Files:

app/views/shared/_color_avatar.html.erb
app/views/shared/_pagination.html.erb

app/**/*.rb

📄 CodeRabbit inference engine (AGENTS.md)

Place Rails application Ruby code (models, controllers, services, jobs, mailers, components) under app/

Files:

app/components/DS/filled_icon.rb

**/*.rb

📄 CodeRabbit inference engine (AGENTS.md)

Ruby style: 2-space indentation; snake_case for methods/variables; CamelCase for classes/modules

Files:

app/components/DS/filled_icon.rb

app/components/**/*

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

app/components/**/*: Prefer ViewComponents for reusable or complex UI components; keep domain logic out of view templates.
Logic belongs in component files, not in component template (*.html.erb, *.html.slim) files.

Files:

app/components/DS/filled_icon.rb

**/*.{rb,js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{rb,js,jsx,ts,tsx}: Make changes atomic, testable, and explain their impact briefly in code suggestions.
Respect existing tests and add tests when changing critical logic.

Files:

app/components/DS/filled_icon.rb

🧠 Learnings (8)

📓 Common learnings

Learnt from: CR
Repo: we-promise/sure PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-16T13:17:53.155Z
Learning: PRs should include clear description, linked issues, screenshots for UI changes, and migration notes; ensure CI, tests, RuboCop, and Biome are clean

📚 Learning: 2025-08-22T18:30:26.758Z

Learnt from: jjmata
Repo: we-promise/sure PR: 116
File: app/views/family_exports/_list.html.erb:16-28
Timestamp: 2025-08-22T18:30:26.758Z
Learning: In the family exports UI (app/views/family_exports/_list.html.erb), raw color utilities like bg-green-500/5, text-green-500, bg-red-500/5, text-red-500 are preferred over design system tokens for status indicators to maintain UI legibility and consistency with the existing import UI patterns. The user has indicated that design token replacements would make the UI illegible in this context.

Applied to files:

app/views/family_merchants/_form.html.erb
app/views/family_merchants/_family_merchant.html.erb

📚 Learning: 2025-09-23T22:21:06.637Z

Learnt from: CR
Repo: we-promise/sure PR: 0
File: .cursor/rules/project-conventions.mdc:0-0
Timestamp: 2025-09-23T22:21:06.637Z
Learning: Applies to app/views/**/*.erb : Always use the icon helper (icon) for icons; never call lucide_icon directly

Applied to files:

app/views/transactions/_transaction.html.erb
app/views/categories/_color_avatar.html.erb

📚 Learning: 2025-09-23T22:21:06.636Z

Learnt from: CR
Repo: we-promise/sure PR: 0
File: .cursor/rules/project-conventions.mdc:0-0
Timestamp: 2025-09-23T22:21:06.636Z
Learning: Push Rails to its limits before adding new dependencies

Applied to files:

Gemfile

📚 Learning: 2025-09-23T22:21:06.637Z

Learnt from: CR
Repo: we-promise/sure PR: 0
File: .cursor/rules/project-conventions.mdc:0-0
Timestamp: 2025-09-23T22:21:06.637Z
Learning: Applies to app/views/**/*.turbo_stream.erb : Use Turbo Streams to enhance functionality but avoid hard dependencies on them

Applied to files:

Gemfile

📚 Learning: 2025-09-23T22:23:17.441Z

Learnt from: CR
Repo: we-promise/sure PR: 0
File: .cursor/rules/ui-ux-design-guidelines.mdc:0-0
Timestamp: 2025-09-23T22:23:17.441Z
Learning: Applies to {app/views/**,app/helpers/**,app/javascript/controllers/**} : Style UI using TailwindCSS v4.x with the custom design system defined in app/assets/tailwind/maybe-design-system.css

Applied to files:

Gemfile

📚 Learning: 2025-09-23T22:21:06.637Z

Learnt from: CR
Repo: we-promise/sure PR: 0
File: .cursor/rules/project-conventions.mdc:0-0
Timestamp: 2025-09-23T22:21:06.637Z
Learning: Applies to app/views/**/*.html.erb : Prefer native HTML elements (e.g., <dialog>, <details><summary>) over JS-based components

Applied to files:

app/views/shared/_pagination.html.erb

📚 Learning: 2025-09-23T22:21:06.637Z

Learnt from: CR
Repo: we-promise/sure PR: 0
File: .cursor/rules/project-conventions.mdc:0-0
Timestamp: 2025-09-23T22:21:06.637Z
Learning: Applies to app/views/**/*.html.erb : Leverage Turbo frames to break up pages instead of JS-driven client-side solutions

Applied to files:

app/views/shared/_pagination.html.erb

🔇 Additional comments (8)

app/views/categories/_color_avatar.html.erb (1)

5-5: LGTM! Visual update aligns with PR objectives.

The change from rounded-full to rounded-sm is consistent with the broader UI update across avatar components.

app/views/transactions/_transaction.html.erb (1)

23-23: LGTM! Merchant logo styling updated consistently.

The border radius change from rounded-full to rounded-sm aligns with the UI-wide avatar styling update.

app/components/DS/filled_icon.rb (1)

85-85: LGTM! Centralized radius update for filled icon component.

Updating the radius_classes method to use rounded-sm when rounded is true ensures consistent styling across all usages of this component.

app/views/family_merchants/_form.html.erb (1)

17-17: LGTM! Color swatch styling updated consistently.

The border radius change aligns with the broader visual update to use rounded-sm for avatar-like elements.

app/views/shared/_pagination.html.erb (1)

53-53: LGTM! Pagination options extended as specified.

Adding 100 and 200 as per-page options provides more flexibility for users viewing large datasets. Ensure backend pagination queries remain performant with these larger page sizes, particularly if N+1 queries or expensive computations are involved.

app/views/shared/_color_avatar.html.erb (1)

8-8: LGTM! Shared avatar styling updated consistently.

The change from rounded-full to rounded-sm in this shared partial ensures consistent styling across all usages throughout the app.

app/views/family_merchants/_family_merchant.html.erb (1)

6-7: LGTM! Logo container and image styling updated consistently.

Both the wrapper div and the image have been updated to use rounded-sm, ensuring consistent styling with the broader UI update.

Gemfile (1)

20-20: I'll search for more details about API compatibility and the relationship between these repositories.

Verified: heyvito/lucide-rails is the authoritative, actively-maintained gem source.

heyvito/lucide-rails is maintained by Vito Sartori with MIT license. The repository has 112 stars (vs. 7 for maybe-finance), is not archived, and syncs with the official Lucide icon repository. Version 0.7.1 is confirmed available on RubyGems. Other gems in the ecosystem explicitly recommend using heyvito/lucide-rails as the standard implementation. The API is stable with the standard lucide_icon() helper method. This change switches from a secondary fork to the primary, well-established source—no breaking changes to expect.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

jjmata · 2025-11-10T20:28:18Z

Can you include a few more screenshots of where this impacts the UI, @yxuko?

Jus trying to understand what this does beyond (subjective) cosmetic treatment. Also, have checked with @Shpigford if there's any reason they kept a fork of heyvito/lucide-rails.git ... we shall see.

yxuko · 2025-11-29T14:54:35Z

Hi @jjmata,
Here are some screenshots for the changes

yxuko added 3 commits November 9, 2025 11:52

Add more pagination options

8e8d375

Switch Icons to heyvito/lucide-rails

9986a98

Reduce border radius

80123b9

jjmata self-requested a review November 10, 2025 20:28

jjmata assigned yxuko Nov 10, 2025

jjmata removed their request for review November 14, 2025 15:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update pagination, icons, border radius #306

Update pagination, icons, border radius #306

yxuko commented Nov 9, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Nov 9, 2025 •

edited

Loading

Uh oh!

jjmata commented Nov 10, 2025

Uh oh!

yxuko commented Nov 29, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Update pagination, icons, border radius #306

Are you sure you want to change the base?

Update pagination, icons, border radius #306

Conversation

yxuko commented Nov 9, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Nov 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

jjmata commented Nov 10, 2025

Uh oh!

yxuko commented Nov 29, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

yxuko commented Nov 9, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Nov 9, 2025 •

edited

Loading