johnandersen777.bsky.social/knotless
git that lives in your Atmosphere account
Forked from chadtmiller.com/knotless
0
0
<script lang="ts">
import type * as getOrg from '#lib/lexicons/dev/knotless/getOrg.ts';
import type { Snippet } from 'svelte';
import Avatar from '#lib/atoms/Avatar.svelte';
import Time from '#lib/atoms/Time.svelte';
import Person from '#lib/molecules/Person.svelte';
/**
* An organization's members, or those it invited, each with its role;
* a hidden member, or an invitation that lapsed, marked so, and the
* account `me` as you; `empty` when there are none. `actions`, when
* given, draws what may be done about each at its end.
*/
let {
members,
empty,
me,
actions
}: {
members: getOrg.MemberView[];
empty: Snippet;
me?: string;
actions?: Snippet<[getOrg.MemberView]>;
} = $props();
const roles: Record<string, string> = { admin: 'Admin', member: 'Member' };
</script>
<div class="box member-list">
<ul class="list">
{#each members as m (m.actor.did)}
<li>
<Avatar name={m.actor.handle} size="lg" did={m.actor.did} src={m.actor.avatar} />
<span class="who">
<span class="name"
><span class="clip"><Person handle={m.actor.handle} bot={m.actor.bot} /></span
>{#if m.standing === 'hidden'}<span
class="tag"
title="Only its members see this membership">Hidden</span
>{:else if m.standing === 'lapsed'}<span
class="tag"
title="Invited more than 7 days ago and not taken up. Invite them again."
>Lapsed</span
>{/if}{#if m.actor.did === me}<span class="tag you">You</span>{/if}</span
>
{#if m.standing === 'invited' || m.standing === 'lapsed'}<span class="since"
>Invited <Time at={m.invitedAt} /></span
>{/if}
</span>
<span class="end mute">{roles[m.role] ?? 'Member'}</span>
{#if actions}{@render actions(m)}{/if}
</li>
{:else}
<li class="empty">{@render empty()}</li>
{/each}
</ul>
</div>