POC: Add information about file locking to the file list

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

@@ -0,0 +1,98 @@
+<script lang="ts" module>
+	import type { FileDependencies } from '$lib/dependencies/dependencies';
+
+	export type FileDependencyData =
+		| {
+				type: 'multiple';
+				data: Map<string, FileDependencies>;
+		  }
+		| {
+				type: 'single';
+				data: FileDependencies;
+		  };
+</script>
+
+<script lang="ts">
+	import DependencyService from '$lib/dependencies/dependencyService.svelte';
+	import { StackService } from '$lib/stacks/stackService.svelte';
+	import { WorktreeService } from '$lib/worktree/worktreeService.svelte';
+	import { inject } from '@gitbutler/shared/context';
+
+	type BaseProps = {
+		type: 'single' | 'multiple';
+		projectId: string;
+		isCommitting: boolean;
+	};
+
+	type SingleFile = BaseProps & {
+		type: 'single';
+		filePath: string;
+	};
+
+	type MultipleFiles = BaseProps & {
+		type: 'multiple';
+		filePaths: string[];
+	};
+
+	type Props = SingleFile | MultipleFiles;
+
+	const props: Props = $props();
+
+	const [worktreeService, dependencyService, stackService] = inject(
+		WorktreeService,
+		DependencyService,
+		StackService
+	);
+
+	const stacks = $derived(stackService.stacks(props.projectId));
+	const hasMultipleStacks = $derived(stacks.current.data && stacks.current.data.length > 1);
+
+	const changesTimestamp = $derived(worktreeService.getChangesTimeStamp(props.projectId));
+	// For now, only show the file dependencies when committing, and there are multiple stacks applied
+	const canFetchDependencies = $derived(props.isCommitting && hasMultipleStacks);
+
+	const fileDependencies = $derived.by(() => {
+		// Derivation of the dependencies depends on the timestamp of the last time the file changes were updated.
+		if (changesTimestamp.current === undefined || !canFetchDependencies) return undefined;
+
+		switch (props.type) {
+			case 'single':
+				return dependencyService.fileDependencies(
+					props.projectId,
+					changesTimestamp.current,
+					props.filePath
+				);
+			case 'multiple':
+				return dependencyService.filesDependencies(
+					props.projectId,
+					changesTimestamp.current,
+					props.filePaths
+				);
+		}
+	});
+
+	export const imports = {
+		get deps(): FileDependencyData | undefined {
+			const data = fileDependencies?.current.data;
+			if (data === undefined) return undefined;
+
+			if (props.type === 'single' && !(data instanceof Map)) {
+				return {
+					type: 'single',
+					data
+				};
+			}
+			if (props.type === 'multiple' && data instanceof Map) {
+				return {
+					type: 'multiple',
+					data
+				};
+			}
+
+			// If the data is not in the expected format, throw an error.
+			throw new Error(
+				`Expected file dependencies to be in the format of ${props.type}, but got ${typeof data}`
+			);
+		}
+	};
+</script>

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

@@ -9,6 +9,7 @@
 	import { chunk } from '$lib/utils/array';
 	import { sortLikeFileTree } from '$lib/worktree/changeTree';
 	import { getContext } from '@gitbutler/shared/context';
+	import type { FileDependencies } from '$lib/dependencies/dependencies';
 	import type { TreeChange } from '$lib/hunks/change';
 	import type { SelectionId } from '$lib/selection/key';
 
@@ -20,9 +21,18 @@
 		showCheckboxes?: boolean;
 		selectionId: SelectionId;
 		listActive: boolean;
+		fileDependencies?: Map<string, FileDependencies>;
 	};
 
-	const { projectId, changes, listMode, selectionId, showCheckboxes, listActive }: Props = $props();
+	const {
+		projectId,
+		changes,
+		listMode,
+		selectionId,
+		showCheckboxes,
+		listActive,
+		fileDependencies
+	}: Props = $props();
 
 	let currentDisplayIndex = $state(0);
 
@@ -65,6 +75,7 @@
 		onclick={(e) => {
 			selectFilesInList(e, change, visibleFiles, idSelection, true, idx, selectionId);
 		}}
+		locked={fileDependencies?.has(change.path)}
 	/>
 {/snippet}
 

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

@@ -34,6 +34,7 @@
 		onclick?: (e: MouseEvent) => void;
 		onkeydown?: (e: KeyboardEvent) => void;
 		onCloseClick?: () => void;
+		locked?: boolean;
 	}
 
 	const {

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

@@ -1,11 +1,11 @@
 <script lang="ts">
+	import FileDependenciesPlugin from '$components/v3/FileDependenciesPlugin.svelte';
 	import HunkContextMenu from '$components/v3/HunkContextMenu.svelte';
 	import LineLocksWarning from '$components/v3/LineLocksWarning.svelte';
 	import LineSelection from '$components/v3/unifiedDiffLineSelection.svelte';
 	import binarySvg from '$lib/assets/empty-state/binary.svg?raw';
 	import emptyFileSvg from '$lib/assets/empty-state/empty-file.svg?raw';
 	import tooLargeSvg from '$lib/assets/empty-state/too-large.svg?raw';
-	import DependencyService from '$lib/dependencies/dependencyService.svelte';
 	import { draggableChips } from '$lib/dragging/draggable';
 	import { ChangeDropData } from '$lib/dragging/draggables';
 	import { canBePartiallySelected, getLineLocks, type DiffHunk } from '$lib/hunks/hunk';
@@ -18,9 +18,7 @@
 	import { IdSelection } from '$lib/selection/idSelection.svelte';
 	import { type SelectionId } from '$lib/selection/key';
 	import { SETTINGS, type Settings } from '$lib/settings/userSettings';
-	import { StackService } from '$lib/stacks/stackService.svelte';
 	import { UiState } from '$lib/state/uiState.svelte';
-	import { WorktreeService } from '$lib/worktree/worktreeService.svelte';
 	import { getContextStoreBySymbol, inject } from '@gitbutler/shared/context';
 	import EmptyStatePlaceholder from '@gitbutler/ui/EmptyStatePlaceholder.svelte';
 	import HunkDiff from '@gitbutler/ui/HunkDiff.svelte';
@@ -37,30 +35,34 @@
 	};
 
 	const { projectId, selectable = false, change, diff, selectionId }: Props = $props();
-	const [project, uiState, stackService] = inject(Project, UiState, StackService);
+	const [project, uiState] = inject(Project, UiState);
+
 	let contextMenu = $state<ReturnType<typeof HunkContextMenu>>();
+	let fileDependenciesPlugin = $state<ReturnType<typeof FileDependenciesPlugin>>();
 	let viewport = $state<HTMLDivElement>();
+
 	const projectState = $derived(uiState.project(projectId));
 	const drawerPage = $derived(projectState.drawerPage.current);
-	const stacks = $derived(stackService.stacks(projectId));
-	const hasMultipleStacks = $derived(stacks.current.data && stacks.current.data.length > 1);
 
 	const workspacesParams = $derived(isWorkspacePath());
 
 	// This is the stack ID that's being viewed. Not **necessarily** the stack ID associated with
 	// the change and diff in question.
 	const viewingStackId = $derived(workspacesParams?.stackId);
-	const isCommiting = $derived(drawerPage === 'new-commit');
+	const isCommitting = $derived(drawerPage === 'new-commit');
+	const fileLocks = $derived(
+		fileDependenciesPlugin?.imports.deps?.type === 'single'
+			? fileDependenciesPlugin.imports.deps.data.dependencies
+			: []
+	);
 
 	const uncommittedChange = $derived(selectionId.type === 'worktree');
 	const readonly = $derived(!uncommittedChange);
 
-	const [changeSelection, idSelection, lineSelection, dependencyService, worktreeService] = inject(
+	const [changeSelection, idSelection, lineSelection] = inject(
 		ChangeSelectionService,
 		IdSelection,
-		LineSelection,
-		DependencyService,
-		WorktreeService
+		LineSelection
 	);
 
 	const changeSelectionResult = $derived(changeSelection.getById(change.path));
@@ -70,14 +72,6 @@
 		pathBytes: change.pathBytes
 	});
 
-	const changesTimestamp = $derived(worktreeService.getChangesTimeStamp(projectId));
-	const fileDependencies = $derived(
-		// For now, only show the file dependencies when commiting, and there are multiple stacks applied
-		changesTimestamp.current !== undefined && isCommiting && hasMultipleStacks
-			? dependencyService.fileDependencies(projectId, changesTimestamp.current, change.path)
-			: undefined
-	);
-
 	const userSettings = getContextStoreBySymbol<Settings>(SETTINGS);
 
 	$effect(() => {
@@ -197,15 +191,19 @@
 	}
 </script>
 
+<FileDependenciesPlugin
+	type="single"
+	bind:this={fileDependenciesPlugin}
+	{projectId}
+	{isCommitting}
+	filePath={change.path}
+/>
+
 <div class="diff-section" bind:this={viewport}>
 	{#if diff.type === 'Patch'}
 		{#each diff.subject.hunks as hunk}
 			{@const [staged, stagedLines] = getStageState(hunk)}
-			{@const [fullyLocked, lineLocks] = getLineLocks(
-				viewingStackId,
-				hunk,
-				fileDependencies?.current.data?.dependencies ?? []
-			)}
+			{@const [fullyLocked, lineLocks] = getLineLocks(viewingStackId, hunk, fileLocks)}
 			<div
 				class="hunk-content no-select"
 				use:draggableChips={{
@@ -217,7 +215,7 @@
 			>
 				<HunkDiff
 					draggingDisabled={readonly}
-					hideCheckboxes={!isCommiting}
+					hideCheckboxes={!isCommitting}
 					filePath={change.path}
 					hunkStr={hunk.diff}
 					{staged}

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

@@ -1,13 +1,16 @@
 <script lang="ts">
 	import ScrollableContainer from '$components/ConfigurableScrollableContainer.svelte';
 	import ReduxResult from '$components/ReduxResult.svelte';
+	import FileDependenciesPlugin from '$components/v3/FileDependenciesPlugin.svelte';
 	import FileList from '$components/v3/FileList.svelte';
 	import FileListMode from '$components/v3/FileListMode.svelte';
 	import WorktreeTipsFooter from '$components/v3/WorktreeTipsFooter.svelte';
 	import noChanges from '$lib/assets/illustrations/no-changes.svg?raw';
 	import { createCommitStore } from '$lib/commits/contexts';
+	import { getSelectableFiles } from '$lib/dependencies/dependencies';
 	import { Focusable, FocusManager } from '$lib/focus/focusManager.svelte';
 	import { focusable } from '$lib/focus/focusable.svelte';
+	import { isWorkspacePath } from '$lib/routes/routes.svelte';
 	import { ChangeSelectionService, type SelectedFile } from '$lib/selection/changeSelection.svelte';
 	import { StackService } from '$lib/stacks/stackService.svelte';
 	import { UiState } from '$lib/state/uiState.svelte';
@@ -33,6 +36,8 @@
 		FocusManager
 	);
 
+	let fileDependenciesPlugin = $state<ReturnType<typeof FileDependenciesPlugin>>();
+
 	const projectState = $derived(uiState.project(projectId));
 	const drawerPage = $derived(projectState.drawerPage.get());
 	const isCommitting = $derived(drawerPage.current === 'new-commit');
@@ -47,6 +52,22 @@
 	const changesResult = $derived(worktreeService.getChanges(projectId));
 	const affectedPaths = $derived(changesResult.current.data?.map((c) => c.path));
 
+	const workspacesParams = $derived(isWorkspacePath());
+
+	// This is the stack ID that's being viewed. Not **necessarily** the stack ID associated with
+	// the change and diff in question.
+	const viewingStackId = $derived(workspacesParams?.stackId);
+
+	const fileDependencies = $derived(
+		fileDependenciesPlugin?.imports.deps?.type === 'multiple'
+			? fileDependenciesPlugin.imports.deps.data
+			: undefined
+	);
+
+	const selectableFiles = $derived<SelectedFile[]>(
+		getSelectableFiles(changesResult.current.data, fileDependencies, viewingStackId)
+	);
+
 	let focusGroup = focusManager.radioGroup({
 		triggers: [Focusable.UncommittedChanges, Focusable.ChangedFiles]
 	});
@@ -69,14 +90,7 @@
 	let listMode: 'list' | 'tree' = $state('list');
 
 	function selectEverything() {
-		const affectedPaths =
-			changesResult.current.data?.map((c) => [c.path, c.pathBytes] as const) ?? [];
-		const files: SelectedFile[] = affectedPaths.map(([path, pathBytes]) => ({
-			path,
-			pathBytes,
-			type: 'full'
-		}));
-		changeSelection.addMany(files);
+		changeSelection.addMany(selectableFiles);
 	}
 
 	function updateCommitSelection() {
@@ -104,6 +118,14 @@
 	let isFooterSticky = $state(false);
 </script>
 
+<FileDependenciesPlugin
+	type="multiple"
+	bind:this={fileDependenciesPlugin}
+	{projectId}
+	{isCommitting}
+	filePaths={affectedPaths ?? []}
+/>
+
 <ReduxResult {stackId} {projectId} result={changesResult.current}>
 	{#snippet children(changes, { stackId, projectId })}
 		<ScrollableContainer wide>
@@ -133,6 +155,7 @@
 				{#if changes.length > 0}
 					<div class="uncommitted-changes">
 						<FileList
+							{fileDependencies}
 							selectionId={{ type: 'worktree' }}
 							showCheckboxes={isCommitting}
 							{projectId}