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

@@ -160,11 +160,17 @@ export function NotesList({
                     {note.title || 'Untitled'}
                   </h3>
                 </div>
+                <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={`ml-2 p-1 rounded transition-all opacity-0 group-hover:opacity-100 ${
+                    className={`p-1 rounded transition-all opacity-0 group-hover:opacity-100 ${
                       deleteClickedId === note.id
-                      ? 'bg-red-600 text-white'
+                        ? '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"}
@@ -174,6 +180,7 @@ export function NotesList({
                     </svg>
                   </button>
                 </div>
+              </div>
 
               <div className="flex items-center text-xs text-gray-500 dark:text-gray-400 mb-2">
                 <span>{formatDate(note.modified)}</span>