frontend-svelte/src/shared/ui/Section/Section.svelte

<!--
    Component: Section
    Provides a container for a page widget with snippets for a title
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import type { Snippet } from 'svelte';
import { cubicOut } from 'svelte/easing';
import type { HTMLAttributes } from 'svelte/elements';
import {
    type FlyParams,
    fly,
} from 'svelte/transition';
import { Footnote } from '..';

interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
    /**
     * ID of the section
     */
    id?: string;
    /**
     * Additional CSS classes to apply to the section container.
     */
    class?: string;
    /**
     * Snippet for a title itself
     */
    title?: Snippet<[{ className?: string }]>;
    /**
     * Snippet for a title icon
     */
    icon?: Snippet<[{ className?: string }]>;
    /**
     * Snippet for a title description
     */
    description?: Snippet<[{ className?: string }]>;
    /**
     * Index of the section
     */
    index?: number;
    /**
     * Callback function to notify when the title visibility status changes
     *
     * @param index - Index of the section
     * @param isPast - Whether the section is past the current scroll position
     * @param title - Snippet for a title itself
     * @param id - ID of the section
     * @returns Cleanup callback
     */
    onTitleStatusChange?: (
        index: number,
        isPast: boolean,
        title?: Snippet<[{ className?: string }]>,
        id?: string,
    ) => () => void;
    /**
     * Snippet for the section content
     */
    content?: Snippet<[{ className?: string }]>;
    /**
     * When true, the title stays fixed in view while
     * scrolling through the section content.
     */
    stickyTitle?: boolean;
    /**
     * Top offset for sticky title (e.g. header height).
     * @default '0px'
     */
    stickyOffset?: string;
}

const {
    class: className,
    title,
    icon,
    description,
    index = 0,
    onTitleStatusChange,
    id,
    content,
    stickyTitle = false,
    stickyOffset = '0px',
}: Props = $props();

let titleContainer = $state<HTMLElement>();
const flyParams: FlyParams = {
    y: 0,
    x: -50,
    duration: 300,
    easing: cubicOut,
    opacity: 0.2,
};

// Track if the user has actually scrolled away from view
let isScrolledPast = $state(false);

$effect(() => {
    if (!titleContainer) {
        return;
    }
    let cleanup: ((index: number) => void) | undefined;
    const observer = new IntersectionObserver(
        entries => {
            const entry = entries[0];
            const isPast = !entry.isIntersecting && entry.boundingClientRect.top < 0;

            if (isPast !== isScrolledPast) {
                isScrolledPast = isPast;
                cleanup = onTitleStatusChange?.(index, isPast, title, id);
            }
        },
        {
            // Set threshold to 0 to trigger exactly when the last pixel leaves
            threshold: 0,
        },
    );

    observer.observe(titleContainer);
    return () => {
        observer.disconnect();
        cleanup?.(index);
    };
});
</script>

<section
    {id}
    class={cn(
        'col-span-2 grid grid-cols-subgrid',
        stickyTitle ? 'gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12' : 'grid-rows-[max-content_1fr]',
        className,
    )}
    in:fly={flyParams}
    out:fly={flyParams}
>
    <div
        bind:this={titleContainer}
        class={cn(
            'flex flex-col gap-2 sm:gap-3',
            stickyTitle && 'self-start',
        )}
        style:position={stickyTitle ? 'sticky' : undefined}
        style:top={stickyTitle ? stickyOffset : undefined}
    >
        <div class="flex items-center gap-2 sm:gap-3">
            {#if icon}
                {@render icon({
    className: 'size-3 sm:size-4 stroke-foreground stroke-1 opacity-60',
})}
                <div class="w-px h-2.5 sm:h-3 bg-border-subtle"></div>
            {/if}

            {#if description}
                <Footnote>
                    {#snippet render({ class: className })}
                        {@render description({ className })}
                    {/snippet}
                </Footnote>
            {:else if typeof index === 'number'}
                <Footnote>
                    Component_{String(index).padStart(3, '0')}
                </Footnote>
            {/if}
        </div>

        {#if title}
            {@render title({
    className:
        'text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-semibold tracking-tighter text-foreground leading-[0.9]',
})}
        {/if}
    </div>

    {@render content?.({
    className: stickyTitle
        ? 'row-start-2 col-start-2'
        : 'row-start-2 col-start-2',
})}
</section>