feat(notes): replace native confirm with styled delete modal
All checks were successful
Deploy / deploy (push) Successful in 3m16s
All checks were successful
Deploy / deploy (push) Successful in 3m16s
Native browser confirm() looked out of place on the dashboard. Replaced with a glassmorphism modal matching the rest of the UI — trash icon, note title preview, Cancel/Delete buttons with proper styling.
This commit is contained in:
@@ -28,6 +28,7 @@ export default function NotesTab() {
|
|||||||
const [activeNote, setActiveNote] = useState<Note | null>(null)
|
const [activeNote, setActiveNote] = useState<Note | null>(null)
|
||||||
const [showCreate, setShowCreate] = useState(false)
|
const [showCreate, setShowCreate] = useState(false)
|
||||||
const [newItemText, setNewItemText] = useState('')
|
const [newItemText, setNewItemText] = useState('')
|
||||||
|
const [confirmDelete, setConfirmDelete] = useState<Note | null>(null)
|
||||||
|
|
||||||
const load = useCallback(async () => {
|
const load = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
@@ -232,7 +233,7 @@ export default function NotesTab() {
|
|||||||
fontFamily: 'inherit', flex: 1, minWidth: 0,
|
fontFamily: 'inherit', flex: 1, minWidth: 0,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<button onClick={() => { if (confirm('Удалить заметку?')) deleteNote(activeNote.id) }} style={{
|
<button onClick={() => setConfirmDelete(activeNote)} style={{
|
||||||
width: 32, height: 32, borderRadius: 10,
|
width: 32, height: 32, borderRadius: 10,
|
||||||
background: 'rgba(239,68,68,0.08)',
|
background: 'rgba(239,68,68,0.08)',
|
||||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||||
@@ -381,6 +382,82 @@ export default function NotesTab() {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Delete confirm modal */}
|
||||||
|
{confirmDelete && (
|
||||||
|
<div
|
||||||
|
onClick={() => setConfirmDelete(null)}
|
||||||
|
style={{
|
||||||
|
position: 'fixed', inset: 0, zIndex: 100,
|
||||||
|
background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(12px)',
|
||||||
|
WebkitBackdropFilter: 'blur(12px)',
|
||||||
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||||
|
padding: 24,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
onClick={e => e.stopPropagation()}
|
||||||
|
style={{
|
||||||
|
width: '100%', maxWidth: 400,
|
||||||
|
background: 'var(--card-bg)',
|
||||||
|
border: '1px solid var(--card-border)',
|
||||||
|
borderRadius: 24, padding: 28,
|
||||||
|
boxShadow: '0 20px 60px rgba(0,0,0,0.5)',
|
||||||
|
display: 'flex', flexDirection: 'column', gap: 20,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{
|
||||||
|
width: 56, height: 56, borderRadius: 18,
|
||||||
|
background: 'rgba(239,68,68,0.1)',
|
||||||
|
border: '1px solid rgba(239,68,68,0.2)',
|
||||||
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||||
|
color: '#f87171',
|
||||||
|
margin: '0 auto',
|
||||||
|
}}>
|
||||||
|
<Trash2 size={24} />
|
||||||
|
</div>
|
||||||
|
<div style={{ textAlign: 'center' }}>
|
||||||
|
<div style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)', marginBottom: 6 }}>
|
||||||
|
{confirmDelete.type === 'shopping' ? 'Удалить список?' : 'Удалить заметку?'}
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
|
||||||
|
«{confirmDelete.title || 'Без названия'}» будет удалена безвозвратно
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: 10 }}>
|
||||||
|
<button
|
||||||
|
onClick={() => setConfirmDelete(null)}
|
||||||
|
style={{
|
||||||
|
flex: 1, padding: '14px', borderRadius: 14,
|
||||||
|
background: 'rgba(255,255,255,0.04)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.08)',
|
||||||
|
color: 'var(--text-primary)',
|
||||||
|
fontSize: 14, fontWeight: 600,
|
||||||
|
fontFamily: 'inherit',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Отмена
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
deleteNote(confirmDelete.id)
|
||||||
|
setConfirmDelete(null)
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
flex: 1, padding: '14px', borderRadius: 14,
|
||||||
|
background: 'linear-gradient(135deg, rgba(239,68,68,0.3), rgba(239,68,68,0.2))',
|
||||||
|
border: '1px solid rgba(239,68,68,0.35)',
|
||||||
|
color: '#fca5a5',
|
||||||
|
fontSize: 14, fontWeight: 600,
|
||||||
|
fontFamily: 'inherit',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Удалить
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user