feat(settings): reduce animations switch

src/components/AppearanceCard.jsx

@@ -31,6 +31,14 @@ export default function AppearanceCard() {
                     <Switch id="wideLayout" checked={appearance.wideLayout}
                             onCheckedChange={(wideLayout) => saveAppearance({wideLayout})}/>
                 </div>
+                <div className="flex items-center justify-between gap-4">
+                    <div className="space-y-1">
+                        <Label htmlFor="reduceMotion">{t('SETTINGS.REDUCE_MOTION')}</Label>
+                        <p className="text-xs text-muted-foreground">{t('SETTINGS.REDUCE_MOTION_HINT')}</p>
+                    </div>
+                    <Switch id="reduceMotion" checked={appearance.reduceMotion}
+                            onCheckedChange={(reduceMotion) => saveAppearance({reduceMotion})}/>
+                </div>
                 <div className="flex items-center justify-between gap-4">
                     <div className="space-y-1">
                         <Label id="background-label">{t('SETTINGS.BACKGROUND')}</Label>

src/components/Confetti.jsx

@@ -1,6 +1,7 @@
 import {useEffect, useRef, useState} from 'react';
 
 import {LOGO_COLORS} from './Logo.jsx';
+import {reduceMotion} from '../utils/appearance.js';
 
 const DURATION_MS = 2800;
 const PIECES = {small: 70, big: 240};
@@ -8,8 +9,6 @@ const GRAVITY = 0.12;
 // The speeds are per frame at 60 Hz; a faster screen moves the same distance in the same time.
 const FRAME_MS = 1000 / 60;
 
-const reducedMotion = () => window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
-
 // The logo colors of the chosen accent and the accent itself.
 function colors() {
     const style = getComputedStyle(document.documentElement);
@@ -48,7 +47,7 @@ function pieces(size, width, height) {
  */
 export default function Confetti({size, onDone}) {
     const canvasRef = useRef(null);
-    const [reduce] = useState(reducedMotion);
+    const [reduce] = useState(reduceMotion);
     // In a ref: a new function from a re-render must not restart the animation, and the latest one runs at the end.
     const onDoneRef = useRef(onDone);
     onDoneRef.current = onDone;

src/components/Confetti.test.jsx

@@ -34,4 +34,13 @@ describe('Confetti', () => {
 
         expect(container.querySelector('canvas')).toBeNull();
     });
+
+    it('draws nothing when the reduce animations setting is on', () => {
+        reducedMotion(false);
+        document.documentElement.setAttribute('data-reduce-motion', '');
+        const {container} = render(<Confetti size="small"/>);
+        document.documentElement.removeAttribute('data-reduce-motion');
+
+        expect(container.querySelector('canvas')).toBeNull();
+    });
 });