frontend-svelte/src/routes/Page.svelte

<script lang="ts">
import { appliedFontsManager } from '$entities/Font';
import { displayedFontsStore } from '$features/DisplayFont';
import FontDisplay from '$features/DisplayFont/ui/FontDisplay/FontDisplay.svelte';
import { controlManager } from '$features/SetupFont';
import ComparisonSlider from '$widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte';
import { FontSearch } from '$widgets/FontSearch';

/**
 * Page Component
 */

let searchContainer: HTMLElement;

let isExpanded = $state(false);

$effect(() => {
    appliedFontsManager.touch(
        displayedFontsStore.fonts.map(font => ({ slug: font.id, weight: controlManager.weight })),
    );
});
</script>

<!-- Font List -->
<div class="p-2 will-change-[height]">
    <div bind:this={searchContainer}>
        <FontSearch bind:showFilters={isExpanded} />
    </div>

    <ComparisonSlider />

    <div class="will-change-tranform transition-transform content">
        <FontDisplay />
    </div>
</div>

<style>
.content {
        /* Tells the browser to skip rendering off-screen content */
        content-visibility: auto;
        /* Helps the browser reserve space without calculating everything */
        contain-intrinsic-size: 1px 1000px;

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}
</style>