Merge pull request #7 from openpatch/copilot/create-gui-for-json-editor

Add clean graphical user interface for defining klasses and setting options

Author: mikebarkmin

src/App.css

@@ -13,7 +13,6 @@ button {
   color: grey;
   cursor: pointer;
   border: 0;
-  flex: 1;
   border-radius: 10px;
   padding: 8px;
 }
@@ -91,11 +90,11 @@ input {
 }
 
 .react-flow__edge.selected .react-flow__edge-path {
-  stroke: red!important;
+  stroke: red !important;
 }
 
 .react-flow__node.selected {
-  outline: 2px solid red!important;
+  outline: 2px solid red !important;
 }
 
 .react-flow__edge.previous-method-call .react-flow__edge-path {
@@ -150,6 +149,7 @@ input {
 .react-flow__node-object .react-flow__handle-left {
   transform: translate(-8px, 0);
 }
+
 .react-flow__node-method-call .react-flow__handle-right,
 .react-flow__node-object .react-flow__handle-right {
   transform: translate(8px, 0);

src/App.tsx

@@ -3,7 +3,7 @@ import '@xyflow/react/dist/style.css';
 import useStore, { RFState } from './store';
 import { shallow } from 'zustand/shallow';
 import { MemoryView } from "./MemoryView";
-import { EditView } from "./EditView";
+import { ConfigView } from "./ConfigView";
 
 const selector = (state: RFState) => ({
   route: state.route
@@ -16,10 +16,10 @@ function App() {
   );
 
   return (
-    <div style={{ width: "100dvw", height: "100dvh" }}>
+    <div style={{ height: "100dvh" }}>
       {route === "view" &&
-      <MemoryView />}
-      {route === "edit" && <EditView />}
+        <MemoryView />}
+      {route === "config" && <ConfigView />}
     </div>
   );
 }