From 43736709a96f3b9708fc4dfd2d23ba06cccef211 Mon Sep 17 00:00:00 2001
From: Gilles Soulier <gil.soulier@gmail.com>
Date: Sun, 24 May 2026 15:47:48 +0200
Subject: [PATCH] =?UTF-8?q?refactor(todos):=20formulaires=20cr=C3=A9ation?=
 =?UTF-8?q?=20et=20=C3=A9dition=20migr=C3=A9s=20vers=20Modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/TodosPage.tsx | 115 ++++++++++++++-----------------
 1 file changed, 52 insertions(+), 63 deletions(-)

diff --git a/frontend/src/pages/TodosPage.tsx b/frontend/src/pages/TodosPage.tsx
index c087bf2..b56507a 100644
--- a/frontend/src/pages/TodosPage.tsx
+++ b/frontend/src/pages/TodosPage.tsx
@@ -4,6 +4,7 @@ import type { Todo, TodoCreate, TodoFilters } from '../api/todos'
 import { fetchTodos, createTodo, updateTodo, deleteTodo, postponeTodo } from '../api/todos'
 import SwipeableRow from '../components/todos/SwipeableRow'
 import TodoForm from '../components/todos/TodoForm'
+import Modal from '../components/Modal'
 
 type EditingTodo = Todo | null
 
@@ -151,22 +152,14 @@ export default function TodosPage() {
 
       {/* Formulaire de création */}
       {showForm && (
-        <div className="glass" style={{ padding: 16, borderRadius: 10, marginBottom: 16 }}>
-          <div className="hidden lg:block">
-            <TodoForm onSubmit={handleCreate} onCancel={() => setShowForm(false)} extended />
-          </div>
-          <div className="block lg:hidden">
-            <TodoForm onSubmit={handleCreate} onCancel={() => setShowForm(false)} />
-          </div>
-        </div>
+        <Modal title="Nouvelle tâche" onClose={() => setShowForm(false)}>
+          <TodoForm onSubmit={handleCreate} onCancel={() => setShowForm(false)} extended />
+        </Modal>
       )}
 
       {/* Formulaire d'édition */}
       {editingTodo && (
-        <div className="glass" style={{ padding: 16, borderRadius: 10, marginBottom: 16, borderLeft: '3px solid var(--accent)' }}>
-          <p style={{ color: 'var(--ink-3)', fontSize: 11, fontFamily: 'var(--font-ui)', marginBottom: 8, textTransform: 'uppercase', letterSpacing: 1 }}>
-            Modifier la tâche
-          </p>
+        <Modal title="Modifier la tâche" onClose={() => setEditingTodo(null)}>
           <TodoForm
             onSubmit={data => handleUpdate(editingTodo.id, data)}
             onCancel={() => setEditingTodo(null)}
@@ -182,7 +175,7 @@ export default function TodosPage() {
               tags: editingTodo.tags,
             }}
           />
-        </div>
+        </Modal>
       )}
 
       {loading && (
@@ -377,58 +370,54 @@ export default function TodosPage() {
       </div>
 
       {/* FAB mobile (au-dessus de la barre de navigation) */}
-      {!showForm && (
-        <button
-          className="lg:hidden"
-          onClick={() => setShowForm(true)}
-          aria-label="Nouvelle tâche"
-          style={{
-            position: 'fixed',
-            bottom: 72,
-            right: 20,
-            width: 56,
-            height: 56,
-            borderRadius: '50%',
-            background: 'var(--accent)',
-            color: '#1d2021',
-            border: 'none',
-            fontSize: 28,
-            cursor: 'pointer',
-            boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            lineHeight: 1,
-          }}
-        >+</button>
-      )}
+      <button
+        className="lg:hidden"
+        onClick={() => setShowForm(true)}
+        aria-label="Nouvelle tâche"
+        style={{
+          position: 'fixed',
+          bottom: 72,
+          right: 20,
+          width: 56,
+          height: 56,
+          borderRadius: '50%',
+          background: 'var(--accent)',
+          color: '#1d2021',
+          border: 'none',
+          fontSize: 28,
+          cursor: 'pointer',
+          boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          lineHeight: 1,
+        }}
+      >+</button>
 
       {/* Bouton création laptop */}
-      {!showForm && (
-        <button
-          className="hidden lg:flex"
-          onClick={() => setShowForm(true)}
-          style={{
-            position: 'fixed',
-            bottom: 24,
-            right: 24,
-            padding: '10px 20px',
-            borderRadius: 8,
-            background: 'var(--accent)',
-            color: '#1d2021',
-            border: 'none',
-            cursor: 'pointer',
-            fontFamily: 'var(--font-ui)',
-            fontWeight: 600,
-            fontSize: 14,
-            boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
-            alignItems: 'center',
-            gap: 6,
-          }}
-        >
-          + Nouvelle tâche
-        </button>
-      )}
+      <button
+        className="hidden lg:flex"
+        onClick={() => setShowForm(true)}
+        style={{
+          position: 'fixed',
+          bottom: 24,
+          right: 24,
+          padding: '10px 20px',
+          borderRadius: 8,
+          background: 'var(--accent)',
+          color: '#1d2021',
+          border: 'none',
+          cursor: 'pointer',
+          fontFamily: 'var(--font-ui)',
+          fontWeight: 600,
+          fontSize: 14,
+          boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
+          alignItems: 'center',
+          gap: 6,
+        }}
+      >
+        + Nouvelle tâche
+      </button>
     </div>
   )
 }