UI/install: split initial choice

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

@@ -7,7 +7,7 @@ import {
 import { createForm, FieldValues, SubmitHandler } from "@modular-forms/solid";
 import { Show } from "solid-js";
 import { Dynamic } from "solid-js/web";
-import { InitialStep } from "./steps/Initial";
+import { initialSteps } from "./steps/Initial";
 import { createInstallerSteps } from "./steps/createInstaller";
 import { installSteps } from "./steps/installSteps";
 
@@ -40,10 +40,14 @@ const InstallStepper = () => {
 
 export interface InstallModalProps {
   machineName: string;
-  initialStep?: string;
+  initialStep?: InstallSteps[number]["id"];
 }
 
-const steps = [InitialStep, ...createInstallerSteps, ...installSteps] as const;
+const steps = [
+  ...initialSteps,
+  ...createInstallerSteps,
+  ...installSteps,
+] as const;
 
 export type InstallSteps = typeof steps;
 

pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx

@@ -1,32 +1,24 @@
-import { useStepper } from "@/src/hooks/stepper";
+import { defineSteps, Step, StepBase, useStepper } from "@/src/hooks/stepper";
 import { InstallSteps } from "../install";
 import { Typography } from "@/src/components/Typography/Typography";
 import { Button } from "@/src/components/Button/Button";
 import { Divider } from "@/src/components/Divider/Divider";
+import { StepLayout } from "../../Steps";
 
-const InitialChoice = () => {
+const ChoiceLocalOrRemote = () => {
   const stepSignal = useStepper<InstallSteps>();
   return (
     <div class="flex flex-col gap-3">
       <div class="flex flex-col gap-6 rounded-md px-4 py-6 text-fg-def-1 bg-def-2">
-        <div class="flex gap-2">
-          <div class="flex flex-col gap-1 px-1">
+        <div class="flex gap-2 justify-between">
+          <div class="flex flex-col gap-1 px-1 justify-center">
             <Typography
               hierarchy="label"
               size="xs"
               weight="bold"
               color="primary"
             >
-              Remote setup
-            </Typography>
-            <Typography
-              hierarchy="body"
-              size="xxs"
-              weight="normal"
-              color="secondary"
-            >
-              Is your machine currently online? Does it have an IP-address, can
-              you SSH into it? And does it support Kexec?
+              I have physical access to the machine.
             </Typography>
           </div>
           <Button
@@ -34,31 +26,105 @@ const InitialChoice = () => {
             ghost
             hierarchy="secondary"
             icon="CaretRight"
-            onClick={() => stepSignal.setActiveStep("install:machine-0")}
-          ></Button>
+            onClick={() => stepSignal.setActiveStep("local:choice")}
+          />
         </div>
-        <Divider orientation="horizontal" class="bg-def-3" />
-
-        <div class="flex items-center justify-between gap-2">
-          <Typography hierarchy="label" size="xs" weight="bold">
-            I don't have an installer, yet
+      </div>
+      <div class="flex flex-col gap-6 rounded-md px-4 py-6 text-fg-def-1 bg-def-2">
+        <div class="flex gap-2 justify-between">
+          <div class="flex flex-col gap-1 px-1 justify-center">
+            <Typography
+              hierarchy="label"
+              size="xs"
+              weight="bold"
+              color="primary"
+            >
+              The Machine is remote and i have ssh access to it.
             </Typography>
+          </div>
           <Button
+            type="button"
             ghost
             hierarchy="secondary"
-            endIcon="Flash"
-            type="button"
-            onClick={() => stepSignal.setActiveStep("create:iso-0")}
-          >
-            Create USB Installer
-          </Button>
+            icon="CaretRight"
+            onClick={() => stepSignal.setActiveStep("install:address")}
+          />
         </div>
       </div>
     </div>
   );
 };
 
-export const InitialStep = {
-  id: "init",
-  content: InitialChoice,
+const ChoiceLocalInstaller = () => {
+  const stepSignal = useStepper<InstallSteps>();
+  return (
+    <StepLayout
+      body={
+        <div class="flex flex-col gap-3">
+          <div class="flex flex-col gap-6 rounded-md px-4 py-6 text-fg-def-1 bg-def-2">
+            <div class="flex gap-2 justify-between">
+              <div class="flex flex-col gap-1 px-1 justify-center">
+                <Typography
+                  hierarchy="label"
+                  size="xs"
+                  weight="bold"
+                  color="primary"
+                >
+                  I have an installer
+                </Typography>
+              </div>
+              <Button
+                type="button"
+                ghost
+                hierarchy="secondary"
+                icon="CaretRight"
+                onClick={() => stepSignal.setActiveStep("install:address")}
+              />
+            </div>
+          </div>
+          <div class="flex flex-col gap-6 rounded-md px-4 py-6 text-fg-def-1 bg-def-2">
+            <div class="flex gap-2 justify-between">
+              <div class="flex flex-col gap-1 px-1 justify-center">
+                <Typography
+                  hierarchy="label"
+                  size="xs"
+                  weight="bold"
+                  color="primary"
+                >
+                  I don't have an installer, yet
+                </Typography>
+              </div>
+              <Button
+                type="button"
+                ghost
+                hierarchy="secondary"
+                icon="CaretRight"
+                onClick={() => stepSignal.setActiveStep("create:prose")}
+              />
+            </div>
+          </div>
+        </div>
+      }
+      footer={
+        <div class="flex justify-start">
+          <Button
+            hierarchy="secondary"
+            icon="ArrowLeft"
+            onClick={() => stepSignal.previous()}
+          />
+        </div>
+      }
+    />
+  );
 };
+
+export const initialSteps = defineSteps([
+  {
+    id: "init",
+    content: ChoiceLocalOrRemote,
+  },
+  {
+    id: "local:choice",
+    content: ChoiceLocalInstaller,
+  },
+] as const);