chadtmiller.com/knotless

<script lang="ts">
	import type { Commit } from '#lib/api/Commit.ts';
	import type { Entry } from '#lib/api/Entry.ts';
	import { date, repoHref, size, subject, urlPath } from '#lib/format.ts';
	import CommitAuthor from '#lib/molecules/CommitAuthor.svelte';
	import Icon from '#lib/atoms/Icon.svelte';
	import Sha from '#lib/atoms/Sha.svelte';
	/** A directory: its latest commit, then its entries. */
	let { authority, name, rev, path, last, entries }: {
		authority: string; name: string; rev: string; path: string; last: Commit | null; entries: Entry[];
	} = $props();
	const href = (tail: string) => repoHref(authority, name, tail);
	const prefix = $derived(path ? `${path}/` : '');
	const history = $derived(href(`/commits/${urlPath(rev)}/${urlPath(path)}`).replace(/\/$/, ''));
</script>

<div class="box">
	{#if last}
		<div class="boxhead">
			<CommitAuthor commit={last} />
			<a class="grow clip mute" href={href(`/commit/${last.sha}`)}>{subject(last.message)}</a>
			<Sha sha={last.sha} href={href(`/commit/${last.sha}`)} />
			<span class="mute hide-sm">{date(last.date)}</span>
			<a class="btn" href={history}><Icon name="commit" />History</a>
		</div>
	{/if}
	<ul class="list files">
		{#each entries as e (e.name)}
			{@const tree = e.kind === 'tree'}
			<li class={tree ? 'dir' : ''}>
				<Icon name={tree ? 'dir' : 'file'} />
				<a class="grow clip" href={href(`/${tree ? 'tree' : 'blob'}/${urlPath(rev)}/${urlPath(prefix + e.name)}`)}>{e.name}</a>
				<span class="size">{e.size === null ? '' : size(e.size)}</span>
			</li>
		{/each}
	</ul>
</div>