new devtools ui

Author: prc5

packages/devtools/electron.d.ts

@@ -0,0 +1,14 @@
+import { ElectronAPI } from "@electron-toolkit/preload";
+
+declare global {
+  interface Window {
+    electron: ElectronAPI & {
+      store: {
+        get: (key: string) => T;
+        set: (key: string, val: T) => void;
+        delete: (key: string) => void;
+      };
+    };
+    api: unknown;
+  }
+}

packages/devtools/package.json

@@ -51,10 +51,10 @@
   },
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.1",
-    "@hyper-fetch/core": "file:./../core/",
-    "@hyper-fetch/devtools-plugin": "file:./../devtools-plugin/",
-    "@hyper-fetch/react": "file:./../react/",
-    "@hyper-fetch/sockets": "file:./../sockets/",
+    "@hyper-fetch/core": "*",
+    "@hyper-fetch/devtools-plugin": "*",
+    "@hyper-fetch/react": "*",
+    "@hyper-fetch/sockets": "*",
     "@radix-ui/react-avatar": "^1.1.3",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.1.3",
@@ -90,11 +90,13 @@
     "react-dom": "^19.0.0",
     "react-json-tree": "^0.19.0",
     "react-textarea-autosize": "^8.5.7",
+    "recharts": "^2.15.1",
     "sonner": "^1.4.41",
     "tailwind-merge": "^3.0.2",
     "tailwindcss-animate": "^1.0.7",
     "use-immer": "^0.11.0",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "zustand": "^5.0.3"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

packages/devtools/src/app/main.ts

@@ -1,6 +1,7 @@
-import { app, BrowserWindow } from "electron";
+import { app, BrowserWindow, clipboard, Data, ipcMain, nativeImage } from "electron";
 import path from "node:path";
 import started from "electron-squirrel-startup";
+import Store from "electron-store";
 
 import { startServer } from "../server";
 
@@ -9,6 +10,7 @@ if (started) {
   app.quit();
 }
 
+const store = new Store();
 const createWindow = () => {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
@@ -17,6 +19,7 @@ const createWindow = () => {
     width: 1200,
     height: 800,
     webPreferences: {
+      sandbox: false,
       preload: path.join(__dirname, "preload.js"),
     },
   });
@@ -29,14 +32,42 @@ const createWindow = () => {
   }
 
   // Open the DevTools.
-  mainWindow.webContents.openDevTools();
+  if (process.env.NODE_ENV !== "production") {
+    mainWindow.webContents.openDevTools();
+  }
 };
 
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.on("ready", createWindow);
 
+app.whenReady().then(() => {
+  ipcMain.on("electron-store-get", async (event, val) => {
+    // eslint-disable-next-line no-param-reassign
+    event.returnValue = store.get(val);
+  });
+  ipcMain.on("electron-store-set", async (_, key, val) => {
+    store.set(key, val);
+  });
+
+  ipcMain.on("electron-store-delete", async (_, key) => {
+    try {
+      store.delete(key);
+    } catch (error) {
+      console.error("🚀 ~ ipcMain.on ~ error:", error);
+    }
+  });
+
+  ipcMain.on("clipboard", async (_, val: Data & { img?: string }) => {
+    if (val.img) {
+      clipboard.writeImage(nativeImage.createFromBuffer(Buffer.from(val.img, "base64")));
+    } else {
+      clipboard.write(val);
+    }
+  });
+});
+
 // Quit when all windows are closed, except on macOS. There, it's common
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.

packages/devtools/src/frontend/app.tsx

@@ -1,47 +1,41 @@
-import { DevtoolsWorkspaces } from "frontend/context/devtools.context";
+import { DevtoolsOnlineProjects } from "frontend/context/devtools.context";
 import { Layout } from "./components/layout/layout";
-import { useConnectWorkspaces } from "./hooks/use-connect-workspaces";
+import { useOnlineProjects } from "./hooks/use-connect-workspaces";
 import { Route } from "./routing/router";
 
 export function App() {
-  const { workspaces, setWorkspaces, activeWorkspace, setActiveWorkspace } = useConnectWorkspaces();
+  const { projects, setProjects } = useOnlineProjects();
 
-  const setRequestList = (workspaceName: string, requestList: any) => {
-    setWorkspaces((draft) => {
-      const selectedWorkspace = draft[workspaceName];
-      if (selectedWorkspace) {
-        selectedWorkspace.requests = requestList;
+  const setRequestList = (projectId: string, requestList: any) => {
+    setProjects((draft) => {
+      const selectedProject = draft[projectId];
+      if (selectedProject) {
+        selectedProject.requests = requestList;
       }
     });
   };
 
   return (
     <Layout>
-      <DevtoolsWorkspaces
-        workspaces={workspaces}
-        activeWorkspace={activeWorkspace}
-        setActiveWorkspace={setActiveWorkspace}
-        setRequestList={setRequestList}
-      >
+      <DevtoolsOnlineProjects projects={projects} setRequestList={setRequestList}>
         <Route to="dashboard" />
-        <Route to="project" />
         <Route to="dashboard.projects" />
-        <Route to="dashboard.resources" />
+        <Route to="dashboard.onlineProjects" />
         <Route to="dashboard.members" />
         <Route to="dashboard.settings" />
         <Route to="dashboard.activities" />
         <Route to="dashboard.favorites" />
         <Route to="dashboard.recentlyVisited" />
-        <Route to="project.workspace" />
-        <Route to="project.network" />
-        <Route to="project.cache" />
-        <Route to="project.queues" />
-        <Route to="project.settings" />
+        <Route to="workspace" />
+        <Route to="workspace.network" />
+        <Route to="workspace.cache" />
+        <Route to="workspace.queues" />
+        <Route to="workspace.settings" />
         {/* {activeWorkspace && workspaces[activeWorkspace] && (
           <Devtools workspace={activeWorkspace} client={workspaces[activeWorkspace].client} />
         )} */}
         {/* TODO NO CONTENT */}
-      </DevtoolsWorkspaces>
+      </DevtoolsOnlineProjects>
     </Layout>
   );
 }

packages/devtools/src/frontend/components/app/header/header.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import { XIcon } from "lucide-react";
 
-import { useDevtoolsContext, useWorkspaces } from "frontend/pages/project/_context/devtools.context";
-import { DevtoolsModule } from "frontend/pages/project/_context/devtools.types";
+import { useDevtoolsContext, useOnlineProjects } from "frontend/pages/workspace/_context/devtools.context";
+import { DevtoolsModule } from "frontend/pages/workspace/_context/devtools.types";
 import { tokens } from "frontend/theme/tokens";
 import { createStyles } from "frontend/theme/use-styles.hook";
 import { LogoIcon } from "frontend/icons/logo";
@@ -90,7 +90,7 @@ export const Header = (props: React.HTMLProps<HTMLDivElement>) => {
   const css = styles.useStyles();
 
   const { setOpen, setModule } = useDevtoolsContext("DevtoolsHeader");
-  const { activeWorkspace, workspaces } = useWorkspaces("DevtoolsWorkspace");
+  const { activeWorkspace, workspaces } = useOnlineProjects("DevtoolsWorkspace");
 
   const workspace = activeWorkspace ? workspaces[activeWorkspace] : null;
   const name = workspace?.name || "Devtools";

packages/devtools/src/frontend/components/app/menu/menu.constants.ts

@@ -7,7 +7,7 @@ import {
   // SquareChartGanttIcon,
 } from "lucide-react";
 
-import { DevtoolsModule } from "frontend/pages/project/_context/devtools.types";
+import { DevtoolsModule } from "frontend/pages/workspace/_context/devtools.types";
 
 export const menuIcons: Partial<
   Record<DevtoolsModule, React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>>

packages/devtools/src/frontend/components/app/menu/menu.tsx

@@ -1,6 +1,6 @@
 import { createStyles } from "frontend/theme/use-styles.hook";
-import { useDevtoolsContext } from "frontend/pages/project/_context/devtools.context";
-import { DevtoolsModule } from "frontend/pages/project/_context/devtools.types";
+import { useDevtoolsContext } from "frontend/pages/workspace/_context/devtools.context";
+import { DevtoolsModule } from "frontend/pages/workspace/_context/devtools.types";
 import { menuIcons } from "./menu.constants";
 import { tokens } from "frontend/theme/tokens";
 import { useAppContext } from "../app.context";

packages/devtools/src/frontend/components/app/resizable/resizable.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { Resizable as ResizableComponent } from "re-resizable";
 
-import { useDevtoolsContext } from "frontend/pages/project/_context/devtools.context";
+import { useDevtoolsContext } from "frontend/pages/workspace/_context/devtools.context";
 import { createStyles } from "frontend/theme/use-styles.hook";
 import { minSizes, sizes } from "./resizable.constants";
 

packages/devtools/src/frontend/components/json-viewer/json-viewer.tsx

@@ -2,7 +2,6 @@
 import { CommonExternalProps, JSONTree } from "react-json-tree";
 import { produce } from "immer";
 
-import { useDevtoolsContext } from "frontend/pages/project/_context/devtools.context";
 import { Value } from "./value/value";
 import { Label } from "./label/label";
 import { getRaw, getTheme, updateValue } from "./json-viewer.utils";
@@ -21,7 +20,8 @@ export const JSONViewer = ({
   onChange?: (value: any) => void;
 } & Partial<Omit<CommonExternalProps, "data" | "theme" | "valueRenderer">>) => {
   const css = styles.useStyles();
-  const { theme } = useDevtoolsContext("JSONViewer");
+  // const { theme } = useDevtoolsContext("JSONViewer");
+  const theme = "light";
 
   const handleOnChange = (path: (number | string)[]) => (value: any) => {
     if (onChange) {

packages/devtools/src/frontend/components/toolbar/toolbar.tsx

@@ -4,7 +4,7 @@ import * as Select from "frontend/components/select/select";
 import * as DropdownMenu from "frontend/components/dropdown/dropdown";
 import { IconButton } from "frontend/components/icon-button/icon-button";
 import { Bar } from "frontend/components/bar/bar";
-import { useDevtoolsContext, useWorkspaces } from "frontend/pages/project/_context/devtools.context";
+import { useDevtoolsContext, useOnlineProjects } from "frontend/pages/workspace/_context/devtools.context";
 import { tokens } from "frontend/theme/tokens";
 
 export enum Positions {
@@ -23,7 +23,7 @@ const positionsIcons = {
 export const Toolbar = ({ children }: { children: React.ReactNode }) => {
   const { isOnline, setIsOnline, position, setPosition, theme, setTheme, isStandalone } =
     useDevtoolsContext("DevtoolsOptions");
-  const { workspaces, activeWorkspace, setActiveWorkspace } = useWorkspaces("DevtoolsOptions");
+  const { workspaces, activeWorkspace, setActiveWorkspace } = useOnlineProjects("DevtoolsOptions");
 
   return (
     <Bar>