[Fix] Navigation Bar Links from chat page causes Hard Refresh Instead of Client-Side Routing

frontend/src/components/navbar/Header.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Link } from 'react-router-dom';
 import { Button } from '@/src/components/buttons/button';
 import { useIsMobile } from '@/src/hooks/use-mobile';
 import UserIcon from '@/src/components/navbar/UserIcon';
 import ThemeToggle from '@/src/components/theme/ThemeToggle';
+import { useNavigate } from 'react-router-dom';
 
 interface HeaderProps {
   logoSrc?: string;
@@ -19,6 +19,7 @@ const Header = ({
 }: HeaderProps) => {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const isMobile = useIsMobile();
+  const navigate = useNavigate();
 
   const toggleMobileMenu = () => {
     setMobileMenuOpen(!mobileMenuOpen);
@@ -28,7 +29,7 @@ const Header = ({
     e.preventDefault();
     e.stopPropagation();
     console.log('🚀 Using window.location.href to navigate to: /');
-    window.location.href = '/';
+    navigate('/');
   };
   return (
     <>
@@ -52,15 +53,16 @@ const Header = ({
           {/* Desktop Navigation - shown when not mobile */}
           {!isMobile && !isLoggedIn && (
             <nav className="flex items-center gap-6">
-              <Link
-                to="/auth/sign-in"
+              <button
+                type="button"
+                onClick={() => navigate('/auth/sign-in')}
                 className="text-gray-600 transition-colors hover:text-pink-600 dark:text-slate-200 dark:hover:text-pink-600"
               >
                 Sign In
-              </Link>
-              <Link to="/auth/sign-up">
+              </button>
+              <button type="button" onClick={() => navigate('/auth/sign-up')}>
                 <Button className="bg-pink-600 text-white hover:bg-pink-700">Get Started</Button>
-              </Link>
+              </button>
             </nav>
           )}
           {/* Show UserIcon only when logged in */}
@@ -100,16 +102,26 @@ const Header = ({
             transition={{ duration: 0.3 }}
           >
             <div className="flex flex-col items-center justify-center py-2">
-              <Link
-                to="/auth/sign-in"
+              <button
+                type="button"
                 className="py-2 text-gray-600 transition-colors hover:text-pink-600 dark:text-slate-200 dark:hover:text-pink-600"
-                onClick={() => setMobileMenuOpen(false)}
+                onClick={() => {
+                  setMobileMenuOpen(false);
+                  navigate('/auth/sign-in');
+                }}
               >
                 Sign In
-              </Link>
-              <Link to="/auth/sign-up" className="py-2" onClick={() => setMobileMenuOpen(false)}>
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  setMobileMenuOpen(false);
+                  navigate('/auth/sign-up');
+                }}
+                className="py-2"
+              >
                 <Button className="bg-pink-600 text-white hover:bg-pink-700">Get Started</Button>
-              </Link>
+              </button>
             </div>
           </motion.div>
         )}

frontend/src/components/navbar/UserIcon.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { User, List, MessageCircle } from 'lucide-react';
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { assessmentApi } from '@/src/pages/assessment/api';
 import { getConversationsList } from '@/src/pages/chat/sidebar/api/get-list/getConversationsList';
 import { useAuth } from '@/src/pages/auth/context/useAuthContext';
@@ -40,35 +40,40 @@ const UserIcon: React.FC = () => {
     e.preventDefault();
     e.stopPropagation();
     console.log('🚀 Using window.location.href to navigate to: /user/profile');
-    window.location.href = '/user/profile';
+    navigate('/user/profile');
   };
 
   const handleHistoryClick = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
     console.log('🚀 Using window.location.href to navigate to: /assessment/history');
-    window.location.href = '/assessment/history';
+    navigate('/assessment/history');
   };
 
   const handleChatClick = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
     console.log('🚀 Using window.location.href to navigate to: /chat');
-    window.location.href = '/chat';
+    navigate('/chat');
+  };
+
+  const handleNavigation = () => {
+    navigate('/');
   };
 
   if (!isAuthenticated) {
     return (
-      <Link to="/" className="text-gray-500">
+      <button type="button" onClick={handleNavigation} className="text-gray-500">
         not authenticated
-      </Link>
+      </button>
     );
   }
 
   return (
     <div className="flex items-center gap-4 text-gray-500">
       {!loading && hasConversations && (
         <button
+          type="button"
           onClick={handleChatClick}
           title="Chat with Dottie"
           className="text-sm font-medium hover:text-pink-600"
@@ -78,16 +83,18 @@ const UserIcon: React.FC = () => {
       )}
       {!loading && hasHistory && (
         <button
+          type="button"
           onClick={handleHistoryClick}
           title="Assessment History"
           className="text-sm font-medium hover:text-pink-600"
         >
           <List className="h-5 w-5" />
         </button>
       )}
-      <button 
+      <button
+        type="button"
         onClick={handleProfileClick}
-        title="Profile" 
+        title="Profile"
         className="hover:text-pink-600"
       >
         <User className="h-5 w-5" />

frontend/src/pages/assessment/list/page.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { format, isValid, parseISO } from 'date-fns';
 import { Calendar, ChevronRight } from 'lucide-react';
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { assessmentApi, type Assessment } from '@/src/pages/assessment/api';
 import { toast } from 'sonner';
 import PageTransition from '../animations/page-transitions';
@@ -10,6 +10,7 @@ export default function HistoryPage() {
   // #actual
   const [assessments, setAssessments] = useState<Assessment[]>([]);
   const navigate = useNavigate();
+  const location = useLocation();
 
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -89,12 +90,13 @@ export default function HistoryPage() {
             <h1 className="text-2xl font-bold text-gray-900 dark:text-slate-100">
               Assessment History
             </h1>
-            <Link
-              to="/assessment/age-verification"
+            <button
+              type="button"
+              onClick={() => navigate('/assessment/age-verification')}
               className="inline-flex items-center rounded-lg bg-pink-600 px-4 py-2 text-white transition-colors hover:bg-pink-700 hover:text-white"
             >
               New Assessment
-            </Link>
+            </button>
           </div>
 
           {error ? (
@@ -104,7 +106,7 @@ export default function HistoryPage() {
               <div className="mt-6">
                 <button
                   type="button"
-                  onClick={() => window.location.reload()}
+                  onClick={() => navigate(location.pathname)}
                   className="inline-flex w-full items-center rounded-lg bg-pink-600 px-4 py-2 text-white transition-colors hover:bg-pink-700"
                 >
                   Retry
@@ -120,6 +122,7 @@ export default function HistoryPage() {
               </p>
               <div className="mt-6">
                 <button
+                  type="button"
                   onClick={() => {
                     navigate('/assessment');
                   }}
@@ -164,9 +167,16 @@ export default function HistoryPage() {
                   : assessment.assessment_data?.cycleLength;
 
                 return (
-                  <Link
+                  <div
+                    role="button"
+                    tabIndex={0}
                     key={assessment.id}
-                    to={`/assessment/history/${assessment.id}`}
+                    onClick={() => navigate(`/assessment/history/${assessment.id}`)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        navigate(`/assessment/history/${assessment.id}`);
+                      }
+                    }}
                     className="block rounded-lg border bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-slate-700 dark:bg-slate-800 dark:hover:border-slate-600"
                   >
                     <div className="flex items-center justify-between">
@@ -197,7 +207,7 @@ export default function HistoryPage() {
                       </div>
                       <ChevronRight className="h-5 w-5 text-gray-400 dark:text-slate-500" />
                     </div>
-                  </Link>
+                  </div>
                 );
               })}
             </div>