From cfb586f539ec04716805e29e15054b188c588c84 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 1 Feb 2026 11:55:46 +0300
Subject: [PATCH] feat(SampleList): move font list display into widget layer

---
 src/widgets/SampleList/index.ts               |  1 +
 .../ui/SampleList/SampleList.svelte           | 66 +++++++++++++++++++
 src/widgets/SampleList/ui/index.ts            |  3 +
 3 files changed, 70 insertions(+)
 create mode 100644 src/widgets/SampleList/index.ts
 create mode 100644 src/widgets/SampleList/ui/SampleList/SampleList.svelte
 create mode 100644 src/widgets/SampleList/ui/index.ts

diff --git a/src/widgets/SampleList/index.ts b/src/widgets/SampleList/index.ts
new file mode 100644
index 0000000..fac592d
--- /dev/null
+++ b/src/widgets/SampleList/index.ts
@@ -0,0 +1 @@
+export { SampleList } from './ui';
diff --git a/src/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
new file mode 100644
index 0000000..418956f
--- /dev/null
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -0,0 +1,66 @@
+<!--
+    Component: SampleList
+    Renders a list of fonts in a virtualized list to improve performance.
+    Includes pagination with auto-loading when scrolling near the bottom.
+-->
+<script lang="ts">
+import {
+    FontListItem,
+    FontVirtualList,
+    unifiedFontStore,
+} from '$entities/Font';
+import { FontSampler } from '$features/DisplayFont';
+
+let text = $state('The quick brown fox jumps over the lazy dog...');
+
+/**
+ * Load more fonts by moving to the next page
+ */
+function loadMore() {
+    if (!unifiedFontStore.pagination.hasMore || unifiedFontStore.isFetching) {
+        return;
+    }
+    unifiedFontStore.nextPage();
+}
+
+/**
+ * Handle scroll near bottom - auto-load next page
+ *
+ * Triggered by VirtualList when the user scrolls within 5 items of the end
+ * of the loaded items. Only fetches if there are more pages available.
+ */
+function handleNearBottom(_lastVisibleIndex: number) {
+    const { hasMore } = unifiedFontStore.pagination;
+
+    // VirtualList already checks if we're near the bottom of loaded items
+    if (hasMore && !unifiedFontStore.isFetching) {
+        loadMore();
+    }
+}
+
+/**
+ * Calculate display range for pagination info
+ */
+const displayRange = $derived.by(() => {
+    const { offset, limit, total } = unifiedFontStore.pagination;
+    const loadedCount = Math.min(offset + limit, total);
+    return `Showing ${loadedCount} of ${total} fonts`;
+});
+</script>
+
+{#if unifiedFontStore.isFetching || unifiedFontStore.isLoading}
+    <span class="ml-2 text-xs text-muted-foreground/70">(Loading...)</span>
+{/if}
+
+<FontVirtualList
+    items={unifiedFontStore.fonts}
+    total={unifiedFontStore.pagination.total}
+    onNearBottom={handleNearBottom}
+    itemHeight={280}
+>
+    {#snippet children({ item: font, isVisible, proximity, index })}
+        <FontListItem {font} {isVisible} {proximity}>
+            <FontSampler font={font} bind:text index={index} />
+        </FontListItem>
+    {/snippet}
+</FontVirtualList>
diff --git a/src/widgets/SampleList/ui/index.ts b/src/widgets/SampleList/ui/index.ts
new file mode 100644
index 0000000..d73a19d
--- /dev/null
+++ b/src/widgets/SampleList/ui/index.ts
@@ -0,0 +1,3 @@
+import SampleList from './SampleList/SampleList.svelte';
+
+export { SampleList };