3/3 Display all of the stack names on the stack page.

I'm looking up the details from the sidebar entry (which should already be loaded) and using the virtualBranchReference if it's present, before falling back to the PR title or remote branch given name.

I also made use of the Badge component for the local badge which lets us tidy up some CSS

apps/desktop/src/components/BranchPreviewHeader.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import BranchLabel from './BranchLabel.svelte';
 	import { BranchController } from '$lib/branches/branchController';
+	import { BranchListingService } from '$lib/branches/branchListing';
 	import { getForge } from '$lib/forge/interface/forge';
 	import { ModeService } from '$lib/mode/modeService';
 	import { Project } from '$lib/project/project';
 	import { openExternalUrl } from '$lib/utils/url';
 	import { getContext } from '@gitbutler/shared/context';
 	import Badge from '@gitbutler/ui/Badge.svelte';
 	import Button from '@gitbutler/ui/Button.svelte';
-	import Icon from '@gitbutler/ui/Icon.svelte';
 	import Modal from '@gitbutler/ui/Modal.svelte';
+	import SeriesLabelsRow from '@gitbutler/ui/SeriesLabelsRow.svelte';
 	import Tooltip from '@gitbutler/ui/Tooltip.svelte';
 	import { error } from '@gitbutler/ui/toasts';
 	import type { BranchData } from '$lib/branches/branch';
@@ -28,12 +28,21 @@
 	const upstream = $derived(remoteBranch?.givenName);
 
 	const branchController = getContext(BranchController);
+	const branchListingService = getContext(BranchListingService);
 	const project = getContext(Project);
 	const forge = getForge();
 	const modeSerivce = getContext(ModeService);
 	const mode = modeSerivce.mode;
 	const forgeBranch = $derived(upstream ? $forge?.branch(upstream) : undefined);
 
+	const listingDetails = $derived(branchListingService.getBranchListingDetails(branch.givenName));
+	const stackBranchNames = $derived.by(() => {
+		if ($listingDetails?.virtualBranch) return $listingDetails.virtualBranch.stackBranches;
+		if (pr) return [pr.title];
+		if (branch) return [branch.givenName];
+		return [];
+	});
+
 	let isApplying = $state(false);
 	let isDeleting = $state(false);
 	let deleteBranchModal = $state<Modal>();
@@ -42,7 +51,7 @@
 <div class="header__wrapper">
 	<div class="header card">
 		<div class="header__info">
-			<BranchLabel disabled name={branch.givenName} />
+			<SeriesLabelsRow series={stackBranchNames} showRestAmount />
 			<div class="header__remote-branch">
 				{#if remoteBranch}
 					<Tooltip text="At least some of your changes have been pushed">
@@ -68,9 +77,7 @@
 						</Button>
 					{/if}
 				{:else}
-					<div class="status-tag text-11 text-semibold remote">
-						<Icon name="branch-small" /> local
-					</div>
+					<Badge size="tag" icon="branch-small" style="neutral">local</Badge>
 				{/if}
 				{#if pr?.htmlUrl}
 					<Button
@@ -226,18 +233,4 @@
 		white-space: nowrap;
 		align-items: center;
 	}
-
-	.status-tag {
-		cursor: default;
-		display: flex;
-		align-items: center;
-		gap: 2px;
-		padding: 2px 6px 2px 4px;
-		border-radius: var(--radius-m);
-	}
-
-	.remote {
-		color: var(--clr-scale-ntrl-100);
-		background: var(--clr-scale-ntrl-40);
-	}
 </style>