johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts">
	import type { ActorView, ReviewView } from '#lib/lexicons/dev/knotless/defs.ts';
	import type * as repo from '#lib/lexicons/dev/knotless/repo.ts';
	import AddMenu from '#lib/molecules/AddMenu.svelte';
	import AssigneesFact from '#lib/molecules/AssigneesFact.svelte';
	import LabelPicker from '#lib/molecules/LabelPicker.svelte';
	import Labels from '#lib/molecules/Labels.svelte';
	import ReviewersFact from '#lib/molecules/ReviewersFact.svelte';
	/**
	 * What is set on a pull or an issue, under its title, as the
	 * repository's header shows what is true of it: who reviews a pull, as
	 * they were asked and as they answered, those `required` by the rule
	 * protecting its `base` marked so, whom it is assigned to, and the
	 * `labels` it carries. Each shows only once it has something, and opens
	 * to change it for those who may: they `ask` `people` to review it,
	 * `assign` it to the `assignable`, and those `offered` labels `label`
	 * it. What has nothing yet is chosen from one Add menu. On a phone the
	 * facts stack, one to a line.
	 */
	let {
		reviews = [],
		requested = [],
		required = [],
		base = '',
		people = [],
		ask,
		assignees = [],
		assignable = [],
		assign,
		labels = [],
		offered = [],
		label
	}: {
		reviews?: ReviewView[];
		requested?: ActorView[];
		required?: ActorView[];
		base?: string;
		people?: ActorView[];
		ask?: (did: ActorView['did'], removed: boolean) => Promise<unknown>;
		assignees?: ActorView[];
		assignable?: ActorView[];
		assign?: (did: ActorView['did'], removed: boolean) => Promise<unknown>;
		labels?: repo.Label[];
		offered?: repo.Label[];
		label?: (name: string, removed: boolean) => Promise<unknown>;
	} = $props();
	const reviewing = $derived(reviews.length > 0 || requested.length > 0);
	const assigned = $derived(assignees.length > 0);
	const labelled = $derived(labels.length > 0);
	const on = $derived(labels.map((l) => l.name));
	/** What the Add menu offers: what has nothing yet, to those who may set it. */
	const asking = $derived(!reviewing && !!ask && people.length > 0);
	const assigning = $derived(!assigned && !!assign && assignable.length > 0);
	const labelling = $derived(!labelled && !!label && offered.length > 0);
</script>

{#snippet chips()}<Labels {labels} />{/snippet}
{#snippet sep()}<span class="sep" aria-hidden="true">·</span>{/snippet}

{#if reviewing || assigned || labelled || asking || assigning || labelling}
	<div class="item-facts">
		{#if reviewing}<ReviewersFact {reviews} {requested} {required} {base} {people} {ask} />{/if}
		{#if assigned}
			{#if reviewing}{@render sep()}{/if}
			<AssigneesFact {assignees} people={assignable} {assign} />
		{/if}
		{#if labelled}
			{#if reviewing || assigned}{@render sep()}{/if}
			{#if label && offered.length}<LabelPicker
					labels={offered}
					{on}
					toggle={label}
					summary={chips}
				/>{:else}<span class="fact">{@render chips()}</span>{/if}
		{/if}
		{#if asking || assigning || labelling}
			{#if reviewing || assigned || labelled}{@render sep()}{/if}
			<AddMenu
				people={asking ? people : []}
				ask={asking ? ask : undefined}
				assignable={assigning ? assignable : []}
				assign={assigning ? assign : undefined}
				labels={labelling ? offered : []}
				label={labelling ? label : undefined}
			/>
		{/if}
	</div>
{/if}