Adds create branch split-dropdown button to the commit graph

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 ### Added
 
 - Adds a `gitlens.views.showCurrentBranchOnTop` setting to specify whether the current branch is shown at the top of the views — closes [#3520](https://github.com/gitkraken/vscode-gitlens/issues/3520)
+- Adds create branch split-dropdown button to the commit graph
 
 ### Fixed
 

src/commands/git/branch.ts

@@ -153,6 +153,10 @@ export class BranchGitCommand extends QuickCommand {
 
 			switch (args?.state.subcommand) {
 				case 'create':
+					if (args.state.flags != null) {
+						counter++;
+					}
+
 					if (args.state.reference != null) {
 						counter++;
 					}

src/commands/gitCommands.ts

@@ -116,7 +116,7 @@ export class GitCommandsCommand extends Command {
 	protected override preExecute(context: CommandContext, args?: GitCommandsCommandArgsWithCompletion) {
 		switch (context.command) {
 			case Commands.GitCommandsBranch:
-				args = { command: 'branch' };
+				args = { command: 'branch', ...args };
 				break;
 			case Commands.GitCommandsBranchCreate:
 				args = { command: 'branch', state: { subcommand: 'create' } };

src/plus/webviews/graph/graphWebview.ts

@@ -2418,7 +2418,16 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 			selectedRepository: this.repository.path,
 			selectedRepositoryVisibility: visibility,
 			branchesVisibility: refsVisibility.branchesVisibility,
-			branchName: branch?.name,
+			branch: branch && {
+				name: branch.name,
+				ref: branch.ref,
+				refType: branch.refType,
+				remote: branch.remote,
+				repoPath: branch.repoPath,
+				sha: branch.sha,
+				id: branch.id,
+				upstream: branch.upstream,
+			},
 			branchState: branchState,
 			lastFetched: new Date(getSettledValue(lastFetchedResult)!),
 			selectedRows: this._selectedRows,

src/plus/webviews/graph/protocol.ts

@@ -94,7 +94,7 @@ export interface State extends WebviewState {
 	selectedRepository?: string;
 	selectedRepositoryVisibility?: RepositoryVisibility;
 	branchesVisibility?: GraphBranchesVisibility;
-	branchName?: string;
+	branch?: GitBranchReference;
 	branchState?: BranchState;
 	lastFetched?: Date;
 	selectedRows?: GraphSelectedRows;

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -19,7 +19,9 @@ import { VSCodeCheckbox, VSCodeRadio, VSCodeRadioGroup } from '@vscode/webview-u
 import type { FormEvent, MouseEvent, ReactElement } from 'react';
 import React, { createElement, useEffect, useMemo, useRef, useState } from 'react';
 import { getPlatform } from '@env/platform';
+import type { BranchGitCommandArgs } from '../../../../commands/git/branch';
 import type { DateStyle, GraphBranchesVisibility } from '../../../../config';
+import { Commands } from '../../../../constants.commands';
 import type { SearchQuery } from '../../../../constants.search';
 import type { FocusCommandArgs } from '../../../../plus/focus/focus';
 import type { Subscription } from '../../../../plus/gk/account/subscription';
@@ -265,7 +267,7 @@ export function GraphWrapper({
 	const [pagingHasMore, setPagingHasMore] = useState(state.paging?.hasMore ?? false);
 	const [isLoading, setIsLoading] = useState(state.loading);
 	const [styleProps, setStyleProps] = useState(state.theming);
-	const [branchName, setBranchName] = useState(state.branchName);
+	const [branch, setBranch] = useState(state.branch);
 	const [lastFetched, setLastFetched] = useState(state.lastFetched);
 	const [windowFocused, setWindowFocused] = useState(state.windowFocused);
 	const [allowed, setAllowed] = useState(state.allowed ?? false);
@@ -283,6 +285,7 @@ export function GraphWrapper({
 	const [workingTreeStats, setWorkingTreeStats] = useState(
 		state.workingTreeStats ?? { added: 0, modified: 0, deleted: 0 },
 	);
+	const branchName = branch?.name;
 
 	const minimap = useRef<GlGraphMinimapContainer | undefined>(undefined);
 	const hover = useRef<GlGraphHover | undefined>(undefined);
@@ -384,7 +387,7 @@ export function GraphWrapper({
 				if (!themingChanged) {
 					setStyleProps(state.theming);
 				}
-				setBranchName(state.branchName);
+				setBranch(state.branch);
 				setLastFetched(state.lastFetched);
 				setColumns(state.columns);
 				setRows(state.rows ?? []);
@@ -1236,7 +1239,7 @@ export function GraphWrapper({
 										) : (
 											''
 										)}
-										{branchName}
+										<span className="action-button__truncated">{branchName}</span>
 										<span
 											className="codicon codicon-chevron-down action-button__more"
 											aria-hidden="true"
@@ -1266,7 +1269,97 @@ export function GraphWrapper({
 							</>
 						)}
 					</div>
-					<div className="titlebar__group">
+					<div className="titlebar__group--last">
+						<span className="button-group">
+							<GlTooltip placement="bottom">
+								<a
+									className="action-button"
+									href={createCommandLink(Commands.GitCommandsBranch, {
+										args: {
+											state: { subcommand: 'create', flags: ['--switch'], reference: branch },
+											command: 'branch',
+											confirm: false,
+										} satisfies BranchGitCommandArgs,
+									})}
+								>
+									<span className="codicon codicon-git-branch-create action-button__icon"></span>
+								</a>
+								<span slot="content">
+									Create a branch from <i>{branchName}</i> and switch
+								</span>
+							</GlTooltip>
+							<GlTooltip placement="top" distance={7}>
+								<PopMenu position="right">
+									<button
+										type="button"
+										className="action-button"
+										slot="trigger"
+										aria-label="Minimap Options"
+									>
+										<span
+											className="codicon codicon-chevron-down action-button__more"
+											aria-hidden="true"
+										></span>
+									</button>
+									<MenuList slot="content" id="create-branch">
+										<MenuLabel>Create branch options</MenuLabel>
+										<MenuItem>
+											<a href={createCommandLink(Commands.GitCommandsBranchCreate)}>
+												Create Branch...
+											</a>
+										</MenuItem>
+										<MenuItem>
+											<a
+												href={createCommandLink(Commands.GitCommandsBranch, {
+													args: {
+														command: 'branch',
+														confirm: false,
+														state: { flags: [], reference: branch, subcommand: 'create' },
+													} satisfies BranchGitCommandArgs,
+												})}
+											>
+												Create Branch from <i>{branchName}</i>
+											</a>
+										</MenuItem>
+										<MenuItem>
+											<a
+												href={createCommandLink(Commands.GitCommandsBranch, {
+													args: {
+														command: 'branch',
+														confirm: false,
+														state: {
+															flags: ['--switch'],
+															reference: branch,
+															subcommand: 'create',
+														},
+													} satisfies BranchGitCommandArgs,
+												})}
+											>
+												Create from <i>{branchName}</i> & Switch to Branch
+											</a>
+										</MenuItem>
+										<MenuItem>
+											<a
+												href={createCommandLink(Commands.GitCommandsBranch, {
+													args: {
+														state: {
+															subcommand: 'create',
+															flags: ['--worktree'],
+															reference: branch,
+														},
+														command: 'branch',
+														confirm: false,
+													} satisfies BranchGitCommandArgs,
+												})}
+											>
+												Create Branch from <i>{branchName}</i> in New Worktree
+											</a>
+										</MenuItem>
+									</MenuList>
+								</PopMenu>
+								<span slot="content">Create branch options</span>
+							</GlTooltip>
+						</span>
 						<GlTooltip placement="bottom">
 							<a
 								href={`command:gitlens.showLaunchpad?${encodeURIComponent(

src/webviews/apps/plus/graph/graph.scss

@@ -331,6 +331,12 @@ button:not([disabled]),
 		overflow: hidden;
 	}
 
+	&__truncated {
+		width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
 	&.is-ahead {
 		background-color: var(--branch-status-ahead-background);
 
@@ -874,6 +880,13 @@ button:not([disabled]),
 		}
 	}
 
+	&__group--last {
+		display: flex;
+		gap: 0.5rem;
+		flex-shrink: 0;
+		width: auto;
+	}
+
 	&,
 	&__row {
 		justify-content: space-between;
@@ -952,6 +965,7 @@ gl-feature-gate gl-feature-badge {
 	&__header {
 		flex: none;
 		z-index: 101;
+		width: --webkit-fill-available;
 		position: relative;
 	}
 
@@ -1169,6 +1183,14 @@ gl-feature-gate gl-feature-badge {
 	width: 1px;
 }
 
+menu-list#create-branch {
+	menu-item > a {
+		display: block;
+		color: var(--vscode-foreground);
+		text-decoration: none;
+	}
+}
+
 #opts-popover {
 	font-size: var(--vscode-font-size);
 	font-family: var(--vscode-font-family);

src/webviews/apps/shared/codicons.scss

@@ -159,6 +159,15 @@
 .codicon-git-branch-create:before {
 	content: '\ea68';
 }
+.codicon-git-branch-create:after {
+	content: '\ea60';
+	position: absolute;
+	right: 0;
+	bottom: 0px;
+	font-size: 0.6em;
+	line-height: normal;
+	transform: translate(-50%, 0%);
+}
 .codicon-git-branch-delete:before {
 	content: '\ea68';
 }