sticky headers added

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import GroupHeader from './GroupHeader.svelte';
 	import noBranchesSvg from '$lib/assets/empty-state/no-branches.svg?raw';
 	import { BranchListingService } from '$lib/branches/branchListing';
 	import { getGitHostListingService } from '$lib/gitHost/interface/gitHostListingService';
@@ -52,6 +53,7 @@
 	});
 
 	const oneDay = 1000 * 60 * 60 * 24;
+
 	function groupByDate(branches: SidebarEntrySubject[]) {
 		const grouped: Record<'today' | 'yesterday' | 'lastWeek' | 'older', SidebarEntrySubject[]> = {
 			today: [],
@@ -169,7 +171,7 @@
 })}
 	{#if props.children.length > 0}
 		<div class="group">
-			<h3 class="text-base-12 text-semibold group-header">{props.title}</h3>
+			<GroupHeader title={props.title} />
 			{#each props.children as sidebarEntrySubject}
 				{#if sidebarEntrySubject.type === 'branchListing'}
 					<BranchListingSidebarEntry branchListing={sidebarEntrySubject.subject} />
@@ -208,14 +210,10 @@
 			<Segment id="local">Local</Segment>
 		</SegmentControl>
 	</div>
+
 	{#if $branchListings.length > 0}
 		{#if searchedBranches.length > 0}
-			<ScrollableContainer
-				bind:viewport
-				bind:contents
-				showBorderWhenScrolled
-				fillViewport={searchedBranches.length === 0}
-			>
+			<ScrollableContainer bind:viewport bind:contents fillViewport={searchedBranches.length === 0}>
 				<div bind:this={contents} class="scroll-container">
 					{#if searchTerm}
 						<div class="group">
@@ -313,19 +311,14 @@
 		display: flex;
 		flex-direction: column;
 		border-bottom: 1px solid var(--clr-border-2);
+		margin-bottom: 12px;
 
-		&:first-child {
-			& .group-header {
-				padding-top: 0px;
-			}
+		&:last-child {
+			border-bottom: none;
+			margin-bottom: 0;
 		}
 	}
 
-	.group-header {
-		padding: 20px 14px 4px;
-		color: var(--clr-text-3);
-	}
-
 	/* EMPTY STATE */
 	.branches__empty-state {
 		flex: 1;

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

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { intersectionObserver } from '$lib/utils/intersectionObserver';
+
+	interface Props {
+		title: string;
+	}
+
+	const { title }: Props = $props();
+
+	let isIntersected = $state(false);
+</script>
+
+<div
+	class="group-header"
+	class:intersected={isIntersected}
+	use:intersectionObserver={{
+		callback: (entry) => {
+			if (entry?.isIntersecting) {
+				isIntersected = false;
+			} else {
+				isIntersected = true;
+			}
+		},
+		options: {
+			root: null,
+			rootMargin: '-1px 0 90% 0',
+			threshold: 1
+		}
+	}}
+>
+	<h3 class="text-base-12 text-semibold">{title}</h3>
+</div>
+
+<style>
+	.group-header {
+		z-index: var(--z-lifted);
+		position: sticky;
+		top: -10px;
+		padding: 10px 14px;
+		color: var(--clr-text-2);
+		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>