davidrelich/nextcloud-notes-desktop-app
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Activity

Add visual hint for delete confirmation

Browse Source 
- 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
This commit is contained in:
drelich
2026-03-17 00:24:47 +01:00
parent 9b0a289cc8
commit a2c717c2e2
1 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/NotesList.tsx
View File

@@ -160,19 +160,26 @@ export function NotesList({
{note.title || 'Untitled'} {note.title || 'Untitled'}
</h3> </h3>
</div> </div>
<button <div className="flex items-center gap-2">
onClick={(e) => handleDeleteClick(note, e)} {deleteClickedId === note.id && (
className={`ml-2 p-1 rounded transition-all opacity-0 group-hover:opacity-100 ${ <span className="text-xs text-red-600 dark:text-red-400 font-medium whitespace-nowrap">
deleteClickedId === note.id Click again to delete
? 'bg-red-600 text-white' </span>
: 'hover:bg-red-100 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400' )}
}`} <button
title={deleteClickedId === note.id ? "Click again to confirm deletion" : "Delete"} onClick={(e) => handleDeleteClick(note, e)}
> className={`p-1 rounded transition-all opacity-0 group-hover:opacity-100 ${
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> deleteClickedId === note.id
<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" /> ? 'bg-red-600 text-white opacity-100'
</svg> : 'hover:bg-red-100 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400'
</button> }`}
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>
<div className="flex items-center text-xs text-gray-500 dark:text-gray-400 mb-2"> <div className="flex items-center text-xs text-gray-500 dark:text-gray-400 mb-2">