Add auto-scroll, file dialog, and transcript editing

- Auto-scroll transcript to active segment during playback with smart pause when user manually scrolls (resumes after 3s) - Replace prompt() with native Tauri file dialog for audio/video import with file type filters - Add inline transcript editing via double-click with Enter to save, Esc to cancel, preserving original text for change tracking - Show "edited" badge on modified segments Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-26 16:02:27 -08:00
parent 48fe41b064
commit 842f8d5f90
8 changed files with 223 additions and 19 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
      "license": "MIT",
      "dependencies": {
        "@tauri-apps/api": "^2",
+        "@tauri-apps/plugin-dialog": "^2.6.0",
        "@tauri-apps/plugin-opener": "^2",
        "@tiptap/core": "^3.20.0",
        "@tiptap/pm": "^3.20.0",
@@ -1219,6 +1220,15 @@
        "node": ">= 10"
      }
    },
+    "node_modules/@tauri-apps/plugin-dialog": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-dialog/-/plugin-dialog-2.6.0.tgz",
+      "integrity": "sha512-q4Uq3eY87TdcYzXACiYSPhmpBA76shgmQswGkSVio4C82Sz2W4iehe9TnKYwbq7weHiL88Yw19XZm7v28+Micg==",
+      "license": "MIT OR Apache-2.0",
+      "dependencies": {
+        "@tauri-apps/api": "^2.8.0"
+      }
+    },
    "node_modules/@tauri-apps/plugin-opener": {
      "version": "2.5.3",
      "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-opener/-/plugin-opener-2.5.3.tgz",
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
  "license": "MIT",
  "dependencies": {
    "@tauri-apps/api": "^2",
+    "@tauri-apps/plugin-dialog": "^2.6.0",
    "@tauri-apps/plugin-opener": "^2",
    "@tiptap/core": "^3.20.0",
    "@tiptap/pm": "^3.20.0",
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -712,6 +712,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1e0e367e4e7da84520dedcac1901e4da967309406d1e51017ae1abfb97adbd38"
 dependencies = [
 "bitflags 2.11.0",
+ "block2",
+ "libc",
 "objc2",
 ]

@@ -2983,6 +2985,30 @@ dependencies = [
 "web-sys",
 ]

+[[package]]
+name = "rfd"
+version = "0.16.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a15ad77d9e70a92437d8f74c35d99b4e4691128df018833e99f90bcd36152672"
+dependencies = [
+ "block2",
+ "dispatch2",
+ "glib-sys",
+ "gobject-sys",
+ "gtk-sys",
+ "js-sys",
+ "log",
+ "objc2",
+ "objc2-app-kit",
+ "objc2-core-foundation",
+ "objc2-foundation",
+ "raw-window-handle",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+ "windows-sys 0.60.2",
+]
+
 [[package]]
 name = "rusqlite"
 version = "0.31.0"
@@ -3683,6 +3709,46 @@ dependencies = [
 "walkdir",
 ]

+[[package]]
+name = "tauri-plugin-dialog"
+version = "2.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9204b425d9be8d12aa60c2a83a289cf7d1caae40f57f336ed1155b3a5c0e359b"
+dependencies = [
+ "log",
+ "raw-window-handle",
+ "rfd",
+ "serde",
+ "serde_json",
+ "tauri",
+ "tauri-plugin",
+ "tauri-plugin-fs",
+ "thiserror 2.0.18",
+ "url",
+]
+
+[[package]]
+name = "tauri-plugin-fs"
+version = "2.4.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ed390cc669f937afeb8b28032ce837bac8ea023d975a2e207375ec05afaf1804"
+dependencies = [
+ "anyhow",
+ "dunce",
+ "glob",
+ "percent-encoding",
+ "schemars 0.8.22",
+ "serde",
+ "serde_json",
+ "serde_repr",
+ "tauri",
+ "tauri-plugin",
+ "tauri-utils",
+ "thiserror 2.0.18",
+ "toml 0.9.12+spec-1.1.0",
+ "url",
+]
+
 [[package]]
 name = "tauri-plugin-opener"
 version = "2.5.3"
@@ -4297,6 +4363,7 @@ dependencies = [
 "serde_json",
 "tauri",
 "tauri-build",
+ "tauri-plugin-dialog",
 "tauri-plugin-opener",
 "thiserror 1.0.69",
 "uuid",
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -22,3 +22,4 @@ rusqlite = { version = "0.31", features = ["bundled"] }
 uuid = { version = "1", features = ["v4", "serde"] }
 thiserror = "1"
 chrono = { version = "0.4", features = ["serde"] }
+tauri-plugin-dialog = "2.6.0"
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -5,6 +5,7 @@
  "windows": ["main"],
  "permissions": [
    "core:default",
-    "opener:default"
+    "opener:default",
+    "dialog:default"
  ]
 }
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -10,6 +10,7 @@ use commands::transcribe::transcribe_file;
 pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
+        .plugin(tauri_plugin_dialog::init())
        .invoke_handler(tauri::generate_handler![
            create_project,
            get_project,
--- a/src/lib/components/TranscriptEditor.svelte
+++ b/src/lib/components/TranscriptEditor.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { segments, speakers } from '$lib/stores/transcript';
-  import { currentTimeMs } from '$lib/stores/playback';
+  import { currentTimeMs, isPlaying } from '$lib/stores/playback';
  import type { Segment, Word, Speaker } from '$lib/types/transcript';

  interface Props {
@@ -11,6 +11,9 @@
  let { onWordClick, onTextEdit }: Props = $props();

  let transcriptContainer: HTMLDivElement;
+  let autoScroll = $state(true);
+  let lastActiveSegmentId = $state('');
+  let userScrollTimeout: ReturnType<typeof setTimeout> | null = null;

  function getSpeakerName(speakerId: string | null, speakerList: Speaker[]): string {
    if (!speakerId) return 'Unknown';
@@ -39,12 +42,75 @@
    return currentMs >= segment.start_ms && currentMs <= segment.end_ms;
  }

+  let editingSegmentId = $state<string | null>(null);
+  let editText = $state('');
+
  function handleWordClick(word: Word) {
    onWordClick?.(word.start_ms);
  }
+
+  function startEditing(segment: Segment) {
+    editingSegmentId = segment.id;
+    // Combine word texts or fall back to segment text
+    editText = segment.words.length > 0
+      ? segment.words.map(w => w.word).join(' ')
+      : segment.text;
+  }
+
+  function finishEditing(segmentId: string) {
+    const trimmed = editText.trim();
+    if (trimmed) {
+      // Update the segment text in the store
+      segments.update(segs => segs.map(s => {
+        if (s.id !== segmentId) return s;
+        return {
+          ...s,
+          text: trimmed,
+          original_text: s.original_text ?? s.text,
+          is_edited: true,
+          edited_at: new Date().toISOString(),
+        };
+      }));
+      onTextEdit?.(segmentId, trimmed);
+    }
+    editingSegmentId = null;
+  }
+
+  function handleEditKeydown(e: KeyboardEvent, segmentId: string) {
+    if (e.key === 'Escape') {
+      editingSegmentId = null;
+    } else if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      finishEditing(segmentId);
+    }
+  }
+
+  // Pause auto-scroll when user manually scrolls, resume after 3 seconds
+  function handleScroll() {
+    if (!$isPlaying) return;
+    autoScroll = false;
+    if (userScrollTimeout) clearTimeout(userScrollTimeout);
+    userScrollTimeout = setTimeout(() => {
+      autoScroll = true;
+    }, 3000);
+  }
+
+  // Auto-scroll to the active segment during playback
+  $effect(() => {
+    if (!$isPlaying || !autoScroll || !transcriptContainer) return;
+    const currentMs = $currentTimeMs;
+    const activeSegment = $segments.find(s => isSegmentActive(s, currentMs));
+    if (!activeSegment || activeSegment.id === lastActiveSegmentId) return;
+    lastActiveSegmentId = activeSegment.id;
+
+    const el = transcriptContainer.querySelector(`[data-segment-id="${activeSegment.id}"]`);
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  });
 </script>

-<div class="transcript-editor" bind:this={transcriptContainer}>
+<div class="transcript-editor" bind:this={transcriptContainer} onscroll={handleScroll}>
  {#if $segments.length === 0}
    <div class="empty-state">
      <p>No transcript yet</p>
@@ -55,6 +121,7 @@
      <div
        class="segment"
        class:active={isSegmentActive(segment, $currentTimeMs)}
+        data-segment-id={segment.id}
      >
        <div class="segment-header">
          <span
@@ -65,20 +132,36 @@
          </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>
+        {#if editingSegmentId === segment.id}
+          <div class="segment-edit">
+            <textarea
+              class="edit-textarea"
+              bind:value={editText}
+              onblur={() => finishEditing(segment.id)}
+              onkeydown={(e) => handleEditKeydown(e, segment.id)}
+            ></textarea>
+            <span class="edit-hint">Enter to save, Esc to cancel</span>
+          </div>
+        {:else}
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div class="segment-text" ondblclick={() => startEditing(segment)}>
+            {#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}
+            {#if segment.is_edited}
+              <span class="edited-badge">edited</span>
+            {/if}
+          </div>
+        {/if}
      </div>
    {/each}
  {/if}
@@ -151,4 +234,37 @@
  .segment-plain-text {
    color: #ccc;
  }
+  .segment-edit {
+    padding-left: 0.75rem;
+  }
+  .edit-textarea {
+    width: 100%;
+    min-height: 3rem;
+    background: #1a1a2e;
+    color: #e0e0e0;
+    border: 1px solid #e94560;
+    border-radius: 4px;
+    padding: 0.5rem;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: 1.6;
+    resize: vertical;
+  }
+  .edit-textarea:focus {
+    outline: none;
+    border-color: #ff6b81;
+  }
+  .edit-hint {
+    font-size: 0.7rem;
+    color: #666;
+  }
+  .edited-badge {
+    font-size: 0.65rem;
+    color: #e94560;
+    background: rgba(233, 69, 96, 0.15);
+    padding: 0.1rem 0.3rem;
+    border-radius: 3px;
+    margin-left: 0.5rem;
+    vertical-align: middle;
+  }
 </style>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
  import { invoke } from '@tauri-apps/api/core';
+  import { open } 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';
@@ -20,8 +21,14 @@
  }

  async function handleFileImport() {
-    // For now, use a simple prompt — will be replaced with Tauri file dialog
-    const filePath = prompt('Enter path to audio/video file:');
+    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