Add config editor to webUI (#4608)

* Add raw config endpoint

* Add config editor

* Add code editor

* Add error

* Add ability to copy config

* Only show the save button when code has been edited

* Update errors

* Remove debug config from system page

* Break out config saving steps to pinpoint where error occurred.

* Show correct config errors

* Switch to monaco editor

* Adjust UI colors and behavior

* Get yaml validation working

* Set success color

web/src/routes/System.jsx

@@ -7,7 +7,7 @@ import { useWs } from '../api/ws';
 import useSWR from 'swr';
 import axios from 'axios';
 import { Table, Tbody, Thead, Tr, Th, Td } from '../components/Table';
-import { useCallback, useState } from 'preact/hooks';
+import { useState } from 'preact/hooks';
 import Dialog from '../components/Dialog';
 
 const emptyObject = Object.freeze({});
@@ -34,13 +34,6 @@ export default function System() {
   const gpuNames = Object.keys(gpu_usages || emptyObject);
   const cameraNames = Object.keys(cameras || emptyObject);
 
-  const handleCopyConfig = useCallback(() => {
-    async function copy() {
-      await window.navigator.clipboard.writeText(JSON.stringify(config, null, 2));
-    }
-    copy();
-  }, [config]);
-
   const onHandleFfprobe = async (camera, e) => {
     if (e) {
       e.stopPropagation();
@@ -267,16 +260,6 @@ export default function System() {
           <p>System stats update automatically every {config.mqtt.stats_interval} seconds.</p>
         </Fragment>
       )}
-
-      <div className="relative">
-        <Heading size="sm">Config</Heading>
-        <Button className="absolute top-8 right-4" onClick={handleCopyConfig}>
-          Copy to Clipboard
-        </Button>
-        <pre className="overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2 max-h-96">
-          {JSON.stringify(config, null, 2)}
-        </pre>
-      </div>
     </div>
   );
 }