johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts">
	import type { FileDiffView } from '#lib/lexicons/dev/knotless/defs.ts';
	import type { Source } from '#lib/diffs.ts';
	import { plural } from '#lib/format.ts';
	import { LaterRows, type More } from '#lib/later.svelte.ts';
	import DiffFile from '#lib/organisms/DiffFile.svelte';
	/**
	 * What a commit or a pull changes: how much, then each file. Given
	 * `more`, files that came without their rows have them fetched as each
	 * nears the screen, but for one so large it waits to be asked for.
	 * Given `source`, where the files are after it, each links there and
	 * shows more of itself as asked.
	 */
	let { files, more, source }: { files: FileDiffView[]; more?: More; source?: Source } = $props();
	const added = $derived(files.reduce((n, f) => n + f.added, 0));
	const removed = $derived(files.reduce((n, f) => n + f.removed, 0));
	const first = $derived(
		new Map(files.map((f, i) => [i, f] as const).filter(([, f]) => f.rows.length))
	);
	const later = new LaterRows(
		() => files,
		() => first,
		(paths) => more?.(paths) ?? Promise.resolve([])
	);
	const { rowsOf, waiting, seen, askFor } = later;
</script>

<div class="summary">
	Showing <b>{plural(files.length, 'changed file', 'changed files')}</b> with
	<b class="add">{plural(added, 'addition', 'additions')}</b>
	and <b class="rem">{plural(removed, 'deletion', 'deletions')}</b>
</div>
{#if more}
	{#each files as f, i (i)}
		<div use:seen={i}>
			<DiffFile file={rowsOf(i) ?? f} waiting={waiting(i)} ask={() => askFor(i)} {source} />
		</div>
	{/each}
{:else}
	{#each files as f, i (i)}<DiffFile file={f} {source} />{/each}
{/if}