feature/comparison-slider #19

Merged
ilia merged 129 commits from feature/comparison-slider into main 2026-02-02 09:23:46 +00:00
2 changed files with 0 additions and 86 deletions
Showing only changes of commit 5496fd2680 - Show all commits

View File

@@ -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>

View File

@@ -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>