modal

frontend/src/app/AppLayout.jsx

@@ -5,6 +5,7 @@ import DropOverlay from './DropOverlay';
 import UploadQueueOverlay from './UploadQueueOverlay';
 import useDocumentsWorkspace from '../hooks/documents/useDocumentsWorkspace';
 import { useDocumentsPreferences } from './useDocumentsPreferences';
+import SettingsRoute from './SettingsRoute';
 
 const AppLayout = () => {
   const documentsPreferences = useDocumentsPreferences();
@@ -15,6 +16,8 @@ const AppLayout = () => {
     dropOverlayState,
     managementModals,
     contextValue,
+    settingsOpen,
+    closeSettings,
   } = useDocumentsWorkspace({
     documentsViewMode: documentsPreferences.documentsViewMode,
     documentsSortField: documentsPreferences.documentsSortField,
@@ -61,6 +64,9 @@ const AppLayout = () => {
         />
         <Outlet />
         {managementModals}
+        {settingsOpen ? (
+          <SettingsRoute open onClose={closeSettings} />
+        ) : null}
       </div>
     </AppShellContext.Provider>
   );

frontend/src/app/AppRouter.jsx

@@ -3,7 +3,6 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 import AppLayout from './AppLayout';
 import DocumentsRoute from './DocumentsRoute';
 import LoginRoute from './LoginRoute';
-import SettingsRoute from './SettingsRoute';
 
 const AppRouter = () => (
   <Routes>
@@ -13,7 +12,6 @@ const AppRouter = () => (
       <Route path="/documents" element={<DocumentsRoute />} />
       <Route path="/documents/folder/:folderId" element={<DocumentsRoute />} />
       <Route path="/documents/:documentId" element={<DocumentsRoute />} />
-      <Route path="/settings" element={<SettingsRoute />} />
       <Route path="*" element={<Navigate to="/documents" replace />} />
     </Route>
   </Routes>

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}