From 59b0d9c620b22730ce47afbaf94ac7b4560a4a40 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 22 Jan 2026 15:41:55 +0300
Subject: [PATCH] feat(FontListItem): refactor component to enhance UX with
 animations and move away from checkboxes to avoid scroll problems

---
 .../Font/ui/FontListItem/FontListItem.svelte  | 162 ++++++++++++------
 1 file changed, 106 insertions(+), 56 deletions(-)

diff --git a/src/entities/Font/ui/FontListItem/FontListItem.svelte b/src/entities/Font/ui/FontListItem/FontListItem.svelte
index 12c52a7..f32ec39 100644
--- a/src/entities/Font/ui/FontListItem/FontListItem.svelte
+++ b/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,68 +17,118 @@ 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);
 
-const selected = $derived(selectedFontsStore.has(font.id));
+// 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);
+        }
+    };
+});
+
+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="w-full">
-            <div class="flex flex-row gap-1 w-full items-center justify-between">
-                <div class="flex flex-col gap-1 transition-all duration-150 ease-out">
-                    <div class="flex flex-row gap-1">
-                        <Badge variant="outline" class="text-[0.5rem]">
-                            {font.provider}
-                        </Badge>
-                        <Badge variant="outline" class="text-[0.5rem]">
-                            {font.category}
-                        </Badge>
+<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">
+                    <div class="flex flex-col gap-1 transition-all duration-150 ease-out">
+                        <div class="flex flex-row gap-1">
+                            <Badge variant="outline" class="text-[0.5rem]">
+                                {font.provider}
+                            </Badge>
+                            <Badge variant="outline" class="text-[0.5rem]">
+                                {font.category}
+                            </Badge>
+                        </div>
+                        <FontApplicator
+                            id={font.id}
+                            className="text-2xl"
+                            name={font.name}
+                        >
+                            {font.name}
+                        </FontApplicator>
                     </div>
-                    <FontApplicator
-                        id={font.id}
-                        className="text-2xl"
-                        name={font.name}
-                    >
-                        {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>