Webview: init machine details

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

@@ -0,0 +1,83 @@
+import { For, Show, createSignal } from "solid-js";
+import { ErrorData, SuccessData, pyApi } from "../api";
+import { currClanURI } from "../App";
+
+interface MachineListItemProps {
+  name: string;
+}
+
+type MachineDetails = Record<string, SuccessData<"show_machine">["data"]>;
+
+type MachineErrors = Record<string, ErrorData<"show_machine">["errors"]>;
+
+const [details, setDetails] = createSignal<MachineDetails>({});
+const [errors, setErrors] = createSignal<MachineErrors>({});
+
+pyApi.show_machine.receive((r) => {
+  if (r.status === "error") {
+    const { op_key } = r;
+    if (op_key) {
+      setErrors((e) => ({ ...e, [op_key]: r.errors }));
+    }
+    console.error(r.errors);
+  }
+  if (r.status === "success") {
+    setDetails((d) => ({ ...d, [r.data.machine_name]: r.data }));
+  }
+});
+
+export const MachineListItem = (props: MachineListItemProps) => {
+  const { name } = props;
+
+  pyApi.show_machine.dispatch({
+    op_key: name,
+    machine_name: name,
+    debug: false,
+    flake_url: currClanURI(),
+  });
+
+  return (
+    <li>
+      <div class="card card-side m-2 bg-base-100 shadow-lg">
+        <figure class="pl-2">
+          <span class="material-icons content-center text-5xl">
+            devices_other
+          </span>
+        </figure>
+        <div class="card-body flex-row justify-between">
+          <div class="flex flex-col">
+            <h2 class="card-title">{name}</h2>
+            <Show when={errors()[name]}>
+              {(errors) => (
+                <For each={errors()}>
+                  {(error) => (
+                    <p class="text-red-500">
+                      {error.message}: {error.description}
+                    </p>
+                  )}
+                </For>
+              )}
+            </Show>
+            <Show when={details()[name]}>
+              {(details) => (
+                <p
+                  classList={{
+                    "text-gray-400": !details().machine_description,
+                    "text-gray-600": !!details().machine_description,
+                  }}
+                >
+                  {details().machine_description || "No description"}
+                </p>
+              )}
+            </Show>
+          </div>
+          <div>
+            <button class="btn btn-ghost">
+              <span class="material-icons">more_vert</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </li>
+  );
+};

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

@@ -10,6 +10,7 @@ import { useMachineContext } from "../../Config";
 import { route } from "@/src/App";
 import { OperationResponse, pyApi } from "@/src/api";
 import toast from "solid-toast";
+import { MachineListItem } from "@/src/components/MachineListItem";
 
 type FilesModel = Extract<
   OperationResponse<"get_directory">,
@@ -99,37 +100,7 @@ export const MachineListView: Component = () => {
         <Match when={!loading()}>
           <ul>
             <For each={data()}>
-              {(entry) => (
+              {(entry) => <MachineListItem name={entry} />}
-                <li>
-                  <div class="card card-side m-2 bg-base-100 shadow-lg">
-                    <figure class="pl-2">
-                      <span class="material-icons content-center text-5xl">
-                        devices_other
-                      </span>
-                    </figure>
-                    <div class="card-body flex-row justify-between">
-                      <div class="flex flex-col">
-                        <h2 class="card-title">{entry}</h2>
-                        {/*
-                        <p
-                          classList={{
-                            "text-gray-400": !entry.machine_description,
-                            "text-gray-600": !!entry.machine_description,
-                          }}
-                        >
-                          {entry.machine_description || "No description"}
-                        </p>
-                        */}
-                      </div>
-                      <div>
-                        <button class="btn btn-ghost">
-                          <span class="material-icons">more_vert</span>
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </li>
-              )}
             </For>
           </ul>
         </Match>