update dna and panel controls

src/App.js

@@ -18,7 +18,7 @@ import ConnectionIndicators from './ConnectionIndicators';
 import DnsIcon from '@mui/icons-material/Dns';
 import LanIcon from '@mui/icons-material/Lan';
 import CompactSidebar from './CompactSidebar';
-import DNAServerModal from './DNAServerModal';
+import DynamicNodeIdServer from './services/DynamicNodeIdServer';
 
 window.mavlinkSession = new MavlinkSession();
 window.localNode = new dronecan.Node({name: "com.vimdrones.web_gui"});
@@ -43,25 +43,26 @@ const App = () => {
     const [snackbarMessage, setSnackbarMessage] = useState('');
     const [snackbarSeverity, setSnackbarSeverity] = useState('info');
     const [selectedBus, setSelectedBus] = useState(0);
-    const [dnaModalOpen, setDnaModalOpen] = useState(false);
     const [dnaServerActive, setDnaServerActive] = useState(false);
 
     const openWindow = (windowTitle, windowPath, windowSize) => {
-        if (subWindowRef[windowPath]) {
+        if (subWindowRef[windowPath] && !subWindowRef[windowPath].closed) {
             subWindowRef[windowPath].focus();
             return;
         }
         const newWindow = window.open(windowPath, windowTitle, windowSize);
         if (newWindow) {
-            subWindowRef[windowPath] = newWindow;
-            setSubWindowRef(subWindowRef);
+            setSubWindowRef((prev) => ({ ...prev, [windowPath]: newWindow }));
 
             newWindow.addEventListener('beforeunload', () => {
-                subWindowRef[windowPath] = null;
-                setSubWindowRef(subWindowRef);
+                setSubWindowRef((prev) => {
+                    const next = { ...prev };
+                    delete next[windowPath];
+                    return next;
+                });
             });
         } else {
-            console.error(`Main: Failed to open ${windowName}`);
+            console.error(`Main: Failed to open ${windowTitle}`);
         }
     };
 
@@ -106,18 +107,24 @@ const App = () => {
         setModalOpen(true);
     };
 
-    const handleCloseModal = (serverRunning) => {
+    const handleCloseModal = () => {
         setModalOpen(false);
-        setDnaServerActive(serverRunning);
     };
 
-    const handleOpenDnaModal = () => {
-        setDnaModalOpen(true);
-    };
+    const handleToggleDnaServer = () => {
+        if (!window.dnaServer) {
+            window.dnaServer = new DynamicNodeIdServer(window.localNode);
+        }
 
-    const handleCloseDnaModal = (serverRunning) => {
-        setDnaModalOpen(false);
-        setDnaServerActive(serverRunning);
+        if (window.dnaServer.getStatus().isActive) {
+            window.dnaServer.stop();
+            setDnaServerActive(false);
+            showMessage('DNA server stopped', 'info');
+        } else {
+            const success = window.dnaServer.start(1, 125);
+            setDnaServerActive(success);
+            showMessage(success ? 'DNA server started' : 'Failed to start DNA server', success ? 'success' : 'error');
+        }
     };
 
     return (
@@ -190,7 +197,7 @@ const App = () => {
                                 }} /> : 
                                 <DnsIcon />
                             }
-                            onClick={handleOpenDnaModal}
+                            onClick={handleToggleDnaServer}
                             sx={dnaServerActive ? {
                                 borderColor: 'success.main',
                                 '&:hover': {
@@ -277,11 +284,6 @@ const App = () => {
                 selectedBus={selectedBus}
                 onBusChange={handleBusChange}
             />
-            <DNAServerModal
-                open={dnaModalOpen}
-                onClose={handleCloseDnaModal}
-                showMessage={showMessage.bind(this)}
-            />
             <Snackbar
                 open={snackbarOpen} 
                 autoHideDuration={6000}