Fix dashboard plan sync and unify inline playback controls

e2e/listen.spec.ts

@@ -219,6 +219,7 @@ test.describe('Listen Module', () => {
   test('listen detail page has playback controls', async ({ page }) => {
     await navigateToContentDetail(page, 'listen');
 
+    await expect(page.getByTestId('read-aloud-inline-controls')).toBeVisible();
     // Should have Play button
     await expect(page.getByRole('button', { name: 'Play' })).toBeVisible();
     // Should have speed controls

e2e/read.spec.ts

@@ -32,6 +32,7 @@ test.describe('Read Module', () => {
 
     await expect(page.getByText('Reference Text')).toBeVisible();
     await expect(page.getByRole('button', { name: 'Listen' })).toBeVisible();
+    await expect(page.getByTestId('read-aloud-inline-controls')).toBeVisible();
     await expect(page.getByText('Reset')).toBeVisible();
     await expect(page.getByText('Read Aloud Mode')).toBeVisible();
     await expect(page.getByRole('heading', { name: 'Your Speech' })).toHaveCount(0);

e2e/wordbook-practice.spec.ts

@@ -135,6 +135,7 @@ test.describe('WordBook Practice – Listen', () => {
     await page.goto(`/listen/book/${BOOK_ID}`);
     await waitForPracticeCard(page);
 
+    await expect(page.getByTestId('read-aloud-inline-controls')).toBeVisible();
     await expect(page.getByRole('button', { name: 'Play', exact: true })).toBeVisible();
     await expect(page.getByText('0.5x')).toBeVisible();
     await expect(page.getByText('1x')).toBeVisible();
@@ -285,6 +286,24 @@ test.describe('WordBook Practice – Write', () => {
 
     await expect(page.getByText('Not quite right')).toBeVisible({ timeout: 3000 });
   });
+
+  test('requires completing the current prompt before finish and records the completed count', async ({ page }) => {
+    await page.goto(`/write/book/${BOOK_ID}?limit=1`);
+    await waitForPracticeCard(page);
+
+    const finishButton = page.getByRole('button', { name: 'Finish' });
+    await expect(finishButton).toBeDisabled();
+
+    const textContent = await page.locator('.bg-indigo-50\\/50 p').textContent();
+    expect(textContent).toBeTruthy();
+
+    const input = page.getByPlaceholder('Type the text above...');
+    await input.fill(textContent!);
+    await page.getByRole('button', { name: 'Check' }).click();
+
+    await expect(page.getByText('Session Complete!')).toBeVisible({ timeout: 3000 });
+    await expect(page.getByText('1', { exact: true })).toBeVisible();
+  });
 });
 
 // ─── Read Book Practice ─────────────────────────────────────────────────────

src/__tests__/daily-plan-progress.test.ts

@@ -1,4 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { toLocalDateKey } from '@/lib/date-key';
 import type { ContentItem, LearningRecord, TypingSession } from '@/types/content';
 
 let mockContents: ContentItem[] = [];
@@ -18,6 +19,14 @@ vi.mock('@/lib/db', () => {
       contents: {
         toArray: async () => mockContents,
         where: (field: string) => createWhereChain(() => mockContents, field),
+        put: async (content: ContentItem) => {
+          const index = mockContents.findIndex((item) => item.id === content.id);
+          if (index >= 0) {
+            mockContents[index] = content;
+          } else {
+            mockContents.push(content);
+          }
+        },
       },
       records: {
         toArray: async () => mockRecords,
@@ -220,5 +229,50 @@ describe('daily-plan-progress', () => {
       expect(mockRecords).toHaveLength(1);
       expect(mockRecords[0].attempts).toBe(3);
     });
+
+    it('stores provided content snapshots so book-based tasks can sync from built-in wordbook practice', async () => {
+      const builtInWord = makeContent({
+        id: 'daily-vocab-1',
+        category: 'daily-vocab',
+        source: 'builtin',
+      });
+      const practicedAt = Date.now();
+
+      await savePracticeSession(
+        makeSession({
+          id: 'session-daily-vocab-1',
+          contentId: 'daily-vocab-1',
+          module: 'write',
+          startTime: practicedAt - 60_000,
+          endTime: practicedAt,
+        }),
+        { content: builtInWord },
+      );
+
+      const synced = syncPlanTasks(
+        [
+          {
+            id: 'task-daily-vocab',
+            type: 'new-words',
+            title: 'Learn 1 new word',
+            description: 'From Daily Essentials',
+            module: 'write',
+            bookId: 'daily-vocab',
+            limit: 1,
+            completed: false,
+            skipped: false,
+          },
+        ],
+        {
+          contents: mockContents,
+          records: mockRecords,
+          sessions: mockSessions,
+          dayKey: toLocalDateKey(practicedAt),
+        },
+      );
+
+      expect(mockContents).toEqual(expect.arrayContaining([expect.objectContaining({ id: 'daily-vocab-1' })]));
+      expect(synced[0].completed).toBe(true);
+    });
   });
 });

src/app/(app)/listen/[id]/page.tsx

@@ -9,7 +9,7 @@ import {
   ImmersiveReaderOverlay,
   IOSReadAloudControls,
   ReadAloudContent,
-  ReadAloudFloatingBar,
+  ReadAloudInlineControls,
 } from '@/components/read-aloud';
 import { CrossModuleNav } from '@/components/shared/cross-module-nav';
 import { IOS_LIST_CARD_CLASS, IOS_SECTION_CARD_CLASS } from '@/components/shared/ios-native-ui';
@@ -827,7 +827,7 @@ export default function ListenDetailPage() {
     t.dictation.weakSpotReason,
   ]);
 
-  const handleFloatingNext = useCallback(() => {
+  const handleReadAloudNext = useCallback(() => {
     if (!content) return;
     const state = useReadAloudStore.getState();
     const { sentences, currentSentenceIndex } = state;
@@ -838,7 +838,7 @@ export default function ListenDetailPage() {
     playSentenceSegment(nextSentence.text, nextSentence.startWordIndex);
   }, [content, playSentenceSegment]);
 
-  const handleFloatingPrev = useCallback(() => {
+  const handleReadAloudPrev = useCallback(() => {
     if (!content) return;
     const state = useReadAloudStore.getState();
     const { sentences, currentSentenceIndex, currentWordIndex } = state;
@@ -906,7 +906,7 @@ export default function ListenDetailPage() {
   }
 
   return (
-    <div className={cn('max-w-4xl mx-auto space-y-5', isIOSNativeHost ? 'pb-6' : 'pr-16')}>
+    <div className={cn('max-w-4xl mx-auto space-y-5', isIOSNativeHost ? 'pb-6' : '')}>
       {/* Header */}
       {isIOSNativeHost && (
         <Card className={cn(IOS_SECTION_CARD_CLASS, 'overflow-hidden')}>
@@ -1241,16 +1241,17 @@ export default function ListenDetailPage() {
           accentClassName="text-indigo-600"
           onPlay={handlePlay}
           onPause={handlePause}
-          onNext={handleFloatingNext}
-          onPrev={handleFloatingPrev}
+          onNext={handleReadAloudNext}
+          onPrev={handleReadAloudPrev}
           onRestart={handleRestart}
         />
       ) : (
-        <ReadAloudFloatingBar
+        <ReadAloudInlineControls
+          label="Listen controls"
           onPlay={handlePlay}
           onPause={handlePause}
-          onNext={handleFloatingNext}
-          onPrev={handleFloatingPrev}
+          onNext={handleReadAloudNext}
+          onPrev={handleReadAloudPrev}
           onRestart={handleRestart}
         />
       )}
@@ -1259,8 +1260,8 @@ export default function ListenDetailPage() {
         text={content.text}
         onPlay={handlePlay}
         onPause={handlePause}
-        onNext={handleFloatingNext}
-        onPrev={handleFloatingPrev}
+        onNext={handleReadAloudNext}
+        onPrev={handleReadAloudPrev}
         onWordClick={handleWordClick}
       />
 

src/app/(app)/read/[id]/page.tsx

@@ -12,7 +12,7 @@ import {
   ImmersiveReaderOverlay,
   IOSReadAloudControls,
   ReadAloudContent,
-  ReadAloudFloatingBar,
+  ReadAloudInlineControls,
 } from '@/components/read-aloud';
 import { CrossModuleNav } from '@/components/shared/cross-module-nav';
 import { FormattedContentText } from '@/components/shared/formatted-content-text';
@@ -1125,7 +1125,9 @@ export default function ReadDetailPage() {
               onPrev={handleReadAloudPrev}
             />
           ) : (
-            <ReadAloudFloatingBar
+            <ReadAloudInlineControls
+              label="Read controls"
+              accentClassName="text-orange-500"
               onPlay={handlePlayTTS}
               onPause={handleReadAloudPause}
               onNext={handleReadAloudNext}

src/components/read-aloud/index.ts

@@ -2,3 +2,4 @@ export { ImmersiveReaderOverlay } from './immersive-reader-overlay';
 export { IOSReadAloudControls } from './ios-read-aloud-controls';
 export { ReadAloudContent } from './read-aloud-content';
 export { ReadAloudFloatingBar } from './read-aloud-floating-bar';
+export { ReadAloudInlineControls } from './read-aloud-inline-controls';

src/components/read-aloud/read-aloud-inline-controls.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { Maximize2, Pause, Play, RotateCcw, SkipBack, SkipForward } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import enPracticeUi from '@/lib/i18n/messages/practice-ui/en.json';
+import zhPracticeUi from '@/lib/i18n/messages/practice-ui/zh.json';
+import { cn } from '@/lib/utils';
+import { useLanguageStore } from '@/stores/language-store';
+import { useReadAloudStore } from '@/stores/read-aloud-store';
+import { useTTSStore } from '@/stores/tts-store';
+
+const PRACTICE_UI_LOCALES = { en: enPracticeUi, zh: zhPracticeUi } as const;
+const SPEED_STEPS = [0.5, 0.75, 1, 1.25, 1.5, 2];
+
+interface ReadAloudInlineControlsProps {
+  accentClassName?: string;
+  className?: string;
+  label: string;
+  onPlay: () => void;
+  onPause: () => void;
+  onPrev: () => void;
+  onNext: () => void;
+  onRestart?: () => void;
+  showImmersive?: boolean;
+}
+
+export function ReadAloudInlineControls({
+  accentClassName = 'text-indigo-600',
+  className,
+  label,
+  onPlay,
+  onPause,
+  onPrev,
+  onNext,
+  onRestart,
+  showImmersive = true,
+}: ReadAloudInlineControlsProps) {
+  const raT = PRACTICE_UI_LOCALES[useLanguageStore((s) => s.interfaceLanguage)].readAloud;
+  const isPlaying = useReadAloudStore((s) => s.isPlaying);
+  const immersiveMode = useReadAloudStore((s) => s.immersiveMode);
+  const toggleImmersiveMode = useReadAloudStore((s) => s.toggleImmersiveMode);
+  const words = useReadAloudStore((s) => s.words);
+  const currentWordIndex = useReadAloudStore((s) => s.currentWordIndex);
+  const { speed, setSpeed } = useTTSStore();
+
+  const progress = words.length > 0 && currentWordIndex >= 0 ? ((currentWordIndex + 1) / words.length) * 100 : 0;
+
+  return (
+    <div
+      data-testid="read-aloud-inline-controls"
+      className={cn('rounded-2xl border border-slate-200 bg-slate-50/90 p-4 shadow-sm', className)}
+    >
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">{label}</p>
+          <p className="mt-1 text-sm text-slate-500">
+            {Math.round(progress)}% {raT.progress.toLowerCase()}
+          </p>
+        </div>
+        <div className="rounded-full bg-white px-3 py-1.5 text-sm font-semibold text-slate-700 shadow-sm tabular-nums">
+          {speed}x
+        </div>
+      </div>
+
+      <div className="mt-3 h-2 overflow-hidden rounded-full bg-white">
+        <div
+          className={cn(
+            'h-full rounded-full bg-[linear-gradient(90deg,rgba(79,70,229,0.96)_0%,rgba(129,140,248,0.92)_100%)] transition-all duration-300',
+            accentClassName.includes('orange') &&
+              'bg-[linear-gradient(90deg,rgba(249,115,22,0.94)_0%,rgba(251,146,60,0.9)_100%)]',
+          )}
+          style={{ width: `${Math.max(progress, 4)}%` }}
+        />
+      </div>
+
+      <div className="mt-4 flex flex-wrap items-center justify-center gap-2">
+        <Button type="button" variant="outline" size="icon" onClick={onPrev} aria-label={raT.previousSentence}>
+          <SkipBack className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          onClick={onRestart ?? onPrev}
+          aria-label="Restart"
+          disabled={!onRestart}
+        >
+          <RotateCcw className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          onClick={isPlaying ? onPause : onPlay}
+          className={cn(
+            'min-w-28 gap-2 shadow-sm',
+            accentClassName.includes('orange')
+              ? 'bg-orange-500 hover:bg-orange-600 text-white'
+              : 'bg-indigo-600 hover:bg-indigo-700 text-white',
+          )}
+          aria-label={isPlaying ? raT.pause : raT.play}
+        >
+          {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="ml-0.5 h-4 w-4" />}
+          {isPlaying ? raT.pause : raT.play}
+        </Button>
+        <Button type="button" variant="outline" size="icon" onClick={onNext} aria-label={raT.nextSentence}>
+          <SkipForward className="h-4 w-4" />
+        </Button>
+        {showImmersive ? (
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            onClick={toggleImmersiveMode}
+            aria-label={immersiveMode ? raT.exitImmersive : raT.immersiveMode}
+          >
+            <Maximize2 className="h-4 w-4" />
+          </Button>
+        ) : null}
+      </div>
+
+      <div className="mt-4 flex flex-wrap items-center justify-center gap-2">
+        {SPEED_STEPS.map((step) => (
+          <button
+            key={step}
+            type="button"
+            onClick={() => setSpeed(step)}
+            className={cn(
+              'rounded-full px-3 py-1.5 text-xs font-semibold transition-colors',
+              speed === step ? 'bg-indigo-600 text-white' : 'bg-white text-slate-600 hover:bg-slate-100',
+            )}
+          >
+            {step}x
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}