UI: add deploy button, for initial machine deployment

pkgs/webview-ui/app/src/components/MachineListItem.tsx

@@ -1,7 +1,8 @@
-import { Accessor, createEffect, Show } from "solid-js";
+import { Accessor, createSignal, Show } from "solid-js";
-import { SuccessData } from "../api";
+import { callApi, SuccessData } from "../api";
 import { Menu } from "./Menu";
-import { setRoute } from "../App";
+import { activeURI, setRoute } from "../App";
+import toast from "solid-toast";
 
 type MachineDetails = SuccessData<"list_inventory_machines">["data"][string];
 
@@ -14,6 +15,8 @@ interface MachineListItemProps {
 export const MachineListItem = (props: MachineListItemProps) => {
   const { name, info, nixOnly } = props;
 
+  const [deploying, setDeploying] = createSignal<boolean>(false);
+
   return (
     <li>
       <div class="card card-side m-2 bg-base-200">
@@ -40,6 +43,16 @@ export const MachineListItem = (props: MachineListItemProps) => {
             <div class="text-slate-600">
               <Show when={info}>{(d) => d()?.description}</Show>
             </div>
+            <div class="text-slate-600">
+              <Show when={info}>
+                {(d) => (
+                  <>
+                    <span class="material-icons text-sm">cast_connected</span>
+                    {d()?.deploy.targetHost}
+                  </>
+                )}
+              </Show>
+            </div>
             <div class="flex flex-row flex-wrap gap-4 py-2"></div>
           </div>
           <div>
@@ -57,8 +70,55 @@ export const MachineListItem = (props: MachineListItemProps) => {
                     Edit
                   </a>
                 </li>
-                <li>
+                <li
-                  <a>Deploy</a>
+                  classList={{
+                    disabled: !info?.deploy.targetHost || deploying(),
+                  }}
+                  onClick={async (e) => {
+                    if (!info?.deploy.targetHost || deploying()) {
+                      return;
+                    }
+
+                    const active_clan = activeURI();
+                    if (!active_clan) {
+                      toast.error("No active clan selected");
+                      return;
+                    }
+                    if (!info?.deploy.targetHost) {
+                      toast.error(
+                        "Machine does not have a target host. Specify where the machine should be deployed.",
+                      );
+                      return;
+                    }
+                    setDeploying(true);
+                    await toast.promise(
+                      callApi("install_machine", {
+                        opts: {
+                          machine: name,
+                          flake: {
+                            loc: active_clan,
+                          },
+                          no_reboot: true,
+                          target_host: info?.deploy.targetHost,
+                          debug: true,
+                          nix_options: [],
+                        },
+                        password: null,
+                      }),
+                      {
+                        loading: "Deploying...",
+                        success: "Deployed",
+                        error: "Failed to deploy",
+                      },
+                    );
+                    setDeploying(false);
+                  }}
+                >
+                  <a>
+                    <Show when={info?.deploy.targetHost} fallback={"Deploy"}>
+                      {(d) => `Deploy to ${d()}`}
+                    </Show>
+                  </a>
                 </li>
               </ul>
             </Menu>

pkgs/webview-ui/app/src/routes/flash/view.tsx

@@ -308,10 +308,10 @@ export const Flash = () => {
 
         {/* WiFi Networks */}
         <div class="mb-4">
-          <h3 class="text-lg font-semibold mb-2">WiFi Networks</h3>
+          <h3 class="mb-2 text-lg font-semibold">WiFi Networks</h3>
           <For each={wifiNetworks()}>
             {(network, index) => (
-              <div class="flex gap-2 mb-2">
+              <div class="mb-2 flex gap-2">
                 <Field
                   name={`wifi.${index()}.ssid`}
                   validate={[required("SSID is required")]}
@@ -346,7 +346,7 @@ export const Flash = () => {
                       />
                       <button
                         type="button"
-                        class="absolute inset-y-14 right-0 pr-3 flex items-center text-sm leading-5"
+                        class="absolute inset-y-14 right-0 flex items-center pr-3 text-sm leading-5"
                         onClick={() => togglePasswordVisibility(index())}
                       >
                         <span class="material-icons">