From 96fe4857a0fcb30ffc0017bdcb452d53ff10054a Mon Sep 17 00:00:00 2001
From: R0m1k3 <michaelschal@gmail.com>
Date: Fri, 12 Dec 2025 11:45:56 +0100
Subject: [PATCH] feat: implement mobile note detail page for viewing, editing,
 and managing notes, todos, and images.

---
 src/pages/mobile/NoteDetailPage.tsx | 35 +++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/pages/mobile/NoteDetailPage.tsx b/src/pages/mobile/NoteDetailPage.tsx
index afffd13..fe5a25a 100644
--- a/src/pages/mobile/NoteDetailPage.tsx
+++ b/src/pages/mobile/NoteDetailPage.tsx
@@ -39,6 +39,37 @@ export default function NoteDetailPage() {
   const [todoText, setTodoText] = useState("");
   const [deleteModal, setDeleteModal] = useState(false);
   const [selectedImage, setSelectedImage] = useState<string | null>(null);
+  const [titleInput, setTitleInput] = useState("");
+  const [isTitleInitialized, setIsTitleInitialized] = useState(false);
+
+  // Initial sync of title when note loads
+  useEffect(() => {
+    if (note && !isTitleInitialized) {
+      setTitleInput(note.title);
+      setIsTitleInitialized(true);
+    } else if (note && note.id !== parseInt(id || "0")) {
+      // Handle navigation between notes where id changes
+      setTitleInput(note.title);
+    }
+  }, [note, id, isTitleInitialized]);
+
+  // Debounced title update
+  useEffect(() => {
+    if (!note || !isTitleInitialized) return;
+
+    const timer = setTimeout(() => {
+      if (titleInput !== note.title) {
+        updateNote({ title: titleInput });
+      }
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, [titleInput, note, isTitleInitialized]);
+
+  // Reset initialization flag when id changes
+  useEffect(() => {
+    setIsTitleInitialized(false);
+  }, [id]);
 
   useEffect(() => {
     loadNote();
@@ -238,8 +269,8 @@ export default function NoteDetailPage() {
           type="text"
           placeholder="Titre de la note"
           className="text-xl font-semibold border-none shadow-none px-0 focus-visible:ring-0"
-          value={note.title || ""}
-          onChange={(e) => updateNote({ title: e.target.value })}
+          value={titleInput}
+          onChange={(e) => setTitleInput(e.target.value)}
         />
 
         {/* Action Buttons */}