Remove reducedMotion store and use body class instead

qt/aqt/editor.py

@@ -534,7 +534,6 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
             setColorButtons({});
             setTags({});
             setMathjaxEnabled({});
-            setReducedMotion({});
             """.format(
             json.dumps(data),
             json.dumps(collapsed),
@@ -546,7 +545,6 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
             json.dumps([text_color, highlight_color]),
             json.dumps(self.note.tags),
             json.dumps(self.mw.col.get_config("renderMathjax", True)),
-            json.dumps(self.mw.pm.reduced_motion()),
         )
 
         if self.addMode:

ts/components/Collapsible.svelte

@@ -8,12 +8,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { tweened } from "svelte/motion";
 
     export let collapse = false;
-    export let animated = true;
     export let duration = 200;
 
     let collapsed = false;
     let contentHeight = 0;
 
+    let animated = !document.body.classList.contains("reduced-motion");
+
     function dynamicDuration(height: number): number {
         return 100 + Math.pow(height, 1 / 4) * 25;
     }

ts/editor/EditorField.svelte

@@ -42,12 +42,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="ts">
-    import { getContext, onDestroy, setContext } from "svelte";
+    import { onDestroy, setContext } from "svelte";
     import type { Writable } from "svelte/store";
     import { writable } from "svelte/store";
 
     import Collapsible from "../components/Collapsible.svelte";
-    import { collapsedKey, directionKey, reducedMotionKey } from "../lib/context-keys";
+    import { collapsedKey, directionKey } from "../lib/context-keys";
     import { promiseWithResolver } from "../lib/promise";
     import type { Destroyable } from "./destroyable";
     import EditingArea from "./EditingArea.svelte";
@@ -67,8 +67,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     $: $collapsedStore = collapsed;
 
-    const reducedMotion = getContext<Readable<boolean>>(reducedMotionKey);
-
     const editingArea: Partial<EditingAreaAPI> = {};
     const [element, elementResolve] = promiseWithResolver<HTMLElement>();
 
@@ -90,7 +88,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <div class="field-container" on:mouseenter on:mouseleave>
     <slot name="field-label" />
 
-    <Collapsible collapse={collapsed} animated={!$reducedMotion} let:collapsed={hidden}>
+    <Collapsible collapse={collapsed} let:collapsed={hidden}>
         <div use:elementResolve class="editor-field" on:focusin on:focusout {hidden}>
             <EditingArea
                 {content}

ts/editor/NoteEditor.svelte

@@ -39,14 +39,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="ts">
-    import { onMount, setContext, tick } from "svelte";
+    import { onMount, tick } from "svelte";
     import { get, writable } from "svelte/store";
 
     import Absolute from "../components/Absolute.svelte";
     import Badge from "../components/Badge.svelte";
     import StickyContainer from "../components/StickyContainer.svelte";
     import { bridgeCommand } from "../lib/bridgecommand";
-    import { reducedMotionKey } from "../lib/context-keys";
     import { TagEditor } from "../tag-editor";
     import { ChangeTimer } from "./change-timer";
     import DecoratedElements from "./DecoratedElements.svelte";
@@ -130,15 +129,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         plainTextDefaults = [...richTextsHidden];
     }
 
-    let reducedMotion = false;
-    function setReducedMotion(enabled: boolean): void {
-        reducedMotion = enabled;
-    }
-
-    const reducedMotionStore = writable<boolean>();
-    setContext(reducedMotionKey, reducedMotionStore);
-    $: $reducedMotionStore = reducedMotion;
-
     function setMathjaxEnabled(enabled: boolean): void {
         mathjaxConfig.enabled = enabled;
     }
@@ -287,7 +277,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             setNoteId,
             wrap,
             setMathjaxEnabled,
-            setReducedMotion,
             ...oldEditorAdapter,
         });
 
@@ -447,7 +436,6 @@ the AddCards dialog) should be implemented in the user of this component.
                         <svelte:fragment slot="rich-text-input">
                             <Collapsible
                                 collapse={richTextsHidden[index]}
-                                animated={!reducedMotion}
                                 let:collapsed={hidden}
                             >
                                 <RichTextInput
@@ -469,7 +457,6 @@ the AddCards dialog) should be implemented in the user of this component.
                         <svelte:fragment slot="plain-text-input">
                             <Collapsible
                                 collapse={plainTextsHidden[index]}
-                                animated={!reducedMotion}
                                 let:collapsed={hidden}
                             >
                                 <PlainTextInput

ts/lib/context-keys.ts

@@ -6,4 +6,3 @@ export const fontSizeKey = Symbol("fontSize");
 export const directionKey = Symbol("direction");
 export const descriptionKey = Symbol("description");
 export const collapsedKey = Symbol("collapsed");
-export const reducedMotionKey = Symbol("reducedMotion");