Checkbox ui

[Kitenite]

Description

Related Issues

Type of Change

• Bug fix
• New feature
• Documentation
• Refactor
• Other (please describe):

Testing

Screenshots (if applicable)

Additional Notes

Summary by CodeRabbit

• New Features

  • Added interactive per-line "revert" glyphs in the diff viewer allowing users to undo individual changes via a gutter icon, with hover/visibility behaviors.

• Style

  • Refined checkbox styling in the file changes header for a subtler bordered appearance.
  • Added editor styling to support the new revert glyph visuals and hover states.

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

[coderabbitai]

Warning

Rate limit exceeded

@Kitenite has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 9 minutes and 42 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📝 Walkthrough

Walkthrough

Adds an interactive revert glyph to the Monaco diff gutter, includes CSS for the glyph, enables glyphMargin in the diff editor, and wires click handling that attempts Monaco's built-in revert then falls back to applying edits to revert changes.

Changes

Cohort / File(s)	Summary
File checkbox tweak apps/desktop/src/renderer/screens/main/components/WorkspaceView/ChangesContent/components/FileDiffSection/components/FileDiffHeader/FileDiffHeader.tsx	Added border-muted-foreground/50 to the checkbox class for a muted semi-transparent border.
Monaco provider import apps/desktop/src/renderer/providers/MonacoProvider/MonacoProvider.tsx	Imported new ./monaco.css to include Monaco-specific styling.
Monaco CSS apps/desktop/src/renderer/providers/MonacoProvider/monaco.css	New styles for .diff-revert-glyph (hidden-by-default glyph, masked SVG icon, hover behavior, and show-on-line-or-gutter-hover selectors).
Diff viewer revert feature apps/desktop/src/renderer/screens/main/components/WorkspaceView/ChangesContent/components/DiffViewer/DiffViewer.tsx	Added glyph decoration management, per-line change mapping, mouse handling for glyph clicks, revert flow that prefers Monaco internal revert and falls back to explicit edits, enabled glyphMargin in diff editor options, and related lifecycle/cleanup logic.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant DiffGutter as "Diff Gutter (glyph)"
    participant DiffViewer as "DiffViewer<br/>(handler)"
    participant Monaco as "Monaco API"
    participant ModifiedEditor as "Modified Editor"
    participant OriginalEditor as "Original Editor"

    User ->> DiffGutter: click glyph
    DiffGutter ->> DiffViewer: emit glyph click (line info)
    DiffViewer ->> Monaco: try internal revert (provide lineRangeMapping)
    alt Monaco internal revert available
        Monaco -->> ModifiedEditor: apply internal revert
        ModifiedEditor -->> DiffViewer: emit content/decoration update
    else fallback
        DiffViewer ->> ModifiedEditor: compute original range & content
        DiffViewer ->> ModifiedEditor: executeEdits(replace range with original content)
        ModifiedEditor -->> DiffViewer: emit content/decoration update
    end
    DiffViewer ->> OriginalEditor: (optional) read original content for fallback
    DiffViewer -->> DiffGutter: update decorations/visibility

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• fix(desktop): reduce diff viewer gutter width #861 — Modifies Monaco diff/gutter UI and options; overlaps with glyph/gutter styling and editor option changes.
• feat(desktop): improve side-by-side diff view UI and fix content reset #836 — Changes DiffViewer behavior and diff editor options; related to remounting/option adjustments that interact with this revert feature.

Poem

I nibble code and hop with glee,
A tiny glyph to set diffs free.
Click to revert, I twitch my nose,
Back to the old where fondness grows.
🐰✨

🚥 Pre-merge checks | ❌ 3

❌ Failed checks (3 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title 'Checkbox ui' is vague and does not accurately represent the primary changes, which focus on implementing a custom revert glyph for diffs in Monaco editor, not just checkbox styling.	Update the title to reflect the main change, such as 'Add custom revert glyph for diff viewer' or 'Implement diff revert icons in Monaco editor gutter'.
Description check	⚠️ Warning	The pull request description contains only the template structure with no actual content filled in—all sections are empty or contain only comments, failing to document the changes.	Fill in the description sections with substantive content: explain the revert glyph feature, link any related issues, mark the change type, describe testing performed, and add any relevant notes.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

🧹 Preview Cleanup Complete

The following preview resources have been cleaned up:

• ⚠️ Neon database branch
• ⚠️ Electric Fly.io app

Thank you for your contribution! 🎉