Add ability to remove branches

Author: OliverJAsh

apps/lite/ui/src/api/mutations.ts

@@ -54,6 +54,13 @@ export const moveBranchMutationOptions = mutationOptions({
 	},
 });
 
+export const removeBranchMutationOptions = mutationOptions({
+	mutationFn: window.lite.removeBranch,
+	onSuccess: async (_data, _input, _ctx, { client }) => {
+		await client.invalidateQueries();
+	},
+});
+
 export const updateBranchNameMutationOptions = mutationOptions({
 	mutationFn: window.lite.updateBranchName,
 	onSuccess: async (_data, _input, _ctx, { client }) => {

apps/lite/ui/src/routes/project/$id/workspace/-WorkspaceShortcuts.ts

@@ -135,7 +135,7 @@ const commitDetailsBindings: Array<ShortcutBinding<CommitDetailsAction>> = [
 	closeCommitDetailsBinding,
 ];
 
-type BranchSegmentAction = SelectionAction | { _tag: "RenameBranch" };
+type BranchSegmentAction = SelectionAction | { _tag: "RenameBranch" } | { _tag: "RemoveBranch" };
 
 const branchSegmentBindings: Array<ShortcutBinding<BranchSegmentAction>> = [
 	...selectionBindings,
@@ -146,6 +146,13 @@ const branchSegmentBindings: Array<ShortcutBinding<BranchSegmentAction>> = [
 		action: { _tag: "RenameBranch" },
 		repeat: false,
 	},
+	{
+		id: "segment-remove-branch",
+		description: "Remove branch",
+		keys: ["Backspace"],
+		action: { _tag: "RemoveBranch" },
+		repeat: false,
+	},
 ];
 
 type FullscreenPreviewAction = { _tag: "Close" };
@@ -409,6 +416,7 @@ export const useWorkspaceShortcuts = ({
 	setEditing,
 	commonBaseCommitId,
 	onAbsorbChanges,
+	onRemoveBranch,
 }: {
 	projectId: string;
 	showFullscreenPreview: boolean;
@@ -418,6 +426,7 @@ export const useWorkspaceShortcuts = ({
 	setEditing: (selection: Editing | null) => void;
 	commonBaseCommitId?: string;
 	onAbsorbChanges: (changes: Array<TreeChange>, stackId: string | null) => void;
+	onRemoveBranch: (selection: SegmentItem) => void;
 }) => {
 	const { data: headInfo } = useSuspenseQuery(headInfoQueryOptions(projectId));
 	const { data: worktreeChanges } = useSuspenseQuery(changesInWorktreeQueryOptions(projectId));
@@ -535,6 +544,7 @@ export const useWorkspaceShortcuts = ({
 						},
 					});
 				},
+				RemoveBranch: () => onRemoveBranch(selection),
 			}),
 			Match.orElse((action) => handleSelectionAction(action, { _tag: "Segment", ...selection })),
 		);

apps/lite/ui/src/routes/project/$id/workspace/route.module.css

@@ -178,6 +178,12 @@
 	font-family: monospace;
 }
 
+.dialogActions {
+	display: flex;
+	column-gap: 8px;
+	justify-content: flex-end;
+}
+
 .editCommitMessageInput {
 	field-sizing: content;
 	box-sizing: content-box;

apps/lite/ui/src/routes/project/$id/workspace/route.tsx

@@ -2,6 +2,7 @@ import {
 	commitCreateMutationOptions,
 	commitInsertBlankMutationOptions,
 	commitRewordMutationOptions,
+	removeBranchMutationOptions,
 	updateBranchNameMutationOptions,
 	unapplyStackMutationOptions,
 } from "#ui/api/mutations.ts";
@@ -65,7 +66,15 @@ import {
 	attachInstruction,
 	extractInstruction,
 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/list-item";
-import { ContextMenu, Menu, mergeProps, Tooltip, Toast, useRender } from "@base-ui/react";
+import {
+	AlertDialog,
+	ContextMenu,
+	Menu,
+	mergeProps,
+	Tooltip,
+	Toast,
+	useRender,
+} from "@base-ui/react";
 import {
 	Commit,
 	DiffHunk,
@@ -122,6 +131,7 @@ import {
 import { PositionedShortcutsBar } from "../-ShortcutsBar.tsx";
 import { formatShortcutKeys, ShortcutActionBase, type ShortcutBinding } from "#ui/shortcuts.ts";
 import styles from "./route.module.css";
+import { RemoveBranchParams } from "#electron/ipc.ts";
 
 // https://linear.app/gitbutler/issue/GB-1161/refsbranches-should-use-bytes-instead-of-strings
 const decodeRefName = (fullNameBytes: Array<number>): string =>
@@ -1428,21 +1438,58 @@ const TearOffBranchTarget: FC<useRender.ComponentProps<"div">> = ({ render, ...p
 };
 
 const SegmentMenuPopup: FC<{
-	canRename: boolean;
-	onRename: () => void;
+	canRemoveBranch: boolean;
+	canRenameBranch: boolean;
+	onRemoveBranch: () => void;
+	onRenameBranch: () => void;
 	parts: typeof Menu | typeof ContextMenu;
-}> = ({ canRename, onRename, parts }) => {
+}> = ({ canRemoveBranch, canRenameBranch, onRemoveBranch, onRenameBranch, parts }) => {
 	const { Popup, Item } = parts;
 
 	return (
 		<Popup className={classes(uiStyles.popup, uiStyles.menuPopup)}>
-			<Item className={uiStyles.menuItem} disabled={!canRename} onClick={onRename}>
+			<Item className={uiStyles.menuItem} disabled={!canRenameBranch} onClick={onRenameBranch}>
 				Rename branch
 			</Item>
+			<Item className={uiStyles.menuItem} disabled={!canRemoveBranch} onClick={onRemoveBranch}>
+				Remove branch
+			</Item>
 		</Popup>
 	);
 };
 
+const RemoveBranchDialog: FC<{
+	branchName: string;
+	isPending: boolean;
+	onConfirm: () => void;
+	onOpenChange: (open: boolean) => void;
+}> = ({ branchName, isPending, onConfirm, onOpenChange }) => (
+	<AlertDialog.Root open onOpenChange={onOpenChange}>
+		<AlertDialog.Portal>
+			<AlertDialog.Backdrop className={uiStyles.dialogBackdrop} />
+			<AlertDialog.Popup className={uiStyles.dialogPopup}>
+				<AlertDialog.Title>Remove branch</AlertDialog.Title>
+				<p>
+					Are you sure you want to remove <code>{branchName}</code>?
+				</p>
+				<div className={styles.dialogActions}>
+					<AlertDialog.Close className={uiStyles.button} disabled={isPending}>
+						Cancel
+					</AlertDialog.Close>
+					<button
+						type="button"
+						className={uiStyles.button}
+						onClick={onConfirm}
+						disabled={isPending}
+					>
+						Remove branch
+					</button>
+				</div>
+			</AlertDialog.Popup>
+		</AlertDialog.Portal>
+	</AlertDialog.Root>
+);
+
 const InlineBranchNameEditor: FC<{
 	branchName: string;
 	onSubmit: (value: string) => void;
@@ -1484,6 +1531,7 @@ const SegmentRow: FC<
 	{
 		projectId: string;
 		editing: Editing | null;
+		onRequestRemoveBranch: (params: { stackId: string; branchName: string }) => void;
 		segment: Segment;
 		stackId: string;
 		segmentIndex: number;
@@ -1494,6 +1542,7 @@ const SegmentRow: FC<
 > = ({
 	projectId,
 	editing,
+	onRequestRemoveBranch,
 	segment,
 	stackId,
 	segmentIndex,
@@ -1560,6 +1609,11 @@ const SegmentRow: FC<
 		});
 	};
 
+	const requestRemoveBranch = () => {
+		if (branchName === null) return;
+		onRequestRemoveBranch({ stackId, branchName });
+	};
+
 	const children = (
 		<div
 			{...restProps}
@@ -1594,8 +1648,10 @@ const SegmentRow: FC<
 					<ContextMenu.Portal>
 						<ContextMenu.Positioner>
 							<SegmentMenuPopup
-								canRename={branchName !== null && !isRenamePending}
-								onRename={startEditing}
+								canRemoveBranch={branchName !== null}
+								canRenameBranch={branchName !== null && !isRenamePending}
+								onRemoveBranch={requestRemoveBranch}
+								onRenameBranch={startEditing}
 								parts={ContextMenu}
 							/>
 						</ContextMenu.Positioner>
@@ -1612,8 +1668,10 @@ const SegmentRow: FC<
 				<Menu.Portal>
 					<Menu.Positioner align="end">
 						<SegmentMenuPopup
-							canRename={branchName !== null && !isRenamePending}
-							onRename={startEditing}
+							canRemoveBranch={branchName !== null}
+							canRenameBranch={branchName !== null && !isRenamePending}
+							onRemoveBranch={requestRemoveBranch}
+							onRenameBranch={startEditing}
 							parts={Menu}
 						/>
 					</Menu.Positioner>
@@ -1641,6 +1699,7 @@ const SegmentRow: FC<
 
 const SegmentC: FC<{
 	highlightedCommitIds: Set<string>;
+	onRequestRemoveBranch: (params: { stackId: string; branchName: string }) => void;
 	projectId: string;
 	segment: Segment;
 	segmentIndex: number;
@@ -1652,6 +1711,7 @@ const SegmentC: FC<{
 }> = ({
 	editing,
 	highlightedCommitIds,
+	onRequestRemoveBranch,
 	projectId,
 	segment,
 	segmentIndex,
@@ -1673,6 +1733,7 @@ const SegmentC: FC<{
 			<SegmentRow
 				projectId={projectId}
 				editing={editing}
+				onRequestRemoveBranch={onRequestRemoveBranch}
 				segment={segment}
 				stackId={stackId}
 				segmentIndex={segmentIndex}
@@ -1708,6 +1769,7 @@ const StackC: FC<{
 	highlightedCommitIds: Set<string>;
 	onAbsorbChanges: (changes: Array<TreeChange>, stackId: string | null) => void;
 	onDependencyHover: (commitIds: Array<string> | null) => void;
+	onRequestRemoveBranch: (params: Omit<RemoveBranchParams, "projectId">) => void;
 	projectId: string;
 	selection: Item | null;
 	select: (selection: Item | null) => void;
@@ -1719,6 +1781,7 @@ const StackC: FC<{
 	highlightedCommitIds,
 	onAbsorbChanges,
 	onDependencyHover,
+	onRequestRemoveBranch,
 	projectId,
 	selection,
 	select,
@@ -1770,6 +1833,7 @@ const StackC: FC<{
 						<SegmentC
 							editing={editing}
 							highlightedCommitIds={highlightedCommitIds}
+							onRequestRemoveBranch={onRequestRemoveBranch}
 							projectId={projectId}
 							segment={segment}
 							segmentIndex={segmentIndex}
@@ -1832,6 +1896,28 @@ const ProjectPage: FC = () => {
 	} = useAbsorption(projectId);
 
 	useMonitorDraggedSourceItem({ projectId });
+
+	const removeBranch = useMutation(removeBranchMutationOptions);
+	const [branchPendingRemoval, setBranchPendingRemoval] = useState<Omit<
+		RemoveBranchParams,
+		"projectId"
+	> | null>(null);
+	const confirmRemoveBranch = () => {
+		if (branchPendingRemoval === null) return;
+
+		removeBranch.mutate(
+			{
+				projectId,
+				stackId: branchPendingRemoval.stackId,
+				branchName: branchPendingRemoval.branchName,
+			},
+			{
+				onSuccess: () => {
+					setBranchPendingRemoval(null);
+				},
+			},
+		);
+	};
 	useWorkspaceShortcuts({
 		projectId,
 		showFullscreenPreview,
@@ -1841,6 +1927,10 @@ const ProjectPage: FC = () => {
 		setEditing,
 		commonBaseCommitId,
 		onAbsorbChanges: requestAbsorptionPlan,
+		onRemoveBranch: ({ stackId, branchName }) => {
+			if (branchName === null) return;
+			setBranchPendingRemoval({ stackId, branchName });
+		},
 	});
 
 	// TODO: dedupe
@@ -1884,6 +1974,7 @@ const ProjectPage: FC = () => {
 									highlightedCommitIds={highlightedCommitIds}
 									onAbsorbChanges={requestAbsorptionPlan}
 									onDependencyHover={highlightCommits}
+									onRequestRemoveBranch={setBranchPendingRemoval}
 									projectId={project.id}
 									selection={selection}
 									select={select}
@@ -1926,6 +2017,7 @@ const ProjectPage: FC = () => {
 				label={shortcutScope ? getLabel(shortcutScope) : null}
 				items={shortcutScope?.bindings ?? []}
 			/>
+
 			{absorptionPlan !== null && (
 				<AbsorptionDialog
 					absorptionPlan={absorptionPlan}
@@ -1936,6 +2028,16 @@ const ProjectPage: FC = () => {
 					}}
 				/>
 			)}
+			{branchPendingRemoval !== null && (
+				<RemoveBranchDialog
+					branchName={branchPendingRemoval.branchName}
+					isPending={removeBranch.isPending}
+					onConfirm={confirmRemoveBranch}
+					onOpenChange={(open) => {
+						if (!open) setBranchPendingRemoval(null);
+					}}
+				/>
+			)}
 		</ProjectPreviewLayout>
 	);
 };