chadtmiller.com/knotless

<script lang="ts">
	import type { FileDiff } from '#lib/api/FileDiff.ts';
	import { highlight } from '#lib/highlight.ts';
	import Bars from '#lib/atoms/Bars.svelte';
	/** One file of a diff: its header, then a row per line with the line's old and new numbers. */
	let { file: f }: { file: FileDiff } = $props();
	const path = $derived(f.status === 'renamed' ? `${f.old} → ${f.new}` : f.status === 'deleted' ? f.old : f.new);
	const tag = $derived({ added: 'new', deleted: 'deleted', renamed: 'renamed' }[f.status]);
</script>

<details class="file" open>
	<summary><span class="path">{path}</span>{#if tag}<span class="tag">{tag}</span>{/if}<span class="stat"><span class="add">+{f.added}</span><span class="rem">−{f.removed}</span><Bars added={f.added} removed={f.removed} /></span></summary>
	{#if f.note}
		<div class="note">{f.note}</div>
	{:else}
		<div class="scroll">
			<table class="diff" use:highlight={{ ranges: f.ranges, text: f.rows }}>
				<tbody>
					{#each f.rows as row, i (i)}
						{#if row.line}
							<tr class={row.kind}><td class="n" data-n={row.old ?? ''}></td><td class="n" data-n={row.new ?? ''}></td><td class="c"><code>{row.text}</code></td></tr>
						{:else}
							<tr class={row.kind}><td class="n" colspan="2"></td><td class="c">{row.text}</td></tr>
						{/if}
					{/each}
				</tbody>
			</table>
		</div>
	{/if}
</details>