voice-to-notes/src/lib/components/TranscriptEditor.svelte

<script lang="ts">
  import { segments, speakers } from '$lib/stores/transcript';
  import { currentTimeMs } from '$lib/stores/playback';
  import type { Segment, Word, Speaker } from '$lib/types/transcript';

  interface Props {
    onWordClick?: (timeMs: number) => void;
    onTextEdit?: (segmentId: string, newText: string) => void;
  }

  let { onWordClick, onTextEdit }: Props = $props();

  let transcriptContainer: HTMLDivElement;

  function getSpeakerName(speakerId: string | null, speakerList: Speaker[]): string {
    if (!speakerId) return 'Unknown';
    const speaker = speakerList.find(s => s.id === speakerId);
    return speaker?.display_name || speaker?.label || 'Unknown';
  }

  function getSpeakerColor(speakerId: string | null, speakerList: Speaker[]): string {
    if (!speakerId) return '#888';
    const speaker = speakerList.find(s => s.id === speakerId);
    return speaker?.color || '#888';
  }

  function formatTimestamp(ms: number): string {
    const totalSeconds = Math.floor(ms / 1000);
    const m = Math.floor(totalSeconds / 60);
    const s = totalSeconds % 60;
    return `${m}:${s.toString().padStart(2, '0')}`;
  }

  function isWordActive(word: Word, currentMs: number): boolean {
    return currentMs >= word.start_ms && currentMs <= word.end_ms;
  }

  function isSegmentActive(segment: Segment, currentMs: number): boolean {
    return currentMs >= segment.start_ms && currentMs <= segment.end_ms;
  }

  function handleWordClick(word: Word) {
    onWordClick?.(word.start_ms);
  }
</script>

<div class="transcript-editor" bind:this={transcriptContainer}>
  {#if $segments.length === 0}
    <div class="empty-state">
      <p>No transcript yet</p>
      <p class="hint">Import an audio file and run transcription to get started</p>
    </div>
  {:else}
    {#each $segments as segment (segment.id)}
      <div
        class="segment"
        class:active={isSegmentActive(segment, $currentTimeMs)}
      >
        <div class="segment-header">
          <span
            class="speaker-label"
            style="border-left-color: {getSpeakerColor(segment.speaker_id, $speakers)}"
          >
            {getSpeakerName(segment.speaker_id, $speakers)}
          </span>
          <span class="timestamp">{formatTimestamp(segment.start_ms)}</span>
        </div>
        <div class="segment-text">
          {#each segment.words as word (word.id)}
            <span
              class="word"
              class:word-active={isWordActive(word, $currentTimeMs)}
              onclick={() => handleWordClick(word)}
              role="button"
              tabindex="0"
              onkeydown={(e) => { if (e.key === 'Enter') handleWordClick(word); }}
            >{word.word} </span>
          {:else}
            <span class="segment-plain-text">{segment.text}</span>
          {/each}
        </div>
      </div>
    {/each}
  {/if}
</div>

<style>
  .transcript-editor {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: #16213e;
    border-radius: 8px;
    color: #e0e0e0;
  }
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
  }
  .hint {
    font-size: 0.875rem;
    color: #555;
  }
  .segment {
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s;
  }
  .segment.active {
    background: rgba(233, 69, 96, 0.1);
  }
  .segment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
  }
  .speaker-label {
    font-weight: 600;
    font-size: 0.875rem;
    border-left: 3px solid;
    padding-left: 0.5rem;
  }
  .timestamp {
    color: #666;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
  }
  .segment-text {
    line-height: 1.6;
    padding-left: 0.75rem;
  }
  .word {
    cursor: pointer;
    border-radius: 2px;
    padding: 0 1px;
    transition: background-color 0.15s;
  }
  .word:hover {
    background: rgba(233, 69, 96, 0.2);
  }
  .word-active {
    background: rgba(233, 69, 96, 0.35);
    color: #fff;
  }
  .segment-plain-text {
    color: #ccc;
  }
</style>