feat: add top 10 TTS languages to speaker language selector

src/components/Settings/TTSSettings.tsx

@@ -45,11 +45,29 @@ const TTSSettings: React.FC<TTSSettingsProps> = ({ settings, onUpdate }) => {
         <div className="setting-control">
           <select
             value={settings.ttsLanguageMode || 'content'}
-            onChange={e => onUpdate({ ttsLanguageMode: (e.target.value as 'system' | 'content'), ttsUseSystemLanguage: e.target.value === 'system', ttsDetectContentLanguage: e.target.value !== 'system' })}
+            onChange={e => {
+              const value = e.target.value
+              onUpdate({ 
+                ttsLanguageMode: value,
+                ttsUseSystemLanguage: value === 'system',
+                ttsDetectContentLanguage: value === 'content'
+              })
+            }}
             className="setting-select"
           >
             <option value="system">System Language</option>
             <option value="content">Content (auto-detect)</option>
+            <option disabled>────────────</option>
+            <option value="en">English</option>
+            <option value="zh">Mandarin Chinese</option>
+            <option value="es">Spanish</option>
+            <option value="hi">Hindi</option>
+            <option value="ar">Arabic</option>
+            <option value="fr">French</option>
+            <option value="pt">Portuguese</option>
+            <option value="de">German</option>
+            <option value="ja">Japanese</option>
+            <option value="ru">Russian</option>
           </select>
         </div>
       </div>

src/components/TTSControls.tsx

@@ -37,12 +37,25 @@ const TTSControls: React.FC<Props> = ({ text, defaultLang, className, settings }
     return settings?.ttsDetectContentLanguage !== false
   }, [settings?.ttsLanguageMode, settings?.ttsDetectContentLanguage])
 
+  const specificLang = useMemo(() => {
+    const mode = settings?.ttsLanguageMode
+    // If mode is not 'system' or 'content', it's a specific language code
+    if (mode && mode !== 'system' && mode !== 'content') {
+      return mode
+    }
+    return undefined
+  }, [settings?.ttsLanguageMode])
+
   const handlePlayPause = () => {
     if (!canPlay) return
 
     if (!speaking) {
       let langOverride: string | undefined
-      if (detectContentLang && text) {
+      
+      // Priority: specific language > content detection > system language
+      if (specificLang) {
+        langOverride = specificLang
+      } else if (detectContentLang && text) {
         try {
           const lang = detect(text)
           if (typeof lang === 'string' && lang.length >= 2) langOverride = lang.slice(0, 2)

src/services/settingsService.ts

@@ -68,7 +68,7 @@ export interface UserSettings {
   // TTS language selection
   ttsUseSystemLanguage?: boolean // default: false
   ttsDetectContentLanguage?: boolean // default: true
-  ttsLanguageMode?: 'system' | 'content' // default: 'content'
+  ttsLanguageMode?: 'system' | 'content' | string // default: 'content', can also be language code like 'en', 'es', etc.
   // Text-to-Speech settings
   ttsDefaultSpeed?: number // default: 2.1
 }