local-transcription/src/App.svelte

<script lang="ts">
  import { onMount } from "svelte";
  import Header from "$lib/components/Header.svelte";
  import StatusBar from "$lib/components/StatusBar.svelte";
  import Controls from "$lib/components/Controls.svelte";
  import TranscriptionDisplay from "$lib/components/TranscriptionDisplay.svelte";
  import Settings from "$lib/components/Settings.svelte";
  import { backendStore } from "$lib/stores/backend";
  import { configStore } from "$lib/stores/config";

  let showSettings = $state(false);

  let obsDisplayUrl = $derived(backendStore.obsUrl);
  let syncDisplayUrl = $derived(backendStore.syncUrl);
  let isConnected = $derived(backendStore.connectionState === "connected");
  let connectionState = $derived(backendStore.connectionState);

  function openSettings() {
    showSettings = true;
  }

  function closeSettings() {
    showSettings = false;
  }

  onMount(() => {
    backendStore.connect();
    configStore.loadConfig();

    return () => {
      backendStore.disconnect();
    };
  });
</script>

{#if !isConnected}
  <div class="connecting-overlay">
    <div class="connecting-content">
      <div class="connecting-icon">
        {#if connectionState === "error"}
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#e74c3c" stroke-width="2">
            <circle cx="12" cy="12" r="10"/>
            <line x1="15" y1="9" x2="9" y2="15"/>
            <line x1="9" y1="9" x2="15" y2="15"/>
          </svg>
        {:else}
          <div class="spinner"></div>
        {/if}
      </div>
      <h2>Local Transcription</h2>
      {#if connectionState === "error"}
        <p>Cannot connect to backend</p>
        <p class="hint">Make sure the Python backend is running:<br>
          <code>uv run python -m backend.main_headless</code></p>
      {:else}
        <p>Connecting to backend...</p>
      {/if}
    </div>
  </div>
{:else}
  <div class="app-shell">
    <Header onSettingsClick={openSettings} />
    <StatusBar />

    <div class="display-links">
      <span class="link-label">OBS:</span>
      <a href={obsDisplayUrl} target="_blank" rel="noopener">{obsDisplayUrl}</a>
      {#if syncDisplayUrl}
        <span class="link-separator">|</span>
        <span class="link-label">Sync:</span>
        <a href={syncDisplayUrl} target="_blank" rel="noopener"
          >{syncDisplayUrl}</a
        >
      {/if}
    </div>

    <TranscriptionDisplay />
    <Controls />

    <div class="version-label">v{backendStore.version}</div>
  </div>

  {#if showSettings}
    <Settings onClose={closeSettings} />
  {/if}
{/if}

<style>
  .connecting-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background-color: var(--bg-primary);
  }

  .connecting-content {
    text-align: center;
    color: var(--text-primary);
  }

  .connecting-content h2 {
    margin: 16px 0 8px;
    font-size: 20px;
    font-weight: 600;
  }

  .connecting-content p {
    margin: 4px 0;
    color: var(--text-secondary);
    font-size: 14px;
  }

  .connecting-content .hint {
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-muted);
  }

  .connecting-content code {
    display: inline-block;
    margin-top: 4px;
    padding: 4px 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-primary);
  }

  .connecting-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
  }

  .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-color, #4CAF50);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .app-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: var(--bg-primary);
  }

  .display-links {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 20px;
    font-size: 12px;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
  }

  .link-label {
    color: var(--text-secondary);
    font-weight: 500;
  }

  .link-separator {
    color: var(--text-muted);
    margin: 0 4px;
  }

  .version-label {
    position: fixed;
    bottom: 6px;
    right: 12px;
    font-size: 11px;
    color: var(--text-muted);
    pointer-events: none;
    z-index: 10;
  }
</style>