update acc to coderabbit

Author: Isha-upadhyay

frontend/src/components/Navigation/Navbar/Navbar.tsx

@@ -4,37 +4,34 @@ import { startTextSearch, clearSearch } from '@/features/searchSlice';
 
 import { Input } from '@/components/ui/input';
 import { ThemeSelector } from '@/components/ThemeToggle';
-import { Search} from 'lucide-react';
+import { Search } from 'lucide-react';
 import { selectAvatar, selectName } from '@/features/onboardingSelectors';
 import { convertFileSrc } from '@tauri-apps/api/core';
 import { FaceSearchDialog } from '@/components/Dialog/FaceSearchDialog';
+import { useRef } from 'react';
 
 export function Navbar() {
   const userName = useSelector(selectName);
   const userAvatar = useSelector(selectAvatar);
-
-  const searchState = useSelector((state: any) => state.search);
-  const isSearchActive = searchState.active && searchState.type === 'text';
-  const queryImage = searchState.queryImage;
-
+  const queryImage = useSelector((state: any) => state.search.queryImage);
   const dispatch = useDispatch();
   const [searchInput, setSearchInput] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
 
   // Debounce search
   useEffect(() => {
+    const trimmed = searchInput.trim();
+
     const timer = setTimeout(() => {
-      if (searchInput.trim().length > 0) {
-        dispatch(startTextSearch(searchInput.trim()));
-      } else if (searchInput.trim().length === 0 && isSearchActive) {
+      if (trimmed) {
+        dispatch(startTextSearch(trimmed));
+      } else {
         dispatch(clearSearch());
       }
     }, 500);
 
     return () => clearTimeout(timer);
-
-    // use searchState
-  }, [searchInput, dispatch, searchState.active, searchState.type]);
-
+  }, [searchInput, dispatch]);
 
   return (
     <div className="sticky top-0 z-40 flex h-14 w-full items-center justify-between border-b pr-4 backdrop-blur">
@@ -50,7 +47,6 @@ export function Navbar() {
       {/* Search Bar */}
       <div className="mx-auto flex max-w-md flex-1 justify-center px-4">
         <div className="dark:bg-muted/50 flex w-full items-center gap-1 rounded-md bg-neutral-100 px-1 py-1">
-
           {/* Query Image Preview */}
           {queryImage && (
             <div className="relative mr-2 ml-2">
@@ -86,8 +82,9 @@ export function Navbar() {
 
           {/* Search Icon */}
           <button
-            className="text-muted-foreground hover:bg-accent dark:hover:bg-accent/50 hover:text-foreground mx-1 cursor-pointer rounded-sm p-2"
-            title="Search"
+            onClick={() => inputRef.current?.focus()}
+            className="text-muted-foreground hover:bg-accent dark:hover:bg-accent/50 hover:text-foreground mx-1 rounded-sm p-2"
+            title="Focus search"
           >
             <Search className="h-4 w-4" />
           </button>
@@ -112,4 +109,4 @@ export function Navbar() {
       </div>
     </div>
   );
-}
+}