initial draft done

Author: radubrehar

devtools-ui/components.json

@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "",
-    "css": "./src/global.css",
+    "css": "./src/index.css",
     "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""

devtools-ui/package-lock.json

@@ -4,19 +4,21 @@
   "scripts": {
     "build": "rm -fr dist && npm run tsup",
     "tsup": "tsup",
-    "watch": "npm run tsup -- --watch --watch ../source/dist"
+    "watch": "npm run tsup -- --watch ./src --watch ../source/dist"
   },
   "author": "Infinite Table",
   "license": "MIT",
   "description": "",
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.1.4",
-    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-collapsible": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.7",
     "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-select": "^2.1.6",
-    "@radix-ui/react-separator": "^1.1.2",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-tooltip": "^1.1.8",
+    "@radix-ui/react-separator": "^1.1.3",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-tabs": "^1.1.4",
+    "@radix-ui/react-tooltip": "^1.2.0",
     "@tailwindcss/postcss": "^4.0.15",
     "@types/chrome": "^0.0.260",
     "@vanilla-extract/esbuild-plugin": "^2.3.15",
@@ -27,6 +29,7 @@
     "lucide-react": "^0.483.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-resizable-panels": "^2.1.7",
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.0.15",
     "tw-animate-css": "^1.2.4"

devtools-ui/package.json

@@ -0,0 +1,181 @@
+import { useCallback, useState } from 'react';
+import { useDevToolsMessagingContext } from '../lib/DevToolsMessagingContext';
+import type {
+  DevToolsOverrides,
+  ErrorCodeKey,
+  InfiniteTablePropColumnVisibility,
+} from '@infinite-table/infinite-react';
+import { APIManagerContext } from '../lib/APIManagerContext';
+
+export const APIManagerWithContext = function ({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const {
+    activeDebugId,
+    sendMessageToHostPage: sendMessageToContentScript,
+    currentInstance,
+  } = useDevToolsMessagingContext();
+  const [renderKey, setRenderKey] = useState(0);
+  const rerender = useCallback(() => {
+    setRenderKey((prev) => prev + 1);
+  }, []);
+
+  const [overridenProperties] = useState<Set<keyof DevToolsOverrides>>(() => {
+    return new Set();
+  });
+
+  const sendMessage = useCallback(
+    (
+      options: {
+        type: string;
+        property?: keyof DevToolsOverrides;
+      },
+      payload: any,
+    ) => {
+      const { type, property } = options;
+
+      sendMessageToContentScript(type, {
+        ...payload,
+        debugId: activeDebugId,
+        property,
+      });
+
+      if (!property || type === 'revertProperty' || type === 'revertAll') {
+        return;
+      }
+      overridenProperties.add(property as keyof DevToolsOverrides);
+      rerender();
+    },
+    [activeDebugId, sendMessageToContentScript],
+  );
+
+  const revertProperty = useCallback(
+    (property: keyof DevToolsOverrides) => {
+      overridenProperties.delete(property);
+      sendMessage(
+        { type: 'revertProperty', property },
+        {
+          property,
+          debugId: activeDebugId,
+        },
+      );
+      rerender();
+    },
+    [activeDebugId, sendMessage],
+  );
+
+  const revertAll = useCallback(() => {
+    overridenProperties.clear();
+    sendMessage(
+      { type: 'revertAll' },
+      {
+        debugId: activeDebugId,
+      },
+    );
+    rerender();
+  }, [activeDebugId, sendMessage]);
+
+  const setColumnVisibility = useCallback(
+    (columnVisibility: InfiniteTablePropColumnVisibility) => {
+      sendMessage(
+        { type: 'setColumnVisibility', property: 'columnVisibility' },
+        {
+          columnVisibility,
+          debugId: activeDebugId,
+        },
+      );
+    },
+    [activeDebugId, sendMessage],
+  );
+
+  const discardWarning = useCallback(
+    (warning: ErrorCodeKey) => {
+      sendMessage(
+        { type: 'discardWarning' },
+        {
+          warning,
+          debugId: activeDebugId,
+        },
+      );
+    },
+    [activeDebugId, sendMessage],
+  );
+
+  const discardAllWarnings = useCallback(() => {
+    sendMessage(
+      { type: 'discardAllWarnings' },
+      {
+        debugId: activeDebugId,
+      },
+    );
+  }, [activeDebugId, sendMessage]);
+
+  const setGroupBy = useCallback(
+    (groupBy: { field: string }[]) => {
+      sendMessage(
+        { type: 'setGroupBy', property: 'groupBy' },
+        {
+          groupBy,
+          debugId: activeDebugId,
+        },
+      );
+    },
+    [activeDebugId, sendMessage],
+  );
+
+  const setGroupRenderStrategy = useCallback(
+    (groupRenderStrategy: string) => {
+      sendMessage(
+        { type: 'setGroupRenderStrategy', property: 'groupRenderStrategy' },
+        {
+          groupRenderStrategy,
+          debugId: activeDebugId,
+        },
+      );
+    },
+    [activeDebugId, sendMessage],
+  );
+
+  const setSortInfo = useCallback(
+    (sortInfo: { field: string; dir: 1 | -1 }[]) => {
+      sendMessage(
+        { type: 'setSortInfo', property: 'sortInfo' },
+        { sortInfo, debugId: activeDebugId },
+      );
+    },
+    [activeDebugId, sendMessage],
+  );
+
+  const setMultiSort = useCallback(
+    (multiSort: boolean) => {
+      sendMessage(
+        { type: 'setMultiSort', property: 'multiSort' },
+        { multiSort, debugId: activeDebugId },
+      );
+    },
+    [activeDebugId, sendMessage],
+  );
+
+  return (
+    <APIManagerContext.Provider
+      value={{
+        discardWarning,
+        discardAllWarnings,
+        warnings: currentInstance?.debugWarnings || {},
+        setColumnVisibility,
+        setGroupBy,
+        setGroupRenderStrategy,
+        setSortInfo,
+        setMultiSort,
+        revertProperty,
+        revertAll,
+        rerender,
+        overridenProperties,
+      }}
+    >
+      {children}
+    </APIManagerContext.Provider>
+  );
+};