johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts">
	import type { ActorView } from '#lib/lexicons/dev/knotless/defs.ts';
	import { plural, urlPath } from '#lib/format.ts';
	import Avatar from '#lib/atoms/Avatar.svelte';
	import BotMark from '#lib/atoms/BotMark.svelte';
	/** Who may push to a repository besides its owner, `people`, of `count` in all: their first few faces and how many they are in words, opening to each by name. */
	let { people, count = people.length }: { people: ActorView[]; count?: number } = $props();
	const SHOWN = 5;
	const said = $derived(plural(count, 'collaborator', 'collaborators'));
	const more = $derived(count - people.length);
</script>

<details class="popover people-menu">
	<summary class="bare"
		><span class="avs"
			>{#each people.slice(0, SHOWN) as a (a.did)}<Avatar
					name={a.handle}
					did={a.did}
					src={a.avatar}
					bot={a.bot}
				/>{/each}</span
		><span class="said">{said}</span></summary
	>
	<ul class="menu">
		<li class="head">{said}</li>
		{#each people as a (a.did)}<li>
				<a class="menu-item" href="/{urlPath(a.handle)}"
					><Avatar name={a.handle} did={a.did} src={a.avatar} /><span
						>{a.handle}{#if a.bot}<BotMark />{/if}</span
					></a
				>
			</li>{/each}
		{#if more > 0}<li class="others mute">and {plural(more, 'other', 'others')}</li>{/if}
	</ul>
</details>