Skip to content

Refactor HistoryCard structure #521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
Sartoric wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Refactor HistoryCard structure #521

Sartoric wants to merge 1 commit into from

Conversation

@Sartoric
Copy link
Contributor

@Sartoric Sartoric commented Dec 12, 2025 •
edited by coderabbitai bot
Loading

  • moved the "expand" button inside the header section
  • expanded the detail area for better readability and to avoid waste of space, especially on mobile

Summary by CodeRabbit

  • Style
    • Updated layout structure in the shot history interface to improve code organization and maintainability.

✏️ Tip: You can customize this high-level summary in your review settings.

@Sartoric
**Refactor HistoryCard structure**
1f6799e 
- moved the "expand" button inside the header section
- expanded the detail area for better readability and to avoid waste of space, especially on mobile
@cla-bot cla-bot bot added the cla-signed label Dec 12, 2025
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 12, 2025 •
edited
Loading

Walkthrough

The HistoryCard component's layout was refactored by introducing a new flex row container that wraps the expand button and header section. All functional behavior, including expand/collapse logic, conditional rendering, and component interactions, remains identical.

Changes

Cohort / File(s) Summary
Layout Refactoring
web/src/pages/ShotHistory/HistoryCard.jsx		 Reorganized DOM structure by introducing a flex row container wrapping the expand button and header section. Preserved expand/collapse logic, header block, INCOMPLETE indicator, action buttons (Export, Upload, Delete), stats row, volume/rating conditional rendering, and expanded shot details.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

  • Verify visual rendering matches design intent after layout reorganization
  • Confirm expand/collapse button behavior is unaffected
  • Check that conditional rendering of volume and rating still displays correctly

Poem

🐰 A layout rearranged, but the heart stays the same,
Flex rows now wrapping like ribbons in the frame,
Expand and collapse still dance with grace,
One file refactored, a cleaner display space! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately reflects the main change in the PR, which is a structural reorganization of the HistoryCard component as confirmed by the summary and objectives.
✨ 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 6328186 and 1f6799e.

📒 Files selected for processing (1)
  • web/src/pages/ShotHistory/HistoryCard.jsx (1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
web/src/pages/ShotHistory/HistoryCard.jsx (3)
web/src/pages/Settings/index.jsx (1)
  • onExport (234-236)
web/src/pages/ProfileList/index.jsx (3)
  • onExport (681-693)
  • confirmDelete (71-71)
  • onDelete (624-631)
web/src/pages/ShotHistory/index.jsx (1)
  • onDelete (96-104)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: test
  • GitHub Check: deploy
🔇 Additional comments (4)
web/src/pages/ShotHistory/HistoryCard.jsx (4)

135-148: LGTM! Well-structured expand button implementation.

The expand button is properly placed in the new layout with correct toggle logic, accessibility labels, and conditional data loading. The implementation maintains all original functionality while fitting into the improved mobile-friendly structure.

149-231: Header reorganization looks solid.

The header content is properly restructured with all functionality preserved:

  • Profile information and metadata correctly displayed
  • Conditional rendering for INCOMPLETE badge and "Brewed by" text works correctly
  • Action buttons (Export, Upload, Delete) maintain proper states, tooltips, and handlers

Minor note: Line 223 has a title attribute that's redundant with the tooltip wrapper (lines 213-216). While this provides fallback functionality, consider removing it for cleaner code.

233-258: Stats row implementation is correct.

The stats display properly shows duration, conditional volume, and rating with appropriate styling and conditional rendering. The logic correctly handles missing or zero values.

262-278: Expanded section styling improves presentation.

The added horizontal padding (px-4) and border styling on the expanded section aligns with the PR objective to improve readability and reduce wasted space. All conditional rendering and functionality (loading state, chart, notes card) is properly preserved.

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.

@sonarqubecloud
Copy link

sonarqubecloud bot commented Dec 12, 2025

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

cla-signed

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@Sartoric