Polished copilot workspace work

frontend/src/components/Settings.tsx

@@ -27,12 +27,13 @@ import {
 } from 'components/ui/select'
 import { Slider } from 'components/ui/slider'
 import { Switch } from 'components/ui/switch'
+import i18n from 'i18next'
 import { useAtom } from 'jotai'
 import { knownImageModels } from 'lib/constants'
 import { cn } from 'lib/utils'
 import { ImageIcon } from 'lucide-react'
 import type { ChangeEvent } from 'react'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import {
 	darkModeAtom,
@@ -43,7 +44,6 @@ import {
 	temperatureAtom
 } from 'state'
 import { Textarea } from './ui/textarea'
-import i18n from 'i18next'
 
 function slugToNiceName(slug?: string, float = true) {
 	if (slug) {
@@ -76,6 +76,7 @@ export default function Settings({ trigger }: { trigger: JSX.Element }) {
 		queryKey: ['models'],
 		queryFn: getModels
 	})
+	const [language, setLanguage] = useState(i18n.language)
 	const [searchParams] = useSearchParams()
 	const [model, setModel] = useAtom(modelAtom)
 	const [systemPrompt, setSystemPrompt] = useAtom(systemPromptAtom)
@@ -321,10 +322,13 @@ export default function Settings({ trigger }: { trigger: JSX.Element }) {
 							Language
 						</Label>
 						<Select
-							value={i18n.language}
+							value={language}
 							name='language'
 							onValueChange={val => {
-								i18n.changeLanguage(val)
+								setLanguage(val)
+								i18n
+									.changeLanguage(val)
+									.catch((error_: unknown) => console.error(error_))
 							}}
 						>
 							<SelectTrigger className='min-w-[200px]'>

frontend/src/lib/i18n.ts

@@ -10,37 +10,27 @@ i18n
 			en: {
 				translation: {
 					'Chat Header': "Describe the UI you'd like to generate.",
-					'Pro Tip': 'Pro Tip: You can drag or paste a reference screenshot.',
-					'Language Selection': 'Select your preferred language',
-					'Language Updated': 'Language has been updated successfully'
+					'Pro Tip': 'Pro Tip: You can drag or paste a reference screenshot.'
 				}
 			},
 			ja: {
 				translation: {
 					'Chat Header': '生成したい UI について説明してください。',
 					'Pro Tip':
-						'ヒント: 参照したいスクリーンショットをドラッグ&ドロップできます。',
-					'Language Selection': '希望の言語を選択してください',
-					'Language Updated': '言語が正常に更新されました'
+						'ヒント: 参照したいスクリーンショットをドラッグ&ドロップできます。'
 				}
 			},
 			kr: {
 				translation: {
 					'Chat Header': '생성하고 싶은 UI에 대해 설명해주세요.',
 					'Pro Tip':
-						'프로 팁: 참조 스크린샷을 드래그 또는 붙여넣기할 수 있습니다.',
-					'Language Selection': '선호하는 언어를 선택하세요',
-					'Language Updated': '언어가 성공적으로 업데이트되었습니다'
+						'프로 팁: 참조 스크린샷을 드래그 또는 붙여넣기할 수 있습니다.'
 				}
 			}
 		},
 		fallbackLng: 'en',
 		interpolation: {
 			escapeValue: false
-		},
-		detection: {
-			order: ['localStorage', 'navigator'],
-			caches: ['localStorage']
 		}
 	})
 	// eslint-disable-next-line unicorn/prefer-top-level-await