Files
flotilla/src/app/components/ThunkToast.svelte
T
2025-08-21 15:01:31 -07:00

40 lines
981 B
Svelte

<script lang="ts">
import type {AbstractThunk} from "@welshman/app"
import {thunkHasStatus, thunkIsComplete} from "@welshman/app"
import {PublishStatus} from "@welshman/net"
import ThunkPending from "@app/components/ThunkPending.svelte"
import type {Toast} from "@app/util/toast"
import {popToast} from "@app/util/toast"
type Props = {
toast: Toast
thunk: AbstractThunk
}
const {toast, ...props}: Props = $props()
const id = toast.id
const thunk = props.thunk
const {Aborted, Timeout, Failure} = PublishStatus
const isFailure = $derived(thunkHasStatus([Aborted, Timeout, Failure], $thunk))
const isComplete = $derived(thunkIsComplete($thunk))
$effect(() => {
if (isFailure) {
popToast(id)
}
})
$effect(() => {
if (isComplete) {
setTimeout(() => popToast(id), 2000)
}
})
</script>
{#if !isComplete}
<ThunkPending {thunk} />
{:else if !isFailure}
<p class="text-xs opacity-75">Message sent!</p>
{/if}