From c0bc0417a64855b3d64b35a380daf18cab3d520c Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Tue, 5 Aug 2025 19:27:56 +0200
Subject: [PATCH] UI/install: fix metaHeader reactive

---
 .../ui/src/workflows/Install/install.tsx      | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/pkgs/clan-app/ui/src/workflows/Install/install.tsx b/pkgs/clan-app/ui/src/workflows/Install/install.tsx
index 988d55391..73c3637b2 100644
--- a/pkgs/clan-app/ui/src/workflows/Install/install.tsx
+++ b/pkgs/clan-app/ui/src/workflows/Install/install.tsx
@@ -55,6 +55,16 @@ export const InstallModal = (props: InstallModalProps) => {
     { initialStep: props.initialStep || "init" },
   );
 
+  const MetaHeader = () => {
+    // @ts-expect-error some steps might not have
+    const HeaderComponent = () => stepper.currentStep()?.title;
+    return (
+      <Show when={HeaderComponent()}>
+        {(C) => <Dynamic component={C()} machineName={props.machineName} />}
+      </Show>
+    );
+  };
+
   return (
     <StepperProvider stepper={stepper}>
       <Modal
@@ -62,18 +72,9 @@ export const InstallModal = (props: InstallModalProps) => {
         onClose={() => {
           console.log("Install aborted");
         }}
-        metaHeader={() => {
-          // @ts-expect-error some steps might not have a title
-          const HeaderComponent = stepper.currentStep()?.title;
-          return (
-            <Show when={HeaderComponent}>
-              {(C) => (
-                <Dynamic component={C()} machineName={props.machineName} />
-              )}
-            </Show>
-          );
-        }}
-        // @ts-expect-error some steps might not have this
+        // @ts-expect-error some steps might not have
+        metaHeader={stepper.currentStep()?.title ? <MetaHeader /> : undefined}
+        // @ts-expect-error some steps might not have
         disablePadding={stepper.currentStep()?.isSplash}
       >
         {(ctx) => <InstallStepper />}