From 736b7f3d15ec5ce3e7e9d5cd4f953547bf711121 Mon Sep 17 00:00:00 2001
From: ParikhShreya <shreyaparikh2006@gmail.com>
Date: Fri, 21 Nov 2025 20:58:46 +0530
Subject: [PATCH 1/4] Enhance Navbar with error dialog and voice search

Added error handling and voice search functionality to the Navbar component.
---
 .../components/Navigation/Navbar/Navbar.tsx   | 290 ++++++++++++++----
 1 file changed, 232 insertions(+), 58 deletions(-)

diff --git a/frontend/src/components/Navigation/Navbar/Navbar.tsx b/frontend/src/components/Navigation/Navbar/Navbar.tsx
index c565b7f6d..b817d2eb1 100644
--- a/frontend/src/components/Navigation/Navbar/Navbar.tsx
+++ b/frontend/src/components/Navigation/Navbar/Navbar.tsx
@@ -1,52 +1,201 @@
-import { Input } from '@/components/ui/input';
-import { ThemeSelector } from '@/components/ThemeToggle';
-import { Search } from 'lucide-react';
-import { useDispatch, useSelector } from 'react-redux';
-import { selectAvatar, selectName } from '@/features/onboardingSelectors';
-import { clearSearch } from '@/features/searchSlice';
-import { convertFileSrc } from '@tauri-apps/api/core';
-import { FaceSearchDialog } from '@/components/Dialog/FaceSearchDialog';
+import React, { useState, useEffect, useRef } from "react";
+import { Input } from "@/components/ui/input";
+import { ThemeSelector } from "@/components/ThemeToggle";
+import { Search, Mic } from "lucide-react";
+import { useDispatch, useSelector } from "react-redux";
+import { selectAvatar, selectName } from "@/features/onboardingSelectors";
+import { clearSearch } from "@/features/searchSlice";
+import { convertFileSrc } from "@tauri-apps/api/core";
+import { FaceSearchDialog } from "@/components/Dialog/FaceSearchDialog";
 
+/* -------------------------------------------------------
+   ERROR DIALOG
+------------------------------------------------------- */
+const ErrorDialog = ({ message, onClose }: { message: string; onClose: () => void }) => (
+  <div className="fixed inset-0 z-[2000] flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
+    <div className="relative w-full max-w-sm rounded-2xl border border-white/20 bg-white p-6 text-center shadow-2xl dark:border-neutral-700/50 dark:bg-neutral-900">
+      <h2 className="mb-2 text-xl font-semibold text-red-600">Error</h2>
+      <p className="text-sm text-neutral-700 dark:text-neutral-300">{message}</p>
+      <button
+        onClick={onClose}
+        className="absolute top-3 right-3 font-bold text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+      >
+        ✕
+      </button>
+    </div>
+  </div>
+);
+
+/* -------------------------------------------------------
+   NAVBAR
+------------------------------------------------------- */
 export function Navbar() {
   const userName = useSelector(selectName);
   const userAvatar = useSelector(selectAvatar);
-
   const searchState = useSelector((state: any) => state.search);
+  const dispatch = useDispatch();
+
   const isSearchActive = searchState.active;
   const queryImage = searchState.queryImage;
 
-  const dispatch = useDispatch();
+  const recognitionRef = useRef<any>(null);
+
+  /* ROUTES */
+  const routeMap: Record<string, string> = {
+    home: "/",
+    albums: "/albums",
+    videos: "/videos",
+    settings: "/settings",
+    "ai-tagging": "/ai-tagging",
+    memories: "/memories",
+    favourites: "/favourites",
+  };
+
+  const suggestionKeys = Object.keys(routeMap);
+
+  /* STATES */
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [voiceOpen, setVoiceOpen] = useState(false);
+  const [voiceText, setVoiceText] = useState("Listening...");
+  const [error, setError] = useState<string | null>(null);
+
+  const filtered =
+    query.length > 0
+      ? suggestionKeys.filter((s) =>
+          s.toLowerCase().includes(query.toLowerCase().replace(/\s+/g, "-"))
+        )
+      : [];
+
+  /* NAVIGATION */
+  const goToPage = (label: string) => {
+    dispatch(clearSearch()); // Prevent face search lock
+    const key = label.trim().toLowerCase().replace(/\s+/g, "-");
+    if (routeMap[key]) {
+      window.location.href = routeMap[key];
+    } else {
+      setError(`The page "${label}" does not exist.`);
+    }
+  };
+
+  /* KEYBOARD SUPPORT */
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!filtered.length) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((prev) => (prev + 1) % filtered.length);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((prev) => (prev <= 0 ? filtered.length - 1 : prev - 1));
+    } else if (e.key === "Enter") {
+      if (activeIndex >= 0) {
+        goToPage(filtered[activeIndex]);
+        setActiveIndex(-1);
+      }
+    }
+  };
+
+  useEffect(() => {
+    setActiveIndex(-1);
+  }, [query]);
+
+  /* -------------------------------------------------------
+     VOICE SEARCH
+------------------------------------------------------- */
+  const startListening = () => {
+    const SR = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
+    if (!SR) {
+      setError("Speech recognition is not supported in your browser.");
+      return;
+    }
+
+    const recog = new SR();
+    recognitionRef.current = recog;
+
+    recog.lang = "en-US";
+    recog.interimResults = false;
+
+    recog.onstart = () => {
+      setVoiceOpen(true);
+      setVoiceText("Listening...");
+    };
+
+    recog.onresult = (e: any) => {
+      const spoken = e.results[0][0].transcript.toLowerCase().trim();
+      setVoiceText(spoken);
+
+      const synonyms: Record<string, string> = {
+        favourite: "favourites",
+        favorites: "favourites",
+        favorite: "favourites",
+        favourites: "favourites",
+        fav: "favourites",
+        playlist: "favourites",
+        memory: "memories",
+        pics: "albums",
+        photos: "albums",
+        pictures: "albums",
+        photo: "albums",
+      };
+
+      let cleaned = spoken.replace(/\s+/g, "-");
+      Object.keys(synonyms).forEach((k) => {
+        if (cleaned.includes(k)) cleaned = synonyms[k];
+      });
+
+      const found = suggestionKeys.find((k) => cleaned.includes(k));
+
+      if (found) {
+        goToPage(found);
+      } else {
+        setError(`No matching page found for "${spoken}".`);
+      }
+
+      setTimeout(() => setVoiceOpen(false), 1000);
+    };
+
+    recog.onerror = () => {
+      setVoiceText("Try again");
+      setTimeout(() => setVoiceOpen(false), 900);
+    };
+
+    recog.start();
+  };
+
+  /* UI */
   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">
-          <img src="/128x128.png" width={32} height={32} alt="PictoPy Logo" />
-          <span className="text-xl font-bold">PictoPy</span>
-        </a>
+    <div className="sticky top-0 z-40 flex h-16 w-full items-center justify-between border-b bg-white/70 px-4 backdrop-blur dark:bg-black/40">
+      {/* LEFT */}
+      <div className="flex w-[256px] items-center gap-2">
+        <img src="/128x128.png" width={32} height={32} alt="PictoPy Logo" />
+        <span className="text-xl font-bold">PictoPy</span>
       </div>
 
-      {/* 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 */}
+      {/* CENTER */}
+      <div className="relative mx-auto flex max-w-xl flex-1 justify-center px-4">
+        <div className="relative flex w-full items-center gap-3 rounded-full bg-neutral-100 px-3 py-1 shadow dark:bg-neutral-800">
+          <Search className="h-5 w-5 text-neutral-500" />
+          <Input
+            type="search"
+            placeholder="Search or say something..."
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            className="flex-1 border-0 bg-transparent"
+          />
+
+          {/* Query image preview */}
           {queryImage && (
-            <div className="relative mr-2 ml-2">
+            <div className="relative">
               <img
-                src={
-                  queryImage?.startsWith('data:')
-                    ? queryImage
-                    : convertFileSrc(queryImage)
-                }
+                src={queryImage.startsWith("data:") ? queryImage : convertFileSrc(queryImage)}
                 alt="Query"
-                className="h-7 w-7 rounded object-cover"
+                className="h-8 w-8 rounded object-cover"
               />
               {isSearchActive && (
                 <button
                   onClick={() => dispatch(clearSearch())}
-                  className="absolute -top-1 -right-1 flex h-3 w-3 items-center justify-center rounded-full bg-red-600 text-[10px] leading-none text-white"
-                  title="Close"
-                  aria-label="Close"
+                  className="absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center text-[10px] text-white bg-red-600 rounded-full"
                 >
                   ✕
                 </button>
@@ -54,43 +203,68 @@ export function Navbar() {
             </div>
           )}
 
-          {/* Input */}
-          <Input
-            type="search"
-            placeholder="Add to your search"
-            className="mr-2 flex-1 border-0 bg-neutral-200"
-          />
-
-          {/* FaceSearch Dialog */}
-
           <FaceSearchDialog />
 
+          {/* MIC */}
           <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"
-            aria-label="Search"
+            onClick={startListening}
+            aria-label="Start voice search"
+            className="z-50 flex items-center justify-center rounded-full bg-purple-600 p-3 shadow-md hover:bg-purple-700"
           >
-            <Search className="h-4 w-4" />
+            <Mic className="h-6 w-6 text-white" />
           </button>
+
+          {/* DROPDOWN */}
+          {filtered.length > 0 && (
+            <div className="absolute top-full left-0 right-0 z-50 mt-1 rounded-xl border bg-white shadow-lg max-h-64 overflow-y-auto dark:bg-neutral-900 dark:border-neutral-700">
+              {filtered.map((key, idx) => (
+                <div
+                  key={key}
+                  className={`cursor-pointer px-4 py-2 capitalize ${
+                    idx === activeIndex
+                      ? "bg-purple-100 text-purple-700 dark:bg-purple-700 dark:text-white"
+                      : "hover:bg-neutral-100 dark:hover:bg-neutral-700"
+                  }`}
+                  onMouseDown={() => goToPage(key)}
+                >
+                  {key}
+                </div>
+              ))}
+            </div>
+          )}
         </div>
       </div>
 
-      {/* Right Side */}
-      <div className="flex items-center space-x-4">
+      {/* RIGHT */}
+      <div className="flex items-center gap-4">
         <ThemeSelector />
-        <div className="flex items-center space-x-2">
-          <span className="hidden text-sm sm:inline-block">
-            Welcome <span className="text-muted-foreground">{userName}</span>
-          </span>
-          <a href="/settings" className="p-2">
-            <img
-              src={userAvatar || '/photo1.png'}
-              className="hover:ring-primary/50 h-8 w-8 cursor-pointer rounded-full transition-all hover:ring-2"
-              alt="User avatar"
-            />
-          </a>
-        </div>
+        <span className="hidden sm:inline text-sm">
+          Welcome <span className="text-muted-foreground">{userName}</span>
+        </span>
+        <a href="/settings">
+          <img
+            src={userAvatar || "/photo1.png"}
+            className="h-9 w-9 rounded-full hover:ring-2 hover:ring-purple-500 transition"
+            alt="User avatar"
+          />
+        </a>
       </div>
+
+      {/* error */}
+      {error && <ErrorDialog message={error} onClose={() => setError(null)} />}
+
+      {/* Voice Modal */}
+      {voiceOpen && (
+        <div className="fixed top-40 left-[256px] right-4 z-[2000] flex justify-center">
+          <div className="w-full max-w-sm p-6 rounded-3xl border bg-white text-center shadow-xl dark:bg-black dark:border-neutral-700/50">
+            <Mic className="h-7 w-7 mx-auto text-purple-600" />
+            <p className="mt-3 text-lg font-medium">{voiceText}</p>
+            <p className="text-sm text-neutral-500">Listening...</p>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
+
+export default Navbar;

From 7af185c9e873e38edf3283f97671edbeb805d945 Mon Sep 17 00:00:00 2001
From: ParikhShreya <shreyaparikh2006@gmail.com>
Date: Sat, 22 Nov 2025 10:09:36 +0530
Subject: [PATCH 2/4] Enhance Navbar with voice command and error handling

Added voice command functionality and improved error handling.
---
 .../components/Navigation/Navbar/Navbar.tsx   | 92 ++++++++++---------
 1 file changed, 51 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/Navigation/Navbar/Navbar.tsx b/frontend/src/components/Navigation/Navbar/Navbar.tsx
index b817d2eb1..f79a6a402 100644
--- a/frontend/src/components/Navigation/Navbar/Navbar.tsx
+++ b/frontend/src/components/Navigation/Navbar/Navbar.tsx
@@ -7,7 +7,7 @@ import { selectAvatar, selectName } from "@/features/onboardingSelectors";
 import { clearSearch } from "@/features/searchSlice";
 import { convertFileSrc } from "@tauri-apps/api/core";
 import { FaceSearchDialog } from "@/components/Dialog/FaceSearchDialog";
-
+import { VoiceCommand } from "@/components/Dialog/VoiceCommand";
 /* -------------------------------------------------------
    ERROR DIALOG
 ------------------------------------------------------- */
@@ -67,10 +67,14 @@ export function Navbar() {
         )
       : [];
 
-  /* NAVIGATION */
+  /* -------------------------------------------------------
+     FIXED: ALWAYS CLEAR SEARCH BEFORE NAVIGATION
+------------------------------------------------------- */
   const goToPage = (label: string) => {
-    dispatch(clearSearch()); // Prevent face search lock
+    dispatch(clearSearch()); // ⭐ CRITICAL FIX ⭐
+
     const key = label.trim().toLowerCase().replace(/\s+/g, "-");
+
     if (routeMap[key]) {
       window.location.href = routeMap[key];
     } else {
@@ -78,9 +82,10 @@ export function Navbar() {
     }
   };
 
-  /* KEYBOARD SUPPORT */
+  /* KEYBOARD HANDLING */
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (!filtered.length) return;
+
     if (e.key === "ArrowDown") {
       e.preventDefault();
       setActiveIndex((prev) => (prev + 1) % filtered.length);
@@ -103,7 +108,10 @@ export function Navbar() {
      VOICE SEARCH
 ------------------------------------------------------- */
   const startListening = () => {
-    const SR = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
+    const SR =
+      (window as any).webkitSpeechRecognition ||
+      (window as any).SpeechRecognition;
+
     if (!SR) {
       setError("Speech recognition is not supported in your browser.");
       return;
@@ -121,29 +129,24 @@ export function Navbar() {
     };
 
     recog.onresult = (e: any) => {
-      const spoken = e.results[0][0].transcript.toLowerCase().trim();
+      const spoken = e.results[0][0].transcript.toLowerCase();
       setVoiceText(spoken);
 
-      const synonyms: Record<string, string> = {
-        favourite: "favourites",
-        favorites: "favourites",
-        favorite: "favourites",
-        favourites: "favourites",
-        fav: "favourites",
-        playlist: "favourites",
-        memory: "memories",
-        pics: "albums",
-        photos: "albums",
-        pictures: "albums",
-        photo: "albums",
-      };
-
-      let cleaned = spoken.replace(/\s+/g, "-");
-      Object.keys(synonyms).forEach((k) => {
-        if (cleaned.includes(k)) cleaned = synonyms[k];
-      });
-
-      const found = suggestionKeys.find((k) => cleaned.includes(k));
+      // PRIORITY: favourites
+      if (
+        spoken.includes("favourite") ||
+        spoken.includes("favorite") ||
+        spoken.includes("favorites") ||
+        spoken.includes("favourites")
+      ) {
+        goToPage("favourites");
+        setTimeout(() => setVoiceOpen(false), 900);
+        return;
+      }
+
+      const found = suggestionKeys.find((k) =>
+        spoken.replace(/\s+/g, "-").includes(k)
+      );
 
       if (found) {
         goToPage(found);
@@ -151,18 +154,20 @@ export function Navbar() {
         setError(`No matching page found for "${spoken}".`);
       }
 
-      setTimeout(() => setVoiceOpen(false), 1000);
+      setTimeout(() => setVoiceOpen(false), 1200);
     };
 
     recog.onerror = () => {
-      setVoiceText("Try again");
-      setTimeout(() => setVoiceOpen(false), 900);
+      setVoiceText("Couldn't understand. Try again.");
+      setTimeout(() => setVoiceOpen(false), 1200);
     };
 
     recog.start();
   };
 
-  /* UI */
+  /* -------------------------------------------------------
+     UI
+------------------------------------------------------- */
   return (
     <div className="sticky top-0 z-40 flex h-16 w-full items-center justify-between border-b bg-white/70 px-4 backdrop-blur dark:bg-black/40">
       {/* LEFT */}
@@ -173,8 +178,9 @@ export function Navbar() {
 
       {/* CENTER */}
       <div className="relative mx-auto flex max-w-xl flex-1 justify-center px-4">
-        <div className="relative flex w-full items-center gap-3 rounded-full bg-neutral-100 px-3 py-1 shadow dark:bg-neutral-800">
+        <div className="relative flex w-full items-center gap-2 rounded-full bg-neutral-100 px-2 py-1 shadow dark:bg-neutral-800">
           <Search className="h-5 w-5 text-neutral-500" />
+
           <Input
             type="search"
             placeholder="Search or say something..."
@@ -184,18 +190,22 @@ export function Navbar() {
             className="flex-1 border-0 bg-transparent"
           />
 
-          {/* Query image preview */}
+          {/* Query Image Preview */}
           {queryImage && (
             <div className="relative">
               <img
-                src={queryImage.startsWith("data:") ? queryImage : convertFileSrc(queryImage)}
+                src={
+                  queryImage.startsWith("data:")
+                    ? queryImage
+                    : convertFileSrc(queryImage)
+                }
                 alt="Query"
                 className="h-8 w-8 rounded object-cover"
               />
               {isSearchActive && (
                 <button
                   onClick={() => dispatch(clearSearch())}
-                  className="absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center text-[10px] text-white bg-red-600 rounded-full"
+                  className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-600 text-[10px] text-white"
                 >
                   ✕
                 </button>
@@ -216,7 +226,7 @@ export function Navbar() {
 
           {/* DROPDOWN */}
           {filtered.length > 0 && (
-            <div className="absolute top-full left-0 right-0 z-50 mt-1 rounded-xl border bg-white shadow-lg max-h-64 overflow-y-auto dark:bg-neutral-900 dark:border-neutral-700">
+            <div className="absolute top-full right-0 left-0 z-50 mt-1 max-h-64 overflow-y-auto rounded-xl border bg-white shadow-lg dark:border-neutral-700 dark:bg-neutral-900">
               {filtered.map((key, idx) => (
                 <div
                   key={key}
@@ -238,25 +248,25 @@ export function Navbar() {
       {/* RIGHT */}
       <div className="flex items-center gap-4">
         <ThemeSelector />
-        <span className="hidden sm:inline text-sm">
+        <span className="hidden text-sm sm:inline">
           Welcome <span className="text-muted-foreground">{userName}</span>
         </span>
         <a href="/settings">
           <img
             src={userAvatar || "/photo1.png"}
+            alt="User"
             className="h-9 w-9 rounded-full hover:ring-2 hover:ring-purple-500 transition"
-            alt="User avatar"
           />
         </a>
       </div>
 
-      {/* error */}
+      {/* ERROR */}
       {error && <ErrorDialog message={error} onClose={() => setError(null)} />}
 
-      {/* Voice Modal */}
+      {/* VOICE MODAL */}
       {voiceOpen && (
-        <div className="fixed top-40 left-[256px] right-4 z-[2000] flex justify-center">
-          <div className="w-full max-w-sm p-6 rounded-3xl border bg-white text-center shadow-xl dark:bg-black dark:border-neutral-700/50">
+        <div className="fixed top-40 right-4 left-[256px] z-[2000] flex justify-center">
+          <div className="relative w-full max-w-sm rounded-3xl border bg-white p-6 text-center shadow-xl dark:bg-black dark:border-neutral-700/50">
             <Mic className="h-7 w-7 mx-auto text-purple-600" />
             <p className="mt-3 text-lg font-medium">{voiceText}</p>
             <p className="text-sm text-neutral-500">Listening...</p>

From 1b37ae3d9b800d18b9fa058a1af326d3cc7ba72b Mon Sep 17 00:00:00 2001
From: ParikhShreya <shreyaparikh2006@gmail.com>
Date: Sat, 22 Nov 2025 10:10:22 +0530
Subject: [PATCH 3/4] Implement VoiceCommand component for speech recognition

---
 .../src/components/Dialog/VoiceCommand.tsx    | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 frontend/src/components/Dialog/VoiceCommand.tsx

diff --git a/frontend/src/components/Dialog/VoiceCommand.tsx b/frontend/src/components/Dialog/VoiceCommand.tsx
new file mode 100644
index 000000000..82b9da6cd
--- /dev/null
+++ b/frontend/src/components/Dialog/VoiceCommand.tsx
@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import { Mic } from "lucide-react";
+
+interface Props {
+  onCommand: (cmd: string) => void;
+}
+
+export function VoiceCommand({ onCommand }: Props) {
+  const [listening, setListening] = useState(false);
+
+  const startListening = () => {
+    const SpeechRecognition =
+      (window as any).SpeechRecognition ||
+      (window as any).webkitSpeechRecognition;
+
+    if (!SpeechRecognition) {
+      alert("Speech recognition not supported in this browser.");
+      return;
+    }
+
+    const recognition = new SpeechRecognition();
+    recognition.continuous = false;
+    recognition.interimResults = false;
+    recognition.lang = "en-US";
+
+    recognition.start();
+    setListening(true);
+
+    recognition.onresult = (event: any) => {
+      const spokenText = event.results[0][0].transcript.toLowerCase().trim();
+      setListening(false);
+
+      console.log("Recognized:", spokenText);
+      onCommand(spokenText); // send recognized speech to navbar
+    };
+
+    recognition.onerror = () => {
+      setListening(false);
+      alert("Try again...");
+    };
+  };
+
+  return (
+    <button
+      onClick={startListening}
+      aria-label="Start voice search"
+      className="z-50 flex items-center justify-center rounded-full bg-purple-600 p-3 shadow-md hover:bg-purple-700 transition"
+    >
+      {listening ? (
+        <span className="text-white text-[10px] font-semibold">Listening...</span>
+      ) : (
+        <Mic className="h-5 w-5 text-white" />
+      )}
+    </button>
+  );
+}

From 7bc639df4ed95b9070797319027403d903d46941 Mon Sep 17 00:00:00 2001
From: ParikhShreya <shreyaparikh2006@gmail.com>
Date: Sat, 22 Nov 2025 10:44:10 +0530
Subject: [PATCH 4/4] Refactor Navbar and ErrorDialog components

Refactor ErrorDialog and Navbar components for improved styling and functionality. Adjust voice search handling and cleanup code structure.
---
 .../components/Navigation/Navbar/Navbar.tsx   | 173 ++++++------------
 1 file changed, 57 insertions(+), 116 deletions(-)

diff --git a/frontend/src/components/Navigation/Navbar/Navbar.tsx b/frontend/src/components/Navigation/Navbar/Navbar.tsx
index f79a6a402..bc97d539c 100644
--- a/frontend/src/components/Navigation/Navbar/Navbar.tsx
+++ b/frontend/src/components/Navigation/Navbar/Navbar.tsx
@@ -12,16 +12,11 @@ import { VoiceCommand } from "@/components/Dialog/VoiceCommand";
    ERROR DIALOG
 ------------------------------------------------------- */
 const ErrorDialog = ({ message, onClose }: { message: string; onClose: () => void }) => (
-  <div className="fixed inset-0 z-[2000] flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
-    <div className="relative w-full max-w-sm rounded-2xl border border-white/20 bg-white p-6 text-center shadow-2xl dark:border-neutral-700/50 dark:bg-neutral-900">
+  <div className="fixed inset-0 z-[2000] flex items-center justify-center bg-black/50 p-4 backdrop-blur-md">
+    <div className="relative w-full max-w-sm rounded-2xl border bg-white dark:bg-neutral-900 p-6 shadow-xl">
+      <button onClick={onClose} className="absolute top-2 right-3 text-xl font-bold">✕</button>
       <h2 className="mb-2 text-xl font-semibold text-red-600">Error</h2>
       <p className="text-sm text-neutral-700 dark:text-neutral-300">{message}</p>
-      <button
-        onClick={onClose}
-        className="absolute top-3 right-3 font-bold text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
-      >
-        ✕
-      </button>
     </div>
   </div>
 );
@@ -40,7 +35,6 @@ export function Navbar() {
 
   const recognitionRef = useRef<any>(null);
 
-  /* ROUTES */
   const routeMap: Record<string, string> = {
     home: "/",
     albums: "/albums",
@@ -53,7 +47,6 @@ export function Navbar() {
 
   const suggestionKeys = Object.keys(routeMap);
 
-  /* STATES */
   const [query, setQuery] = useState("");
   const [activeIndex, setActiveIndex] = useState(-1);
   const [voiceOpen, setVoiceOpen] = useState(false);
@@ -67,12 +60,8 @@ export function Navbar() {
         )
       : [];
 
-  /* -------------------------------------------------------
-     FIXED: ALWAYS CLEAR SEARCH BEFORE NAVIGATION
-------------------------------------------------------- */
   const goToPage = (label: string) => {
-    dispatch(clearSearch()); // ⭐ CRITICAL FIX ⭐
-
+    dispatch(clearSearch());
     const key = label.trim().toLowerCase().replace(/\s+/g, "-");
 
     if (routeMap[key]) {
@@ -82,7 +71,6 @@ export function Navbar() {
     }
   };
 
-  /* KEYBOARD HANDLING */
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (!filtered.length) return;
 
@@ -92,55 +80,46 @@ export function Navbar() {
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
       setActiveIndex((prev) => (prev <= 0 ? filtered.length - 1 : prev - 1));
-    } else if (e.key === "Enter") {
-      if (activeIndex >= 0) {
-        goToPage(filtered[activeIndex]);
-        setActiveIndex(-1);
-      }
+    } else if (e.key === "Enter" && activeIndex >= 0) {
+      goToPage(filtered[activeIndex]);
+      setActiveIndex(-1);
     }
   };
 
-  useEffect(() => {
-    setActiveIndex(-1);
-  }, [query]);
+  useEffect(() => setActiveIndex(-1), [query]);
 
-  /* -------------------------------------------------------
-     VOICE SEARCH
-------------------------------------------------------- */
   const startListening = () => {
+    setVoiceOpen(true);
+    setQuery("");       // HIDE suggestions
+    setActiveIndex(-1); // RESET dropdown selection
+
     const SR =
       (window as any).webkitSpeechRecognition ||
       (window as any).SpeechRecognition;
 
     if (!SR) {
       setError("Speech recognition is not supported in your browser.");
+      setVoiceOpen(false);
       return;
     }
 
     const recog = new SR();
     recognitionRef.current = recog;
-
     recog.lang = "en-US";
     recog.interimResults = false;
 
-    recog.onstart = () => {
-      setVoiceOpen(true);
-      setVoiceText("Listening...");
-    };
-
     recog.onresult = (e: any) => {
       const spoken = e.results[0][0].transcript.toLowerCase();
       setVoiceText(spoken);
 
-      // PRIORITY: favourites
       if (
-        spoken.includes("favourite") ||
         spoken.includes("favorite") ||
+        spoken.includes("favourite") ||
         spoken.includes("favorites") ||
         spoken.includes("favourites")
       ) {
         goToPage("favourites");
-        setTimeout(() => setVoiceOpen(false), 900);
+        setTimeout(() => setVoiceOpen(false), 800);
         return;
       }
 
@@ -148,128 +127,90 @@ export function Navbar() {
         spoken.replace(/\s+/g, "-").includes(k)
       );
 
-      if (found) {
-        goToPage(found);
-      } else {
-        setError(`No matching page found for "${spoken}".`);
-      }
-
-      setTimeout(() => setVoiceOpen(false), 1200);
+      found ? goToPage(found) : setError(`No matching page found for "${spoken}".`);
+      setTimeout(() => setVoiceOpen(false), 1000);
     };
 
     recog.onerror = () => {
-      setVoiceText("Couldn't understand. Try again.");
-      setTimeout(() => setVoiceOpen(false), 1200);
+      setVoiceText("Try again");
+      setTimeout(() => setVoiceOpen(false), 800);
     };
 
     recog.start();
   };
 
-  /* -------------------------------------------------------
-     UI
-------------------------------------------------------- */
   return (
-    <div className="sticky top-0 z-40 flex h-16 w-full items-center justify-between border-b bg-white/70 px-4 backdrop-blur dark:bg-black/40">
-      {/* LEFT */}
-      <div className="flex w-[256px] items-center gap-2">
-        <img src="/128x128.png" width={32} height={32} alt="PictoPy Logo" />
+    <div className="sticky top-0 z-50 flex h-14 w-full items-center justify-between border-b bg-white/60 px-4 backdrop-blur-md dark:bg-black/60">
+      <a href="/" className="flex items-center gap-2">
+        <img src="/128x128.png" width={32} height={32} />
         <span className="text-xl font-bold">PictoPy</span>
-      </div>
+      </a>
 
-      {/* CENTER */}
-      <div className="relative mx-auto flex max-w-xl flex-1 justify-center px-4">
-        <div className="relative flex w-full items-center gap-2 rounded-full bg-neutral-100 px-2 py-1 shadow dark:bg-neutral-800">
+      <div className="relative mx-auto w-full max-w-lg flex-1">
+        <div className="flex items-center gap-2 rounded-full bg-neutral-100 px-3 py-1 shadow dark:bg-neutral-800">
           <Search className="h-5 w-5 text-neutral-500" />
 
           <Input
-            type="search"
-            placeholder="Search or say something..."
+            placeholder="Search or speak…"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             onKeyDown={handleKeyDown}
-            className="flex-1 border-0 bg-transparent"
+            className="flex-1 border-0 bg-transparent focus-visible:ring-0"
           />
 
-          {/* Query Image Preview */}
-          {queryImage && (
-            <div className="relative">
-              <img
-                src={
-                  queryImage.startsWith("data:")
-                    ? queryImage
-                    : convertFileSrc(queryImage)
-                }
-                alt="Query"
-                className="h-8 w-8 rounded object-cover"
-              />
-              {isSearchActive && (
-                <button
-                  onClick={() => dispatch(clearSearch())}
-                  className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-600 text-[10px] text-white"
-                >
-                  ✕
-                </button>
-              )}
-            </div>
-          )}
-
           <FaceSearchDialog />
 
-          {/* MIC */}
           <button
             onClick={startListening}
-            aria-label="Start voice search"
-            className="z-50 flex items-center justify-center rounded-full bg-purple-600 p-3 shadow-md hover:bg-purple-700"
+            className="rounded-full bg-purple-600 p-2 hover:bg-purple-700"
           >
-            <Mic className="h-6 w-6 text-white" />
+            <Mic className="h-5 w-5 text-white" />
           </button>
-
-          {/* DROPDOWN */}
-          {filtered.length > 0 && (
-            <div className="absolute top-full right-0 left-0 z-50 mt-1 max-h-64 overflow-y-auto rounded-xl border bg-white shadow-lg dark:border-neutral-700 dark:bg-neutral-900">
-              {filtered.map((key, idx) => (
-                <div
-                  key={key}
-                  className={`cursor-pointer px-4 py-2 capitalize ${
-                    idx === activeIndex
-                      ? "bg-purple-100 text-purple-700 dark:bg-purple-700 dark:text-white"
-                      : "hover:bg-neutral-100 dark:hover:bg-neutral-700"
-                  }`}
-                  onMouseDown={() => goToPage(key)}
-                >
-                  {key}
-                </div>
-              ))}
-            </div>
-          )}
         </div>
+
+        {/* Suggestions appear ONLY if voice dialog is closed */}
+        {!voiceOpen && filtered.length > 0 && (
+          <div className="absolute top-full w-full z-50 mt-1 rounded-xl border bg-white shadow-xl dark:bg-neutral-900">
+            {filtered.map((key, idx) => (
+              <div
+                key={key}
+                onMouseDown={() => goToPage(key)}
+                className={`px-4 py-2 cursor-pointer capitalize ${
+                  idx === activeIndex
+                    ? "bg-purple-200 dark:bg-purple-700"
+                    : "hover:bg-neutral-200 dark:hover:bg-neutral-700"
+                }`}
+              >
+                {key}
+              </div>
+            ))}
+          </div>
+        )}
       </div>
 
-      {/* RIGHT */}
-      <div className="flex items-center gap-4">
+      <div className="flex items-center gap-3">
         <ThemeSelector />
-        <span className="hidden text-sm sm:inline">
+        <span className="hidden sm:inline text-sm">
           Welcome <span className="text-muted-foreground">{userName}</span>
         </span>
         <a href="/settings">
           <img
             src={userAvatar || "/photo1.png"}
-            alt="User"
-            className="h-9 w-9 rounded-full hover:ring-2 hover:ring-purple-500 transition"
+            className="h-8 w-8 rounded-full hover:ring-2 hover:ring-purple-500"
           />
         </a>
       </div>
 
-      {/* ERROR */}
       {error && <ErrorDialog message={error} onClose={() => setError(null)} />}
 
-      {/* VOICE MODAL */}
       {voiceOpen && (
-        <div className="fixed top-40 right-4 left-[256px] z-[2000] flex justify-center">
-          <div className="relative w-full max-w-sm rounded-3xl border bg-white p-6 text-center shadow-xl dark:bg-black dark:border-neutral-700/50">
+        <div className="fixed top-28 left-0 right-0 flex justify-center z-[2000]">
+          <div className="relative max-w-sm w-full rounded-3xl p-6 bg-white border shadow-xl dark:bg-neutral-900">
+            <button className="absolute top-3 right-4 text-xl font-bold" onClick={() => setVoiceOpen(false)}>
+              ✕
+            </button>
             <Mic className="h-7 w-7 mx-auto text-purple-600" />
-            <p className="mt-3 text-lg font-medium">{voiceText}</p>
-            <p className="text-sm text-neutral-500">Listening...</p>
+            <p className="mt-3 text-lg font-medium text-center">{voiceText}</p>
           </div>
         </div>
       )}