From f27a75d9d6f3b0733971aadce370ea719ff60742 Mon Sep 17 00:00:00 2001
From: Michael SCHAL <michaelschal@gmail.com>
Date: Mon, 1 Dec 2025 11:32:12 +0100
Subject: [PATCH] feat: Implement initial application structure with routing,
 authentication flow, and responsive layout.

---
 frontend/src/App.jsx                      |   7 +-
 frontend/src/components/layout/Layout.jsx | 219 ++++++++++++----------
 frontend/src/index.css                    |  85 ++++-----
 3 files changed, 157 insertions(+), 154 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 134d986..cf7bed8 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -55,12 +55,9 @@ function PublicRoute({ children }) {
 }
 
 function AppRoutes() {
-    const { theme, toggleTheme } = useTheme();
-    const { isAuthenticated } = useAuth();
-
     return (
         <>
-            <Toaster position="bottom-right" theme={theme} />
+            <Toaster position="bottom-right" />
             <Routes>
                 <Route
                     path="/login"
@@ -74,7 +71,7 @@ function AppRoutes() {
                     path="/*"
                     element={
                         <ProtectedRoute>
-                            <Layout theme={theme} toggleTheme={toggleTheme}>
+                            <Layout>
                                 <Routes>
                                     <Route path="/" element={<Dashboard />} />
                                     <Route path="/search" element={<Search />} />
diff --git a/frontend/src/components/layout/Layout.jsx b/frontend/src/components/layout/Layout.jsx
index 690a190..ed21308 100644
--- a/frontend/src/components/layout/Layout.jsx
+++ b/frontend/src/components/layout/Layout.jsx
@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { LayoutDashboard, Search, TrendingUp, BookOpen, Moon, Sun, Menu, LogOut, Shield, ShoppingBag } from 'lucide-react';
+import { LayoutDashboard, Search, TrendingUp, BookOpen, Menu, LogOut, Shield, ShoppingBag } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { cn } from '@/lib/utils';
 import { useAuth } from '@/hooks/use-auth';
 
-const Layout = ({ children, theme, toggleTheme }) => {
+const Layout = ({ children }) => {
     const { t } = useTranslation();
     const location = useLocation();
     const navigate = useNavigate();
@@ -19,6 +19,7 @@ const Layout = ({ children, theme, toggleTheme }) => {
         navigate('/login');
     };
 
+    // Main navigation items (without admin)
     const navItems = [
         { icon: LayoutDashboard, label: t('nav.dashboard'), path: '/' },
         { icon: Search, label: t('nav.search') || 'Recherche', path: '/search' },
@@ -27,25 +28,23 @@ const Layout = ({ children, theme, toggleTheme }) => {
         { icon: BookOpen, label: 'Catalogues', path: '/catalogues' },
     ];
 
-    // Add admin link for admin users
-    if (isAdmin) {
-        navItems.push({ icon: Shield, label: 'Administration', path: '/admin' });
-    }
-
     return (
-        <div className="min-h-screen bg-background font-sans antialiased">
-            {/* Sidebar */}
-            <aside className="fixed left-0 top-0 z-40 h-screen w-64 border-r bg-card hidden md:block">
+        <div className="min-h-screen bg-background">
+            {/* Desktop Sidebar */}
+            <aside className="fixed left-0 top-0 z-40 h-screen w-64 border-r bg-white hidden md:block">
                 <div className="flex h-full flex-col">
-                    <div className="flex h-14 items-center border-b px-6">
-                        <Link to="/" className="flex items-center gap-2 font-semibold">
-                            <img src="/logo.png" alt="PriceFlow Logo" className="h-8 w-8 rounded-lg" />
-                            <span className="text-xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
+                    {/* Logo */}
+                    <div className="flex h-16 items-center border-b px-6">
+                        <Link to="/" className="flex items-center gap-3">
+                            <img src="/logo.png" alt="PriceFlow" className="h-8 w-8" />
+                            <span className="text-lg font-semibold text-foreground">
                                 PriceFlow
                             </span>
                         </Link>
                     </div>
-                    <nav className="flex-1 space-y-1 p-4">
+
+                    {/* Main Navigation */}
+                    <nav className="flex-1 p-3 space-y-1">
                         {navItems.map((item) => {
                             const Icon = item.icon;
                             const isActive = location.pathname === item.path;
@@ -53,55 +52,68 @@ const Layout = ({ children, theme, toggleTheme }) => {
                                 <Link key={item.path} to={item.path}>
                                     <Button
                                         variant={isActive ? "secondary" : "ghost"}
-                                        className={cn("w-full justify-start gap-2", isActive && "bg-secondary")}
+                                        className={cn(
+                                            "w-full justify-start gap-3 h-10 px-3",
+                                            isActive && "bg-secondary font-medium"
+                                        )}
                                     >
                                         <Icon className="h-4 w-4" />
-                                        {item.label}
+                                        <span className="text-sm">{item.label}</span>
                                     </Button>
                                 </Link>
                             );
                         })}
                     </nav>
-                    <div className="border-t p-4 space-y-2">
-                        {/* User info */}
-                        <div className="px-4 py-2 text-sm text-muted-foreground">
-                            <span className="font-medium text-foreground">{user?.username}</span>
-                            {isAdmin && <span className="ml-2 text-xs bg-primary/20 text-primary px-2 py-0.5 rounded">Admin</span>}
+
+                    {/* Bottom Section: Admin + User + Logout */}
+                    <div className="border-t">
+                        {/* Admin Button (separated) */}
+                        {isAdmin && (
+                            <div className="p-3 border-b">
+                                <Link to="/admin">
+                                    <Button
+                                        variant={location.pathname === '/admin' ? "secondary" : "ghost"}
+                                        className={cn(
+                                            "w-full justify-start gap-3 h-10 px-3",
+                                            location.pathname === '/admin' && "bg-secondary font-medium"
+                                        )}
+                                    >
+                                        <Shield className="h-4 w-4" />
+                                        <span className="text-sm">Administration</span>
+                                    </Button>
+                                </Link>
+                            </div>
+                        )}
+
+                        {/* User Info */}
+                        <div className="p-3 border-b">
+                            <div className="px-3 py-2 text-xs text-muted-foreground">
+                                <div className="font-medium text-foreground text-sm">{user?.username}</div>
+                                {isAdmin && (
+                                    <div className="mt-1 inline-block text-xs bg-secondary px-2 py-0.5 rounded">
+                                        Administrateur
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+
+                        {/* Logout */}
+                        <div className="p-3">
+                            <Button
+                                variant="ghost"
+                                onClick={handleLogout}
+                                className="w-full justify-start gap-3 h-10 px-3 text-muted-foreground hover:text-foreground"
+                            >
+                                <LogOut className="h-4 w-4" />
+                                <span className="text-sm">Déconnexion</span>
+                            </Button>
                         </div>
-                        {/* Theme toggle */}
-                        <Button
-                            variant="ghost"
-                            size="icon"
-                            onClick={toggleTheme}
-                            className="w-full justify-start gap-2 px-4"
-                        >
-                            {theme === 'dark' ? (
-                                <>
-                                    <Sun className="h-4 w-4" />
-                                    <span>{t('nav.lightMode')}</span>
-                                </>
-                            ) : (
-                                <>
-                                    <Moon className="h-4 w-4" />
-                                    <span>{t('nav.darkMode')}</span>
-                                </>
-                            )}
-                        </Button>
-                        {/* Logout button */}
-                        <Button
-                            variant="ghost"
-                            onClick={handleLogout}
-                            className="w-full justify-start gap-2 px-4 text-destructive hover:text-destructive hover:bg-destructive/10"
-                        >
-                            <LogOut className="h-4 w-4" />
-                            <span>Déconnexion</span>
-                        </Button>
                     </div>
                 </div>
             </aside>
 
             {/* Mobile Header */}
-            <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-6 md:hidden">
+            <header className="sticky top-0 z-30 flex h-16 items-center gap-4 border-b bg-white px-4 md:hidden">
                 <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
                     <SheetTrigger asChild>
                         <Button variant="ghost" size="icon">
@@ -110,13 +122,14 @@ const Layout = ({ children, theme, toggleTheme }) => {
                     </SheetTrigger>
                     <SheetContent side="left" className="w-64 p-0">
                         <div className="flex h-full flex-col">
-                            <div className="flex h-14 items-center border-b px-6">
-                                <img src="/logo.svg" alt="PriceFlow Logo" className="h-8 w-8 mr-2 rounded-lg" />
-                                <span className="text-xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
-                                    PriceFlow
-                                </span>
+                            {/* Mobile Logo */}
+                            <div className="flex h-16 items-center border-b px-6">
+                                <img src="/logo.png" alt="PriceFlow" className="h-8 w-8 mr-3" />
+                                <span className="text-lg font-semibold">PriceFlow</span>
                             </div>
-                            <nav className="flex-1 space-y-1 p-4">
+
+                            {/* Mobile Navigation */}
+                            <nav className="flex-1 p-3 space-y-1">
                                 {navItems.map((item) => {
                                     const Icon = item.icon;
                                     const isActive = location.pathname === item.path;
@@ -124,63 +137,73 @@ const Layout = ({ children, theme, toggleTheme }) => {
                                         <Link key={item.path} to={item.path} onClick={() => setMobileMenuOpen(false)}>
                                             <Button
                                                 variant={isActive ? "secondary" : "ghost"}
-                                                className={cn("w-full justify-start gap-2", isActive && "bg-secondary")}
+                                                className={cn(
+                                                    "w-full justify-start gap-3 h-10 px-3",
+                                                    isActive && "bg-secondary font-medium"
+                                                )}
                                             >
                                                 <Icon className="h-4 w-4" />
-                                                {item.label}
+                                                <span className="text-sm">{item.label}</span>
                                             </Button>
                                         </Link>
                                     );
                                 })}
                             </nav>
-                            <div className="border-t p-4 space-y-2">
-                                <div className="px-4 py-2 text-sm text-muted-foreground">
-                                    <span className="font-medium text-foreground">{user?.username}</span>
-                                    {isAdmin && <span className="ml-2 text-xs bg-primary/20 text-primary px-2 py-0.5 rounded">Admin</span>}
+
+                            {/* Mobile Bottom Section */}
+                            <div className="border-t">
+                                {isAdmin && (
+                                    <div className="p-3 border-b">
+                                        <Link to="/admin" onClick={() => setMobileMenuOpen(false)}>
+                                            <Button
+                                                variant={location.pathname === '/admin' ? "secondary" : "ghost"}
+                                                className={cn(
+                                                    "w-full justify-start gap-3 h-10 px-3",
+                                                    location.pathname === '/admin' && "bg-secondary font-medium"
+                                                )}
+                                            >
+                                                <Shield className="h-4 w-4" />
+                                                <span className="text-sm">Administration</span>
+                                            </Button>
+                                        </Link>
+                                    </div>
+                                )}
+
+                                <div className="p-3 border-b">
+                                    <div className="px-3 py-2 text-xs text-muted-foreground">
+                                        <div className="font-medium text-foreground text-sm">{user?.username}</div>
+                                        {isAdmin && (
+                                            <div className="mt-1 inline-block text-xs bg-secondary px-2 py-0.5 rounded">
+                                                Administrateur
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+
+                                <div className="p-3">
+                                    <Button
+                                        variant="ghost"
+                                        onClick={() => { handleLogout(); setMobileMenuOpen(false); }}
+                                        className="w-full justify-start gap-3 h-10 px-3 text-muted-foreground hover:text-foreground"
+                                    >
+                                        <LogOut className="h-4 w-4" />
+                                        <span className="text-sm">Déconnexion</span>
+                                    </Button>
                                 </div>
-                                <Button
-                                    variant="ghost"
-                                    onClick={toggleTheme}
-                                    className="w-full justify-start gap-2"
-                                >
-                                    {theme === 'dark' ? (
-                                        <>
-                                            <Sun className="h-4 w-4" />
-                                            <span>{t('nav.lightMode')}</span>
-                                        </>
-                                    ) : (
-                                        <>
-                                            <Moon className="h-4 w-4" />
-                                            <span>{t('nav.darkMode')}</span>
-                                        </>
-                                    )}
-                                </Button>
-                                <Button
-                                    variant="ghost"
-                                    onClick={() => { handleLogout(); setMobileMenuOpen(false); }}
-                                    className="w-full justify-start gap-2 text-destructive hover:text-destructive"
-                                >
-                                    <LogOut className="h-4 w-4" />
-                                    <span>Déconnexion</span>
-                                </Button>
                             </div>
                         </div>
                     </SheetContent>
                 </Sheet>
-                <Link to="/" className="flex items-center gap-2 font-semibold">
-                    <img src="/logo.png" alt="PriceFlow Logo" className="h-6 w-6 rounded" />
-                    PriceFlow
+
+                <Link to="/" className="flex items-center gap-2">
+                    <img src="/logo.png" alt="PriceFlow" className="h-7 w-7" />
+                    <span className="font-semibold">PriceFlow</span>
                 </Link>
-                <div className="ml-auto flex items-center gap-2">
-                    <Button variant="ghost" size="icon" onClick={toggleTheme}>
-                        {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
-                    </Button>
-                </div>
             </header>
 
             {/* Main Content */}
-            <main className="flex-1 md:pl-64">
-                <div className="container py-6">
+            <main className="md:pl-64">
+                <div className="container max-w-7xl py-6 px-4">
                     {children}
                 </div>
             </main>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f172184..cbaf0e6 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -4,65 +4,36 @@
  
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
+    /* Clean minimalist monochrome theme */
+    --background: 0 0% 100%;              /* Pure white */
+    --foreground: 0 0% 10%;               /* Very dark gray for text */
  
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
+    --card: 0 0% 99%;                     /* Off-white for cards */
+    --card-foreground: 0 0% 10%;          /* Dark gray text on cards */
  
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;                 /* White for popovers */
+    --popover-foreground: 0 0% 10%;       /* Dark gray text */
  
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
+    --primary: 0 0% 15%;                  /* Dark gray for primary actions */
+    --primary-foreground: 0 0% 100%;      /* White text on primary */
  
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
+    --secondary: 0 0% 97%;                /* Light gray background */
+    --secondary-foreground: 0 0% 15%;     /* Dark gray text */
  
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
+    --muted: 0 0% 96%;                    /* Very light gray */
+    --muted-foreground: 0 0% 45%;         /* Medium gray for muted text */
  
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
+    --accent: 0 0% 95%;                   /* Accent gray */
+    --accent-foreground: 0 0% 15%;        /* Dark text on accent */
  
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
+    --destructive: 0 0% 30%;              /* Dark gray for destructive (instead of red) */
+    --destructive-foreground: 0 0% 100%;  /* White text */
  
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 10% 3.9%;
+    --border: 0 0% 90%;                   /* Light gray borders */
+    --input: 0 0% 90%;                    /* Light gray input borders */
+    --ring: 0 0% 60%;                     /* Medium gray focus ring */
  
-    --radius: 0.5rem;
-  }
- 
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
- 
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
- 
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
- 
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
- 
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
- 
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
- 
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
- 
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
+    --radius: 0.375rem;                   /* Slightly reduced radius for cleaner look */
   }
 }
  
@@ -71,6 +42,18 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+  
+  /* Ensure smooth scrolling */
+  html {
+    scroll-behavior: smooth;
+  }
+  
+  /* Clean focus states */
+  :focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
   }
 }
\ No newline at end of file