From 732f77f50468da639a6ad54defcab2bcf16304b3 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 24 Jan 2026 15:25:56 +0300
Subject: [PATCH] feat(CheckboxFilter): use new transition function
 springySlideFade

---
 src/shared/ui/CheckboxFilter/CheckboxFilter.svelte | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/shared/ui/CheckboxFilter/CheckboxFilter.svelte b/src/shared/ui/CheckboxFilter/CheckboxFilter.svelte
index a30513c..e7ed2b3 100644
--- a/src/shared/ui/CheckboxFilter/CheckboxFilter.svelte
+++ b/src/shared/ui/CheckboxFilter/CheckboxFilter.svelte
@@ -8,7 +8,10 @@
     - Local transition prevents animation when component first renders
 -->
 <script lang="ts">
-import type { Filter } from '$shared/lib';
+import {
+    type Filter,
+    springySlideFade,
+} from '$shared/lib';
 import { Badge } from '$shared/shadcn/ui/badge';
 import { buttonVariants } from '$shared/shadcn/ui/button';
 import { Checkbox } from '$shared/shadcn/ui/checkbox';
@@ -20,7 +23,6 @@ import { Label } from '$shared/shadcn/ui/label';
 import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 import { cubicOut } from 'svelte/easing';
 import { prefersReducedMotion } from 'svelte/motion';
-import { slide } from 'svelte/transition';
 
 interface PropertyFilterProps {
     /** Label for this filter group (e.g., "Properties", "Tags") */
@@ -37,7 +39,7 @@ let isOpen = $state(true);
 // 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.current ? 0 : 250,
+    duration: prefersReducedMotion.current ? 0 : 150,
     easing: cubicOut,
 });
 
@@ -49,7 +51,7 @@ const hasSelection = $derived(selectedCount > 0);
 <!-- Collapsible card wrapper with subtle hover state for affordance -->
 <CollapsibleRoot
     bind:open={isOpen}
-    class="w-full rounded-lg border bg-card transition-colors hover:bg-accent/5"
+    class="w-full bg-card transition-colors hover:bg-accent/5"
 >
     <!-- Trigger row: title, expand indicator, and optional count badge -->
     <div class="flex items-center justify-between px-4 py-2">
@@ -88,8 +90,8 @@ const hasSelection = $derived(selectedCount > 0);
     <!-- Expandable content with slide animation -->
     {#if isOpen}
         <div
-            transition:slide|local={slideConfig}
-            class="border-t"
+            transition:springySlideFade|local={slideConfig}
+            class="will-change-[height,opacity]"
         >
             <div class="px-4 py-3">
                 <div class="flex flex-col gap-0.5">