From d40db5c41c3151bcade5cd3785f675512571946c Mon Sep 17 00:00:00 2001
From: Wassim Gharbi <wassgha@gmail.com>
Date: Wed, 29 Jul 2026 19:53:02 -1000
Subject: [PATCH 1/6] audio mode ux

---
 components/Editor.tsx       |  14 ++++
 components/MediaPreview.tsx | 132 ++++++++++--------------------------
 components/Timeline.tsx     |  93 ++++++++++++++++++++++---
 3 files changed, 130 insertions(+), 109 deletions(-)

diff --git a/components/Editor.tsx b/components/Editor.tsx
index 928d0513..9a7e276c 100644
--- a/components/Editor.tsx
+++ b/components/Editor.tsx
@@ -105,6 +105,20 @@ function SplitWorkspace({ orientation }: { orientation: "horizontal" | "vertical
 
 function EditorWorkspace() {
   const isDesktop = useIsDesktopLayout();
+  const mediaKind = useEditorStore((s) => s.mediaKind);
+  // Audio has no visual preview — give the transcript the full workspace and
+  // mount MediaPreview off-layout so the hidden <audio> element still drives
+  // playback / spacebar / timeline controls.
+  if (mediaKind === "audio") {
+    return (
+      <>
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+          <TranscriptPanel />
+        </div>
+        <MediaPreview />
+      </>
+    );
+  }
   // Keyed so crossing the breakpoint remounts the group and restores that
   // orientation's saved layout instead of carrying sizes across.
   return isDesktop ? (
diff --git a/components/MediaPreview.tsx b/components/MediaPreview.tsx
index 69fd21e2..5d3d27b9 100644
--- a/components/MediaPreview.tsx
+++ b/components/MediaPreview.tsx
@@ -1,25 +1,20 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef } from "react";
-import { AudioLines, Pause, Play, SkipBack, SkipForward } from "lucide-react";
+import { useCallback, useEffect, useRef } from "react";
 import { useEditorStore } from "@/lib/store";
-import {
-  cutRangeAt,
-  formatTime,
-  getCutRanges,
-  getEditedDuration,
-  originalToEdited,
-} from "@/lib/edits";
+import { cutRangeAt, getCutRanges } from "@/lib/edits";
 
+/**
+ * Owns the <video>/<audio> element and the cut-skipping playback loop.
+ * In video mode this is the visual preview; in audio mode it mounts a hidden
+ * <audio> so playback still works when the preview panel is omitted.
+ */
 export default function MediaPreview() {
   const mediaUrl = useEditorStore((s) => s.mediaUrl);
-  const videoFile = useEditorStore((s) => s.videoFile);
   const mediaKind = useEditorStore((s) => s.mediaKind);
   const words = useEditorStore((s) => s.words);
   const manualCuts = useEditorStore((s) => s.manualCuts);
   const duration = useEditorStore((s) => s.duration);
-  const playing = useEditorStore((s) => s.playing);
-  const currentTime = useEditorStore((s) => s.currentTime);
   const setVideoEl = useEditorStore((s) => s.setVideoEl);
   const setDuration = useEditorStore((s) => s.setDuration);
   const setPlaying = useEditorStore((s) => s.setPlaying);
@@ -27,19 +22,10 @@ export default function MediaPreview() {
 
   const mediaRef = useRef<HTMLMediaElement | null>(null);
   const isAudio = mediaKind === "audio";
-  const cuts = useMemo(
-    () => getCutRanges(words, duration, manualCuts),
-    [words, duration, manualCuts]
-  );
-  const cutsRef = useRef(cuts);
+  const cutsRef = useRef(getCutRanges(words, duration, manualCuts));
   useEffect(() => {
-    cutsRef.current = cuts;
-  }, [cuts]);
-
-  const editedDuration = useMemo(
-    () => getEditedDuration(cuts, duration),
-    [cuts, duration]
-  );
+    cutsRef.current = getCutRanges(words, duration, manualCuts);
+  }, [words, duration, manualCuts]);
 
   const refCb = useCallback(
     (el: HTMLMediaElement | null) => {
@@ -83,7 +69,6 @@ export default function MediaPreview() {
     const media = mediaRef.current;
     if (!media) return;
     if (media.paused) {
-      // If we're parked inside a cut (or at the end), jump to kept content.
       const cut = cutRangeAt(media.currentTime, cutsRef.current);
       if (cut) media.currentTime = cut.end + 0.001;
       if (media.currentTime >= media.duration - 0.05) media.currentTime = 0;
@@ -93,84 +78,35 @@ export default function MediaPreview() {
     }
   }, []);
 
-  const skip = useCallback((delta: number) => {
-    const media = mediaRef.current;
-    if (!media) return;
-    media.currentTime = Math.min(Math.max(0, media.currentTime + delta), media.duration);
-  }, []);
+  if (!mediaUrl) return null;
+
+  if (isAudio) {
+    return (
+      <audio
+        ref={refCb}
+        src={mediaUrl}
+        preload="metadata"
+        onLoadedMetadata={(e) => setDuration(e.currentTarget.duration)}
+        onPlay={() => setPlaying(true)}
+        onPause={() => setPlaying(false)}
+        className="hidden"
+      />
+    );
+  }
 
   return (
     <div className="flex min-h-0 flex-1 flex-col bg-zinc-50/70 p-3 sm:p-4">
       <div className="flex min-h-0 flex-1 items-center justify-center">
-        {mediaUrl && isAudio && (
-          <>
-            <button
-              type="button"
-              onClick={togglePlay}
-              className="flex max-w-md cursor-pointer flex-col items-center gap-3 px-8 py-14 text-center transition"
-            >
-              <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-zinc-900 text-white">
-                <AudioLines size={24} />
-              </div>
-              <p className="max-w-full truncate text-sm font-medium text-zinc-800">
-                {videoFile?.name ?? "Audio"}
-              </p>
-              <p className="text-xs text-zinc-400">Audio · click to play</p>
-            </button>
-            <audio
-              ref={refCb}
-              src={mediaUrl}
-              preload="metadata"
-              onLoadedMetadata={(e) => setDuration(e.currentTarget.duration)}
-              onPlay={() => setPlaying(true)}
-              onPause={() => setPlaying(false)}
-              className="hidden"
-            />
-          </>
-        )}
-        {mediaUrl && !isAudio && (
-          <video
-            ref={refCb}
-            src={mediaUrl}
-            playsInline
-            onClick={togglePlay}
-            onLoadedMetadata={(e) => setDuration(e.currentTarget.duration)}
-            onPlay={() => setPlaying(true)}
-            onPause={() => setPlaying(false)}
-            className="max-h-full max-w-full cursor-pointer rounded-sm bg-black shadow-lg shadow-zinc-900/10"
-          />
-        )}
-      </div>
-
-      <div className="mt-3 flex shrink-0 items-center justify-center gap-2">
-        <span className="shrink-0 line-clamp-1 mr-1 w-24 text-right text-xs tabular-nums text-zinc-500 sm:mr-2 sm:w-28">
-          {formatTime(originalToEdited(currentTime, cuts))}
-          <span className="text-zinc-300"> / {formatTime(editedDuration)}</span>
-        </span>
-        <button
-          onClick={() => skip(-5)}
-          title="Back 5 s"
-          className="flex h-8 w-8 items-center justify-center rounded-full text-zinc-600 transition hover:bg-zinc-200"
-        >
-          <SkipBack size={15} />
-        </button>
-        <button
+        <video
+          ref={refCb}
+          src={mediaUrl}
+          playsInline
           onClick={togglePlay}
-          title="Play / pause (space)"
-          className="flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-full bg-zinc-900 text-white shadow transition hover:bg-zinc-700"
-        >
-          {playing ? <Pause size={16} /> : <Play size={16} className="ml-0.5" />}
-        </button>
-        <button
-          onClick={() => skip(5)}
-          title="Forward 5 s"
-          className="flex h-8 w-8 items-center justify-center rounded-full text-zinc-600 transition hover:bg-zinc-200"
-        >
-          <SkipForward size={15} />
-        </button>
-        <span className="ml-2 hidden w-28 shrink-0 line-clamp-1 text-xs tabular-nums text-zinc-400 sm:block">
-          {editedDuration < duration - 0.01 && <>original {formatTime(duration)}</>}
-        </span>
+          onLoadedMetadata={(e) => setDuration(e.currentTarget.duration)}
+          onPlay={() => setPlaying(true)}
+          onPause={() => setPlaying(false)}
+          className="max-h-full max-w-full cursor-pointer rounded-sm bg-black shadow-lg shadow-zinc-900/10"
+        />
       </div>
     </div>
   );
diff --git a/components/Timeline.tsx b/components/Timeline.tsx
index 5ab73a7d..0537e3c9 100644
--- a/components/Timeline.tsx
+++ b/components/Timeline.tsx
@@ -9,16 +9,29 @@ import {
   useState,
   type PointerEvent as ReactPointerEvent,
 } from "react";
-import { Maximize2, Merge, SquareSplitHorizontal, ZoomIn, ZoomOut } from "lucide-react";
+import {
+  Maximize2,
+  Merge,
+  Pause,
+  Play,
+  SkipBack,
+  SkipForward,
+  SquareSplitHorizontal,
+  ZoomIn,
+  ZoomOut,
+} from "lucide-react";
 import { useEditorStore } from "@/lib/store";
 import {
   canSplitAt,
+  cutRangeAt,
   formatTime,
   getActiveSceneBoundaries,
   getClipSegments,
   getCutRanges,
+  getEditedDuration,
   getKeepRanges,
   isWordCutOut,
+  originalToEdited,
   trimEdgeBounds,
 } from "@/lib/edits";
 import type { ClipSegment, Word } from "@/lib/types";
@@ -458,6 +471,32 @@ export default function Timeline() {
     if (!ok) return;
   }, []);
 
+  const editedDuration = useMemo(
+    () => getEditedDuration(cuts, duration),
+    [cuts, duration]
+  );
+
+  const togglePlay = useCallback(() => {
+    const media = useEditorStore.getState().videoEl;
+    if (!media) return;
+    if (media.paused) {
+      const cut = cutRangeAt(media.currentTime, cuts);
+      if (cut) media.currentTime = cut.end + 0.001;
+      if (media.currentTime >= media.duration - 0.05) media.currentTime = 0;
+      void media.play();
+    } else {
+      media.pause();
+    }
+  }, [cuts]);
+
+  const skip = useCallback((delta: number) => {
+    const { videoEl, setCurrentTime } = useEditorStore.getState();
+    if (!videoEl) return;
+    const t = Math.min(Math.max(0, videoEl.currentTime + delta), videoEl.duration);
+    videoEl.currentTime = t;
+    setCurrentTime(t);
+  }, []);
+
   // Word labels for the visible window
   const visibleWords = useMemo(() => {
     const t0 = scrollLeft / pps - 1;
@@ -470,15 +509,47 @@ export default function Timeline() {
 
   return (
     <footer className="flex h-40 shrink-0 flex-col border-t border-zinc-200 bg-white sm:h-52">
-      <div className="flex h-9 shrink-0 items-center gap-2 border-b border-zinc-100 px-3">
-        <span className="text-xs font-semibold uppercase tracking-wider text-zinc-400">
-          Timeline
-        </span>
-        <span className="text-xs tabular-nums text-zinc-400">
-          {formatTime(currentTime)}
-        </span>
-
-        <div className="mx-auto flex items-center">
+      <div className="relative flex h-10 shrink-0 items-center gap-2 border-b border-zinc-100 px-3">
+        <div className="flex min-w-0 flex-1 items-center gap-1.5">
+          <span className="hidden shrink-0 text-xs font-semibold uppercase tracking-wider text-zinc-400 sm:inline">
+            Timeline
+          </span>
+          <span className="shrink-0 text-xs tabular-nums text-zinc-500">
+            {formatTime(originalToEdited(currentTime, cuts))}
+            <span className="text-zinc-300"> / {formatTime(editedDuration)}</span>
+          </span>
+          <button
+            type="button"
+            onClick={() => skip(-5)}
+            title="Back 5 s"
+            className="flex h-7 w-7 items-center justify-center rounded-full text-zinc-600 transition hover:bg-zinc-100"
+          >
+            <SkipBack size={14} />
+          </button>
+          <button
+            type="button"
+            onClick={togglePlay}
+            title="Play / pause (space)"
+            className="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full bg-zinc-900 text-white shadow transition hover:bg-zinc-700"
+          >
+            {playing ? <Pause size={14} /> : <Play size={14} className="ml-0.5" />}
+          </button>
+          <button
+            type="button"
+            onClick={() => skip(5)}
+            title="Forward 5 s"
+            className="flex h-7 w-7 items-center justify-center rounded-full text-zinc-600 transition hover:bg-zinc-100"
+          >
+            <SkipForward size={14} />
+          </button>
+          {editedDuration < duration - 0.01 && (
+            <span className="hidden truncate text-xs tabular-nums text-zinc-400 lg:inline">
+              original {formatTime(duration)}
+            </span>
+          )}
+        </div>
+
+        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
           <button
             type="button"
             disabled={!ready || !splitOk}
@@ -511,7 +582,7 @@ export default function Timeline() {
           </button>
         </div>
 
-        <div className="flex items-center gap-0.5">
+        <div className="flex flex-1 items-center justify-end gap-0.5">
           <button
             type="button"
             onClick={() => setZoom((z) => Math.max(MIN_ZOOM, z / 1.5))}

From c77b198e7fa0ac39ca09abbee9d8a28b2759ff3a Mon Sep 17 00:00:00 2001
From: Wassim Gharbi <wassgha@gmail.com>
Date: Wed, 29 Jul 2026 20:02:49 -1000
Subject: [PATCH 2/6] reorganize controls

---
 components/Timeline.tsx | 117 +++++++++++++++++++++-------------------
 1 file changed, 62 insertions(+), 55 deletions(-)

diff --git a/components/Timeline.tsx b/components/Timeline.tsx
index 0537e3c9..e056dcdf 100644
--- a/components/Timeline.tsx
+++ b/components/Timeline.tsx
@@ -475,6 +475,7 @@ export default function Timeline() {
     () => getEditedDuration(cuts, duration),
     [cuts, duration]
   );
+  const trimmed = duration - editedDuration;
 
   const togglePlay = useCallback(() => {
     const media = useEditorStore.getState().videoEl;
@@ -509,47 +510,53 @@ export default function Timeline() {
 
   return (
     <footer className="flex h-40 shrink-0 flex-col border-t border-zinc-200 bg-white sm:h-52">
-      <div className="relative flex h-10 shrink-0 items-center gap-2 border-b border-zinc-100 px-3">
-        <div className="flex min-w-0 flex-1 items-center gap-1.5">
-          <span className="hidden shrink-0 text-xs font-semibold uppercase tracking-wider text-zinc-400 sm:inline">
-            Timeline
-          </span>
-          <span className="shrink-0 text-xs tabular-nums text-zinc-500">
+      <div className="relative flex h-10 shrink-0 items-center gap-2 border-b border-zinc-100 px-2.5">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          <span className="shrink-0 text-[11px] font-mono tabular-nums leading-none text-zinc-900">
             {formatTime(originalToEdited(currentTime, cuts))}
-            <span className="text-zinc-300"> / {formatTime(editedDuration)}</span>
+            <span className="text-zinc-400"> / {formatTime(editedDuration)}</span>
           </span>
+          {trimmed > 0.01 && (
+            <span
+              title={`${formatTime(trimmed)} removed — original length ${formatTime(duration)}`}
+              className="hidden shrink-0 font-mono rounded-full bg-red-50 px-1.5 py-0.5 text-[10px] font-medium tabular-nums leading-none text-red-500 sm:inline-block"
+            >
+              −{formatTime(trimmed)}
+            </span>
+          )}
+        </div>
+
+        <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center gap-0.5">
           <button
             type="button"
+            disabled={!ready}
             onClick={() => skip(-5)}
             title="Back 5 s"
-            className="flex h-7 w-7 items-center justify-center rounded-full text-zinc-600 transition hover:bg-zinc-100"
+            className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-900 disabled:cursor-not-allowed disabled:text-zinc-300 disabled:hover:bg-transparent"
           >
             <SkipBack size={14} />
           </button>
           <button
             type="button"
+            disabled={!ready}
             onClick={togglePlay}
             title="Play / pause (space)"
-            className="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full bg-zinc-900 text-white shadow transition hover:bg-zinc-700"
+            className="flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-zinc-900 text-white transition hover:bg-zinc-700 active:scale-95 disabled:cursor-not-allowed disabled:bg-zinc-200"
           >
-            {playing ? <Pause size={14} /> : <Play size={14} className="ml-0.5" />}
+            {playing ? <Pause size={13} /> : <Play size={13} className="ml-0.5" />}
           </button>
           <button
             type="button"
+            disabled={!ready}
             onClick={() => skip(5)}
             title="Forward 5 s"
-            className="flex h-7 w-7 items-center justify-center rounded-full text-zinc-600 transition hover:bg-zinc-100"
+            className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-900 disabled:cursor-not-allowed disabled:text-zinc-300 disabled:hover:bg-transparent"
           >
             <SkipForward size={14} />
           </button>
-          {editedDuration < duration - 0.01 && (
-            <span className="hidden truncate text-xs tabular-nums text-zinc-400 lg:inline">
-              original {formatTime(duration)}
-            </span>
-          )}
         </div>
 
-        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+        <div className="flex flex-1 items-center justify-end gap-1">
           <button
             type="button"
             disabled={!ready || !splitOk}
@@ -559,54 +566,54 @@ export default function Timeline() {
                 ? "Split clip at playhead (S)"
                 : "Move the playhead onto a kept region to split"
             }
-            className={`group cursor-pointer relative flex h-6 items-center gap-1 rounded-sm px-1 text-xs font-medium transition-all duration-200 ${
+            className={`flex h-7 items-center gap-1.5 rounded-lg px-2 text-xs font-medium transition ${
               ready && splitOk
-                ? "text-black hover:bg-neutral-100 active:scale-[0.97]"
-                : "cursor-not-allowed text-zinc-400"
+                ? "cursor-pointer text-zinc-700 hover:bg-zinc-100 hover:text-zinc-900 active:scale-[0.97]"
+                : "cursor-not-allowed text-zinc-300"
             }`}
           >
-            <SquareSplitHorizontal
-              size={13}
-              className={`transition-transform duration-300`}
-            />
-            Split
+            <SquareSplitHorizontal size={13} />
+            <span className="hidden sm:inline">Split</span>
             <kbd
-              className={`ml-0.5 rounded px-1 py-px text-[10px] font-normal ${
-                ready && splitOk
-                  ? "bg-zinc-200/80 text-zinc-800"
-                  : "bg-zinc-200/80 text-zinc-400"
+              className={`hidden rounded px-1 py-px text-[10px] font-normal sm:inline ${
+                ready && splitOk ? "bg-zinc-100 text-zinc-500" : "bg-zinc-100 text-zinc-300"
               }`}
             >
               S
             </kbd>
           </button>
-        </div>
 
-        <div className="flex flex-1 items-center justify-end gap-0.5">
-          <button
-            type="button"
-            onClick={() => setZoom((z) => Math.max(MIN_ZOOM, z / 1.5))}
-            title="Zoom out"
-            className="flex h-7 w-7 items-center justify-center rounded-lg text-zinc-500 transition hover:bg-zinc-100"
-          >
-            <ZoomOut size={14} />
-          </button>
-          <button
-            type="button"
-            onClick={() => setZoom(1)}
-            title="Fit"
-            className="flex h-7 w-7 items-center justify-center rounded-lg text-zinc-500 transition hover:bg-zinc-100"
-          >
-            <Maximize2 size={13} />
-          </button>
-          <button
-            type="button"
-            onClick={() => setZoom((z) => Math.min(MAX_ZOOM, z * 1.5))}
-            title="Zoom in — drag word edges to refine timing"
-            className="flex h-7 w-7 items-center justify-center rounded-lg text-zinc-500 transition hover:bg-zinc-100"
-          >
-            <ZoomIn size={14} />
-          </button>
+          <div className="mx-0.5 h-4 w-px bg-zinc-200" />
+
+          <div className="flex items-center gap-0.5">
+            <button
+              type="button"
+              onClick={() => setZoom((z) => Math.max(MIN_ZOOM, z / 1.5))}
+              disabled={zoom <= MIN_ZOOM}
+              title="Zoom out"
+              className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-900 disabled:cursor-not-allowed disabled:text-zinc-300 disabled:hover:bg-transparent"
+            >
+              <ZoomOut size={14} />
+            </button>
+            <button
+              type="button"
+              onClick={() => setZoom(1)}
+              disabled={zoom === 1}
+              title="Fit to window"
+              className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-900 disabled:cursor-not-allowed disabled:text-zinc-300 disabled:hover:bg-transparent"
+            >
+              <Maximize2 size={13} />
+            </button>
+            <button
+              type="button"
+              onClick={() => setZoom((z) => Math.min(MAX_ZOOM, z * 1.5))}
+              disabled={zoom >= MAX_ZOOM}
+              title="Zoom in — drag word edges to refine timing"
+              className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-900 disabled:cursor-not-allowed disabled:text-zinc-300 disabled:hover:bg-transparent"
+            >
+              <ZoomIn size={14} />
+            </button>
+          </div>
         </div>
       </div>
 

From 0408e6a65e13aca4112652a466a808b4600af2d9 Mon Sep 17 00:00:00 2001
From: Wassim Gharbi <wassgha@gmail.com>
Date: Wed, 29 Jul 2026 20:09:33 -1000
Subject: [PATCH 3/6] better icons

---
 components/Timeline.tsx | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/components/Timeline.tsx b/components/Timeline.tsx
index e056dcdf..43d67e68 100644
--- a/components/Timeline.tsx
+++ b/components/Timeline.tsx
@@ -10,12 +10,20 @@ import {
   type PointerEvent as ReactPointerEvent,
 } from "react";
 import {
+  ChevronFirst,
+  ChevronLast,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
   Maximize2,
   Merge,
   Pause,
   Play,
-  SkipBack,
-  SkipForward,
+  RotateCcwClock,
+  RotateCcwSquare,
+  RotateCwFadingClock,
+  RotateCwSquare,
   SquareSplitHorizontal,
   ZoomIn,
   ZoomOut,
@@ -526,7 +534,7 @@ export default function Timeline() {
           )}
         </div>
 
-        <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center gap-0.5">
+        <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center gap-1.5">
           <button
             type="button"
             disabled={!ready}
@@ -534,16 +542,20 @@ export default function Timeline() {
             title="Back 5 s"
             className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-900 disabled:cursor-not-allowed disabled:text-zinc-300 disabled:hover:bg-transparent"
           >
-            <SkipBack size={14} />
+            <ChevronLeft size={14} />
           </button>
           <button
             type="button"
             disabled={!ready}
             onClick={togglePlay}
             title="Play / pause (space)"
-            className="flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-zinc-900 text-white transition hover:bg-zinc-700 active:scale-95 disabled:cursor-not-allowed disabled:bg-zinc-200"
+            className="flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-lg text-zinc-900 transition hover:bg-zinc-100 active:scale-95 disabled:cursor-not-allowed disabled:text-zinc-300 disabled:hover:bg-transparent"
           >
-            {playing ? <Pause size={13} /> : <Play size={13} className="ml-0.5" />}
+            {playing ? (
+              <Pause size={15} />
+            ) : (
+              <Play size={15} className="ml-px" />
+            )}
           </button>
           <button
             type="button"
@@ -552,7 +564,7 @@ export default function Timeline() {
             title="Forward 5 s"
             className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-900 disabled:cursor-not-allowed disabled:text-zinc-300 disabled:hover:bg-transparent"
           >
-            <SkipForward size={14} />
+            <ChevronRight size={14} />
           </button>
         </div>
 

From f8af8cb16bb9e2815489f14d2753d78ad5cdafc1 Mon Sep 17 00:00:00 2001
From: Wassim Gharbi <wassgha@gmail.com>
Date: Wed, 29 Jul 2026 20:19:38 -1000
Subject: [PATCH 4/6] fix space hotkey

---
 components/Editor.tsx       | 10 ++++++----
 components/MediaPreview.tsx | 11 +----------
 components/Timeline.tsx     | 28 ++++++++++------------------
 lib/store.ts                | 17 +++++++++++++++++
 4 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/components/Editor.tsx b/components/Editor.tsx
index 9a7e276c..c6317e27 100644
--- a/components/Editor.tsx
+++ b/components/Editor.tsx
@@ -188,6 +188,8 @@ export default function Editor() {
   }, [status, isElectron]);
 
   // Global shortcuts: space = play/pause, ⌘Z / ⇧⌘Z = undo / redo, S = split.
+  // Capture phase so Space is ours before a focused <button> synthesizes a click
+  // (which would double-toggle playback and look like the hotkey "didn't work").
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       const target = e.target as HTMLElement;
@@ -196,8 +198,8 @@ export default function Editor() {
       const s = useEditorStore.getState();
       if (e.code === "Space" && s.videoEl && !s.exportOpen) {
         e.preventDefault();
-        if (s.videoEl.paused) void s.videoEl.play();
-        else s.videoEl.pause();
+        e.stopPropagation();
+        s.togglePlayback();
       } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "z") {
         e.preventDefault();
         if (e.shiftKey) s.redo();
@@ -214,8 +216,8 @@ export default function Editor() {
         s.splitAtPlayhead();
       }
     };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
+    document.addEventListener("keydown", handler, true);
+    return () => document.removeEventListener("keydown", handler, true);
   }, []);
 
   // Flush pending autosave when the tab hides or unloads.
diff --git a/components/MediaPreview.tsx b/components/MediaPreview.tsx
index 5d3d27b9..d2332ccd 100644
--- a/components/MediaPreview.tsx
+++ b/components/MediaPreview.tsx
@@ -66,16 +66,7 @@ export default function MediaPreview() {
   }, [setCurrentTime]);
 
   const togglePlay = useCallback(() => {
-    const media = mediaRef.current;
-    if (!media) return;
-    if (media.paused) {
-      const cut = cutRangeAt(media.currentTime, cutsRef.current);
-      if (cut) media.currentTime = cut.end + 0.001;
-      if (media.currentTime >= media.duration - 0.05) media.currentTime = 0;
-      void media.play();
-    } else {
-      media.pause();
-    }
+    useEditorStore.getState().togglePlayback();
   }, []);
 
   if (!mediaUrl) return null;
diff --git a/components/Timeline.tsx b/components/Timeline.tsx
index 43d67e68..d76740d3 100644
--- a/components/Timeline.tsx
+++ b/components/Timeline.tsx
@@ -31,7 +31,6 @@ import {
 import { useEditorStore } from "@/lib/store";
 import {
   canSplitAt,
-  cutRangeAt,
   formatTime,
   getActiveSceneBoundaries,
   getClipSegments,
@@ -486,17 +485,8 @@ export default function Timeline() {
   const trimmed = duration - editedDuration;
 
   const togglePlay = useCallback(() => {
-    const media = useEditorStore.getState().videoEl;
-    if (!media) return;
-    if (media.paused) {
-      const cut = cutRangeAt(media.currentTime, cuts);
-      if (cut) media.currentTime = cut.end + 0.001;
-      if (media.currentTime >= media.duration - 0.05) media.currentTime = 0;
-      void media.play();
-    } else {
-      media.pause();
-    }
-  }, [cuts]);
+    useEditorStore.getState().togglePlayback();
+  }, []);
 
   const skip = useCallback((delta: number) => {
     const { videoEl, setCurrentTime } = useEditorStore.getState();
@@ -517,9 +507,11 @@ export default function Timeline() {
   const showHandles = pps >= HANDLE_VIS_PPS;
 
   return (
-    <footer className="flex h-40 shrink-0 flex-col border-t border-zinc-200 bg-white sm:h-52">
-      <div className="relative flex h-10 shrink-0 items-center gap-2 border-b border-zinc-100 px-2.5">
-        <div className="flex min-w-0 flex-1 items-center gap-2">
+    <footer className="flex h-48 shrink-0 flex-col border-t border-zinc-200 bg-white sm:h-52">
+      {/* Mobile wraps the transport onto its own row; from `sm` up it is
+          absolutely centred so it stays put as the side groups change width. */}
+      <div className="relative flex shrink-0 flex-wrap items-center gap-x-2 border-b border-zinc-100 px-2.5 sm:h-10 sm:flex-nowrap">
+        <div className="order-1 flex h-9 min-w-0 flex-1 items-center gap-2 sm:h-auto">
           <span className="shrink-0 text-[11px] font-mono tabular-nums leading-none text-zinc-900">
             {formatTime(originalToEdited(currentTime, cuts))}
             <span className="text-zinc-400"> / {formatTime(editedDuration)}</span>
@@ -527,14 +519,14 @@ export default function Timeline() {
           {trimmed > 0.01 && (
             <span
               title={`${formatTime(trimmed)} removed — original length ${formatTime(duration)}`}
-              className="hidden shrink-0 font-mono rounded-full bg-red-50 px-1.5 py-0.5 text-[10px] font-medium tabular-nums leading-none text-red-500 sm:inline-block"
+              className="shrink-0 font-mono rounded-full bg-red-50 px-1.5 py-0.5 text-[10px] font-medium tabular-nums leading-none text-red-500"
             >
               −{formatTime(trimmed)}
             </span>
           )}
         </div>
 
-        <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center gap-1.5">
+        <div className="order-3 -mx-2.5 flex h-9 w-[calc(100%+1.25rem)] items-center justify-center gap-1.5 border-t border-zinc-100 sm:absolute sm:left-1/2 sm:top-1/2 sm:order-2 sm:mx-0 sm:h-auto sm:w-auto sm:-translate-x-1/2 sm:-translate-y-1/2 sm:border-t-0">
           <button
             type="button"
             disabled={!ready}
@@ -568,7 +560,7 @@ export default function Timeline() {
           </button>
         </div>
 
-        <div className="flex flex-1 items-center justify-end gap-1">
+        <div className="order-2 flex h-9 items-center justify-end gap-1 sm:order-3 sm:h-auto sm:flex-1">
           <button
             type="button"
             disabled={!ready || !splitOk}
diff --git a/lib/store.ts b/lib/store.ts
index a41e6b82..94c08ffd 100644
--- a/lib/store.ts
+++ b/lib/store.ts
@@ -13,6 +13,7 @@ import {
   applyWordBounds,
   canSplitAt,
   carrySceneBoundaries,
+  cutRangeAt,
   getClipSegments,
   getCutRanges,
   getKeepRanges,
@@ -152,6 +153,8 @@ interface EditorState {
   setCurrentTime: (t: number) => void;
   setPlaying: (p: boolean) => void;
   setVideoEl: (el: HTMLMediaElement | null) => void;
+  /** Play/pause, skipping out of cut ranges and restarting from the start if parked at the end. */
+  togglePlayback: () => void;
   setExportUrl: (url: string | null) => void;
   setExportOpen: (open: boolean) => void;
   reset: () => void;
@@ -634,6 +637,20 @@ export const useEditorStore = create<EditorState>((set, get) => ({
   setCurrentTime: (currentTime) => set({ currentTime }),
   setPlaying: (playing) => set({ playing }),
   setVideoEl: (videoEl) => set({ videoEl }),
+  togglePlayback: () => {
+    const s = get();
+    const media = s.videoEl;
+    if (!media) return;
+    if (media.paused) {
+      const cuts = getCutRanges(s.words, s.duration, s.manualCuts);
+      const cut = cutRangeAt(media.currentTime, cuts);
+      if (cut) media.currentTime = cut.end + 0.001;
+      if (media.currentTime >= media.duration - 0.05) media.currentTime = 0;
+      void media.play();
+    } else {
+      media.pause();
+    }
+  },
   setExportUrl: (exportUrl) => set({ exportUrl }),
   setExportOpen: (exportOpen) => set({ exportOpen }),
 

From 7b26ea75b13a223783e48479d28808744efee538 Mon Sep 17 00:00:00 2001
From: Wassim Gharbi <wassgha@gmail.com>
Date: Wed, 29 Jul 2026 20:24:21 -1000
Subject: [PATCH 5/6] truncate title

---
 components/Timeline.tsx |  2 +-
 components/TopBar.tsx   | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/components/Timeline.tsx b/components/Timeline.tsx
index d76740d3..f20ba6fa 100644
--- a/components/Timeline.tsx
+++ b/components/Timeline.tsx
@@ -519,7 +519,7 @@ export default function Timeline() {
           {trimmed > 0.01 && (
             <span
               title={`${formatTime(trimmed)} removed — original length ${formatTime(duration)}`}
-              className="shrink-0 font-mono rounded-full bg-red-50 px-1.5 py-0.5 text-[10px] font-medium tabular-nums leading-none text-red-500"
+              className="hidden sm:inline-block shrink-0 font-mono rounded-full bg-red-50 px-1.5 py-0.5 text-[10px] font-medium tabular-nums leading-none text-red-500"
             >
               −{formatTime(trimmed)}
             </span>
diff --git a/components/TopBar.tsx b/components/TopBar.tsx
index 00f61fbb..9df7a499 100644
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@@ -5,6 +5,15 @@ import Image from "next/image";
 import logo from "@/assets/logo.png";
 import { useWindowChrome } from "@/hooks/useWindowChrome";
 
+function truncateMiddle(value: string, maxLength = 40): string {
+  if (value.length <= maxLength) return value;
+  const ellipsis = "...";
+  const charsToShow = maxLength - ellipsis.length;
+  const frontChars = Math.ceil(charsToShow / 2);
+  const backChars = Math.floor(charsToShow / 2);
+  return `${value.slice(0, frontChars)}${ellipsis}${value.slice(value.length - backChars)}`;
+}
+
 export default function TopBar({children}: {children?: React.ReactNode}) {
   const { draggable, trafficLights } = useWindowChrome();
   const videoFile = useEditorStore((s) => s.videoFile);
@@ -35,8 +44,11 @@ export default function TopBar({children}: {children?: React.ReactNode}) {
       </span>
 
       {videoFile && (
-        <div className="pointer-events-none absolute left-1/2 hidden -translate-x-1/2 items-center text-[13px] text-zinc-500 sm:flex line-clamp-1 truncate">
-          {videoFile.name}
+        <div
+          className="pointer-events-none absolute left-1/2 hidden -translate-x-1/2 items-center text-[13px] text-zinc-500 sm:flex"
+          title={videoFile.name}
+        >
+          {truncateMiddle(videoFile.name)}
         </div>
       )}
 

From 87a062cdbba76f82a6f207eb8a98f64e36d3609a Mon Sep 17 00:00:00 2001
From: Wassim Gharbi <wassgha@gmail.com>
Date: Wed, 29 Jul 2026 20:31:12 -1000
Subject: [PATCH 6/6] color improvements

---
 components/Timeline.tsx        | 2 +-
 components/TranscriptPanel.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/Timeline.tsx b/components/Timeline.tsx
index f20ba6fa..d31ad874 100644
--- a/components/Timeline.tsx
+++ b/components/Timeline.tsx
@@ -519,7 +519,7 @@ export default function Timeline() {
           {trimmed > 0.01 && (
             <span
               title={`${formatTime(trimmed)} removed — original length ${formatTime(duration)}`}
-              className="hidden sm:inline-block shrink-0 font-mono rounded-full bg-red-50 px-1.5 py-0.5 text-[10px] font-medium tabular-nums leading-none text-red-500"
+              className="hidden sm:inline-block shrink-0 font-mono rounded-sm bg-red-50 px-1.5 py-0.5 text-[10px] font-medium tabular-nums leading-none text-red-600"
             >
               −{formatTime(trimmed)}
             </span>
diff --git a/components/TranscriptPanel.tsx b/components/TranscriptPanel.tsx
index e3ccbc2a..5335f103 100644
--- a/components/TranscriptPanel.tsx
+++ b/components/TranscriptPanel.tsx
@@ -79,7 +79,7 @@ const WordSpan = memo(function WordSpan({
       data-cut={cutOut ? "" : undefined}
       onClick={(e) => onClick(word, e.currentTarget)}
       className={`py-0.5 cursor-pointer transition-colors duration-75 ${cutOut
-        ? "word-deleted bg-red-50 text-red-400 line-through decoration-red-300"
+        ? "word-deleted bg-red-50 text-red-600 line-through decoration-red-300"
         : active
           ? "bg-neutral-200/80 text-zinc-900"
           : "text-zinc-800 hover:bg-neutral-50"
@@ -513,7 +513,7 @@ export default function TranscriptPanel() {
         </span>
         <div className="ml-auto flex items-center gap-2">
           {deletedCount > 0 && (
-            <span className="rounded-md bg-red-50 px-2 py-0.5 text-[9px] font-medium text-red-400 line-clamp-1 line-through">
+            <span className="rounded-md bg-red-50 px-2 py-0.5 text-[9px] font-medium text-red-600 line-clamp-1 line-through">
               {deletedCount} word{deletedCount === 1 ? "" : "s"}
             </span>
           )}