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

@@ -1,26 +1,32 @@
+<!--
+    Component: FontListItem
+    Displays a font item with a checkbox and its characteristics in badges.
+-->
 <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 type { UnifiedFont } from '../../model';
+import {
+    type UnifiedFont,
+    selectedFontsStore,
+} from '../../model';
 import FontApplicator from '../FontApplicator/FontApplicator.svelte';
 
 interface Props {
     font: UnifiedFont;
-    selected?: boolean;
-    onSelect?: (slug: string) => void;
-    onDeselect?: (slug: string) => void;
 }
 
-let { font, selected, onSelect, onDeselect }: Props = $props();
+const { font }: Props = $props();
 
 const handleChange = (checked: boolean) => {
-    if (onSelect && checked) {
+    if (checked) {
-        onSelect(font.id);
+        selectedFontsStore.addOne(font);
-    } else if (onDeselect && !checked) {
+    } else {
-        onDeselect(font.id);
+        selectedFontsStore.removeOne(font.id);
     }
 };
+
+const selected = $derived(selectedFontsStore.has(font.id));
 </script>
 
 <div class="pb-1">
@@ -49,7 +55,6 @@ const handleChange = (checked: boolean) => {
                     <FontApplicator
                         id={font.id}
                         className="text-2xl"
-                        slug={font.id}
                         name={font.name}
                     >
                         {font.name}