iter 2

src/features/project/TranscriptionEditor/TranscriptionEditor.tsx

@@ -4,8 +4,7 @@ import type { ITranscriptionEditorProps } from "./TranscriptionEditor.d"
 import type { JSX } from "react"
 
 import { useQueryClient } from "@tanstack/react-query"
-import cs from "classnames"
-import { LoaderCircle, Plus, Save, Scissors, Trash2 } from "lucide-react"
+import { LoaderCircle, Plus, Scissors, Trash2 } from "lucide-react"
 import { FunctionComponent, useCallback, useEffect, useRef, useState } from "react"
 
 import api from "@shared/api"
@@ -146,6 +145,15 @@ export const TranscriptionEditor: FunctionComponent<
 		}
 	}, [transcription, segments, artifactId, queryClient])
 
+	// Auto-save when dirty (debounced)
+	useEffect(() => {
+		if (!dirty) return
+		const timer = setTimeout(() => {
+			handleSave()
+		}, 1500)
+		return () => clearTimeout(timer)
+	}, [dirty, handleSave])
+
 	/* Loading */
 	if (isLoading) {
 		return (
@@ -171,18 +179,6 @@ export const TranscriptionEditor: FunctionComponent<
 			{/* Header */}
 			<div className={styles.header}>
 				<h3 className={styles.title}>Редактор транскрипции</h3>
-				<button
-					className={cs(styles.saveButton, { [styles.disabled]: !dirty })}
-					onClick={handleSave}
-					disabled={!dirty || saving}
-				>
-					{saving ? (
-						<LoaderCircle size={16} className={styles.spinner} />
-					) : (
-						<Save size={16} />
-					)}
-					<span>Сохранить</span>
-				</button>
 			</div>
 
 			{/* Segments list */}
@@ -190,49 +186,53 @@ export const TranscriptionEditor: FunctionComponent<
 				{segments.map((seg, idx) => (
 					<div key={idx} className={styles.segment} data-segment-index={idx}>
 						<div className={styles.segmentTimes}>
-							<label className={styles.timeLabel}>
-								<span className={styles.timeLabelText}>Начало</span>
-								<input
-									className={styles.timeInput}
-									type="text"
-									value={seg.startTime}
-									onChange={(e) =>
-										updateSegment(idx, "startTime", e.target.value)
+							<div className={styles.timesGroup}>
+								<label className={styles.timeLabel}>
+									<span className={styles.timeLabelText}>Начало</span>
+									<input
+										className={styles.timeInput}
+										type="text"
+										value={seg.startTime}
+										onChange={(e) =>
+											updateSegment(idx, "startTime", e.target.value)
+										}
+										placeholder="00:00.000"
+									/>
+								</label>
+								<label className={styles.timeLabel}>
+									<span className={styles.timeLabelText}>Конец</span>
+									<input
+										className={styles.timeInput}
+										type="text"
+										value={seg.endTime}
+										onChange={(e) =>
+											updateSegment(idx, "endTime", e.target.value)
+										}
+										placeholder="00:00.000"
+									/>
+								</label>
+							</div>
+							<div className={styles.actionsGroup}>
+								<button
+									className={styles.splitButton}
+									onClick={() => setSplittingIdx(idx)}
+									title={
+										!seg.words || seg.words.length < 2
+											? "Нет данных о словах для разделения"
+											: "Разделить сегмент"
 									}
-									placeholder="00:00.000"
-								/>
-							</label>
-							<label className={styles.timeLabel}>
-								<span className={styles.timeLabelText}>Конец</span>
-								<input
-									className={styles.timeInput}
-									type="text"
-									value={seg.endTime}
-									onChange={(e) =>
-										updateSegment(idx, "endTime", e.target.value)
-									}
-									placeholder="00:00.000"
-								/>
-							</label>
-							<button
-								className={styles.splitButton}
-								onClick={() => setSplittingIdx(idx)}
-								title={
-									!seg.words || seg.words.length < 2
-										? "Нет данных о словах для разделения"
-										: "Разделить сегмент"
-								}
-								disabled={!seg.words || seg.words.length < 2}
-							>
-								<Scissors size={14} />
-							</button>
-							<button
-								className={styles.removeButton}
-								onClick={() => removeSegment(idx)}
-								title="Удалить сегмент"
-							>
-								<Trash2 size={14} />
-							</button>
+									disabled={!seg.words || seg.words.length < 2}
+								>
+									<Scissors size={14} />
+								</button>
+								<button
+									className={styles.removeButton}
+									onClick={() => removeSegment(idx)}
+									title="Удалить сегмент"
+								>
+									<Trash2 size={14} />
+								</button>
+							</div>
 						</div>
 						{splittingIdx === idx ? (
 							<SegmentSplitter