From 32da012b26a20c210726db6e62beed3766e44277 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 17 Jan 2026 14:29:10 +0300
Subject: [PATCH] feat(MotionPreference): Create common logic to store
 information about prefers-reduced-motion

---
 src/shared/lib/accessibility/motion.svelte.ts | 37 +++++++++++++++++++
 src/shared/lib/index.ts                       |  2 +
 .../ui/CheckboxFilter/CheckboxFilter.svelte   | 21 +----------
 3 files changed, 41 insertions(+), 19 deletions(-)
 create mode 100644 src/shared/lib/accessibility/motion.svelte.ts

diff --git a/src/shared/lib/accessibility/motion.svelte.ts b/src/shared/lib/accessibility/motion.svelte.ts
new file mode 100644
index 0000000..939819a
--- /dev/null
+++ b/src/shared/lib/accessibility/motion.svelte.ts
@@ -0,0 +1,37 @@
+// Check if we are in a browser environment
+const isBrowser = typeof window !== 'undefined';
+
+class MotionPreference {
+    // Reactive state
+    #reduced = $state(false);
+    #mediaQuery: MediaQueryList = new MediaQueryList();
+
+    private handleChange = (e: MediaQueryListEvent) => {
+        this.#reduced = e.matches;
+    };
+
+    constructor() {
+        if (isBrowser) {
+            const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+            // Set initial value immediately
+            this.#reduced = mediaQuery.matches;
+
+            mediaQuery.addEventListener('change', this.handleChange);
+
+            this.#mediaQuery = mediaQuery;
+        }
+    }
+
+    // Getter allows us to use 'motion.reduced' reactively in components
+    get reduced() {
+        return this.#reduced;
+    }
+
+    destroy() {
+        this.#mediaQuery.removeEventListener('change', this.handleChange);
+    }
+}
+
+// Export a single instance to be used everywhere
+export const motion = new MotionPreference();
diff --git a/src/shared/lib/index.ts b/src/shared/lib/index.ts
index 7d971c1..cbbfad9 100644
--- a/src/shared/lib/index.ts
+++ b/src/shared/lib/index.ts
@@ -13,3 +13,5 @@ export {
     type Virtualizer,
     type VirtualizerOptions,
 } from './helpers';
+
+export { motion } from './accessibility/motion.svelte';
diff --git a/src/shared/ui/CheckboxFilter/CheckboxFilter.svelte b/src/shared/ui/CheckboxFilter/CheckboxFilter.svelte
index 0dc9acc..8372dd4 100644
--- a/src/shared/ui/CheckboxFilter/CheckboxFilter.svelte
+++ b/src/shared/ui/CheckboxFilter/CheckboxFilter.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { Filter } from '$shared/lib';
+import { motion } from '$shared/lib';
 import { Badge } from '$shared/shadcn/ui/badge';
 import { buttonVariants } from '$shared/shadcn/ui/button';
 import { Checkbox } from '$shared/shadcn/ui/checkbox';
@@ -37,29 +38,11 @@ const { displayedLabel, filter }: PropertyFilterProps = $props();
 
 // Toggle state - defaults to open for better discoverability
 let isOpen = $state(true);
-// Accessibility preference to disable animations
-let prefersReducedMotion = $state(false);
-
-// Check reduced motion preference on mount (window access required)
-// Event listener allows responding to system preference changes
-onMount(() => {
-    if (typeof window !== 'undefined') {
-        const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
-        prefersReducedMotion = mediaQuery.matches;
-
-        const handleChange = (e: MediaQueryListEvent) => {
-            prefersReducedMotion = e.matches;
-        };
-
-        mediaQuery.addEventListener('change', handleChange);
-        return () => mediaQuery.removeEventListener('change', handleChange);
-    }
-});
 
 // Animation config respects user preferences - zero duration if reduced motion enabled
 // Local modifier prevents animation on initial render, only animates user interactions
 const slideConfig = $derived({
-    duration: prefersReducedMotion ? 0 : 250,
+    duration: motion.reduced ? 0 : 250,
     easing: cubicOut,
 });