chadtmiller.com/knotless

<script lang="ts">
	import type { Commit } from '#lib/api/Commit.ts';
	import { date, repoHref, subject } 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';
	import Toolbar from '#lib/organisms/Toolbar.svelte';
	import RepoPage from '#lib/templates/RepoPage.svelte';
	let { data } = $props();
	const h = $derived(data.history);
	const r = $derived(h.repo);
	/** The commits by the day they were made on, in order. */
	const days = $derived.by(() => {
		const out: [string, Commit[]][] = [];
		for (const c of h.commits) {
			const on = date(c.date);
			const last = out.at(-1);
			if (last && last[0] === on) last[1].push(c);
			else out.push([on, [c]]);
		}
		return out;
	});
	const href = (c: Commit) => repoHref(r.authority, r.name, `/commit/${c.sha}`);
</script>

<RepoPage repo={r} tab="commits" title="Commits · {r.name}">
	<Toolbar authority={r.authority} name={r.name} rev={h.rev} path={h.path} />
	{#each days as [day, commits] (day)}
		<h3 class="day"><Icon name="commit" />Commits on {day}</h3>
		<div class="box">
			<ul class="list">
				{#each commits as c (c.sha)}
					<li>
						<div class="grow">
							<a class="title clip" href={href(c)}>{subject(c.message)}</a>
							<div class="meta"><CommitAuthor commit={c} /> committed</div>
						</div>
						<Sha sha={c.sha} href={href(c)} />
					</li>
				{/each}
			</ul>
		</div>
	{:else}
		<div class="box"><div class="empty">No commits here.</div></div>
	{/each}
	{#if h.more}<div class="more"><a class="btn" href="?page={h.page + 1}">Older commits</a></div>{/if}
</RepoPage>