fix(ui): honor the application animation setting globally

src/renderer/App.tsx

@@ -1122,12 +1122,13 @@ export function appendBandwidthSample(
 }
 
 interface BandwidthChartProps {
+  animationsEnabled: boolean;
   running: boolean;
   paused: boolean;
   speedHistoryRef: React.MutableRefObject<{ time: number; speed: number }[]>;
 }
 
-const BandwidthChart = memo(function BandwidthChart({ running, paused, speedHistoryRef }: BandwidthChartProps): ReactElement {
+const BandwidthChart = memo(function BandwidthChart({ animationsEnabled, running, paused, speedHistoryRef }: BandwidthChartProps): ReactElement {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -1260,12 +1261,11 @@ const BandwidthChart = memo(function BandwidthChart({ running, paused, speedHist
     if (!running || paused) {
       return;
     }
-    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     const interval = setInterval(() => {
       drawChart();
-    }, reducedMotion ? 1000 : 250);
-    return () => clearInterval(interval);
-  }, [drawChart, running, paused]);
+    }, animationsEnabled ? 250 : 1000);
+    return () => clearInterval(interval);
+  }, [animationsEnabled, drawChart, running, paused]);
 
   useEffect(() => {
     const handleResize = () => {
@@ -5347,7 +5347,7 @@ export function App(): ReactElement {
 
   return (
     <div
-      className={`md-runtime-root${dragOver ? " drag-over" : ""}${tab === "settings" ? " settings-active" : ""}`}
+      className={`md-runtime-root${snapshot.settings.animatePackageDisclosure ? " is-runtime-motion-enabled" : " is-runtime-motion-disabled"}${dragOver ? " drag-over" : ""}${tab === "settings" ? " settings-active" : ""}`}
       onDragEnter={(event) => {
         event.preventDefault();
         const hasFiles = event.dataTransfer.types.includes("Files");
@@ -5373,6 +5373,7 @@ export function App(): ReactElement {
     >
       <AppShell
         activeView={tab}
+        animationsEnabled={snapshot.settings.animatePackageDisclosure}
         contextInfo={tab === "downloads" ? (
           <div>
             Paket- und Linkstatus werden laufend aktualisiert. Auswahl, Reihenfolge und aktive Filter bleiben beim Ansichtswechsel erhalten.
@@ -5730,7 +5731,7 @@ export function App(): ReactElement {
         {tab === "statistics" && (
           <StatisticsContent
             actions={statisticsActions}
-            chart={<BandwidthChart running={snapshot.session.running} paused={snapshot.session.paused} speedHistoryRef={speedHistoryRef} />}
+            chart={<BandwidthChart animationsEnabled={snapshot.settings.animatePackageDisclosure} running={snapshot.session.running} paused={snapshot.session.paused} speedHistoryRef={speedHistoryRef} />}
             model={statisticsViewModel}
           />
         )}

src/renderer/shell/AppShell.tsx

@@ -29,6 +29,7 @@ function getServerShellMode(): ResponsiveShellMode {
 
 export interface AppShellProps {
   activeView: MainView;
+  animationsEnabled?: boolean;
   onViewChange: (view: MainView) => void;
   sidebar: ReactNode;
   sidebarStatus: ReactNode;
@@ -43,6 +44,7 @@ export interface AppShellProps {
 
 export function AppShell({
   activeView,
+  animationsEnabled = true,
   onViewChange,
   sidebar,
   sidebarStatus,
@@ -74,7 +76,7 @@ export function AppShell({
 
   return (
     <div
-      className={`md-shell is-${responsiveMode}${hasSidebar ? " has-sidebar" : ""}${hasSidebar && effectiveSidebarCollapsed ? " has-collapsed-sidebar" : ""}`}
+      className={`md-shell is-${responsiveMode}${animationsEnabled ? " is-runtime-motion-enabled" : " is-runtime-motion-disabled"}${hasSidebar ? " has-sidebar" : ""}${hasSidebar && effectiveSidebarCollapsed ? " has-collapsed-sidebar" : ""}`}
       data-responsive-mode={responsiveMode}
     >
       <AppHeader activeView={activeView} actions={headerActions} onViewChange={onViewChange} />

src/renderer/shell/shell.css

@@ -55,8 +55,8 @@
   padding: 0 16px;
   color: var(--ui-text);
   font-size: 16px;
-  font-weight: 700;
-  line-height: 20px;
+  font-weight: 700;
+  line-height: 20px;
 }
 
 .md-shell-brand-mark {
@@ -919,50 +919,7 @@
   }
 
   .md-dialog-actions,
-  .md-update-dialog-actions {
-    flex-wrap: wrap;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .md-shell *,
-  .md-shell *::before,
-  .md-shell *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    scroll-behavior: auto !important;
-    transition-duration: 0.01ms !important;
-  }
-
-  .md-shell-workspace {
-    transition-duration: 520ms !important;
-  }
-
-  .md-shell-sidebar-panel {
-    transition-duration: 260ms, 520ms, 0s !important;
-  }
-
-  .md-shell-navigation::before {
-    transition-duration: 420ms, 420ms, 420ms, 120ms !important;
-  }
-
-  .md-application-menu-tree .menu-dropdown {
-    transition-property: opacity, transform, visibility !important;
-    transition-duration: 150ms, 180ms, 0s !important;
-    transition-timing-function: ease, cubic-bezier(0.2, 0.8, 0.2, 1), linear !important;
-    transition-delay: 0s, 0s, 180ms !important;
-  }
-
-  .md-application-menu-tree .menu-dropdown.is-open {
-    transition-delay: 0s !important;
-  }
-
-  .md-application-menu-tree .menu-submenu-dropdown {
-    transition-duration: 0.01ms !important;
-    transition-delay: 0s !important;
-  }
-
-  .md-application-menu-tree .menu-submenu-dropdown.is-open {
-    transition-delay: 0s !important;
+  .md-update-dialog-actions {
+    flex-wrap: wrap;
   }
 }

src/renderer/styles.css

@@ -89,15 +89,7 @@
   transform: translate3d(var(--ui-sliding-selection-x, 0px), 0, 0);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .ui-sliding-selection::before {
-    transition-property: transform, width, height !important;
-    transition-duration: var(--ui-sliding-selection-duration, 0ms), var(--ui-sliding-selection-duration, 0ms), var(--ui-sliding-selection-duration, 0ms) !important;
-    transition-timing-function: cubic-bezier(0.22, 0.76, 0.22, 1), cubic-bezier(0.22, 0.76, 0.22, 1), cubic-bezier(0.22, 0.76, 0.22, 1) !important;
-  }
-}
-
-html,
+html,
 body,
 #root {
   margin: 0;

src/renderer/theme.css

@@ -406,13 +406,12 @@ textarea,
   outline-offset: 2px;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    scroll-behavior: auto !important;
-    transition-duration: 0.01ms !important;
-  }
-}
+.is-runtime-motion-disabled,
+.is-runtime-motion-disabled *,
+.is-runtime-motion-disabled *::before,
+.is-runtime-motion-disabled *::after {
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  scroll-behavior: auto !important;
+  transition-duration: 0.01ms !important;
+}

src/renderer/views/downloads/downloads.css

@@ -591,25 +591,6 @@
   transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .downloads-virtual-spacer {
-    transition-duration: 1500ms !important;
-  }
-
-  .downloads-virtual-row {
-    transition-duration: 1500ms, 1500ms, 1500ms !important;
-  }
-
-  .downloads-table.is-column-drag-active [data-download-column],
-  .downloads-table.is-column-drag-settling [data-download-column] {
-    transition-duration: 220ms !important;
-  }
-
-  .downloads-table.is-column-drag-active [data-column-dragging="true"] {
-    transition-duration: 0s !important;
-  }
-}
-
 .downloads-column-sort {
   width: 100%;
   border: 0;

src/renderer/views/history/history.css

@@ -499,9 +499,3 @@
   }
 
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .history-detail-disclosure:not(.is-history-motion-disabled) {
-    transition-duration: 520ms, 260ms !important;
-  }
-}