[UI/UX] Final touches before deployment.

backend/app/models/file_model.py

@@ -15,7 +15,7 @@ class File(Base):
     ip_address = Column(String, nullable=True)
     
     owner_id = Column(Integer, ForeignKey("users.id"))
-    created_at = Column(DateTime, default=datetime.now(UTC))
+    created_at = Column(DateTime, default=lambda: datetime.now(UTC))
     
     status = Column(String, default="uploaded")
     result = Column(String, nullable=True)

backend/app/models/user_model.py

@@ -12,7 +12,7 @@ class User(Base):
     password = Column(String, nullable=True)
     oauth_provider = Column(String, nullable=True)
     oauth_sub_id = Column(String, unique=True, nullable=True)
-    created_at = Column(DateTime, default=datetime.now(UTC))
+    created_at = Column(DateTime, default=lambda: datetime.now(UTC))
     reset_token_hash = Column(String, nullable=True)
     reset_token_expire_at = Column(DateTime, nullable=True)
     is_verified = Column(Boolean, default=False)

frontend/app/dashboard/page.tsx

@@ -96,10 +96,28 @@ export default function DashboardPage() {
                 return confB - confA;
             }
         });
-
         return result;
     }, [files, searchQuery, sortBy, resultFilter]);
 
+    useEffect(() => {
+        const handleDragOver = (e: DragEvent) => {
+            e.preventDefault();
+            if (!isUploadModalOpen) setIsUploadModalOpen(true);
+        };
+        const handleEsc = (event: KeyboardEvent) => {
+            if (event.key === 'Escape' && isUploadModalOpen) {
+                setIsUploadModalOpen(false);
+            }
+        };
+        
+        window.addEventListener('dragover', handleDragOver);
+        document.addEventListener('keydown', handleEsc);
+        return () => {
+            window.removeEventListener('dragover', handleDragOver);
+            document.removeEventListener('keydown', handleEsc);
+        }
+    }, [isUploadModalOpen]);
+
     // Cursor handled globally (CustomCursor.tsx)
     // Local Parallax for Dash Grid
     useEffect(() => {

frontend/app/learn-more/page.tsx

@@ -75,7 +75,7 @@ export default function LearnMorePage() {
                         <div>
                             <h2 className="text-2xl font-bold mb-4">1. Uploading Media</h2>
                             <p className="text-[var(--theme-text)]/70 leading-relaxed text-lg">
-                                Click the <strong className="text-[var(--theme-text)]">Analyze Media</strong> button on the top right of the navigation bar, or from the Landing Page. A secure uplink zone will appear. You can drag and drop your images or videos (MP4, WEBM, JPG, PNG) directly into this zone.
+                                <strong className="text-[var(--theme-text)]">Drag and Drop</strong> your <strong className="text-[var(--theme-text)]">Media</strong> anywhere, <strong className="text-[var(--theme-text)]">OR</strong> click the <strong className="text-[var(--theme-text)]">Analyze Media</strong> button on the top right of the navigation bar, or from the Landing Page. An upload zone box will appear. You can drag and drop your images or videos (MP4, JPG, PNG) directly into this zone.
                             </p>
                         </div>
                     </div>

frontend/app/page.tsx

@@ -26,6 +26,23 @@ export default function LandingPage() {
         }
     }, [searchParams]);
 
+    useEffect(() => {
+        const handleDragOver = (e: DragEvent) => {
+            e.preventDefault();
+            if (!isUploadModalOpen) setIsUploadModalOpen(true);
+        };
+        const handleEsc = (e: KeyboardEvent) => {
+            if (e.key === 'Escape' && isUploadModalOpen) setIsUploadModalOpen(false);
+        };
+        
+        window.addEventListener('dragover', handleDragOver);
+        window.addEventListener('keydown', handleEsc);
+        return () => {
+            window.removeEventListener('dragover', handleDragOver);
+            window.removeEventListener('keydown', handleEsc);
+        };
+    }, [isUploadModalOpen]);
+
     // --- Footer Copyright and Dynamic Date ---
     const [year, setYear] = useState(new Date().getFullYear());
 

frontend/app/profile/page.tsx

@@ -100,6 +100,17 @@ export default function ProfilePage() {
         }
     };
 
+    useEffect(() => {
+        const handleEsc = (event: KeyboardEvent) => {
+            if (event.key === 'Escape' && isDeleteModalOpen) {
+                setIsDeleteModalOpen(false);
+                setDeleteInput("");
+            }
+        };
+        document.addEventListener('keydown', handleEsc);
+        return () => document.removeEventListener('keydown', handleEsc);
+    }, [isDeleteModalOpen]);
+
     if (loading) return null;
 
     return (

frontend/components/shared/Navbar.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
 import { useAuth } from '@/contexts/AuthContext';
-import { Menu, X, LogOut, Camera, Upload, Trash2, Moon, Sun, MessageSquare, UserCircle, LayoutDashboard } from 'lucide-react';
+import { Menu, X, LogOut, Camera, Upload, Trash2, Moon, Sun, MessageSquare, UserCircle, LayoutDashboard, Volume2, VolumeX } from 'lucide-react';
 import { apiLayer } from '@/lib/api';
 import FeedbackModal from '@/components/shared/FeedbackModal';
 
@@ -15,6 +15,40 @@ export default function Navbar({ onAnalyzeClick }: NavbarProps) {
     const { isAuthenticated, user, logout, updateUser } = useAuth();
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
     const [dropdownOpen, setDropdownOpen] = useState(false);
+    const [dropdownPinned, setDropdownPinned] = useState(false);
+    const [soundEnabled, setSoundEnabled] = useState(true);
+    const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    const handleMouseEnter = () => {
+        if (!dropdownPinned) {
+            if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+            setDropdownOpen(true);
+        }
+    };
+
+    const handleMouseLeave = () => {
+        if (!dropdownPinned) {
+            closeTimeoutRef.current = setTimeout(() => {
+                setDropdownOpen(false);
+            }, 300); // 300ms grace period
+        }
+    };
+
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            const saved = localStorage.getItem('spotix_sound');
+            if (saved !== null) {
+                setSoundEnabled(saved === 'true');
+            }
+        }
+    }, []);
+
+    const toggleSound = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        const newState = !soundEnabled;
+        setSoundEnabled(newState);
+        localStorage.setItem('spotix_sound', String(newState));
+    };
     
     // Avatar logic
     const fileInputRef = useRef<HTMLInputElement>(null);
@@ -34,20 +68,26 @@ export default function Navbar({ onAnalyzeClick }: NavbarProps) {
         }
     }, [user?.avatar_url, user?.google_avatar_url]);
 
-    // Close dropdown on outside click or ESC
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
             if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
                 setDropdownOpen(false);
+                setDropdownPinned(false);
             }
         };
+
         const handleEsc = (event: KeyboardEvent) => {
-            if (event.key === 'Escape') setDropdownOpen(false);
+            if (event.key === 'Escape') {
+                setDropdownOpen(false);
+                setDropdownPinned(false);
+            }
         };
+
         if (dropdownOpen) {
             document.addEventListener('mousedown', handleClickOutside);
             document.addEventListener('keydown', handleEsc);
         }
+
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
             document.removeEventListener('keydown', handleEsc);
@@ -121,10 +161,19 @@ export default function Navbar({ onAnalyzeClick }: NavbarProps) {
                                 </button>
                             </>
                         ) : (
-                            <div className="flex items-center gap-3 relative group" ref={dropdownRef}>
+                            <div 
+                                className="flex items-center gap-3 relative group" 
+                                ref={dropdownRef}
+                                onMouseEnter={handleMouseEnter}
+                                onMouseLeave={handleMouseLeave}
+                            >
                                 <div 
                                     className="flex items-center gap-3 cursor-pointer hover:opacity-80 transition-opacity"
-                                    onClick={() => setDropdownOpen(!dropdownOpen)}
+                                    onClick={() => {
+                                        const newPinned = !dropdownPinned;
+                                        setDropdownPinned(newPinned);
+                                        setDropdownOpen(newPinned);
+                                    }}
                                 >
                                     <span className="hidden sm:block text-[var(--theme-text)] opacity-80 text-sm font-mono tracking-tight hover-scale">{user?.name || "User"}</span>
                                     <div className="w-10 h-10 rounded-full border border-[var(--theme-border)] overflow-hidden bg-[var(--theme-text)]/5 flex items-center justify-center dash-border hover-scale">
@@ -137,7 +186,8 @@ export default function Navbar({ onAnalyzeClick }: NavbarProps) {
                                 </div>
 
                                 {dropdownOpen && (
-                                    <div className="absolute right-0 top-full mt-3 w-56 bg-[var(--theme-bg)] border border-[var(--theme-border)] rounded-xl py-2 shadow-2xl flex flex-col z-[100] !cursor-none">
+                                    <div className="absolute right-0 top-full pt-3 w-56 flex flex-col z-[100] !cursor-none">
+                                        <div className="bg-[var(--theme-bg)] border border-[var(--theme-border)] rounded-xl py-2 shadow-2xl flex flex-col w-full h-full">
                                         
                                         <button onClick={() => { setDropdownOpen(false); router.push('/dashboard'); }} className="px-4 py-3 flex items-center gap-3 text-sm text-[var(--theme-text)]/70 hover:text-[var(--theme-text)] hover:bg-[var(--theme-text)]/5 transition-colors text-left !cursor-none">
                                             <LayoutDashboard className="w-4 h-4 !cursor-none" /> Dashboard
@@ -147,9 +197,6 @@ export default function Navbar({ onAnalyzeClick }: NavbarProps) {
                                             <UserCircle className="w-4 h-4 !cursor-none" /> My Profile
                                         </button>
                                         
-                                        <div className="h-px w-full bg-[var(--theme-border)] my-1"></div>
-
-
                                         {localAvatar && (
                                             <button 
                                                 className="px-4 py-3 flex items-center gap-3 text-sm text-yellow-500/80 hover:text-yellow-500 hover:bg-[var(--theme-text)]/5 transition-colors text-left !cursor-none"
@@ -161,6 +208,20 @@ export default function Navbar({ onAnalyzeClick }: NavbarProps) {
 
                                         <div className="h-px w-full bg-[var(--theme-border)] my-1"></div>
                                         
+                                        <button 
+                                            onClick={toggleSound} 
+                                            className="px-4 py-3 flex items-center gap-3 text-sm text-[var(--theme-text)]/70 hover:text-[var(--theme-text)] hover:bg-[var(--theme-text)]/5 transition-colors text-left justify-between !cursor-none"
+                                        >
+                                            <div className="flex items-center gap-3">
+                                                {soundEnabled ? <Volume2 className="w-4 h-4 !cursor-none text-green-400" /> : <VolumeX className="w-4 h-4 !cursor-none text-red-400" />}
+                                                Alerts Sound
+                                            </div>
+                                            <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full uppercase tracking-wider ${soundEnabled ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'}`}>
+                                                {soundEnabled ? 'ON' : 'OFF'}
+                                            </span>
+                                        </button>
+
+                                        <div className="h-px w-full bg-[var(--theme-border)] my-1"></div>
 
                                         <button 
                                             className="px-4 py-3 flex items-center gap-3 text-sm text-[var(--theme-text)]/70 hover:text-[var(--theme-text)] hover:bg-[var(--theme-text)]/5 transition-colors text-left !cursor-none"
@@ -183,6 +244,7 @@ export default function Navbar({ onAnalyzeClick }: NavbarProps) {
                                         >
                                             <LogOut className="w-4 h-4 !cursor-none" /> Logout
                                         </button>
+                                        </div>
                                     </div>
                                 )}
                             </div>

frontend/components/upload/UploadZone.tsx

@@ -99,6 +99,13 @@ export default function UploadZone({ autoAnalyze = false }: { autoAnalyze?: bool
                                 conf: fileData.confidence ?? null 
                             });
                             setInteractionState('result');
+                            
+                            const soundSetting = localStorage.getItem('spotix_sound');
+                            if (soundSetting !== 'false') {
+                                const audio = new Audio('/sounds/notif.wav');
+                                audio.volume = 1.0;
+                                audio.play().catch(e => console.error("Audio play failed:", e));
+                            }
                         }, 400);
                     } else if (fileData.status === 'Failed' || fileData.status === 'error' || fileData.status === 'FAILED') {
                         polling = false;