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

<!--
    Component: Layout
    Application shell with providers and page wrapper
-->
<script lang="ts">
import { themeManager } from '$features/ChangeAppTheme';
import G from '$shared/assets/G.svg';
import { ResponsiveProvider } from '$shared/lib';
import { cn } from '$shared/lib';
import { Footer } from '$widgets/Footer';

import {
    type Snippet,
    onDestroy,
    onMount,
} from 'svelte';

interface Props {
    /**
     * Content snippet
     */
    children: Snippet;
}

let { children }: Props = $props();
let fontsReady = $state(true);
const theme = $derived(themeManager.value);

onMount(() => themeManager.init());
onDestroy(() => themeManager.destroy());
</script>

<svelte:head>
    <link rel="icon" href={G} type="image/svg+xml" />

    <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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@800&display=swap"
    />
    <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@800&display=swap"
        media="print"
        onload={(e => ((e.currentTarget as HTMLLinkElement).media = 'all'))}
    />
    <noscript>
        <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@800&display=swap"
        />
    </noscript>
    <title>GlyphDiff | Typography & Typefaces</title>
    <meta
        name="description"
        content="Compare typefaces side by side. Adjust size, weight, leading, and tracking to find the perfect typographic pairing."
    />
</svelte:head>

<ResponsiveProvider>
    <div
        id="app-root"
        class={cn(
            'min-h-dvh w-auto flex flex-col bg-surface dark:bg-dark-bg relative',
            theme === 'dark' ? 'dark' : '',
        )}
    >
        {#if fontsReady}
            {@render children?.()}
        {/if}

        <Footer />
    </div>
</ResponsiveProvider>