diff --git a/app/src/lib/components/Branches.svelte b/app/src/lib/components/Branches.svelte
index e49a44f11..70b1e8dc4 100644
--- a/app/src/lib/components/Branches.svelte
+++ b/app/src/lib/components/Branches.svelte
@@ -109,19 +109,23 @@
 </script>
 
 <div class="branch-list">
-	<BranchesHeader count={$filteredBranches$?.length ?? 0} filtersActive={$filtersActive}>
-		<FilterPopupMenu
-			slot="context-menu"
-			let:visible
-			{visible}
-			{includePrs}
-			{includeRemote}
-			{includeStashed}
-			{hideBots}
-			{hideInactive}
-			showPrCheckbox={githubService.isEnabled}
-			on:action
-		/>
+	<BranchesHeader
+		totalBranchCount={$branches$.length}
+		filteredBranchCount={$filteredBranches$?.length}
+		filtersActive={$filtersActive}
+	>
+		{#snippet contextMenu({ visible })}
+			<FilterPopupMenu
+				{visible}
+				{includePrs}
+				{includeRemote}
+				{includeStashed}
+				{hideBots}
+				{hideInactive}
+				showPrCheckbox={githubService.isEnabled}
+				on:action
+			/>
+		{/snippet}
 	</BranchesHeader>
 	{#if $branches$?.length > 0}
 		<ScrollableContainer
diff --git a/app/src/lib/components/BranchesHeader.svelte b/app/src/lib/components/BranchesHeader.svelte
index a4d4b7ad3..7a511781c 100644
--- a/app/src/lib/components/BranchesHeader.svelte
+++ b/app/src/lib/components/BranchesHeader.svelte
@@ -2,12 +2,19 @@
 	import { clickOutside } from '$lib/clickOutside';
 	import Badge from '$lib/components/Badge.svelte';
 	import Button from '$lib/components/Button.svelte';
+	import type { Snippet } from 'svelte';
 
-	export let count: number | undefined;
-	export let filtersActive = false;
+	interface Props {
+		filteredBranchCount?: number;
+		totalBranchCount: number;
+		filtersActive: boolean;
+		contextMenu: Snippet<[{ visible: boolean }]>;
+	}
 
-	let visible = false;
-	let filterButton: HTMLDivElement;
+	const { filteredBranchCount, totalBranchCount, filtersActive, contextMenu }: Props = $props();
+
+	let visible = $state(false);
+	let filterButton = $state<HTMLDivElement>();
 
 	function onFilterClick(e: Event) {
 		visible = !visible;
@@ -20,11 +27,11 @@
 	<div class="branches-title">
 		<span class="text-base-14 text-bold">Branches</span>
 
-		{#if count !== undefined}
-			<Badge {count} />
+		{#if filteredBranchCount !== undefined}
+			<Badge count={filteredBranchCount} />
 		{/if}
 	</div>
-	{#if count && count > 0}
+	{#if totalBranchCount > 0}
 		<div class="header__filter-btn" bind:this={filterButton}>
 			<Button
 				style="ghost"
@@ -38,7 +45,7 @@
 				class="filter-popup-menu"
 				use:clickOutside={{ trigger: filterButton, handler: () => (visible = false) }}
 			>
-				<slot name="context-menu" {visible} />
+				{@render contextMenu({ visible })}
 			</div>
 		</div>
 	{/if}