refactor(ui): replace stickyHeader action with new sticky action and update consumers (#9867)

Author: PavelLaptev

apps/desktop/src/components/BranchesView.svelte

@@ -135,6 +135,8 @@
 			return () => unsub?.();
 		}
 	});
+
+	let selectionPreviewScrollContainer: HTMLDivElement | undefined = $state();
 </script>
 
 <Modal
@@ -403,8 +405,12 @@
 
 					{#if !isNonLocalPr}
 						<div class="preview-selection">
-							<ConfigurableScrollableContainer zIndex="var(--z-lifted)">
+							<ConfigurableScrollableContainer
+								bind:viewport={selectionPreviewScrollContainer}
+								zIndex="var(--z-lifted)"
+							>
 								<SelectionView
+									scrollContainer={selectionPreviewScrollContainer}
 									testId={TestId.BranchesSelectionView}
 									{projectId}
 									{selectionId}

apps/desktop/src/components/FileListItemWrapper.svelte

@@ -14,7 +14,7 @@
 	import { computeChangeStatus } from '$lib/utils/fileStatus';
 	import { inject } from '@gitbutler/shared/context';
 	import { FileListItem, FileViewHeader, TestId } from '@gitbutler/ui';
-	import { stickyHeader } from '@gitbutler/ui/utils/stickyHeader';
+	import { sticky as stickyAction } from '@gitbutler/ui/utils/sticky';
 	import type { ConflictEntriesObj } from '$lib/files/conflicts';
 	import type { Rename } from '$lib/hunks/change';
 	import type { UnifiedDiff } from '$lib/hunks/diff';
@@ -36,10 +36,12 @@
 		showCheckbox?: boolean;
 		draggable?: boolean;
 		transparent?: boolean;
+		sticky?: boolean;
 		onclick?: (e: MouseEvent) => void;
 		onkeydown?: (e: KeyboardEvent) => void;
 		onCloseClick?: () => void;
 		conflictEntries?: ConflictEntriesObj;
+		scrollContainer?: HTMLDivElement;
 		hideBorder?: boolean;
 	}
 
@@ -62,7 +64,8 @@
 		onclick,
 		onkeydown,
 		onCloseClick,
-		hideBorder
+		hideBorder,
+		scrollContainer
 	}: Props = $props();
 
 	const idSelection = inject(ID_SELECTION);
@@ -72,6 +75,7 @@
 
 	let contextMenu = $state<ReturnType<typeof FileContextMenu>>();
 	let draggableEl: HTMLDivElement | undefined = $state();
+	let isStuck = $state(false);
 
 	const previousTooltipText = $derived(
 		(change.status.subject as Rename).previousPath
@@ -129,13 +133,11 @@
 
 <div
 	data-testid={TestId.FileListItem}
-	use:stickyHeader={{
-		disabled: !isHeader
-	}}
 	class="filelistitem-wrapper"
 	data-remove-from-panning
 	class:filelistitem-header={isHeader}
 	class:transparent
+	class:stuck={isHeader && isStuck}
 	bind:this={draggableEl}
 	use:draggableChips={{
 		label: getFilename(change.path),
@@ -148,6 +150,13 @@
 		dropzoneRegistry,
 		dragStateService
 	}}
+	use:stickyAction={{
+		enabled: isHeader,
+		scrollContainer,
+		onStuck: (stuck) => {
+			isStuck = stuck;
+		}
+	}}
 >
 	<FileContextMenu
 		bind:this={contextMenu}
@@ -211,9 +220,14 @@
 		&.transparent {
 			background-color: transparent;
 		}
+
+		&.stuck {
+			border-bottom: 1px solid var(--clr-border-2);
+			background-color: var(--clr-bg-1);
+			box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
+		}
 	}
 	.filelistitem-header {
 		z-index: var(--z-lifted);
-		background-color: var(--clr-bg-1);
 	}
 </style>

apps/desktop/src/components/SelectionView.svelte

@@ -19,6 +19,7 @@
 		diffOnly?: boolean;
 		onclose?: () => void;
 		testId?: string;
+		scrollContainer?: HTMLDivElement;
 		bottomBorder?: boolean;
 	};
 
@@ -29,6 +30,7 @@
 		diffOnly,
 		onclose,
 		testId,
+		scrollContainer,
 		bottomBorder
 	}: Props = $props();
 
@@ -75,6 +77,7 @@
 								<FileListItemWrapper
 									selectionId={selectedFile}
 									projectId={env.projectId}
+									{scrollContainer}
 									{change}
 									{diff}
 									{draggable}

apps/desktop/src/components/StackView.svelte

@@ -220,6 +220,8 @@
 			}
 		}
 	});
+
+	let selectionPreviewScrollContainer: HTMLDivElement | undefined = $state();
 </script>
 
 <!-- ATTENTION -->
@@ -237,6 +239,7 @@
 	<SelectionView
 		testId={TestId.WorktreeSelectionView}
 		{projectId}
+		scrollContainer={selectionPreviewScrollContainer}
 		selectionId={createWorktreeSelection({ stackId })}
 		onclose={() => {
 			idSelection.clear(createWorktreeSelection({ stackId: stackId }));
@@ -541,7 +544,10 @@
 
 						<div class="file-preview-section">
 							{#if assignedStackId}
-								<ConfigurableScrollableContainer zIndex="var(--z-lifted)">
+								<ConfigurableScrollableContainer
+									zIndex="var(--z-lifted)"
+									bind:viewport={selectionPreviewScrollContainer}
+								>
 									{@render assignedChangePreview(assignedStackId)}
 								</ConfigurableScrollableContainer>
 							{:else if selectedFile}

apps/desktop/src/components/WorkspaceView.svelte

@@ -130,19 +130,25 @@
 			}
 		});
 	}
+
+	let selectionPreviewScrollContainer: HTMLDivElement | undefined = $state();
 </script>
 
 {#snippet right()}
 	<Feed {projectId} onCloseClick={() => uiState.project(projectId).showActions.set(false)} />
 {/snippet}
 
 {#snippet leftPreview()}
-	<ConfigurableScrollableContainer zIndex="var(--z-lifted)">
+	<ConfigurableScrollableContainer
+		bind:viewport={selectionPreviewScrollContainer}
+		zIndex="var(--z-lifted)"
+	>
 		<SelectionView
 			bottomBorder
 			{projectId}
 			{selectionId}
 			draggableFiles
+			scrollContainer={selectionPreviewScrollContainer}
 			onclose={() => {
 				idSelection.clear(selectionId);
 			}}

apps/desktop/src/routes/[projectId]/history/+page.svelte

@@ -13,8 +13,7 @@
 	import { ID_SELECTION } from '$lib/selection/idSelection.svelte';
 	import { createSnapshotSelection, type SelectionId } from '$lib/selection/key';
 	import { inject } from '@gitbutler/shared/context';
-	import { EmptyStatePlaceholder, Icon, FileViewHeader } from '@gitbutler/ui';
-	import { stickyHeader } from '@gitbutler/ui/utils/stickyHeader';
+	import { EmptyStatePlaceholder, Icon } from '@gitbutler/ui';
 	import type { Snapshot } from '$lib/history/types';
 
 	// TODO: Refactor so we don't need non-null assertion.
@@ -80,6 +79,8 @@
 		idSelection.set(path, selectionId, fileIndex);
 		currentSelectionId = selectionId;
 	}
+
+	let scrollContainer: HTMLDivElement | undefined = $state();
 </script>
 
 {#snippet historyEntries()}
@@ -199,18 +200,8 @@
 	<div class="history-view__preview dotted-pattern">
 		{#if selectedFile}
 			<div class="history-view__preview-file">
-				<ConfigurableScrollableContainer>
-					<div use:stickyHeader class="history-view__file-header">
-						<FileViewHeader
-							filePath={selectedFile.path}
-							draggable={false}
-							oncloseclick={() => {
-								currentSelectionId = undefined;
-							}}
-						/>
-					</div>
-
-					<SelectionView {projectId} diffOnly selectionId={currentSelectionId} />
+				<ConfigurableScrollableContainer bind:viewport={scrollContainer}>
+					<SelectionView {projectId} {scrollContainer} selectionId={currentSelectionId} />
 				</ConfigurableScrollableContainer>
 			</div>
 		{:else}
@@ -319,6 +310,7 @@
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
+		background-color: var(--clr-bg-1);
 	}
 
 	.history-view__file-header {

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

@@ -102,7 +102,6 @@
 		width: 100%;
 		padding: 12px 10px 12px 14px;
 		gap: 12px;
-		background-color: var(--clr-bg-1);
 
 		&.transparent {
 			background-color: transparent;

packages/ui/src/lib/index.ts

@@ -141,5 +141,3 @@ export {
 export { default as FormattingBar } from '$lib/richText/tools/FormattingBar.svelte';
 export { default as FormattingButton } from '$lib/richText/tools/FormattingButton.svelte';
 export * from '$lib/utils/testIds';
-
-// Utilities and other exports

packages/ui/src/lib/utils/sticky.ts

@@ -0,0 +1,112 @@
+import type { Action } from 'svelte/action';
+
+interface StickyOptions {
+	enabled?: boolean;
+	onStuck?: (isStuck: boolean) => void;
+	scrollThreshold?: number;
+	scrollContainer?: Element | Window;
+}
+
+export function sticky(
+	element: HTMLElement,
+	options: StickyOptions
+): ReturnType<Action<HTMLElement, StickyOptions>> {
+	let { enabled = false, onStuck, scrollThreshold = 4, scrollContainer } = options;
+
+	let isStuck = false;
+
+	function cleanup() {
+		if (scrollContainer) {
+			scrollContainer.removeEventListener('scroll', handleScroll);
+		}
+	}
+
+	function handleScroll() {
+		if (!onStuck || !scrollContainer) return;
+
+		let newIsStuck = false;
+
+		// Get scroll position - works for both window and elements
+		const scrollTop =
+			scrollContainer === window ? window.scrollY : (scrollContainer as Element).scrollTop;
+		const hasScrolled = scrollTop > scrollThreshold;
+
+		if (hasScrolled) {
+			// Only do expensive rect calculations when needed
+			const containerRect =
+				scrollContainer === window
+					? { top: 0 }
+					: (scrollContainer as Element).getBoundingClientRect();
+			const elementRect = element.getBoundingClientRect();
+			newIsStuck = Math.abs(elementRect.top - containerRect.top) <= 2;
+		}
+
+		if (newIsStuck !== isStuck) {
+			isStuck = newIsStuck;
+			onStuck(newIsStuck);
+		}
+	}
+
+	function setup() {
+		if (!enabled) return;
+
+		// Apply styles in one batch to avoid layout thrashing
+		Object.assign(element.style, {
+			position: 'sticky',
+			top: '0px',
+			zIndex: 'var(--z-lifted)'
+		});
+
+		// Only setup scroll listener when callback is provided and scroll container exists
+		if (onStuck && scrollContainer) {
+			scrollContainer.addEventListener('scroll', handleScroll, { passive: true });
+			handleScroll(); // Check initial state
+		}
+	}
+
+	setup();
+
+	return {
+		update(newOptions: StickyOptions) {
+			const wasEnabled = enabled;
+			const oldScrollContainer = scrollContainer;
+
+			// Merge options efficiently
+			Object.assign(options, newOptions);
+			({ enabled = true, onStuck, scrollThreshold = 4, scrollContainer } = options);
+
+			if (!enabled) {
+				cleanup();
+				// Clear styles in one batch
+				Object.assign(element.style, {
+					position: '',
+					top: '',
+					zIndex: ''
+				});
+				return;
+			}
+
+			if (!wasEnabled) {
+				setup();
+			} else if (scrollContainer !== oldScrollContainer) {
+				// Scroll container changed - update listener
+				if (oldScrollContainer) {
+					oldScrollContainer.removeEventListener('scroll', handleScroll);
+				}
+				if (onStuck && scrollContainer) {
+					scrollContainer.addEventListener('scroll', handleScroll, { passive: true });
+					handleScroll();
+				}
+			}
+		},
+		destroy() {
+			cleanup();
+			// Clear styles in one batch
+			Object.assign(element.style, {
+				position: '',
+				top: '',
+				zIndex: ''
+			});
+		}
+	};
+}