From 14e16dac5874c267efc2ba137cc3bb8a18bc57e3 Mon Sep 17 00:00:00 2001
From: Simos Mikelatos <simosmik@gmail.com>
Date: Fri, 26 Jun 2026 14:06:17 +0000
Subject: [PATCH] fix: hide voice options until enabled

---
 .../view/QuickSettingsContent.tsx             |  5 +-
 .../settings/view/tabs/VoiceSettingsTab.tsx   | 85 ++++++++++---------
 2 files changed, 48 insertions(+), 42 deletions(-)

diff --git a/src/components/quick-settings-panel/view/QuickSettingsContent.tsx b/src/components/quick-settings-panel/view/QuickSettingsContent.tsx
index 8d805fe9..dc539621 100644
--- a/src/components/quick-settings-panel/view/QuickSettingsContent.tsx
+++ b/src/components/quick-settings-panel/view/QuickSettingsContent.tsx
@@ -28,6 +28,9 @@ export default function QuickSettingsContent({
   onPreferenceChange,
 }: QuickSettingsContentProps) {
   const { t } = useTranslation('settings');
+  const inputSettingToggles = preferences.voiceEnabled
+    ? INPUT_SETTING_TOGGLES
+    : INPUT_SETTING_TOGGLES.filter(({ key }) => key !== 'voiceEnabled');
 
   const renderToggleRows = (items: PreferenceToggleItem[]) => (
     items.map(({ key, labelKey, icon }) => (
@@ -67,7 +70,7 @@ export default function QuickSettingsContent({
       </QuickSettingsSection>
 
       <QuickSettingsSection title={t('quickSettings.sections.inputSettings')}>
-        {renderToggleRows(INPUT_SETTING_TOGGLES)}
+        {renderToggleRows(inputSettingToggles)}
         <p className="ml-3 text-xs text-gray-500 dark:text-gray-400">
           {t('quickSettings.sendByCtrlEnterDescription')}
         </p>
diff --git a/src/components/settings/view/tabs/VoiceSettingsTab.tsx b/src/components/settings/view/tabs/VoiceSettingsTab.tsx
index 7a8a2ba0..8dcf7585 100644
--- a/src/components/settings/view/tabs/VoiceSettingsTab.tsx
+++ b/src/components/settings/view/tabs/VoiceSettingsTab.tsx
@@ -21,6 +21,7 @@ export default function VoiceSettingsTab() {
   const { t } = useTranslation('settings');
   const { preferences, setPreference } = useUiPreferences();
   const { config, update } = useVoiceConfig();
+  const voiceEnabled = preferences.voiceEnabled;
 
   return (
     <div className="space-y-8">
@@ -31,58 +32,60 @@ export default function VoiceSettingsTab() {
             <div className="text-xs text-muted-foreground">{t('voiceSettings.enableDescription')}</div>
           </div>
           <SettingsToggle
-            checked={preferences.voiceEnabled}
+            checked={voiceEnabled}
             onChange={(v) => setPreference('voiceEnabled', v)}
             ariaLabel={t('voiceSettings.enable')}
           />
         </div>
       </SettingsSection>
 
-      <SettingsSection title={t('voiceSettings.backendTitle')} description={t('voiceSettings.backendDescription')}>
-        <div className="space-y-4">
-          <Field
-            label={t('voiceSettings.baseUrl')}
-            placeholder="https://api.openai.com/v1"
-            value={config.baseUrl}
-            onChange={(e) => update({ baseUrl: e.target.value })}
-          />
-          <Field
-            label={t('voiceSettings.apiKey')}
-            type="password"
-            autoComplete="off"
-            placeholder="sk-…"
-            value={config.apiKey}
-            onChange={(e) => update({ apiKey: e.target.value })}
-          />
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-4">
+      {voiceEnabled && (
+        <SettingsSection title={t('voiceSettings.backendTitle')} description={t('voiceSettings.backendDescription')}>
+          <div className="space-y-4">
             <Field
-              label={t('voiceSettings.sttModel')}
-              placeholder="whisper-1"
-              value={config.sttModel}
-              onChange={(e) => update({ sttModel: e.target.value })}
+              label={t('voiceSettings.baseUrl')}
+              placeholder="https://api.openai.com/v1"
+              value={config.baseUrl}
+              onChange={(e) => update({ baseUrl: e.target.value })}
             />
             <Field
-              label={t('voiceSettings.ttsModel')}
-              placeholder="tts-1"
-              value={config.ttsModel}
-              onChange={(e) => update({ ttsModel: e.target.value })}
-            />
-            <Field
-              label={t('voiceSettings.voice')}
-              placeholder="alloy"
-              value={config.ttsVoice}
-              onChange={(e) => update({ ttsVoice: e.target.value })}
-            />
-            <Field
-              label={t('voiceSettings.format')}
-              placeholder="mp3"
-              value={config.ttsFormat}
-              onChange={(e) => update({ ttsFormat: e.target.value })}
+              label={t('voiceSettings.apiKey')}
+              type="password"
+              autoComplete="off"
+              placeholder="sk-…"
+              value={config.apiKey}
+              onChange={(e) => update({ apiKey: e.target.value })}
             />
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-4">
+              <Field
+                label={t('voiceSettings.sttModel')}
+                placeholder="whisper-1"
+                value={config.sttModel}
+                onChange={(e) => update({ sttModel: e.target.value })}
+              />
+              <Field
+                label={t('voiceSettings.ttsModel')}
+                placeholder="tts-1"
+                value={config.ttsModel}
+                onChange={(e) => update({ ttsModel: e.target.value })}
+              />
+              <Field
+                label={t('voiceSettings.voice')}
+                placeholder="alloy"
+                value={config.ttsVoice}
+                onChange={(e) => update({ ttsVoice: e.target.value })}
+              />
+              <Field
+                label={t('voiceSettings.format')}
+                placeholder="mp3"
+                value={config.ttsFormat}
+                onChange={(e) => update({ ttsFormat: e.target.value })}
+              />
+            </div>
+            <p className="text-xs text-muted-foreground">{t('voiceSettings.note')}</p>
           </div>
-          <p className="text-xs text-muted-foreground">{t('voiceSettings.note')}</p>
-        </div>
-      </SettingsSection>
+        </SettingsSection>
+      )}
     </div>
   );
 }