Add UI animations: dialogs, tabs, settings, browser stagger, banner pulse

- Dialog modals: scale+fade entrance/exit with animated backdrop
- Tab panels: fade-in with subtle slide on switch
- Settings sections: content slide-down on expand
- Browser grid/list items: staggered cascade entrance animation
- Connection banner: slide-in + attention pulse on disconnect
- Accessibility: prefers-reduced-motion disables all animations

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-08 19:45:02 +03:00
parent a20812ec29
commit 3cfc437599
6 changed files with 95 additions and 9 deletions

View File

@@ -331,6 +331,14 @@ function showToast(message, type = 'success') {
}, TOAST_DURATION_MS);
}
function closeDialog(dialog) {
dialog.classList.add('dialog-closing');
dialog.addEventListener('animationend', () => {
dialog.classList.remove('dialog-closing');
dialog.close();
}, { once: true });
}
function showConfirm(message) {
return new Promise((resolve) => {
const dialog = document.getElementById('confirmDialog');
@@ -344,7 +352,7 @@ function showConfirm(message) {
btnCancel.removeEventListener('click', onCancel);
btnConfirm.removeEventListener('click', onConfirm);
dialog.removeEventListener('close', onClose);
dialog.close();
closeDialog(dialog);
}
function onCancel() { cleanup(); resolve(false); }