UI: add create machine suggestion

pkgs/webview-ui/app/src/routes/machines/create.tsx

@@ -59,68 +59,73 @@ export function CreateMachine() {
     }
   };
   return (
-    <div class="px-1">
+    <div class="flex w-full justify-center">
-      <span class="px-2">Create new Machine</span>
+      <div class="mt-4 w-full max-w-3xl self-stretch px-2">
-      <Form onSubmit={handleSubmit}>
+        <span class="px-2">Create new Machine</span>
-        <Field
+        <Form onSubmit={handleSubmit}>
-          name="machine.name"
+          <Field
-          validate={[required("This field is required")]}
+            name="machine.name"
-        >
+            validate={[required("This field is required")]}
-          {(field, props) => (
+          >
-            <TextInput
+            {(field, props) => (
-              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) => (
-            <>
               <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>
-        </Field>
+          <Field name="machine.deploy.targetHost">
-        <button
+            {(field, props) => (
-          class="btn btn-error float-right"
-          type="submit"
-          classList={{
-            "btn-disabled": formStore.submitting,
-          }}
-        >
-          <Switch
-            fallback={
               <>
-                <span class="loading loading-spinner loading-sm"></span>Creating
+                <TextInput
+                  inputProps={props}
+                  formStore={formStore}
+                  value={`${field.value}`}
+                  label={"Deployment target"}
+                  error={field.error}
+                />
               </>
-            }
+            )}
-          >
+          </Field>
-            <Match when={!formStore.submitting}>
+          <div class="mt-12 flex justify-end">
-              <span class="material-icons">add</span>Create
+            <button
-            </Match>
+              class="btn btn-primary"
-          </Switch>
+              type="submit"
-        </button>
+              classList={{
-      </Form>
+                "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>
   );
 }

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>