DT-3689 - use snippets for nexus CTAs

src/lib/pages/nexus-empty-state.svelte

@@ -1,20 +1,16 @@
 <script lang="ts">
-  import Button from '$lib/holocene/button.svelte';
+  import type { Snippet } from 'svelte';
+
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import { useDarkMode } from '$lib/utilities/dark-mode';
-  import { routeForNexusEndpointCreate } from '$lib/utilities/route-for';
   import andromeda from '$lib/vendor/andromeda.png';
 
   type Props = {
-    createDisabled?: boolean;
-    createHref?: string;
+    actions?: Snippet;
   };
 
-  let {
-    createDisabled = false,
-    createHref = routeForNexusEndpointCreate(),
-  }: Props = $props();
+  let { actions }: Props = $props();
 </script>
 
 <div class="flex min-h-screen flex-col gap-8 p-10">
@@ -61,9 +57,7 @@
           > are often registered in the same Worker as the underlying Temporal primitives
           they abstract.
         </p>
-        <Button disabled={createDisabled} variant="primary" href={createHref}
-          >{translate('nexus.create-endpoint')}</Button
-        >
+        {@render actions?.()}
       </div>
     </div>
     <div class="bg-dark mx-auto mt-8 w-full" class:invert={!$useDarkMode}>

src/lib/pages/nexus-endpoint.svelte

@@ -1,28 +1,24 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
 
-  import Button from '$lib/holocene/button.svelte';
   import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
   import Markdown from '$lib/holocene/markdown-editor/preview.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { NexusEndpoint as Endpoint } from '$lib/types/nexus';
   import {
     routeForNamespace,
-    routeForNexusEndpointEdit,
     routeForTaskQueue,
   } from '$lib/utilities/route-for';
 
   let {
     endpoint,
-    editDisabled = false,
     taskQueueStatus,
-    editHref,
+    actions,
   }: {
     endpoint: Endpoint;
-    editDisabled?: boolean;
     taskQueueStatus?: Snippet;
-    editHref?: string;
+    actions?: Snippet;
   } = $props();
 </script>
 
@@ -32,10 +28,7 @@
       <h1 data-testid="namespace-selector-title">
         {endpoint.spec?.name || ''}
       </h1>
-      <Button
-        href={editHref ?? routeForNexusEndpointEdit(endpoint.id!)}
-        disabled={editDisabled}>{translate('common.edit')}</Button
-      >
+      {@render actions?.()}
     </div>
     <p>UUID: {endpoint.id}</p>
   </div>

src/lib/pages/nexus-endpoints.svelte

@@ -4,7 +4,6 @@
 
   import { page } from '$app/state';
 
-  import Button from '$lib/holocene/button.svelte';
   import EmptyState from '$lib/holocene/empty-state.svelte';
   import Input from '$lib/holocene/input/input.svelte';
   import Table from '$lib/holocene/table/table.svelte';
@@ -20,15 +19,15 @@
     createHref?: string;
     headers?: Snippet;
     columns?: Snippet<[NexusEndpoint]>;
+    actions?: Snippet;
   };
 
   let {
     endpoints = [],
     searchPlaceholder = translate('common.search'),
-    createDisabled = false,
-    createHref = '/nexus/create',
     headers,
     columns,
+    actions,
   }: Props = $props();
 
   let search = $state('');
@@ -48,15 +47,17 @@
 </script>
 
 {#if !endpoints?.length && !searchParam}
-  <NexusEmptyState {createDisabled} {createHref} />
+  <NexusEmptyState>
+    {#snippet actions()}
+      {@render actions?.()}
+    {/snippet}
+  </NexusEmptyState>
 {:else}
   <div class="mb-8 flex items-center justify-between">
     <h1 data-testid="namespace-selector-title">
       {translate('nexus.endpoints')}
     </h1>
-    <Button disabled={createDisabled} variant="primary" href={createHref}
-      >{translate('nexus.create-endpoint')}</Button
-    >
+    {@render actions?.()}
   </div>
   <div class="flex flex-col gap-4">
     <Input

src/routes/(app)/nexus/+page.svelte

@@ -3,12 +3,16 @@
 
   import PageTitle from '$lib/components/page-title.svelte';
   import Timestamp from '$lib/components/timestamp.svelte';
+  import Button from '$lib/holocene/button.svelte';
   import Link from '$lib/holocene/link.svelte';
   import TableHeaderRow from '$lib/holocene/table/table-header-row.svelte';
   import TableRow from '$lib/holocene/table/table-row.svelte';
   import { translate } from '$lib/i18n/translate';
   import NexusEndpoints from '$lib/pages/nexus-endpoints.svelte';
-  import { routeForNexusEndpoint } from '$lib/utilities/route-for';
+  import {
+    routeForNexusEndpoint,
+    routeForNexusEndpointCreate,
+  } from '$lib/utilities/route-for';
 
   import type { PageData } from '../$types';
 
@@ -19,6 +23,11 @@
 
 <PageTitle title={translate('nexus.endpoints')} url={page.url.href} />
 <NexusEndpoints {endpoints}>
+  {#snippet actions()}
+    <Button variant="primary" href={routeForNexusEndpointCreate()}>
+      {translate('nexus.create-endpoint')}
+    </Button>
+  {/snippet}
   {#snippet headers()}
     <TableHeaderRow>
       <th>Name</th>

src/routes/(app)/nexus/[id]/+page.svelte

@@ -5,10 +5,14 @@
 
   import PageTitle from '$lib/components/page-title.svelte';
   import TaskQueueStatus from '$lib/components/task-queue-status.svelte';
+  import Button from '$lib/holocene/button.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import NexusEndpoint from '$lib/pages/nexus-endpoint.svelte';
-  import { routeForNexus } from '$lib/utilities/route-for';
+  import {
+    routeForNexus,
+    routeForNexusEndpointEdit,
+  } from '$lib/utilities/route-for';
 
   let { data }: { data: LayoutData } = $props();
 
@@ -25,6 +29,11 @@
       {translate('nexus.back-to-endpoints')}
     </Link>
     <NexusEndpoint {endpoint}>
+      {#snippet actions()}
+        <Button href={routeForNexusEndpointEdit(endpoint.id!)}
+          >{translate('common.edit')}</Button
+        >
+      {/snippet}
       {#snippet taskQueueStatus()}
         <TaskQueueStatus {endpoint} />
       {/snippet}