From f61688cac828dd136b45d0b6f9dcb53e4706a6de Mon Sep 17 00:00:00 2001
From: Nishal Poojary <nishalpoojary09@gmail.com>
Date: Wed, 19 Nov 2025 15:57:11 +0530
Subject: [PATCH 1/3] feat: add tooltips to navbar elements

---
 .../components/Navigation/Navbar/Navbar.tsx   | 83 +++++++++++++------
 frontend/src/components/ThemeToggle.tsx       | 83 +++++++++++--------
 2 files changed, 105 insertions(+), 61 deletions(-)

diff --git a/frontend/src/components/Navigation/Navbar/Navbar.tsx b/frontend/src/components/Navigation/Navbar/Navbar.tsx
index c565b7f6d..d369b3f0b 100644
--- a/frontend/src/components/Navigation/Navbar/Navbar.tsx
+++ b/frontend/src/components/Navigation/Navbar/Navbar.tsx
@@ -6,6 +6,11 @@ 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 {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 
 export function Navbar() {
   const userName = useSelector(selectName);
@@ -42,14 +47,20 @@ export function Navbar() {
                 className="h-7 w-7 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"
-                >
-                  ✕
-                </button>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <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"
+                      aria-label="Close"
+                    >
+                      ✕
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Clear search</p>
+                  </TooltipContent>
+                </Tooltip>
               )}
             </div>
           )}
@@ -62,16 +73,31 @@ export function Navbar() {
           />
 
           {/* FaceSearch Dialog */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div>
+                <FaceSearchDialog />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Search by face</p>
+            </TooltipContent>
+          </Tooltip>
 
-          <FaceSearchDialog />
-
-          <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"
-          >
-            <Search className="h-4 w-4" />
-          </button>
+          {/* Search Button */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                className="text-muted-foreground hover:bg-accent dark:hover:bg-accent/50 hover:text-foreground mx-1 cursor-pointer rounded-sm p-2"
+                aria-label="Search"
+              >
+                <Search className="h-4 w-4" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Search images</p>
+            </TooltipContent>
+          </Tooltip>
         </div>
       </div>
 
@@ -82,15 +108,22 @@ export function Navbar() {
           <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>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <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>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Profile settings</p>
+            </TooltipContent>
+          </Tooltip>
         </div>
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/ThemeToggle.tsx b/frontend/src/components/ThemeToggle.tsx
index a21d592ee..3bea0f992 100644
--- a/frontend/src/components/ThemeToggle.tsx
+++ b/frontend/src/components/ThemeToggle.tsx
@@ -7,46 +7,57 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { useTheme } from '@/contexts/ThemeContext';
 
 export function ThemeSelector() {
   const { setTheme } = useTheme();
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          className="cursor-pointer"
-          variant="outline"
-          size="icon"
-          title="Themes"
-          aria-label="themes"
-        >
-          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem
-          className="cursor-pointer"
-          onClick={() => setTheme('light')}
-        >
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          className="cursor-pointer"
-          onClick={() => setTheme('dark')}
-        >
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          className="cursor-pointer"
-          onClick={() => setTheme('system')}
-        >
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              className="cursor-pointer"
+              variant="outline"
+              size="icon"
+              aria-label="Toggle theme"
+            >
+              <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+              <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+              <span className="sr-only">Toggle theme</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={() => setTheme('light')}
+            >
+              Light
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={() => setTheme('dark')}
+            >
+              Dark
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={() => setTheme('system')}
+            >
+              System
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Toggle theme</p>
+      </TooltipContent>
+    </Tooltip>
   );
-}
+}
\ No newline at end of file

From 7963b8fca7a301f685f5cd22555ed4bccdd4c2d1 Mon Sep 17 00:00:00 2001
From: Nishal Poojary <nishalpoojary09@gmail.com>
Date: Wed, 19 Nov 2025 16:16:48 +0530
Subject: [PATCH 2/3] fix: move tooltip inside FaceSearchDialog for proper
 interaction

---
 .../components/Dialog/FaceSearchDialog.tsx    | 41 ++++++++++++-------
 .../components/Navigation/Navbar/Navbar.tsx   | 11 +----
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/Dialog/FaceSearchDialog.tsx b/frontend/src/components/Dialog/FaceSearchDialog.tsx
index 6adab5794..b16d215f8 100644
--- a/frontend/src/components/Dialog/FaceSearchDialog.tsx
+++ b/frontend/src/components/Dialog/FaceSearchDialog.tsx
@@ -9,6 +9,11 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { useDispatch } from 'react-redux';
 import { useFile } from '@/hooks/selectFile';
 import { startSearch, clearSearch } from '@/features/searchSlice';
@@ -43,7 +48,7 @@ export function FaceSearchDialog() {
           showInfoDialog({
             title: 'No Matches Found',
             message:
-              'We couldn’t find any matching faces in your gallery for this photo.',
+               "We couldn't find any matching faces in your gallery for this photo.",
             variant: 'info',
           }),
         );
@@ -91,21 +96,29 @@ export function FaceSearchDialog() {
   return (
     <>
       <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <DialogTrigger asChild>
-          <Button
-            onClick={() => setIsDialogOpen(true)}
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8 cursor-pointer p-1"
-          >
-            <ScanFace className="h-4 w-4" />
-            <span className="sr-only">Face Detection Search</span>
-          </Button>
-        </DialogTrigger>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DialogTrigger asChild>
+              <Button
+                onClick={() => setIsDialogOpen(true)}
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 cursor-pointer p-1"
+                aria-label="Search by face"
+              >
+                <ScanFace className="h-4 w-4" />
+                <span className="sr-only">Search by face</span>
+              </Button>
+            </DialogTrigger>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Search by face</p>
+          </TooltipContent>
+        </Tooltip>
 
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
-            <DialogTitle>Face Detection Search</DialogTitle>
+            <DialogTitle>Search by Face</DialogTitle>
             <DialogDescription>
               Search for images containing specific faces by uploading a photo
               or using your webcam.
@@ -150,4 +163,4 @@ export function FaceSearchDialog() {
       />
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/Navigation/Navbar/Navbar.tsx b/frontend/src/components/Navigation/Navbar/Navbar.tsx
index d369b3f0b..904e78648 100644
--- a/frontend/src/components/Navigation/Navbar/Navbar.tsx
+++ b/frontend/src/components/Navigation/Navbar/Navbar.tsx
@@ -73,16 +73,7 @@ export function Navbar() {
           />
 
           {/* FaceSearch Dialog */}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div>
-                <FaceSearchDialog />
-              </div>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Search by face</p>
-            </TooltipContent>
-          </Tooltip>
+          <FaceSearchDialog />
 
           {/* Search Button */}
           <Tooltip>

From 9632189403a8a5555ba1e475d2c3e909fcea89ad Mon Sep 17 00:00:00 2001
From: Nishal Poojary <nishalpoojary09@gmail.com>
Date: Wed, 19 Nov 2025 16:26:57 +0530
Subject: [PATCH 3/3] fix: remove redundant onClick handler from DialogTrigger

---
 frontend/src/components/Dialog/FaceSearchDialog.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Dialog/FaceSearchDialog.tsx b/frontend/src/components/Dialog/FaceSearchDialog.tsx
index b16d215f8..6330318c1 100644
--- a/frontend/src/components/Dialog/FaceSearchDialog.tsx
+++ b/frontend/src/components/Dialog/FaceSearchDialog.tsx
@@ -48,7 +48,7 @@ export function FaceSearchDialog() {
           showInfoDialog({
             title: 'No Matches Found',
             message:
-               "We couldn't find any matching faces in your gallery for this photo.",
+              "We couldn't find any matching faces in your gallery for this photo.",
             variant: 'info',
           }),
         );
@@ -100,7 +100,6 @@ export function FaceSearchDialog() {
           <TooltipTrigger asChild>
             <DialogTrigger asChild>
               <Button
-                onClick={() => setIsDialogOpen(true)}
                 variant="ghost"
                 size="icon"
                 className="h-8 w-8 cursor-pointer p-1"
@@ -163,4 +162,4 @@ export function FaceSearchDialog() {
       />
     </>
   );
-}
\ No newline at end of file
+}