feature: Allow commit title change on click #11480
Conversation
just like for branches
|
@mathijs81 is attempting to deploy a commit to the GitButler Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Pull request overview
This PR adds the ability to edit commit messages by clicking on the commit title, improving UX consistency with how branch names are currently edited. The implementation makes the commit title interactive when it's editable, opening the commit message editor dialog on click.
Key Changes:
- Added click-to-edit functionality for commit titles
- Implemented proper keyboard accessibility (Enter/Space support)
- Applied visual feedback (cursor change and hover opacity)
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| apps/desktop/src/components/CommitView.svelte | Added onclick prop to CommitTitle component that triggers edit mode when conditions are met |
| apps/desktop/src/components/CommitTitle.svelte | Made the title element interactive with proper accessibility attributes (role, tabindex, keyboard handlers) and styling for the clickable state |
| truncate | ||
| commitMessage={commit.message} | ||
| className="text-14 text-semibold text-body" | ||
| editable={!isReadOnly} |
There was a problem hiding this comment.
Inconsistent conditions: editable is set to !isReadOnly, but onclick checks canEdit() which requires both modeService !== undefined and !isReadOnly. This means when modeService is undefined but isReadOnly is false, the title will appear editable (cursor: text, hover opacity) but won't be clickable. Consider changing line 169 to editable={canEdit()} to ensure both conditions match.
| editable={!isReadOnly} | |
| editable={canEdit()} |
|
Thank you for splitting this up :-) I’ll try to check it this week. |
🧢 Changes
Clicking the commit details title opens the edit dialog.
☕️ Reasoning
Currently, branch names can be inline-edited, but commit details not.
The UX is still a bit different as the implementing svelte classes are totally different (the branch name is rendered as an edit box, but for the commit details we have to pop up the little edit pane).
I chose to make the cursor a caret/text-pointer on hover to mimic the same look as with the branch editing, but I think
cursor: pointerwould also be good as it is not inline editing after all.See video for before and after:
butler2.mp4