flotilla/src/app/components/SpaceMemberBannedMenu.svelte
2026-07-29 15:52:13 -07:00

71 lines
1.8 KiB
Svelte

<script lang="ts">
import {onMount} from "svelte"
import Restart from "@assets/icons/restart.svg?dataurl"
import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
import {deriveSpaceSupportedMethods} from "@app/management"
import {pushToast} from "@app/toast"
import {relayManagement} from "@app/core"
type Props = {
url: string
pubkey: string
onClick: () => void
}
const {url, pubkey, onClick}: Props = $props()
const supportedMethods = deriveSpaceSupportedMethods(url)
const canUnban = $derived($supportedMethods.includes("unbanpubkey"))
const canRestore = $derived($supportedMethods.includes("allowpubkey"))
const back = () => history.back()
const unbanMember = async () => {
const {error} = await $relayManagement.forUrl(url).unbanPubkey(pubkey)
if (error) {
pushToast({theme: "error", message: error})
} else {
pushToast({message: "User has successfully been removed from the ban list!"})
back()
}
}
const restoreMember = async () => {
const {error} = await $relayManagement.forUrl(url).allowPubkey(pubkey)
if (error) {
pushToast({theme: "error", message: error})
} else {
pushToast({message: "User has successfully been restored to membership!"})
back()
}
}
let ul: Element
onMount(() => {
ul.addEventListener("click", onClick)
})
</script>
<ul class="menu whitespace-nowrap rounded-2xl bg-surface p-2" bind:this={ul}>
{#if canUnban}
<li>
<Button onclick={unbanMember}>
<Icon icon={CloseCircle} />
Unban User
</Button>
</li>
{/if}
{#if canRestore}
<li>
<Button onclick={restoreMember}>
<Icon icon={Restart} />
Restore User
</Button>
</li>
{/if}
</ul>