feat(CheckboxFilter): improve CheckboxFilter animations for better UX

src/shared/ui/CheckboxFilter/CheckboxFilter.svelte

@@ -1,35 +1,24 @@
 <script lang="ts">
+import { Badge } from '$shared/shadcn/ui/badge';
 import { buttonVariants } from '$shared/shadcn/ui/button';
 import { Checkbox } from '$shared/shadcn/ui/checkbox';
 import * as Collapsible from '$shared/shadcn/ui/collapsible';
 import { Label } from '$shared/shadcn/ui/label';
 import type { Category } from '$shared/store/createFilterStore';
-import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
+import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 import { onMount } from 'svelte';
-import { flip } from 'svelte/animate';
+import { cubicOut } from 'svelte/easing';
-import { blur } from 'svelte/transition';
+import { slide } from 'svelte/transition';
 
 interface CategoryFilterProps {
-    /**
-     * Displayed filter name
-     */
     filterName: string;
-    /**
-     * List of filter categories
-     */
     categories: Category[];
-    /**
-     * Callback for category toggle event
-     */
     onCategoryToggle: (id: string) => void;
 }
 
 const { filterName, categories, onCategoryToggle }: CategoryFilterProps = $props();
 
-// Track collapsible state for animations
 let isOpen = $state(true);
-
-// Respect user's motion preferences for accessibility
 let prefersReducedMotion = $state(false);
 
 onMount(() => {
@@ -37,62 +26,100 @@ onMount(() => {
         const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
         prefersReducedMotion = mediaQuery.matches;
 
-        // Listen for changes in motion preference
         const handleChange = (e: MediaQueryListEvent) => {
             prefersReducedMotion = e.matches;
         };
 
         mediaQuery.addEventListener('change', handleChange);
-
+        return () => mediaQuery.removeEventListener('change', handleChange);
-        return () => {
-            mediaQuery.removeEventListener('change', handleChange);
-        };
     }
 });
 
-// Reactive animation configurations
+// Optimized animation configuration
-const blurConfig = $derived({
+const slideConfig = $derived({
     duration: prefersReducedMotion ? 0 : 250,
-    amount: 5,
+    easing: cubicOut,
-    opacity: 0.5,
 });
 
-const checkboxFlipConfig = $derived({
+// Count selected categories for badge
-    duration: prefersReducedMotion ? 0 : 300,
+const selectedCount = $derived(categories.filter(c => c.selected).length);
-});
+const hasSelection = $derived(selectedCount > 0);
 </script>
 
-<Collapsible.Root bind:open={isOpen} class="space-y-2">
+<Collapsible.Root
-    <div class="flex items-center justify-between space-x-4 px-4">
+    bind:open={isOpen}
+    class="w-full rounded-lg border bg-card transition-colors hover:bg-accent/5"
+>
+    <div class="flex items-center justify-between px-4 py-2">
         <Collapsible.Trigger
-            class={buttonVariants({ variant: 'ghost', size: 'sm', class: 'w-fit' })}
+            class={buttonVariants({
+                variant: 'ghost',
+                size: 'sm',
+                class:
+                    'flex-1 justify-start gap-2 hover:bg-transparent focus-visible:ring-1 focus-visible:ring-ring',
+            })}
         >
             <h4 class="text-sm font-semibold">{filterName}</h4>
-            <ChevronsUpDownIcon class="h-4 w-4" />
+
+            <div
+                class="shrink-0 transition-transform duration-200 ease-out"
+                style:transform={isOpen ? 'rotate(0deg)' : 'rotate(-90deg)'}
+            >
+                <ChevronDownIcon class="h-4 w-4" />
+            </div>
+            {#if hasSelection}
+                <Badge
+                    variant="secondary"
+                    class="ml-auto h-5 min-w-5 px-1.5 text-xs font-medium tabular-nums"
+                >
+                    {selectedCount}
+                </Badge>
+            {/if}
         </Collapsible.Trigger>
     </div>
 
-    <Collapsible.Content>
     {#if isOpen}
-            <div transition:blur|local={blurConfig} class="px-4 py-2">
+        <div
-                <div class="flex flex-col gap-2">
+            transition:slide|local={slideConfig}
+            class="border-t"
+        >
+            <div class="px-4 py-3">
+                <div class="flex flex-col gap-2.5">
                     {#each categories as category (category.id)}
-                        <div class="flex items-center gap-3" animate:flip={checkboxFlipConfig}>
-                            <Checkbox
-                                id={category.id}
-                                onCheckedChange={() => onCategoryToggle(category.id)}
-                                class="cursor-pointer transition-transform active:scale-95"
-                            />
                         <Label
                             for={category.id}
-                                class="cursor-pointer transition-colors hover:text-foreground/80"
+                            class="
+                                group flex items-center gap-3 cursor-pointer rounded-md px-2 py-1.5 -mx-2
+                                transition-colors duration-150 ease-out
+                                hover:bg-accent/50 focus-within:bg-accent/50
+                                active:scale-[0.98] active:transition-transform active:duration-75
+                            "
+                        >
+                            <Checkbox
+                                id={category.id}
+                                checked={category.selected}
+                                onchange={() => onCategoryToggle(category.id)}
+                                class="
+                                    shrink-0 cursor-pointer transition-all duration-150 ease-out
+                                    data-[state=checked]:scale-100
+                                    hover:border-primary/50
+                                    focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+                                "
+                            />
+                            <span
+                                class="
+                                    text-sm select-none transition-all duration-150 ease-out
+                                    group-hover:text-foreground
+                                    text-muted-foreground
+                                    {category.selected ? 'font-medium text-foreground' : ''}
+                                "
                             >
                                 {category.name}
+                            </span>
                         </Label>
-                        </div>
                     {/each}
                 </div>
             </div>
+        </div>
     {/if}
-    </Collapsible.Content>
 </Collapsible.Root>