flotilla/src/app/components/ThunkStatusDetail.svelte

<script lang="ts">
  import {PublishStatus} from '@welshman/net'
  import {displayRelayUrl} from '@welshman/util'
  import Button from '@lib/components/Button.svelte'

  export let url: string
  export let status: string
  export let message: string
  export let retry: () => void

  $: {
    if (!message && status === PublishStatus.Timeout) {
      message = "request timed out"
    }

    if (!message) {
      message = "no details recieved"
    }
  }
</script>

<div class="card2 bg-alt col-2">
  <p>
    Failed to publish to {displayRelayUrl(url)}: {message}.
  </p>
  <Button class="link" on:click={retry}>Retry</Button>
</div>