Renders a list of commit list items with mock data

What does this MR do and why?

This MR is part of bigger effort to refactor commit list. Specifically, it adds new component that matches the new 🎨 design for the commit list.

  • Commits are now organized by day with date headers and commit icons
  • Each commit item shows information including author avatars, commit signatures (optional), pipeline status (optional), and tags (optional).
    • Hovering username triggers a user popover.
  • Each commit item also has action buttons for copying commit IDs, browsing files, and expanding/collapsing full commit details.

To keep MRs size in a review-able state, the implementation has been broken down into multiple MRs/issues. See implementation plan below:

Tasks MR/Issue
commit list item (collapsed state/desktop) ⬅️ this MR
commit list item (collapsed state/mobile) follow up MR
commit list header #551400 (closed)
add instrumentation for expand/collapse button #547680
commit list item (expanded state) #547680
integrate with graphql #550474

References

Screenshots or screen recordings

CleanShot 2025-06-26 at 17.08.37.mp4

light dark
CleanShot 2025-06-26 at 17.07.31.png CleanShot 2025-06-26 at 17.10.40.png

How to set up and validate locally

  1. Enable project_commits_refactor FF
  2. Open a project
  3. Code > Commits

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Part 1 of #547678 (closed)

Edited by Chaoyue Zhao

Merge request reports

Loading