fix(captions): open caption settings in place of the transcript pane

Caption settings replace the transcript pane inside the same inspector card
instead of floating in a popover beside it, so they share its position and
sizing. The header's "Show captions" shortcut is removed.

Author: EtienneLescot

src/components/ai-edition/CaptionsPane.tsx

@@ -198,7 +198,6 @@ export function CaptionsPane({ onClose }: { onClose?: () => void } = {}) {
 				className={styles.paneHead}
 				style={{
 					position: "relative",
-					paddingRight: "var(--sp-4)",
 					flexShrink: 0,
 				}}
 			>

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

@@ -1335,20 +1335,6 @@ textarea.control {
 	box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand), transparent 70%);
 }
 
-.captionsPopover {
-	width: 310px;
-	display: flex;
-	flex-direction: column;
-	border: 1px solid var(--border);
-	border-radius: 14px;
-	background: var(--surface-1);
-	box-shadow: var(--elev-pop);
-	backdrop-filter: blur(18px);
-	-webkit-backdrop-filter: blur(18px);
-	max-height: min(var(--radix-popover-content-available-height, 80vh), 560px);
-	overflow: hidden;
-}
-
 /* ─── toggle (switch) ──────────────────────────────────────────── */
 .toggle {
 	width: 40px;

src/components/ai-edition/RightPanes.tsx

@@ -96,7 +96,6 @@ import { removedRawSpans } from "@/lib/ai-edition/timeline/programme-time";
 import {
 	type AssetTranscriptionView,
 	type TranscriptGateReason,
-	transcriptHasSpeech,
 } from "@/lib/ai-edition/transcription/status";
 import { getAssetPath } from "@/lib/assetPath";
 import { resolveWebcamLayoutPreset, supportsWebcamReactiveZoom } from "@/lib/compositeLayout";
@@ -767,51 +766,17 @@ function TranscriptLaneSwitch({
 }
 
 /**
- * Caption settings, reached from the transcript tab (issue #560).
- *
- * The pane is reused VERBATIM rather than rebuilt into a popover body: it is ~600
- * lines of settings that already work, and "make it a popover" is a question about
- * where it is mounted, not about what it contains. Rebuilding it would have been the
- * one reliable way to arrive at a popover that is not at parity with the tab it
- * replaces.
- *
- * Safe inside a Popover specifically because nothing in it takes focus away — no file
- * input, no OS dialog. That is the trap `useWallpaperFileInput` documents above, and
- * it is worth re-checking if a picker is ever added to captions.
+ * Caption settings, reached from the transcript tab (issue #560). Opening them swaps
+ * the transcript pane for `CaptionsPane` in the same inspector card, so the settings
+ * take the transcript's place and size instead of floating beside it.
  */
-function CaptionSettingsButton({ onShowCaptions }: { onShowCaptions?: () => void }) {
+function CaptionSettingsButton({ onOpen }: { onOpen: () => void }) {
 	const ts = useScopedT("settings");
-	const [open, setOpen] = useState(false);
 	return (
-		<>
-			{/* Captions are off by default: once there is speech to caption, offer them where
-			    the transcript is, rather than leaving them behind the settings popover. */}
-			{onShowCaptions ? (
-				<button type="button" className={styles.paneHeadBtn} onClick={onShowCaptions}>
-					{ts("captions.turnOn")}
-				</button>
-			) : null}
-			<Popover open={open} onOpenChange={setOpen}>
-				<PopoverTrigger asChild>
-					<button type="button" className={styles.paneHeadBtn} aria-expanded={open}>
-						<CaptionsIcon size={14} />
-						{ts("facets.captions")}
-					</button>
-				</PopoverTrigger>
-				<PopoverContent
-					align="end"
-					side="bottom"
-					sideOffset={8}
-					collisionPadding={16}
-					animated={false}
-					className="w-auto border-0 bg-transparent p-0 shadow-none z-50"
-				>
-					<div className={styles.captionsPopover}>
-						<CaptionsPane onClose={() => setOpen(false)} />
-					</div>
-				</PopoverContent>
-			</Popover>
-		</>
+		<button type="button" className={styles.paneHeadBtn} onClick={onOpen}>
+			<CaptionsIcon size={14} />
+			{ts("facets.captions")}
+		</button>
 	);
 }
 
@@ -936,6 +901,7 @@ export function TranscriptPane({
 	// engine, nothing attempted) leaves the button worth pressing.
 	const silentMedia = blocked?.reason === "no-audio";
 	const transcriptionLabel = useTranscriptionLabel();
+	const [captionsOpen, setCaptionsOpen] = useState(false);
 	const paneBusyLabel = transcriptionBusyLabel(
 		busyView ??
 			(isTranscribing ? { assetId: "", status: "running", phase: "loading-model" } : undefined),
@@ -949,13 +915,15 @@ export function TranscriptPane({
 		insertionsEnabled() ? "transcript.editingHintDev" : "transcript.editingHint",
 	);
 
+	if (captionsOpen) return <CaptionsPane onClose={() => setCaptionsOpen(false)} />;
+
 	if (placements.length === 0 || !hasAnyTranscript) {
 		return (
 			<Pane
 				title={ts("transcript.title")}
 				icon={<FileText size={16} />}
 				helpText={helpText}
-				actions={<CaptionSettingsButton />}
+				actions={<CaptionSettingsButton onOpen={() => setCaptionsOpen(true)} />}
 			>
 				{laneSwitch}
 				<div
@@ -1001,22 +969,12 @@ export function TranscriptPane({
 		);
 	}
 
-	// Speech, not just segments: a silence-only transcript has nothing to caption.
-	const hasSpeech = sections.some((section) => transcriptHasSpeech(section.transcript ?? null));
 	return (
 		<Pane
 			title={ts("transcript.title")}
 			icon={<FileText size={16} />}
 			helpText={helpText}
-			actions={
-				<CaptionSettingsButton
-					onShowCaptions={
-						hasSpeech && !captionSettings.enabled
-							? () => void setCaptionSettings({ enabled: true })
-							: undefined
-					}
-				/>
-			}
+			actions={<CaptionSettingsButton onOpen={() => setCaptionsOpen(true)} />}
 		>
 			{laneSwitch}
 			{/* The gestures are invisible until tried: nothing on a plain word stream says

src/components/ai-edition/TranscriptPane.captions.test.tsx

@@ -10,7 +10,7 @@
 // settings at all — and it really does open the pane, not a rebuilt stub of it.
 
 import "@testing-library/jest-dom";
-import { cleanup, render, screen, within } from "@testing-library/react";
+import { cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { I18nProvider } from "@/contexts/I18nContext";
@@ -96,26 +96,23 @@ describe("caption settings on the transcript tab", () => {
 		expect(screen.getByRole("button", { name: "Captions" })).toBeInTheDocument();
 	});
 
-	it("opens the real caption settings rather than a stub", async () => {
+	it("opens the real caption settings in place of the transcript", async () => {
 		const user = userEvent.setup();
 		mount([TRANSCRIPT]);
 		await user.click(screen.getByRole("button", { name: "Captions" }));
 		// A control that only the actual CaptionsPane renders — proof the pane was
-		// mounted whole rather than reimplemented into the popover.
-		const settings = await screen.findByRole("dialog");
-		expect(within(settings).getByText("Show captions")).toBeInTheDocument();
+		// mounted whole rather than reimplemented.
+		expect(screen.getByText("Show captions")).toBeInTheDocument();
+		// It takes the transcript's slot in the inspector, not a spot beside it.
+		expect(screen.queryByRole("heading", { name: "Transcript" })).not.toBeInTheDocument();
 	});
 
-	it("renders a close button and closes the popover when clicked", async () => {
+	it("goes back to the transcript when closed", async () => {
 		const user = userEvent.setup();
 		mount([TRANSCRIPT]);
 		await user.click(screen.getByRole("button", { name: "Captions" }));
-		const settings = await screen.findByRole("dialog");
-		expect(within(settings).getByText("Show captions")).toBeInTheDocument();
-
-		const closeBtn = within(settings).getByRole("button", { name: "Close" });
-		expect(closeBtn).toBeInTheDocument();
-		await user.click(closeBtn);
-		expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+		await user.click(screen.getByRole("button", { name: "Close" }));
+		expect(screen.queryByText("Show captions")).not.toBeInTheDocument();
+		expect(screen.getByRole("heading", { name: "Transcript" })).toBeInTheDocument();
 	});
 });

src/i18n/locales/ar/settings.json

@@ -253,8 +253,7 @@
 			"minimal": "بسيط",
 			"light": "فاتح"
 		},
-		"customize": "تخصيص",
-		"turnOn": "إظهار الترجمة"
+		"customize": "تخصيص"
 	},
 	"panes": {
 		"help": "مساعدة"

src/i18n/locales/cs/settings.json

@@ -253,8 +253,7 @@
 			"minimal": "Minimální",
 			"light": "Světlý"
 		},
-		"customize": "Upravit",
-		"turnOn": "Zobrazit titulky"
+		"customize": "Upravit"
 	},
 	"panes": {
 		"help": "Nápověda"

src/i18n/locales/de/settings.json

@@ -253,8 +253,7 @@
 			"minimal": "Minimal",
 			"light": "Hell"
 		},
-		"customize": "Anpassen",
-		"turnOn": "Untertitel anzeigen"
+		"customize": "Anpassen"
 	},
 	"panes": {
 		"help": "Hilfe"

src/i18n/locales/en/settings.json

@@ -253,8 +253,7 @@
 			"minimal": "Minimal",
 			"light": "Light"
 		},
-		"customize": "Customize",
-		"turnOn": "Show captions"
+		"customize": "Customize"
 	},
 	"panes": {
 		"help": "Help"

src/i18n/locales/es/settings.json

@@ -253,8 +253,7 @@
 			"minimal": "Minimalista",
 			"light": "Claro"
 		},
-		"customize": "Personalizar",
-		"turnOn": "Mostrar subtítulos"
+		"customize": "Personalizar"
 	},
 	"panes": {
 		"help": "Ayuda"

src/i18n/locales/fr/settings.json

@@ -253,8 +253,7 @@
 			"minimal": "Minimal",
 			"light": "Clair"
 		},
-		"customize": "Personnaliser",
-		"turnOn": "Afficher les sous-titres"
+		"customize": "Personnaliser"
 	},
 	"panes": {
 		"help": "Aide"