johnandersen777.bsky.social/knotless
git that lives in your Atmosphere account
Forked from chadtmiller.com/knotless
0
0
<script lang="ts">
import type { ActorView } from '#lib/lexicons/dev/knotless/defs.ts';
import Avatar from '#lib/atoms/Avatar.svelte';
/**
* The accounts a mention being typed may be of, as a listbox under the
* box it is typed in: `at` is the one Enter or Tab picks, each
* `{id}-{i}` for the box's `aria-activedescendant`. Picked on the
* press, before the box loses focus and the list closes.
*/
let {
id,
found,
at,
onpick,
onhover
}: {
id: string;
found: ActorView[];
at: number;
onpick: (a: ActorView) => void;
onhover: (i: number) => void;
} = $props();
</script>
<div {id} class="handle-list mention-list" role="listbox" aria-label="Mention someone">
{#each found as a, i (a.did)}
<div
id="{id}-{i}"
class="handle-option"
role="option"
tabindex="-1"
aria-selected={i === at}
onmousedown={(e) => {
e.preventDefault();
onpick(a);
}}
onmouseenter={() => onhover(i)}
>
<Avatar name={a.handle} did={a.did} src={a.avatar} />
<span class="who"><b>{a.handle}</b></span>
</div>
{/each}
</div>