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 favicon from '$shared/assets/favicon.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 } from 'svelte';

interface Props {
    children: Snippet;
}

/** Slot content for route pages to render */
let { children }: Props = $props();
</script>

<svelte:head>
    <link rel="icon" href={favicon} />
    <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
        href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap"
        rel="stylesheet"
    >
    <link
        href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Karla:wght@300&display=swap"
        rel="stylesheet"
    >
</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 h-full w-full max-w-6xl mx-auto px-0 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 overflow-x-hidden">
            <TooltipProvider>
                {@render children?.()}
            </TooltipProvider>
        </main>
        <!-- </ScrollArea> -->
        <footer></footer>
    </div>
</ResponsiveProvider>