machine-details: updates form layout

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,11 +520,66 @@ const MachineForm = (props: MachineDetailsProps) => {
 
   return (
     <>
-      <div class="flex flex-col gap-6 p-4">
+      <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="flex flex-col gap-6">
+          <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
@@ -536,26 +592,6 @@ const MachineForm = (props: MachineDetailsProps) => {
                   />
                 )}
               </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
@@ -564,10 +600,34 @@ const MachineForm = (props: MachineDetailsProps) => {
                     value={field.value ?? ""}
                     error={field.error}
                     class="col-span-2"
-                required
                   />
                 )}
               </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>
+
+            <Fieldset legend="Hardware">
               <Field name="hw_config">
                 {(field, props) => (
                   <FieldLayout
@@ -605,40 +665,18 @@ const MachineForm = (props: MachineDetailsProps) => {
                   </Field>
                 </div>
               </div>
+            </Fieldset>
 
-          {
+            <footer class="flex justify-end gap-y-3 border-t border-secondary-200 pt-5">
-            <div class=" col-span-full justify-end">
               <Button
                 type="submit"
                 disabled={formStore.submitting || !formStore.dirty}
               >
-                Save
+                Update Edits
               </Button>
-            </div>
+            </footer>
-          }
           </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
@@ -653,23 +691,6 @@ const MachineForm = (props: MachineDetailsProps) => {
           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>
-        </div>
-      </div>
     </>
   );
 };