feat(FontListItem): use children instead of the direct representation of the font

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

@@ -1,16 +1,15 @@
 <!--
     Component: FontListItem
-    Displays a font item with a checkbox and its characteristics in badges.
+    Displays a font item and manage its animations
 -->
 <script lang="ts">
-import { Badge } from '$shared/shadcn/ui/badge';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import type { Snippet } from 'svelte';
 import { Spring } from 'svelte/motion';
 import {
     type UnifiedFont,
     selectedFontsStore,
 } from '../../model';
-import FontApplicator from '../FontApplicator/FontApplicator.svelte';
 
 interface Props {
     /**
@@ -25,11 +24,15 @@ interface Props {
      * From 0 to 1
      */
     proximity: number;
+    /**
+     * Children snippet
+     */
+    children: Snippet<[font: UnifiedFont]>;
 }
 
-const { font, isVisible, proximity }: Props = $props();
+const { font, isVisible, proximity, children }: Props = $props();
 
-let selected = $state(selectedFontsStore.has(font.id));
+const selected = $derived(selectedFontsStore.has(font.id));
 let timeoutId = $state<NodeJS.Timeout | null>(null);
 
 // Create a spring for smooth scale animation
@@ -49,10 +52,6 @@ $effect(() => {
     bloom.target = isVisible ? 1 : 0;
 });
 
-$effect(() => {
-    selected = selectedFontsStore.has(font.id);
-});
-
 $effect(() => {
     return () => {
         if (timeoutId) {
@@ -61,11 +60,6 @@ $effect(() => {
     };
 });
 
-function handleClick() {
-    animateSelection();
-    selected ? selectedFontsStore.removeOne(font.id) : selectedFontsStore.addOne(font);
-}
-
 function animateSelection() {
     scale.target = 0.98;
 
@@ -83,58 +77,5 @@ function animateSelection() {
 		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-mono uppercase tracking-widest text-slate-900"
-                            >
-                                {font.provider}
-                            </Badge>
-                            <Badge
-                                variant="outline"
-                                class="text-[0.5rem] font-mono uppercase tracking-widest text-slate-900"
-                            >
-                                {font.category}
-                            </Badge>
-                        </div>
-                        <FontApplicator
-                            id={font.id}
-                            className="text-2xl"
-                            name={font.name}
-                        >
-                            {font.name}
-                        </FontApplicator>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+    {@render children?.(font)}
 </div>