Skip to content

feat: add Edge TTS, ReadAloud overlay, word alignment, UI optimization, and i18n - #34

Merged
Talljack merged 3 commits into
mainfrom
feat/read-aloud-overlay
Apr 11, 2026
Merged

Talljack merged 3 commits into
mainfrom
feat/read-aloud-overlay

Conversation

@Talljack

@Talljack Talljack commented Apr 10, 2026 •

Copy link
Copy Markdown
Owner

Summary

  • Add Microsoft Edge TTS as default voice engine with word-level alignment and Dexie caching
  • Add Speechify-style ReadAloud overlay for Listen and Read modules with immersive reader mode
  • Comprehensive UI optimization across 11 pages (P0-P3): compact Dashboard banners/stats, Settings cards, Review progress, Speak scenario cards, Library word book cards/tag overflow, Write translation spinner, sidebar sign-in banner
  • Internationalize 15+ components with en/zh JSON message files (chat, command palette, practice UI, voice picker, etc.)

Test plan

  • TypeScript typecheck passes (tsc --noEmit)
  • Biome lint passes (0 errors)
  • Next.js production build passes (50/50 static pages)
  • Tauri desktop app launches and renders correctly
  • CI pipeline passes (lint → typecheck → build)

Implement word-level highlighting with karaoke-style tracking using browser
SpeechSynthesis onboundary events. Includes a right-side floating control bar
with play/pause, sentence navigation, speed control, and progress indicator.

- New ReadAloud Zustand store for centralized playback state
- ReadAloudContent component with word-by-word clickable highlighting
- ReadAloudFloatingBar with play/pause, prev/next sentence, speed control
- Listen module: ReadAloud is always active with full word tracking
- Read module: opt-in "Listen Along" button activates ReadAloud overlay
- Auto-scroll current word into view during playback
- Sentence-level translations displayed inline
- Design spec document included

Made-with: Cursor
@vercel

vercel Bot commented Apr 10, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
echo-type Ready Ready Preview, Comment Apr 11, 2026 2:34pm

- Store tests (20): activate/deactivate, word/sentence tracking,
  navigation (next/prev sentence), progress reset, abbreviation handling
- Content component tests (10): word rendering, translations,
  empty text, multiline, accessibility attributes
- Floating bar tests (12): inactive state, speed step logic,
  progress calculation formula

Made-with: Cursor
…UI optimization, and i18n

- Add Microsoft Edge TTS as default voice engine with word-level alignment
- Add Speechify-style ReadAloud overlay for Listen and Read modules
- Add immersive reader overlay with word-by-word highlighting
- Add cloud TTS word alignment with Dexie caching
- Compact Dashboard: banners, stats cards, View Analytics link
- Compact Settings: Account and English Level cards
- Compact Review: progress card and empty state
- Compact Speak: scenario card density
- Compact Library: Word Book card density, tag overflow improvement, chat overlap fix
- Compact Write: translation spinner refinement
- Subtle sidebar sign-in banner with hover effects
- Add progress % label and tooltip to floating controls
- Internationalize 15+ components with en/zh JSON message files

Made-with: Cursor
@Talljack Talljack changed the title feat: Speechify-style ReadAloud overlay for Listen and Read modules feat: add Edge TTS, ReadAloud overlay, word alignment, UI optimization, and i18n Apr 11, 2026
@Talljack
Talljack merged commit e8f0a47 into main Apr 11, 2026
6 checks passed
@Talljack
Talljack deleted the feat/read-aloud-overlay branch April 11, 2026 14:35

This branch was successfully deployed

1 active deployment
Preview — 78be1a30 Deployed Apr 11, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant