feat: disable high power consumption effects on battery

packages/frontend/apps/electron-renderer/src/app/app.tsx

@@ -11,6 +11,7 @@ import { RouterProvider } from 'react-router-dom';
 
 import { setupEffects } from './effects';
 import { DesktopLanguageSync } from './language-sync';
+import { DesktopPowerStateSync } from './power-state-sync';
 import { DesktopThemeSync } from './theme-sync';
 
 const { frameworkProvider } = setupEffects();
@@ -48,6 +49,7 @@ export function App() {
             <AffineContext store={getCurrentStore()}>
               <DesktopThemeSync />
               <DesktopLanguageSync />
+              <DesktopPowerStateSync />
               <RouterProvider
                 fallbackElement={<AppContainer fallback />}
                 router={router}

packages/frontend/apps/electron-renderer/src/app/global.css

@@ -23,3 +23,13 @@ html[data-active='true']:has([data-translucent='true']) {
   opacity: 1;
   transition: opacity 0.2s;
 }
+
+/* Disable animations when on battery power */
+html.reduce-motion *,
+html.reduce-motion *::before,
+html.reduce-motion *::after {
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+  scroll-behavior: auto !important;
+}

packages/frontend/apps/electron-renderer/src/app/hooks/use-power-state.ts

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+
+export function usePowerState() {
+  const [onBattery, setOnBattery] = useState(false);
+
+  useEffect(() => {
+    window.__apis.getPowerState().then(setOnBattery);
+  }, []);
+
+  return onBattery;
+}

packages/frontend/apps/electron-renderer/src/app/power-state-sync.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+
+import { usePowerState } from './hooks/use-power-state';
+
+export const DesktopPowerStateSync = () => {
+  const onBattery = usePowerState();
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(
+    () => window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  );
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const handleChange = (e: MediaQueryListEvent) => {
+      setPrefersReducedMotion(e.matches);
+    };
+
+    // Modern browsers
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener('change', handleChange);
+      return () => mediaQuery.removeEventListener('change', handleChange);
+    }
+    // Fallback for older browsers
+    else if (mediaQuery.addListener) {
+      mediaQuery.addListener(handleChange);
+      return () => mediaQuery.removeListener(handleChange);
+    }
+  }, []);
+
+  useEffect(() => {
+    const enableAnimations = !onBattery && !prefersReducedMotion;
+    document.documentElement.classList.toggle(
+      'reduce-motion',
+      !enableAnimations
+    );
+  }, [onBattery, prefersReducedMotion]);
+
+  return null;
+};

packages/frontend/apps/electron/src/main/index.ts

@@ -4,7 +4,7 @@ import path from 'node:path';
 
 import * as Sentry from '@sentry/electron/main';
 import { IPCMode } from '@sentry/electron/main';
-import { app, protocol } from 'electron';
+import { app, ipcMain, powerMonitor, protocol } from 'electron';
 
 import { createApplicationMenu } from './application-menu/create';
 import { buildType, isDev, overrideSession } from './config';
@@ -20,6 +20,8 @@ import { registerUpdater } from './updater';
 import { launch } from './windows-manager/launcher';
 import { launchStage } from './windows-manager/stage';
 
+let isOnBatteryPower = false;
+
 app.enableSandbox();
 
 if (isDev) {
@@ -95,6 +97,26 @@ app.on('window-all-closed', () => {
   app.quit();
 });
 
+/**
+ * Monitor system power source changes
+ * Refs: https://www.electronjs.org/docs/latest/api/power-monitor
+ */
+powerMonitor.on('on-battery', () => {
+  isOnBatteryPower = true;
+  logger.info('Running on battery');
+});
+
+powerMonitor.on('on-ac', () => {
+  isOnBatteryPower = false;
+  logger.info('Running on AC power');
+});
+
+isOnBatteryPower = powerMonitor.isOnBatteryPower();
+
+ipcMain.handle('get-power-state', () => {
+  return isOnBatteryPower;
+});
+
 /**
  * @see https://www.electronjs.org/docs/latest/api/app#event-activate-macos Event: 'activate'
  */