From 0ac6acd174098d198a8277ef798cc2c8f55997a3 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 1 Feb 2026 16:12:37 +0300
Subject: [PATCH] feat(proxyFonts): add fetchFontsById function that fetches
 batch of fonts

---
 src/entities/Font/api/proxy/proxyFonts.ts     | 31 +++++++++++++++++++
 .../ui/SuggestedFonts/SuggestedFonts.svelte   | 10 ++++--
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/entities/Font/api/proxy/proxyFonts.ts b/src/entities/Font/api/proxy/proxyFonts.ts
index 066fe3f..7852008 100644
--- a/src/entities/Font/api/proxy/proxyFonts.ts
+++ b/src/entities/Font/api/proxy/proxyFonts.ts
@@ -246,3 +246,34 @@ export async function fetchProxyFontById(
 
     return response.fonts.find(font => font.id === id);
 }
+
+/**
+ * Fetch multiple fonts by their IDs
+ *
+ * @param ids - Array of font IDs to fetch
+ * @returns Promise resolving to an array of fonts
+ */
+export async function fetchFontsByIds(ids: string[]): Promise<UnifiedFont[]> {
+    if (ids.length === 0) return [];
+
+    // Use proxy API if enabled
+    if (USE_PROXY_API) {
+        const queryString = ids.join(',');
+        const url = `${PROXY_API_URL}/batch?ids=${queryString}`;
+
+        try {
+            const response = await api.get<UnifiedFont[]>(url);
+            return response.data ?? [];
+        } catch (error) {
+            console.warn('[fetchFontsByIds] Proxy API batch fetch failed, falling back', error);
+            // Fallthrough to fallback
+        }
+    }
+
+    // Fallback: Fetch individually (not efficient but functional for fallback)
+    const results = await Promise.all(
+        ids.map(id => fetchProxyFontById(id)),
+    );
+
+    return results.filter((f): f is UnifiedFont => !!f);
+}
diff --git a/src/features/GetFonts/ui/SuggestedFonts/SuggestedFonts.svelte b/src/features/GetFonts/ui/SuggestedFonts/SuggestedFonts.svelte
index b4779f2..e7ffa8b 100644
--- a/src/features/GetFonts/ui/SuggestedFonts/SuggestedFonts.svelte
+++ b/src/features/GetFonts/ui/SuggestedFonts/SuggestedFonts.svelte
@@ -9,7 +9,8 @@ import {
     FontVirtualList,
     unifiedFontStore,
 } from '$entities/Font';
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import { displayedFontsStore } from '$features/DisplayFont';
+import FontSampler from '$features/DisplayFont/ui/FontSampler/FontSampler.svelte';
 
 /**
  * Load more fonts by moving to the next page
@@ -57,8 +58,11 @@ const displayRange = $derived.by(() => {
     items={unifiedFontStore.fonts}
     total={unifiedFontStore.pagination.total}
     onNearBottom={handleNearBottom}
+    itemHeight={280}
 >
-    {#snippet children({ item: font, isVisible, proximity })}
-        <FontListItem {font} {isVisible} {proximity} />
+    {#snippet children({ item: font, isVisible, proximity, index })}
+        <FontListItem {font} {isVisible} {proximity}>
+            <FontSampler font={font} bind:text={displayedFontsStore.text} index={index} />
+        </FontListItem>
     {/snippet}
 </FontVirtualList>