src/App.svelte

<script lang="ts">
    import { onMount, onDestroy } from 'svelte';
    import { registerShortcuts, shortcuts } from './lib/config/shortcuts';
    import { loadingStore } from './lib/stores/loading';
    import { uiStore } from './lib/stores/ui';
    import { contentManager } from './lib/services/content-manager';
    import AppHeader from './lib/components/layout/AppHeader.svelte';
    import SplitView from './lib/components/layout/SplitView.svelte';
    import LoadingScreen from './lib/components/layout/LoadingScreen.svelte';
    import About from './lib/components/about/About.svelte';

    let unregisterShortcuts: () => void;

    onMount(() => {
        loadingStore.startLoading();

        // Initialize ContentManager
        contentManager.initialize();

        unregisterShortcuts = registerShortcuts(shortcuts);

        setTimeout(() => {
            loadingStore.setProgress(60);
        }, 100);

        requestAnimationFrame(() => {
            requestAnimationFrame(() => {
                loadingStore.finishLoading();
            });
        });
    });

    onDestroy(() => {
        if (unregisterShortcuts) unregisterShortcuts();
    });
</script>

<LoadingScreen 
    loading={$loadingStore.isLoading} 
/>

<main>
    <AppHeader />
    {#if $uiStore.viewMode === 'about'}
        <About />
    {:else}
        <SplitView />
    {/if}
</main>

<style>
    :global(body) {
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
        background: linear-gradient(135deg, #0B0A09 0%, #0F0E0C 100%);
        color: #ffffff;
        overflow: hidden;
    }

    :global(*) {
        box-sizing: border-box;
    }

    main {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
</style>