johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts">
	import type { ItemView } from '#lib/lexicons/dev/knotless/defs.ts';
	import type { Snippet } from 'svelte';
	import { stateIcon } from '#lib/icons.ts';
	import Icon from '#lib/atoms/Icon.svelte';
	import { ago, itemHref } from '#lib/format.ts';
	import Time from '#lib/atoms/Time.svelte';
	import Person from './Person.svelte';
	import Labels from './Labels.svelte';
	/** A pull or an issue in a list of them, on the repository whose page is at `base`: its state, title, labels (each a link to `labelHref` of its name, if given) and who opened it when, or what `meta` says of it instead. */
	let {
		item: i,
		kind,
		base,
		meta,
		labelHref
	}: {
		item: ItemView;
		kind: string;
		base: string;
		meta?: Snippet;
		labelHref?: (name: string) => string;
	} = $props();
	// An open pull not yet ready is a draft.
	const shown = $derived(i.draft && i.state === 'open' ? 'draft' : i.state);
</script>

<li>
	<span class="st {shown} {kind}" title={shown}
		><Icon name={stateIcon(kind, i.state, i.draft)} /></span
	>
	<div class="grow">
		<a class="title" href={itemHref(base, i.uri)}>{i.title}</a>
		{#if i.labels}<Labels labels={i.labels} href={labelHref} />{/if}
		{#if meta}
			<div class="meta">{@render meta()}</div>
		{:else}
			<div class="meta">
				<span>{'opened '}<Time at={i.createdAt} show={(t) => ago(t, 'on ')} />{' by'}</span><Person
					handle={i.author.handle}
					bot={i.author.bot}
				/>
			</div>
		{/if}
	</div>
	{#if i.comments > 0}<span class="mute"><Icon name="chat" />{i.comments}</span>{/if}
</li>