johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts">
	import type { StackView } from '#lib/lexicons/dev/knotless/defs.ts';
	import { stateIcon } from '#lib/icons.ts';
	import { itemHref } from '#lib/format.ts';
	import Icon from '#lib/atoms/Icon.svelte';
	import Ref from '#lib/atoms/Ref.svelte';
	import Sha from '#lib/atoms/Sha.svelte';
	/** The pulls of `stack`, highest first, down to the branch they land on, with `current` marked, on the repository at `base`. */
	let { stack, current, base }: { stack: StackView; current: string; base: string } = $props();
</script>

<ol class="stack-map" aria-label="Pulls in this stack, highest first">
	{#each stack.pulls as p (p.item.uri)}
		<li
			class:here={p.item.uri === current}
			aria-current={p.item.uri === current ? 'true' : undefined}
		>
			<span class="st {p.item.draft && p.item.state === 'open' ? 'draft' : p.item.state} pull"
				><Icon name={stateIcon('pull', p.item.state, p.item.draft)} /></span
			>
			<div class="grow">
				{#if p.item.uri === current}<b class="title">{p.item.title}</b>{:else}<a
						class="title"
						href={itemHref(base, p.item.uri)}>{p.item.title}</a
					>{/if}
				{#if p.merged}<span class="meta">{'Landed as '}<Sha sha={p.merged} /></span
					>{:else if p.branch}<span class="meta">{p.branch}</span>{/if}
			</div>
		</li>
	{/each}
	{#if stack.into}<li class="root">
			<span class="stack-dot"></span><Ref name={stack.into} />
		</li>{/if}
</ol>