frontend-svelte/src/widgets/SampleList/ui/SampleList/SampleList.svelte

<!--
    Component: SampleList
    Renders a list of fonts in a virtualized list to improve performance.
    - Includes pagination with auto-loading when scrolling near the bottom.
    - Provides a typography menu for font setup.
-->
<script lang="ts">
import {
    FontListItem,
    FontVirtualList,
    unifiedFontStore,
} from '$entities/Font';
import { FontSampler } from '$features/DisplayFont';
import {
    TypographyMenu,
    controlManager,
} from '$features/SetupFont';

let text = $state('The quick brown fox jumps over the lazy dog...');
let wrapper = $state<HTMLDivElement | null>(null);
// Binds to the actual window height
let innerHeight = $state(0);
// Is the component above the middle of the viewport?
let isAboveMiddle = $state(false);

const isLoading = $derived(unifiedFontStore.isFetching || unifiedFontStore.isLoading);

/**
 * 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`;
});

function checkPosition() {
    if (!wrapper) return;

    const rect = wrapper.getBoundingClientRect();
    const viewportMiddle = innerHeight / 2;

    isAboveMiddle = rect.top < viewportMiddle;
}
</script>

<svelte:window
    bind:innerHeight
    onscroll={checkPosition}
    onresize={checkPosition}
/>

<div bind:this={wrapper}>
    <FontVirtualList
        items={unifiedFontStore.fonts}
        total={unifiedFontStore.pagination.total}
        onNearBottom={handleNearBottom}
        itemHeight={220}
        useWindowScroll={true}
        weight={controlManager.weight}
        {isLoading}
    >
        {#snippet children({
    item: font,
    isFullyVisible,
    isPartiallyVisible,
    proximity,
    index,
})}
            <FontListItem {font} {isFullyVisible} {isPartiallyVisible} {proximity}>
                <FontSampler {font} bind:text {index} />
            </FontListItem>
        {/snippet}
    </FontVirtualList>

    <TypographyMenu
        class="fixed bottom-4 sm:bottom-5 right-4 sm:left-1/2 sm:right-[unset] sm:-translate-x-1/2"
        hidden={!isAboveMiddle}
    />
</div>