feat(app): add styles for better optimized transitions

src/app/styles/app.css

@@ -119,3 +119,22 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Global utility - useful across your app */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+/* Performance optimization for collapsible elements */
+[data-state="open"] {
+    will-change: height;
+}
+
+/* Smooth focus transitions - good globally */
+.peer:focus-visible ~ * {
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}

src/shared/shadcn/ui/badge/badge.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+import { tv, type VariantProps } from 'tailwind-variants';
+
+export const badgeVariants = tv({
+    base:
+        'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
+    variants: {
+        variant: {
+            default:
+                'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
+            secondary:
+                'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
+            destructive:
+                'bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white',
+            outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+
+export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+</script>
+
+<script lang="ts">
+import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+let {
+    ref = $bindable(null),
+    href,
+    class: className,
+    variant = 'default',
+    children,
+    ...restProps
+}: WithElementRef<HTMLAnchorAttributes> & {
+    variant?: BadgeVariant;
+} = $props();
+</script>
+
+<svelte:element
+    this={href ? 'a' : 'span'}
+    bind:this={ref}
+    data-slot="badge"
+    {href}
+    class={cn(badgeVariants({ variant }), className)}
+    {...restProps}
+>
+    {@render children?.()}
+</svelte:element>

src/shared/shadcn/ui/badge/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './badge.svelte';
+export { type BadgeVariant, badgeVariants } from './badge.svelte';

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 { blur } from 'svelte/transition';
+import { cubicOut } from 'svelte/easing';
+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
-const blurConfig = $derived({
+// Optimized animation configuration
+const slideConfig = $derived({
     duration: prefersReducedMotion ? 0 : 250,
-    amount: 5,
-    opacity: 0.5,
+    easing: cubicOut,
 });
 
-const checkboxFlipConfig = $derived({
-    duration: prefersReducedMotion ? 0 : 300,
-});
+// Count selected categories for badge
+const selectedCount = $derived(categories.filter(c => c.selected).length);
+const hasSelection = $derived(selectedCount > 0);
 </script>
 
-<Collapsible.Root bind:open={isOpen} class="space-y-2">
-    <div class="flex items-center justify-between space-x-4 px-4">
+<Collapsible.Root
+    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 class="flex flex-col gap-2">
+        <div
+            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>