improve-commits-reordering (#11411)

* feat(ui): add 1200ms delay to commit title tooltip to reduce flicker

* fix: clipping dropzones and cropped drop lines

* fix: prevrent overlay lines from overflow the stack-view container

Author: PavelLaptev

apps/desktop/src/components/BranchCommitList.svelte

@@ -221,7 +221,7 @@
 		{@const hasRemoteCommits = upstreamOnlyCommits.length > 0}
 		{@const hasCommits = localAndRemoteCommits.length > 0}
 
-		{@render commitReorderDz(stackingReorderDropzoneManager.top(branchName))}
+		<!-- {@render commitReorderDz(stackingReorderDropzoneManager.top(branchName))} -->
 
 		{#if hasCommits || hasRemoteCommits}
 			<div
@@ -264,6 +264,8 @@
 					</UpstreamCommitsAction>
 				{/if}
 
+				{@render commitReorderDz(stackingReorderDropzoneManager.top(branchName))}
+
 				{#each localAndRemoteCommits as commit, i (commit.id)}
 					{@const first = i === 0}
 					{@const last = i === localAndRemoteCommits.length - 1}

apps/desktop/src/components/CommitLineOverlay.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { portal } from '@gitbutler/ui/utils/portal';
 	import { pxToRem } from '@gitbutler/ui/utils/pxToRem';
 
 	interface Props {
@@ -9,64 +10,116 @@
 	}
 
 	const { hovered, activated, advertize, yOffsetPx = 0 }: Props = $props();
+
+	let containerElement = $state<HTMLDivElement>();
+	let indicatorElement = $state<HTMLDivElement>();
+	let indicatorRect = $state<{ top: number; left: number; width: number; height: number }>();
+	let stackViewElement = $state<Element | null>(null);
+
+	function updatePosition() {
+		if (!indicatorElement) return;
+
+		const rect = indicatorElement.getBoundingClientRect();
+		const stackView = indicatorElement.closest('.stack-view');
+		if (!stackView) return;
+
+		stackViewElement = stackView;
+
+		const stackRect = stackView.getBoundingClientRect();
+		const scrollTop = stackView.scrollTop || 0;
+
+		// Calculate position relative to .stack-view container including scroll offset
+		indicatorRect = {
+			top: rect.top - stackRect.top + scrollTop,
+			left: rect.left - stackRect.left,
+			width: rect.width,
+			height: rect.height
+		};
+	}
+
+	$effect(() => {
+		if (containerElement && indicatorElement && activated) {
+			updatePosition();
+		}
+	});
 </script>
 
 <div
+	bind:this={containerElement}
 	class="dropzone-target container"
 	class:activated
 	class:advertize
 	class:hovered
 	style:--y-offset="{pxToRem(yOffsetPx)}rem"
 >
-	<div class="indicator"></div>
+	<div bind:this={indicatorElement} class="indicator-placeholder"></div>
 </div>
 
+{#if activated && indicatorRect && stackViewElement}
+	<div
+		class="indicator-portal"
+		class:hovered
+		class:advertize
+		use:portal={stackViewElement}
+		style:top="{indicatorRect.top}px"
+		style:left="{indicatorRect.left}px"
+		style:width="{indicatorRect.width}px"
+		style:height="{indicatorRect.height}px"
+	>
+		<div class="indicator"></div>
+	</div>
+{/if}
+
 <style lang="postcss">
 	.container {
-		--dropzone-overlap: calc(var(--dropzone-height) / 2);
+		--dropzone-overlap: calc(var(--dropzone-height) / -2);
 		--dropzone-height: 24px;
 
 		display: flex;
-
-		z-index: var(--z-floating);
-
+		z-index: var(--z-modal);
 		position: absolute;
 		top: var(--y-offset);
 		align-items: center;
 		width: 100%;
-
 		height: var(--dropzone-height);
-		margin-top: calc(var(--dropzone-overlap) * -1);
-		transition: background-color 0.3s ease-in-out;
-
-		/* It is very important that all children are pointer-events: none */
-		/* https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element */
-		& * {
-			pointer-events: none;
-		}
+		margin-top: var(--dropzone-overlap);
+		/* For debugging  */
+		/* background-color: rgba(238, 130, 238, 0.319); */
 
 		&:not(.activated) {
 			display: none;
 		}
 
-		&.hovered {
-			& .indicator {
-				background-color: var(--clr-theme-pop-element);
-			}
+		& > * {
+			pointer-events: none; /* Block all nested elements */
 		}
+	}
+
+	.indicator-placeholder {
+		width: 100%;
+		height: 3px;
+		margin-top: 1px;
+		background-color: transparent;
+	}
+
+	.indicator-portal {
+		display: flex;
+		z-index: var(--z-blocker);
+		position: absolute;
+		align-items: center;
+		pointer-events: none;
 
-		&:not(.hovered).advertize {
+		&.hovered {
 			& .indicator {
-				background-color: var(--clr-theme-pop-soft-hover);
+				background-color: var(--clr-theme-pop-element);
 			}
 		}
 	}
 
 	.indicator {
 		width: 100%;
 		height: 3px;
-		margin-top: 1px;
 		background-color: transparent;
-		transition: opacity 0.1s;
+		transition: background-color var(--transition-fast);
 	}
 </style>

apps/desktop/src/components/CommitTitle.svelte

@@ -21,7 +21,7 @@
 	}
 </script>
 
-<Tooltip text={getTitle()}>
+<Tooltip text={getTitle()} delay={1200}>
 	<h3
 		data-testid={TestId.CommitDrawerTitle}
 		class="{className} commit-title"

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

@@ -1,5 +1,5 @@
-export function portal(node: HTMLElement, to: string) {
-	const target = document.querySelector(to);
+export function portal(node: HTMLElement, to: string | Element) {
+	const target = typeof to === 'string' ? document.querySelector(to) : to;
 	if (target) {
 		target.appendChild(node);
 	}