From f57343fd566337cf63be14612ade36f0f51df482 Mon Sep 17 00:00:00 2001
From: EthanHealy01 <ethan.healy.21@gmail.com>
Date: Tue, 7 Oct 2025 21:02:31 +0100
Subject: [PATCH] fix bugs and add search to shortcut settings

---
 .../src/components/shared/AppConfigModal.tsx  |  2 +-
 .../config/configSections/HotkeysSection.tsx  | 42 +++++++++++++++----
 .../tools/FullscreenToolSurface.tsx           | 12 +-----
 frontend/src/contexts/ToolWorkflowContext.tsx |  2 +-
 4 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/shared/AppConfigModal.tsx b/frontend/src/components/shared/AppConfigModal.tsx
index 2ed7f71b7..4cbe94717 100644
--- a/frontend/src/components/shared/AppConfigModal.tsx
+++ b/frontend/src/components/shared/AppConfigModal.tsx
@@ -77,7 +77,7 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
       centered
       radius="lg"
       withCloseButton={false}
-      style={{ zIndex: 1000 }}
+      zIndex={200000}
       overlayProps={{ opacity: 0.35, blur: 2 }}
       padding={0}
       fullScreen={isMobile}
diff --git a/frontend/src/components/shared/config/configSections/HotkeysSection.tsx b/frontend/src/components/shared/config/configSections/HotkeysSection.tsx
index e0240f55a..7c5bb8bce 100644
--- a/frontend/src/components/shared/config/configSections/HotkeysSection.tsx
+++ b/frontend/src/components/shared/config/configSections/HotkeysSection.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Alert, Badge, Box, Button, Divider, Group, Paper, Stack, Text } from '@mantine/core';
+import { Alert, Badge, Box, Button, Divider, Group, Paper, Stack, Text, TextInput } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { useToolWorkflow } from '../../../../contexts/ToolWorkflowContext';
 import { useHotkeys } from '../../../../contexts/HotkeyContext';
@@ -26,9 +26,21 @@ const HotkeysSection: React.FC = () => {
   const { hotkeys, defaults, updateHotkey, resetHotkey, pauseHotkeys, resumeHotkeys, getDisplayParts, isMac } = useHotkeys();
   const [editingTool, setEditingTool] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState<string>('');
 
   const tools = useMemo(() => Object.entries(toolRegistry), [toolRegistry]);
 
+  const filteredTools = useMemo(() => {
+    if (!searchQuery.trim()) return tools;
+    
+    const query = searchQuery.toLowerCase();
+    return tools.filter(([toolId, tool]) => 
+      tool.name.toLowerCase().includes(query) ||
+      tool.description.toLowerCase().includes(query) ||
+      toolId.toLowerCase().includes(query)
+    );
+  }, [tools, searchQuery]);
+
   useEffect(() => {
     if (!editingTool) {
       return;
@@ -45,15 +57,17 @@ const HotkeysSection: React.FC = () => {
     }
 
     const handleKeyDown = (event: KeyboardEvent) => {
-      event.preventDefault();
-      event.stopPropagation();
-
       if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
         setEditingTool(null);
         setError(null);
         return;
       }
 
+      event.preventDefault();
+      event.stopPropagation();
+
       const binding = eventToBinding(event as KeyboardEvent);
       if (!binding) {
         const osKey = isMac ? 'mac' : 'windows';
@@ -99,9 +113,22 @@ const HotkeysSection: React.FC = () => {
         </Text>
       </div>
 
+      <TextInput
+        placeholder="Search tools..."
+        value={searchQuery}
+        onChange={(event) => setSearchQuery(event.currentTarget.value)}
+        size="md"
+        radius="md"
+      />
+
       <Paper withBorder p="md" radius="md">
         <Stack gap="md">
-          {tools.map(([toolId, tool], index) => {
+          {filteredTools.length === 0 ? (
+            <Text c="dimmed" ta="center" py="xl">
+              {searchQuery.trim() ? 'No tools found matching your search.' : 'No tools available.'}
+            </Text>
+          ) : (
+            filteredTools.map(([toolId, tool], index) => {
             const currentBinding = hotkeys[toolId];
             const defaultBinding = defaults[toolId];
             const isEditing = editingTool === toolId;
@@ -158,10 +185,11 @@ const HotkeysSection: React.FC = () => {
                   )}
                 </Box>
 
-                {index < tools.length - 1 && <Divider />}
+                {index < filteredTools.length - 1 && <Divider />}
               </React.Fragment>
             );
-          })}
+          })
+          )}
         </Stack>
       </Paper>
     </Stack>
diff --git a/frontend/src/components/tools/FullscreenToolSurface.tsx b/frontend/src/components/tools/FullscreenToolSurface.tsx
index 6978dd54f..a0ac59f9d 100644
--- a/frontend/src/components/tools/FullscreenToolSurface.tsx
+++ b/frontend/src/components/tools/FullscreenToolSurface.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react';
+import { useState, useRef } from 'react';
 import { ActionIcon, ScrollArea, Switch, Tooltip, useMantineColorScheme } from '@mantine/core';
 import ViewSidebarRoundedIcon from '@mui/icons-material/ViewSidebarRounded';
 import { useTranslation } from 'react-i18next';
@@ -77,16 +77,6 @@ const FullscreenToolSurface = ({
     }, 220); // Match animation duration (0.22s)
   };
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        handleExit();
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, []);
 
   const style = geometry
     ? {
diff --git a/frontend/src/contexts/ToolWorkflowContext.tsx b/frontend/src/contexts/ToolWorkflowContext.tsx
index 9bbfef067..ac67b500c 100644
--- a/frontend/src/contexts/ToolWorkflowContext.tsx
+++ b/frontend/src/contexts/ToolWorkflowContext.tsx
@@ -302,7 +302,7 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
     // Handle multiTool selection - enable page editor workbench
     if (toolId === 'multiTool') {
       setReaderMode(false);
-      setLeftPanelView('toolPicker'); // Show tool picker when navigating back to tools in mobile
+      setLeftPanelView('hidden');
       actions.setSelectedTool('multiTool');
       actions.setWorkbench('pageEditor');
       setSearchQuery('');