feature/comparison-slider #19
@@ -1,18 +0,0 @@
|
||||
<!--
|
||||
Component: FontDisplay
|
||||
Displays a grid of FontSampler components for each displayed font.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { flip } from 'svelte/animate';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { displayedFontsStore } from '../../model';
|
||||
import FontSampler from '../FontSampler/FontSampler.svelte';
|
||||
</script>
|
||||
|
||||
<div class="grid gap-2 grid-cols-[repeat(auto-fit,minmax(500px,1fr))] will-change-tranform transition-transform content">
|
||||
{#each displayedFontsStore.fonts as font, index (font.id)}
|
||||
<div animate:flip={{ delay: 0, duration: 400, easing: quintOut }}>
|
||||
<FontSampler font={font} bind:text={displayedFontsStore.text} index={index} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -1,68 +0,0 @@
|
||||
<!--
|
||||
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>
|
||||
Reference in New Issue
Block a user