Implement React Context for translation management to enable dynamic translation loading in VS Code views

Author: robertpiosik

packages/vscode/src/views/i18n/TranslationContext.tsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+export const TranslationContext = createContext<
+  Record<string, Record<string, string>>
+>({})

packages/vscode/src/i18n/translations.ts …es/vscode/src/views/i18n/translations.tspackages/vscode/src/i18n/translations.ts renamed to packages/vscode/src/views/i18n/translations.ts packages/vscode/src/i18n/translations.ts renamed to packages/vscode/src/views/i18n/translations.ts

@@ -1,14 +1,18 @@
-import { translations } from '@/i18n/translations'
+import { useContext } from 'react'
+import { translations } from '@/views/i18n/translations'
+import { TranslationContext } from '@/views/i18n/TranslationContext'
 
 export type TranslationKey = keyof (typeof translations)['en']
 
 export const use_translation = () => {
   let lang = document.documentElement.lang || 'en'
+  const context_translations = useContext(TranslationContext)
 
-  const translations_record = translations as Record<
-    string,
-    Record<string, string>
-  >
+  const translations_record = (
+    Object.keys(context_translations).length > 0
+      ? context_translations
+      : translations
+  ) as Record<string, Record<string, string>>
 
   // Fallback to generic language code if specific locale not found (e.g. 'pl-PL' -> 'pl')
   if (!translations_record[lang]) {

…kages/vscode/src/i18n/use-translation.ts …vscode/src/views/i18n/use-translation.tspackages/vscode/src/i18n/use-translation.ts renamed to packages/vscode/src/views/i18n/use-translation.ts packages/vscode/src/i18n/use-translation.ts renamed to packages/vscode/src/views/i18n/use-translation.ts

@@ -1,12 +1,18 @@
 import ReactDOM from 'react-dom/client'
 import { Panel } from './Panel'
+import { translations } from '@/views/i18n/translations'
+import { TranslationContext } from '@/views/i18n/TranslationContext'
 
 import '@vscode/codicons/dist/codicon.css'
 import 'simplebar-react/dist/simplebar.min.css'
 import '@ui/styles/global.scss'
 
 const App = () => {
-  return <Panel />
+  return (
+    <TranslationContext.Provider value={translations}>
+      <Panel />
+    </TranslationContext.Provider>
+  )
 }
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)

packages/vscode/src/views/panel/frontend/App.tsx

@@ -8,7 +8,7 @@ import { Checkpoint, FrontendMessage } from '@/views/panel/types/messages'
 import { Responses as UiResponses } from '@ui/components/editor/panel/Responses'
 import { ResponseHistoryItem } from '@shared/types/response-history-item'
 import { Separator } from '@ui/components/editor/panel/Separator'
-import { use_translation } from '@/i18n/use-translation'
+import { use_translation } from '@/views/i18n/use-translation'
 
 type Props = {
   vscode: any

packages/vscode/src/views/panel/frontend/Home/Home.tsx

@@ -8,7 +8,7 @@ import { IconButton as UiIconButton } from '@ui/components/editor/panel/IconButt
 import styles from './Header.module.scss'
 import { api_mode_labels, web_mode_labels } from '../../modes'
 import { use_keyboard_shortcuts } from './hooks/use-keyboard-shortcuts'
-import { use_translation } from '@/i18n/use-translation'
+import { use_translation } from '@/views/i18n/use-translation'
 
 type Props = {
   mode: Mode

packages/vscode/src/views/panel/frontend/Main/MainView/components/Header/Header.tsx

@@ -1,12 +1,18 @@
 import ReactDOM from 'react-dom/client'
 import { Settings } from './Settings'
+import { translations } from '@/views/i18n/translations'
+import { TranslationContext } from '@/views/i18n/TranslationContext'
 
 import '@vscode/codicons/dist/codicon.css'
 import 'simplebar-react/dist/simplebar.min.css'
 import '@ui/styles/global.scss'
 
 const App = () => {
-  return <Settings />
+  return (
+    <TranslationContext.Provider value={translations}>
+      <Settings />
+    </TranslationContext.Provider>
+  )
 }
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)

packages/vscode/src/views/settings/frontend/App.tsx

@@ -16,7 +16,7 @@ import {
 } from '@/views/settings/types/messages'
 import { GeneralSection } from './sections/GeneralSection'
 import { PresetsSection } from './sections/PresetsSection'
-import { use_translation, TranslationKey } from '@/i18n/use-translation'
+import { use_translation, TranslationKey } from '@/views/i18n/use-translation'
 
 type NavItem =
   | 'general'