chadtmiller.com/knotless

<script lang="ts">
	import type { Items } from '#lib/api/Items.ts';
	import { stateIcon } from '#lib/icons.ts';
	import { date } from '#lib/format.ts';
	import Icon from '#lib/atoms/Icon.svelte';
	import Person from '#lib/molecules/Person.svelte';
	/** A repository's pulls or issues, open or closed, with a switch between the two. */
	let { items: list }: { items: Items } = $props();
	const label = $derived(list.kind === 'pull' ? 'pulls' : 'issues');
</script>

<div class="box">
	<div class="boxhead">
		<nav class="filter">
			<a href="?state=open" aria-current={list.open ? 'page' : undefined}><Icon name={stateIcon(list.kind, 'open')} />{list.opened} Open</a>
			<a href="?state=closed" aria-current={list.open ? undefined : 'page'}><Icon name="done" />{list.closed} Closed</a>
		</nav>
	</div>
	<ul class="list">
		{#each list.items as i (i.href)}
			<li>
				<span class="st {i.state} {list.kind}" title={i.state}><Icon name={stateIcon(list.kind, i.state)} /></span>
				<div class="grow">
					<a class="title" href={i.href}>{i.title}</a>
					<div class="meta">opened on {date(i.createdAt)} by <Person handle={i.author} /></div>
				</div>
				{#if i.comments > 0}<span class="mute"><Icon name="chat" />{i.comments}</span>{/if}
			</li>
		{:else}
			<li class="empty">No {list.open ? 'open' : 'closed'} {label}.</li>
		{/each}
	</ul>
</div>