feat: integrate Monaco Editor for enhanced configuration viewing and add device feedbacks querying

Author: ndorin

package-lock.json

@@ -4,6 +4,7 @@
   "type": "module",
   "private": true,
   "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
     "@reduxjs/toolkit": "^2.11.2",
     "axios": "^1.14.0",
     "bootstrap": "^5.3.8",

package.json

@@ -1,19 +1,52 @@
-import { useGetConfigQuery } from '../store/apiSlice';
+import { Editor, OnMount, useMonaco } from "@monaco-editor/react";
+import { useEffect, useRef } from "react";
+import { useGetConfigQuery } from "../store/apiSlice";
+
+type IConfigViewer = Parameters<OnMount>[0];
 
 const ConfigFile = () => {
-    const {data: config} = useGetConfigQuery();
+  const { data: config } = useGetConfigQuery();
+
+  if (!config) {
+    return <div>Loading...</div>;
+  }
+
+  return <ConfigFileRender config={config} />;
+};
+
+export default ConfigFile;
+
+const ConfigFileRender = ({ config }: { config: any }) => {
+    console.log("ConfigFileRender == ", config);
+  const monaco = useMonaco();
+  const editorRef = useRef<IConfigViewer | null>(null);
 
+  useEffect(() => {
+    if (!monaco) return;
 
-    if(!config) { return <div>Loading...</div> };
+    (monaco.languages as any).json?.jsonDefaults?.setDiagnosticsOptions({
+      enableSchemaRequest: false,
+      allowComments: false,
+      validate: true,
+    });
+  }, [monaco]);
 
-    return (
-        <div className="d-flex flex-column overflow-hidden h-100">
-            <h2 className='mb-2'>Merged Configuration</h2>
-            <pre className='flex-grow-1 overflow-auto'>
-                {JSON.stringify(config, null, 2)}
-            </pre>
-        </div>
-    );
-}
+  // Set the editor reference
+  function handleEditorDidMount(editor: IConfigViewer) {
+    editorRef.current = editor;
+  }
 
-export default ConfigFile;
+  return (
+    <Editor
+      height="100%"
+      defaultLanguage="json"
+      language="json"
+      options={{
+        readOnly: true,
+      }}
+      value={JSON.stringify(config, null, 2)}
+      onMount={handleEditorDidMount}
+      theme="vs-dark"
+    />
+  );
+};