Improves commit composer UX (#4759)

* Add maximize command for Composer webview

* Reorganize editor title menu items

* Add workbench panel visibility configuration type

* Refactor commit message from string to structured object

* Fix timing issue with state initialization

* Fix snapshot state to use local properties instead of state object

* Enhance commit message UI with read-only view and editing improvements

* Improve typography in commits panel

* Add default cursor style to composer items

* Add sticky positioning support for commit messages in details panel

* Style composition summary view and add click handler

* Removes unused state and adds composition summary selection to snapshot

Author: axosoft-ramint

contributions.json

@@ -612,6 +612,19 @@
 				]
 			}
 		},
+		"gitlens.composer.maximize": {
+			"label": "Maximize",
+			"icon": "$(screen-full)",
+			"menus": {
+				"editor/title": [
+					{
+						"when": "activeWebviewPanelId === gitlens.composer",
+						"group": "navigation",
+						"order": -98
+					}
+				]
+			}
+		},
 		"gitlens.composer.refresh": {
 			"label": "Refresh",
 			"icon": "$(refresh)",

package.json

@@ -6511,6 +6511,11 @@
 				"title": "Compose Commits (Preview)...",
 				"icon": "$(sparkle)"
 			},
+			{
+				"command": "gitlens.composer.maximize",
+				"title": "Maximize",
+				"icon": "$(screen-full)"
+			},
 			{
 				"command": "gitlens.composer.refresh",
 				"title": "Refresh",
@@ -11767,6 +11772,10 @@
 					"command": "gitlens.composeCommits:views",
 					"when": "false"
 				},
+				{
+					"command": "gitlens.composer.maximize",
+					"when": "false"
+				},
 				{
 					"command": "gitlens.composer.refresh",
 					"when": "false"
@@ -15531,25 +15540,20 @@
 					"when": "activeWebviewPanelId === gitlens.composer",
 					"group": "navigation@-99"
 				},
-				{
-					"command": "gitlens.graph.refresh",
-					"when": "activeWebviewPanelId === gitlens.graph",
-					"group": "navigation@-99"
-				},
 				{
 					"command": "gitlens.timeline.refresh",
 					"when": "activeWebviewPanelId === gitlens.timeline",
 					"group": "navigation@-99"
 				},
 				{
-					"submenu": "gitlens/graph/configuration",
-					"when": "activeWebviewPanelId === gitlens.graph",
+					"command": "gitlens.composer.maximize",
+					"when": "activeWebviewPanelId === gitlens.composer",
 					"group": "navigation@-98"
 				},
 				{
-					"command": "gitlens.graph.split",
-					"when": "activeWebviewPanelId == gitlens.graph && resourceScheme == webview-panel && config.gitlens.graph.allowMultiple",
-					"group": "navigation@-97"
+					"submenu": "gitlens/graph/configuration",
+					"when": "activeWebviewPanelId === gitlens.graph",
+					"group": "navigation@-98"
 				},
 				{
 					"command": "gitlens.timeline.split",
@@ -15578,6 +15582,32 @@
 					"group": "navigation@100",
 					"alt": "gitlens.toggleFileBlame:editor/title"
 				},
+				{
+					"command": "gitlens.diffWithPrevious:editor/title",
+					"when": "resource in gitlens:tabs:tracked && config.gitlens.menus.editorGroup.compare",
+					"group": "navigation@97",
+					"alt": "gitlens.diffWithRevision"
+				},
+				{
+					"command": "gitlens.diffWithNext:editor/title",
+					"when": "resource in gitlens:tabs:tracked && config.gitlens.menus.editorGroup.compare",
+					"group": "navigation@99"
+				},
+				{
+					"command": "gitlens.diffWithWorking:editor/title",
+					"when": "resourceScheme =~ /^(gitlens|pr)$/ && gitlens:enabled",
+					"group": "navigation@-99"
+				},
+				{
+					"command": "gitlens.graph.refresh",
+					"when": "activeWebviewPanelId === gitlens.graph",
+					"group": "navigation@-99"
+				},
+				{
+					"command": "gitlens.graph.split",
+					"when": "activeWebviewPanelId == gitlens.graph && resourceScheme == webview-panel && config.gitlens.graph.allowMultiple",
+					"group": "navigation@-97"
+				},
 				{
 					"command": "gitlens.toggleFileHeatmap:editor/title",
 					"when": "resource in gitlens:tabs:blameable && resource not in gitlens:tabs:annotated && config.gitlens.menus.editorGroup.blame && config.gitlens.fileAnnotations.command == heatmap",
@@ -15589,32 +15619,16 @@
 					"when": "resource in gitlens:tabs:blameable && resource not in gitlens:tabs:annotated && !gitlens:window:annotated && config.gitlens.menus.editorGroup.blame && !config.gitlens.fileAnnotations.command",
 					"group": "navigation@100"
 				},
-				{
-					"command": "gitlens.diffWithPrevious:editor/title",
-					"when": "resource in gitlens:tabs:tracked && config.gitlens.menus.editorGroup.compare",
-					"group": "navigation@97",
-					"alt": "gitlens.diffWithRevision"
-				},
 				{
 					"command": "gitlens.showQuickRevisionDetails:editor/title",
 					"when": "resource in gitlens:tabs:tracked && config.gitlens.menus.editorGroup.compare",
 					"group": "navigation@98"
 				},
-				{
-					"command": "gitlens.diffWithNext:editor/title",
-					"when": "resource in gitlens:tabs:tracked && config.gitlens.menus.editorGroup.compare",
-					"group": "navigation@99"
-				},
 				{
 					"command": "gitlens.openWorkingFile:editor/title",
 					"when": "resourceScheme == git && gitlens:enabled && !isInDiffEditor",
 					"group": "navigation@-98"
 				},
-				{
-					"command": "gitlens.diffWithWorking:editor/title",
-					"when": "resourceScheme =~ /^(gitlens|pr)$/ && gitlens:enabled",
-					"group": "navigation@-99"
-				},
 				{
 					"command": "gitlens.openWorkingFile:editor/title",
 					"when": "resourceScheme =~ /^(gitlens|pr)$/ && gitlens:enabled",

src/config.ts

@@ -1121,6 +1121,9 @@ export type CoreConfig = {
 	};
 	readonly workbench: {
 		readonly editorAssociations: Record<string, string> | { viewType: string; filenamePattern: string }[];
+		readonly panel: {
+			readonly visible: boolean;
+		};
 		readonly tree: {
 			readonly renderIndentGuides: 'always' | 'none' | 'onHover';
 			readonly indent: number;

src/constants.commands.generated.ts

@@ -37,6 +37,7 @@ export type ContributedCommands =
 	| 'gitlens.composeCommits:graph'
 	| 'gitlens.composeCommits:scm'
 	| 'gitlens.composeCommits:views'
+	| 'gitlens.composer.maximize'
 	| 'gitlens.composer.refresh'
 	| 'gitlens.computingFileAnnotations'
 	| 'gitlens.connectRemoteProvider'

src/constants.commands.ts

@@ -206,6 +206,8 @@ export type CoreCommands =
 	| 'workbench.action.openSettings'
 	| 'workbench.action.openWalkthrough'
 	| 'workbench.action.toggleMaximizedPanel'
+	| 'workbench.action.focusPanel'
+	| 'workbench.action.togglePanel'
 	| 'workbench.extensions.action.switchToRelease'
 	| 'workbench.extensions.installExtension'
 	| 'workbench.extensions.uninstallExtension'

src/webviews/apps/plus/composer/components/app.ts

@@ -54,10 +54,11 @@ interface ComposerDataSnapshot {
 	commits: ComposerCommit[];
 	selectedCommitId: string | null;
 	selectedCommitIds: Set<string>;
-	selectedUnassignedSection: string | null;
+	selectedUnassignedSection: 'staged' | 'unstaged' | 'unassigned' | null;
 	selectedHunkIds: Set<string>;
 	hasUsedAutoCompose: boolean;
 	recompose: { enabled: boolean; branchName?: string; locked: boolean; commitShas?: string[] } | null;
+	compositionSummarySelected: boolean;
 }
 
 interface ComposerHistory {
@@ -410,13 +411,13 @@ export class ComposerApp extends LitElement {
 	private lastMouseEvent?: MouseEvent;
 
 	override firstUpdated() {
-		this.initializeResetStateIfNeeded();
 		// Delay initialization to ensure DOM is ready
 		setTimeout(() => this.initializeSortable(), 200);
 		this.initializeDragTracking();
 		if (this.state.commits.length > 0) {
 			this.selectCommit(this.state.commits[0].id);
 		}
+		this.initializeResetStateIfNeeded();
 		if (!this.state.onboardingDismissed) {
 			this.openOnboarding();
 		}
@@ -614,12 +615,13 @@ export class ComposerApp extends LitElement {
 		return {
 			hunks: JSON.parse(JSON.stringify(this.state?.hunks ?? [])),
 			commits: JSON.parse(JSON.stringify(this.state?.commits ?? [])),
-			selectedCommitId: this.state?.selectedCommitId ?? null,
+			selectedCommitId: this.selectedCommitId,
 			selectedCommitIds: new Set([...this.selectedCommitIds]),
-			selectedUnassignedSection: this.state?.selectedUnassignedSection ?? null,
+			selectedUnassignedSection: this.selectedUnassignedSection,
 			selectedHunkIds: new Set([...this.selectedHunkIds]),
 			hasUsedAutoCompose: this.state?.hasUsedAutoCompose ?? false,
 			recompose: this.state?.recompose ? JSON.parse(JSON.stringify(this.state.recompose)) : null,
+			compositionSummarySelected: this.compositionSummarySelected,
 		};
 	}
 
@@ -628,16 +630,17 @@ export class ComposerApp extends LitElement {
 			...this.state,
 			hunks: snapshot.hunks,
 			commits: snapshot.commits,
-			selectedCommitId: snapshot.selectedCommitId,
-			selectedUnassignedSection: snapshot.selectedUnassignedSection,
 			hasUsedAutoCompose: snapshot.hasUsedAutoCompose,
 			recompose: snapshot.recompose,
 			timestamp: Date.now(),
 		};
 
 		(this as any).state = updatedState;
+		this.selectedCommitId = snapshot.selectedCommitId;
 		this.selectedCommitIds = snapshot.selectedCommitIds;
+		this.selectedUnassignedSection = snapshot.selectedUnassignedSection;
 		this.selectedHunkIds = snapshot.selectedHunkIds;
+		this.compositionSummarySelected = snapshot.compositionSummarySelected;
 		this.requestUpdate();
 	}
 
@@ -834,7 +837,7 @@ export class ComposerApp extends LitElement {
 		// Create new commit
 		const newCommit: ComposerCommit = {
 			id: `commit-${Date.now()}`,
-			message: '', // Empty message - user will add their own
+			message: { content: '', isGenerated: false },
 			hunkIndices: hunkIndices,
 		};
 
@@ -1070,7 +1073,7 @@ export class ComposerApp extends LitElement {
 				this.commitMessageBeingEdited = null;
 			}, 1000);
 
-			commit.message = message;
+			commit.message = { content: message, isGenerated: false };
 			this.requestUpdate();
 		}
 	}
@@ -1241,7 +1244,10 @@ export class ComposerApp extends LitElement {
 	}
 
 	private get isReadyToFinishAndCommit(): boolean {
-		return this.state.commits.length > 0 && this.state.commits.every(commit => commit.message.trim().length > 0);
+		return (
+			this.state.commits.length > 0 &&
+			this.state.commits.every(commit => commit.message.content.trim().length > 0)
+		);
 	}
 
 	private get canGenerateCommitsWithAI(): boolean {
@@ -1334,7 +1340,7 @@ export class ComposerApp extends LitElement {
 
 		// Create Commits loading dialog
 		if (this.state.committing) {
-			const commitCount = this.state.commits.filter(c => c.message.trim() !== '').length;
+			const commitCount = this.state.commits.filter(c => c.message.content.trim() !== '').length;
 			return this.renderLoadingDialog(
 				'Creating Commits',
 				`Committing ${commitCount} commit${commitCount === 1 ? '' : 's'}.`,
@@ -1538,7 +1544,7 @@ export class ComposerApp extends LitElement {
 		this._ipc.sendCommand(GenerateCommitMessageCommand, {
 			commitId: commitId,
 			commitHunkIndices: commit.hunkIndices,
-			overwriteExistingMessage: commit.message.trim() !== '',
+			overwriteExistingMessage: commit.message.content.trim() !== '',
 		});
 	}
 
@@ -1557,7 +1563,7 @@ export class ComposerApp extends LitElement {
 
 		// Combine commit messages from selected commits
 		const combinedMessage = selectedCommits
-			.map(commit => commit.message)
+			.map(commit => commit.message.content)
 			.filter(message => message && message.trim() !== '')
 			.join('\n\n');
 
@@ -1567,10 +1573,13 @@ export class ComposerApp extends LitElement {
 			.filter(explanation => explanation && explanation.trim() !== '')
 			.join('\n\n');
 
+		// Determine if any of the combined commits were AI-generated
+		const isGenerated = selectedCommits.some(commit => commit.message.isGenerated);
+
 		// Create new combined commit
 		const combinedCommit: ComposerCommit = {
 			id: `commit-${Date.now()}`,
-			message: combinedMessage || 'Combined commit',
+			message: { content: combinedMessage || 'Combined commit', isGenerated: isGenerated },
 			hunkIndices: combinedHunkIndices,
 			aiExplanation: combinedExplanation || undefined,
 		};