From 72cd76c77be111de73fb436dde08cf15ab8e1ac4 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Mon, 17 Nov 2025 08:29:26 +0100
Subject: [PATCH] style(NotesList): enhance delete confirmation UI with
 improved styling and dynamic note title display

---
 src/components/notes/NotesList.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/notes/NotesList.tsx b/src/components/notes/NotesList.tsx
index 9335327..d84907e 100644
--- a/src/components/notes/NotesList.tsx
+++ b/src/components/notes/NotesList.tsx
@@ -224,20 +224,28 @@ export function NotesList({
 
                       {/* Delete Confirmation */}
                       {showDeleteConfirm === note.id && (
-                        <div className="absolute inset-0 bg-[var(--destructive)]/5 border border-[var(--destructive)]/20 rounded-lg p-3 backdrop-blur-sm">
-                          <div className="text-sm text-[var(--foreground)] mb-2">
-                            Supprimer cette note ?
+                        <div
+                          className="absolute inset-0 rounded-lg p-3 backdrop-blur-md z-10"
+                          style={{
+                            backgroundColor:
+                              'color-mix(in srgb, var(--destructive) 15%, var(--card))',
+                            border:
+                              '1px solid color-mix(in srgb, var(--destructive) 40%, var(--border))',
+                          }}
+                        >
+                          <div className="text-sm font-medium text-[var(--foreground)] mb-2 line-clamp-1">
+                            Supprimer "{getNoteTitle(note.content)}" ?
                           </div>
                           <div className="flex gap-2">
                             <button
                               onClick={() => handleDeleteConfirm(note.id)}
-                              className="px-2 py-1 bg-[var(--destructive)] text-[var(--primary-foreground)] rounded text-xs hover:bg-[var(--destructive)]/90"
+                              className="px-2 py-1 bg-[var(--destructive)] text-[var(--primary-foreground)] rounded text-xs hover:bg-[var(--destructive)]/90 transition-colors"
                             >
                               Supprimer
                             </button>
                             <button
                               onClick={handleDeleteCancel}
-                              className="px-2 py-1 bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)] rounded text-xs hover:bg-[var(--card-hover)]"
+                              className="px-2 py-1 bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)] rounded text-xs hover:bg-[var(--card-hover)] transition-colors"
                             >
                               Annuler
                             </button>