From 65f96ac37d95c93b1477700ed5d31a3649d3bb30 Mon Sep 17 00:00:00 2001
From: Mattias Granlund <mtsgrd@gmail.com>
Date: Fri, 24 Jan 2025 01:17:41 +0100
Subject: [PATCH] Render uncommitted file list

- distinguish old FileList items from new with ChangeList name
- rewritten id selection mechanism
- no "ownership" support yet for committing
---
 .../src/components/ChangeContextMenu.svelte   | 170 +++++++++++++
 apps/desktop/src/components/ChangeList.svelte |  74 ++++++
 .../components/ChangeListItemWrapper.svelte   | 112 +++++++++
 .../src/components/FileContextMenu.svelte     |   1 +
 .../src/components/WorktreeChanges.svelte     |  24 +-
 apps/desktop/src/lib/dragging/draggable.ts    |  14 +-
 apps/desktop/src/lib/dragging/draggables.ts   |  33 ++-
 apps/desktop/src/lib/files/utils.ts           |   9 +
 .../worktreeTypes.ts => hunks/change.ts}      |  57 +----
 apps/desktop/src/lib/hunks/hunk.ts            |  36 +++
 .../src/lib/selection/idSelection.svelte.ts   |  98 ++++++++
 .../src/lib/selection/idSelectionUtils.ts     | 234 ++++++++++++++++++
 apps/desktop/src/lib/selection/key.ts         |  17 ++
 apps/desktop/src/lib/utils/fileStatus.ts      |  14 ++
 apps/desktop/src/lib/utils/selection.ts       |   2 +
 apps/desktop/src/lib/worktree/changeTree.ts   |  72 ++++++
 .../lib/worktree/worktreeService.svelte.ts    |   2 +-
 apps/desktop/src/routes/+layout.svelte        |   9 +-
 packages/ui/src/lib/file/FileListItem.svelte  |   1 -
 packages/ui/src/styles/core/reset.css         |   1 -
 20 files changed, 919 insertions(+), 61 deletions(-)
 create mode 100644 apps/desktop/src/components/ChangeContextMenu.svelte
 create mode 100644 apps/desktop/src/components/ChangeList.svelte
 create mode 100644 apps/desktop/src/components/ChangeListItemWrapper.svelte
 create mode 100644 apps/desktop/src/lib/files/utils.ts
 rename apps/desktop/src/lib/{worktree/worktreeTypes.ts => hunks/change.ts} (73%)
 create mode 100644 apps/desktop/src/lib/selection/idSelection.svelte.ts
 create mode 100644 apps/desktop/src/lib/selection/idSelectionUtils.ts
 create mode 100644 apps/desktop/src/lib/selection/key.ts
 create mode 100644 apps/desktop/src/lib/worktree/changeTree.ts

diff --git a/apps/desktop/src/components/ChangeContextMenu.svelte b/apps/desktop/src/components/ChangeContextMenu.svelte
new file mode 100644
index 0000000000..6b5092f703
--- /dev/null
+++ b/apps/desktop/src/components/ChangeContextMenu.svelte
@@ -0,0 +1,170 @@
+<!-- This is a V3 replacement for `FileContextMenu.svelte` -->
+<script lang="ts">
+	import { BranchController } from '$lib/branches/branchController';
+	import { LocalFile } from '$lib/files/file';
+	import { Project } from '$lib/project/project';
+	import { SETTINGS, type Settings } from '$lib/settings/userSettings';
+	import { getEditorUri, openExternalUrl } from '$lib/utils/url';
+	import { getContextStoreBySymbol } from '@gitbutler/shared/context';
+	import { getContext } from '@gitbutler/shared/context';
+	import Button from '@gitbutler/ui/Button.svelte';
+	import ContextMenu from '@gitbutler/ui/ContextMenu.svelte';
+	import ContextMenuItem from '@gitbutler/ui/ContextMenuItem.svelte';
+	import ContextMenuSection from '@gitbutler/ui/ContextMenuSection.svelte';
+	import Modal from '@gitbutler/ui/Modal.svelte';
+	import FileListItem from '@gitbutler/ui/file/FileListItem.svelte';
+	import * as toasts from '@gitbutler/ui/toasts';
+	import { join } from '@tauri-apps/api/path';
+	import type { Writable } from 'svelte/store';
+
+	interface Props {
+		isUnapplied: boolean;
+		branchId?: string;
+		trigger?: HTMLElement;
+		isBinary?: boolean;
+	}
+
+	const { branchId, trigger, isUnapplied, isBinary = false }: Props = $props();
+
+	const branchController = getContext(BranchController);
+	const project = getContext(Project);
+	const userSettings = getContextStoreBySymbol<Settings, Writable<Settings>>(SETTINGS);
+
+	let confirmationModal: ReturnType<typeof Modal> | undefined;
+	let contextMenu: ReturnType<typeof ContextMenu>;
+
+	function isDeleted(item: any): boolean {
+		if (!item.files || !Array.isArray(item.files)) return false;
+
+		return item.files.some((f: unknown) => {
+			if (!(typeof f === 'string')) return false;
+			return true;
+			// return computeChangeStatus(f) === 'D';
+		});
+	}
+
+	function confirmDiscard(item: any) {
+		if (!branchId) {
+			console.error('Branch ID is not set');
+			toasts.error('Failed to discard changes');
+			return;
+		}
+		branchController.unapplyFiles(branchId, item.files);
+		close();
+	}
+
+	export function open(e: MouseEvent, item: any) {
+		contextMenu.open(e, item);
+	}
+</script>
+
+<ContextMenu bind:this={contextMenu} rightClickTrigger={trigger}>
+	{#snippet children(item)}
+		<ContextMenuSection>
+			{#if item.files && item.files.length > 0}
+				{@const files = item.files}
+				{#if files[0] instanceof LocalFile && !isUnapplied && !isBinary}
+					<ContextMenuItem
+						label="Discard changes"
+						onclick={() => {
+							confirmationModal?.show(item);
+							contextMenu.close();
+						}}
+					/>
+				{/if}
+				{#if files.length === 1}
+					<ContextMenuItem
+						label="Copy Path"
+						onclick={async () => {
+							try {
+								if (!project) return;
+								const absPath = await join(project.path, item.files[0].path);
+								navigator.clipboard.writeText(absPath);
+								contextMenu.close();
+								// dismiss();
+							} catch (err) {
+								console.error('Failed to copy path', err);
+								toasts.error('Failed to copy path');
+							}
+						}}
+					/>
+					<ContextMenuItem
+						label="Copy Relative Path"
+						onclick={() => {
+							try {
+								if (!project) return;
+								navigator.clipboard.writeText(item.files[0].path);
+								contextMenu.close();
+							} catch (err) {
+								console.error('Failed to copy relative path', err);
+								toasts.error('Failed to copy relative path');
+							}
+						}}
+					/>
+				{/if}
+				<ContextMenuItem
+					label="Open in {$userSettings.defaultCodeEditor.displayName}"
+					disabled={isDeleted(item)}
+					onclick={async () => {
+						try {
+							if (!project) return;
+							for (let file of item.files) {
+								const path = getEditorUri({
+									schemeId: $userSettings.defaultCodeEditor.schemeIdentifer,
+									path: [project.vscodePath, file.path]
+								});
+								openExternalUrl(path);
+							}
+							contextMenu.close();
+						} catch {
+							console.error('Failed to open in editor');
+							toasts.error('Failed to open in editor');
+						}
+					}}
+				/>
+			{/if}
+		</ContextMenuSection>
+	{/snippet}
+</ContextMenu>
+
+<Modal
+	width="small"
+	type="warning"
+	title="Discard changes"
+	bind:this={confirmationModal}
+	onSubmit={confirmDiscard}
+>
+	{#snippet children(item)}
+		{#if item.files.length < 10}
+			<p class="discard-caption">
+				Are you sure you want to discard the changes<br />to the following files:
+			</p>
+			<ul class="file-list">
+				{#each item.files as file}
+					<FileListItem filePath={file.path} fileStatus={file.status} clickable={false} />
+				{/each}
+			</ul>
+		{:else}
+			Discard the changes to all <span class="text-bold">
+				{item.files.length} files
+			</span>?
+		{/if}
+	{/snippet}
+	{#snippet controls(close, item)}
+		<Button kind="outline" onclick={close}>Cancel</Button>
+		<Button style="error" type="submit" onclick={() => confirmDiscard(item)}>Confirm</Button>
+	{/snippet}
+</Modal>
+
+<style lang="postcss">
+	.discard-caption {
+		color: var(--clr-text-2);
+	}
+	.file-list {
+		padding: 4px 0;
+		border-radius: var(--radius-m);
+		overflow: hidden;
+		background-color: var(--clr-bg-2);
+		margin-top: 12px;
+	}
+</style>
diff --git a/apps/desktop/src/components/ChangeList.svelte b/apps/desktop/src/components/ChangeList.svelte
new file mode 100644
index 0000000000..1f0a763f2b
--- /dev/null
+++ b/apps/desktop/src/components/ChangeList.svelte
@@ -0,0 +1,74 @@
+<!-- This is a V3 replacement for `BranchFileList.svelte` -->
+<script lang="ts">
+	import ChangeListItemWrapper from './ChangeListItemWrapper.svelte';
+	import LazyloadContainer from '$components/LazyloadContainer.svelte';
+	import { IdSelection } from '$lib/selection/idSelection.svelte';
+	import { selectFilesInList, updateSelection } from '$lib/selection/idSelectionUtils';
+	import { chunk } from '$lib/utils/array';
+	import { sortLikeFileTree } from '$lib/worktree/changeTree';
+	import { getContext } from '@gitbutler/shared/context';
+	import type { TreeChange } from '$lib/hunks/change';
+
+	interface Props {
+		changes: TreeChange[];
+		projectId: string;
+		/** The commit ID these changes belong to, if any. */
+		commitId?: string;
+	}
+
+	const { changes: files, projectId, commitId }: Props = $props();
+
+	let currentDisplayIndex = $state(0);
+
+	const fileChunks: TreeChange[][] = $derived(chunk(sortLikeFileTree(files), 100));
+	const visibleFiles: TreeChange[] = $derived(fileChunks.slice(0, currentDisplayIndex + 1).flat());
+	const idSelection = getContext(IdSelection);
+
+	function handleKeyDown(e: KeyboardEvent) {
+		updateSelection({
+			allowMultiple: true,
+			metaKey: e.metaKey,
+			shiftKey: e.shiftKey,
+			key: e.key,
+			targetElement: e.currentTarget as HTMLElement,
+			files: visibleFiles,
+			selectedFileIds: idSelection.values(),
+			fileIdSelection: idSelection,
+			commitId,
+			preventDefault: () => e.preventDefault()
+		});
+	}
+
+	function loadMore() {
+		if (currentDisplayIndex + 1 >= fileChunks.length) return;
+		currentDisplayIndex += 1;
+	}
+</script>
+
+{#if visibleFiles.length > 0}
+	<!-- Maximum amount for initial render is 100 files
+	`minTriggerCount` set to 80 in order to start the loading a bit earlier. -->
+	<LazyloadContainer
+		minTriggerCount={80}
+		ontrigger={() => {
+			console.log('loading more files...');
+			loadMore();
+		}}
+		role="listbox"
+		onkeydown={handleKeyDown}
+	>
+		{#each visibleFiles as change (change.path)}
+			<ChangeListItemWrapper
+				{change}
+				{projectId}
+				selected={idSelection.has(change.path, commitId)}
+				onclick={(e) => {
+					selectFilesInList(e, change, visibleFiles, idSelection, true, commitId);
+				}}
+			/>
+		{/each}
+	</LazyloadContainer>
+{/if}
+
+<style lang="postcss">
+</style>
diff --git a/apps/desktop/src/components/ChangeListItemWrapper.svelte b/apps/desktop/src/components/ChangeListItemWrapper.svelte
new file mode 100644
index 0000000000..23b5bce461
--- /dev/null
+++ b/apps/desktop/src/components/ChangeListItemWrapper.svelte
@@ -0,0 +1,112 @@
+<!-- This is a V3 replacement for `FileListItemWrapper.svelte` -->
+<script lang="ts">
+	import ChangeContextMenu from './ChangeContextMenu.svelte';
+	import { BranchStack } from '$lib/branches/branch';
+	import { draggableChips, type DraggableConfig } from '$lib/dragging/draggable';
+	import { ChangeDropData } from '$lib/dragging/draggables';
+	import { getFilename } from '$lib/files/utils';
+	import { IdSelection } from '$lib/selection/idSelection.svelte';
+	import { key } from '$lib/selection/key';
+	import { computeChangeStatus } from '$lib/utils/fileStatus';
+	import { getContext, maybeGetContextStore } from '@gitbutler/shared/context';
+	import FileListItem from '@gitbutler/ui/file/FileListItem.svelte';
+	import type { TreeChange } from '$lib/hunks/change';
+
+	interface Props {
+		change: TreeChange;
+		commitId?: string;
+		projectId: string;
+		selected: boolean;
+		showCheckbox?: boolean;
+		onclick: (e: MouseEvent) => void;
+		onkeydown?: (e: KeyboardEvent) => void;
+	}
+
+	const {
+		change: change,
+		commitId,
+		projectId,
+		selected,
+		showCheckbox,
+		onclick,
+		onkeydown
+	}: Props = $props();
+
+	const stack = maybeGetContextStore(BranchStack);
+	const stackId = $derived($stack?.id);
+	const idSelection = getContext(IdSelection);
+
+	let contextMenu = $state<ReturnType<typeof ChangeContextMenu>>();
+	let draggableEl: HTMLDivElement | undefined = $state();
+	let indeterminate = $state(false);
+	let checked = $state(false);
+
+	// TODO: Refactor to use this as a Svelte action, e.g. `use:draggableChips()`.
+	let chips:
+		| {
+				update: (opts: DraggableConfig) => void;
+				destroy: () => void;
+		  }
+		| undefined;
+
+	// Manage the lifecycle of the draggable chips.
+	$effect(() => {
+		if (draggableEl) {
+			const dropData = new ChangeDropData(stackId || '', change, idSelection, commitId);
+			const config: DraggableConfig = {
+				label: getFilename(change.path),
+				filePath: change.path,
+				data: dropData,
+				viewportId: 'board-viewport',
+				selector: '.selected-draggable'
+			};
+			if (chips) {
+				chips.update(config);
+			} else {
+				chips = draggableChips(draggableEl, config);
+			}
+		} else {
+			chips?.destroy();
+		}
+
+		return () => {
+			chips?.destroy();
+		};
+	});
+</script>
+
+<ChangeContextMenu
+	bind:this={contextMenu}
+	trigger={draggableEl}
+	isUnapplied={false}
+	branchId={$stack?.id}
+	isBinary={false}
+/>
+
+<FileListItem
+	id={key(change.path, commitId)}
+	bind:ref={draggableEl}
+	filePath={change.path}
+	fileStatus={computeChangeStatus(change)}
+	{selected}
+	{showCheckbox}
+	{checked}
+	{indeterminate}
+	draggable={true}
+	{onclick}
+	{onkeydown}
+	locked={false}
+	conflicted={false}
+	oncontextmenu={(e) => {
+		const changes = idSelection.treeChanges(projectId);
+		if (idSelection.has(change.path, commitId)) {
+			contextMenu?.open(e, { files: changes });
+		} else {
+			contextMenu?.open(e, { files: [change] });
+		}
+	}}
+/>
+
+<style lang="postcss">
+	/* blah */
+</style>
diff --git a/apps/desktop/src/components/FileContextMenu.svelte b/apps/desktop/src/components/FileContextMenu.svelte
index 677091fbfb..1c1732181e 100644
--- a/apps/desktop/src/components/FileContextMenu.svelte
+++ b/apps/desktop/src/components/FileContextMenu.svelte
@@ -1,3 +1,4 @@
+<!-- TODO: Delete this file after V3 has shipped. -->
 <script lang="ts">
 	import { BranchController } from '$lib/branches/branchController';
 	import { LocalFile } from '$lib/files/file';
diff --git a/apps/desktop/src/components/WorktreeChanges.svelte b/apps/desktop/src/components/WorktreeChanges.svelte
index 2f1d4a0726..5b22eae629 100644
--- a/apps/desktop/src/components/WorktreeChanges.svelte
+++ b/apps/desktop/src/components/WorktreeChanges.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
+	import ChangeList from './ChangeList.svelte';
 	import ReduxResult from './ReduxResult.svelte';
 	import noChanges from '$lib/assets/illustrations/no-changes.svg?raw';
+	import { createCommitStore } from '$lib/commits/contexts';
+	import { IdSelection } from '$lib/selection/idSelection.svelte';
 	import { WorktreeService } from '$lib/worktree/worktreeService.svelte';
 	import { getContext } from '@gitbutler/shared/context';
 	import Button from '@gitbutler/ui/Button.svelte';
+	import { setContext } from 'svelte';
 
 	type Props = {
 		projectId: string;
@@ -12,6 +16,10 @@
 	const { projectId }: Props = $props();
 
 	const worktreeService = getContext(WorktreeService);
+	const idSelection = new IdSelection(worktreeService);
+	setContext(IdSelection, idSelection);
+	createCommitStore(undefined);
+
 	const { data, status, error } = $derived(worktreeService.getChanges(projectId));
 </script>
 
@@ -20,12 +28,10 @@
 	<Button kind="ghost" icon="sidebar-unfold" />
 </div>
 
-<div class="worktree-body">
+<div class="file-list">
 	<ReduxResult data={data?.changes} {status} {error}>
 		{#snippet children(changes)}
-			{#each changes || [] as change}
-				<p>{change.path}</p>
-			{/each}
+			<ChangeList {projectId} {changes} />
 		{/snippet}
 		{#snippet empty()}
 			<div class="text-12 text-body helper-text">
@@ -46,12 +52,16 @@
 		padding: 10px 8px 10px 14px;
 	}
 
-	.worktree-body {
+	.file-list {
+		display: flex;
 		flex: 1;
+		width: 100%;
 		display: flex;
+		justify-items: top;
 		flex-direction: column;
-		align-items: center;
-		justify-content: center;
+		align-items: top;
+		justify-content: top;
+		overflow: hidden;
 	}
 
 	.helper-text {
diff --git a/apps/desktop/src/lib/dragging/draggable.ts b/apps/desktop/src/lib/dragging/draggable.ts
index 0c9473f4d8..fcf37b40bc 100644
--- a/apps/desktop/src/lib/dragging/draggable.ts
+++ b/apps/desktop/src/lib/dragging/draggable.ts
@@ -1,4 +1,4 @@
-import { FileDropData, type DropData } from './draggables';
+import { FileDropData, ChangeDropData, type DropData } from './draggables';
 import { dropzoneRegistry } from './dropzone';
 import { type CommitStatus } from '$lib/commits/commit';
 import { getFileIcon } from '@gitbutler/ui/file/getFileIcon';
@@ -77,6 +77,7 @@ function setupDragHandlers(
 			return;
 		}
 
+		// This should be deleted once V3 design has shipped.
 		if (opts.data instanceof FileDropData) {
 			selectedElements = [];
 			for (const file of opts.data.files) {
@@ -97,6 +98,17 @@ function setupDragHandlers(
 			}
 		}
 
+		if (opts.data instanceof ChangeDropData) {
+			selectedElements = [];
+			for (const path of opts.data.changedPaths()) {
+				// Path is sufficient as a key since we query the parent container.
+				const element = parentNode.querySelector(`[data-file-id="${path}"]`);
+				if (element) {
+					selectedElements.push(element);
+				}
+			}
+		}
+
 		if (selectedElements.length === 0) {
 			selectedElements = [node];
 		}
diff --git a/apps/desktop/src/lib/dragging/draggables.ts b/apps/desktop/src/lib/dragging/draggables.ts
index f150835d15..2303be3a42 100644
--- a/apps/desktop/src/lib/dragging/draggables.ts
+++ b/apps/desktop/src/lib/dragging/draggables.ts
@@ -1,7 +1,10 @@
+import { key } from '$lib/selection/key';
 import { get, type Readable } from 'svelte/store';
 import type { AnyCommit, DetailedCommit } from '$lib/commits/commit';
 import type { AnyFile } from '$lib/files/file';
+import type { TreeChange } from '$lib/hunks/change';
 import type { Hunk, HunkLock } from '$lib/hunks/hunk';
+import type { IdSelection } from '$lib/selection/idSelection.svelte';
 
 export const NON_DRAGGABLE = {
 	disabled: true
@@ -20,6 +23,34 @@ export class HunkDropData {
 	}
 }
 
+export class ChangeDropData {
+	constructor(
+		readonly stackId: string,
+		readonly file: 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
+		 * be dragging all of them. If it is not part of the selection, we
+		 * want to ignore what is selected and only drag the actual file being
+		 * dragged.
+		 */
+		private selection: IdSelection,
+		readonly commitId?: string
+	) {}
+
+	changedPaths(): string[] {
+		if (this.selection.has(this.file.path, this.commitId)) {
+			return this.selection.values().map((value) => `${value.path}:${value.commitId}`);
+		} else {
+			return [key(this.file.path, this.commitId)];
+		}
+	}
+
+	get isCommitted(): boolean {
+		return !!this.commitId;
+	}
+}
+
 export class FileDropData {
 	constructor(
 		readonly branchId: string,
@@ -58,4 +89,4 @@ export class CommitDropData {
 	) {}
 }
 
-export type DropData = FileDropData | HunkDropData | CommitDropData;
+export type DropData = FileDropData | HunkDropData | CommitDropData | ChangeDropData;
diff --git a/apps/desktop/src/lib/files/utils.ts b/apps/desktop/src/lib/files/utils.ts
new file mode 100644
index 0000000000..9895aaa926
--- /dev/null
+++ b/apps/desktop/src/lib/files/utils.ts
@@ -0,0 +1,9 @@
+export function getFilename(path: string) {
+	return path.split(/[/\\]/).pop();
+}
+
+export function getDir(path: string) {
+	const parts = path.split(/[/\\]/);
+	parts.pop();
+	return parts.join(path.includes('\\') ? '\\' : '/');
+}
diff --git a/apps/desktop/src/lib/worktree/worktreeTypes.ts b/apps/desktop/src/lib/hunks/change.ts
similarity index 73%
rename from apps/desktop/src/lib/worktree/worktreeTypes.ts
rename to apps/desktop/src/lib/hunks/change.ts
index 62605942bb..388c545f56 100644
--- a/apps/desktop/src/lib/worktree/worktreeTypes.ts
+++ b/apps/desktop/src/lib/hunks/change.ts
@@ -1,70 +1,36 @@
+import type { Patch } from './hunk';
+
 /**
  * A patch in unified diff format to show how a resource changed or now looks like (in case it was newly added),
  * or how it previously looked like in case of a deletion.
  */
+
 export type UnifiedDiff =
 	| { readonly type: 'Binary' } // A binary file that can't be diffed.
 	| { readonly type: 'TooLarge'; readonly subject: TooLarge }
 	| { readonly type: 'Patch'; readonly subject: Patch };
-
 /** The file was too large and couldn't be diffed. */
+
 export type TooLarge = {
 	/** The size of the file on disk that made it too large. */
 	readonly sizeInBytes: number;
 };
-
-/**
- * A patch that if applied to the previous state of the resource would yield the current state.
- * Includes all non-overlapping hunks, including their context lines.
- */
-export type Patch = {
-	/** All non-overlapping hunks, including their context lines. */
-	readonly hunks: DiffHunk[];
-};
-
-/** A hunk as used in UnifiedDiff. */
-export type DiffHunk = {
-	/** The 1-based line number at which the previous version of the file started.*/
-	readonly oldStart: number;
-	/** The non-zero amount of lines included in the previous version of the file.*/
-	readonly oldLines: number;
-	/** The 1-based line number at which the new version of the file started.*/
-	readonly newStart: number;
-	/** The non-zero amount of lines included in the new version of the file.*/
-	readonly newLines: number;
-	/**
-	 * A unified-diff formatted patch like:
-	 *
-	 * ```diff
-	 * @@ -1,6 +1,8 @@
-	 * This is the first line of the original text.
-	 * -Line to be removed.
-	 * +Line that has been replaced.
-	 * This is another line in the file.
-	 * +This is a new line added at the end.
-	 * ```
-	 *
-	 * The line separator is the one used in the original file and may be `LF` or `CRLF`.
-	 * Note that the file-portion of the header isn't used here.
-	 */
-	readonly diff: string;
-};
-
 /** Contains the changes that are in the worktree */
+
 export type WorktreeChanges = {
 	/** Changes that could be committed. */
-	changes: TreeChange[];
+	readonly changes: TreeChange[];
 	/**
 	 * Changes that were in the index that we can't handle.
 	 * The user can see them and interact with them to clear them out before a commit can be made.
 	 */
-	ignoredChanges: IgnoredChange[];
+	readonly ignoredChanges: IgnoredChange[];
 };
-
 /**
  * An entry in the worktree that changed and thus is eligible to being committed.
  * It either lives (or lived) in the in `.git/index`, or in the `worktree`.
  */
+
 export type TreeChange = {
 	/** The *relative* path in the worktree where the entry can be found.*/
 	readonly path: string;
@@ -90,28 +56,27 @@ export type Status =
 	| { readonly type: 'Deletion'; readonly subject: Deletion }
 	| { readonly type: 'Modification'; readonly subject: Modification }
 	| { readonly type: 'Rename'; readonly subject: Rename };
-
 /** Something was added or scheduled to be added.*/
+
 export type Addition = {
 	/** @private */
 	readonly state: ChangeState;
 	readonly isUntracked: boolean;
 };
-
 /** Something was deleted.*/
+
 export type Deletion = {
 	/** @private */
 	readonly previousState: ChangeState;
 };
-
 /** A tracked entry was modified, i.e. content change, type change (eg. it is now a symlink), executable bit change.*/
+
 export type Modification = {
 	/** @private */
 	readonly previousState: ChangeState;
 	readonly state: ChangeState;
 	readonly flags: Flags | null;
 };
-
 /**
  * An entry was renamed from `previous_path` to its current location.
  * Note that this may include a content change, as well as a change of the executable bit.
diff --git a/apps/desktop/src/lib/hunks/hunk.ts b/apps/desktop/src/lib/hunks/hunk.ts
index 2dd424b2c9..942c730150 100644
--- a/apps/desktop/src/lib/hunks/hunk.ts
+++ b/apps/desktop/src/lib/hunks/hunk.ts
@@ -50,3 +50,39 @@ export class HunkLock {
 	branchId!: string;
 	commitId!: string;
 }
+
+/** A hunk as used in UnifiedDiff. */
+export type DiffHunk = {
+	/** The 1-based line number at which the previous version of the file started.*/
+	readonly oldStart: number;
+	/** The non-zero amount of lines included in the previous version of the file.*/
+	readonly oldLines: number;
+	/** The 1-based line number at which the new version of the file started.*/
+	readonly newStart: number;
+	/** The non-zero amount of lines included in the new version of the file.*/
+	readonly newLines: number;
+	/**
+	 * A unified-diff formatted patch like:
+	 *
+	 * ```diff
+	 * @@ -1,6 +1,8 @@
+	 * This is the first line of the original text.
+	 * -Line to be removed.
+	 * +Line that has been replaced.
+	 * This is another line in the file.
+	 * +This is a new line added at the end.
+	 * ```
+	 *
+	 * The line separator is the one used in the original file and may be `LF` or `CRLF`.
+	 * Note that the file-portion of the header isn't used here.
+	 */
+	readonly diff: string;
+}; /**
+ * A patch that if applied to the previous state of the resource would yield the current state.
+ * Includes all non-overlapping hunks, including their context lines.
+ */
+
+export type Patch = {
+	/** All non-overlapping hunks, including their context lines. */
+	readonly hunks: DiffHunk[];
+};
diff --git a/apps/desktop/src/lib/selection/idSelection.svelte.ts b/apps/desktop/src/lib/selection/idSelection.svelte.ts
new file mode 100644
index 0000000000..d5f4db205f
--- /dev/null
+++ b/apps/desktop/src/lib/selection/idSelection.svelte.ts
@@ -0,0 +1,98 @@
+import { key, splitKey } from './key';
+import { isDefined } from '@gitbutler/ui/utils/typeguards';
+import type { WorktreeService } from '$lib/worktree/worktreeService.svelte';
+
+/**
+ * File selection mechanism based on strings id's.
+ */
+export class IdSelection {
+	private state = $state([] as string[]);
+
+	/**
+	 * Each rendered file will check if it's selected when the selction
+	 * changes so it's best we make the `has()` lookup O(1).
+	 */
+	private map = $derived(
+		this.state.reduce(
+			(acc, obj) => {
+				acc[obj] = true;
+				return acc;
+			},
+			{} as Record<string, boolean>
+		)
+	);
+
+	constructor(private worktreeService: WorktreeService) {}
+
+	add(path: string, commitId?: string) {
+		const id = key(path, commitId);
+		if (this.map[id]) return;
+		this.state.push(id);
+	}
+
+	addMany(paths: string[], commitId?: string) {
+		for (const path of paths) {
+			this.add(path, commitId);
+		}
+	}
+
+	has(path: string, commitId?: string) {
+		return this.map[key(path, commitId)] ?? false;
+	}
+
+	set(path: string, commitId?: string) {
+		this.state = [];
+		this.state.push(key(path, commitId));
+	}
+
+	remove(path: string, commitId?: string) {
+		this.state.splice(
+			this.state.findIndex((k) => k === key(path, commitId)),
+			1
+		);
+	}
+
+	reverse() {
+		this.state.reverse();
+	}
+
+	clear() {
+		this.state = [];
+	}
+
+	// TODO: Perhaps remove this? Goto reference for more info.
+	firstPath() {
+		const key = this.state.at(0);
+		if (key) {
+			return splitKey(key).path;
+		}
+	}
+
+	values() {
+		return [...this.state].map((c) => {
+			return splitKey(c);
+		});
+	}
+
+	/**
+	 * Gets tree changes that correspond to selected id's. Note that the
+	 * worktree service call does not trigger any request for data, it
+	 * instead reuses the entry from listing if available.
+	 * TODO: Should this be able to load even if listing hasn't happened?
+	 */
+	treeChanges(projectId: string) {
+		return this.state
+			.map((id) => {
+				const file = splitKey(id);
+				if (file.commitId !== 'undefined') {
+					throw new Error('Changes for commits not implemented');
+				}
+				return this.worktreeService.getChange(projectId, file.path);
+			})
+			.filter(isDefined);
+	}
+
+	get length() {
+		return this.state.length;
+	}
+}
diff --git a/apps/desktop/src/lib/selection/idSelectionUtils.ts b/apps/desktop/src/lib/selection/idSelectionUtils.ts
new file mode 100644
index 0000000000..c6ee1de876
--- /dev/null
+++ b/apps/desktop/src/lib/selection/idSelectionUtils.ts
@@ -0,0 +1,234 @@
+/**
+ * Shared helper functions for manipulating selected files with keyboard.
+ *
+ * This file replaces `$lib/utils/selection.ts`, with the main difference
+ * being the type change from `AnyFile` to `TreeChange`.
+ */
+import { getSelectionDirection } from '$lib/utils/getSelectionDirection';
+import { KeyName } from '$lib/utils/hotkeys';
+import type { TreeChange } from '$lib/hunks/change';
+import type { IdSelection } from './idSelection.svelte';
+import type { SelectedFile } from './key';
+
+function getFile(files: TreeChange[], id: string): TreeChange | undefined {
+	return files.find((f) => f.path === id);
+}
+
+function getNextFile(files: TreeChange[], currentId: string): TreeChange | undefined {
+	const fileIndex = files.findIndex((f) => f.path === currentId);
+	return fileIndex !== -1 && fileIndex + 1 < files.length ? files[fileIndex + 1] : undefined;
+}
+
+function getPreviousFile(files: TreeChange[], currentId: string): TreeChange | undefined {
+	const fileIndex = files.findIndex((f) => f.path === currentId);
+	return fileIndex > 0 ? files[fileIndex - 1] : undefined;
+}
+
+function getTopFile(files: TreeChange[], selectedFileIds: SelectedFile[]): TreeChange | undefined {
+	for (const file of files) {
+		if (selectedFileIds.find((f) => f.path === file.path)) {
+			return file;
+		}
+	}
+	return undefined;
+}
+
+function getBottomFile(
+	files: TreeChange[],
+	selectedFileIds: SelectedFile[]
+): TreeChange | undefined {
+	for (let i = files.length - 1; i >= 0; i--) {
+		const file = files[i]!;
+		if (selectedFileIds.find((f) => f.path === file.path)) {
+			return file;
+		}
+	}
+	return undefined;
+}
+
+interface UpdateSelectionParams {
+	allowMultiple: boolean;
+	metaKey: boolean;
+	shiftKey: boolean;
+	key: string;
+	targetElement: HTMLElement;
+	files: TreeChange[];
+	selectedFileIds: SelectedFile[];
+	fileIdSelection: IdSelection;
+	commitId?: string;
+	preventDefault: () => void;
+}
+
+export function updateSelection({
+	allowMultiple,
+	metaKey,
+	shiftKey,
+	key,
+	targetElement,
+	files,
+	selectedFileIds,
+	fileIdSelection,
+	commitId,
+	preventDefault
+}: UpdateSelectionParams) {
+	if (!selectedFileIds[0] || selectedFileIds.length === 0) return;
+
+	const firstFileId = selectedFileIds[0].path;
+	const lastFileId = selectedFileIds.at(-1)!.path;
+
+	const topFileId = getTopFile(files, selectedFileIds)?.path;
+	const bottomFileId = getBottomFile(files, selectedFileIds)?.path;
+
+	let selectionDirection = getSelectionDirection(
+		files.findIndex((f) => f.path === lastFileId),
+		files.findIndex((f) => f.path === firstFileId)
+	);
+
+	function getAndAddFile(
+		id: string,
+		getFileFunc?: (files: TreeChange[], id: string) => TreeChange | undefined
+	) {
+		const file = getFileFunc?.(files, id) ?? getFile(files, id);
+		if (file) {
+			// if file is already selected, do nothing
+			if (selectedFileIds.find((f) => f.path === file.path)) {
+				return;
+			}
+
+			fileIdSelection.add(file.path, commitId);
+		}
+	}
+
+	function getAndClearExcept(
+		id: string,
+		getFileFunc?: (files: TreeChange[], id: string) => TreeChange | undefined
+	) {
+		const file = getFileFunc?.(files, id) ?? getFile(files, id);
+		if (file) {
+			fileIdSelection.set(file.path, commitId);
+		}
+	}
+
+	switch (key) {
+		case 'a':
+			if (allowMultiple && metaKey) {
+				preventDefault();
+				for (const file of files) {
+					fileIdSelection.add(file.path, commitId);
+				}
+			}
+			break;
+		case 'k':
+		case KeyName.Up:
+			preventDefault();
+			if (shiftKey && allowMultiple) {
+				// Handle case if only one file is selected
+				// we should update the selection direction
+				if (selectedFileIds.length === 1) {
+					selectionDirection = 'up';
+				} else if (selectionDirection === 'down') {
+					fileIdSelection.remove(lastFileId, commitId);
+				}
+				getAndAddFile(lastFileId, getPreviousFile);
+			} else {
+				// Handle reset of selection
+				if (selectedFileIds.length > 1 && topFileId !== undefined) {
+					getAndClearExcept(topFileId);
+				}
+
+				// Handle navigation
+				if (selectedFileIds.length === 1) {
+					getAndClearExcept(firstFileId, getPreviousFile);
+				}
+			}
+			break;
+
+		case 'j':
+		case KeyName.Down:
+			preventDefault();
+			if (shiftKey && allowMultiple) {
+				// Handle case if only one file is selected
+				// we should update the selection direction
+				if (selectedFileIds.length === 1) {
+					selectionDirection = 'down';
+				} else if (selectionDirection === 'up') {
+					fileIdSelection.remove(lastFileId, commitId);
+				}
+
+				getAndAddFile(lastFileId, getNextFile);
+			} else {
+				// Handle reset of selection
+				if (selectedFileIds.length > 1 && bottomFileId !== undefined) {
+					getAndClearExcept(bottomFileId);
+				}
+
+				// Handle navigation
+				if (selectedFileIds.length === 1) {
+					getAndClearExcept(firstFileId, getNextFile);
+				}
+			}
+			break;
+		case KeyName.Escape:
+			preventDefault();
+			fileIdSelection.clear();
+			targetElement.blur();
+			break;
+	}
+}
+
+export function selectFilesInList(
+	e: MouseEvent,
+	change: TreeChange,
+	sortedFiles: TreeChange[],
+	idSelection: IdSelection,
+	allowMultiple: boolean,
+	commitId: string | undefined
+) {
+	e.stopPropagation();
+	const isAlreadySelected = idSelection.has(change.path, commitId);
+
+	if (e.ctrlKey || e.metaKey) {
+		if (isAlreadySelected) {
+			idSelection.remove(change.path, commitId);
+		} else {
+			idSelection.add(change.path, commitId);
+		}
+	} else if (e.shiftKey && allowMultiple) {
+		// TODO(CTO): Not sure that this is accurate.
+		// TODO(mattias): I think you're right.
+		const initiallySelectedIndex = sortedFiles.findIndex((f) => f.path === idSelection.firstPath());
+
+		// detect the direction of the selection
+		const selectionDirection = getSelectionDirection(
+			initiallySelectedIndex,
+			sortedFiles.findIndex((f) => f.path === change.path)
+		);
+
+		const updatedSelection = sortedFiles.slice(
+			Math.min(
+				initiallySelectedIndex,
+				sortedFiles.findIndex((f) => f.path === change.path)
+			),
+			Math.max(
+				initiallySelectedIndex,
+				sortedFiles.findIndex((f) => f.path === change.path)
+			) + 1
+		);
+
+		// if the selection is in the opposite direction, reverse the selection
+		if (selectionDirection === 'down') {
+			idSelection.reverse();
+		}
+		idSelection.addMany(
+			updatedSelection.map((c) => c.path),
+			commitId
+		);
+	} else {
+		// if only one file is selected and it is already selected, unselect it
+		if (idSelection.length === 1 && isAlreadySelected) {
+			idSelection.clear();
+		} else {
+			idSelection.set(change.path, commitId);
+		}
+	}
+}
diff --git a/apps/desktop/src/lib/selection/key.ts b/apps/desktop/src/lib/selection/key.ts
new file mode 100644
index 0000000000..6049d9f076
--- /dev/null
+++ b/apps/desktop/src/lib/selection/key.ts
@@ -0,0 +1,17 @@
+/**
+ * Represents a selected file, can typically have a context menu
+ * and/or be dragged.
+ */
+export type SelectedFile = {
+	path: string;
+	commitId?: string;
+};
+
+export function key(path: string, commitId?: string) {
+	return `${path}:${commitId}`;
+}
+
+export function splitKey(key: string) {
+	const [path, commitId] = key.split(':');
+	return { path, commitId } as SelectedFile;
+}
diff --git a/apps/desktop/src/lib/utils/fileStatus.ts b/apps/desktop/src/lib/utils/fileStatus.ts
index 283d1d4cb6..b0150e93c7 100644
--- a/apps/desktop/src/lib/utils/fileStatus.ts
+++ b/apps/desktop/src/lib/utils/fileStatus.ts
@@ -1,4 +1,5 @@
 import { type AnyFile } from '$lib/files/file';
+import type { TreeChange } from '$lib/hunks/change';
 
 export type FileStatus = 'A' | 'M' | 'D';
 
@@ -13,3 +14,16 @@ export function computeFileStatus(file: AnyFile): FileStatus {
 	}
 	return 'M';
 }
+
+export function computeChangeStatus(change: TreeChange): FileStatus {
+	switch (change.status.type) {
+		case 'Addition':
+			return 'A';
+		case 'Deletion':
+			return 'D';
+		case 'Modification':
+			return 'M';
+		case 'Rename':
+			return 'M';
+	}
+}
diff --git a/apps/desktop/src/lib/utils/selection.ts b/apps/desktop/src/lib/utils/selection.ts
index a0bce550f4..ed74e20781 100644
--- a/apps/desktop/src/lib/utils/selection.ts
+++ b/apps/desktop/src/lib/utils/selection.ts
@@ -1,5 +1,7 @@
 /**
  * Shared helper functions for manipulating selected files with keyboard.
+ *
+ * TODO: Remove this file once V3 has shipped.
  */
 import { getSelectionDirection } from './getSelectionDirection';
 import { KeyName } from './hotkeys';
diff --git a/apps/desktop/src/lib/worktree/changeTree.ts b/apps/desktop/src/lib/worktree/changeTree.ts
new file mode 100644
index 0000000000..f2a3d54282
--- /dev/null
+++ b/apps/desktop/src/lib/worktree/changeTree.ts
@@ -0,0 +1,72 @@
+/**
+ * It's easier to understand a hierarchical structure than a flat list.
+ *
+ * This module provides support for tranforming a list of files into a
+ * hirerarchical structure for easy rendering.
+ *
+ * Note: This is a V3 replacement for `fileTree.ts`, the main change
+ * being type change from `AnyFile` to `TreeChange`.
+ */
+
+import type { TreeChange } from '$lib/hunks/change';
+
+export interface TreeNode {
+	name: string;
+	file?: TreeChange;
+	children: TreeNode[];
+	parent?: TreeNode;
+}
+
+function createNode(acc: TreeNode, pathParts: string[]) {
+	if (pathParts.length === 0) {
+		return acc;
+	}
+
+	const node = acc.children?.find((f) => f.name === pathParts[0]);
+	if (node) return createNode(node, pathParts.slice(1));
+
+	const newDir = { name: pathParts[0] ? pathParts[0] : '', children: [], parent: acc };
+	acc.children.push(newDir);
+
+	return createNode(newDir, pathParts.slice(1));
+}
+
+export function sortChildren(node: TreeNode) {
+	node.children.sort((a, b) => {
+		if (a.file && !b.file) {
+			return 1;
+		} else if (!a.file && b.file) {
+			return -1;
+		} else {
+			return a.name < b.name ? -1 : 1;
+		}
+	});
+	for (const child of node.children) {
+		sortChildren(child);
+	}
+}
+
+export function filesToFileTree(files: TreeChange[]): TreeNode {
+	const acc: TreeNode = { name: 'root', children: [] };
+	files.forEach((f) => {
+		const pathParts = f.path.split('/');
+		const node = createNode(acc, pathParts);
+		node.file = f;
+	});
+	sortChildren(acc);
+	return acc;
+}
+
+function fileTreeToList(node: TreeNode): TreeChange[] {
+	const list: TreeChange[] = [];
+	if (node.file) list.push(node.file);
+	node.children.forEach((child) => {
+		list.push(...fileTreeToList(child));
+	});
+	return list;
+}
+
+// Sorts a file list the same way it is sorted in a file tree
+export function sortLikeFileTree(files: TreeChange[]): TreeChange[] {
+	return fileTreeToList(filesToFileTree(files));
+}
diff --git a/apps/desktop/src/lib/worktree/worktreeService.svelte.ts b/apps/desktop/src/lib/worktree/worktreeService.svelte.ts
index e3e9eb0f45..da1980d762 100644
--- a/apps/desktop/src/lib/worktree/worktreeService.svelte.ts
+++ b/apps/desktop/src/lib/worktree/worktreeService.svelte.ts
@@ -3,7 +3,7 @@ import { hasTauriExtra, reduxApi } from '$lib/redux/api';
 import { DesktopRedux } from '$lib/redux/store.svelte';
 import { ReduxTag } from '$lib/redux/tags';
 import { createSelector } from '@reduxjs/toolkit';
-import type { WorktreeChanges, TreeChange, UnifiedDiff } from './worktreeTypes';
+import type { WorktreeChanges, TreeChange, UnifiedDiff } from '$lib/hunks/change';
 
 export class WorktreeService {
 	private worktreeApi = reduxApi.injectEndpoints({
diff --git a/apps/desktop/src/routes/+layout.svelte b/apps/desktop/src/routes/+layout.svelte
index 0a26af3ca9..cf10c5d4b7 100644
--- a/apps/desktop/src/routes/+layout.svelte
+++ b/apps/desktop/src/routes/+layout.svelte
@@ -46,6 +46,7 @@
 	import { createKeybind } from '$lib/utils/hotkeys';
 	import { unsubscribe } from '$lib/utils/unsubscribe';
 	import { openExternalUrl } from '$lib/utils/url';
+	import { WorktreeService } from '$lib/worktree/worktreeService.svelte';
 	import { BranchService as CloudBranchService } from '@gitbutler/shared/branches/branchService';
 	import { LatestBranchLookupService } from '@gitbutler/shared/branches/latestBranchLookupService';
 	import { PatchService as CloudPatchService } from '@gitbutler/shared/branches/patchService';
@@ -75,8 +76,9 @@
 	setContext(SETTINGS, userSettings);
 
 	const appState = new AppState();
-	const desktopState = new DesktopRedux(data.tauri);
-	const stackService = new StackService(desktopState);
+	const redux = new DesktopRedux(data.tauri);
+	const stackService = new StackService(redux);
+	const worktreeService = new WorktreeService(redux);
 	const feedService = new FeedService(data.cloud, appState.appDispatch);
 	const organizationService = new OrganizationService(data.cloud, appState.appDispatch);
 	const cloudUserService = new CloudUserService(data.cloud, appState.appDispatch);
@@ -92,7 +94,7 @@
 
 	setContext(AppState, appState);
 	setContext(AppDispatch, appState.appDispatch);
-	setContext(DesktopRedux, desktopState);
+	setContext(DesktopRedux, redux);
 	setContext(FeedService, feedService);
 	setContext(OrganizationService, organizationService);
 	setContext(CloudUserService, cloudUserService);
@@ -126,6 +128,7 @@
 	setContext(AppSettings, data.appSettings);
 	setContext(GitHubAuthenticationService, data.githubAuthenticationService);
 	setContext(StackService, stackService);
+	setContext(WorktreeService, worktreeService);
 
 	setNameNormalizationServiceContext(new IpcNameNormalizationService(invoke));
 
diff --git a/packages/ui/src/lib/file/FileListItem.svelte b/packages/ui/src/lib/file/FileListItem.svelte
index 1d9f85c714..4578434bce 100644
--- a/packages/ui/src/lib/file/FileListItem.svelte
+++ b/packages/ui/src/lib/file/FileListItem.svelte
@@ -151,7 +151,6 @@
 
 <style lang="postcss">
 	.file-list-item {
-		flex: 1;
 		display: flex;
 		align-items: center;
 		padding: 6px 14px;
diff --git a/packages/ui/src/styles/core/reset.css b/packages/ui/src/styles/core/reset.css
index 1eeb1be027..69dc98a976 100644
--- a/packages/ui/src/styles/core/reset.css
+++ b/packages/ui/src/styles/core/reset.css
@@ -238,7 +238,6 @@
 	iframe,
 	img,
 	object,
-	svg,
 	video {
 		display: block;
 		vertical-align: middle;