diff --git a/components/Timeline.tsx b/components/Timeline.tsx index ecc1044..1b41417 100644 --- a/components/Timeline.tsx +++ b/components/Timeline.tsx @@ -33,6 +33,7 @@ import { trimEdgeBounds, } from "@/lib/edits"; import type { ClipSegment, Word } from "@/lib/types"; +import { isDisfluencyPlaceholder } from "@/lib/disfluencies"; import { VAD_SAMPLE_RATE } from "@/lib/vad"; import { useCutRanges } from "@/hooks/useCutRanges"; import { useIsDark } from "@/hooks/useIsDark"; @@ -726,6 +727,7 @@ export default function Timeline() { const hovered = hoveredWordId === w.id; const cutOut = isWordCutOut(w, cuts); const wordSelected = selectedWordIds.includes(w.id); + const placeholder = isDisfluencyPlaceholder(w.text); const showWordHandles = showHandles && (hovered || wWidth > 28); return (
setHoveredWordId(w.id)} onPointerLeave={() => diff --git a/components/TranscriptPanel.tsx b/components/TranscriptPanel.tsx index 003b2a1..3eb1d01 100644 --- a/components/TranscriptPanel.tsx +++ b/components/TranscriptPanel.tsx @@ -16,6 +16,7 @@ import { X, } from "lucide-react"; import { useEditorStore } from "@/lib/store"; +import { isDisfluencyPlaceholder } from "@/lib/disfluencies"; import { findFillerWordIds } from "@/lib/fillers"; import { findSilenceRanges } from "@/lib/silences"; import { @@ -60,18 +61,23 @@ const WordSpan = memo(function WordSpan({ active: boolean; onClick: (word: Word, el: HTMLElement) => void; }) { + const placeholder = isDisfluencyPlaceholder(word.text); // The trailing space lives inside the span so that selection and deletion // highlights are continuous across words instead of breaking at each gap. return ( onClick(word, e.currentTarget)} className={`py-0.5 cursor-pointer transition-colors duration-75 ${cutOut ? "word-deleted bg-red-50 text-red-600 line-through decoration-red-300 dark:bg-red-950/40 dark:text-red-400 dark:decoration-red-800" : active ? "bg-neutral-200/80 text-zinc-900 dark:bg-neutral-700/80 dark:text-zinc-50" - : "text-zinc-800 hover:bg-neutral-50 dark:text-zinc-200 dark:hover:bg-neutral-800/60" + : placeholder + ? "font-medium text-amber-700/90 hover:bg-amber-50 dark:text-amber-400/90 dark:hover:bg-amber-950/40" + : "text-zinc-800 hover:bg-neutral-50 dark:text-zinc-200 dark:hover:bg-neutral-800/60" }`} > {word.text}{" "} @@ -315,7 +321,7 @@ export default function TranscriptPanel() { {status === "ready" && fillerIds.length > 0 && (