Webview: add solid-toast feeback system

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

@@ -10,7 +10,8 @@
       "license": "MIT",
       "dependencies": {
         "material-icons": "^1.13.12",
-        "solid-js": "^1.8.11"
+        "solid-js": "^1.8.11",
+        "solid-toast": "^0.5.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.3.0",
@@ -5182,6 +5183,14 @@
         "solid-js": "^1.3"
       }
     },
+    "node_modules/solid-toast": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/solid-toast/-/solid-toast-0.5.0.tgz",
+      "integrity": "sha512-t770JakjyS2P9b8Qa1zMLOD51KYKWXbTAyJePVUoYex5c5FH5S/HtUBUbZAWFcqRCKmAE8KhyIiCvDZA8bOnxQ==",
+      "peerDependencies": {
+        "solid-js": "^1.5.4"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",

pkgs/webview-ui/app/package.json

@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "material-icons": "^1.13.12",
-    "solid-js": "^1.8.11"
+    "solid-js": "^1.8.11",
+    "solid-toast": "^0.5.0"
   }
 }

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

@@ -2,6 +2,7 @@ import { createSignal, type Component } from "solid-js";
 import { MachineProvider } from "./Config";
 import { Layout } from "./layout/layout";
 import { Route, Router } from "./Routes";
+import { Toaster } from "solid-toast";
 
 // Global state
 const [route, setRoute] = createSignal<Route>("machines");
@@ -9,13 +10,14 @@ const [route, setRoute] = createSignal<Route>("machines");
 export { route, setRoute };
 
 const App: Component = () => {
-  return (
+  return [
+    <Toaster position="top-right" />,
     <MachineProvider>
       <Layout>
         <Router route={route} />
       </Layout>
-    </MachineProvider>
-  );
+    </MachineProvider>,
+  ];
 };
 
 export default App;

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

@@ -9,6 +9,7 @@ import {
 import { useMachineContext } from "../../Config";
 import { route } from "@/src/App";
 import { OperationResponse, pyApi } from "@/src/api";
+import toast from "solid-toast";
 
 type FilesModel = Extract<
   OperationResponse<"get_directory">,
@@ -39,6 +40,17 @@ export const MachineListView: Component = () => {
     if (response?.status === "success") {
       console.log(response.data);
       setData(response.data);
+      toast.success("Machines loaded");
+    }
+    if (response?.status === "error") {
+      setData([]);
+      console.error(response.errors);
+      toast.error("Error loading machines");
+      response.errors.forEach((error) =>
+        toast.error(
+          `${error.message}: ${error.description} From ${error.location}`
+        )
+      );
     }
   });
 

pkgs/webview-ui/flake-module.nix

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