Skip to content

Commit e0a0b6d

Browse files
robertpiosikrobertpiosik
committed
Refactor internationalization i18n setup by moving use-translation.ts and adding new sidebar translation keys for settings views
1 parent d1cc554 commit e0a0b6d

7 files changed

Lines changed: 79 additions & 55 deletions

File tree

‎packages/vscode/src/i18n/translations.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,15 @@ export const translations = {
22
en: {
33
'panel.header.settings': 'Settings',
44
'panel.header.prompt-type': 'Prompt type',
5-
'settings.sidebar.settings': 'Settings'
5+
'settings.sidebar.settings': 'Settings',
6+
'settings.sidebar.general': 'General',
7+
'settings.sidebar.presets': 'Presets',
8+
'settings.sidebar.model-providers': 'Model Providers',
9+
'settings.sidebar.api-tools': 'API Tools',
10+
'settings.sidebar.edit-context': 'Edit Context',
11+
'settings.sidebar.code-completions': 'Code Completions',
12+
'settings.sidebar.intelligent-update': 'Intelligent Update',
13+
'settings.sidebar.commit-messages': 'Commit Messages'
614
},
715
pl: {
816
'panel.header.settings': 'Ustawienia',

packages/vscode/src/views/panel/frontend/hooks/use-translation.ts renamed to packages/vscode/src/i18n/use-translation.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { translations } from '@/i18n/translations'
22

3-
type TranslationKey = keyof (typeof translations)['en']
3+
export type TranslationKey = keyof (typeof translations)['en']
44

55
export const use_translation = () => {
66
let lang = document.documentElement.lang || 'en'

‎packages/vscode/src/views/panel/backend/panel-provider.ts‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -897,29 +897,27 @@ export class PanelProvider implements vscode.WebviewViewProvider {
897897
vscode.Uri.joinPath(this.extension_uri, 'out', 'view.css')
898898
)
899899

900-
return `
901-
<!DOCTYPE html>
902-
<html lang="${vscode.env.language}">
903-
<head>
904-
<meta charset="UTF-8">
905-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
906-
<link rel="stylesheet" href="${style_uri}">
907-
<link rel="preconnect" href="https://fonts.googleapis.com">
908-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
909-
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
910-
<script>
911-
window.resources_uri = "${resources_uri}";
912-
</script>
913-
<style>
914-
body { overflow: hidden; }
915-
</style>
916-
</head>
917-
<body>
918-
<div id="root"></div>
919-
<script src="${script_uri}"></script>
920-
</body>
921-
</html>
922-
`
900+
return `<!DOCTYPE html>
901+
<html lang="${vscode.env.language}">
902+
<head>
903+
<meta charset="UTF-8">
904+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
905+
<link rel="stylesheet" href="${style_uri}">
906+
<link rel="preconnect" href="https://fonts.googleapis.com">
907+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
908+
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
909+
<script>
910+
window.resources_uri = "${resources_uri}";
911+
</script>
912+
<style>
913+
body { overflow: hidden; }
914+
</style>
915+
</head>
916+
<body>
917+
<div id="root"></div>
918+
<script src="${script_uri}"></script>
919+
</body>
920+
</html>`
923921
}
924922

925923
public add_text_at_cursor_position(text: string, chars_to_remove_before = 0) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { Checkpoint, FrontendMessage } from '@/views/panel/types/messages'
88
import { Responses as UiResponses } from '@ui/components/editor/panel/Responses'
99
import { ResponseHistoryItem } from '@shared/types/response-history-item'
1010
import { Separator } from '@ui/components/editor/panel/Separator'
11-
import { use_translation } from '@/views/panel/frontend/hooks/use-translation'
11+
import { use_translation } from '@/i18n/use-translation'
1212

1313
type Props = {
1414
vscode: any

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { IconButton as UiIconButton } from '@ui/components/editor/panel/IconButt
88
import styles from './Header.module.scss'
99
import { api_mode_labels, web_mode_labels } from '../../modes'
1010
import { use_keyboard_shortcuts } from './hooks/use-keyboard-shortcuts'
11-
import { use_translation } from '@/views/panel/frontend/hooks/use-translation'
11+
import { use_translation } from '@/i18n/use-translation'
1212

1313
type Props = {
1414
mode: Mode

‎packages/vscode/src/views/settings/backend/settings-provider.ts‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -272,20 +272,18 @@ export class SettingsProvider {
272272
vscode.Uri.joinPath(this._extensionUri, 'out', 'settings.css')
273273
)
274274

275-
return `
276-
<!DOCTYPE html>
277-
<html lang="en">
278-
<head>
279-
<meta charset="UTF-8">
280-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
281-
<link rel="stylesheet" href="${styleUri}">
282-
<title>Settings</title>
283-
</head>
284-
<body>
285-
<div id="root"></div>
286-
<script src="${scriptUri}"></script>
287-
</body>
288-
</html>
289-
`
275+
return `<!DOCTYPE html>
276+
<html lang="${vscode.env.language}">
277+
<head>
278+
<meta charset="UTF-8">
279+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
280+
<link rel="stylesheet" href="${styleUri}">
281+
<title>Settings</title>
282+
</head>
283+
<body>
284+
<div id="root"></div>
285+
<script src="${scriptUri}"></script>
286+
</body>
287+
</html>`
290288
}
291289
}

‎packages/vscode/src/views/settings/frontend/Home/Home.tsx‎

Lines changed: 33 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
} from '@/views/settings/types/messages'
1717
import { GeneralSection } from './sections/GeneralSection'
1818
import { PresetsSection } from './sections/PresetsSection'
19+
import { use_translation, TranslationKey } from '@/i18n/use-translation'
1920

2021
type NavItem =
2122
| 'general'
@@ -27,30 +28,42 @@ type NavItem =
2728
| 'commit-messages'
2829

2930
type NavConfigItem =
30-
| { type: 'item'; id: NavItem; label: string }
31-
| { type: 'divider'; text?: string }
31+
| { type: 'item'; id: NavItem; label: TranslationKey }
32+
| { type: 'divider'; text?: TranslationKey }
3233

3334
const NAV_ITEMS_CONFIG: NavConfigItem[] = [
3435
{
3536
type: 'item',
3637
id: 'general',
37-
label: 'General'
38+
label: 'settings.sidebar.general'
3839
},
3940
{
4041
type: 'item',
4142
id: 'presets',
42-
label: 'Presets'
43+
label: 'settings.sidebar.presets'
4344
},
4445
{
4546
type: 'item',
4647
id: 'model-providers',
47-
label: 'Model Providers'
48+
label: 'settings.sidebar.model-providers'
4849
},
49-
{ type: 'divider', text: 'API Tools' },
50-
{ type: 'item', id: 'edit-context', label: 'Edit Context' },
51-
{ type: 'item', id: 'code-completions', label: 'Code Completions' },
52-
{ type: 'item', id: 'intelligent-update', label: 'Intelligent Update' },
53-
{ type: 'item', id: 'commit-messages', label: 'Commit Messages' }
50+
{ type: 'divider', text: 'settings.sidebar.api-tools' },
51+
{ type: 'item', id: 'edit-context', label: 'settings.sidebar.edit-context' },
52+
{
53+
type: 'item',
54+
id: 'code-completions',
55+
label: 'settings.sidebar.code-completions'
56+
},
57+
{
58+
type: 'item',
59+
id: 'intelligent-update',
60+
label: 'settings.sidebar.intelligent-update'
61+
},
62+
{
63+
type: 'item',
64+
id: 'commit-messages',
65+
label: 'settings.sidebar.commit-messages'
66+
}
5467
]
5568

5669
type Props = {
@@ -106,6 +119,8 @@ type Props = {
106119
}
107120

108121
export const Home: React.FC<Props> = (props) => {
122+
const { t } = use_translation()
123+
109124
const scroll_container_ref = useRef<HTMLDivElement>(null)
110125
const section_refs = useRef<Record<NavItem, HTMLDivElement | null>>({
111126
general: null,
@@ -241,17 +256,22 @@ export const Home: React.FC<Props> = (props) => {
241256
<div style={{ height: '100vh' }}>
242257
<Layout
243258
ref={scroll_container_ref}
244-
title="Settings"
259+
title={t('settings.sidebar.settings')}
245260
sidebar={NAV_ITEMS_CONFIG.map((item, i) => {
246261
if (item.type == 'divider') {
247-
return <NavigationDivider key={i} text={item.text} />
262+
return (
263+
<NavigationDivider
264+
key={i}
265+
text={item.text ? t(item.text) : undefined}
266+
/>
267+
)
248268
}
249269

250270
return (
251271
<NavigationItem
252272
key={i}
253273
href={`#${item.id}`}
254-
label={item.label}
274+
label={t(item.label)}
255275
is_active={item.id === active_nav_item_id}
256276
on_click={(e) => handle_nav_click(e, item.id)}
257277
/>

0 commit comments

Comments
 (0)