Migrate layout files to Svelte 5 (#2937)

* Migrate layout files to Svelte 5

* Update FeedbackButton

Author: laurakwhit

src/lib/components/feedback-button.svelte

@@ -1,26 +1,23 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
-  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Button from '$lib/holocene/button.svelte';
 
-  const href =
-    $page.data?.settings?.feedbackURL ||
-    'https://github.com/temporalio/ui/issues/new/choose';
+  const href = $derived(
+    page.data?.settings?.feedbackURL ||
+      'https://github.com/temporalio/ui/issues/new/choose',
+  );
 </script>
 
-<a {href} target="_blank" data-testid="give-feedback" rel="noreferrer">
-  <div class="feedback-button">
-    <Icon class="mr-2 text-purple-200" name="feedback" height={12} width={12} />
-    Give Feedback
-  </div>
-</a>
-
-<style lang="postcss">
-  .feedback-button {
-    @apply flex cursor-pointer items-center justify-between px-4 py-2 text-sm text-purple-200 shadow-md;
-  }
-
-  .feedback-button:hover {
-    @apply bg-slate-700;
-  }
-</style>
+<Button
+  size="sm"
+  leadingIcon="feedback"
+  variant="ghost"
+  class="text-brand shadow-md"
+  {href}
+  target="_blank"
+  data-testid="give-feedback"
+  rel="noreferrer"
+>
+  Give Feedback
+</Button>

src/lib/components/nexus-guard.svelte

@@ -1,11 +1,19 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import type { Snippet } from 'svelte';
 
-  $: nexusEnabled = $page.data?.systemInfo?.capabilities?.nexus;
+  import { page } from '$app/state';
+
+  interface Props {
+    children: Snippet;
+    fallback?: Snippet;
+  }
+
+  let { children, fallback }: Props = $props();
+  let nexusEnabled = $derived(page.data?.systemInfo?.capabilities?.nexus);
 </script>
 
 {#if nexusEnabled}
-  <slot />
+  {@render children()}
 {:else}
-  <slot name="fallback" />
+  {@render fallback?.()}
 {/if}

src/routes/(app)/+layout.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import { afterNavigate, goto } from '$app/navigation';
-  import { page, updated } from '$app/stores';
+  import { page, updated } from '$app/state';
 
   import BottomNavigation from '$lib/components/bottom-nav.svelte';
   import DataEncoderSettings from '$lib/components/data-encoder-settings.svelte';
@@ -36,27 +38,36 @@
 
   import type { DescribeNamespaceResponse as Namespace } from '$types';
 
-  let namespaceList: NamespaceListItem[];
+  interface Props {
+    children: Snippet;
+  }
 
-  $: isCloud = $page.data?.settings?.runtimeEnvironment?.isCloud;
-  $: activeNamespaceName = $page.params?.namespace ?? $lastUsedNamespace;
-  $: namespaceNames = isCloud
-    ? [$page.params.namespace]
-    : $namespaces.map((namespace: Namespace) => namespace?.namespaceInfo?.name);
-  $: namespaceList = namespaceNames.map((namespace: string) => {
-    const getHref = (namespace: string) =>
-      isCloud ? routeForWorkflows({ namespace }) : getCurrentHref(namespace);
-    return {
-      namespace,
-      onClick: (namespace: string) => {
-        $lastUsedNamespace = namespace;
-        goto(getHref(namespace));
-      },
-    };
-  });
+  let { children }: Props = $props();
 
-  $: routes = getRoutes(activeNamespaceName);
-  $: linkList = getLinkList(routes, !!$inProgressBatchOperation);
+  let isCloud = $derived(page.data?.settings?.runtimeEnvironment?.isCloud);
+  let activeNamespaceName = $derived(
+    page.params?.namespace ?? $lastUsedNamespace,
+  );
+  let namespaceNames = $derived(
+    isCloud
+      ? [page.params.namespace]
+      : $namespaces.map(
+          (namespace: Namespace) => namespace?.namespaceInfo?.name,
+        ),
+  );
+  let namespaceList: NamespaceListItem[] = $derived(
+    namespaceNames.map((namespace: string) => {
+      const getHref = (namespace: string) =>
+        isCloud ? routeForWorkflows({ namespace }) : getCurrentHref(namespace);
+      return {
+        namespace,
+        onClick: (namespace: string) => {
+          $lastUsedNamespace = namespace;
+          goto(getHref(namespace));
+        },
+      };
+    }),
+  );
 
   const getRoutes = (namespace: string) => {
     return {
@@ -71,21 +82,6 @@
     };
   };
 
-  $: ({
-    workflowsRoute,
-    schedulesRoute,
-    batchOperationsRoute,
-    workerDeploymentsRoute,
-    archivalRoute,
-  } = routes);
-  $: showNamespacePicker = [
-    workflowsRoute,
-    schedulesRoute,
-    workerDeploymentsRoute,
-    batchOperationsRoute,
-    archivalRoute,
-  ].some((route) => $page.url.href.includes(route));
-
   const getLinkList = (
     {
       workflowsRoute,
@@ -152,7 +148,7 @@
         href: nexusRoute,
         icon: 'nexus',
         label: translate('nexus.nexus'),
-        hidden: !$page.data?.systemInfo?.capabilities?.nexus,
+        hidden: !page.data?.systemInfo?.capabilities?.nexus,
         isActive: (path) => {
           const match = path.split('/').find((segment) => segment === 'nexus');
           return !!match;
@@ -180,6 +176,25 @@
     ];
   };
 
+  let routes = $derived(getRoutes(activeNamespaceName));
+  let linkList = $derived(getLinkList(routes, !!$inProgressBatchOperation));
+  let {
+    workflowsRoute,
+    schedulesRoute,
+    batchOperationsRoute,
+    workerDeploymentsRoute,
+    archivalRoute,
+  } = $derived(routes);
+  let showNamespacePicker = $derived(
+    [
+      workflowsRoute,
+      schedulesRoute,
+      workerDeploymentsRoute,
+      batchOperationsRoute,
+      archivalRoute,
+    ].some((route) => page.url.href.includes(route)),
+  );
+
   function getCurrentHref(namespace: string) {
     const namespacePages = [
       {
@@ -197,7 +212,7 @@
     ];
 
     for (const { subPath, fullRoute } of namespacePages) {
-      if ($page.url.pathname.endsWith(subPath)) {
+      if (page.url.pathname.endsWith(subPath)) {
         return fullRoute;
       }
     }
@@ -210,8 +225,8 @@
     goto(routeForLoginPage());
   };
 
-  updated.subscribe(async (value) => {
-    if (value) {
+  $effect(() => {
+    if (updated.current) {
       // Hard refresh when version does not match
       window.location.reload();
     }
@@ -239,7 +254,7 @@
   <div class="sticky top-0 z-30 hidden h-screen w-auto md:block">
     <SideNavigation {linkList} {isCloud}>
       <NavigationItem
-        link={$page.data?.settings?.feedbackURL ||
+        link={page.data?.settings?.feedbackURL ||
           'https://github.com/temporalio/ui/issues/new/choose'}
         label={translate('common.feedback')}
         icon="feedback"
@@ -264,7 +279,7 @@
       class="flex h-[calc(100%-2.5rem)] w-full flex-col gap-4 p-4 md:p-8"
     >
       <ErrorBoundary>
-        <slot />
+        {@render children()}
       </ErrorBoundary>
     </div>
     <BottomNavigation

src/routes/(app)/import/+layout.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import type { Snippet } from 'svelte';
+
+  import { page } from '$app/state';
 
   import PageTitle from '$lib/components/page-title.svelte';
+
+  interface Props {
+    children: Snippet;
+  }
+  let { children }: Props = $props();
 </script>
 
-<PageTitle title="Import Event History" url={$page.url.href} />
-<slot />
+<PageTitle title="Import Event History" url={page.url.href} />
+{@render children()}

src/routes/(app)/import/events/[namespace]/[workflow]/[run]/history/+layout.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import ImportEventsView from '$lib/pages/import-events-view.svelte';
+
+  interface Props {
+    children: Snippet;
+  }
+  let { children }: Props = $props();
 </script>
 
 <ImportEventsView>
-  <slot />
+  {@render children()}
 </ImportEventsView>

src/routes/(app)/namespaces/[namespace]/task-queues/+layout.svelte

@@ -1,8 +1,14 @@
-<script>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import { translate } from '$lib/i18n/translate';
+  interface Props {
+    children: Snippet;
+  }
+  let { children }: Props = $props();
 </script>
 
 <p class="relative flex items-center gap-4" data-testid="task-queue-title">
   {translate('common.task-queue')}
 </p>
-<slot />
+{@render children()}

src/routes/(app)/namespaces/[namespace]/worker-deployments/[deployment]/+layout.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import { viewDataEncoderSettings } from '$lib/components/data-encoder-settings.svelte';
+
+  interface Props {
+    children: Snippet;
+  }
+  let { children }: Props = $props();
 </script>
 
 <div
@@ -8,5 +15,5 @@
     : 'top-0'}
 flex h-full flex-col"
 >
-  <slot />
+  {@render children()}
 </div>

src/routes/(app)/namespaces/[namespace]/workflows/[workflow]/[run]/+layout.svelte

@@ -1,14 +1,19 @@
 <script lang="ts">
-  import { onDestroy } from 'svelte';
+  import { onDestroy, type Snippet } from 'svelte';
 
   import WorkflowRunLayout from '$lib/layouts/workflow-run-layout.svelte';
   import { clearPreviousEventParameters } from '$lib/stores/previous-events';
 
+  interface Props {
+    children: Snippet;
+  }
+  let { children }: Props = $props();
+
   onDestroy(() => {
     clearPreviousEventParameters();
   });
 </script>
 
 <WorkflowRunLayout>
-  <slot />
+  {@render children()}
 </WorkflowRunLayout>

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

@@ -1,13 +1,21 @@
-<script>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import NexusGuard from '$lib/components/nexus-guard.svelte';
+
+  interface Props {
+    children: Snippet;
+  }
+
+  let { children }: Props = $props();
 </script>
 
 <NexusGuard>
-  <div slot="fallback">
+  {#snippet fallback()}
     <p>
       Sorry, this feature is not available in this version of Temporal. Please
       enable Nexus or upgrade to a newer version.
     </p>
-  </div>
-  <slot />
+  {/snippet}
+  {@render children()}
 </NexusGuard>

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

@@ -1,12 +1,17 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import type { LayoutData } from './$types';
 
   import Error from '$lib/holocene/error.svelte';
   import { translate } from '$lib/i18n/translate';
 
-  export let data: LayoutData;
-
-  $: ({ endpoint } = data);
+  interface Props {
+    data: LayoutData;
+    children: Snippet;
+  }
+  let { data, children }: Props = $props();
+  let { endpoint } = $derived(data);
 </script>
 
 {#if !endpoint}
@@ -18,5 +23,5 @@
     status={404}
   />
 {:else}
-  <slot />
+  {@render children()}
 {/if}