johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts">
	import type { CheckView } from '#lib/lexicons/dev/knotless/defs.ts';
	import { byStanding, capitalized, checkHref, overall, ran, standing } from '#lib/format.ts';
	import { commitCheckIcon } from '#lib/icons.ts';
	import Icon from '#lib/atoms/Icon.svelte';
	/** The checks of the commit shown, as one mark: how they stand and how many passed, opening to each, linked to its steps and log. */
	let { checks }: { checks: CheckView[] } = $props();
	const all = $derived(overall(checks.map((c) => c.status)));
	const passed = $derived(checks.filter((c) => c.status === 'success').length);
	// Its menu is drawn once it is first asked for, not on the server: a
	// list draws a mark on each of its rows, and few are opened. The
	// click that opens it draws it before the menu is painted.
	let drawn = $state(false);
</script>

{#if checks.length}
	<details class="popover checks-menu" ontoggle={(e) => e.currentTarget.open && (drawn = true)}>
		<summary class="checks {all}" title="The checks of this commit" onclick={() => (drawn = true)}
			><Icon name={commitCheckIcon(all)} /><span>{`${passed} / ${checks.length}`}</span></summary
		>
		<div class="menu">
			{#if drawn}
				<div class="menu-head">{`${passed} of ${checks.length} checks passed`}</div>
				{#each byStanding(checks) as c (c.workflow)}
					<a href={checkHref(c.repo, c.uri)}
						><span class="mark {standing(c)}"><Icon name={commitCheckIcon(standing(c))} /></span><b
							>{c.workflow}</b
						><span class="mute" title={c.skipped ?? undefined}
							>{c.error
								? 'Error'
								: c.skipped
									? 'Skipped'
									: `${capitalized(c.status)}${ran(c.startedAt, c.finishedAt) ? ` in ${ran(c.startedAt, c.finishedAt)}` : ''}`}</span
						></a
					>
				{/each}
			{/if}
		</div>
	</details>
{/if}