frontend-svelte/src/app/ui/Layout.svelte

<script lang="ts">
/**
 * Layout Component
 *
 * Root layout wrapper that provides the application shell structure. Handles favicon,
 * toolbar provider initialization, and renders child routes with consistent structure.
 *
 * Layout structure:
 * - Header area (currently empty, reserved for future use)
 *
 * - Footer area (currently empty, reserved for future use)
 */
import { BreadcrumbHeader } from '$entities/Breadcrumb';
import GD from '$shared/assets/GD.svg';
import { ResponsiveProvider } from '$shared/lib';
import { ScrollArea } from '$shared/shadcn/ui/scroll-area';
import { Provider as TooltipProvider } from '$shared/shadcn/ui/tooltip';
import {
    type Snippet,
    onMount,
} from 'svelte';

interface Props {
    children: Snippet;
}

let { children }: Props = $props();
let fontsReady = $state(false);

/**
 * Sets fontsReady flag to true when font for the page logo is loaded.
 */
onMount(async () => {
    if (!('fonts' in document)) {
        fontsReady = true;
        return;
    }

    const required = ['100'];

    const missing = required.filter(
        w => !document.fonts.check(`${w} 1em Barlow`),
    );

    if (missing.length > 0) {
        await Promise.all(
            missing.map(w => document.fonts.load(`${w} 1em Barlow`)),
        );
    }
    fontsReady = true;
});
</script>

<svelte:head>
    <link rel="icon" href={GD} />

    <link rel="preconnect" href="https://api.fontshare.com" />
    <link
        rel="preconnect"
        href="https://cdn.fontshare.com"
        crossorigin="anonymous"
    />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link
        rel="preconnect"
        href="https://fonts.gstatic.com"
        crossorigin="anonymous"
    />
    <link
        rel="preload"
        as="style"
        href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;1,100;1,200&family=Karla:wght@200..800&family=Major+Mono+Display&display=swap"
    />
    <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;1,100;1,200&family=Karla:wght@200..800&family=Major+Mono+Display&display=swap"
        media="print"
        onload={(e => ((e.currentTarget as HTMLLinkElement).media = 'all'))}
    />
    <noscript>
        <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;1,100;1,200&family=Karla:wght@200..800&family=Major+Mono+Display&display=swap"
        />
    </noscript>
    <title>Compare Typography & Typefaces | GlyphDiff</title>
</svelte:head>

<ResponsiveProvider>
    <div id="app-root" class="min-h-screen flex flex-col bg-background">
        <header>
            <BreadcrumbHeader />
        </header>

        <!-- <ScrollArea class="h-screen w-screen"> -->
        <main class="flex-1 w-full mx-auto px-4 pt-0 pb-10 sm:px-6 sm:pt-8 sm:pb-12 md:px-8 md:pt-10 md:pb-16 lg:px-10 lg:pt-12 lg:pb-20 xl:px-16 relative">
            <TooltipProvider>
                {#if fontsReady}
                    {@render children?.()}
                {/if}
            </TooltipProvider>
        </main>
        <!-- </ScrollArea> -->
        <footer></footer>
    </div>
</ResponsiveProvider>