refactor: replace PayloadDecoder and MetadataDecoder with unified Payload component

src/lib/components/event/event-card.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   import { page } from '$app/state';
 
+  import Payload from '$lib/components/payload.svelte';
   import Timestamp from '$lib/components/timestamp.svelte';
-  import CodeBlock from '$lib/holocene/code-block.svelte';
   import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { EventLink as ELink } from '$lib/types';
-  import { type Payload } from '$lib/types';
+  import { type Payload as RawPayload } from '$lib/types';
   import type { WorkflowEvent } from '$lib/types/events';
   import { getEventLinkHref } from '$lib/utilities/event-link-href';
   import {
@@ -28,8 +28,6 @@
   } from '$lib/utilities/route-for';
 
   import EventDetailsLink from './event-details-link.svelte';
-  import MetadataDecoder from './metadata-decoder.svelte';
-  import PayloadDecoder from './payload-decoder.svelte';
 
   let { event }: { event: WorkflowEvent } = $props();
   const { namespace, workflow, run } = $derived(page.params);
@@ -157,23 +155,21 @@
 {/snippet}
 
 {#snippet eventLinks(links: ELink[])}
-  {#each links as link}
+  {#each links as link (link)}
     {@render eventLink(link)}
     {@render eventNamespaceLink(link)}
   {/each}
 {/snippet}
 
-{#snippet eventSummary(value: Payload)}
+{#snippet eventSummary(value: RawPayload)}
   <div class="flex items-start gap-4">
     <p class="min-w-56 text-sm text-secondary/80">Summary</p>
     <p class="whitespace-pre-line">
-      <MetadataDecoder
+      <Payload
         {value}
-        let:decodedValue
+        mode="summary"
         fallback={translate('events.decode-failed')}
-      >
-        {decodedValue}
-      </MetadataDecoder>
+      />
     </p>
   </div>
 {/snippet}
@@ -186,50 +182,37 @@
       {format(key)}
     </p>
     {#if value?.payloads}
-      <PayloadDecoder {value} key="payloads">
-        {#snippet children(decodedValue)}
-          <CodeBlock
-            content={decodedValue}
-            maxHeight={384}
-            copyIconTitle={translate('common.copy-icon-title')}
-            copySuccessIconTitle={translate('common.copy-success-icon-title')}
-          />
-        {/snippet}
-      </PayloadDecoder>
+      <Payload
+        {value}
+        key="payloads"
+        maxHeight={384}
+        copyIconTitle={translate('common.copy-icon-title')}
+        copySuccessIconTitle={translate('common.copy-success-icon-title')}
+      />
     {:else if key === 'searchAttributes'}
-      <PayloadDecoder
+      <Payload
         key="searchAttributes"
         value={{ searchAttributes: codeBlockValue }}
-      >
-        {#snippet children(decodedValue)}
-          <CodeBlock
-            content={decodedValue}
-            maxHeight={384}
-            copyIconTitle={translate('common.copy-icon-title')}
-            copySuccessIconTitle={translate('common.copy-success-icon-title')}
-          />
-        {/snippet}
-      </PayloadDecoder>
+        maxHeight={384}
+        copyIconTitle={translate('common.copy-icon-title')}
+        copySuccessIconTitle={translate('common.copy-success-icon-title')}
+      />
     {:else}
-      <PayloadDecoder value={codeBlockValue}>
-        {#snippet children(decodedValue)}
-          <CodeBlock
-            content={decodedValue}
-            maxHeight={384}
-            copyIconTitle={translate('common.copy-icon-title')}
-            copySuccessIconTitle={translate('common.copy-success-icon-title')}
-          />
-        {/snippet}
-      </PayloadDecoder>
+      <Payload
+        value={codeBlockValue}
+        maxHeight={384}
+        copyIconTitle={translate('common.copy-icon-title')}
+        copySuccessIconTitle={translate('common.copy-success-icon-title')}
+      />
     {/if}
   </div>
   {#if stackTrace}
     <div>
       <p class="mb-1 min-w-56 text-sm text-secondary/80">
         {translate('workflows.call-stack-tab')}
       </p>
-      <CodeBlock
-        content={stackTrace}
+      <Payload
+        value={stackTrace}
         language="text"
         maxHeight={384}
         copyIconTitle={translate('common.copy-icon-title')}

src/lib/components/event/event-details-row.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { twMerge as merge } from 'tailwind-merge';
 
+  import Payload from '$lib/components/payload.svelte';
   import Badge from '$lib/holocene/badge.svelte';
   import Copyable from '$lib/holocene/copyable/index.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -10,7 +11,6 @@
   import { displayLinkType } from '$lib/utilities/get-single-attribute-for-event';
 
   import EventDetailsLink from './event-details-link.svelte';
-  import PayloadDecoder from './payload-decoder.svelte';
 
   export let key: string;
   export let value: string | Record<string, unknown> | Payloads;
@@ -33,15 +33,12 @@
       <div
         class="flex max-w-sm items-center justify-between gap-2 overflow-hidden pr-1 xl:flex-nowrap"
       >
-        <PayloadDecoder {value} key="payloads">
-          {#snippet children(decodedValue)}
-            <div class={merge('payload', $$props.class)}>
-              <code>
-                <pre class="truncate">{decodedValue.slice(0, 60)}</pre>
-              </code>
-            </div>
-          {/snippet}
-        </PayloadDecoder>
+        <Payload
+          {value}
+          key="payloads"
+          mode="inline-truncated"
+          class={merge($$props.class)}
+        />
       </div>
     {:else if linkType !== 'none'}
       <Copyable
@@ -64,17 +61,3 @@
     {/if}
   </div>
 {/if}
-
-<style lang="postcss">
-  .payload {
-    @apply overflow-hidden border border-subtle bg-code-block px-1 py-0.5 font-mono text-xs;
-  }
-
-  .payload code {
-    @apply text-primary;
-  }
-
-  .payload pre {
-    @apply text-primary;
-  }
-</style>

src/lib/components/event/event-metadata-expanded.svelte

@@ -1,22 +1,19 @@
 <script lang="ts">
+  import Payload from '$lib/components/payload.svelte';
   import Badge from '$lib/holocene/badge.svelte';
   import { translate } from '$lib/i18n/translate';
-  import type { Payload } from '$lib/types';
+  import type { Payload as RawPayload } from '$lib/types';
 
-  import MetadataDecoder from './metadata-decoder.svelte';
-
-  export let value: Payload;
+  export let value: RawPayload;
 </script>
 
 <div class="block w-full select-all px-2 py-1 text-left">
   <p class="text-sm">Summary</p>
-  <MetadataDecoder
-    {value}
-    let:decodedValue
-    fallback={translate('events.decode-failed')}
-  >
-    <Badge type="secondary" class="inline-block whitespace-pre-wrap">
-      {decodedValue}
-    </Badge>
-  </MetadataDecoder>
+  <Payload {value} mode="summary" fallback={translate('events.decode-failed')}>
+    {#snippet children(decodedValue)}
+      <Badge type="secondary" class="inline-block whitespace-pre-wrap">
+        {decodedValue}
+      </Badge>
+    {/snippet}
+  </Payload>
 </div>

src/lib/components/event/event-summary-row.svelte

@@ -4,6 +4,7 @@
 
   import { page } from '$app/state';
 
+  import Payload from '$lib/components/payload.svelte';
   import { timestamp } from '$lib/components/timestamp.svelte';
   import Badge from '$lib/holocene/badge.svelte';
   import Copyable from '$lib/holocene/copyable/index.svelte';
@@ -42,7 +43,6 @@
   import EventDetailsFull from './event-details-full.svelte';
   import EventDetailsRow from './event-details-row.svelte';
   import EventLink from './event-link.svelte';
-  import MetadataDecoder from './metadata-decoder.svelte';
 
   interface Props {
     event: IterableEvent;
@@ -217,7 +217,7 @@
   {#if isEventGroup(event)}
     <td class="font-mono">
       <div class="flex items-center gap-0.5">
         {#each event.eventList as groupEvent}
           <Link
             data-testid="link"
             href={routeForEventHistoryEvent({
@@ -326,21 +326,16 @@
         <EventDetailsRow {...primaryLocalAttribute} {attributes} />
       {/if}
       {#if currentEvent?.userMetadata?.summary}
-        <MetadataDecoder
-          value={currentEvent.userMetadata.summary}
-          let:decodedValue
+        <div
+          class="flex max-w-xl items-center gap-2 first:pt-0 last:border-b-0 md:w-auto"
         >
-          {#if decodedValue}
-            <div
-              class="flex max-w-xl items-center gap-2 first:pt-0 last:border-b-0 md:w-auto"
-            >
-              <p class="whitespace-nowrap text-right text-xs">Summary</p>
-              <Badge type="secondary" class="block select-none truncate">
-                {decodedValue}
-              </Badge>
-            </div>
-          {/if}
-        </MetadataDecoder>
+          <p class="whitespace-nowrap text-right text-xs">Summary</p>
+          <Payload
+            value={currentEvent.userMetadata.summary}
+            mode="summary"
+            class="block select-none truncate"
+          />
+        </div>
       {/if}
       {#if currentEvent?.links?.length}
         <EventLink