From 28a71452d14587cc8a90036f020724d6697eaf9b Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 18 Jan 2026 14:59:00 +0300
Subject: [PATCH] fix(FontListItem): edit FontListItem to work with
 selectedFontsStore

---
 .../Font/ui/FontListItem/FontListItem.svelte  | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/entities/Font/ui/FontListItem/FontListItem.svelte b/src/entities/Font/ui/FontListItem/FontListItem.svelte
index 9ded8aa..1cb87d2 100644
--- a/src/entities/Font/ui/FontListItem/FontListItem.svelte
+++ b/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) {
-        onSelect(font.id);
-    } else if (onDeselect && !checked) {
-        onDeselect(font.id);
+    if (checked) {
+        selectedFontsStore.addOne(font);
+    } else {
+        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}