frontend-svelte/src/routes/Page.svelte

<!--
    Component: Page
    Description: The main page component of the application.
-->
<script lang="ts">
import { scrollBreadcrumbsStore } from '$entities/Breadcrumb';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import {
    Logo,
    Section,
} from '$shared/ui';
import ComparisonSlider from '$widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte';
import { FontSearch } from '$widgets/FontSearch';
import { SampleList } from '$widgets/SampleList';
import CodeIcon from '@lucide/svelte/icons/code';
import EyeIcon from '@lucide/svelte/icons/eye';
import LineSquiggleIcon from '@lucide/svelte/icons/line-squiggle';
import ScanSearchIcon from '@lucide/svelte/icons/search';
import type { Snippet } from 'svelte';

let searchContainer: HTMLElement;

let isExpanded = $state(false);

function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippet<[{ className?: string }]>) {
    if (isPast && title) {
        scrollBreadcrumbsStore.add({ index, title });
    } else {
        scrollBreadcrumbsStore.remove(index);
    }

    return () => {
        scrollBreadcrumbsStore.remove(index);
    };
}

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

<!-- Font List -->
<div class="p-2 sm:p-3 md:p-4 h-full flex flex-col gap-3 sm:gap-4">
    <Section class="my-4 sm:my-10 md:my-12 gap-6 sm:gap-8" onTitleStatusChange={handleTitleStatusChanged}>
        {#snippet icon({ className })}
            <CodeIcon class={className} />
        {/snippet}
        {#snippet description({ className })}
            <span class={className}>
                Project_Codename
            </span>
        {/snippet}
        <Logo />
    </Section>
    <!--
        <Section class="my-12 gap-8" index={1} onTitleStatusChange={handleTitleStatusChanged}>
            {#snippet icon({ className })}
                <EyeIcon class={className} />
            {/snippet}
            {#snippet title({ className })}
                <h1 class={className}>
                    Optical<br />Comparator
                </h1>
            {/snippet}
            <ComparisonSlider />
        </Section>
    -->

    <Section class="my-4 sm:my-10 md:my-12 gap-6 sm:gap-8" index={2} onTitleStatusChange={handleTitleStatusChanged}>
        {#snippet icon({ className })}
            <ScanSearchIcon class={className} />
        {/snippet}
        {#snippet title({ className })}
            <h2 class={className}>
                Query<br />Module
            </h2>
        {/snippet}
        <FontSearch bind:showFilters={isExpanded} />
    </Section>

    <Section class="my-4 sm:my-10 md:my-12 gap-6 sm:gap-8" index={3} onTitleStatusChange={handleTitleStatusChanged}>
        {#snippet icon({ className })}
            <LineSquiggleIcon class={className} />
        {/snippet}
        {#snippet title({ className })}
            <h2 class={className}>
                Sample<br />Set
            </h2>
        {/snippet}
        <SampleList />
    </Section>
</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>