From 3d7d61ee8be2b4bd3efb3b1f25fda1f3c5a46065 Mon Sep 17 00:00:00 2001
From: Chris Veleris <chrisveleris@gmail.com>
Date: Mon, 20 Oct 2025 12:12:34 +0300
Subject: [PATCH] Fix note modal deletion confirmation box

---
 frontend/components/Note/NoteModal.tsx | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/frontend/components/Note/NoteModal.tsx b/frontend/components/Note/NoteModal.tsx
index c4806a7..8e67bfd 100644
--- a/frontend/components/Note/NoteModal.tsx
+++ b/frontend/components/Note/NoteModal.tsx
@@ -14,6 +14,7 @@ import { Tag } from '../../entities/Tag';
 import { useStore } from '../../store/useStore';
 import { useTranslation } from 'react-i18next';
 import ProjectDropdown from '../Shared/ProjectDropdown';
+import ConfirmDialog from '../Shared/ConfirmDialog';
 import {
     EyeIcon,
     PencilIcon,
@@ -61,6 +62,7 @@ const NoteModal: React.FC<NoteModalProps> = ({
     const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
     const [isClosing, setIsClosing] = useState(false);
     const [activeTab, setActiveTab] = useState<'edit' | 'preview'>('edit');
+    const [showConfirmDialog, setShowConfirmDialog] = useState(false);
 
     // Project-related state
     const [filteredProjects, setFilteredProjects] = useState<Project[]>([]);
@@ -670,7 +672,9 @@ const NoteModal: React.FC<NoteModalProps> = ({
                                         {note && note.uid && onDelete && (
                                             <button
                                                 type="button"
-                                                onClick={handleDeleteNote}
+                                                onClick={() =>
+                                                    setShowConfirmDialog(true)
+                                                }
                                                 className="p-2 border border-red-300 dark:border-red-600 text-red-600 dark:text-red-400 rounded-md hover:bg-red-50 dark:hover:bg-red-900/20 focus:outline-none transition duration-150 ease-in-out"
                                                 title={t(
                                                     'common.delete',
@@ -713,6 +717,24 @@ const NoteModal: React.FC<NoteModalProps> = ({
                     </div>
                 </div>
             </div>
+
+            {/* Confirmation Dialog for Delete */}
+            {showConfirmDialog && (
+                <ConfirmDialog
+                    title={t('modals.deleteNote.title', 'Delete Note')}
+                    message={
+                        t('modals.deleteNote.message', {
+                            noteTitle: formData.title,
+                        }) ||
+                        `Are you sure you want to delete the note "${formData.title}"?`
+                    }
+                    onConfirm={async () => {
+                        await handleDeleteNote();
+                        setShowConfirmDialog(false);
+                    }}
+                    onCancel={() => setShowConfirmDialog(false)}
+                />
+            )}
         </>
     );
 };