voice-to-notes/src/routes/+page.svelte

<script lang="ts">
  import { invoke } from '@tauri-apps/api/core';
  import { open, save } from '@tauri-apps/plugin-dialog';
  import WaveformPlayer from '$lib/components/WaveformPlayer.svelte';
  import TranscriptEditor from '$lib/components/TranscriptEditor.svelte';
  import SpeakerManager from '$lib/components/SpeakerManager.svelte';
  import AIChatPanel from '$lib/components/AIChatPanel.svelte';
  import ProgressOverlay from '$lib/components/ProgressOverlay.svelte';
  import { segments, speakers } from '$lib/stores/transcript';
  import type { Segment, Speaker } from '$lib/types/transcript';

  let waveformPlayer: WaveformPlayer;
  let audioUrl = $state('');
  let isTranscribing = $state(false);
  let transcriptionProgress = $state(0);
  let transcriptionStage = $state('');
  let transcriptionMessage = $state('');

  // Speaker color palette for auto-assignment
  const speakerColors = ['#e94560', '#4ecdc4', '#ffe66d', '#a8e6cf', '#ff8b94', '#c7ceea', '#ffd93d', '#6bcb77'];

  function handleWordClick(timeMs: number) {
    waveformPlayer?.seekTo(timeMs);
  }

  async function handleFileImport() {
    const filePath = await open({
      multiple: false,
      filters: [{
        name: 'Audio/Video',
        extensions: ['mp3', 'wav', 'flac', 'ogg', 'm4a', 'aac', 'wma',
                     'mp4', 'mkv', 'avi', 'mov', 'webm'],
      }],
    });
    if (!filePath) return;

    // Convert file path to URL for wavesurfer
    audioUrl = `asset://localhost/${encodeURIComponent(filePath)}`;
    waveformPlayer?.loadAudio(audioUrl);

    // Start pipeline (transcription + diarization)
    isTranscribing = true;
    transcriptionProgress = 0;
    transcriptionStage = 'Starting...';

    try {
      const result = await invoke<{
        segments: Array<{
          text: string;
          start_ms: number;
          end_ms: number;
          speaker: string | null;
          words: Array<{
            word: string;
            start_ms: number;
            end_ms: number;
            confidence: number;
          }>;
        }>;
        language: string;
        duration_ms: number;
        speakers: string[];
        num_speakers: number;
      }>('run_pipeline', { filePath });

      // Create speaker entries from pipeline result
      const newSpeakers: Speaker[] = (result.speakers || []).map((label, idx) => ({
        id: `speaker-${idx}`,
        project_id: '',
        label,
        display_name: null,
        color: speakerColors[idx % speakerColors.length],
      }));
      speakers.set(newSpeakers);

      // Build speaker label → id lookup
      const speakerLookup = new Map(newSpeakers.map(s => [s.label, s.id]));

      // Convert result to our store format
      const newSegments: Segment[] = result.segments.map((seg, idx) => ({
        id: `seg-${idx}`,
        project_id: '',
        media_file_id: '',
        speaker_id: seg.speaker ? (speakerLookup.get(seg.speaker) ?? null) : null,
        start_ms: seg.start_ms,
        end_ms: seg.end_ms,
        text: seg.text,
        original_text: null,
        confidence: null,
        is_edited: false,
        edited_at: null,
        segment_index: idx,
        words: seg.words.map((w, widx) => ({
          id: `word-${idx}-${widx}`,
          segment_id: `seg-${idx}`,
          word: w.word,
          start_ms: w.start_ms,
          end_ms: w.end_ms,
          confidence: w.confidence,
          word_index: widx,
        })),
      }));

      segments.set(newSegments);
    } catch (err) {
      console.error('Pipeline failed:', err);
      alert(`Pipeline failed: ${err}`);
    } finally {
      isTranscribing = false;
    }
  }

  const exportFormats = [
    { name: 'SubRip Subtitle', ext: 'srt', format: 'srt' },
    { name: 'WebVTT', ext: 'vtt', format: 'vtt' },
    { name: 'Advanced SubStation Alpha', ext: 'ass', format: 'ass' },
    { name: 'Plain Text', ext: 'txt', format: 'txt' },
    { name: 'Markdown', ext: 'md', format: 'md' },
  ];

  let showExportMenu = $state(false);

  async function handleExport(format: string, ext: string, filterName: string) {
    showExportMenu = false;

    const outputPath = await save({
      filters: [{ name: filterName, extensions: [ext] }],
    });
    if (!outputPath) return;

    // Build speaker lookup: speaker_id → display_name
    const speakerMap: Record<string, string> = {};
    for (const s of $speakers) {
      speakerMap[s.label] = s.display_name || s.label;
    }

    // Build export segments from store
    const exportSegments = $segments.map(seg => {
      const speaker = $speakers.find(s => s.id === seg.speaker_id);
      return {
        text: seg.text,
        start_ms: seg.start_ms,
        end_ms: seg.end_ms,
        speaker: speaker?.label ?? null,
      };
    });

    try {
      await invoke('export_transcript', {
        segments: exportSegments,
        speakers: speakerMap,
        format,
        outputPath,
        title: 'Voice to Notes Transcript',
      });
      alert(`Exported to ${outputPath}`);
    } catch (err) {
      console.error('Export failed:', err);
      alert(`Export failed: ${err}`);
    }
  }
</script>

<div class="app-header">
  <h1>Voice to Notes</h1>
  <div class="header-actions">
    <button class="import-btn" onclick={handleFileImport}>
      Import Audio/Video
    </button>
    {#if $segments.length > 0}
      <div class="export-dropdown">
        <button class="export-btn" onclick={() => showExportMenu = !showExportMenu}>
          Export
        </button>
        {#if showExportMenu}
          <div class="export-menu">
            {#each exportFormats as fmt}
              <button class="export-option" onclick={() => handleExport(fmt.format, fmt.ext, fmt.name)}>
                {fmt.name} (.{fmt.ext})
              </button>
            {/each}
          </div>
        {/if}
      </div>
    {/if}
  </div>
</div>

<div class="workspace">
  <div class="main-content">
    <WaveformPlayer bind:this={waveformPlayer} {audioUrl} />
    <TranscriptEditor onWordClick={handleWordClick} />
  </div>
  <div class="sidebar-right">
    <SpeakerManager />
    <AIChatPanel />
  </div>
</div>

<ProgressOverlay
  visible={isTranscribing}
  percent={transcriptionProgress}
  stage={transcriptionStage}
  message={transcriptionMessage}
/>

<style>
  .app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: #0f3460;
    color: #e0e0e0;
  }
  h1 {
    font-size: 1.25rem;
    margin: 0;
  }
  .import-btn {
    background: #e94560;
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
  }
  .import-btn:hover {
    background: #d63851;
  }
  .header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  .export-dropdown {
    position: relative;
  }
  .export-btn {
    background: #0f3460;
    border: 1px solid #4a5568;
    color: #e0e0e0;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
  }
  .export-btn:hover {
    background: #1a4a7a;
  }
  .export-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: #16213e;
    border: 1px solid #4a5568;
    border-radius: 6px;
    overflow: hidden;
    z-index: 10;
    min-width: 220px;
  }
  .export-option {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: #e0e0e0;
    padding: 0.5rem 1rem;
    text-align: left;
    cursor: pointer;
    font-size: 0.8rem;
  }
  .export-option:hover {
    background: rgba(233, 69, 96, 0.2);
  }
  .workspace {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    height: calc(100vh - 3.5rem);
    background: #0a0a23;
  }
  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
  }
  .sidebar-right {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-shrink: 0;
  }
</style>