feat: enhance ChapterPlayer UI and add smooth scrolling for active segments in ChaptersPanel

qwen3-tts-frontend/src/pages/Audiobook.tsx

@@ -1447,6 +1447,7 @@ function ChaptersPanel({
   const [chapterPlayerChIdx, setChapterPlayerChIdx] = useState<number | null>(null)
   const prevSegStatusRef = useRef<Record<number, string>>({})
   const initialExpandDoneRef = useRef(false)
+  const segRefs = useRef<Record<number, HTMLDivElement | null>>({})
 
   useEffect(() => {
     if (!scrollToChapterId) return
@@ -1457,6 +1458,17 @@ function ChaptersPanel({
     onScrollToChapterDone()
   }, [scrollToChapterId, onScrollToChapterDone])
 
+  useEffect(() => {
+    if (sequentialPlayingId === null || !detail) return
+    const seg = segments.find(s => s.id === sequentialPlayingId)
+    if (!seg) return
+    const ch = detail.chapters.find(c => c.chapter_index === seg.chapter_index)
+    if (ch) setExpandedChapters(prev => { const n = new Set(prev); n.add(ch.id); return n })
+    setTimeout(() => {
+      segRefs.current[sequentialPlayingId]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+    }, 50)
+  }, [sequentialPlayingId, detail, segments])
+
   useEffect(() => {
     const bumps: Record<number, number> = {}
     segments.forEach(seg => {
@@ -1712,6 +1724,7 @@ function ChaptersPanel({
                       return (
                         <div
                           key={seg.id}
+                          ref={el => { segRefs.current[seg.id] = el }}
                           className={`rounded-lg border overflow-hidden ${sequentialPlayingId === seg.id ? 'border-primary/40 bg-primary/5' : 'bg-card'}`}
                         >
                           {/* Card header */}