Revert "fix(ui): honor the application animation setting globally"

This reverts commit 760ed847fc.

src/renderer/App.tsx

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

src/renderer/shell/AppShell.tsx

@@ -29,7 +29,6 @@ function getServerShellMode(): ResponsiveShellMode {
 
 export interface AppShellProps {
   activeView: MainView;
-  animationsEnabled?: boolean;
   onViewChange: (view: MainView) => void;
   sidebar: ReactNode;
   sidebarStatus: ReactNode;
@@ -44,7 +43,6 @@ export interface AppShellProps {
 
 export function AppShell({
   activeView,
-  animationsEnabled = true,
   onViewChange,
   sidebar,
   sidebarStatus,
@@ -76,7 +74,7 @@ export function AppShell({
 
   return (
     <div
-      className={`md-shell is-${responsiveMode}${animationsEnabled ? " is-runtime-motion-enabled" : " is-runtime-motion-disabled"}${hasSidebar ? " has-sidebar" : ""}${hasSidebar && effectiveSidebarCollapsed ? " has-collapsed-sidebar" : ""}`}
+      className={`md-shell is-${responsiveMode}${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,7 +919,50 @@
   }
 
   .md-dialog-actions,
-  .md-update-dialog-actions {
-    flex-wrap: wrap;
+  .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;
   }
 }

src/renderer/styles.css

@@ -89,7 +89,15 @@
   transform: translate3d(var(--ui-sliding-selection-x, 0px), 0, 0);
 }
 
-html,
+@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,
 body,
 #root {
   margin: 0;

src/renderer/theme.css

@@ -406,12 +406,13 @@ textarea,
   outline-offset: 2px;
 }
 
-.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;
-}
+@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;
+  }
+}

src/renderer/views/downloads/downloads.css

@@ -591,6 +591,25 @@
   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,3 +499,9 @@
   }
 
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .history-detail-disclosure:not(.is-history-motion-disabled) {
+    transition-duration: 520ms, 260ms !important;
+  }
+}