Improve Git panel UX

[jtpio]

Fixes #1513

• Move the commit box to the top of the panel
• Keep only one input since it can be used to specify both the message and the description
• Make the toolbar configurable via the settings, so items could be reordered or even removed (for example hiding the branch)
• Update tests

Before	After

Toolbar changes

jupyterlab-git-toolbar-registry.mp4

Commit box hint

Show a hint when there are multiple lines, since the box now combines the message and the description.

[github-actions]

👈 Launch a Binder on branch jtpio/jupyterlab-git/improve-git-panel-ux

[Copilot]

Pull request overview

This PR improves the Git panel UX by moving the commit box to the top of the panel (addressing #1513) and consolidating commit summary/description into a single multi-line commit message input, with supporting styling and test updates.

Changes:

• Move the CommitBox above the file list and switch from separate summary/description fields to a single commitMessage state/prop.
• Update CommitBox UI to use a single multiline MUI Input, along with new styling for the combined message field.
• Update unit tests and Galata UI tests to match the new placeholder text and message formatting behavior.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
ui-tests/tests/commit.spec.ts	Updates the placeholder used to locate/fill the commit message in UI tests.
src/style/Toolbar.ts	Tweaks toolbar spacing and branch info flex behavior after layout adjustment.
src/style/CommitBox.ts	Moves commit form border to bottom; adds styling for the combined commit message input.
src/components/Toolbar.tsx	Simplifies toolbar structure by removing the repo/branch column wrapper.
src/components/GitPanel.tsx	Consolidates commit message state and moves CommitBox rendering to the top of the panel.
src/components/CommitBox.tsx	Replaces CommitMessage component with a single multiline Input and new message handling.
src/tests/test-components/GitPanel.spec.tsx	Updates commit-related tests and adds coverage for avoiding extra blank lines.
src/tests/test-components/CommitBox.spec.tsx	Updates props/tests for the new single commit message field and placeholder text.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated no new comments.

Suppressed comments (1)

src/widgets/GitWidget.tsx:176

• GitWidget connects to model.repositoryChanged in the constructor, but the class does not override dispose() to clear Lumino Signal connections. That can keep the widget instance reachable after it’s disposed (memory leak) and can also trigger _onRepositoryChanged on a disposed widget.

Consider overriding dispose() and calling Signal.clearData(this) (matching the pattern used elsewhere in the repo) before delegating to super.dispose().

  private _onRepositoryChanged(): void {
    this.toolbar.setHidden(this._model.pathRepository === null);
    if (this._submoduleMenu) {
      this.toggleSubmoduleMenu();
    }

[krassowski]

Is it easy to make the commit box position customizable? If not, I am not requesting it, just noting that I prefer it at the bottom. It is closer to my work area which is generally at the bottom of the screen (as is the last cell in the notebook).

[nakul-py]

Now UI looks quite good ❤️ and i think familiar to more users as well.

Is it easy to make the commit box position customizable? If not, I am not requesting it,

Yes there will be an option in future somehow if we can make it draggable in sidebar.

[jtpio]

The last commit introduces a new setting to set the position:

jupyterlab-git-configurable-input-box.mp4

Should we keep the previous default and have the commit box at the bottom? It would be fine if it's what most users prefer. Otherwise also happy to take the opportunity to move it to the top by default (current state of the PR).

[krassowski]

Thank you1 I think changing the default to top is fine if that the more common convention.

[krassowski]

Looks fine. I played around on Binder and feed that through Opus for review, I think one user-facing find might be worth addressing:

A message whose first line is empty leaves the box visibly full of text while the Commit button is disabled - a dedicated message would be nice

Some nitpicks from AI review for reference:

• Toolbar.tsx:284 - hasUpstream = activeBranch[0]?.upstream !== null is true when there is no current-branch entry, since optional chaining yields undefined and undefined !== null. On a detached HEAD, or before refreshBranch() populates model.branches, the push button reads "Push committed changes" instead of "Publish branch" and the ahead badge is hidden. Needs != null
• commitFiles unconditionally injects a blank line after the first line, so the message git records differs from the message the box shows
• GitWidget.tsx:82 - the submodule menu can be stranded open with no control able to dismiss it
• Toolbar.ts:9 gap: '4px' on the toolbar host has no effect
• item names are registered unprefixed into an application-global registry, and factoryAdded matches by item name only. Core ships items literally named refresh in filebrowser-extension and htmlviewer-extension, so registering Git's items tears down and rebuilds those toolbars' refresh buttons as a side effect of activation
• first line is the summary" is implemented twice: commitFiles splits and re-joins, CommitBox._summary does split('\n', 1)[0] and drives both _canCommit() and the error border. src/utils.ts already exists for this kind of parsing

[jtpio]

A message whose first line is empty leaves the box visibly full of text while the Commit button is disabled - a dedicated message would be nice

Ah good catch. After 425cb11 this should now show as the following:

For the other nitpicks maybe we can track them in a separate issue and have a look at them individually or all at once?