fix(overlay): thin centered trim handles and label-free subtitle boundaries in timing review (#274)

changes/timing-review-thin-handles.md

@@ -0,0 +1,5 @@
+type: fixed
+area: overlay
+
+- Media timing review trim handles are now thin lines centered on the clip edge, so it's clear where the clip starts and ends and less of the waveform is covered.
+- Original subtitle boundaries use orange bars without text tags, leaving the waveform unobstructed.

docs-site/anki-integration.md

@@ -122,7 +122,7 @@ Media settings apply to the next card without a restart.
 
 With `media.reviewTiming` on, SubMiner pauses before making media for word, sentence, and audio cards and opens a review dialog. You can also toggle it for the current session with **Review Media Timing** in the runtime options palette (`Ctrl/Cmd+Shift+O`). Clipboard updates and stats-dashboard mining skip the review.
 
-The dialog shows the clip over a speech waveform. When the waveform loads, an untouched clip end moves back to just after the last speech in the line. The Line end rail still marks the subtitle's own end.
+The dialog shows the clip over a speech waveform. When the waveform loads, an untouched clip end moves back to just after the last speech in the line. The orange bars still mark the subtitle's original start and end.
 
 | Action                   | How                                                                   |
 | ------------------------ | --------------------------------------------------------------------- |

src/renderer/index.html

@@ -393,12 +393,6 @@
                   <span class="media-timing-review-original-boundary is-start"></span>
                   <span class="media-timing-review-original-boundary is-end"></span>
                 </div>
-                <span class="media-timing-review-original-label is-start" aria-hidden="true">
-                  Line start
-                </span>
-                <span class="media-timing-review-original-label is-end" aria-hidden="true">
-                  Line end
-                </span>
                 <div
                   id="mediaTimingReviewSelectedRange"
                   class="media-timing-review-selected-range"

src/renderer/modals/media-timing-review.ts

@@ -449,8 +449,8 @@ export function createMediaTimingReviewModal(
   }
 
   /**
-   * Moves an untouched clip end back to where the line's dialogue ends. The Line end
-   * rail keeps marking the subtitle timing, and Reset restores it.
+   * Moves an untouched clip end back to where the line's dialogue ends. The orange
+   * end bar keeps marking the subtitle timing, and Reset restores it.
    */
   function trimTrailingSilence(peaks: readonly number[]): void {
     if (!payload || !trailingTrimPending || previewPlaying || previewRequest.isInFlight()) {

src/renderer/style.css

@@ -1763,34 +1763,6 @@ body:focus-visible,
   right: 0;
 }
 
-.media-timing-review-original-label {
-  position: absolute;
-  z-index: 7;
-  padding: 3px 5px;
-  border: 1px solid color-mix(in srgb, var(--ctp-crust) 35%, transparent);
-  border-radius: 4px;
-  background: var(--ctp-peach);
-  box-shadow: 0 2px 6px color-mix(in srgb, var(--ctp-crust) 55%, transparent);
-  color: var(--ctp-crust);
-  font-size: 8px;
-  font-weight: 800;
-  letter-spacing: 0.06em;
-  line-height: 1;
-  pointer-events: none;
-  white-space: nowrap;
-  text-transform: uppercase;
-}
-
-.media-timing-review-original-label.is-start {
-  top: 5px;
-  left: calc(var(--original-start) + 7px);
-}
-
-.media-timing-review-original-label.is-end {
-  right: calc(100% - var(--original-end) + 7px);
-  bottom: 5px;
-}
-
 .media-timing-review-track.is-loading::after {
   position: absolute;
   z-index: 2;
@@ -1856,61 +1828,62 @@ body:focus-visible,
   }
 }
 
+/* A thin line centered on the clip edge, so the line itself is the trim boundary. */
 .media-timing-review-handle {
   position: absolute;
   z-index: 6;
   top: 0;
   bottom: 0;
-  width: 14px;
-  border: 1px solid var(--ctp-teal);
-  background: linear-gradient(
-    180deg,
-    var(--ctp-teal),
-    color-mix(in srgb, var(--ctp-teal) 74%, var(--ctp-crust))
-  );
+  width: 3px;
+  background: var(--ctp-teal);
   cursor: ew-resize;
   touch-action: none;
+  transform: translateX(-50%);
   transition: box-shadow 130ms ease;
 }
 
-/* Widens the grab area past the visible bracket without moving the clip edge. */
+/* Widens the grab area past the visible line without moving the clip edge. */
 .media-timing-review-handle::before {
   position: absolute;
-  inset: 0 -7px;
+  inset: 0 -8px;
   content: '';
 }
 
+/* Grip knob, symmetric about the line so it never reads as a separate edge. */
 .media-timing-review-handle::after {
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 6px;
-  height: 18px;
+  width: 7px;
+  height: 16px;
   content: '';
-  border-inline: 1px solid color-mix(in srgb, var(--ctp-crust) 55%, transparent);
+  border: 1px solid color-mix(in srgb, var(--ctp-crust) 55%, transparent);
+  border-radius: 4px;
+  background: var(--ctp-teal);
   transform: translate(-50%, -50%);
+  pointer-events: none;
 }
 
 .media-timing-review-handle-start {
   left: var(--selection-start);
-  border-radius: 5px 0 0 5px;
 }
 
 .media-timing-review-handle-end {
   left: var(--selection-end);
-  border-radius: 0 5px 5px 0;
-  transform: translateX(-100%);
 }
 
 .media-timing-review-handle:hover {
-  box-shadow: 0 0 16px color-mix(in srgb, var(--ctp-teal) 60%, transparent);
+  box-shadow: 0 0 10px color-mix(in srgb, var(--ctp-teal) 70%, transparent);
 }
 
 .media-timing-review-handle:focus-visible {
   outline: 2px solid transparent;
-  box-shadow:
-    inset 0 0 0 2px var(--ctp-yellow),
-    0 0 16px color-mix(in srgb, var(--ctp-yellow) 55%, transparent);
+  background: var(--ctp-yellow);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--ctp-yellow) 60%, transparent);
+}
+
+.media-timing-review-handle:focus-visible::after {
+  background: var(--ctp-yellow);
 }
 
 .media-timing-review-expand-row span {