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>

media_server/static/js/browser.js

@@ -250,9 +250,10 @@ function renderBrowserList(items, container) {
         return;
     }
 
-    items.forEach(item => {
+    items.forEach((item, idx) => {
         const row = document.createElement('div');
         row.className = 'browser-list-item';
+        row.style.setProperty('--item-index', Math.min(idx, 20));
         row.dataset.name = item.name;
         row.dataset.type = item.type;
 
@@ -343,9 +344,10 @@ function renderBrowserGrid(items, container) {
         return;
     }
 
-    items.forEach(item => {
+    items.forEach((item, idx) => {
         const div = document.createElement('div');
         div.className = 'browser-item';
+        div.style.setProperty('--item-index', Math.min(idx, 20));
         div.dataset.name = item.name;
         div.dataset.type = item.type;
 
@@ -870,7 +872,7 @@ function showManageFoldersDialog() {
 }
 
 function closeFolderDialog() {
-    document.getElementById('folderDialog').close();
+    closeDialog(document.getElementById('folderDialog'));
 }
 
 async function saveFolder(event) {

media_server/static/js/callbacks.js

@@ -124,7 +124,7 @@ async function closeCallbackDialog() {
 
     const dialog = document.getElementById('callbackDialog');
     callbackFormDirty = false;
-    dialog.close();
+    closeDialog(dialog);
     document.body.classList.remove('dialog-open');
 }
 

media_server/static/js/core.js

@@ -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); }

media_server/static/js/links.js

@@ -329,7 +329,7 @@ async function closeLinkDialog() {
 
     const dialog = document.getElementById('linkDialog');
     linkFormDirty = false;
-    dialog.close();
+    closeDialog(dialog);
     document.body.classList.remove('dialog-open');
 }
 

media_server/static/js/scripts.js

@@ -283,7 +283,7 @@ async function closeScriptDialog() {
 
     const dialog = document.getElementById('scriptDialog');
     scriptFormDirty = false;
-    dialog.close();
+    closeDialog(dialog);
     document.body.classList.remove('dialog-open');
 }
 
@@ -375,7 +375,7 @@ async function deleteScriptConfirm(scriptName) {
 
 function closeExecutionDialog() {
     const dialog = document.getElementById('executionDialog');
-    dialog.close();
+    closeDialog(dialog);
     document.body.classList.remove('dialog-open');
 }