johnandersen777.bsky.social/knotless
git that lives in your Atmosphere account
Forked from chadtmiller.com/knotless
0
0
<script lang="ts">
import type * as blockActor from '#lib/lexicons/dev/knotless/blockActor.ts';
import type * as unblockActor from '#lib/lexicons/dev/knotless/unblockActor.ts';
import type { DidString } from '@atproto/lex';
import { call } from '#lib/data.ts';
import { REPORT, reporting } from '#lib/report.svelte.ts';
import Icon from '#lib/atoms/Icon.svelte';
/**
* More to do about the account `did`, called `handle`, as whoever is
* logged in, under a "…": blocking it from all their repositories, or
* unblocking it if they do, as `blocking` says, and reporting it.
*/
let { did, handle, blocking }: { did: string; handle: string; blocking: boolean } = $props();
let blocked = $derived(blocking);
let open = $state(false);
let problem = $state('');
let busy = $state(false);
async function toggle() {
busy = true;
problem = '';
const nsid = blocked ? 'dev.knotless.unblockActor' : 'dev.knotless.blockActor';
const state = await call<typeof blockActor.main | typeof unblockActor.main>(nsid, {
subject: did as DidString
}).catch((err: Error) => {
problem = err.message;
return null;
});
busy = false;
if (state) blocked = state.blocking;
if (!problem) open = false;
}
function report() {
reporting.subject = did;
reporting.what = handle;
open = false;
}
</script>
<details class="popover actor-menu" data-held={busy || undefined} bind:open>
<summary class="btn" aria-label="More about {handle}"><Icon name="kebab" /></summary>
<div class="menu">
<button class="menu-item" type="button" disabled={busy} aria-busy={busy} onclick={toggle}
>{busy
? blocked
? 'Unblocking…'
: 'Blocking…'
: blocked
? `Unblock ${handle}`
: `Block ${handle}`}</button
>
<button class="menu-item" type="button" popovertarget={REPORT} onclick={report}
>{`Report ${handle}`}</button
>
{#if problem}<p class="menu-note problem" role="alert">{problem}</p>{/if}
<a href="/settings/blocks">Blocked accounts</a>
</div>
</details>