Machine: add install button

pkgs/clan-app/ui/src/routes/Machine/Machine.tsx

@@ -1,8 +1,10 @@
 import { RouteSectionProps, useNavigate } from "@solidjs/router";
 import { SidebarPane } from "@/src/components/Sidebar/SidebarPane";
 import { navigateToClan, useClanURI, useMachineName } from "@/src/hooks/clan";
-import { Show } from "solid-js";
+import { createSignal, Show } from "solid-js";
 import { SectionGeneral } from "./SectionGeneral";
+import { InstallModal } from "@/src/workflows/Install/install";
+import { Button } from "@/src/components/Button/Button";
 
 export const Machine = (props: RouteSectionProps) => {
   const navigate = useNavigate();
@@ -13,10 +15,30 @@ export const Machine = (props: RouteSectionProps) => {
     navigateToClan(navigate, clanURI);
   };
 
-  const machineName = useMachineName();
+  const [showInstall, setShowModal] = createSignal(false);
 
+  let container: Node;
   return (
     <Show when={useMachineName()} keyed>
+      <Button
+        hierarchy="primary"
+        onClick={() => setShowModal(true)}
+        class="absolute top-0 right-0 m-4"
+      >
+        Install me!
+      </Button>
+      <Show when={showInstall()}>
+        <div
+          class="absolute top-0 left-0 w-full h-full flex justify-center items-center z-50 bg-white/90"
+          ref={(el) => (container = el)}
+        >
+          <InstallModal
+            machineName={useMachineName()}
+            mount={container!}
+            onClose={() => setShowModal(false)}
+          />
+        </div>
+      </Show>
       <SidebarPane title={useMachineName()} onClose={onClose}>
         <SectionGeneral />
       </SidebarPane>

pkgs/clan-app/ui/src/workflows/Install/install.tsx

@@ -41,6 +41,8 @@ const InstallStepper = () => {
 export interface InstallModalProps {
   machineName: string;
   initialStep?: InstallSteps[number]["id"];
+  mount?: Node;
+  onClose?: () => void;
 }
 
 const steps = [
@@ -80,9 +82,11 @@ export const InstallModal = (props: InstallModalProps) => {
   return (
     <StepperProvider stepper={stepper}>
       <Modal
+        mount={props.mount}
         title="Install machine"
         onClose={() => {
-          console.log("Install aborted");
+          console.log("Install modal closed");
+          props.onClose?.();
         }}
         // @ts-expect-error some steps might not have
         metaHeader={stepper.currentStep()?.title ? <MetaHeader /> : undefined}