Show number of applied branches in sidebar

- Pavel will think about this still

packages/ui/src/lib/vbranches/branchStoresCache.ts

@@ -18,6 +18,7 @@ import {
 export class VirtualBranchService {
 	branches$: Observable<Branch[]>;
 	stashedBranches$: Observable<Branch[]>;
+	activeBranches$: Observable<Branch[]>;
 	branchesError$ = new BehaviorSubject<any>(undefined);
 	private reload$ = new BehaviorSubject<void>(undefined);
 
@@ -51,6 +52,8 @@ export class VirtualBranchService {
 		this.stashedBranches$ = this.branches$.pipe(
 			map((branches) => branches.filter((b) => !b.active))
 		);
+
+		this.activeBranches$ = this.branches$.pipe(map((branches) => branches.filter((b) => b.active)));
 	}
 
 	reload() {

packages/ui/src/routes/[projectId]/board/+page.svelte

@@ -17,7 +17,7 @@
 	$: prService = data.prService;
 
 	$: project$ = data.project$;
-	$: branches$ = vbranchService.branches$;
+	$: activeBranches$ = vbranchService.activeBranches$;
 	$: error$ = vbranchService.branchesError$;
 
 	const httpsWarningBannerDismissed = projectHttpsWarningBannerDismissed(projectId);
@@ -54,7 +54,7 @@
 			{projectId}
 			{cloud}
 			base={$base$}
-			branches={$branches$}
+			branches={$activeBranches$}
 			projectPath={$project$?.path}
 			cloudEnabled={$project$?.api?.sync || false}
 			githubContext={$githubContext$}

packages/ui/src/routes/[projectId]/board/Board.svelte

@@ -31,8 +31,6 @@
 	let dropPosition = 0;
 
 	let dragHandle: any;
-
-	$: activeBranches = branches?.filter((b) => b.active) || [];
 </script>
 
 {#if branchesError}
@@ -71,9 +69,9 @@
 			if (!branches) return;
 			e.preventDefault();
 			if (priorPosition != dropPosition) {
-				const el = activeBranches.splice(priorPosition, 1);
-				activeBranches.splice(dropPosition, 0, ...el);
-				activeBranches.forEach((branch, i) => {
+				const el = branches.splice(priorPosition, 1);
+				branches.splice(dropPosition, 0, ...el);
+				branches.forEach((branch, i) => {
 					if (branch.order !== i) {
 						branchController.updateBranchOrder(branch.id, i);
 					}
@@ -81,7 +79,7 @@
 			}
 		}}
 	>
-		{#each activeBranches.sort((a, b) => a.order - b.order) as branch (branch.id)}
+		{#each branches.sort((a, b) => a.order - b.order) as branch (branch.id)}
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
 			<div
 				class="h-full"
@@ -115,7 +113,7 @@
 			</div>
 		{/each}
 
-		{#if !activeBranches || activeBranches.length == 0}
+		{#if !branches || branches.length == 0}
 			<div
 				class="text-color-2 m-auto mx-10 flex w-full flex-grow items-center justify-center rounded border p-8"
 				style:background-color="var(--bg-surface-highlight)"

packages/ui/src/routes/[projectId]/navigation/Navigation.svelte

@@ -20,6 +20,7 @@
 	import Tooltip from '$lib/components/Tooltip.svelte';
 	import Tag from '../components/Tag.svelte';
 	import * as toasts from '$lib/utils/toasts';
+	import Badge from '$lib/components/Badge.svelte';
 
 	export let vbranchService: VirtualBranchService;
 	export let branchService: BranchService;
@@ -34,6 +35,7 @@
 	const userSettings = getContext<SettingsStore>(SETTINGS_CONTEXT);
 
 	$: base$ = baseBranchService.base$;
+	$: branches$ = vbranchService.activeBranches$;
 
 	let stashExpanded = true;
 	let branchesExpanded = true;
@@ -65,6 +67,7 @@
 					<path d="M5 12V8.44444V4" stroke="white" stroke-width="2" />
 				</svg>
 				<span>Applied branches</span>
+				<Badge count={$branches$?.length} />
 				{#if ($base$?.behind || 0) > 0}
 					<Tooltip label="Merge upstream commits into common base">
 						<Tag