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'}
</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">