fix(search): remove invalid metadata join and correct result unpackin

Author: Isha-upadhyay

backend/app/database/images.py

@@ -423,15 +423,13 @@ def db_search_images(query: str, tagged: Optional[bool] = None) -> List[dict]:
                 i.metadata,
                 i.isTagged,
                 i.isFavourite,
-                m.name as tag_name,
-                md.location as location_name
+                m.name as tag_name
             FROM images i
             LEFT JOIN image_classes ic ON i.id = ic.image_id
             LEFT JOIN mappings m ON ic.class_id = m.class_id
-            LEFT JOIN metadata md ON i.id = md.image_id
             WHERE (
                 m.name LIKE ? OR
-                md.location LIKE ? OR
+                i.metadata LIKE ? OR
                 i.path LIKE ?
             )
         """
@@ -461,7 +459,6 @@ def db_search_images(query: str, tagged: Optional[bool] = None) -> List[dict]:
             is_tagged,
             is_favourite,
             tag_name,
-            location_name,
         ) in results:
 
             if image_id not in images_dict:

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

@@ -35,7 +35,6 @@ export function Navbar() {
 
   return (
     <div className="sticky top-0 z-40 flex h-14 w-full items-center justify-between border-b pr-4 backdrop-blur">
-
       {/* Logo */}
       <div className="flex w-[256px] items-center justify-center">
         <a href="/" className="flex items-center space-x-2">
@@ -64,6 +63,7 @@ export function Navbar() {
 
           {/* Search Input */}
           <Input
+            ref={inputRef}
             type="search"
             placeholder="Search by tags, faces, or location..."
             className="mr-2 flex-1 border-0 bg-neutral-200"
@@ -109,4 +109,4 @@ export function Navbar() {
       </div>
     </div>
   );
-}
+}

frontend/src/pages/Home/Home.tsx

@@ -26,13 +26,13 @@ export const Home = () => {
 
   // GLOBAL SEARCH STATE
   const searchState = useSelector((state: RootState) => state.search);
-  const isTextSearchActive = searchState.active && searchState.type === "text";
-  const isFaceSearchActive = searchState.active && searchState.type === "face";
-  const searchQuery = searchState.query || "";
+  const isTextSearchActive = searchState.active && searchState.type === 'text';
+  const isFaceSearchActive = searchState.active && searchState.type === 'face';
+  const searchQuery = searchState.query || '';
 
   // NORMAL FETCH — disabled during search
   const { data, isLoading, isSuccess, isError, error } = usePictoQuery({
-    queryKey: ["images"],
+    queryKey: ['images'],
     queryFn: () => fetchAllImages(),
     enabled: !searchState.active,
   });
@@ -56,11 +56,11 @@ export const Home = () => {
       error,
     },
     {
-      loadingMessage: "Loading images",
+      loadingMessage: 'Loading images',
       showSuccess: false,
-      errorTitle: "Error",
-      errorMessage: "Failed to load images. Please try again later.",
-    }
+      errorTitle: 'Error',
+      errorMessage: 'Failed to load images. Please try again later.',
+    },
   );
 
   // UPDATE IMAGES BASED ON STATE
@@ -69,7 +69,7 @@ export const Home = () => {
     if (isTextSearchActive && searchSuccess) {
       const images = (searchData?.data || []) as Image[];
       if (!Array.isArray(images)) {
-        console.error("Invalid search data format");
+        console.error('Invalid search data format');
         return;
       }
       dispatch(setImages(images));
@@ -81,14 +81,22 @@ export const Home = () => {
       const images = (data?.data || []) as Image[];
       dispatch(setImages(images));
     }
-  }, [dispatch, searchData, data]);
+  }, [
+    dispatch,
+    searchData,
+    data,
+    isTextSearchActive,
+    searchSuccess,
+    searchState.active,
+    isSuccess,
+  ]);
 
   // TITLE
   const title = isTextSearchActive
     ? `Search Results for "${searchQuery}" (${images.length} found)`
     : isFaceSearchActive && images.length > 0
-    ? `Face Search Results (${images.length} found)`
-    : "Image Gallery";
+      ? `Face Search Results (${images.length} found)`
+      : 'Image Gallery';
 
   return (
     <div className="relative flex h-full flex-col pr-6">