From 7348781b89178589036620b33f3554b2e7271c5f Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Fri, 30 Jan 2026 19:29:55 +0100
Subject: feat: Enhance header and app shell with back navigation and dynamic
 title support

---
 src/frontend/app/components/layout/AppShell.tsx |  5 +++--
 src/frontend/app/components/layout/Header.css   |  4 +---
 src/frontend/app/components/layout/Header.tsx   | 28 +++++++++++++++++++++++--
 3 files changed, 30 insertions(+), 7 deletions(-)

(limited to 'src/frontend/app/components/layout')

diff --git a/src/frontend/app/components/layout/AppShell.tsx b/src/frontend/app/components/layout/AppShell.tsx
index afc19f3..50f5742 100644
--- a/src/frontend/app/components/layout/AppShell.tsx
+++ b/src/frontend/app/components/layout/AppShell.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Outlet } from "react-router";
+import { Outlet, useLocation } from "react-router";
 import {
   PageTitleProvider,
   usePageTitleContext,
@@ -13,6 +13,7 @@ import NavBar from "./NavBar";
 const AppShellContent: React.FC = () => {
   const { title } = usePageTitleContext();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const location = useLocation();
 
   return (
     <div className="app-shell">
@@ -25,7 +26,7 @@ const AppShellContent: React.FC = () => {
       <Drawer isOpen={isDrawerOpen} onClose={() => setIsDrawerOpen(false)} />
       <div className="app-shell__body">
         <main className="app-shell__main">
-          <Outlet />
+          <Outlet key={location.pathname} />
         </main>
       </div>
       <footer className="app-shell__bottom-nav">
diff --git a/src/frontend/app/components/layout/Header.css b/src/frontend/app/components/layout/Header.css
index 0bba747..2184786 100644
--- a/src/frontend/app/components/layout/Header.css
+++ b/src/frontend/app/components/layout/Header.css
@@ -2,17 +2,15 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem;
   background-color: var(--background-color);
   height: 60px;
   box-sizing: border-box;
-  width: 100%;
 }
 
 .app-header__left {
   display: flex;
   align-items: center;
-  gap: 1rem;
 }
 
 .app-header__menu-btn {
diff --git a/src/frontend/app/components/layout/Header.tsx b/src/frontend/app/components/layout/Header.tsx
index 8235636..4378e59 100644
--- a/src/frontend/app/components/layout/Header.tsx
+++ b/src/frontend/app/components/layout/Header.tsx
@@ -1,4 +1,6 @@
-import { Menu } from "lucide-react";
+import { ArrowLeft, Menu } from "lucide-react";
+import { Link } from "react-router";
+import { usePageTitleContext } from "~/contexts/PageTitleContext";
 import "./Header.css";
 
 interface HeaderProps {
@@ -12,10 +14,32 @@ export const Header: React.FC<HeaderProps> = ({
   onMenuClick,
   className = "",
 }) => {
+  const { onBack, backTo, titleNode } = usePageTitleContext();
+
   return (
     <header className={`app-header ${className}`}>
       <div className="app-header__left">
-        <h1 className="app-header__title">{title}</h1>
+        {backTo && (
+          <Link
+            className="app-header__menu-btn"
+            to={backTo}
+            aria-label="Atrás"
+            style={{ marginRight: "8px" }}
+          >
+            <ArrowLeft size={24} />
+          </Link>
+        )}
+        {!backTo && onBack && (
+          <button
+            className="app-header__menu-btn"
+            onClick={onBack}
+            aria-label="Atrás"
+            style={{ marginRight: "8px" }}
+          >
+            <ArrowLeft size={24} />
+          </button>
+        )}
+        {titleNode ? titleNode : <h1 className="app-header__title">{title}</h1>}
       </div>
       <div className="app-header__right">
         <button
-- 
cgit v1.3