feat(MotionPreference): Create common logic to store information about prefers-reduced-motion

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,
 });