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 type { ResponsiveManager } from '$shared/lib';
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,
    getContext,
} from 'svelte';
import { cubicIn } from 'svelte/easing';
import { fade } from 'svelte/transition';

let searchContainer: HTMLElement;

let isExpanded = $state(true);
const responsive = getContext<ResponsiveManager>('responsive');

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

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

<!-- Font List -->
<div
    class="p-2 sm:p-3 md:p-4 h-full grid gap-3 sm:gap-4 grid-cols-[max-content_1fr]"
    in:fade={{ duration: 500, delay: 150, easing: cubicIn }}
>
    <Section
        class="py-4 sm:py-10 md:py-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}
        {#snippet content({ className })}
            <div class={cn(className, 'col-start-0 col-span-2')}>
                <Logo />
            </div>
        {/snippet}
    </Section>

    <Section
        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-x-12 sm:gap-y-8"
        index={1}
        id="optical_comparator"
        onTitleStatusChange={handleTitleStatusChanged}
        stickyTitle={responsive.isDesktopLarge}
        stickyOffset="4rem"
    >
        {#snippet icon({ className })}
            <EyeIcon class={className} />
        {/snippet}
        {#snippet title({ className })}
            <h1 class={className}>
                Optical<br />Comparator
            </h1>
        {/snippet}
        {#snippet content({ className })}
            <div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
                <ComparisonSlider />
            </div>
        {/snippet}
    </Section>

    <Section
        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-x-12 sm:gap-y-8"
        index={2}
        id="query_module"
        onTitleStatusChange={handleTitleStatusChanged}
        stickyTitle={responsive.isDesktopLarge}
        stickyOffset="4rem"
    >
        {#snippet icon({ className })}
            <ScanSearchIcon class={className} />
        {/snippet}
        {#snippet title({ className })}
            <h2 class={className}>
                Query<br />Module
            </h2>
        {/snippet}
        {#snippet content({ className })}
            <div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
                <FontSearch bind:showFilters={isExpanded} />
            </div>
        {/snippet}
    </Section>

    <Section
        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-x-12 sm:gap-y-8"
        index={3}
        id="sample_set"
        onTitleStatusChange={handleTitleStatusChanged}
        stickyTitle={responsive.isDesktopLarge}
        stickyOffset="4rem"
    >
        {#snippet icon({ className })}
            <LineSquiggleIcon class={className} />
        {/snippet}
        {#snippet title({ className })}
            <h2 class={className}>
                Sample<br />Set
            </h2>
        {/snippet}
        {#snippet content({ className })}
            <div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
                <SampleList />
            </div>
        {/snippet}
    </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>