Merge pull request #13115 from gitbutlerapp/push-sounqutuskvo

Lite: add ability to absorb changes

Author: OliverJAsh

apps/lite/electron/src/ipc.ts

@@ -1,8 +1,10 @@
 import type {
+	AbsorptionTarget,
 	ApplyOutcome,
 	BranchDetails,
 	BranchListing,
 	BranchListingFilter,
+	CommitAbsorption,
 	HunkAssignmentRequest,
 	CommitDetails,
 	DiffSpec,
@@ -115,6 +117,16 @@ export interface CommitUncommitChangesParams {
 	assignTo: string | null;
 }
 
+export interface AbsorptionPlanParams {
+	projectId: string;
+	target: AbsorptionTarget;
+}
+
+export interface AbsorbParams {
+	projectId: string;
+	absorptionPlan: Array<CommitAbsorption>;
+}
+
 export interface TreeChangeDiffParams {
 	projectId: string;
 	change: TreeChange;
@@ -145,6 +157,8 @@ export interface WatcherSubscribeResult {
 }
 
 export interface LiteElectronApi {
+	absorptionPlan: (params: AbsorptionPlanParams) => Promise<Array<CommitAbsorption>>;
+	absorb: (params: AbsorbParams) => Promise<number>;
 	apply: (params: ApplyParams) => Promise<ApplyOutcome>;
 	assignHunk: (params: AssignHunkParams) => Promise<void>;
 	branchDetails: (params: BranchDetailsParams) => Promise<BranchDetails>;
@@ -180,6 +194,8 @@ export interface LiteElectronApi {
 }
 
 export const liteIpcChannels = {
+	absorptionPlan: "workspace:absorption-plan",
+	absorb: "workspace:absorb",
 	apply: "workspace:apply",
 	assignHunk: "workspace:assign-hunk",
 	branchDetails: "workspace:branch-details",

apps/lite/electron/src/main.ts

@@ -1,6 +1,8 @@
 import WatcherManager from "./watcher.js";
 import {
 	liteIpcChannels,
+	type AbsorbParams,
+	type AbsorptionPlanParams,
 	type AssignHunkParams,
 	type BranchDetailsParams,
 	type BranchDiffParams,
@@ -23,6 +25,8 @@ import {
 	WatcherUnsubscribeParams,
 } from "./ipc.js";
 import {
+	absorb,
+	absorptionPlan,
 	apply,
 	assignHunk,
 	branchDetails,
@@ -56,6 +60,13 @@ const currentFilePath = fileURLToPath(import.meta.url);
 const currentDirPath = path.dirname(currentFilePath);
 
 function registerIpcHandlers(): void {
+	ipcMain.handle(
+		liteIpcChannels.absorptionPlan,
+		(_e, { projectId, target }: AbsorptionPlanParams) => absorptionPlan(projectId, target),
+	);
+	ipcMain.handle(liteIpcChannels.absorb, (_e, { projectId, absorptionPlan }: AbsorbParams) =>
+		absorb(projectId, absorptionPlan),
+	);
 	ipcMain.handle(liteIpcChannels.apply, (_e, { projectId, existingBranch }: ApplyParams) =>
 		apply(projectId, existingBranch),
 	);

apps/lite/electron/src/preload.cts

@@ -1,6 +1,7 @@
 import { contextBridge, ipcRenderer } from "electron";
 import type { LiteElectronApi, WatcherSubscribeResult } from "./ipc";
 import type {
+	CommitAbsorption,
 	ApplyOutcome,
 	BranchDetails,
 	BranchListing,
@@ -35,6 +36,9 @@ const watcherListenerBySubscription = new Map<
 >();
 
 const api: LiteElectronApi = {
+	absorptionPlan: (params) =>
+		ipcRenderer.invoke("workspace:absorption-plan", params) as Promise<Array<CommitAbsorption>>,
+	absorb: (params) => ipcRenderer.invoke("workspace:absorb", params) as Promise<number>,
 	apply: (params) => ipcRenderer.invoke("workspace:apply", params) as Promise<ApplyOutcome>,
 	assignHunk: (params) => ipcRenderer.invoke("workspace:assign-hunk", params) as Promise<void>,
 	branchDetails: (params) =>

apps/lite/ui/src/ShortcutButton.tsx

@@ -8,6 +8,17 @@ export const applyBranchMutationOptions = mutationOptions({
 	},
 });
 
+export const absorptionPlanMutationOptions = mutationOptions({
+	mutationFn: window.lite.absorptionPlan,
+});
+
+export const absorbMutationOptions = mutationOptions({
+	mutationFn: window.lite.absorb,
+	onSuccess: async (_data, _input, _ctx, { client }) => {
+		await client.invalidateQueries();
+	},
+});
+
 export const commitInsertBlankMutationOptions = mutationOptions({
 	mutationFn: window.lite.commitInsertBlank,
 	onSuccess: async (_data, _input, _ctx, { client }) => {

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

@@ -77,6 +77,16 @@ export const ArrowUpIcon: FC<ComponentProps<"svg">> = (props) => (
 	</svg>
 );
 
+export const AbsorbIcon: FC<ComponentProps<"svg">> = (props) => (
+	<svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" {...props}>
+		<path
+			d="M8 3.55c0 .98-.68 1.84-1.37 2.74-.74.96-1.5 1.95-1.5 3.16a2.87 2.87 0 1 0 5.74 0c0-1.21-.76-2.2-1.5-3.16C8.68 5.39 8 4.53 8 3.55Z"
+			fill="currentColor"
+			stroke="none"
+		/>
+	</svg>
+);
+
 export const MenuTriggerIcon: FC = () => (
 	<svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16">
 		<circle cx="4" cy="8" r="1.25" fill="currentColor" />

apps/lite/ui/src/components/icons.tsx

@@ -5,8 +5,8 @@ import { QueryClient } from "@tanstack/react-query";
 import { createRootRouteWithContext } from "@tanstack/react-router";
 import { useFullscreenPreview } from "../hooks/useFullscreenPreview";
 import { usePreviewPanel } from "../hooks/usePreviewPanel";
-import { ShortcutButton } from "#ui/ShortcutButton.tsx";
 import { ShortcutsBarPortalContext } from "#ui/routes/project/$id/-ShortcutsBar.tsx";
+import { bindingButtonLabel } from "#ui/shortcuts.ts";
 import {
 	openFullscreenPreviewBinding,
 	togglePreviewBinding,
@@ -98,17 +98,21 @@ const TopBarActions: FC<{
 
 	return (
 		<div className={styles.topBarActions}>
-			<ShortcutButton
-				binding={togglePreviewBinding}
+			<button
+				type="button"
 				className={uiStyles.button}
 				aria-pressed={previewPanel}
 				onClick={() => setPreviewPanel((visible) => !visible)}
-			/>
-			<ShortcutButton
-				binding={openFullscreenPreviewBinding}
+			>
+				{bindingButtonLabel(togglePreviewBinding)}
+			</button>
+			<button
+				type="button"
 				className={uiStyles.button}
 				onClick={() => setShowFullscreenPreview(true)}
-			/>
+			>
+				{bindingButtonLabel(openFullscreenPreviewBinding)}
+			</button>
 		</div>
 	);
 };

apps/lite/ui/src/routes/__root.tsx

@@ -1,10 +1,10 @@
 import { Dialog } from "@base-ui/react";
 import { FC, ReactNode, use, useState } from "react";
 import { Group, Panel, Separator, useDefaultLayout } from "react-resizable-panels";
-import { ShortcutButton } from "#ui/ShortcutButton.tsx";
 import { ShortcutsBarPortalContext } from "#ui/routes/project/$id/-ShortcutsBar.tsx";
 import { useFullscreenPreview } from "#ui/hooks/useFullscreenPreview.ts";
 import { usePreviewPanel } from "#ui/hooks/usePreviewPanel.ts";
+import { bindingButtonLabel } from "#ui/shortcuts.ts";
 import uiStyles from "#ui/ui.module.css";
 import { closeFullscreenPreviewBinding } from "./workspace/-WorkspaceShortcuts.ts";
 import sharedStyles from "./-shared.module.css";
@@ -58,11 +58,13 @@ export const ProjectPreviewLayout: FC<{
 				<Dialog.Portal>
 					<Dialog.Popup aria-label="Preview" className={sharedStyles.previewDialogPopup}>
 						<div className={sharedStyles.previewDialogBody}>
-							<ShortcutButton
-								binding={closeFullscreenPreviewBinding}
+							<button
+								type="button"
 								className={uiStyles.button}
 								onClick={() => setShowFullscreenPreview(false)}
-							/>
+							>
+								{bindingButtonLabel(closeFullscreenPreviewBinding)}
+							</button>
 							{preview}
 						</div>
 						<footer ref={setDialogShortcutsBarPortalNode} />

apps/lite/ui/src/routes/project/$id/-ProjectPreviewLayout.tsx

@@ -43,6 +43,8 @@ const hunkHeaderEquals = (a: HunkHeader, b: HunkHeader): boolean =>
 export const formatHunkHeader = (hunk: HunkHeader): string =>
 	`-${hunk.oldStart},${hunk.oldLines} +${hunk.newStart},${hunk.newLines}`;
 
+export const shortCommitId = (commitId: string): string => commitId.slice(0, 7);
+
 const assignedHunks = (
 	hunks: Array<DiffHunk>,
 	assignments: Array<HunkAssignment>,
@@ -196,11 +198,17 @@ export const CommitDetails: FC<{
 	);
 };
 
+export const commitTitle = (message: string): string => {
+	const _title = message.trim().split("\n")[0];
+	const title = _title === "" ? undefined : _title;
+	return title ?? "(no message)";
+};
+
 export const CommitLabel: FC<{
 	commit: Commit;
 }> = ({ commit }) => (
 	<>
-		{commit.message === "" ? <>(no message)</> : commit.message.split("\n")[0]}
+		{commitTitle(commit.message)}
 		{commit.hasConflicts && " ⚠️"}
 	</>
 );

apps/lite/ui/src/routes/project/$id/-shared.tsx

@@ -0,0 +1,30 @@
+.backdrop {
+	position: fixed;
+	inset: 0;
+	background-color: rgb(0 0 0 / 0.35);
+}
+
+.popup {
+	display: flex;
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	row-gap: 12px;
+	flex-direction: column;
+	padding: 16px;
+	transform: translate(-50%, -50%);
+	border: 1px solid;
+	background-color: white;
+}
+
+.body {
+	display: flex;
+	row-gap: 8px;
+	flex-direction: column;
+}
+
+.actions {
+	display: flex;
+	column-gap: 8px;
+	justify-content: end;
+}