highlight-locking-relationships (#11351)

* make "change-status" icon bolder

* fix(ui): simplify-file border logic
fix(file-list): pass locked prop simplify hideBorder condition

* update filelistitem icons

- lock icon
- status icon

* highlight commits with locking changes

* update color tokens usage

in order to support upcoming dt changes

* chore(deps): upgrade @gitbutler/design-core from 1.3.9 to 1.3.11 across workspace files to pick up bug fixes and updated integrity hashes

* remove unused class

Author: PavelLaptev

apps/desktop/src/components/ChangedFiles.svelte

@@ -105,7 +105,6 @@
 				{draggableFiles}
 				{ancestorMostConflictedCommitId}
 				{allowUnselect}
-				hideLastFileBorder={false}
 			/>
 		{:else}
 			<EmptyStatePlaceholder image={emptyFolderSvg} width={180} gap={4}>

apps/desktop/src/components/CommitRow.svelte

@@ -106,6 +106,7 @@
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
 	data-testid={TestId.CommitRow}
+	data-commit-id={args.disableCommitActions ? undefined : args.commitId}
 	bind:this={container}
 	role="button"
 	tabindex="0"
@@ -240,6 +241,24 @@
 				color: var(--clr-theme-err-element);
 			}
 		}
+
+		&:global(.dependency-highlighted) {
+			animation: dependency-pulse 4s ease forwards;
+			transition: background-color var(--transition-fast);
+		}
+	}
+
+	@keyframes dependency-pulse {
+		0% {
+			background-color: transparent;
+		}
+		5% {
+			background-color: var(--clr-scale-warn-80);
+		}
+		80%,
+		100% {
+			background-color: var(--clr-scale-warn-90);
+		}
 	}
 
 	.commit-row__select-indicator {

apps/desktop/src/components/FileList.svelte

@@ -8,6 +8,12 @@
 	import { AI_SERVICE } from '$lib/ai/service';
 	import { projectAiGenEnabled } from '$lib/config/config';
 	import { conflictEntryHint } from '$lib/conflictEntryPresence';
+	import {
+		getLockedCommitIds,
+		getLockedStackIds,
+		isFileLocked
+	} from '$lib/dependencies/dependencies';
+	import { DEPENDENCY_SERVICE } from '$lib/dependencies/dependencyService.svelte';
 	import { editPatch } from '$lib/editMode/editPatchUtils';
 	import { abbreviateFolders, changesToFileTree } from '$lib/files/filetreeV3';
 	import { type TreeChange, isExecutableStatus } from '$lib/hunks/change';
@@ -35,9 +41,9 @@
 		conflictEntries?: ConflictEntriesObj;
 		draggableFiles?: boolean;
 		ancestorMostConflictedCommitId?: string;
-		hideLastFileBorder?: boolean;
 		onselect?: (change: TreeChange) => void;
 		allowUnselect?: boolean;
+		showLockedIndicator?: boolean;
 	};
 
 	const {
@@ -50,16 +56,17 @@
 		conflictEntries,
 		draggableFiles,
 		ancestorMostConflictedCommitId,
-		hideLastFileBorder = true,
 		onselect,
-		allowUnselect = true
+		allowUnselect = true,
+		showLockedIndicator = false
 	}: Props = $props();
 
 	const focusManager = inject(FOCUS_MANAGER);
 	const idSelection = inject(FILE_SELECTION_MANAGER);
 	const aiService = inject(AI_SERVICE);
 	const actionService = inject(ACTION_SERVICE);
 	const modeService = injectOptional(MODE_SERVICE, undefined);
+	const dependencyService = inject(DEPENDENCY_SERVICE);
 
 	const [autoCommit] = actionService.autoCommit;
 	const [branchChanges] = actionService.branchChanges;
@@ -68,6 +75,12 @@
 	let editPatchModal: EditPatchConfirmModal | undefined = $state();
 	let selectedFilePath = $state('');
 
+	const filePaths = $derived(changes.map((change) => change.path));
+	const fileDependenciesQuery = $derived(
+		showLockedIndicator ? dependencyService.filesDependencies(projectId, filePaths) : null
+	);
+	const fileDependencies = $derived(fileDependenciesQuery?.result.data || []);
+
 	function showEditPatchConfirmation(filePath: string) {
 		selectedFilePath = filePath;
 		editPatchModal?.show();
@@ -240,6 +253,13 @@
 {#snippet fileTemplate(change: TreeChange, idx: number, depth: number = 0)}
 	{@const isExecutable = isExecutableStatus(change.status)}
 	{@const selected = idSelection.has(change.path, selectionId)}
+	{@const locked = showLockedIndicator && isFileLocked(change.path, fileDependencies)}
+	{@const lockedCommitIds = showLockedIndicator
+		? getLockedCommitIds(change.path, fileDependencies)
+		: []}
+	{@const lockedStackIds = showLockedIndicator
+		? getLockedStackIds(change.path, fileDependencies)
+		: []}
 	<FileListItemWrapper
 		{selectionId}
 		{change}
@@ -249,7 +269,10 @@
 		{listMode}
 		{depth}
 		{active}
-		hideBorder={hideLastFileBorder && idx === visibleFiles.length - 1}
+		{locked}
+		{lockedCommitIds}
+		{lockedStackIds}
+		hideBorder={idx === visibleFiles.length - 1}
 		draggable={draggableFiles}
 		executable={isExecutable}
 		showCheckbox={showCheckboxes}

apps/desktop/src/components/FileListItemWrapper.svelte

@@ -10,6 +10,8 @@
 	import { FILE_SELECTION_MANAGER } from '$lib/selection/fileSelectionManager.svelte';
 	import { key, type SelectionId } from '$lib/selection/key';
 	import { UNCOMMITTED_SERVICE } from '$lib/selection/uncommittedService.svelte';
+	import { getStackName } from '$lib/stacks/stack';
+	import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
 	import { computeChangeStatus } from '$lib/utils/fileStatus';
 	import { inject } from '@gitbutler/core/context';
 	import { FileListItem, FileViewHeader, TestId } from '@gitbutler/ui';
@@ -39,6 +41,9 @@
 		transparent?: boolean;
 		sticky?: boolean;
 		active?: boolean;
+		locked?: boolean;
+		lockedCommitIds?: string[];
+		lockedStackIds?: string[];
 		onclick?: (e: MouseEvent) => void;
 		onkeydown?: (e: KeyboardEvent) => void;
 		onCloseClick?: () => void;
@@ -64,17 +69,20 @@
 		transparent,
 		focusableOpts,
 		active,
+		locked,
+		lockedCommitIds = [],
+		lockedStackIds = [],
 		onclick,
 		onkeydown,
 		onCloseClick,
 		hideBorder,
 		scrollContainer
 	}: Props = $props();
-
 	const idSelection = inject(FILE_SELECTION_MANAGER);
 	const uncommittedService = inject(UNCOMMITTED_SERVICE);
 	const dropzoneRegistry = inject(DROPZONE_REGISTRY);
 	const dragStateService = inject(DRAG_STATE_SERVICE);
+	const stackService = inject(STACK_SERVICE);
 
 	let contextMenu = $state<ReturnType<typeof ChangedFilesContextMenu>>();
 	let draggableEl: HTMLDivElement | undefined = $state();
@@ -119,6 +127,35 @@
 
 	const conflict = $derived(conflictEntries ? conflictEntries.entries[change.path] : undefined);
 	const draggableDisabled = $derived(!draggable || showCheckbox);
+
+	const lockText = $derived.by(() => {
+		if (!locked || lockedStackIds.length === 0) return undefined;
+
+		const stacks = stackService.stacks(projectId).result.data ?? [];
+		const stackNames = stacks
+			.filter((stack) => stack.id && lockedStackIds.includes(stack.id))
+			.map(getStackName);
+
+		return stackNames.length === 1
+			? `Depends on changes in:\n '${stackNames[0]}'`
+			: `Depends on changes in:\n ${stackNames.join(', ')}`;
+	});
+
+	function handleLockHover() {
+		lockedCommitIds.forEach((commitId) => {
+			const commitRows = document.querySelectorAll(`[data-commit-id="${commitId}"]`);
+			commitRows.forEach((row) => {
+				row.classList.add('dependency-highlighted');
+			});
+		});
+	}
+
+	function handleLockUnhover() {
+		const highlighted = document.querySelectorAll('.dependency-highlighted');
+		highlighted.forEach((row) => {
+			row.classList.remove('dependency-highlighted');
+		});
+	}
 </script>
 
 <div
@@ -188,7 +225,10 @@
 			draggable={!draggableDisabled}
 			{onkeydown}
 			{hideBorder}
-			locked={false}
+			locked={locked || false}
+			{lockText}
+			onlockhover={handleLockHover}
+			onlockunhover={handleLockUnhover}
 			conflicted={!!conflict}
 			conflictHint={conflict ? conflictEntryHint(conflict) : undefined}
 			{onclick}

apps/desktop/src/components/SnapshotCard.svelte

@@ -234,7 +234,6 @@
 								stackId={undefined}
 								changes={files}
 								listMode="list"
-								hideLastFileBorder={false}
 								onselect={(change) => onDiffClick(change.path)}
 								allowUnselect={false}
 							/>

apps/desktop/src/components/WorktreeChanges.svelte

@@ -103,8 +103,8 @@
 			{projectId}
 			{listMode}
 			{stackId}
-			hideLastFileBorder={mode !== 'unassigned'}
 			{onselect}
+			showLockedIndicator={mode === 'unassigned'}
 		/>
 	</div>
 {/snippet}

apps/desktop/src/lib/dependencies/dependencies.ts

@@ -162,3 +162,57 @@ export function aggregateFileDependencies(
 
 	return [filePaths, fileDependencies];
 }
+
+/**
+ * Checks if a file has any locked dependencies.
+ *
+ * @param filePath - The path of the file to check.
+ * @param fileDependencies - Array of file dependencies to search through.
+ * @returns `true` if the file has any locks, `false` otherwise.
+ */
+export function isFileLocked(filePath: string, fileDependencies: FileDependencies[]): boolean {
+	const deps = fileDependencies.find((dep) => dep.path === filePath);
+	return deps ? deps.dependencies.some((dep) => dep.locks.length > 0) : false;
+}
+
+/**
+ * Extracts unique commit IDs from a file's dependencies.
+ *
+ * @param filePath - The path of the file to get commit IDs for.
+ * @param fileDependencies - Array of file dependencies to search through.
+ * @returns Array of unique commit IDs that the file depends on.
+ */
+export function getLockedCommitIds(
+	filePath: string,
+	fileDependencies: FileDependencies[]
+): string[] {
+	const deps = fileDependencies.find((dep) => dep.path === filePath);
+	if (!deps) return [];
+
+	const commitIds = new Set<string>();
+	deps.dependencies.forEach((dep) => {
+		dep.locks.forEach((lock) => commitIds.add(lock.commitId));
+	});
+	return Array.from(commitIds);
+}
+
+/**
+ * Extracts unique stack IDs from a file's dependencies.
+ *
+ * @param filePath - The path of the file to get stack IDs for.
+ * @param fileDependencies - Array of file dependencies to search through.
+ * @returns Array of unique stack IDs that the file depends on.
+ */
+export function getLockedStackIds(
+	filePath: string,
+	fileDependencies: FileDependencies[]
+): string[] {
+	const deps = fileDependencies.find((dep) => dep.path === filePath);
+	if (!deps) return [];
+
+	const stackIds = new Set<string>();
+	deps.dependencies.forEach((dep) => {
+		dep.locks.forEach((lock) => stackIds.add(lock.stackId));
+	});
+	return Array.from(stackIds);
+}

apps/web/src/routes/(home)/components/CtaButton.svelte

@@ -196,14 +196,6 @@
 		pointer-events: none;
 	}
 
-	.canvas-container {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-	}
-
 	.download-btn__canvas-cover {
 		z-index: 1;
 		position: absolute;

packages/ui/src/lib/components/file/FileListItem.svelte

@@ -47,6 +47,8 @@
 		onresolveclick?: (e: MouseEvent) => void;
 		onkeydown?: (e: KeyboardEvent) => void;
 		oncontextmenu?: (e: MouseEvent) => void;
+		onlockhover?: () => void;
+		onlockunhover?: () => void;
 	}
 
 	let {
@@ -79,7 +81,9 @@
 		ondblclick,
 		onresolveclick,
 		onkeydown,
-		oncontextmenu
+		oncontextmenu,
+		onlockhover,
+		onlockunhover
 	}: Props = $props();
 
 	const showIndent = $derived(depth && depth > 0);
@@ -134,14 +138,6 @@
 	<FileName {filePath} hideFilePath={listMode === 'tree'} />
 
 	<div class="file-list-item__details">
-		{#if locked}
-			<Tooltip text={lockText}>
-				<div class="locked">
-					<Icon name="locked-small" color="warning" />
-				</div>
-			</Tooltip>
-		{/if}
-
 		{#if executable}
 			<ExecutableLabel />
 		{/if}
@@ -156,6 +152,19 @@
 			<FileStatusBadge tooltip={fileStatusTooltip} status={fileStatus} style={fileStatusStyle} />
 		{/if}
 
+		{#if locked}
+			<Tooltip text={lockText}>
+				<div
+					class="locked"
+					role="img"
+					aria-label="File is locked due to dependencies"
+					onmouseenter={() => onlockhover?.()}
+					onmouseleave={() => onlockunhover?.()}
+				>
+					<Icon name="locked" />
+				</div>
+			</Tooltip>
+		{/if}
 		{#if onresolveclick}
 			{#if !conflicted}
 				<Tooltip text="Conflict resolved">
@@ -261,10 +270,13 @@
 		display: flex;
 		flex-grow: 1;
 		align-items: center;
-		gap: 6px;
+		gap: 4px;
 
 		& .locked {
 			display: flex;
+			/* border-radius: var(--radius-l);
+			background-color: var(--clr-theme-warn-soft); */
+			color: var(--clr-scale-warn-60);
 		}
 	}
 </style>