([
+ { count: () => initialValue, loading: () => false, machines: () => [] },
+ {
+ setCount: () => {},
+ setLoading: () => {},
+ setMachines: () => {},
+ getMachines: () => {},
+ },
+]);
+
+export const useCountContext = () => useContext(CountContext);
+
+export function CountProvider(props: { children: JSXElement }) {
+ return (
+
+ {props.children}
+
+ );
+}
diff --git a/pkgs/clan-vm-manager/web/app/src/index.css b/pkgs/clan-vm-manager/web/app/src/index.css
new file mode 100644
index 00000000..b5c61c95
--- /dev/null
+++ b/pkgs/clan-vm-manager/web/app/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/pkgs/clan-vm-manager/web/app/src/index.tsx b/pkgs/clan-vm-manager/web/app/src/index.tsx
new file mode 100644
index 00000000..af26e9b4
--- /dev/null
+++ b/pkgs/clan-vm-manager/web/app/src/index.tsx
@@ -0,0 +1,18 @@
+/* @refresh reload */
+import { render } from "solid-js/web";
+
+import "./index.css";
+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)) {
+ throw new Error(
+ "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?"
+ );
+}
+
+render(() => , root!);
diff --git a/pkgs/clan-vm-manager/web/app/src/nested.tsx b/pkgs/clan-vm-manager/web/app/src/nested.tsx
new file mode 100644
index 00000000..7f1e9ecd
--- /dev/null
+++ b/pkgs/clan-vm-manager/web/app/src/nested.tsx
@@ -0,0 +1,29 @@
+import { For, Match, Switch, type Component } from "solid-js";
+import { useCountContext } from "./Config";
+
+export const Nested: Component = () => {
+ const [{ machines, loading }, { getMachines }] = useCountContext();
+ return (
+
+
+
+
+ Loading...
+
+ No machines found
+
+
+
+ {(machine, i) => (
+
+ {i() + 1}: {machine}
+
+ )}
+
+
+
+
+ );
+};
diff --git a/pkgs/clan-vm-manager/web/app/tailwind.config.js b/pkgs/clan-vm-manager/web/app/tailwind.config.js
new file mode 100644
index 00000000..3bcabba4
--- /dev/null
+++ b/pkgs/clan-vm-manager/web/app/tailwind.config.js
@@ -0,0 +1,9 @@
+const daisyui = require("daisyui");
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ["./src/**/*.{js,jsx,ts,tsx}"],
+ theme: {
+ extend: {},
+ },
+ plugins: [daisyui],
+};
diff --git a/pkgs/clan-vm-manager/web/app/tsconfig.json b/pkgs/clan-vm-manager/web/app/tsconfig.json
new file mode 100644
index 00000000..0aa89917
--- /dev/null
+++ b/pkgs/clan-vm-manager/web/app/tsconfig.json
@@ -0,0 +1,15 @@
+{
+ "compilerOptions": {
+ "strict": true,
+ "target": "ESNext",
+ "module": "ESNext",
+ "moduleResolution": "node",
+ "allowSyntheticDefaultImports": true,
+ "esModuleInterop": true,
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js",
+ "types": ["vite/client"],
+ "noEmit": true,
+ "isolatedModules": true,
+ },
+}
diff --git a/pkgs/clan-vm-manager/web/app/vite.config.ts b/pkgs/clan-vm-manager/web/app/vite.config.ts
new file mode 100644
index 00000000..5745d9fb
--- /dev/null
+++ b/pkgs/clan-vm-manager/web/app/vite.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from "vite";
+import solidPlugin from "vite-plugin-solid";
+// import devtools from "solid-devtools/vite";
+
+export default defineConfig({
+ plugins: [
+ /*
+ Uncomment the following line to enable solid-devtools.
+ For more info see https://github.com/thetarnav/solid-devtools/tree/main/packages/extension#readme
+ */
+ // devtools(),
+ solidPlugin(),
+ ],
+ server: {
+ port: 3000,
+ },
+ build: {
+ target: "safari11",
+ // assetsDi
+ manifest: true,
+ },
+});