From ae140648228a01fc02b1ae6f459acf466974c0f2 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 20 Oct 2025 22:06:25 +0200
Subject: [PATCH] style(tts-settings): use same speed cycling button as
 TTSControls

---
 src/components/Settings/TTSSettings.tsx | 33 +++++++++++++++----------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/Settings/TTSSettings.tsx b/src/components/Settings/TTSSettings.tsx
index 30b22b48..b1d0f8dd 100644
--- a/src/components/Settings/TTSSettings.tsx
+++ b/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>