UI: add create machine suggestion

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

@@ -59,7 +59,8 @@ export function CreateMachine() {
     }
   };
   return (
-    <div class="px-1">
+    <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
@@ -101,8 +102,9 @@ export function CreateMachine() {
               </>
             )}
           </Field>
+          <div class="mt-12 flex justify-end">
             <button
-          class="btn btn-error float-right"
+              class="btn btn-primary"
               type="submit"
               classList={{
                 "btn-disabled": formStore.submitting,
@@ -111,7 +113,8 @@ export function CreateMachine() {
               <Switch
                 fallback={
                   <>
-                <span class="loading loading-spinner loading-sm"></span>Creating
+                    <span class="loading loading-spinner loading-sm"></span>
+                    Creating
                   </>
                 }
               >
@@ -120,7 +123,9 @@ export function CreateMachine() {
                 </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>