From a2c717c2e25e6b60cec72822f0f116cb47e069f7 Mon Sep 17 00:00:00 2001
From: drelich <david.relich@me.com>
Date: Tue, 17 Mar 2026 00:24:47 +0100
Subject: [PATCH] Add visual hint for delete confirmation

- Shows 'Click again to delete' text when delete button is clicked once
- Text appears next to the red delete button in confirmation state
- Makes the double-click deletion flow much more intuitive
- Button also stays visible (opacity-100) during confirmation state
- Text styled in red to match the delete action
---
 src/components/NotesList.tsx | 33 ++++++++++++++++++++-------------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/NotesList.tsx b/src/components/NotesList.tsx
index c0e01e8..23bbe17 100644
--- a/src/components/NotesList.tsx
+++ b/src/components/NotesList.tsx
@@ -160,19 +160,26 @@ export function NotesList({
                     {note.title || 'Untitled'}
                   </h3>
                 </div>
-                <button
-                  onClick={(e) => handleDeleteClick(note, e)}
-                  className={`ml-2 p-1 rounded transition-all opacity-0 group-hover:opacity-100 ${
-                    deleteClickedId === note.id
-                      ? 'bg-red-600 text-white'
-                      : 'hover:bg-red-100 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400'
-                  }`}
-                  title={deleteClickedId === note.id ? "Click again to confirm deletion" : "Delete"}
-                >
-                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                  </svg>
-                </button>
+                <div className="flex items-center gap-2">
+                  {deleteClickedId === note.id && (
+                    <span className="text-xs text-red-600 dark:text-red-400 font-medium whitespace-nowrap">
+                      Click again to delete
+                    </span>
+                  )}
+                  <button
+                    onClick={(e) => handleDeleteClick(note, e)}
+                    className={`p-1 rounded transition-all opacity-0 group-hover:opacity-100 ${
+                      deleteClickedId === note.id
+                        ? 'bg-red-600 text-white opacity-100'
+                        : 'hover:bg-red-100 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400'
+                    }`}
+                    title={deleteClickedId === note.id ? "Click again to confirm deletion" : "Delete"}
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                  </button>
+                </div>
               </div>
 
               <div className="flex items-center text-xs text-gray-500 dark:text-gray-400 mb-2">