style(tts-settings): use same speed cycling button as TTSControls

src/components/Settings/TTSSettings.tsx

@@ -1,4 +1,6 @@
 import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGauge } from '@fortawesome/free-solid-svg-icons'
 import { UserSettings } from '../../services/settingsService'
 
 interface TTSSettingsProps {
@@ -9,25 +11,30 @@ interface TTSSettingsProps {
 const SPEED_OPTIONS = [0.8, 1, 1.2, 1.4, 1.6, 1.8, 2, 2.1, 2.4, 2.8, 3]
 
 const TTSSettings: React.FC<TTSSettingsProps> = ({ settings, onUpdate }) => {
+  const currentSpeed = settings.ttsDefaultSpeed || 2.1
+
+  const handleCycleSpeed = () => {
+    const currentIndex = SPEED_OPTIONS.indexOf(currentSpeed)
+    const nextIndex = (currentIndex + 1) % SPEED_OPTIONS.length
+    onUpdate({ ttsDefaultSpeed: SPEED_OPTIONS[nextIndex] })
+  }
+
   return (
     <div className="settings-section">
       <h3 className="section-title">Text-to-Speech</h3>
       
       <div className="setting-group setting-inline">
-        <label htmlFor="ttsDefaultSpeed" className="setting-label">Default Playback Speed</label>
+        <label className="setting-label">Default Playback Speed</label>
         <div className="setting-control">
-          <div className="setting-buttons">
-            {SPEED_OPTIONS.map(speed => (
-              <button
-                key={speed}
-                onClick={() => onUpdate({ ttsDefaultSpeed: speed })}
-                className={`speed-btn ${(settings.ttsDefaultSpeed || 2.1) === speed ? 'active' : ''}`}
-                title={`${speed}x speed`}
-              >
-                {speed}x
-              </button>
-            ))}
-          </div>
+          <button
+            type="button"
+            className="article-menu-btn"
+            onClick={handleCycleSpeed}
+            title="Cycle speed"
+          >
+            <FontAwesomeIcon icon={faGauge} />
+            <span>{currentSpeed}x</span>
+          </button>
         </div>
       </div>
     </div>