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/Header.tsx | 28 +++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

(limited to 'src/frontend/app/components/layout/Header.tsx')

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