src/features/surface-host/ui/MessageQueueList.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script lang="ts">
  import { parseMessageQueuePayload } from "../logic/message-queue";

  let { payload }: { readonly payload: unknown } = $props();

  // Parse defensively; an unparseable payload yields null → render nothing
  // (graceful skip, per the custom-field contract).
  const data = $derived(parseMessageQueuePayload(payload));
</script>

{#if data !== null && data.messages.length > 0}
  <ul class="flex flex-col gap-1 text-sm">
    {#each data.messages as msg (msg.id)}
      <li class="rounded-box bg-base-200 px-3 py-2">
        <p class="whitespace-pre-wrap">{msg.text}</p>
        <time class="text-xs opacity-50" datetime={new Date(msg.queuedAt).toISOString()}>
          {new Date(msg.queuedAt).toLocaleTimeString()}
        </time>
      </li>
    {/each}
  </ul>
{/if}