Enable amend by dragging hunk in v3

Author: mtsgrd

apps/desktop/src/components/v3/FileListItemWrapper.svelte

@@ -1,7 +1,6 @@
 <!-- This is a V3 replacement for `FileListItemWrapper.svelte` -->
 <script lang="ts">
 	import FileContextMenu from '$components/v3/FileContextMenu.svelte';
-	import { BranchStack } from '$lib/branches/branch';
 	import { draggableChips } from '$lib/dragging/draggable';
 	import { ChangeDropData } from '$lib/dragging/draggables';
 	import { getFilename } from '$lib/files/utils';
@@ -10,7 +9,7 @@
 	import { IdSelection } from '$lib/selection/idSelection.svelte';
 	import { key, type SelectionId } from '$lib/selection/key';
 	import { computeChangeStatus } from '$lib/utils/fileStatus';
-	import { getContext, maybeGetContextStore } from '@gitbutler/shared/context';
+	import { getContext } from '@gitbutler/shared/context';
 	import FileListItemV3 from '@gitbutler/ui/file/FileListItemV3.svelte';
 	import FileViewHeader from '@gitbutler/ui/file/FileViewHeader.svelte';
 	import { stickyHeader } from '@gitbutler/ui/utils/stickyHeader';
@@ -53,8 +52,6 @@
 		onCloseClick
 	}: Props = $props();
 
-	const stack = maybeGetContextStore(BranchStack);
-	const stackId = $derived($stack?.id);
 	const idSelection = getContext(IdSelection);
 	const changeSelection = getContext(ChangeSelectionService);
 	const diffService = getContext(DiffService);
@@ -121,7 +118,7 @@
 	use:draggableChips={{
 		label: getFilename(change.path),
 		filePath: change.path,
-		data: new ChangeDropData(stackId || '', change, idSelection, selectionId),
+		data: new ChangeDropData(change, idSelection, selectionId),
 		viewportId: 'board-viewport',
 		selector: '.selected-draggable',
 		disabled: showCheckbox

apps/desktop/src/components/v3/UnifiedDiffView.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import HunkContextMenu from '$components/v3/HunkContextMenu.svelte';
 	import LineSelection from '$components/v3/unifiedDiffLineSelection.svelte';
+	import { draggableElement } from '$lib/dragging/draggable';
+	import { ChangeDropData } from '$lib/dragging/draggables';
 	import { canBePartiallySelected, type DiffHunk } from '$lib/hunks/hunk';
 	import { Project } from '$lib/project/project';
 	import {
@@ -169,38 +171,44 @@
 	{#if diff.type === 'Patch'}
 		{#each diff.subject.hunks as hunk}
 			{@const [staged, stagedLines] = getStageState(hunk)}
-			<HunkDiff
-				hideCheckboxes={!isCommiting}
-				filePath={change.path}
-				hunkStr={hunk.diff}
-				{staged}
-				{stagedLines}
-				diffLigatures={$userSettings.diffLigatures}
-				tabSize={$userSettings.tabSize}
-				wrapText={$userSettings.wrapText}
-				diffFont={$userSettings.diffFont}
-				diffContrast={$userSettings.diffContrast}
-				inlineUnifiedDiffs={$userSettings.inlineUnifiedDiffs}
-				onLineClick={(p) => {
-					if (!canBePartiallySelected(diff.subject)) {
-						const select = selection === undefined;
-						updateStage(hunk, select, diff.subject.hunks);
-						return;
-					}
-					lineSelection.toggleStageLines(selection, hunk, p, diff.subject.hunks);
+			<div
+				use:draggableElement={{
+					data: new ChangeDropData(change, idSelection, selectionId)
 				}}
-				onChangeStage={(selected) => {
-					updateStage(hunk, selected, diff.subject.hunks);
-				}}
-				handleLineContextMenu={(params) => {
-					contextMenu?.open(params.event, {
-						hunk,
-						selectedLines: stagedLines,
-						beforeLineNumber: params.beforeLineNumber,
-						afterLineNumber: params.afterLineNumber
-					});
-				}}
-			/>
+			>
+				<HunkDiff
+					hideCheckboxes={!isCommiting}
+					filePath={change.path}
+					hunkStr={hunk.diff}
+					{staged}
+					{stagedLines}
+					diffLigatures={$userSettings.diffLigatures}
+					tabSize={$userSettings.tabSize}
+					wrapText={$userSettings.wrapText}
+					diffFont={$userSettings.diffFont}
+					diffContrast={$userSettings.diffContrast}
+					inlineUnifiedDiffs={$userSettings.inlineUnifiedDiffs}
+					onLineClick={(p) => {
+						if (!canBePartiallySelected(diff.subject)) {
+							const select = selection === undefined;
+							updateStage(hunk, select, diff.subject.hunks);
+							return;
+						}
+						lineSelection.toggleStageLines(selection, hunk, p, diff.subject.hunks);
+					}}
+					onChangeStage={(selected) => {
+						updateStage(hunk, selected, diff.subject.hunks);
+					}}
+					handleLineContextMenu={(params) => {
+						contextMenu?.open(params.event, {
+							hunk,
+							selectedLines: stagedLines,
+							beforeLineNumber: params.beforeLineNumber,
+							afterLineNumber: params.afterLineNumber
+						});
+					}}
+				/>
+			</div>
 			<HunkContextMenu
 				bind:this={contextMenu}
 				trigger={viewport}

apps/desktop/src/lib/commits/dropHandler.ts

@@ -66,9 +66,7 @@ export class AmendCommitWithChangeDzHandler implements DropzoneHandler {
 		this.result = result;
 	}
 	accepts(data: unknown): boolean {
-		return (
-			data instanceof ChangeDropData && data.stackId !== this.stackId && !this.commit.isConflicted
-		);
+		return data instanceof ChangeDropData && !this.commit.isConflicted;
 	}
 
 	async ondrop(data: ChangeDropData) {
@@ -140,8 +138,6 @@ export class AmendCommitWithHunkDzHandler implements DropzoneHandler {
 
 /**
  * Handler that is able to amend a commit using `AnyFile`.
- *
- * TODO: Refactor this to be V2 & V3 compatible.
  */
 export class AmendCommitDzHandler implements DropzoneHandler {
 	constructor(

apps/desktop/src/lib/dragging/draggables.ts

@@ -26,8 +26,7 @@ export class HunkDropData {
 
 export class ChangeDropData {
 	constructor(
-		readonly stackId: string,
-		readonly file: TreeChange,
+		readonly change: TreeChange,
 		/**
 		 * When a a file is dragged we compare it to what is already selected,
 		 * if dragged item is part of the selection we consider that to be to
@@ -40,19 +39,19 @@ export class ChangeDropData {
 	) {}
 
 	changedPaths(params: SelectionId): string[] {
-		if (this.selection.has(this.file.path, this.selectionId)) {
+		if (this.selection.has(this.change.path, this.selectionId)) {
 			return this.selection.keys(params);
 		} else {
-			return [key({ ...this.selectionId, path: this.file.path })];
+			return [key({ ...this.selectionId, path: this.change.path })];
 		}
 	}
 
 	get filePaths(): string[] {
-		if (this.selection.has(this.file.path, this.selectionId)) {
+		if (this.selection.has(this.change.path, this.selectionId)) {
 			const selectionKeys = this.selection.keys(this.selectionId);
 			return selectionKeys.map((key) => readKey(key).path);
 		} else {
-			return [this.file.path];
+			return [this.change.path];
 		}
 	}