From d51169f6411b68a226d76d2d39826904de484929 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Wed, 19 Nov 2025 15:04:55 +0100
Subject: feat: Add About and Favourites pages, update routing and context
 management

- Added new routes for About and Favourites pages.
- Implemented About page with version information and credits.
- Created Favourites page with a placeholder message for empty favourites.
- Refactored RegionConfig import paths for consistency.
- Introduced PageTitleContext to manage page titles dynamically.
- Updated various components to utilize the new context for setting page titles.
- Enhanced AppShell layout with a responsive Drawer for navigation.
- Added CSS styles for new components and pages.
- Integrated commit hash display in the About page for version tracking.
---
 src/frontend/app/components/layout/AppShell.tsx | 42 +++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/frontend/app/components/layout/AppShell.tsx

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

diff --git a/src/frontend/app/components/layout/AppShell.tsx b/src/frontend/app/components/layout/AppShell.tsx
new file mode 100644
index 0000000..d0c0121
--- /dev/null
+++ b/src/frontend/app/components/layout/AppShell.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import { Outlet } from "react-router";
+import { PageTitleProvider, usePageTitleContext } from "~/contexts/PageTitleContext";
+import NavBar from "../NavBar";
+import "./AppShell.css";
+import { Drawer } from "./Drawer";
+import { Header } from "./Header";
+
+const AppShellContent: React.FC = () => {
+  const { title } = usePageTitleContext();
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+  return (
+    <div className="app-shell">
+      <Header
+        className="app-shell__header"
+        title={title}
+        onMenuClick={() => setIsDrawerOpen(true)}
+      />
+      <Drawer isOpen={isDrawerOpen} onClose={() => setIsDrawerOpen(false)} />
+      <div className="app-shell__body">
+        <aside className="app-shell__sidebar">
+          <NavBar />
+        </aside>
+        <main className="app-shell__main">
+          <Outlet />
+        </main>
+      </div>
+      <footer className="app-shell__bottom-nav">
+        <NavBar />
+      </footer>
+    </div>
+  );
+};
+
+export const AppShell: React.FC = () => {
+  return (
+    <PageTitleProvider>
+      <AppShellContent />
+    </PageTitleProvider>
+  );
+};
-- 
cgit v1.3