refactor(editor): remove the transport seek bar

The ruler right below already seeks by click and drag, and the arrow keys
step a frame. Dropping the bar frees the timeline header.

Author: EtienneLescot

src/components/ai-edition/NewEditorShell.module.css

@@ -764,8 +764,6 @@
 	display: flex;
 	align-items: center;
 	gap: 6px;
-	flex: 1;
-	min-width: 0;
 }
 .transport .tbtn {
 	width: 32px;
@@ -2260,57 +2258,6 @@ textarea.control {
 .editClipGrip[data-edge="end"]::before { right: 9px; }
 .editClipGrip:hover::before { transform: scaleY(1.25); }
 
-.scrubBar {
-	flex: 1;
-	min-width: 0;
-	position: relative;
-	height: 24px;
-	display: flex;
-	align-items: center;
-	cursor: pointer;
-}
-.scrubTrack {
-	position: absolute;
-	left: 0;
-	right: 0;
-	height: 6px;
-	background: var(--border-hi);
-	border-radius: 9999px;
-	overflow: hidden;
-}
-/* The playhead's violet, not mint: this bar IS the playhead, seen from afar. */
-.scrubProgress {
-	height: 100%;
-	background: var(--playhead);
-	border-radius: 9999px;
-}
-.scrubInput {
-	position: absolute;
-	inset: 0;
-	width: 100%;
-	height: 100%;
-	opacity: 0;
-	cursor: pointer;
-	z-index: 10;
-	margin: 0;
-}
-.scrubThumb {
-	position: absolute;
-	width: 12px;
-	height: 12px;
-	background: #ffffff;
-	border-radius: 50%;
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-	pointer-events: none;
-	transform: translate(-50%, -50%);
-	top: 50%;
-	opacity: 1;
-	transition: transform 100ms ease;
-}
-.scrubBar:hover .scrubThumb {
-	transform: translate(-50%, -50%) scale(1.2);
-}
-
 /* ─── AI provider settings (axcut parity) ────────────────────────── */
 
 .providerGrid {

src/components/ai-edition/TransportBar.test.tsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import "@testing-library/jest-dom";
-import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { act, cleanup, render, screen } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { I18nProvider } from "@/contexts/I18nContext";
 import { useProjectStore } from "@/lib/ai-edition/store/projectStore";
@@ -45,13 +45,7 @@ describe("TransportBar reads the playhead from the store", () => {
 		function Parent() {
 			parentRenders++;
 			return (
-				<TransportBar
-					playing={false}
-					overrideTimeSec={null}
-					clips={clips}
-					onTogglePlay={noop}
-					onSeek={noop}
-				/>
+				<TransportBar playing={false} overrideTimeSec={null} clips={clips} onTogglePlay={noop} />
 			);
 		}
 
@@ -77,171 +71,9 @@ describe("TransportBar reads the playhead from the store", () => {
 		useProjectStore.setState({ currentTimeSec: 12.3 });
 		render(
 			<I18nProvider>
-				<TransportBar
-					playing={false}
-					overrideTimeSec={4.5}
-					clips={clips}
-					onTogglePlay={noop}
-					onSeek={noop}
-				/>
+				<TransportBar playing={false} overrideTimeSec={4.5} clips={clips} onTogglePlay={noop} />
 			</I18nProvider>,
 		);
 		expect(screen.getByText("0:04.5")).toBeInTheDocument();
 	});
 });
-
-describe("le drag de la barre de progression est coalescé en rAF", () => {
-	beforeEach(() => {
-		useProjectStore.setState({ currentTimeSec: 0 });
-	});
-
-	afterEach(() => {
-		cleanup();
-		vi.clearAllMocks();
-		vi.unstubAllGlobals();
-	});
-
-	/** rAF piloté à la main : les callbacks ne partent que sur `flush()`, ce qui permet de
-	 *  compter ce qui se passe DANS une frame — impossible avec le vrai rAF en test. */
-	function stubRaf() {
-		const pending: FrameRequestCallback[] = [];
-		vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
-			pending.push(cb);
-			return pending.length;
-		});
-		vi.stubGlobal("cancelAnimationFrame", () => {
-			// rien à annuler : `flush()` ne rejoue que ce qui reste en attente
-		});
-		return () => {
-			const due = pending.splice(0, pending.length);
-			for (const cb of due) cb(0);
-		};
-	}
-
-	// C'est LE défaut que ce chemin avait : `onChange` d'un `<input type="range">` se
-	// déclenche à la cadence du pointeur (jusqu'à 1000 Hz) et appelait `onSeek` à chaque
-	// fois. Or `onSeek` repose un `seekTarget` dans l'état de la racine de l'éditeur, donc
-	// re-rend tout et fait poser `<video>.currentTime`. La timeline fait les mêmes appels
-	// mais une fois par frame ; ce test verrouille cette parité.
-	it("n'émet qu'un seul seek par frame, quel que soit le nombre d'événements", () => {
-		const flush = stubRaf();
-		const onSeek = vi.fn();
-		render(
-			<I18nProvider>
-				<TransportBar
-					playing={false}
-					overrideTimeSec={null}
-					clips={clips}
-					onTogglePlay={noop}
-					onSeek={onSeek}
-				/>
-			</I18nProvider>,
-		);
-		const input = screen.getByLabelText(/seek/i) as HTMLInputElement;
-
-		act(() => {
-			fireEvent.pointerDown(input);
-		});
-		// Dix mouvements dans la même frame : un seul seek doit en sortir, et c'est le
-		// DERNIER qui compte — sans quoi la tête accuserait un retard permanent.
-		act(() => {
-			for (const value of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) {
-				fireEvent.change(input, { target: { value: String(value) } });
-			}
-		});
-		expect(onSeek).not.toHaveBeenCalled();
-
-		act(() => flush());
-		expect(onSeek).toHaveBeenCalledTimes(1);
-		expect(onSeek).toHaveBeenLastCalledWith(10);
-	});
-
-	// Le mouvement compris entre le dernier rAF et le relâchement serait perdu sans commit
-	// final : la tête s'arrêterait un cran avant le doigt.
-	it("pose la dernière position au relâchement", () => {
-		stubRaf();
-		const onSeek = vi.fn();
-		render(
-			<I18nProvider>
-				<TransportBar
-					playing={false}
-					overrideTimeSec={null}
-					clips={clips}
-					onTogglePlay={noop}
-					onSeek={onSeek}
-				/>
-			</I18nProvider>,
-		);
-		const input = screen.getByLabelText(/seek/i) as HTMLInputElement;
-
-		act(() => {
-			fireEvent.pointerDown(input);
-			fireEvent.change(input, { target: { value: "7" } });
-			fireEvent.pointerUp(input);
-		});
-		expect(onSeek).toHaveBeenCalledWith(7);
-	});
-
-	// Hors drag il n'y a rien à coalescer : une flèche du clavier est un saut unique et
-	// doit prendre effet immédiatement, sans attendre une frame.
-	it("applique immédiatement un changement hors drag", () => {
-		stubRaf();
-		const onSeek = vi.fn();
-		render(
-			<I18nProvider>
-				<TransportBar
-					playing={false}
-					overrideTimeSec={null}
-					clips={clips}
-					onTogglePlay={noop}
-					onSeek={onSeek}
-				/>
-			</I18nProvider>,
-		);
-		const input = screen.getByLabelText(/seek/i) as HTMLInputElement;
-
-		act(() => {
-			fireEvent.change(input, { target: { value: "3" } });
-		});
-		expect(onSeek).toHaveBeenCalledTimes(1);
-		expect(onSeek).toHaveBeenCalledWith(3);
-	});
-
-	// Le remplissage et le curseur étaient positionnés uniquement par React depuis le store,
-	// donc en retard d'un commit à chaque mouvement — alors que la tête de lecture de la
-	// timeline, elle, est écrite directement dans le DOM et colle au pointeur. Ce test
-	// verrouille la parité : le visuel bouge AVANT le rAF, donc sans attendre React.
-	it("déplace le curseur dans le DOM avant tout rendu React", () => {
-		stubRaf();
-		const onSeek = vi.fn();
-		const { container } = render(
-			<I18nProvider>
-				<TransportBar
-					playing={false}
-					overrideTimeSec={null}
-					clips={clips}
-					onTogglePlay={noop}
-					onSeek={onSeek}
-				/>
-			</I18nProvider>,
-		);
-		const input = screen.getByLabelText(/seek/i) as HTMLInputElement;
-		// Les deux éléments décorés : le remplissage (largeur) et le curseur (position).
-		const styled = Array.from(container.querySelectorAll("div")).filter(
-			(el) => el.style.width !== "" || el.style.left !== "",
-		);
-		expect(styled.length).toBeGreaterThanOrEqual(2);
-
-		act(() => {
-			fireEvent.pointerDown(input);
-			// La moitié de la durée (clip de 30 s) → 50 %.
-			fireEvent.change(input, { target: { value: "15" } });
-		});
-
-		// Aucun rAF n'a été vidé, donc aucune écriture au store et aucun rendu React : ce qui
-		// a bougé ne peut venir que de l'écriture DOM directe.
-		expect(onSeek).not.toHaveBeenCalled();
-		const moved = styled.filter((el) => el.style.width === "50%" || el.style.left === "50%");
-		expect(moved.length).toBeGreaterThanOrEqual(2);
-	});
-});