modal

frontend/src/app/SettingsRoute.jsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
 import SettingsModal from '../settings/SettingsModal';
 import { useAppShell } from '../appShellContext';
 import useApiTokens from '../settings/useApiTokens';
@@ -7,8 +6,7 @@ import useCapabilitySets from '../settings/useCapabilitySets';
 import useCapabilities from '../settings/useCapabilities';
 import { api } from './appState';
 
-const SettingsRoute = () => {
-  const navigate = useNavigate();
+const SettingsRoute = ({ open = true, onClose }) => {
   const {
     token,
     notifyApiError,
@@ -71,27 +69,20 @@ const SettingsRoute = () => {
 
   const handleClose = useCallback(() => {
     dismissSecret();
-    navigate(-1);
-  }, [dismissSecret, navigate]);
-
-  useEffect(() => {
-    const handleKeyDown = (event) => {
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        handleClose();
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [handleClose]);
+    onClose?.();
+  }, [dismissSecret, onClose]);
 
   useEffect(() => () => {
     dismissSecret();
   }, [dismissSecret]);
 
+  if (!open) {
+    return null;
+  }
+
   return (
     <SettingsModal
-      open
+      open={open}
       onClose={handleClose}
       tokens={tokens}
       loading={tokensLoading}