done overall ui enhancement

frontend/src/App.tsx

@@ -60,6 +60,8 @@ function App() {
 
   // Search
   const [searchQuery, setSearchQuery] = useState('');
+  const [searchCaseSensitive, setSearchCaseSensitive] = useState(false);
+  const [searchWholeWords, setSearchWholeWords] = useState(false);
   const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
   const [searchCurrentMatch, setSearchCurrentMatch] = useState(0);
 
@@ -155,7 +157,7 @@ function App() {
         return;
       }
       try {
-        const results = await gatewayService.searchDocument(selectedDocId, searchQuery);
+        const results = await gatewayService.searchDocument(selectedDocId, searchQuery, searchCaseSensitive, searchWholeWords);
         setSearchResults(results);
         setSearchCurrentMatch(0);
         if (results.length > 0) viewerRef.current?.scrollToPage(results[0].pageIndex);
@@ -164,7 +166,7 @@ function App() {
       }
     }, searchQuery ? 300 : 0);
     return () => clearTimeout(t);
-  }, [searchQuery, selectedDocId]);
+  }, [searchQuery, selectedDocId, searchCaseSensitive, searchWholeWords]);
 
   const selectSearchMatch = (i: number) => {
     if (i < 0 || i >= searchResults.length) return;
@@ -515,6 +517,10 @@ function App() {
             onNavigateAnnotation={navigateToAnnotation}
             searchQuery={searchQuery}
             onSearchQueryChange={setSearchQuery}
+            searchCaseSensitive={searchCaseSensitive}
+            onSearchCaseSensitiveChange={setSearchCaseSensitive}
+            searchWholeWords={searchWholeWords}
+            onSearchWholeWordsChange={setSearchWholeWords}
             searchResults={searchResults}
             searchCurrentMatch={searchCurrentMatch}
             onSelectSearchMatch={selectSearchMatch}

frontend/src/components/icons.tsx

@@ -53,6 +53,7 @@ export const ZoomOutIcon: IC = mk(<><circle cx="11" cy="11" r="7" /><path d="M8
 export const RotateIcon: IC = mk(<path d="M4 4v5h5M4.5 13a7.5 7.5 0 102-7.5L4 9" />);
 export const DownloadIcon: IC = mk(<path d="M12 3v12m0 0l-4-4m4 4l4-4M4 17v2a2 2 0 002 2h12a2 2 0 002-2v-2" />);
 export const ChevronDownIcon: IC = mk(<path d="M6 9l6 6 6-6" />);
+export const ChevronUpIcon: IC = mk(<path d="M18 15l-6-6-6 6" />);
 export const MenuIcon: IC = mk(<path d="M4 7h16M4 12h16M4 17h16" />);
 export const CheckIcon: IC = mk(<path d="M5 12l5 5L20 7" />);
 export const XIcon: IC = mk(<path d="M6 6l12 12M18 6L6 18" />);

frontend/src/lib/gatewayService.ts

@@ -333,10 +333,14 @@ class GatewayService {
     return response.json();
   }
 
-  async searchDocument(documentId: string, query: string): Promise<SearchResult[]> {
+  async searchDocument(documentId: string, query: string, caseSensitive: boolean = false, wholeWords: boolean = false): Promise<SearchResult[]> {
     if (!query) return [];
 
-    const urlParams = new URLSearchParams({ q: query });
+    const urlParams = new URLSearchParams({ 
+      q: query,
+      ...(caseSensitive && { case_sensitive: 'true' }),
+      ...(wholeWords && { whole_words: 'true' })
+    });
     const response = await fetch(`${this.baseUrl}/documents/${documentId}/search?${urlParams.toString()}`);
 
     if (response.status === 501) {