69 lines
2.0 KiB
Svelte
69 lines
2.0 KiB
Svelte
<!--
|
|
Component: SuggestedFonts
|
|
Renders a list of suggested 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 { displayedFontsStore } from '$features/DisplayFont';
|
|
import FontSampler from '$features/DisplayFont/ui/FontSampler/FontSampler.svelte';
|
|
|
|
/**
|
|
* 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={displayedFontsStore.text} index={index} />
|
|
</FontListItem>
|
|
{/snippet}
|
|
</FontVirtualList>
|