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

<script lang="ts">
/**
 * Layout Component
 *
 * Root layout wrapper that provides the application shell structure. Handles favicon,
 * sidebar provider initialization, and renders child routes with consistent structure.
 *
 * Layout structure:
 * - Header area (currently empty, reserved for future use)
 * - Collapsible sidebar with main content area
 * - Footer area (currently empty, reserved for future use)
 *
 * Uses Sidebar.Provider to enable mobile-responsive collapsible sidebar behavior
 * throughout the application.
 */
import favicon from '$shared/assets/favicon.svg';
import * as Sidebar from '$shared/shadcn/ui/sidebar/index';
import { FiltersSidebar } from '$widgets/FiltersSidebar';
import TypographyMenu from '$widgets/TypographySettings/ui/TypographyMenu.svelte';

/** Slot content for route pages to render */
let { children } = $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"
    >
</svelte:head>

<div id="app-root">
    <header></header>

    <Sidebar.Provider>
        <FiltersSidebar />
        <main class="w-dvw">
            <TypographyMenu />
            {@render children?.()}
        </main>
    </Sidebar.Provider>
    <footer></footer>
</div>

<style>
#app-root {
    width: 100%;
    height: 100vh;
}
</style>