fix(settings): show the live caption model under the dictation model

The caption model selector now sits directly under the dictation model in
the STT tab's Local Whisper card, where people look for it, and stays in the
General tab's caption section as well; both use one shared component. The
first selector is renamed to 'Dictation model' so the two are told apart.

apps/desktop/src/renderer/components/SettingsModal.tsx

@@ -28,6 +28,7 @@ import { Led } from '@d3ro/ui/components/ds'
 import { LicenseTab } from './LicenseTab'
 import { CloudSyncSection } from './CloudSyncSection'
 import { STTTab } from './STTTab'
+import { CaptionModelSelect } from './CaptionModelSelect'
 import { InputConsentPanel } from './input-insights/InputConsentPanel'
 import { KeyBindingField } from './keybinding/KeyBindingField'
 import { asTranslationKey } from './keybinding/translation-key'
@@ -64,9 +65,6 @@ const ACTION_GROUP_LABEL_KEYS: Readonly<Record<KeyBindingActionGroup, string>> =
 
 const ACTION_GROUP_ORDER: readonly KeyBindingActionGroup[] = ['voice', 'window', 'input']
 
-/** 자막 모델 선택지 "받아쓰기와 같게" — 설정에는 null 로 저장한다 */
-const SAME_AS_DICTATION = '__same__'
-
 export function SettingsModal({ open, initialTab = 0, onClose }: SettingsModalProps): React.ReactElement {
   const { t, locale, setLocale } = useI18n()
   const [activeTab, setActiveTab] = useState(initialTab)
@@ -493,26 +491,11 @@ export function SettingsModal({ open, initialTab = 0, onClose }: SettingsModalPr
                 </Select>
               </FormControl>
 
-              <FormControl size="small">
-                <InputLabel>{t('settings.captionModel')}</InputLabel>
-                <Select
-                  label={t('settings.captionModel')}
-                  value={config.captionSttModelId ?? SAME_AS_DICTATION}
-                  onChange={(e) =>
-                    updateConfig('captionSttModelId', e.target.value === SAME_AS_DICTATION ? null : e.target.value)
-                  }
-                >
-                  <MenuItem value={SAME_AS_DICTATION}>{t('settings.captionModel.same')}</MenuItem>
-                  {downloadedSttModels.map((m) => (
-                    <MenuItem key={m.id} value={m.id}>
-                      {m.name}
-                    </MenuItem>
-                  ))}
-                </Select>
-                <Typography sx={{ mt: 0.5, fontSize: d3roTypo.meta.size, color: d3roPalette.text.secondary }}>
-                  {t('settings.captionModel.desc')}
-                </Typography>
-              </FormControl>
+              <CaptionModelSelect
+                value={config.captionSttModelId}
+                models={downloadedSttModels}
+                onChange={(modelId) => updateConfig('captionSttModelId', modelId)}
+              />
 
               <FormControlLabel
                 sx={{ mr: 0, alignItems: 'flex-start' }}