frontend-svelte/src/routes/Page.svelte

<!--
    Component: Page
    Description: The main page component of the application.
-->
<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 { Section } from '$shared/ui';
import ComparisonSlider from '$widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte';
import { FontSearch } from '$widgets/FontSearch';
import { SampleList } from '$widgets/SampleList';
import LineSquiggleIcon from '@lucide/svelte/icons/line-squiggle';
import ScanEyeIcon from '@lucide/svelte/icons/scan-eye';

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">
    {#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 grow-0 justify-start',
            )}
        >
            <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}

    <Section class="my-12 gap-8" index={1}>
        {#snippet icon({ className })}
            <ScanEyeIcon class={className} />
        {/snippet}
        {#snippet title({ className })}
            <h1 class={className}>
                Optical<br>Comparator
            </h1>
        {/snippet}
        <ComparisonSlider />
    </Section>

    <Section class="my-12 gap-8" index={2}>
        {#snippet icon({ className })}
            <LineSquiggleIcon class={className} />
        {/snippet}
        {#snippet title({ className })}
            <h2 class={className}>
                Sample<br>Set
            </h2>
        {/snippet}
        <SampleList />
    </Section>
</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>