lint and search improvents

frontend/src/core/components/viewer/EmbedPdfViewer.tsx

@@ -43,6 +43,7 @@ const EmbedPdfViewerContent = ({
     isThumbnailSidebarVisible,
     toggleThumbnailSidebar,
     isBookmarkSidebarVisible,
+    searchInterfaceActions,
     zoomActions,
     panActions: _panActions,
     rotationActions: _rotationActions,
@@ -184,7 +185,7 @@ const EmbedPdfViewerContent = ({
     onZoomOut: zoomActions.zoomOut,
   });
 
-  // Handle keyboard zoom shortcuts
+  // Handle keyboard shortcuts (zoom and search)
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (!isViewerHovered) return;
@@ -199,6 +200,10 @@ const EmbedPdfViewerContent = ({
           // Ctrl+- for zoom out
           event.preventDefault();
           zoomActions.zoomOut();
+        } else if (event.key === 'f' || event.key === 'F') {
+          // Ctrl+F for search
+          event.preventDefault();
+          searchInterfaceActions.open();
         }
       }
     };
@@ -207,7 +212,7 @@ const EmbedPdfViewerContent = ({
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [isViewerHovered]);
+  }, [isViewerHovered, zoomActions, searchInterfaceActions]);
 
   // Register checker for unsaved changes (annotations only for now)
   useEffect(() => {

frontend/src/core/components/viewer/SearchInterface.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Box, TextInput, ActionIcon, Text, Group } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { LocalIcon } from '@app/components/shared/LocalIcon';
@@ -12,7 +12,9 @@ interface SearchInterfaceProps {
 export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
   const { t } = useTranslation();
   const viewerContext = React.useContext(ViewerContext);
-  
+  const inputRef = useRef<HTMLInputElement>(null);
+  const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
   const searchState = viewerContext?.getSearchState();
   const searchResults = searchState?.results;
   const searchActiveIndex = searchState?.activeIndex;
@@ -26,6 +28,38 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
   } | null>(null);
   const [isSearching, setIsSearching] = useState(false);
 
+  // Auto-focus search input when visible
+  useEffect(() => {
+    if (visible) {
+      inputRef.current?.focus();
+    }
+  }, [visible]);
+
+  // Auto-search as user types (debounced)
+  useEffect(() => {
+    // Clear existing timeout
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+    }
+
+    // If query is empty, clear search immediately
+    if (!searchQuery.trim()) {
+      handleClearSearch();
+      return;
+    }
+
+    // Debounce search by 300ms
+    searchTimeoutRef.current = setTimeout(() => {
+      handleSearch(searchQuery);
+    }, 300);
+
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, [searchQuery]);
+
   // Monitor search state changes
   useEffect(() => {
     if (!visible) return;
@@ -123,7 +157,14 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
     }
   };
 
-  const _handleClose = () => {
+  const handleInputBlur = () => {
+    // Close popover on blur if no text is entered
+    if (!searchQuery.trim()) {
+      onClose();
+    }
+  };
+
+  const handleCloseClick = () => {
     handleClearSearch();
     onClose();
   };
@@ -135,37 +176,44 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
         padding: '0px'
       }}
     >
-      {/* Header */}
-      <Group mb="md">
+      {/* Header with close button */}
+      <Group mb="md" justify="space-between">
         <Text size="sm" fw={600}>
           {t('search.title', 'Search PDF')}
         </Text>
+        <ActionIcon
+          variant="subtle"
+          size="sm"
+          onClick={handleCloseClick}
+          aria-label="Close search"
+        >
+          <LocalIcon icon="close" width="1rem" height="1rem" />
+        </ActionIcon>
       </Group>
 
       {/* Search input */}
       <Group mb="md">
         <TextInput
+          ref={inputRef}
           placeholder={t('search.placeholder', 'Enter search term...')}
           value={searchQuery}
           onChange={(e) => {
             const newValue = e.currentTarget.value;
             setSearchQuery(newValue);
-            // If user clears the input, clear the search highlights
-            if (!newValue.trim()) {
-              handleClearSearch();
-            }
           }}
           onKeyDown={handleKeyDown}
+          onBlur={handleInputBlur}
           style={{ flex: 1 }}
           rightSection={
-            <ActionIcon
-              variant="subtle"
-              onClick={() => handleSearch(searchQuery)}
-              disabled={!searchQuery.trim() || isSearching}
-              loading={isSearching}
-            >
-              <LocalIcon icon="search" width="1rem" height="1rem" />
-            </ActionIcon>
+            searchQuery.trim() && (
+              <ActionIcon
+                variant="subtle"
+                onClick={handleClearSearch}
+                aria-label="Clear search"
+              >
+                <LocalIcon icon="close" width="0.875rem" height="0.875rem" />
+              </ActionIcon>
+            )
           }
         />
       </Group>

frontend/src/core/components/viewer/useViewerRightRailButtons.tsx

@@ -36,7 +36,14 @@ export function useViewerRightRailButtons() {
         order: 10,
         render: ({ disabled }) => (
           <Tooltip content={searchLabel} position={tooltipPosition} offset={12} arrow portalTarget={document.body}>
-            <Popover position={tooltipPosition} withArrow shadow="md" offset={8}>
+            <Popover
+              position={tooltipPosition}
+              withArrow
+              shadow="md"
+              offset={8}
+              opened={viewer.isSearchInterfaceVisible}
+              onClose={viewer.searchInterfaceActions.close}
+            >
               <Popover.Target>
                 <div style={{ display: 'inline-flex' }}>
                   <ActionIcon
@@ -45,6 +52,7 @@ export function useViewerRightRailButtons() {
                     className="right-rail-icon"
                     disabled={disabled}
                     aria-label={searchLabel}
+                    onClick={viewer.searchInterfaceActions.toggle}
                   >
                     <LocalIcon icon="search" width="1.5rem" height="1.5rem" />
                   </ActionIcon>
@@ -52,7 +60,7 @@ export function useViewerRightRailButtons() {
               </Popover.Target>
               <Popover.Dropdown>
                 <div style={{ minWidth: '20rem' }}>
-                  <SearchInterface visible={true} onClose={() => {}} />
+                  <SearchInterface visible={viewer.isSearchInterfaceVisible} onClose={viewer.searchInterfaceActions.close} />
                 </div>
               </Popover.Dropdown>
             </Popover>

frontend/src/core/contexts/ViewerContext.tsx

@@ -80,6 +80,14 @@ interface ViewerContextType {
   isBookmarkSidebarVisible: boolean;
   toggleBookmarkSidebar: () => void;
 
+  // Search interface visibility
+  isSearchInterfaceVisible: boolean;
+  searchInterfaceActions: {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+  };
+
   // Annotation visibility toggle
   isAnnotationsVisible: boolean;
   toggleAnnotationsVisibility: () => void;
@@ -145,6 +153,7 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
   // UI state - only state directly managed by this context
   const [isThumbnailSidebarVisible, setIsThumbnailSidebarVisible] = useState(false);
   const [isBookmarkSidebarVisible, setIsBookmarkSidebarVisible] = useState(false);
+  const [isSearchInterfaceVisible, setSearchInterfaceVisible] = useState(false);
   const [isAnnotationsVisible, setIsAnnotationsVisible] = useState(true);
   const [isAnnotationMode, setIsAnnotationModeState] = useState(false);
   const [activeFileIndex, setActiveFileIndex] = useState(0);
@@ -207,6 +216,12 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     setIsBookmarkSidebarVisible(prev => !prev);
   };
 
+  const searchInterfaceActions = {
+    open: () => setSearchInterfaceVisible(true),
+    close: () => setSearchInterfaceVisible(false),
+    toggle: () => setSearchInterfaceVisible(prev => !prev),
+  };
+
   const toggleAnnotationsVisibility = () => {
     setIsAnnotationsVisible(prev => !prev);
   };
@@ -294,6 +309,10 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     isBookmarkSidebarVisible,
     toggleBookmarkSidebar,
 
+    // Search interface
+    isSearchInterfaceVisible,
+    searchInterfaceActions,
+
     // Annotation controls
     isAnnotationsVisible,
     toggleAnnotationsVisibility,