gui-video-clipper/src/App.svelte

<script lang="ts">
  import UrlInput from '$lib/components/UrlInput.svelte';
  import VideoPlayer from '$lib/components/VideoPlayer.svelte';
  import TransportControls from '$lib/components/TransportControls.svelte';
  import Timeline from '$lib/components/Timeline.svelte';
  import ClipList from '$lib/components/ClipList.svelte';
  import StatusBar from '$lib/components/StatusBar.svelte';
  import SetupWizard from '$lib/components/SetupWizard.svelte';
  import PreferencesPanel from '$lib/components/PreferencesPanel.svelte';
  import { loadPreferences } from '$lib/stores/preferences.svelte';

  let showSetupWizard = $state(true);
  let showPreferences = $state(false);

  $effect(() => {
    loadPreferences();
  });
</script>

{#if showSetupWizard}
  <SetupWizard onComplete={() => (showSetupWizard = false)} />
{/if}

{#if showPreferences}
  <PreferencesPanel onClose={() => (showPreferences = false)} />
{/if}

<div class="app-shell">
  <header class="toolbar">
    <UrlInput />
    <button class="prefs-btn" onclick={() => (showPreferences = true)} title="Preferences">⚙</button>
  </header>

  <main class="content">
    <VideoPlayer />
    <TransportControls />
    <Timeline />
    <ClipList />
  </main>

  <StatusBar />
</div>

<style>
  .app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  .toolbar {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    gap: 8px;
  }

  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .prefs-btn {
    font-size: 18px;
    padding: 4px 8px;
  }
</style>