refactor(audiobook): standardize chapter regeneration APIs and UX

- Removed `onProgress` callback from `regenerateChapter` and related functions across `TTS`, `EPUB`, and `PDF` contexts to simplify the chapter regeneration API.
- Updated `AudiobookExportModal` to align with the refined regeneration API, including removing granular chapter progress display and adding a hint about TTS caching behavior.
- Introduced `TTSAudiobookChapter` interface and renamed `ContinuationMergeResult` to `TTSSmartMergeResult` and `PageTurnEstimate` to `TTSPageTurnEstimate` for better type consistency and clarity.
- Applied minor styling adjustments to buttons and listbox components in modals for visual consistency.
- Added `'use client'` directive to several client-side components for Next.js 13+ compatibility.
- Updated Dockerfile build command from `pnpm run build` to `pnpm build`.
- Added Playwright tests to verify backend chapter state after regeneration.

Author: richardr1126

Dockerfile

@@ -21,7 +21,7 @@ COPY . .
 
 # Build the Next.js application
 RUN pnpm exec next telemetry disable
-RUN pnpm run build
+RUN pnpm build
 
 # Expose the port the app runs on
 EXPOSE 3003

src/app/epub/[id]/page.tsx

@@ -94,10 +94,9 @@ export default function EPUBPage() {
     chapterIndex: number,
     bookId: string,
     format: 'mp3' | 'm4b',
-    onProgress: (progress: number) => void,
     signal: AbortSignal
   ) => {
-    return regenerateEPUBChapter(chapterIndex, bookId, format, onProgress, signal);
+    return regenerateEPUBChapter(chapterIndex, bookId, format, signal);
   }, [regenerateEPUBChapter]);
 
   if (error) {

src/app/globals.css

@@ -10,7 +10,7 @@ html.light {
   --base: #f7fafc;
   --offbase: #e2e8f0;
   --accent: #ef4444;
-  --secondary-accent: #3b82f6;
+  --secondary-accent: #ed6868;
   --muted: #718096;
   --prism-gradient: linear-gradient(90deg,
     #fecaca,
@@ -25,7 +25,7 @@ html.dark {
   --base: #171717;
   --offbase: #343434;
   --accent: #f87171;
-  --secondary-accent: #60a5fa;
+  --secondary-accent: #eb6262;
   --muted: #a3a3a3;
   --prism-gradient: linear-gradient(90deg,
     #fca5a5,

src/app/pdf/[id]/page.tsx

@@ -88,10 +88,9 @@ export default function PDFViewerPage() {
     chapterIndex: number,
     bookId: string,
     format: 'mp3' | 'm4b',
-    onProgress: (progress: number) => void,
     signal: AbortSignal
   ) => {
-    return regeneratePDFChapter(chapterIndex, bookId, format, onProgress, signal);
+    return regeneratePDFChapter(chapterIndex, bookId, format, signal);
   }, [regeneratePDFChapter]);
 
   if (error) {

src/components/AudiobookExportModal.tsx

@@ -75,8 +75,8 @@ export function ConfirmDialog({
                 <div className="mt-6 flex justify-end space-x-3">
                   <button
                     type="button"
-                    className="inline-flex justify-center rounded-lg bg-background px-4 py-2 text-sm 
-                             font-medium text-foreground hover:bg-background/90 focus:outline-none 
+                    className="inline-flex justify-center rounded-lg bg-background px-3 py-1.5 text-sm 
+                             font-medium text-foreground hover:bg-offbase focus:outline-none 
                              focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
                              transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-accent"
                     onClick={onClose}
@@ -85,12 +85,12 @@ export function ConfirmDialog({
                   </button>
                   <button
                     type="button"
-                    className={`inline-flex justify-center rounded-lg px-4 py-2 text-sm 
+                    className={`inline-flex justify-center rounded-lg px-3 py-1.5 text-sm 
                              font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
                              transform transition-transform duration-200 ease-in-out hover:scale-[1.04]
                              ${isDangerous 
-                               ? 'bg-accent text-background hover:bg-accent/90 focus-visible:ring-accent' 
-                               : 'bg-accent text-background hover:bg-accent/90 focus-visible:ring-accent'
+                               ? 'bg-accent text-background hover:bg-secondary-accent focus-visible:ring-accent' 
+                               : 'bg-accent text-background hover:bg-secondary-accent focus-visible:ring-accent'
                              }`}
                     onClick={onConfirm}
                   >

src/components/ConfirmDialog.tsx

@@ -11,7 +11,7 @@ import { useParams } from 'next/navigation';
 
 const isDev = process.env.NEXT_PUBLIC_NODE_ENV !== 'production' || process.env.NODE_ENV == null;
 
-const viewTypes = [
+const viewTypeTextMapping = [
   { id: 'single', name: 'Single Page' },
   { id: 'dual', name: 'Two Pages' },
   { id: 'scroll', name: 'Continuous Scroll' },
@@ -45,7 +45,7 @@ export function DocumentSettings({ isOpen, setIsOpen, epub, html }: {
     right: rightMargin
   });
   const [isAudiobookModalOpen, setIsAudiobookModalOpen] = useState(false);
-  const selectedView = viewTypes.find(v => v.id === viewType) || viewTypes[0];
+  const selectedView = viewTypeTextMapping.find(v => v.id === viewType) || viewTypeTextMapping[0];
 
   // Sync local margins with global state
   useEffect(() => {
@@ -91,13 +91,12 @@ export function DocumentSettings({ isOpen, setIsOpen, epub, html }: {
     chapterIndex: number,
     bookId: string,
     format: 'mp3' | 'm4b',
-    onProgress: (progress: number) => void,
     signal: AbortSignal
   ) => {
     if (epub) {
-      return regenerateEPUBChapter(chapterIndex, bookId, format, onProgress, signal);
+      return regenerateEPUBChapter(chapterIndex, bookId, format, signal);
     } else {
-      return regeneratePDFChapter(chapterIndex, bookId, format, onProgress, signal);
+      return regeneratePDFChapter(chapterIndex, bookId, format, signal);
     }
   }, [epub, regenerateEPUBChapter, regeneratePDFChapter]);
 
@@ -141,10 +140,10 @@ export function DocumentSettings({ isOpen, setIsOpen, epub, html }: {
                   {isDev && !html && <div className="space-y-2 mb-4">
                     <Button
                       type="button"
-                      className="w-full inline-flex justify-center rounded-lg bg-accent px-4 py-2 text-sm
-                                    font-medium text-background hover:opacity-95 focus:outline-none 
+                      className="w-full inline-flex justify-center rounded-lg bg-accent px-3 py-1.5 text-sm
+                                    font-medium text-background hover:bg-secondary-accent focus:outline-none 
                                     focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
-                                    transform transition-transform duration-200 ease-in-out hover:scale-[1.04]"
+                                    transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-background"
                       onClick={() => setIsAudiobookModalOpen(true)}
                     >
                       Export Audiobook
@@ -248,7 +247,7 @@ export function DocumentSettings({ isOpen, setIsOpen, epub, html }: {
                       >
                         <div className="relative z-10 space-y-2">
                           <label className="block text-sm font-medium text-foreground">Mode</label>
-                          <ListboxButton className="relative w-full cursor-pointer rounded-lg bg-background py-2 pl-3 pr-10 text-left text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-accent transform transition-transform duration-200 ease-in-out hover:scale-[1.01] hover:text-accent">
+                          <ListboxButton className="relative w-full cursor-pointer rounded-lg bg-background py-1.5 pl-3 pr-10 text-left text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-accent transform transition-transform duration-200 ease-in-out hover:scale-[1.009] hover:text-accent hover:bg-offbase">
                             <span className="block truncate">{selectedView.name}</span>
                             <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                               <ChevronUpDownIcon className="h-5 w-5 text-muted" />
@@ -261,11 +260,11 @@ export function DocumentSettings({ isOpen, setIsOpen, epub, html }: {
                             leaveTo="opacity-0"
                           >
                             <ListboxOptions className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-background py-1 shadow-lg ring-1 ring-black/5 focus:outline-none">
-                              {viewTypes.map((view) => (
+                              {viewTypeTextMapping.map((view) => (
                                 <ListboxOption
                                   key={view.id}
                                   className={({ active }) =>
-                                    `relative cursor-pointer select-none py-2 pl-10 pr-4 ${active ? 'bg-accent/10 text-accent' : 'text-foreground'
+                                    `relative cursor-pointer select-none py-1.5 pl-10 pr-4 ${active ? 'bg-offbase text-accent' : 'text-foreground'
                                     }`
                                   }
                                   value={view}
@@ -365,8 +364,8 @@ export function DocumentSettings({ isOpen, setIsOpen, epub, html }: {
                   <div className="mt-3 flex justify-end">
                     <Button
                       type="button"
-                      className="inline-flex justify-center rounded-lg bg-background px-4 py-2 text-sm 
-                               font-medium text-foreground hover:bg-background/90 focus:outline-none 
+                      className="inline-flex justify-center rounded-lg bg-background px-3 py-1.5 text-sm 
+                               font-medium text-foreground hover:bg-offbase focus:outline-none 
                                focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
                                transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-accent z-1"
                       onClick={() => setIsOpen(false)}

src/components/DocumentSettings.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { ReactNode } from "react";
 
 export function Header({