Webview: add solid-query for improved resource fetching & caching

pkgs/webview-ui/app/package-lock.json

@@ -11,7 +11,7 @@
       "dependencies": {
         "@modular-forms/solid": "^0.21.0",
         "@solid-primitives/storage": "^3.7.1",
-        "@tanstack/solid-query": "^5.44.0",
+        "@tanstack/solid-query": "^5.51.2",
         "material-icons": "^1.13.12",
         "nanoid": "^5.0.7",
         "solid-js": "^1.8.11",
@@ -1570,21 +1570,20 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.44.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.44.0.tgz",
-      "integrity": "sha512-Fa1J7iEEyJnjXG1N4+Fz4OXNH/INve3XSn0Htms3X4wgRsXHxMDwqBE2XtDCts7swkwSIs4izEtaFqWVFr/eLQ==",
+      "version": "5.51.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.51.1.tgz",
+      "integrity": "sha512-fJBMQMpo8/KSsWW5ratJR5+IFr7YNJ3K2kfP9l5XObYHsgfVy1w3FJUWU4FT2fj7+JMaEg33zOcNDBo0LMwHnw==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@tanstack/solid-query": {
-      "version": "5.44.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/solid-query/-/solid-query-5.44.0.tgz",
-      "integrity": "sha512-fxsSFGbaHknL1zuymEZqrSRFk0wI3/RVDInlQJS3jZevnKJBAlDohIis6MZdm3EOFRTq+sfaMTNXZTu2B5MpOw==",
+      "version": "5.51.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/solid-query/-/solid-query-5.51.2.tgz",
+      "integrity": "sha512-mFW9u6MeH72OYRg2dr4lEBrWiqnhG3aTq7PkKBfZ7BDAvOfox/tqOt3TYOKQZja3Y8XZqz5pMumsKKofYHMIQA==",
       "dependencies": {
-        "@tanstack/query-core": "5.44.0",
-        "solid-js": "^1.8.17"
+        "@tanstack/query-core": "5.51.1"
       },
       "funding": {
         "type": "github",

pkgs/webview-ui/app/package.json

@@ -40,7 +40,7 @@
   "dependencies": {
     "@modular-forms/solid": "^0.21.0",
     "@solid-primitives/storage": "^3.7.1",
-    "@tanstack/solid-query": "^5.44.0",
+    "@tanstack/solid-query": "^5.51.2",
     "material-icons": "^1.13.12",
     "nanoid": "^5.0.7",
     "solid-js": "^1.8.11",

pkgs/webview-ui/app/src/index.tsx

@@ -3,7 +3,10 @@ import { render } from "solid-js/web";
 
 import "./index.css";
 import App from "./App";
-import { getFakeResponse } from "../mock";
+import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
+
+const client = new QueryClient();
+
 const root = document.getElementById("app");
 
 window.clan = window.clan || {};
@@ -18,24 +21,14 @@ if (import.meta.env.DEV) {
   console.log("Development mode");
   // Load the debugger in development mode
   await import("solid-devtools");
-
-  // Uncomment this block to use the Mock API
-  // window.webkit = window.webkit || {
-  //   messageHandlers: {
-  //     gtk: {
-  //       postMessage: (postMessage) => {
-  //         const { method, data } = postMessage;
-  //         console.debug("Python API call", { method, data });
-  //         setTimeout(() => {
-  //           const mock = getFakeResponse(method, data);
-  //           console.log("Returning mock-data: ", { mock });
-
-  //           window.clan[method](JSON.stringify(mock));
-  //         }, 200);
-  //       },
-  //     },
-  //   },
-  // };
 }
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-render(() => <App />, root!);
+
+render(
+  () => (
+    <QueryClientProvider client={client}>
+      <App />
+    </QueryClientProvider>
+  ),
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  root!
+);

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

@@ -1,60 +1,59 @@
-import { route } from "@/src/App";
-import { OperationResponse, pyApi } from "@/src/api";
-import { Component, For, Show, createEffect, createSignal } from "solid-js";
+import { callApi } from "@/src/api";
+import { Component, For, Show } from "solid-js";
 
-type DevicesModel = Extract<
-  OperationResponse<"show_block_devices">,
-  { status: "success" }
->["data"]["blockdevices"];
+import { createQuery } from "@tanstack/solid-query";
 
 export const BlockDevicesView: Component = () => {
-  const [devices, setDevices] = createSignal<DevicesModel>();
-
-  // pyApi.show_block_devices.receive((r) => {
-  //   const { status } = r;
-  //   if (status === "error") return console.error(r.errors);
-  //   setServices(r.data.blockdevices);
-  // });
-
-  // createEffect(() => {
-  //   if (route() === "blockdevices") pyApi.show_block_devices.dispatch({});
-  // });
+  const {
+    data: devices,
+    refetch: loadDevices,
+    isFetching,
+  } = createQuery(() => ({
+    queryKey: ["TanStack Query"],
+    queryFn: async () => {
+      const result = await callApi("show_block_devices", {});
+      if (result.status === "error") throw new Error("Failed to fetch data");
+      return result.data;
+    },
+  }));
 
   return (
     <div>
       <div class="tooltip tooltip-bottom" data-tip="Refresh">
-        <button
-          class="btn btn-ghost"
-          // onClick={() => pyApi.show_block_devices.dispatch({})}
-        >
+        <button class="btn btn-ghost" onClick={() => loadDevices()}>
           <span class="material-icons ">refresh</span>
         </button>
       </div>
       <div class="flex max-w-screen-lg flex-col gap-4">
-        <Show when={devices()}>
-          {(devices) => (
-            <For each={devices()}>
-              {(device) => (
-                <div class="stats shadow">
-                  <div class="stat w-28 py-8">
-                    <div class="stat-title">Name</div>
-                    <div class="stat-value">
-                      {" "}
-                      <span class="material-icons">storage</span> {device.name}
+        {isFetching ? (
+          <span class="loading loading-bars"></span>
+        ) : (
+          <Show when={devices}>
+            {(devices) => (
+              <For each={devices().blockdevices}>
+                {(device) => (
+                  <div class="stats shadow">
+                    <div class="stat w-28 py-8">
+                      <div class="stat-title">Name</div>
+                      <div class="stat-value">
+                        {" "}
+                        <span class="material-icons">storage</span>{" "}
+                        {device.name}
+                      </div>
+                      <div class="stat-desc"></div>
                     </div>
-                    <div class="stat-desc"></div>
-                  </div>
 
-                  <div class="stat w-28">
-                    <div class="stat-title">Size</div>
-                    <div class="stat-value">{device.size}</div>
-                    <div class="stat-desc"></div>
+                    <div class="stat w-28">
+                      <div class="stat-title">Size</div>
+                      <div class="stat-value">{device.size}</div>
+                      <div class="stat-desc"></div>
+                    </div>
                   </div>
-                </div>
-              )}
-            </For>
-          )}
-        </Show>
+                )}
+              </For>
+            )}
+          </Show>
+        )}
       </div>
     </div>
   );

pkgs/webview-ui/app/src/routes/welcome/index.tsx

@@ -24,6 +24,14 @@ export const Welcome = () => {
             >
               Or select folder
             </button>
+            <button
+              class="link w-full text-right text-secondary"
+              onClick={async () => {
+                setRoute("machines");
+              }}
+            >
+              Skip (Debug)
+            </button>
           </div>
         </div>
       </div>

pkgs/webview-ui/flake-module.nix

@@ -16,7 +16,7 @@
 
         npmDeps = pkgs.fetchNpmDeps {
           src = ./app;
-          hash = "sha256-U8FwGL0FelUZwa8NjitfsFNDSofUPbp+nHrypeDj2Po=";
+          hash = "sha256-/PFSBAIodZjInElYoNsDQUV4isxmcvL3YM1hzAmdDWA=";
         };
         # The prepack script runs the build script, which we'd rather do in the build phase.
         npmPackFlags = [ "--ignore-scripts" ];