From b633db4f8eb016acebee36543b154c1e414a8636 Mon Sep 17 00:00:00 2001
From: Timo <hallo@timobusse.de>
Date: Tue, 6 May 2025 12:26:08 +0200
Subject: [PATCH] machine-details: updates form layout

---
 .../app/src/routes/machines/details.tsx       | 287 ++++++++++--------
 1 file changed, 154 insertions(+), 133 deletions(-)

diff --git a/pkgs/webview-ui/app/src/routes/machines/details.tsx b/pkgs/webview-ui/app/src/routes/machines/details.tsx
index e09aec051..2e5786c0e 100644
--- a/pkgs/webview-ui/app/src/routes/machines/details.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/details.tsx
@@ -26,6 +26,7 @@ import { DiskStep, DiskValues } from "./install/disk-step";
 import { SummaryStep } from "./install/summary-step";
 import cx from "classnames";
 import { VarsStep, VarsValues } from "./install/vars-step";
+import Fieldset from "@/src/Form/fieldset";
 
 type MachineFormInterface = MachineData & {
   sshKey?: File;
@@ -519,83 +520,71 @@ const MachineForm = (props: MachineDetailsProps) => {
 
   return (
     <>
-      <div class="flex flex-col gap-6 p-4">
-        <span class="mb-2 flex w-full justify-center">
-          <MachineAvatar name={machineName()} />
-        </span>
-        <Form onSubmit={handleSubmit} class="flex flex-col gap-6">
-          <Field name="machine.name">
-            {(field, props) => (
-              <TextInput
-                inputProps={props}
-                label="Name"
-                value={field.value ?? ""}
-                error={field.error}
-                class="col-span-2"
-                required
-              />
-            )}
-          </Field>
-          <Field name="machine.tags" type="string[]">
-            {(field, props) => (
-              <>
-                <FieldLayout
-                  label={<InputLabel>Tags</InputLabel>}
-                  field={
-                    <span class="col-span-10">
-                      <For each={field.value}>
-                        {(tag) => (
-                          <span class="mx-2 w-fit rounded-full px-3 py-1 bg-inv-4 fg-inv-1">
-                            {tag}
-                          </span>
-                        )}
-                      </For>
-                    </span>
-                  }
-                />
-              </>
-            )}
-          </Field>
-          <Field name="machine.description">
-            {(field, props) => (
-              <TextInput
-                inputProps={props}
-                label="Description"
-                value={field.value ?? ""}
-                error={field.error}
-                class="col-span-2"
-                required
-              />
-            )}
-          </Field>
-          <Field name="hw_config">
-            {(field, props) => (
-              <FieldLayout
-                label={<InputLabel>Hardware Configuration</InputLabel>}
-                field={<span>{field.value || "None"}</span>}
-              />
-            )}
-          </Field>
-          <Field name="disk_schema.schema_name">
-            {(field, props) => (
-              <>
-                <FieldLayout
-                  label={<InputLabel>Disk schema</InputLabel>}
-                  field={<span>{field.value || "None"}</span>}
-                />
-              </>
-            )}
-          </Field>
-
-          <div class="  col-span-full" tabindex="0">
-            <input type="checkbox" />
-            <div class="  px-0 text-xl ">Connection Settings</div>
-            <div class="">
-              <Field name="machine.deploy.targetHost">
+      <div class="flex flex-col gap-6">
+        <div class="sticky top-0 flex items-center justify-end gap-2 bg-secondary-50 border-b border-secondary-100 py-2 px-4">
+          <div class="flex gap-3 items-center">
+            <div class="w-fit" data-tip="Machine must be online">
+              {/* <Button
+                class="w-full"
+                size="s"
+                // disabled={!online()}
+                onClick={() => {
+                  setInstallModalOpen(true);
+                }}
+                endIcon={<Icon icon="Flash" />}
+              >
+                Install
+              </Button> */}
+            </div>
+            {/* <Typography hierarchy="label" size="default">
+              Installs the system for the first time. Used to bootstrap the
+              remote device.
+            </Typography> */}
+          </div>
+          <div class="flex gap-3 items-center">
+            <div class="button-group flex">
+              <Button
+                variant="light"
+                class="w-full"
+                size="s"
+                onClick={() => {
+                  setInstallModalOpen(true);
+                }}
+                endIcon={<Icon icon="Flash" />}
+              >
+                Install
+              </Button>
+              <Button
+                variant="light"
+                class="w-full"
+                size="s"
+                onClick={() => handleUpdate()}
+                endIcon={<Icon icon="Update" />}
+              >
+                Update
+              </Button>
+            </div>
+            <div class=" w-fit" data-tip="Machine must be online"></div>
+            {/* <Typography hierarchy="label" size="default">
+              Update the system if changes should be synced after the
+              installation process.
+            </Typography> */}
+          </div>
+        </div>
+        <div class="p-4">
+          <span class="mb-2 flex w-full justify-center">
+            <MachineAvatar name={machineName()} />
+          </span>
+          <Form
+            onSubmit={handleSubmit}
+            class="mx-auto flex w-full max-w-2xl flex-col gap-y-6"
+          >
+            <Fieldset legend="General">
+              <Field name="machine.name">
                 {(field, props) => (
                   <TextInput
                     inputProps={props}
-                    label="Target Host"
+                    label="Name"
                     value={field.value ?? ""}
                     error={field.error}
                     class="col-span-2"
@@ -603,73 +592,105 @@ const MachineForm = (props: MachineDetailsProps) => {
                   />
                 )}
               </Field>
-            </div>
-          </div>
+              <Field name="machine.description">
+                {(field, props) => (
+                  <TextInput
+                    inputProps={props}
+                    label="Description"
+                    value={field.value ?? ""}
+                    error={field.error}
+                    class="col-span-2"
+                  />
+                )}
+              </Field>
+              <Field name="machine.tags" type="string[]">
+                {(field, props) => (
+                  <div class="flex gap-4 items-center">
+                    <Typography hierarchy="label" size="default" weight="bold">
+                      Tags{" "}
+                    </Typography>
+                    <For each={field.value}>
+                      {(tag) => (
+                        <span class="mx-2 w-fit rounded-full px-3 py-0.5 bg-inv-4 fg-inv-1">
+                          <Typography
+                            hierarchy="label"
+                            size="s"
+                            inverted={true}
+                          >
+                            {tag}
+                          </Typography>
+                        </span>
+                      )}
+                    </For>
+                  </div>
+                )}
+              </Field>
+            </Fieldset>
 
-          {
-            <div class=" col-span-full justify-end">
+            <Fieldset legend="Hardware">
+              <Field name="hw_config">
+                {(field, props) => (
+                  <FieldLayout
+                    label={<InputLabel>Hardware Configuration</InputLabel>}
+                    field={<span>{field.value || "None"}</span>}
+                  />
+                )}
+              </Field>
+              <Field name="disk_schema.schema_name">
+                {(field, props) => (
+                  <>
+                    <FieldLayout
+                      label={<InputLabel>Disk schema</InputLabel>}
+                      field={<span>{field.value || "None"}</span>}
+                    />
+                  </>
+                )}
+              </Field>
+
+              <div class="  col-span-full" tabindex="0">
+                <input type="checkbox" />
+                <div class="  px-0 text-xl ">Connection Settings</div>
+                <div class="">
+                  <Field name="machine.deploy.targetHost">
+                    {(field, props) => (
+                      <TextInput
+                        inputProps={props}
+                        label="Target Host"
+                        value={field.value ?? ""}
+                        error={field.error}
+                        class="col-span-2"
+                        required
+                      />
+                    )}
+                  </Field>
+                </div>
+              </div>
+            </Fieldset>
+
+            <footer class="flex justify-end gap-y-3 border-t border-secondary-200 pt-5">
               <Button
                 type="submit"
                 disabled={formStore.submitting || !formStore.dirty}
               >
-                Save
+                Update Edits
               </Button>
-            </div>
-          }
-        </Form>
-      </div>
-
-      <div class="">
-        <div class=""></div>
-
-        <span class="text-xl text-primary-800">Actions</span>
-        <div class="my-4 flex flex-col gap-6">
-          <span class="max-w-md">
-            Installs the system for the first time. Used to bootstrap the remote
-            device.
-          </span>
-          <div class=" w-fit" data-tip="Machine must be online">
-            <Button
-              class="w-full"
-              // disabled={!online()}
-              onClick={() => {
-                setInstallModalOpen(true);
-              }}
-              endIcon={<Icon icon="Flash" />}
-            >
-              Install
-            </Button>
-          </div>
-
-          <Modal
-            title={`Install machine`}
-            open={installModalOpen()}
-            handleClose={() => setInstallModalOpen(false)}
-            class="min-w-[600px]"
-          >
-            <InstallMachine
-              name={machineName()}
-              targetHost={getValue(formStore, "machine.deploy.targetHost")}
-              machine={props.initialData}
-            />
-          </Modal>
-
-          <span class="max-w-md">
-            Update the system if changes should be synced after the installation
-            process.
-          </span>
-          <div class=" w-fit" data-tip="Machine must be online">
-            <Button
-              class="w-full"
-              // disabled={!online()}
-              onClick={() => handleUpdateButton()}
-              endIcon={<Icon icon="Update" />}
-            >
-              Update
-            </Button>
-          </div>
+            </footer>
+          </Form>
         </div>
       </div>
+
+      <Modal
+        title={`Install machine`}
+        open={installModalOpen()}
+        handleClose={() => setInstallModalOpen(false)}
+        class="min-w-[600px]"
+      >
+        <InstallMachine
+          name={machineName()}
+          targetHost={getValue(formStore, "machine.deploy.targetHost")}
+          machine={props.initialData}
+        />
+      </Modal>
     </>
   );
 };