From c77e5f24ff1896eb5dd0d3fd45e6da49b3c24c65 Mon Sep 17 00:00:00 2001
From: Prince gupta <princegupta8094@gmail.com>
Date: Sat, 13 Dec 2025 18:09:08 +0530
Subject: [PATCH 1/4] Added accessible hover tooltips for the Face Scanner and
 Profile icons to improve discoverability and reduce accidental clicks.

---
 README.md                                     |  3 +
 frontend/src/components/Media/ImageCard.tsx   |  2 +-
 .../components/Navigation/Navbar/Navbar.tsx   | 45 +++++++++---
 landing-page/src/components/ui/Features.tsx   | 71 +++++++++++++++----
 4 files changed, 100 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index 595889480..edf2b49d7 100644
--- a/README.md
+++ b/README.md
@@ -63,3 +63,6 @@ Handles file system operations and provides a secure bridge between the frontend
 ---
 
 Our Code of Conduct: [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md)
+
+Gallery feature cards expand only after an intentional hover on desktop to prevent accidental interactions. Hover effects are disabled on touch devices.
+
diff --git a/frontend/src/components/Media/ImageCard.tsx b/frontend/src/components/Media/ImageCard.tsx
index 0cc6a715a..a6ce358be 100644
--- a/frontend/src/components/Media/ImageCard.tsx
+++ b/frontend/src/components/Media/ImageCard.tsx
@@ -102,4 +102,4 @@ export function ImageCard({
       </div>
     </div>
   );
-}
+}
\ 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 c565b7f6d..ef28b7898 100644
--- a/frontend/src/components/Navigation/Navbar/Navbar.tsx
+++ b/frontend/src/components/Navigation/Navbar/Navbar.tsx
@@ -1,3 +1,10 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+
 import { Input } from '@/components/ui/input';
 import { ThemeSelector } from '@/components/ThemeToggle';
 import { Search } from 'lucide-react';
@@ -63,7 +70,19 @@ export function Navbar() {
 
           {/* FaceSearch Dialog */}
 
-          <FaceSearchDialog />
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div>
+                  <FaceSearchDialog />
+                </div>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                <span>Face Scanner</span>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
 
           <button
             className="text-muted-foreground hover:bg-accent dark:hover:bg-accent/50 hover:text-foreground mx-1 cursor-pointer rounded-sm p-2"
@@ -82,13 +101,23 @@ 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>
+          <TooltipProvider>
+            <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 side="bottom">
+                <span>Profile</span>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
         </div>
       </div>
     </div>
diff --git a/landing-page/src/components/ui/Features.tsx b/landing-page/src/components/ui/Features.tsx
index eb4f33004..7462a4958 100644
--- a/landing-page/src/components/ui/Features.tsx
+++ b/landing-page/src/components/ui/Features.tsx
@@ -53,35 +53,82 @@ const features: Feature[] = [
 ];
 
 // FeatureCard component
+import { useRef, useState, useEffect } from "react";
+import { motion } from "framer-motion";
+
+// Assuming Feature type is defined elsewhere or imported
+// interface Feature { ... }
+
 const FeatureCard = ({ feature }: { feature: Feature }) => {
-  // Define size classes with a default value for undefined sizes
   const sizeClasses = {
     large: "md:col-span-2",
     medium: "md:col-span-2",
     small: "md:col-span-1",
   };
 
-  // Use the feature's size or default to "small" if undefined
   const sizeClass = sizeClasses[feature.size || "small"];
 
+  const hoverTimer = useRef<number | null>(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  // Clean Up: Detect touch capability safely for SSR/Hybrid devices
+  // Ideally, rely on the delay logic, but this prevents touch-emulation triggers
+  const isTouchDevice = () => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(hover: none)").matches;
+  };
+
+  const handleMouseEnter = () => {
+    if (isTouchDevice()) return;
+
+    // Logic: Only trigger state after 1 second of "intent"
+    hoverTimer.current = window.setTimeout(() => {
+      setIsHovered(true);
+    }, 1000); 
+  };
+
+  const handleMouseLeave = () => {
+    if (hoverTimer.current) {
+      clearTimeout(hoverTimer.current);
+      hoverTimer.current = null;
+    }
+    setIsHovered(false);
+  };
+
   return (
     <motion.div
       className={`group ${sizeClass} h-full`}
-      whileHover={{ scale: 1.02 }}
       initial={{ opacity: 0, y: 20 }}
       whileInView={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.5 }}
+      // Scale is controlled by state, ensuring it syncs with the delay
+      animate={isHovered ? { scale: 1.02 } : { scale: 1 }}
+      transition={{ duration: 0.3 }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
     >
       <div
-        className="relative h-full rounded-2xl bg-white dark:bg-[#161717] 
-        border-2 border-transparent p-6 transition-all duration-300
-        hover:border-blue-600 dark:hover:border-blue-600
-        hover:shadow-[0_0_15px_rgba(30,64,175,0.9)] dark:hover:shadow-[0_0_22px_rgba(30,64,179,1)]"
+        // CHANGED: Removed 'hover:border-...' and 'hover:shadow-...'
+        // Moved styling to the conditional string below to prevent instant flashing.
+        className={`relative h-full rounded-2xl bg-white dark:bg-[#161717] 
+        border-2 p-6 transition-all duration-300 cursor-pointer
+        ${
+          isHovered
+            ? "border-blue-600 shadow-[0_0_15px_rgba(30,64,175,0.9)] dark:shadow-[0_0_22px_rgba(30,64,179,1)]"
+            : "border-transparent"
+        }`}
       >
-        <div className="mb-4 text-gray-800 dark:text-gray-200">{feature.icon}</div>
-        <h3 className="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">{feature.title}</h3>
-        <p className="text-gray-600 dark:text-gray-300 mb-4">{feature.description}</p>
-        <p className="text-sm text-gray-500 dark:text-gray-400">{feature.details}</p>
+        <div className="mb-4 text-gray-800 dark:text-gray-200">
+          {feature.icon}
+        </div>
+        <h3 className="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">
+          {feature.title}
+        </h3>
+        <p className="text-gray-600 dark:text-gray-300 mb-4">
+          {feature.description}
+        </p>
+        <p className="text-sm text-gray-500 dark:text-gray-400">
+          {feature.details}
+        </p>
       </div>
     </motion.div>
   );

From e2911ddfdd08e3ddea080debbb44be161b959568 Mon Sep 17 00:00:00 2001
From: Prince gupta <princegupta8094@gmail.com>
Date: Sat, 13 Dec 2025 18:54:23 +0530
Subject: [PATCH 2/4] Update README.md and ImageCard.tsx for improved
 documentation and code clarity


From 4aadcd24e39e877c87b1e766077944e4e3f12ab6 Mon Sep 17 00:00:00 2001
From: Prince gupta <princegupta8094@gmail.com>
Date: Sat, 13 Dec 2025 19:44:17 +0530
Subject: [PATCH 3/4] Gallery feature cards expand only after an intentional
 hover on desktop to prevent accidental interactions. Hover effects are
 disabled on touch devices.

---
 landing-page/src/components/ui/Features.tsx | 30 +++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/landing-page/src/components/ui/Features.tsx b/landing-page/src/components/ui/Features.tsx
index 7462a4958..b4aed3585 100644
--- a/landing-page/src/components/ui/Features.tsx
+++ b/landing-page/src/components/ui/Features.tsx
@@ -53,12 +53,18 @@ const features: Feature[] = [
 ];
 
 // FeatureCard component
+<<<<<<< HEAD
 import { useRef, useState, useEffect } from "react";
 import { motion } from "framer-motion";
 
 // Assuming Feature type is defined elsewhere or imported
 // interface Feature { ... }
 
+=======
+import { useRef, useState } from "react";
+import { motion } from "framer-motion";
+
+>>>>>>> 2a16307 (Gallery feature cards expand only after an intentional hover on desktop to prevent accidental interactions. Hover effects are disabled on touch devices.)
 const FeatureCard = ({ feature }: { feature: Feature }) => {
   const sizeClasses = {
     large: "md:col-span-2",
@@ -71,6 +77,7 @@ const FeatureCard = ({ feature }: { feature: Feature }) => {
   const hoverTimer = useRef<number | null>(null);
   const [isHovered, setIsHovered] = useState(false);
 
+<<<<<<< HEAD
   // Clean Up: Detect touch capability safely for SSR/Hybrid devices
   // Ideally, rely on the delay logic, but this prevents touch-emulation triggers
   const isTouchDevice = () => {
@@ -85,6 +92,18 @@ const FeatureCard = ({ feature }: { feature: Feature }) => {
     hoverTimer.current = window.setTimeout(() => {
       setIsHovered(true);
     }, 1000); 
+=======
+  const isTouchDevice =
+    typeof window !== "undefined" &&
+    ("ontouchstart" in window || navigator.maxTouchPoints > 0);
+
+  const handleMouseEnter = () => {
+    if (isTouchDevice) return;
+
+    hoverTimer.current = window.setTimeout(() => {
+      setIsHovered(true);
+    }, 1000); // 1s intentional hover
+>>>>>>> 2a16307 (Gallery feature cards expand only after an intentional hover on desktop to prevent accidental interactions. Hover effects are disabled on touch devices.)
   };
 
   const handleMouseLeave = () => {
@@ -100,13 +119,17 @@ const FeatureCard = ({ feature }: { feature: Feature }) => {
       className={`group ${sizeClass} h-full`}
       initial={{ opacity: 0, y: 20 }}
       whileInView={{ opacity: 1, y: 0 }}
+<<<<<<< HEAD
       // Scale is controlled by state, ensuring it syncs with the delay
+=======
+>>>>>>> 2a16307 (Gallery feature cards expand only after an intentional hover on desktop to prevent accidental interactions. Hover effects are disabled on touch devices.)
       animate={isHovered ? { scale: 1.02 } : { scale: 1 }}
       transition={{ duration: 0.3 }}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
       <div
+<<<<<<< HEAD
         // CHANGED: Removed 'hover:border-...' and 'hover:shadow-...'
         // Moved styling to the conditional string below to prevent instant flashing.
         className={`relative h-full rounded-2xl bg-white dark:bg-[#161717] 
@@ -116,6 +139,13 @@ const FeatureCard = ({ feature }: { feature: Feature }) => {
             ? "border-blue-600 shadow-[0_0_15px_rgba(30,64,175,0.9)] dark:shadow-[0_0_22px_rgba(30,64,179,1)]"
             : "border-transparent"
         }`}
+=======
+        className="relative h-full rounded-2xl bg-white dark:bg-[#161717] 
+        border-2 border-transparent p-6 transition-all duration-300
+        hover:border-blue-600 dark:hover:border-blue-600
+        hover:shadow-[0_0_15px_rgba(30,64,175,0.9)] dark:hover:shadow-[0_0_22px_rgba(30,64,179,1)]
+        cursor-pointer"
+>>>>>>> 2a16307 (Gallery feature cards expand only after an intentional hover on desktop to prevent accidental interactions. Hover effects are disabled on touch devices.)
       >
         <div className="mb-4 text-gray-800 dark:text-gray-200">
           {feature.icon}

From 581418f7760b3a0a090d6810a58d61799d9fddd2 Mon Sep 17 00:00:00 2001
From: Prince gupta <princegupta8094@gmail.com>
Date: Sat, 13 Dec 2025 20:13:15 +0530
Subject: [PATCH 4/4] Update folder setup onboarding step

---
 .../OnboardingSteps/FolderSetupStep.tsx       | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/frontend/src/components/OnboardingSteps/FolderSetupStep.tsx b/frontend/src/components/OnboardingSteps/FolderSetupStep.tsx
index e76c1079a..0d8685704 100644
--- a/frontend/src/components/OnboardingSteps/FolderSetupStep.tsx
+++ b/frontend/src/components/OnboardingSteps/FolderSetupStep.tsx
@@ -29,6 +29,8 @@ export function FolderSetupStep({
 
   // Local state for folders
   const [folder, setFolder] = useState<string>('');
+  const [error, setError] = useState<string>('');
+
 
   useEffect(() => {
     if (localStorage.getItem('folderChosen') === 'true') {
@@ -44,19 +46,30 @@ export function FolderSetupStep({
     const selectedFolder = await pickSingleFolder();
     if (selectedFolder) {
       setFolder(selectedFolder);
+      setError('');
     }
   };
 
+
   const handleRemoveFolder = () => {
     setFolder('');
+    setError('Please select at least one folder to continue.');
   };
 
+
   const handleNext = () => {
+    if (!folder) {
+      setError('Please select at least one folder to continue.');
+      return;
+    }
+
+    setError('');
     localStorage.setItem('folderChosen', 'true');
     addFolderMutate(folder);
     dispatch(markCompleted(stepIndex));
   };
 
+
   const handleBack = () => {
     dispatch(previousStep());
   };
@@ -132,6 +145,12 @@ export function FolderSetupStep({
               </div>
             </div>
           )}
+          {error && (
+            <p className="text-destructive text-sm font-medium">
+              {error}
+            </p>
+          )}
+
         </CardContent>
 
         <CardFooter className="flex justify-between p-3">
@@ -144,10 +163,12 @@ export function FolderSetupStep({
           </Button>
           <Button
             onClick={handleNext}
+            disabled={!folder}
             className="cursor-pointer px-4 py-1 text-sm"
           >
             Next
           </Button>
+
         </CardFooter>
       </Card>