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);
+}

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>