From 54287af7d0aae6b09673446b535403a9fc2ac045 Mon Sep 17 00:00:00 2001
From: Cosmo <cosmo@digital-home.site>
Date: Thu, 23 Apr 2026 06:32:35 +0000
Subject: [PATCH] feat(notes): replace native confirm with styled delete modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 components/NotesTab.tsx | 79 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 78 insertions(+), 1 deletion(-)

diff --git a/components/NotesTab.tsx b/components/NotesTab.tsx
index 4f8b8b5..935c3c7 100644
--- a/components/NotesTab.tsx
+++ b/components/NotesTab.tsx
@@ -28,6 +28,7 @@ export default function NotesTab() {
   const [activeNote, setActiveNote] = useState<Note | null>(null)
   const [showCreate, setShowCreate] = useState(false)
   const [newItemText, setNewItemText] = useState('')
+  const [confirmDelete, setConfirmDelete] = useState<Note | null>(null)
 
   const load = useCallback(async () => {
     try {
@@ -232,7 +233,7 @@ export default function NotesTab() {
                     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,
                   background: 'rgba(239,68,68,0.08)',
                   display: 'flex', alignItems: 'center', justifyContent: 'center',
@@ -381,6 +382,82 @@ export default function NotesTab() {
           </>
         )}
       </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>
   )
 }