From f2f598ada8461f1c040c037c25ddc520e9ae795f Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Fri, 26 Jun 2026 19:34:50 +0200
Subject: [PATCH] feat(settings): use the shared custom dropdown for the AI
 parsing provider

Swap the native select for CustomSelect so the provider picker matches the rest of the app's styling (dark mode, portal dropdown).
---
 .../Settings/LlmConnectionSection.tsx           | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Settings/LlmConnectionSection.tsx b/client/src/components/Settings/LlmConnectionSection.tsx
index f9ec1baf..538ee226 100644
--- a/client/src/components/Settings/LlmConnectionSection.tsx
+++ b/client/src/components/Settings/LlmConnectionSection.tsx
@@ -6,6 +6,7 @@ import { useSettingsStore } from '../../store/settingsStore'
 import type { Settings } from '../../types'
 import Section from './Section'
 import ToggleSwitch from './ToggleSwitch'
+import CustomSelect from '../shared/CustomSelect'
 
 type Provider = NonNullable<Settings['llm_provider']>
 
@@ -76,15 +77,15 @@ export default function LlmConnectionSection(): React.ReactElement {
 
         <div>
           <label className="block text-sm font-medium mb-1.5 text-content-secondary">{t('settings.aiParsing.provider')}</label>
-          <select
+          <CustomSelect
             value={provider}
-            onChange={e => setProvider(e.target.value as Provider)}
-            className="w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-400 border-edge bg-surface-secondary text-content"
-          >
-            <option value="local">{t('settings.aiParsing.providerLocal')}</option>
-            <option value="openai">{t('settings.aiParsing.providerOpenai')}</option>
-            <option value="anthropic">{t('settings.aiParsing.providerAnthropic')}</option>
-          </select>
+            onChange={v => setProvider(v as Provider)}
+            options={[
+              { value: 'local', label: t('settings.aiParsing.providerLocal') },
+              { value: 'openai', label: t('settings.aiParsing.providerOpenai') },
+              { value: 'anthropic', label: t('settings.aiParsing.providerAnthropic') },
+            ]}
+          />
         </div>
 
         <div>