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 { cn } from '$shared/shadcn/utils/shadcn-utils';
import ComparisonSlider from '$widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte';
import { FontSearch } from '$widgets/FontSearch';
import { cubicOut } from 'svelte/easing';
import { Spring } from 'svelte/motion';
import type {
    SlideParams,
    TransitionConfig,
} from 'svelte/transition';

/**
 * Page Component
 */

let searchContainer: HTMLElement;

let isExpanded = $state(false);
let isOpen = $state(false);

let isEmptyScreen = $derived(!displayedFontsStore.hasAnyFonts && !isExpanded && !isOpen);

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

<!-- Font List -->
<div class="p-2 h-full flex flex-col gap-3 overflow-hidden">
    {#key isEmptyScreen}
        <div
            class={cn(
                'flex flex-col transition-all duration-700 ease-[cubic-bezier(0.23,1,0.32,1)] mx-40',
                'will-change-[flex-grow] transform-gpu',
                isEmptyScreen
                    ? 'grow justify-center'
                    : 'animate-search',
            )}
        >
            <div
                class={cn(
                    'transition-transform duration-700 ease-[cubic-bezier(0.23,1,0.32,1)]',
                )}
            >
                <FontSearch bind:showFilters={isExpanded} bind:isOpen />
            </div>
        </div>
    {/key}

    <div class="my-2 mx-10">
        <ComparisonSlider />
    </div>

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

<style>
@keyframes search {
        0% {
            opacity: 1;
            transform: scale(1);
            flex-grow: 1;
            justify-content: center;
        }
        15% {
            opacity: 0.5;
            transform: scale(0.95);
        }
        30% {
            opacity: 0;
        }
        100% {
            opacity: 1;
            transform: scale(1);
            flex-grow: 0;
            justify-content: flex-start;
        }
    }

    .animate-search {
        animation: search 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }

.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;
}

.will-change-[height] {
    will-change: flex-grow, padding;
    /* Forces GPU acceleration for the layout shift */
    transform: translateZ(0);
}
</style>