From 3b48dfd2e0617b975b245fc9efb6a3d767771e5e Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Mon, 26 Aug 2024 16:30:44 +0200
Subject: [PATCH] UI: add create machine suggestion

---
 .../app/src/routes/machines/create.tsx        | 113 +++++++++---------
 .../app/src/routes/machines/view.tsx          |  12 +-
 2 files changed, 70 insertions(+), 55 deletions(-)

diff --git a/pkgs/webview-ui/app/src/routes/machines/create.tsx b/pkgs/webview-ui/app/src/routes/machines/create.tsx
index 3af89edd4..0c8e7e12c 100644
--- a/pkgs/webview-ui/app/src/routes/machines/create.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/create.tsx
@@ -59,68 +59,73 @@ export function CreateMachine() {
     }
   };
   return (
-    <div class="px-1">
-      <span class="px-2">Create new Machine</span>
-      <Form onSubmit={handleSubmit}>
-        <Field
-          name="machine.name"
-          validate={[required("This field is required")]}
-        >
-          {(field, props) => (
-            <TextInput
-              inputProps={props}
-              formStore={formStore}
-              value={`${field.value}`}
-              label={"name"}
-              error={field.error}
-              required
-            />
-          )}
-        </Field>
-        <Field name="machine.description">
-          {(field, props) => (
-            <TextInput
-              inputProps={props}
-              formStore={formStore}
-              value={`${field.value}`}
-              label={"description"}
-              error={field.error}
-            />
-          )}
-        </Field>
-        <Field name="machine.deploy.targetHost">
-          {(field, props) => (
-            <>
+    <div class="flex w-full justify-center">
+      <div class="mt-4 w-full max-w-3xl self-stretch px-2">
+        <span class="px-2">Create new Machine</span>
+        <Form onSubmit={handleSubmit}>
+          <Field
+            name="machine.name"
+            validate={[required("This field is required")]}
+          >
+            {(field, props) => (
               <TextInput
                 inputProps={props}
                 formStore={formStore}
                 value={`${field.value}`}
-                label={"Deployment target"}
+                label={"name"}
+                error={field.error}
+                required
+              />
+            )}
+          </Field>
+          <Field name="machine.description">
+            {(field, props) => (
+              <TextInput
+                inputProps={props}
+                formStore={formStore}
+                value={`${field.value}`}
+                label={"description"}
                 error={field.error}
               />
-            </>
-          )}
-        </Field>
-        <button
-          class="btn btn-error float-right"
-          type="submit"
-          classList={{
-            "btn-disabled": formStore.submitting,
-          }}
-        >
-          <Switch
-            fallback={
+            )}
+          </Field>
+          <Field name="machine.deploy.targetHost">
+            {(field, props) => (
               <>
-                <span class="loading loading-spinner loading-sm"></span>Creating
+                <TextInput
+                  inputProps={props}
+                  formStore={formStore}
+                  value={`${field.value}`}
+                  label={"Deployment target"}
+                  error={field.error}
+                />
               </>
-            }
-          >
-            <Match when={!formStore.submitting}>
-              <span class="material-icons">add</span>Create
-            </Match>
-          </Switch>
-        </button>
-      </Form>
+            )}
+          </Field>
+          <div class="mt-12 flex justify-end">
+            <button
+              class="btn btn-primary"
+              type="submit"
+              classList={{
+                "btn-disabled": formStore.submitting,
+              }}
+            >
+              <Switch
+                fallback={
+                  <>
+                    <span class="loading loading-spinner loading-sm"></span>
+                    Creating
+                  </>
+                }
+              >
+                <Match when={!formStore.submitting}>
+                  <span class="material-icons">add</span>Create
+                </Match>
+              </Switch>
+            </button>
+          </div>
+        </Form>
+      </div>
     </div>
   );
 }
diff --git a/pkgs/webview-ui/app/src/routes/machines/view.tsx b/pkgs/webview-ui/app/src/routes/machines/view.tsx
index 6f051e90f..e7c849f41 100644
--- a/pkgs/webview-ui/app/src/routes/machines/view.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/view.tsx
@@ -113,7 +113,17 @@ export const MachineListView: Component = () => {
             nixOnlyMachines()?.length === 0
           }
         >
-          No machines found
+          <div class="mt-8 flex w-full flex-col items-center justify-center gap-2">
+            <span class="text-lg text-neutral">
+              No machines defined yet. Click below to define one.
+            </span>
+            <button
+              class="btn btn-square btn-ghost size-28 overflow-hidden p-2"
+              onClick={() => navigate("/machines/create")}
+            >
+              <span class="material-icons text-6xl font-light">add</span>
+            </button>
+          </div>
         </Match>
         <Match when={!inventoryQuery.isLoading}>
           <ul>