Merge branch 'fix/auth-and-api-config' into 'main'

Refactor Header and AppRouter components

See merge request fjmimbre/deck-of-cards!1

frontend/src/components/layout/Header.jsx

@@ -3,7 +3,9 @@ import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext';
 import { FiLogIn, FiLogOut, FiEdit3, FiClock } from 'react-icons/fi';
 
-function NavTab({ to, isActive, icon: Icon, children }) {
+function NavTab({ to, isActive, icon, children }) {
+  const Icon = icon;
+
   return (
     <Link
       to={to}
@@ -97,20 +99,19 @@ export default function Header() {
         </Link>
 
         <div className="flex items-center gap-4 whitespace-nowrap">
-          {/* Misma navegación con o sin sesión: evita estilos distintos al loguearse */}
+          {isAuthenticated && (
-          <nav
+            <nav
-            className="flex items-center gap-0.5 rounded-xl bg-slate-100/90 p-1"
+              className="flex items-center gap-0.5 rounded-xl bg-slate-100/90 p-1"
-            aria-label="Secciones principales"
+              aria-label="Secciones principales"
-          >
+            >
-            <NavTab to="/editor" isActive={isEditorActive} icon={FiEdit3}>
+              <NavTab to="/editor" isActive={isEditorActive} icon={FiEdit3}>
-              Editor
+                Editor
-            </NavTab>
+              </NavTab>
-            {isAuthenticated && (
               <NavTab to="/history" isActive={isHistoryActive} icon={FiClock}>
                 Historial
               </NavTab>
-            )}
+            </nav>
-          </nav>
+          )}
 
           {isAuthenticated ? (
             <div className="relative border-l border-slate-200 pl-4">
@@ -154,7 +155,7 @@ export default function Header() {
               )}
             </div>
           ) : (
-            <div className="border-l border-slate-200 pl-4">
+            <div>
               <AccederButton isActive={isLoginActive} />
             </div>
           )}

frontend/src/routers/AppRouter.jsx

@@ -4,6 +4,17 @@ import DocEditor from '../pages/DocEditor';
 import Login from '../pages/Login';
 import Register from '../pages/Register';
 import History from '../pages/History';
+import { useAuth } from '../context/AuthContext';
+
+function ProtectedHistoryRoute() {
+  const { isAuthenticated } = useAuth();
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <History />;
+}
 
 export default function AppRouter() {
   return (
@@ -14,7 +25,7 @@ export default function AppRouter() {
           <Route path="/editor" element={<DocEditor />} />
           <Route path="/login" element={<Login />} />
           <Route path="/register" element={<Register />} />
-          <Route path="/history" element={<History />} />
+          <Route path="/history" element={<ProtectedHistoryRoute />} />
         </Routes>
       </MainLayout>
     </Router>