chadtmiller.com/knotless

<script lang="ts">
	import type { FeedEvent } from '#lib/api/FeedEvent.ts';
	import { changed, commits, excerpt, itemHref, kindOf, repoHref, said, shortRef, urlPath } from '#lib/format.ts';
	import Ref from '#lib/atoms/Ref.svelte';
	import RepoLink from './RepoLink.svelte';
	import CommitList from './CommitList.svelte';
	/** Something an account did to a repository: a sentence, and what it brought or said. */
	let { event: e }: { event: FeedEvent } = $props();
	const a = $derived(e.action);
	const repo = $derived(repoHref(e.repo.handle, e.repo.name));

	/**
	 * The sentence after who did it: words, then what it was done to, then
	 * words again before the repository. Each run of words is one text node,
	 * so it is shaped as one.
	 */
	type Thing = { ref: string } | { item: string; title: string } | { fork: { handle: string; name: string } } | null;
	const sentence = $derived.by((): [string, Thing, string] => {
		switch (a.$type) {
			case 'dev.knotless.getFeed#created':
				return a.forkOf ? [' forked ', { fork: a.forkOf }, ' to '] : [' created ', null, ''];
			case 'dev.knotless.getFeed#pushed':
				return [a.created ? ' created ' : ` pushed ${commits(a.count)} to `, { ref: shortRef(a.ref) }, ' on '];
			case 'dev.knotless.getFeed#deleted':
				return [' deleted ', { ref: shortRef(a.ref) }, ' on '];
			case 'dev.knotless.getFeed#opened':
				return [` opened ${kindOf(a.subject)} `, { item: a.subject, title: a.title }, ' on '];
			case 'dev.knotless.getFeed#commented':
				return [` ${said(a.verdict)} ${kindOf(a.subject)} `, { item: a.subject, title: a.title }, ' on '];
			default:
				return [` ${changed(a.state)} ${kindOf(a.subject)} `, { item: a.subject, title: a.title }, ' on '];
		}
	});
	const [lead, thing, mid] = $derived(sentence);
</script>

<li>
	<time datetime={e.createdAt}>{e.createdAt.slice(11, 16)}</time>
	<div class="grow">
		<p><a class="who" href="/{urlPath(e.actor.handle)}">{e.actor.handle}</a>{lead}{#if thing && 'ref' in thing}<Ref name={thing.ref} />{:else if thing && 'item' in thing}<a href={itemHref(repo, thing.item)}>{thing.title}</a>{:else if thing}<RepoLink owner={thing.fork.handle} name={thing.fork.name} />{/if}{mid}<RepoLink owner={e.repo.handle} name={e.repo.name} /></p>
		{#if a.$type === 'dev.knotless.getFeed#created' && a.description}
			<p class="feed-note">{a.description}</p>
		{:else if a.$type === 'dev.knotless.getFeed#pushed'}
			<CommitList commits={a.commits} count={a.count} {repo} />
		{:else if a.$type === 'dev.knotless.getFeed#commented'}
			<p class="feed-note">“{excerpt(a.text, 120)}”</p>
		{/if}
	</div>
</li>