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 { 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';

    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 />
    <SplitView />
</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>