refactor: Add intersection observer to lane-branches action for scroll visibility

apps/desktop/src/lib/navigation/GroupHeader.svelte

@@ -23,8 +23,8 @@
 		},
 		options: {
 			root: null,
-			rootMargin: '-1px 0px 90% 0px',
-			threshold: 1
+			rootMargin: '-100% 0px 0px 0px',
+			threshold: 0
 		}
 	}}
 >
@@ -41,16 +41,7 @@
 		background-color: var(--clr-bg-1);
 	}
 
-	/* .group-header h3 {
-		transition: transform var(--transition-fast);
-	} */
-
 	.group-header.intersected {
-		/* background-color: aquamarine; */
 		border-bottom: 1px solid var(--clr-border-2);
 	}
-
-	/* .group-header.intersected h3 {
-		transform: scale(0.9);
-	} */
 </style>

apps/desktop/src/lib/stack/Stack.svelte

@@ -17,6 +17,7 @@
 	import { SETTINGS, type Settings } from '$lib/settings/userSettings';
 	import Resizer from '$lib/shared/Resizer.svelte';
 	import Spacer from '$lib/shared/Spacer.svelte';
+	import { intersectionObserver } from '$lib/utils/intersectionObserver';
 	import { BranchController } from '$lib/vbranches/branchController';
 	import { getLocalAndRemoteCommits, getLocalCommits } from '$lib/vbranches/contexts';
 	import { FileIdSelection } from '$lib/vbranches/fileIdSelection';
@@ -100,7 +101,7 @@
 		}
 	}
 
-	let scrollEndVisible = $state(false);
+	let scrollEndVisible = $state(true);
 </script>
 
 {#if $isLaneCollapsed}
@@ -117,7 +118,6 @@
 					top: 12,
 					bottom: 12
 				}}
-				onscrollEnd={(visible) => (scrollEndVisible = visible)}
 			>
 				<div
 					bind:this={rsViewport}
@@ -195,7 +195,26 @@
 					</div>
 				</div>
 				{#if canPush}
-					<div class="lane-branches__action" class:scroll-end-visible={scrollEndVisible}>
+					<div
+						class="lane-branches__action"
+						class:scroll-end-visible={scrollEndVisible}
+						use:intersectionObserver={{
+							callback: (entry) => {
+								if (entry?.isIntersecting) {
+									console.log('visible');
+									scrollEndVisible = false;
+								} else {
+									console.log('not visible');
+									scrollEndVisible = true;
+								}
+							},
+							options: {
+								root: null,
+								rootMargin: `-100% 0px 0px 0px`,
+								threshold: 0
+							}
+						}}
+					>
 						<Button
 							style="neutral"
 							kind="solid"
@@ -250,19 +269,38 @@
 	.lane-branches {
 		display: flex;
 		flex-direction: column;
-		gap: 12px;
+		gap: 8px;
 	}
 
 	.lane-branches__action {
+		position: relative;
 		z-index: var(--z-lifted);
 		position: sticky;
-		padding: 12px;
-		bottom: 0px;
+		padding: 0 12px 12px;
+		margin-bottom: 1px;
+		bottom: 0;
 		transition: background-color var(--transition-fast);
 
-		&:not(.scroll-end-visible) {
+		&:after {
+			content: '';
+			display: block;
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			height: calc(100% + 12px);
+			width: 100%;
+			z-index: -1;
 			background-color: var(--clr-bg-1);
 			border-top: 1px solid var(--clr-border-2);
+			/* transition props */
+			transform: translateY(0);
+			/* background-color: cadetblue; */
+			opacity: 0;
+			transition: opacity var(--transition-fast);
+		}
+
+		&:not(.scroll-end-visible):after {
+			opacity: 1;
 		}
 	}
 

apps/desktop/src/lib/stack/StackSeries.svelte

@@ -54,5 +54,9 @@
 		border: 1px solid var(--clr-border-2);
 		border-radius: var(--radius-m);
 		background: var(--clr-bg-1);
+
+		&:last-child {
+			margin-bottom: 12px;
+		}
 	}
 </style>