chadtmiller.com/knotless

<script lang="ts">
	import { stateIcon } from '#lib/icons.ts';
	import { capitalized, date, repoHref } 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';
	import Person from '#lib/molecules/Person.svelte';
	import Verdict from '#lib/molecules/Verdict.svelte';
	import Comment from '#lib/organisms/Comment.svelte';
	import RepoPage from '#lib/templates/RepoPage.svelte';
	let { data } = $props();
	const d = $derived(data.discussion);
	const r = $derived(d.repo);
	const n = $derived(d.comments.length);
</script>

<RepoPage repo={r} tab={d.kind === 'pull' ? 'pulls' : 'issues'} title="{d.title} · {r.name}" about={d.about} card={d.card}>
	<h2 class="item-title">{d.title}</h2>
	<div class="item-meta">
		<span class="pill {d.state} {d.kind}"><Icon name={stateIcon(d.kind, d.state)} />{capitalized(d.state)}</span>
		{#if d.base !== null && d.branch !== null}
			<span><Person handle={d.author} /> wants to merge into <Ref name={d.base} /> from <Ref name="{d.from ?? ''}:{d.branch}" /></span>
		{:else}
			<span><Person handle={d.author} /> opened this issue on {date(d.createdAt)}</span>
		{/if}
		<span class="end"><Icon name="chat" />{n} comment{n === 1 ? '' : 's'}</span>
	</div>
	<div class="timeline">
		{#if d.body !== null}<Comment author={d.author} avatar={d.avatar} said="opened" createdAt={d.createdAt} html={d.body} />{/if}
		{#each d.comments as c, i (i)}
			<Comment author={c.author} avatar={c.avatar} said="commented" createdAt={c.createdAt} html={c.html}>
				{#snippet end()}<Verdict verdict={c.verdict} />{/snippet}
			</Comment>
		{/each}
		{#if d.merged}
			<div class="event"><span class="dot"><Icon name="merge" /></span><span>Merged as <Sha sha={d.merged} href={repoHref(r.authority, r.name, `/commit/${d.merged}`)} /></span></div>
		{/if}
		{#if n === 0 && d.body === null}<div class="box"><div class="empty">Nothing said yet.</div></div>{/if}
	</div>
</RepoPage>