Add rich dashboard animations with reduced-motion support

README.md

@@ -23,6 +23,7 @@ Media Max ist ein kompaktes Media-Control-Dashboard für Radarr, Sonarr und SABn
 - RAID-Rebuild-Fortschritt, Geschwindigkeit, Restzeit, Plattenmodell, SMART, Temperatur und Hersteller-Seriennummer
 - Parallele Hintergrundscans mit konfigurierbarer Worker-Anzahl
 - PWA-Unterstützung für HTTPS-fähige Installationen auf Desktop und Android
+- Animierte Ansichtswechsel, gestaffelte Karten, Filter-Ergebnisse, aufklappende Serien und Einstellungen, Live-Status und fließende Fortschrittsanzeigen; berücksichtigt automatisch „Bewegung reduzieren“ im Betriebssystem
 
 ## Konfiguration
 
@@ -212,6 +213,7 @@ Wenn eine PWA-Installation in Chrome nicht angeboten wird, muss Media Max über
 ```bash
 python -m unittest discover -s tests -v
 node --check static/dashboard.js
+node --test tests/test_dashboard_motion.js
 ```
 
 Die Tests verwenden gemockte Dienste und benötigen keine Medienbibliothek oder API-Schlüssel.

static/dashboard.css

@@ -16,6 +16,8 @@
   --amber: #e9b765;
   --red: #ed858b;
   --purple: #b397e9;
+  --motion-ease: cubic-bezier(.22, 1, .36, 1);
+  --motion-fast: 180ms;
 }
 * { box-sizing: border-box; }
 html { scroll-behavior: smooth; }
@@ -96,6 +98,55 @@ main { max-width: 1800px; margin: 0 auto; padding: 29px 30px 48px; }
 .graphics-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }.graphics-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.graphics-meta-grid small { color: var(--muted); display: block; font-size: 10px; }.graphics-meta-grid strong { display: block; margin-top: 5px; font-size: 13px; font-weight: 500; }.graphics-details { display: grid; gap: 8px; margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }.graphics-process { display: flex; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 11px; flex-wrap: wrap; }.graphics-process strong { flex: 1; min-width: 150px; overflow-wrap: anywhere; font-weight: 550; }.graphics-process span { color: var(--muted); }
 .empty-state { padding: 30px 16px; text-align: center; color: var(--muted); font-size: 12px; }.empty-state > .icon { color: var(--green); display: block; margin: 0 auto 10px; }.banner, .notice { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: 7px; margin-bottom: 20px; color: #efb2b5; border: 1px solid #4a2a31; background: #26191e; font-size: 12px; overflow-wrap: anywhere; }.notice { color: var(--accent-text); border-color: var(--accent-border); background: var(--accent-soft); }
 .settings-modal { width: min(440px, calc(100vw - 30px)); max-height: calc(100dvh - 40px); overflow-y: auto; border: 1px solid #3a424d; border-radius: 12px; padding: 24px; background: #191c21; color: var(--text); }.settings-modal::backdrop { background: #000a; }.settings-modal h2 { font-size: 20px; }.settings-modal p { font-size: 11px; margin-top: 5px; }.settings-modal label:not(.setting-toggle) { display: block; margin: 18px 0 7px; font-size: 12px; }.settings-modal select { width: 100%; height: 40px; padding: 0 10px; font-size: 12px; }.setting-toggle { display: flex; align-items: center; gap: 10px; margin-top: 23px; font-size: 12px; }.setting-toggle input { accent-color: var(--accent); width: 16px; height: 16px; }.settings-actions { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px; }.settings-actions button { font-size: 12px; }
+
+/* Keep motion short and local: monitoring updates never animate entire views. */
+button, input, select, .panel, .series, .raid-disk, .badge, .state {
+  transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
+}
+button { transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); }
+button:active:not(:disabled) { transform: scale(.97); }
+.sidebar-shade:active:not(:disabled) { transform: none; }
+.nav button .icon, .sidebar-bottom button .icon, .summary-icon, .brand-icon { transition: transform 280ms var(--motion-ease); }
+.nav button:hover .icon, .nav button:focus-visible .icon { transform: translateX(2px); }
+.nav button.active { animation: nav-select 300ms var(--motion-ease); }
+.brand:hover .brand-icon { transform: rotate(-8deg) scale(1.08); }
+#settingsOpen:hover .icon { transform: rotate(35deg); }
+.summary-card { transition: transform 240ms var(--motion-ease), box-shadow 240ms ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
+.summary-card[data-go]:hover, .summary-card[data-go]:focus-visible { transform: translateY(-4px); box-shadow: 0 8px 24px #0004; }
+.summary-card[data-go]:active { transform: translateY(-1px) scale(.98); }
+.summary-card[data-go]:hover .summary-icon { transform: scale(1.1) rotate(-4deg); }
+.panel:hover, .series:hover, .raid-disk:hover { border-color: #414650; }
+input:focus, select:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px #f4ce5412; }
+.search-field .icon { transition: color var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); }
+.search-field:focus-within .icon { color: var(--accent); transform: scale(1.08); }
+tbody tr { transition: background-color var(--motion-fast) ease; }
+.badge:hover, .state:hover { border-color: #596373; }
+.series summary::after { transition: transform 240ms var(--motion-ease); }
+.series summary { transition: background-color var(--motion-fast) ease; }
+.series summary:hover { background: #1b1e24; }
+.series[open] > .table-scroll { animation: reveal-content 320ms var(--motion-ease); }
+.track > span { position: relative; overflow: hidden; transition: width 650ms var(--motion-ease); }
+#activeDownloadsBody .state.downloading { animation: status-glow 2.8s ease-in-out infinite; }
+#activeDownloadsBody tr:has(.state.downloading) .track > span::after, .recovery-box .track > span::after {
+  content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #fff5, transparent); transform: translateX(-100%); animation: progress-sweep 2.4s ease-in-out infinite;
+}
+.live-label .status-dot { animation: live-pulse 2.8s ease-in-out infinite; }
+.is-scanning .icon { animation: scan-spin 1.1s linear infinite; }
+.scan-status.running { animation: status-glow 2.4s ease-in-out infinite; }
+.banner:not(.hidden), .notice:not(.hidden), .recovery-box:not(.hidden) { animation: reveal-content 320ms var(--motion-ease); }
+.empty-state > .icon { animation: success-pop 500ms var(--motion-ease); }
+.settings-modal[open] { animation: modal-enter 320ms var(--motion-ease); }
+.settings-modal[open]::backdrop { animation: fade-in 240ms ease; }
+body.sidebar-open .sidebar-shade { animation: fade-in 220ms ease; }
+@keyframes nav-select { from { box-shadow: inset 0 0 0 20px #ffffff25; } to { box-shadow: inset 0 0 0 0 #ffffff00; } }
+@keyframes reveal-content { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes modal-enter { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
+@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes success-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
+@keyframes scan-spin { to { transform: rotate(360deg); } }
+@keyframes live-pulse { 0%, 100% { box-shadow: 0 0 0 0 #58caa000; } 50% { box-shadow: 0 0 0 5px #58caa020; } }
+@keyframes status-glow { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
+@keyframes progress-sweep { to { transform: translateX(100%); } }
 @media (max-width: 1250px) {
   .sidebar { width: 212px; }.app-shell { margin-left: 212px; }.brand { padding: 0 20px; font-size: 21px; }.topbar { padding: 0 22px; }main { padding: 25px 22px 40px; }
   .summary-card { gap: 10px; padding: 17px 13px; }.summary-card strong { font-size: 23px; }.summary-icon { width: 34px; height: 34px; }
@@ -116,5 +167,8 @@ main { max-width: 1800px; margin: 0 auto; padding: 29px 30px 48px; }
   .service-list { grid-template-columns: 1fr; }.summary-icon { display: none; }.language-metrics { grid-template-columns: 1fr 1fr; }.scan-control select { max-width: 88px; }.topbar { gap: 6px; }.actions { gap: 5px; }.breadcrumb strong { font-size: 11px; }
 }
 @media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
+  *, *::before, *::after, *::backdrop { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
+  button:active:not(:disabled), .summary-card[data-go]:hover, .summary-card[data-go]:focus-visible, .summary-card[data-go]:active,
+  .nav button:hover .icon, .nav button:focus-visible .icon, .brand:hover .brand-icon, #settingsOpen:hover .icon,
+  .summary-card[data-go]:hover .summary-icon, .search-field:focus-within .icon { transform: none; }
 }

static/dashboard.js

@@ -5,7 +5,14 @@ const $ = selector => document.querySelector(selector);
 const $$ = selector => [...document.querySelectorAll(selector)];
 const html = value => String(value ?? '—').replace(/[&<>"']/g, char => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'}[char]));
 const icon = name => `<svg class="icon" aria-hidden="true"><use href="#icon-${name}"/></svg>`;
-const set = (id, value) => { const node = $(`#${id}`); if (node) node.textContent = value; };
+const set = (id, value) => {
+  const node = $(`#${id}`);
+  if (!node || node.textContent === String(value)) return;
+  node.textContent = value;
+  if (node.matches('.summary-card strong, .metric-line strong, .nav-count')) {
+    animate(node, [{opacity: .45, transform: 'translateY(3px)'}, {opacity: 1, transform: 'translateY(0)'}], {duration: 300});
+  }
+};
 const percent = value => Math.max(0, Math.min(100, Number(value) || 0));
 const bar = (id, value) => { const node = $(`#${id}`); if (node) node.style.width = `${percent(value)}%`; };
 let language = localStorage.getItem('dashboard-language') === 'en' ? 'en' : 'de';
@@ -14,6 +21,45 @@ const number = value => Number(value || 0).toLocaleString(language === 'en' ? 'e
 const empty = message => `<div class="empty-state">${html(message)}</div>`;
 let activeView = 'dashboard';
 const snapshots = {};
+const motionPreference = window.matchMedia('(prefers-reduced-motion: reduce)');
+const entranceAnimations = new WeakMap();
+const renderedContainers = new WeakSet();
+let viewInitialized = false;
+
+function animate(node, frames, options = {}) {
+  if (motionPreference.matches || document.hidden || !node.getClientRects().length || typeof node.animate !== 'function') return;
+  entranceAnimations.get(node)?.cancel();
+  const animation = node.animate(frames, {duration: 420, easing: 'cubic-bezier(.22, 1, .36, 1)', fill: 'backwards', ...options});
+  entranceAnimations.set(node, animation);
+}
+
+motionPreference.addEventListener('change', event => {
+  if (event.matches) document.getAnimations().forEach(animation => animation.cancel());
+});
+
+function animateEntrance(root) {
+  const targets = root.querySelectorAll('.page-heading, .summary-card, .panel, .toolbar, .series, .service-row, .raid-disk, .disk-row, .graphics-process');
+  // Bound the work even when a media library contains thousands of entries.
+  [...targets].slice(0, 24).forEach((node, index) => {
+    animate(node, [{opacity: 0, transform: 'translateY(12px)'}, {opacity: 1, transform: 'translateY(0)'}], {delay: Math.min(index * 35, 210)});
+  });
+}
+
+function renderContent(id, markup) {
+  const root = $(`#${id}`);
+  if (!root || root.innerHTML === markup) return;
+  const previousWidths = [...root.querySelectorAll('.track > span')].map(node => node.style.width);
+  root.innerHTML = markup;
+  root.querySelectorAll('.track > span').forEach((node, index) => {
+    const from = previousWidths[index] || '0%';
+    if (from !== node.style.width) animate(node, [{width: from}, {width: node.style.width}], {duration: 650});
+  });
+  // Polling updates must not make whole panels re-enter every few seconds.
+  if (!renderedContainers.has(root)) {
+    animateEntrance(root);
+    renderedContainers.add(root);
+  }
+}
 
 function closeSidebar() {
   document.body.classList.remove('sidebar-open');
@@ -24,6 +70,7 @@ function closeSidebar() {
 function switchView(view) {
   const button = $(`.nav button[data-view="${view}"]`);
   if (!button || !$(`#${view}`)) return;
+  const changed = !viewInitialized || activeView !== view;
   activeView = view;
   $$('.view').forEach(node => node.classList.toggle('active', node.id === view));
   $$('.nav button').forEach(node => {
@@ -35,6 +82,10 @@ function switchView(view) {
   sessionStorage.setItem('dashboard-active-view', view);
   if (['radarr', 'sonarr', 'missing'].includes(view)) $('#scanSource').value = view;
   closeSidebar();
+  if (changed) {
+    animateEntrance($(`#${view}`));
+    viewInitialized = true;
+  }
 }
 
 function translateLayout() {
@@ -107,6 +158,15 @@ function applyFilters(prefix) {
   $(`#${prefix}NoResults`)?.classList.toggle('hidden', visible > 0);
 }
 
+function animateFilterResults(prefix) {
+  const root = $(prefix === 'movie' ? '#movies tbody' : '#seriesList');
+  if (!root) return;
+  const selector = prefix === 'movie' ? 'tr[data-title]:not(.hidden)' : '.series:not(.hidden)';
+  [...root.querySelectorAll(selector)].slice(0, 12).forEach((node, index) => {
+    animate(node, [{opacity: .35}, {opacity: 1}], {duration: 240, delay: index * 15});
+  });
+}
+
 function updateSeasonDividers(root) {
   root.querySelectorAll('.season-divider').forEach(divider => {
     let next = divider.nextElementSibling, count = 0;
@@ -138,7 +198,9 @@ $$('[data-filter] input, [data-filter] select').forEach(input => {
   else if (input.id.endsWith('Subs')) input.value = localStorage.getItem('preferred-subs') || '';
   input.addEventListener(input.type === 'search' ? 'input' : 'change', () => {
     sessionStorage.setItem(`filter-${input.id}`, input.value);
-    applyFilters(input.closest('[data-filter]').dataset.filter);
+    const prefix = input.closest('[data-filter]').dataset.filter;
+    applyFilters(prefix);
+    animateFilterResults(prefix);
   });
 });
 
@@ -217,14 +279,14 @@ function renderSystem(data) {
   set('ramDetail', `${memory.used || '—'} / ${memory.total || '—'}`);
   bar('cpuBar', cpu); bar('ramBar', memory.percent);
   set('systemUpdated', `${t('Aktualisiert', 'Updated')} ${new Date().toLocaleTimeString(language === 'de' ? 'de-DE' : 'en-GB')}`);
-  $('#systemDetails').innerHTML = `<div><small>Load Average</small><strong>${(data.load || []).map(value => Number(value).toFixed(2)).join(' · ') || '—'}</strong></div><div><small>Uptime</small><strong>${html(duration(data.uptime_seconds))}</strong></div><div><small>${t('Prozesse', 'Processes')}</small><strong>${number(data.processes)}</strong></div>`;
+  renderContent('systemDetails', `<div><small>Load Average</small><strong>${(data.load || []).map(value => Number(value).toFixed(2)).join(' · ') || '—'}</strong></div><div><small>Uptime</small><strong>${html(duration(data.uptime_seconds))}</strong></div><div><small>${t('Prozesse', 'Processes')}</small><strong>${number(data.processes)}</strong></div>`);
-  $('#diskList').innerHTML = (data.disks || []).map(disk => `<div class="disk-row"><div>${html(disk.label)}<small>${html(disk.path)}</small></div><div class="track"><span style="width:${percent(disk.percent)}%"></span></div><div class="disk-values">${html(disk.used)} / ${html(disk.total)}<small>${percent(disk.percent).toFixed(1)}%</small></div></div>`).join('') || empty(t('Keine Laufwerke erkannt.', 'No disks detected.'));
+  renderContent('diskList', (data.disks || []).map(disk => `<div class="disk-row"><div>${html(disk.label)}<small>${html(disk.path)}</small></div><div class="track"><span style="width:${percent(disk.percent)}%"></span></div><div class="disk-values">${html(disk.used)} / ${html(disk.total)}<small>${percent(disk.percent).toFixed(1)}%</small></div></div>`).join('') || empty(t('Keine Laufwerke erkannt.', 'No disks detected.')));
 }
 
 function renderServices(data) {
   set('serviceSummary', `${data.online || 0} / ${data.total || 0} online`);
   const labels = {online: t('Aktiv', 'Online'), offline: 'Offline', timeout: 'Timeout', checking: t('Prüfe …', 'Checking …'), error: t('Fehler', 'Error')};
-  $('#serviceList').innerHTML = (data.services || []).map(service => `<div class="service-row"><span class="service-logo">${html(service.name.slice(0, 1))}</span><div><strong>${html(service.name)}</strong><small title="${html(service.detail)}">${html(service.detail || '—')}</small></div><span class="service-status ${html(service.status)}">${html(labels[service.status] || service.label)}</span></div>`).join('');
+  renderContent('serviceList', (data.services || []).map(service => `<div class="service-row"><span class="service-logo">${html(service.name.slice(0, 1))}</span><div><strong>${html(service.name)}</strong><small title="${html(service.detail)}">${html(service.detail || '—')}</small></div><span class="service-status ${html(service.status)}">${html(labels[service.status] || service.label)}</span></div>`).join(''));
 }
 
 function downloadRow(item) {
@@ -246,7 +308,7 @@ function renderDownloads(data) {
   const others = items.filter(item => !active.includes(item));
   for (const [id, list] of [['activeDownloads', active], ['otherDownloads', others]]) {
     set(`${id}Count`, number(list.length));
-    $(`#${id}Body`).innerHTML = list.length ? list.map(downloadRow).join('') : `<tr><td colspan="7" class="empty-state">${t('Keine Einträge.', 'No entries.')}</td></tr>`;
+    renderContent(`${id}Body`, list.length ? list.map(downloadRow).join('') : `<tr><td colspan="7" class="empty-state">${t('Keine Einträge.', 'No entries.')}</td></tr>`);
   }
 }
 
@@ -259,7 +321,7 @@ function renderDatastore(data) {
   set('datastoreUpdated', storage.scanned_at ? `${t('Speicher-Scan', 'Storage scan')} ${new Date(storage.scanned_at * 1000).toLocaleTimeString()}` : t('Nicht verfügbar', 'Unavailable'));
   $('#storageWarning').classList.toggle('hidden', !storage.error && !storage.warning);
   set('storageWarning', storage.error || storage.warning || '');
-  $('#datastoreCategories').innerHTML = (storage.categories || []).map(category => `<div class="category-row"><div class="metric-line"><span>${html(category.label)}</span><strong>${html(category.size || '0 B')}</strong></div><div class="track"><span style="width:${percent(category.percent)}%"></span></div><small>${Number(category.percent || 0).toFixed(1)}% ${t('vom belegten Speicher', 'of used storage')} · ${number(category.files)} ${t('Dateien', 'files')}</small></div>`).join('') || empty(t('Keine Kategorien erkannt.', 'No categories detected.'));
+  renderContent('datastoreCategories', (storage.categories || []).map(category => `<div class="category-row"><div class="metric-line"><span>${html(category.label)}</span><strong>${html(category.size || '0 B')}</strong></div><div class="track"><span style="width:${percent(category.percent)}%"></span></div><small>${Number(category.percent || 0).toFixed(1)}% ${t('vom belegten Speicher', 'of used storage')} · ${number(category.files)} ${t('Dateien', 'files')}</small></div>`).join('') || empty(t('Keine Kategorien erkannt.', 'No categories detected.')));
   const io = data.io_pressure || {}, some = Number(io.some?.avg10) || 0, full = Number(io.full?.avg10) || 0;
   const pressure = Math.max(some, full);
   set('ioPressureLabel', io.available ? pressure >= 20 ? t('Hoch', 'High') : pressure >= 5 ? t('Beobachten', 'Watch') : t('Normal', 'Normal') : t('Nicht verfügbar', 'Unavailable'));
@@ -267,11 +329,11 @@ function renderDatastore(data) {
   set('raidDevice', raid.device || '—'); set('raidStatusBadge', raid.label || 'UNKNOWN');
   $('#raidStatusBadge').className = `badge raid-status ${raid.status || 'unknown'}`;
   $('#raidWarning').classList.toggle('hidden', !raid.error && !raid.warning); set('raidWarning', raid.error || raid.warning || '');
-  $('#raidSummary').innerHTML = `<div><small>Level</small><strong>${html(raid.level)}</strong></div><div><small>${t('Aktive Laufwerke', 'Active drives')}</small><strong>${html(raid.active_devices)} / ${html(raid.raid_devices)}</strong></div><div><small>${t('Fehlend', 'Missing')}</small><strong>${html(raid.failed_devices ?? '—')}</strong></div>`;
+  renderContent('raidSummary', `<div><small>Level</small><strong>${html(raid.level)}</strong></div><div><small>${t('Aktive Laufwerke', 'Active drives')}</small><strong>${html(raid.active_devices)} / ${html(raid.raid_devices)}</strong></div><div><small>${t('Fehlend', 'Missing')}</small><strong>${html(raid.failed_devices ?? '—')}</strong></div>`);
   const recovery = raid.recovery || {};
   $('#raidRecovery').classList.toggle('hidden', !recovery.active); set('raidRecoveryPercent', `${Number(recovery.percent || 0).toFixed(1)}%`);
   set('raidRecoverySpeed', recovery.speed || '—'); set('raidRecoveryFinish', recovery.finish || '—'); bar('raidRecoveryBar', recovery.percent);
-  $('#raidDisks').innerHTML = (raid.devices || []).map(disk => `<div class="raid-disk"><span class="disk-status ${html(disk.status)}"></span><div><strong>${html(disk.device)}</strong><small>Slot ${html(disk.slot)} · ${html(disk.model)}</small><small>${html(disk.size)} · Serial: ${html(disk.serial)}</small><small>SMART: ${html(disk.smart || t('Nicht aktiviert', 'Not enabled'))} · ${html(disk.temperature || '—')}</small></div><b>${html(disk.status)}</b></div>`).join('') || empty(t('Keine RAID-Mitglieder erkannt.', 'No RAID members detected.'));
+  renderContent('raidDisks', (raid.devices || []).map(disk => `<div class="raid-disk"><span class="disk-status ${html(disk.status)}"></span><div><strong>${html(disk.device)}</strong><small>Slot ${html(disk.slot)} · ${html(disk.model)}</small><small>${html(disk.size)} · Serial: ${html(disk.serial)}</small><small>SMART: ${html(disk.smart || t('Nicht aktiviert', 'Not enabled'))} · ${html(disk.temperature || '—')}</small></div><b>${html(disk.status)}</b></div>`).join('') || empty(t('Keine RAID-Mitglieder erkannt.', 'No RAID members detected.')));
 }
 
 const gpuValue = (value, unit = '') => value == null || value === '' ? '—' : `${html(value)}${unit}`;
@@ -284,12 +346,12 @@ function renderGraphics(data) {
   };
   const used = gpus.reduce((sum, gpu) => sum + (Number(gpu['memory.used']) || 0), 0), total = gpus.reduce((sum, gpu) => sum + (Number(gpu['memory.total']) || 0), 0);
   const metrics = [['GPUs', gpus.length], [t('GPU-Auslastung', 'GPU usage'), gpuValue(average('utilization.gpu'), '%')], ['VRAM', total ? `${(used / 1024).toFixed(1)} / ${(total / 1024).toFixed(1)} GB` : '—'], [t('Temperatur', 'Temperature'), gpuValue(average('temperature.gpu'), ' °C')]];
-  $('#graphicsSummary').innerHTML = metrics.map(([label, value]) => `<article class="summary-card"><span class="summary-icon purple">${icon('chip')}</span><div><strong>${value}</strong><span>${html(label)}</span></div></article>`).join('');
+  renderContent('graphicsSummary', metrics.map(([label, value]) => `<article class="summary-card"><span class="summary-icon purple">${icon('chip')}</span><div><strong>${value}</strong><span>${html(label)}</span></div></article>`).join(''));
-  $('#graphicsCards').innerHTML = gpus.length ? gpus.map(gpu => {
+  renderContent('graphicsCards', gpus.length ? gpus.map(gpu => {
     const used = Number(gpu['memory.used']) || 0, total = Number(gpu['memory.total']) || 0;
     return `<article class="panel"><div class="panel-heading"><div><small class="muted">GPU ${html(gpu.index)}</small><h2>${html(gpu.name)}</h2></div><span class="badge">${gpuValue(gpu['temperature.gpu'], ' °C')}</span></div><div class="graphics-meta-grid"><div><small>${t('GPU-Last', 'GPU load')}</small><strong>${gpuValue(gpu['utilization.gpu'], '%')}</strong></div><div><small>${t('Memory-Last', 'Memory load')}</small><strong>${gpuValue(gpu['utilization.memory'], '%')}</strong></div><div><small>${t('Leistung', 'Power')}</small><strong>${gpuValue(gpu['power.draw'], ' W')} / ${gpuValue(gpu['power.limit'], ' W')}</strong></div><div><small>P-State</small><strong>${html(gpu.pstate)}</strong></div></div><div class="coverage-row" style="margin-top:22px"><div class="metric-line"><span>VRAM</span><strong>${total ? `${(used / 1024).toFixed(1)} / ${(total / 1024).toFixed(1)} GB` : '—'}</strong></div><div class="track purple-track"><span style="width:${total ? percent(used / total * 100) : 0}%"></span></div></div><div class="graphics-details"><span>${t('Treiber', 'Driver')}: ${html(gpu.driver_version)} · PCI: ${html(gpu['pci.bus_id'])}</span><span>UUID: ${html(gpu.uuid)}</span><span>Serial: ${html(gpu.serial)}</span><span>Clocks: ${gpuValue(gpu['clocks.current.graphics'], ' MHz')} · Memory: ${gpuValue(gpu['clocks.current.memory'], ' MHz')}</span><span>Fan: ${gpuValue(gpu['fan.speed'], '%')} · Compute: ${html(gpu.compute_mode)}</span></div></article>`;
-  }).join('') : `<div class="panel">${empty(data.error || t('Keine NVIDIA-GPU erkannt.', 'No NVIDIA GPU detected.'))}</div>`;
+  }).join('') : `<div class="panel">${empty(data.error || t('Keine NVIDIA-GPU erkannt.', 'No NVIDIA GPU detected.'))}</div>`);
-  $('#graphicsProcesses').innerHTML = (data.processes || []).map(process => `<div class="graphics-process"><strong>${html(process.name)}</strong><span>PID ${html(process.pid)}</span><span>${html(process.memory)}</span></div>`).join('') || empty(t('Keine GPU-Prozesse erkannt.', 'No GPU processes detected.'));
+  renderContent('graphicsProcesses', (data.processes || []).map(process => `<div class="graphics-process"><strong>${html(process.name)}</strong><span>PID ${html(process.pid)}</span><span>${html(process.memory)}</span></div>`).join('') || empty(t('Keine GPU-Prozesse erkannt.', 'No GPU processes detected.')));
 }
 
 let scanRunning = false;
@@ -305,19 +367,26 @@ function renderScanStatus(data) {
       job.state === 'done' ? t('Scan abgeschlossen', 'Scan complete') : job.state === 'error' ? `${t('Scanfehler', 'Scan error')}: ${job.error}` : t('Scan bereit', 'Ready to scan');
   }
   $('#rescan').disabled = scanRunning;
+  $('#rescan').classList.toggle('is-scanning', scanRunning);
+  $('#rescan').setAttribute('aria-busy', String(scanRunning));
   const label = $('#rescan span');
   label.textContent = scanRunning ? t('Scan läuft …', 'Scanning …') : t('Neu scannen', 'Rescan');
 }
 
 $('#rescan').addEventListener('click', async () => {
-  $('#rescan').disabled = true; $('#actionError').classList.add('hidden');
+  $('#rescan').disabled = true; $('#rescan').classList.add('is-scanning');
+  $('#rescan').setAttribute('aria-busy', 'true'); $('#actionError').classList.add('hidden');
   try {
     const data = await api(`/api/rescan?source=${encodeURIComponent($('#scanSource').value)}`, {method: 'POST'});
     if (!data.ok) throw new Error(data.error || t('Scan konnte nicht gestartet werden.', 'Could not start scan.'));
     renderScanStatus(await api('/api/scan-status'));
   } catch (error) {
     set('actionError', `${t('Scan fehlgeschlagen', 'Scan failed')}: ${error.message}`); $('#actionError').classList.remove('hidden');
-  } finally { $('#rescan').disabled = scanRunning; }
+  } finally {
+    $('#rescan').disabled = scanRunning;
+    $('#rescan').classList.toggle('is-scanning', scanRunning);
+    $('#rescan').setAttribute('aria-busy', String(scanRunning));
+  }
 });
 
 const renderers = {system: renderSystem, services: renderServices, downloads: renderDownloads, datastore: renderDatastore, graphics: renderGraphics, scans: renderScanStatus};
@@ -354,4 +423,4 @@ monitor('graphics', '/api/graphics', 5000, () => renderGraphics({error: t('GPU-S
 monitor('scans', '/api/scan-status', 1500);
 if (config.sabEnabled) monitor('downloads', '/api/downloads', 4000, () => renderDownloads({error: t('SABnzbd nicht erreichbar.', 'SABnzbd unavailable.')}));
 pollLibrary();
-if ('serviceWorker' in navigator) window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js?v=8', {scope: '/'}).catch(() => {}));
+if ('serviceWorker' in navigator) window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js?v=10', {scope: '/'}).catch(() => {}));

static/sw.js

@@ -1,5 +1,5 @@
-const CACHE_NAME = 'media-max-shell-v9';
+const CACHE_NAME = 'media-max-shell-v10';
-const SHELL = ['/static/media-mark.svg', '/static/media-mark-192.png', '/static/media-mark-512.png', '/static/manifest.json', '/static/dashboard.css?v=9', '/static/dashboard.js?v=8'];
+const SHELL = ['/static/media-mark.svg', '/static/media-mark-192.png', '/static/media-mark-512.png', '/static/manifest.json', '/static/dashboard.css?v=10', '/static/dashboard.js?v=10'];
 
 self.addEventListener('install', event => {
   event.waitUntil(caches.open(CACHE_NAME).then(cache => cache.addAll(SHELL)));

templates/index.html

@@ -34,8 +34,8 @@
   <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="theme-color" content="#101113"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="yes">
   <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}"><link rel="apple-touch-icon" href="{{ url_for('static', filename='media-mark-192.png') }}"><link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='media-mark.svg') }}">
-  <link rel="stylesheet" href="{{ url_for('static', filename='dashboard.css') }}?v=9"><title>Media Max</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='dashboard.css') }}?v=10"><title>Media Max</title>
-  <script src="{{ url_for('static', filename='dashboard.js') }}?v=8" defer></script>
+  <script src="{{ url_for('static', filename='dashboard.js') }}?v=10" defer></script>
 </head>
 <body>
 <svg class="svg-definitions" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">

tests/test_dashboard_motion.js

@@ -0,0 +1,109 @@
+'use strict';
+
+const assert = require('node:assert/strict');
+const {readFileSync} = require('node:fs');
+const {test} = require('node:test');
+const vm = require('node:vm');
+
+// Load the actual helpers without bootstrapping API polling or page controls.
+const source = readFileSync(`${__dirname}/../static/dashboard.js`, 'utf8');
+const helpers = source.slice(0, source.indexOf('\nfunction closeSidebar()'));
+
+function node(overrides = {}) {
+  return {
+    textContent: '', style: {}, calls: [],
+    getClientRects: () => [1], matches: () => false,
+    querySelectorAll: () => [],
+    animate(frames, options) {
+      const animation = {cancelled: false, cancel() { this.cancelled = true; }};
+      this.calls.push({frames, options, animation});
+      return animation;
+    },
+    ...overrides,
+  };
+}
+
+function harness() {
+  const nodes = new Map([['#dashboardConfig', {textContent: '{}'}]]);
+  const preference = {matches: false, addEventListener(type, listener) { this.listener = listener; }};
+  const document = {
+    hidden: false,
+    querySelector: selector => nodes.get(selector), querySelectorAll: () => [],
+    getAnimations: () => [],
+  };
+  const context = vm.createContext({document, window: {matchMedia: () => preference}, localStorage: {getItem: () => null}});
+  vm.runInContext(helpers, context);
+  return {nodes, preference, document, context};
+}
+
+test('animations respect reduced motion, background tabs, hidden nodes and older browsers', () => {
+  const h = harness();
+  const target = node();
+  h.context.animate(target, []);
+  assert.equal(target.calls.length, 1);
+  h.preference.matches = true;
+  h.context.animate(target, []);
+  h.preference.matches = false;
+  h.document.hidden = true;
+  h.context.animate(target, []);
+  h.document.hidden = false;
+  target.getClientRects = () => [];
+  h.context.animate(target, []);
+  assert.equal(target.calls.length, 1);
+  assert.doesNotThrow(() => h.context.animate(node({animate: undefined}), []));
+});
+
+test('new animations cancel older ones and delayed entrances stay hidden until they start', () => {
+  const h = harness();
+  const target = node();
+  h.context.animate(target, []);
+  h.context.animate(target, [], {delay: 35});
+  assert.equal(target.calls[0].animation.cancelled, true);
+  assert.equal(target.calls[1].options.fill, 'backwards');
+  assert.equal(target.calls[1].options.delay, 35);
+});
+
+test('entrance work and stagger delays are bounded for large libraries', () => {
+  const h = harness();
+  const targets = Array.from({length: 1000}, () => node());
+  h.context.animateEntrance(node({querySelectorAll: () => targets}));
+  assert.equal(targets.filter(target => target.calls.length).length, 24);
+  assert.equal(targets[23].calls[0].options.delay, 210);
+});
+
+test('unchanged metrics do not animate again', () => {
+  const h = harness();
+  const target = node({matches: () => true});
+  h.nodes.set('#cpuValue', target);
+  vm.runInContext("set('cpuValue', '12.0%'); set('cpuValue', '12.0%');", h.context);
+  assert.equal(target.textContent, '12.0%');
+  assert.equal(target.calls.length, 1);
+});
+
+test('polling preserves progress and does not replay container entrances', () => {
+  const h = harness();
+  let markup = '', bars = [], writes = 0;
+  const card = node();
+  const root = node({querySelectorAll: selector => selector === '.track > span' ? bars : [card]});
+  Object.defineProperty(root, 'innerHTML', {
+    get: () => markup,
+    set(value) { markup = value; writes++; bars = [node({style: {width: value}})]; },
+  });
+  h.nodes.set('#progress', root);
+  h.context.renderContent('progress', '25%');
+  assert.equal(bars[0].calls[0].frames[0].width, '0%');
+  h.context.renderContent('progress', '40%');
+  assert.equal(bars[0].calls[0].frames[0].width, '25%');
+  assert.equal(bars[0].calls[0].frames[1].width, '40%');
+  assert.equal(card.calls.length, 1);
+  h.context.renderContent('progress', '40%');
+  assert.equal(writes, 2);
+});
+
+test('enabling reduced motion cancels animations already in flight', () => {
+  const h = harness();
+  const animation = {cancelled: false, cancel() { this.cancelled = true; }};
+  h.document.getAnimations = () => [animation];
+  h.preference.listener({matches: true});
+  assert.equal(animation.cancelled, true);
+});