feat(FontListItem): refactor component to enhance UX with animations and move away from checkboxes to avoid scroll problems

src/entities/Font/ui/FontListItem/FontListItem.svelte

@@ -4,8 +4,8 @@
 -->
 <script lang="ts">
 import { Badge } from '$shared/shadcn/ui/badge';
-import { Checkbox } from '$shared/shadcn/ui/checkbox';
-import { Label } from '$shared/shadcn/ui/label';
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import { Spring } from 'svelte/motion';
 import {
     type UnifiedFont,
     selectedFontsStore,
@@ -17,32 +17,96 @@ interface Props {
      * Object with information about font
      */
     font: UnifiedFont;
+    /**
+     * Is element fully visible
+     */
+    isVisible: boolean;
+    /**
+     * From 0 to 1
+     */
+    proximity: number;
 }
 
-const { font }: Props = $props();
+const { font, isVisible, proximity }: Props = $props();
 
-const handleChange = (checked: boolean) => {
-    if (checked) {
-        selectedFontsStore.addOne(font);
-    } else {
-        selectedFontsStore.removeOne(font.id);
+let selected = $state(selectedFontsStore.has(font.id));
+let timeoutId = $state<NodeJS.Timeout | null>(null);
+
+// Create a spring for smooth scale animation
+const scale = new Spring(1, {
+    stiffness: 0.3,
+    damping: 0.7,
+});
+
+// Springs react to the virtualizer's computed state
+const bloom = new Spring(0, {
+    stiffness: 0.15,
+    damping: 0.6,
+});
+
+// Sync spring to proximity for a "Lens" effect
+$effect(() => {
+    bloom.target = isVisible ? 1 : 0;
+});
+
+$effect(() => {
+    selected = selectedFontsStore.has(font.id);
+});
+
+$effect(() => {
+    return () => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
         }
-};
+    };
+});
 
-const selected = $derived(selectedFontsStore.has(font.id));
+function handleClick() {
+    animateSelection();
+    selected ? selectedFontsStore.removeOne(font.id) : selectedFontsStore.addOne(font);
+}
+
+function animateSelection() {
+    scale.target = 0.98;
+
+    timeoutId = setTimeout(() => {
+        scale.target = 1;
+    }, 150);
+}
 </script>
 
-<div class="pb-1">
-    <Label
-        for={font.id}
-        class="
-            w-full hover:bg-accent/50 flex items-start gap-3 rounded-lg border border-transparent p-3
-            active:scale-[0.98] active:transition-transform active:duration-75
-            has-aria-checked:border-blue-600
-            has-aria-checked:bg-blue-50
-            dark:has-aria-checked:border-blue-900
-            dark:has-aria-checked:bg-blue-950
+<div
+    class={cn('pb-1 will-change-transform')}
+    style:opacity={bloom.current}
+    style:transform="
+		scale({0.92 + (bloom.current * 0.08)})
+		translateY({(1 - bloom.current) * 10}px)
 	"
+>
+    <div style:transform={`scale(${scale.current})`}>
+        <div
+            class={cn(
+                'w-full hover:bg-accent/50 flex items-start gap-3 rounded-lg border border-transparent p-3',
+                'active:transition-transform active:duration-150',
+                'border dark:border-slate-800',
+                'bg-white/10 border-white/20',
+                isVisible && 'bg-white/40 border-white/40',
+                selected && 'ring-2 ring-indigo-600 ring-inset bg-indigo-50/50 hover:bg-indigo-50',
+            )}
+            role="button"
+            tabindex="0"
+            onmousedown={(e => {
+                // Prevent browser focus-jump
+                if (e.currentTarget === document.activeElement) return;
+                e.preventDefault();
+                handleClick();
+            })}
+            onkeydown={(e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleClick();
+                }
+            })}
         >
             <div class="w-full">
                 <div class="flex flex-row gap-1 w-full items-center justify-between">
@@ -63,22 +127,8 @@ const selected = $derived(selectedFontsStore.has(font.id));
                             {font.name}
                         </FontApplicator>
                     </div>
-
-                <Checkbox
-                    id={font.id}
-                    checked={selected}
-                    onCheckedChange={handleChange}
-                    class="
-                        transition-all duration-150 ease-out
-                        data-[state=checked]:scale-100
-                        data-[state=checked]:border-blue-600
-                        data-[state=checked]:bg-blue-600
-                        data-[state=checked]:text-white
-                        dark:data-[state=checked]:border-blue-700
-                        dark:data-[state=checked]:bg-blue-700
-                    "
-                />
                 </div>
             </div>
-    </Label>
+        </div>
+    </div>
 </div>