Webview: improve linting & typechecks

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

@@ -1,34 +1,60 @@
 import { Match, Switch, createSignal, type Component } from "solid-js";
 import { CountProvider } from "./Config";
+// import { Nested } from "./nested";
+import { Layout } from "./layout/layout";
+import cx from "classnames";
 import { Nested } from "./nested";
 
-type Route = "home" | "graph";
+type Route = "home" | "machines";
 
 const App: Component = () => {
   const [route, setRoute] = createSignal<Route>("home");
   return (
     <CountProvider>
-      <div class="w-full flex items-center flex-col gap-2 my-2">
-        <div>Clan</div>
-        <p>Current route: {route()}</p>
-
-        <div class="flex items-center">
-          <button
-            onClick={() => setRoute((o) => (o === "graph" ? "home" : "graph"))}
-            class="btn btn-link"
-          >
-            Navigate to {route() === "home" ? "graph" : "home"}
-          </button>
+      <Layout>
+        <div class="col-span-1">
+          <div class={cx("text-zinc-500")}>Navigation</div>
+          <ul>
+            <li>
+              <button
+                onClick={() => setRoute("home")}
+                classList={{ "bg-blue-500": route() === "home" }}
+              >
+                Home
+              </button>
+            </li>
+            <li>
+              {" "}
+              <button
+                onClick={() => setRoute("machines")}
+                classList={{ "bg-blue-500": route() === "machines" }}
+              >
+                Machines
+              </button>
+            </li>
+          </ul>
         </div>
-        <Switch fallback={<p>{route()} not found</p>}>
-          <Match when={route() == "home"}>
-            <Nested />
-          </Match>
-          <Match when={route() == "graph"}>
-            <p></p>
-          </Match>
-        </Switch>
-      </div>
+
+        <div class="col-span-7">
+          <div>{route()}</div>
+          <Switch fallback={<p>{route()} not found</p>}>
+            <Match when={route() == "home"}>
+              <Nested />
+            </Match>
+            <Match when={route() == "machines"}>
+              <div class="grid grid-cols-3 gap-2">
+                <div class="h-10 w-20 bg-red-500">red</div>
+                <div class="h-10 w-20 bg-green-500">green</div>
+                <div class="h-10 w-20 bg-blue-500">blue</div>
+                <div class="h-10 w-20 bg-yellow-500">yellow</div>
+                <div class="h-10 w-20 bg-purple-500">purple</div>
+                <div class="h-10 w-20 bg-cyan-500">cyan</div>
+                <div class="h-10 w-20 bg-pink-500">pink</div>
+              </div>
+            </Match>
+          </Switch>
+        </div>
+      </Layout>
     </CountProvider>
   );
 };

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

@@ -39,9 +39,12 @@ type CountContextType = ReturnType<typeof makeCountContext>;
 export const CountContext = createContext<CountContextType>([
   {
     loading: () => false,
+
+    // eslint-disable-next-line
     machines: () => ({}),
   },
   {
+    // eslint-disable-next-line
     getMachines: () => {},
   },
 ]);

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

@@ -6,7 +6,6 @@ import App from "./App";
 
 const root = document.getElementById("app");
 
-// @ts-ignore: add the clan scope to the window object so we can register callbacks for gtk
 window.clan = window.clan || {};
 
 if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
@@ -15,4 +14,5 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
   );
 }
 
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 render(() => <App />, root!);

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

@@ -0,0 +1,9 @@
+import { Component, JSXElement } from "solid-js";
+
+interface LayoutProps {
+  children: JSXElement;
+}
+
+export const Layout: Component<LayoutProps> = (props) => {
+  return <div class="grid grid-cols-8">{props.children}</div>;
+};

pkgs/webview-ui/app/src/message.ts

@@ -74,7 +74,7 @@ const deserialize =
 const pyApi: PyApi = {} as PyApi;
 operationNames.forEach((opName) => {
   const name = opName as OperationNames;
-  // @ts-ignore: TODO make typescript happy
+  // @ts-expect-error - TODO: Fix this. Typescript is not recognizing the receive function correctly
   pyApi[name] = createFunctions(name);
 });