fix: captions view ui + use BatchCommand to add text elements in transcription at once

apps/web/src/components/editor/panels/assets/views/captions.tsx

@@ -11,6 +11,11 @@ import { useState, useRef } from "react";
 import { extractTimelineAudio } from "@/lib/media/mediabunny";
 import { useEditor } from "@/hooks/use-editor";
 import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants";
+import {
+	BatchCommand,
+	AddTrackCommand,
+	InsertElementCommand,
+} from "@/lib/commands";
 import { TRANSCRIPTION_LANGUAGES } from "@/constants/transcription-constants";
 import type {
 	TranscriptionLanguage,
@@ -20,7 +25,12 @@ import { transcriptionService } from "@/services/transcription/service";
 import { decodeAudioToFloat32 } from "@/lib/media/audio";
 import { buildCaptionChunks } from "@/lib/transcription/caption";
 import { Spinner } from "@/components/ui/spinner";
-import { Label } from "@/components/ui/label";
+import {
+	Section,
+	SectionContent,
+	SectionField,
+	SectionFields,
+} from "@/components/editor/panels/properties/section";
 
 export function Captions() {
 	const [selectedLanguage, setSelectedLanguage] =
@@ -63,15 +73,10 @@ export function Captions() {
 		setProcessingStep("Generating captions...");
 		const captionChunks = buildCaptionChunks({ segments: result.segments });
 
-			const captionTrackId = editor.timeline.addTrack({
+		const addTrackCommand = new AddTrackCommand("text", 0);
-				type: "text",
+		const insertCommands = captionChunks.map((caption, i) =>
-				index: 0,
+			new InsertElementCommand({
-			});
+				placement: { mode: "explicit", trackId: addTrackCommand.getTrackId() },
-
-			for (let i = 0; i < captionChunks.length; i++) {
-				const caption = captionChunks[i];
-				editor.timeline.insertElement({
-					placement: { mode: "explicit", trackId: captionTrackId },
 				element: {
 					...DEFAULT_TEXT_ELEMENT,
 					name: `Caption ${i + 1}`,
@@ -81,8 +86,12 @@ export function Captions() {
 					fontSize: 65,
 					fontWeight: "bold",
 				},
+			})
+		);
+
+		editor.command.execute({
+			command: new BatchCommand([addTrackCommand, ...insertCommands]),
 		});
-			}
 		} catch (error) {
 			console.error("Transcription failed:", error);
 			setError(
@@ -108,9 +117,11 @@ export function Captions() {
 	};
 
 	return (
-		<PanelView title="Captions" ref={containerRef}>
+		<PanelView title="Captions" contentClassName="px-0 flex flex-col h-full" ref={containerRef}>
-			<div className="flex flex-col gap-3">
+			<Section showTopBorder={false} className="flex-1">
-				<Label>Language</Label>
+				<SectionContent className="flex flex-col gap-4 h-full">
+					<SectionFields>
+						<SectionField label="Language">
 							<Select
 								value={selectedLanguage}
 								onValueChange={(value) => handleLanguageChange({ value })}
@@ -127,15 +138,18 @@ export function Captions() {
 									))}
 								</SelectContent>
 							</Select>
-			</div>
+						</SectionField>
+					</SectionFields>
 
-			<div className="flex flex-col gap-4">
 					{error && (
 						<div className="bg-destructive/10 border-destructive/20 rounded-md border p-3">
 							<p className="text-destructive text-sm">{error}</p>
 						</div>
 					)}
-
+				</SectionContent>
+			</Section>
+			<Section showBottomBorder={false} showTopBorder={false}>
+				<SectionContent>
 				<Button
 						className="w-full"
 						onClick={handleGenerateTranscript}
@@ -144,7 +158,8 @@ export function Captions() {
 						{isProcessing && <Spinner className="mr-1" />}
 						{isProcessing ? processingStep : "Generate transcript"}
 					</Button>
-			</div>
+					</SectionContent>
+					</Section>
 		</PanelView>
 	);
 }