ars9/liqa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(client): add i18n with i18next and react-i18next

Browse Source 
- install i18next and react-i18next
- create src/i18n/index.ts bootstrapping i18next with initReactI18next
- add src/i18n/locales/en.json with keys for nav, all pages, and ThemeSwitcher
- replace hardcoded English strings in App, all pages, and ThemeSwitcher with t()
- move static column definitions inside components where useTranslation is available
This commit is contained in:
ars9
2026-04-09 10:03:54 +03:00
parent aefa1db2bd
commit 876b1518da
11 changed files with 207 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/EnvironmentsPage.tsx
+24 -22
View File
@@ -1,34 +1,36 @@
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { environments } from '../api';
import type { Environment } from '../api';
import { Table, type TableColumn } from '../ui';
import styles from './Page.module.css';
const columns: TableColumn<Environment>[] = [
{ key: 'id', header: 'ID', render: (e) => e.id, width: 60 },
{ key: 'name', header: 'Name', render: (e) => e.name },
{
key: 'urls',
header: 'URLs',
render: (e) =>
Object.entries(e.urls)
.filter(([, v]) => v)
.map(([k, v]) => `${k}: ${v}`)
.join(' · ') || '—',
},
{
key: 'updated',
header: 'Updated',
width: 120,
render: (e) => new Date(e.updatedAt).toLocaleDateString(),
},
];
export function EnvironmentsPage() {
const { t } = useTranslation();
const [items, setItems] = useState<Environment[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const columns: TableColumn<Environment>[] = [
{ key: 'id', header: t('environments.col_id'), render: (e) => e.id, width: 60 },
{ key: 'name', header: t('environments.col_name'), render: (e) => e.name },
{
key: 'urls',
header: t('environments.col_urls'),
render: (e) =>
Object.entries(e.urls)
.filter(([, v]) => v)
.map(([k, v]) => `${k}: ${v}`)
.join(' · ') || '—',
},
{
key: 'updated',
header: t('environments.col_updated'),
width: 120,
render: (e) => new Date(e.updatedAt).toLocaleDateString(),
},
];
useEffect(() => {
setLoading(true);
environments.list()
@@ -39,14 +41,14 @@ export function EnvironmentsPage() {
return (
<div>
<h1 className={styles.heading}>Environments</h1>
<h1 className={styles.heading}>{t('environments.title')}</h1>
{error && <p className={styles.error}>{error}</p>}
<Table
columns={columns}
data={items}
rowKey={(e) => e.id}
loading={loading}
emptyMessage="No environments yet."
emptyMessage={t('environments.empty')}
/>
</div>
);
client/src/pages/KeysPage.tsx
+8 -6
View File
@@ -1,19 +1,21 @@
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { keys } from '../api';
import { Table, type TableColumn } from '../ui';
import styles from './Page.module.css';
interface KeyRow { name: string }
const columns: TableColumn<KeyRow>[] = [
{ key: 'name', header: 'Key name', render: (k) => k.name },
];
export function KeysPage() {
const { t } = useTranslation();
const [items, setItems] = useState<KeyRow[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const columns: TableColumn<KeyRow>[] = [
{ key: 'name', header: t('keys.col_name'), render: (k) => k.name },
];
useEffect(() => {
setLoading(true);
keys.list()
@@ -24,14 +26,14 @@ export function KeysPage() {
return (
<div>
<h1 className={styles.heading}>Keys</h1>
<h1 className={styles.heading}>{t('keys.title')}</h1>
{error && <p className={styles.error}>{error}</p>}
<Table
columns={columns}
data={items}
rowKey={(k) => k.name}
loading={loading}
emptyMessage="No key files found."
emptyMessage={t('keys.empty')}
/>
</div>
);
client/src/pages/ScenariosPage.tsx
+9 -7
View File
@@ -1,10 +1,12 @@
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { scenarios } from '../api';
import type { Scenario } from '../api';
import { Button, Table, type TableColumn } from '../ui';
import styles from './Page.module.css';
export function ScenariosPage() {
const { t } = useTranslation();
const [items, setItems] = useState<Scenario[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -29,11 +31,11 @@ export function ScenariosPage() {
};
const columns: TableColumn<Scenario>[] = [
{ key: 'id', header: 'ID', render: (s) => s.id, width: 60 },
{ key: 'name', header: 'Name', render: (s) => s.name },
{ key: 'id', header: t('scenarios.col_id'), render: (s) => s.id, width: 60 },
{ key: 'name', header: t('scenarios.col_name'), render: (s) => s.name },
{
key: 'updated',
header: 'Updated',
header: t('scenarios.col_updated'),
width: 120,
render: (s) => new Date(s.updatedAt).toLocaleDateString(),
},
@@ -44,8 +46,8 @@ export function ScenariosPage() {
align: 'right',
render: (s) => (
<span style={{ display: 'inline-flex', gap: 6 }}>
<Button size="sm" onClick={() => handleRun(s.id)}>Run</Button>
<Button variant="secondary" size="sm" onClick={() => handleDelete(s.id)}>Delete</Button>
<Button size="sm" onClick={() => handleRun(s.id)}>{t('scenarios.action_run')}</Button>
<Button variant="secondary" size="sm" onClick={() => handleDelete(s.id)}>{t('scenarios.action_delete')}</Button>
</span>
),
},
@@ -53,14 +55,14 @@ export function ScenariosPage() {
return (
<div>
<h1 className={styles.heading}>Scenarios</h1>
<h1 className={styles.heading}>{t('scenarios.title')}</h1>
{error && <p className={styles.error}>{error}</p>}
<Table
columns={columns}
data={items}
rowKey={(s) => s.id}
loading={loading}
emptyMessage="No scenarios yet."
emptyMessage={t('scenarios.empty')}
/>
</div>
);
client/src/pages/SessionsPage.tsx
+9 -7
View File
@@ -1,10 +1,12 @@
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { sessions } from '../api';
import type { Session } from '../api';
import { Badge, Button, Table, type TableColumn } from '../ui';
import styles from './Page.module.css';
export function SessionsPage() {
const { t } = useTranslation();
const [items, setItems] = useState<Session[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -25,11 +27,11 @@ export function SessionsPage() {
};
const columns: TableColumn<Session>[] = [
{ key: 'id', header: 'ID', render: (s) => s.id, width: 60 },
{ key: 'name', header: 'Name', render: (s) => s.sessionName },
{ key: 'id', header: t('sessions.col_id'), render: (s) => s.id, width: 60 },
{ key: 'name', header: t('sessions.col_name'), render: (s) => s.sessionName },
{
key: 'status',
header: 'Status',
header: t('sessions.col_status'),
width: 100,
render: (s) => (
<Badge variant={s.status === 'open' ? 'success' : 'neutral'}>
@@ -39,7 +41,7 @@ export function SessionsPage() {
},
{
key: 'lastUsed',
header: 'Last Used',
header: t('sessions.col_lastUsed'),
width: 160,
render: (s) => s.lastUsedAt ? new Date(s.lastUsedAt).toLocaleString() : '—',
},
@@ -50,7 +52,7 @@ export function SessionsPage() {
align: 'right',
render: (s) => (
<Button variant="secondary" size="sm" onClick={() => handleDelete(s.id)}>
Delete
{t('sessions.action_delete')}
</Button>
),
},
@@ -58,14 +60,14 @@ export function SessionsPage() {
return (
<div>
<h1 className={styles.heading}>Sessions</h1>
<h1 className={styles.heading}>{t('sessions.title')}</h1>
{error && <p className={styles.error}>{error}</p>}
<Table
columns={columns}
data={items}
rowKey={(s) => s.id}
loading={loading}
emptyMessage="No sessions yet."
emptyMessage={t('sessions.empty')}
/>
</div>
);