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 SettingsRoute = ({ open = true, onClose }) => {
-  const navigate = useNavigate();
   const {
     token,
     notifyApiError,
@@ -71,27 +69,20 @@ const SettingsRoute = () => {
 
   const handleClose = useCallback(() => {
     dismissSecret();
-    navigate(-1);
+    onClose?.();
-  }, [dismissSecret, navigate]);
+  }, [dismissSecret, onClose]);
-
-  useEffect(() => {
-    const handleKeyDown = (event) => {
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        handleClose();
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [handleClose]);
 
   useEffect(() => () => {
     dismissSecret();
   }, [dismissSecret]);
 
+  if (!open) {
+    return null;
+  }
+
   return (
     <SettingsModal
-      open
+      open={open}
       onClose={handleClose}
       tokens={tokens}
       loading={tokensLoading}

frontend/src/hooks/documents/useDocumentsWorkspace.js

@@ -1027,9 +1027,27 @@ const useDocumentsWorkspace = ({
     setStatusMessage,
   });
 
+  const [settingsOpen, setSettingsOpen] = useState(false);
   const openSettings = useCallback(() => {
-    navigate('/settings');
+    setSettingsOpen(true);
-  }, [navigate]);
+  }, []);
+  const closeSettings = useCallback(() => {
+    setSettingsOpen(false);
+  }, []);
+
+  useEffect(() => {
+    if (!settingsOpen) {
+      return undefined;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        setSettingsOpen(false);
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [settingsOpen]);
 
   useEffect(
     () => () => {
@@ -1548,6 +1566,8 @@ const useDocumentsWorkspace = ({
     dropOverlayState,
     managementModals,
     contextValue,
+    settingsOpen,
+    closeSettings,
   };
 };
 

frontend/src/styles/modals/status-drop.css

@@ -51,7 +51,7 @@
   align-items: center;
   justify-content: center;
   padding: 1.5rem;
-  z-index: 3000;
+  z-index: 2000000;
 }
 
 .modal {

frontend/src/styles/workspace/workspace-items.css

@@ -45,7 +45,7 @@
   pointer-events: none;
   filter: blur(15px) grayscale(100%);
   transition: opacity 0.6s ease, filter 0.28s ease;
-  z-index: 0 !important;
+  z-index: 0;
 }
 
 .desk-item.is-selected {

frontend/src/styles/workspace/workspace-overlays.css

@@ -2,7 +2,7 @@
 .desk-help-overlay {
   position: fixed;
   inset: 0;
-  z-index: 5000000;
+  z-index: 2000000;
   display: flex;
   align-items: center;
   justify-content: center;