Merge pull request #13143 from gitbutlerapp/push-pnyuqkroppvo

Lite: add ability to drag and drop uncommitted changes onto a branch

Author: OliverJAsh

apps/lite/ui/src/Operation.ts

@@ -1,9 +1,15 @@
 import { Toast } from "@base-ui/react";
 import { useMutation } from "@tanstack/react-query";
 import { Match } from "effect";
-import { CommitMoveParams, MoveBranchParams, TearOffBranchParams } from "#electron/ipc.ts";
+import {
+	CommitCreateParams,
+	CommitMoveParams,
+	MoveBranchParams,
+	TearOffBranchParams,
+} from "#electron/ipc.ts";
 import { rejectedChangesToastOptions } from "#ui/components/RejectedChanges.tsx";
 import {
+	commitCreateMutationOptions,
 	commitMoveMutationOptions,
 	moveBranchMutationOptions,
 	rubMutationOptions,
@@ -15,13 +21,15 @@ export type RubOperation = Omit<RubParams, "projectId">;
 
 export type Operation =
 	| ({ _tag: "Rub" } & RubOperation)
+	| ({ _tag: "CommitCreate" } & Omit<CommitCreateParams, "projectId">)
 	| ({ _tag: "CommitMove" } & Omit<CommitMoveParams, "projectId">)
 	| ({ _tag: "MoveBranch" } & Omit<MoveBranchParams, "projectId">)
 	| ({ _tag: "TearOffBranch" } & Omit<TearOffBranchParams, "projectId">);
 
 export const useRunOperation = (projectId: string) => {
 	const toastManager = Toast.useToastManager();
 	const rubMutation = useMutation(rubMutationOptions);
+	const commitCreate = useMutation(commitCreateMutationOptions);
 	const commitMove = useMutation(commitMoveMutationOptions);
 	const moveBranch = useMutation(moveBranchMutationOptions);
 	const tearOffBranch = useMutation(tearOffBranchMutationOptions);
@@ -50,6 +58,28 @@ export const useRunOperation = (projectId: string) => {
 					},
 				);
 			}),
+			Match.tag("CommitCreate", (operation) => {
+				commitCreate.mutate(
+					{
+						projectId,
+						relativeTo: operation.relativeTo,
+						side: operation.side,
+						changes: operation.changes,
+						message: operation.message,
+					},
+					{
+						onSuccess: (response) => {
+							if (response.rejectedChanges.length > 0)
+								toastManager.add(
+									rejectedChangesToastOptions({
+										newCommit: response.newCommit,
+										rejectedChanges: response.rejectedChanges,
+									}),
+								);
+						},
+					},
+				);
+			}),
 			Match.tag("CommitMove", (operation) => {
 				commitMove.mutate({
 					projectId,

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

@@ -1,8 +1,7 @@
-.unassignedChangesLane {
-	display: flex;
+.unassignedChanges {
 	flex-shrink: 0;
-	flex-direction: column;
 	width: 300px;
+	border: 1px dotted var(--color-separator);
 }
 
 .stackLane {
@@ -26,11 +25,6 @@
 	width: 300px;
 }
 
-.unassignedChanges {
-	flex-grow: 1;
-	border: 1px dotted var(--color-separator);
-}
-
 .assignedChanges {
 	min-height: 80px;
 	border: 1px dotted var(--color-separator);

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

@@ -1351,6 +1351,21 @@ const BranchTarget: FC<
 					side: "below",
 				};
 			}),
+			Match.tag("TreeChanges", ({ source }): Operation | null => {
+				if (anchorRef === null || source.parent._tag !== "Changes") return null;
+				return {
+					_tag: "CommitCreate",
+					relativeTo: {
+						type: "referenceBytes",
+						subject: anchorRef,
+					},
+					side: "below",
+					changes: source.changes.map(({ change, hunkHeaders }) =>
+						createDiffSpec(change, hunkHeaders),
+					),
+					message: "",
+				};
+			}),
 			Match.orElse(() => null),
 		);
 
@@ -1371,6 +1386,7 @@ const BranchTarget: FC<
 	const tooltip = operation
 		? Match.value(operation).pipe(
 				Match.tag("MoveBranch", () => "Stack branch onto here"),
+				Match.tag("CommitCreate", () => "Commit changes here"),
 				Match.tag("CommitMove", () => "Move commit here"),
 				Match.orElse(() => null),
 			)
@@ -1860,18 +1876,16 @@ const ProjectPage: FC = () => {
 			}
 		>
 			<div className={sharedStyles.lanes}>
-				<div className={styles.unassignedChangesLane}>
-					<Changes
-						label="Unassigned changes"
-						projectId={project.id}
-						stackId={null}
-						onAbsorbChanges={requestAbsorptionPlan}
-						onDependencyHover={highlightCommits}
-						selection={selection}
-						select={select}
-						className={styles.unassignedChanges}
-					/>
-				</div>
+				<Changes
+					label="Unassigned changes"
+					projectId={project.id}
+					stackId={null}
+					onAbsorbChanges={requestAbsorptionPlan}
+					onDependencyHover={highlightCommits}
+					selection={selection}
+					select={select}
+					className={styles.unassignedChanges}
+				/>
 
 				<div className={styles.headInfo}>
 					<div className={styles.stackLanes}>
@@ -1904,7 +1918,7 @@ const ProjectPage: FC = () => {
 							>
 								<button
 									type="button"
-									className={classes(styles.commonBaseCommit)}
+									className={styles.commonBaseCommit}
 									onClick={() => {
 										select(baseCommitItem(commonBaseCommitId));
 										setEditing(null);