From c07f8ad82ef7b993049b20ce3fd7a30ac4a469b4 Mon Sep 17 00:00:00 2001
From: Nicolas <nicolaslef53@gmail.com>
Date: Sun, 16 Aug 2026 21:04:51 +0200
Subject: [PATCH] Web: wire AppLayout into routing + stub section pages (step
 3/5)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- App.tsx: every authenticated route now nests under one
  RequireAuth + AppLayout parent route (react-router nested
  routes/<Outlet />) instead of each page wrapping its own guard.
- New routes/pages: /recettes, /liste-de-courses, /foyer, each a thin
  wrapper around a shared ComingSoonPage ("cette section arrive
  bientôt.") — no backend behind them yet, matches the "pages stub
  dédiées" choice discussed in chat.
- locales/fr/translation.json: nav labels + stub copy.

HomePage still shows its own greeting/logout card here (unchanged,
now nested inside AppLayout's <Outlet /> — briefly duplicating the
sidebar's greeting/logout) — replaced by the actual planning view in
the next commit.
---
 apps/web/src/App.tsx                     | 24 +++++++++++++++++-------
 apps/web/src/locales/fr/translation.json | 12 ++++++++++++
 apps/web/src/pages/ComingSoonPage.scss   | 12 ++++++++++++
 apps/web/src/pages/ComingSoonPage.tsx    | 23 +++++++++++++++++++++++
 apps/web/src/pages/HouseholdPage.tsx     |  8 ++++++++
 apps/web/src/pages/RecipesPage.tsx       |  8 ++++++++
 apps/web/src/pages/ShoppingListPage.tsx  | 10 ++++++++++
 7 files changed, 90 insertions(+), 7 deletions(-)
 create mode 100644 apps/web/src/pages/ComingSoonPage.scss
 create mode 100644 apps/web/src/pages/ComingSoonPage.tsx
 create mode 100644 apps/web/src/pages/HouseholdPage.tsx
 create mode 100644 apps/web/src/pages/RecipesPage.tsx
 create mode 100644 apps/web/src/pages/ShoppingListPage.tsx

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 2d62989..3709ca9 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -1,27 +1,37 @@
 import { Navigate, Route, Routes } from "react-router-dom";
 import { RedirectIfAuthenticated } from "./features/auth/RedirectIfAuthenticated";
 import { RequireAuth } from "./features/auth/RequireAuth";
+import { AppLayout } from "./layouts/AppLayout";
 import { HomePage } from "./pages/HomePage";
+import { HouseholdPage } from "./pages/HouseholdPage";
 import { LoginPage } from "./pages/LoginPage";
+import { RecipesPage } from "./pages/RecipesPage";
+import { ShoppingListPage } from "./pages/ShoppingListPage";
 import { SignupPage } from "./pages/SignupPage";
 
 /**
- * Top-level route table. `/` requires an authenticated session (see
- * {@link RequireAuth}); `/login` and `/signup` redirect an already-logged-in
- * visitor to `/` instead (see {@link RedirectIfAuthenticated}). Anything
- * else falls back to `/`, which itself redirects to `/login` if needed.
+ * Top-level route table. Every authenticated section is nested under one
+ * `RequireAuth` + `AppLayout` parent route (sidebar chrome + `/auth`
+ * guard applied once, not per-page — see {@link AppLayout}); `/login` and
+ * `/signup` redirect an already-logged-in visitor to `/` instead (see
+ * {@link RedirectIfAuthenticated}). Anything else falls back to `/`, which
+ * itself redirects to `/login` if needed.
  */
 export function App() {
   return (
     <Routes>
       <Route
-        path="/"
         element={
           <RequireAuth>
-            <HomePage />
+            <AppLayout />
           </RequireAuth>
         }
-      />
+      >
+        <Route path="/" element={<HomePage />} />
+        <Route path="/recettes" element={<RecipesPage />} />
+        <Route path="/liste-de-courses" element={<ShoppingListPage />} />
+        <Route path="/foyer" element={<HouseholdPage />} />
+      </Route>
       <Route
         path="/login"
         element={
diff --git a/apps/web/src/locales/fr/translation.json b/apps/web/src/locales/fr/translation.json
index b7dcf45..3fc42bd 100644
--- a/apps/web/src/locales/fr/translation.json
+++ b/apps/web/src/locales/fr/translation.json
@@ -42,5 +42,17 @@
   "home": {
     "greeting": "Bonjour {{firstName}} {{lastName}} 👋",
     "logout": "Se déconnecter"
+  },
+  "recipes": {
+    "title": "Recettes",
+    "comingSoon": "Cette section arrive bientôt."
+  },
+  "shoppingList": {
+    "title": "Liste de courses",
+    "comingSoon": "Cette section arrive bientôt."
+  },
+  "household": {
+    "title": "Foyer & profil",
+    "comingSoon": "Cette section arrive bientôt."
   }
 }
diff --git a/apps/web/src/pages/ComingSoonPage.scss b/apps/web/src/pages/ComingSoonPage.scss
new file mode 100644
index 0000000..122f5dc
--- /dev/null
+++ b/apps/web/src/pages/ComingSoonPage.scss
@@ -0,0 +1,12 @@
+// =============================================================================
+// Styles for ComingSoonPage — shared by every stub section page.
+// =============================================================================
+
+.coming-soon-page {
+  max-width: 40rem;
+
+  p {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-md);
+  }
+}
diff --git a/apps/web/src/pages/ComingSoonPage.tsx b/apps/web/src/pages/ComingSoonPage.tsx
new file mode 100644
index 0000000..0d5a5df
--- /dev/null
+++ b/apps/web/src/pages/ComingSoonPage.tsx
@@ -0,0 +1,23 @@
+import "./ComingSoonPage.scss";
+
+interface ComingSoonPageProps {
+  title: string;
+  description: string;
+}
+
+/**
+ * Placeholder rendered by every section that has a route/sidebar entry but
+ * no real feature behind it yet (Recettes, Liste de courses, Foyer &
+ * profil — see `RecipesPage.tsx` etc.). One shared component instead of
+ * three near-identical markup blocks; each page still gets its own file
+ * (and its own copy, via i18n) so building out a real feature later means
+ * rewriting one dedicated file, not splitting a generic route.
+ */
+export function ComingSoonPage({ title, description }: ComingSoonPageProps) {
+  return (
+    <div className="coming-soon-page">
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </div>
+  );
+}
diff --git a/apps/web/src/pages/HouseholdPage.tsx b/apps/web/src/pages/HouseholdPage.tsx
new file mode 100644
index 0000000..8502f37
--- /dev/null
+++ b/apps/web/src/pages/HouseholdPage.tsx
@@ -0,0 +1,8 @@
+import { useTranslation } from "react-i18next";
+import { ComingSoonPage } from "./ComingSoonPage";
+
+/** Household & profile section — routed at `/foyer`. No backend yet beyond auth, stub for now. */
+export function HouseholdPage() {
+  const { t } = useTranslation();
+  return <ComingSoonPage title={t("household.title")} description={t("household.comingSoon")} />;
+}
diff --git a/apps/web/src/pages/RecipesPage.tsx b/apps/web/src/pages/RecipesPage.tsx
new file mode 100644
index 0000000..e7080fc
--- /dev/null
+++ b/apps/web/src/pages/RecipesPage.tsx
@@ -0,0 +1,8 @@
+import { useTranslation } from "react-i18next";
+import { ComingSoonPage } from "./ComingSoonPage";
+
+/** Recipes section — routed at `/recettes`. No backend yet (see README's "Planning" section), stub for now. */
+export function RecipesPage() {
+  const { t } = useTranslation();
+  return <ComingSoonPage title={t("recipes.title")} description={t("recipes.comingSoon")} />;
+}
diff --git a/apps/web/src/pages/ShoppingListPage.tsx b/apps/web/src/pages/ShoppingListPage.tsx
new file mode 100644
index 0000000..090be39
--- /dev/null
+++ b/apps/web/src/pages/ShoppingListPage.tsx
@@ -0,0 +1,10 @@
+import { useTranslation } from "react-i18next";
+import { ComingSoonPage } from "./ComingSoonPage";
+
+/** Shopping list section — routed at `/liste-de-courses`. No backend yet, stub for now. */
+export function ShoppingListPage() {
+  const { t } = useTranslation();
+  return (
+    <ComingSoonPage title={t("shoppingList.title")} description={t("shoppingList.comingSoon")} />
+  );
+}