From 1897b7bb06143a5ea40c87d213c07f6540ddad5e Mon Sep 17 00:00:00 2001
From: Brian McGee <brian@bmcgee.ie>
Date: Fri, 22 Aug 2025 12:15:16 +0100
Subject: [PATCH] feat(ui): use NavSection in installer workflow

---
 .../src/workflows/Install/steps/Initial.tsx   | 101 +++---------------
 1 file changed, 17 insertions(+), 84 deletions(-)

diff --git a/pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx b/pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx
index 8c048fd8c..7747a8bc8 100644
--- a/pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx
+++ b/pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx
@@ -3,53 +3,20 @@ import { InstallSteps } from "../install";
 import { Typography } from "@/src/components/Typography/Typography";
 import { Button } from "@/src/components/Button/Button";
 import { StepLayout } from "../../Steps";
+import { NavSection } from "@/src/components/NavSection/NavSection";
 
 const ChoiceLocalOrRemote = () => {
   const stepSignal = useStepper<InstallSteps>();
   return (
     <div class="flex size-full 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 justify-between gap-2">
-          <div class="flex flex-col justify-center gap-1 px-1">
-            <Typography
-              hierarchy="body"
-              size="default"
-              weight="bold"
-              color="primary"
-            >
-              I have physical access to the machine.
-            </Typography>
-          </div>
-          <Button
-            type="button"
-            ghost
-            hierarchy="secondary"
-            icon="CaretRight"
-            onClick={() => stepSignal.setActiveStep("local:choice")}
-          />
-        </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 justify-between gap-2">
-          <div class="flex flex-col justify-center gap-1 px-1">
-            <Typography
-              hierarchy="body"
-              size="default"
-              weight="bold"
-              color="primary"
-            >
-              The Machine is remote and i have ssh access to it.
-            </Typography>
-          </div>
-          <Button
-            type="button"
-            ghost
-            hierarchy="secondary"
-            icon="CaretRight"
-            onClick={() => stepSignal.setActiveStep("install:address")}
-          />
-        </div>
-      </div>
+      <NavSection
+        label="I have physical access to the machine"
+        onClick={() => stepSignal.setActiveStep("local:choice")}
+      />
+      <NavSection
+        label="The Machine is remote and i have ssh access to it"
+        onClick={() => stepSignal.setActiveStep("install:address")}
+      />
     </div>
   );
 };
@@ -60,48 +27,14 @@ const ChoiceLocalInstaller = () => {
     <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 justify-between gap-2">
-              <div class="flex flex-col justify-center gap-1 px-1">
-                <Typography
-                  hierarchy="body"
-                  size="default"
-                  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 justify-between gap-2">
-              <div class="flex flex-col justify-center gap-1 px-1">
-                <Typography
-                  hierarchy="body"
-                  size="default"
-                  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>
+          <NavSection
+            label="I have an installer"
+            onClick={() => stepSignal.setActiveStep("install:address")}
+          />
+          <NavSection
+            label="I don't have an installer, yet"
+            onClick={() => stepSignal.setActiveStep("create:prose")}
+          />
         </div>
       }
       footer={