url/colibri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: i18n support — English, 简体中文, 繁體中文, Italiano

Browse Source 
Lightweight i18n without react-i18next: a LocaleProvider context +
useLocale() hook with {{var}} interpolation, auto-detect from
navigator.language, persisted to localStorage.

98 translation keys across 4 locale files (en/zh-CN/zh-TW/it).
All user-visible strings in App/Brain/Profiling/ErrorBoundary are
now t() calls. Language switcher added to the sidebar footer.

Build clean (tsc + vite), 18 tests pass.
This commit is contained in:
ZacharyZcR
2026-07-19 04:22:46 +08:00
parent 420a0720c3
commit e486574442
11 changed files with 675 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/ErrorBoundary.tsx
+15 -6
View File
@@ -1,4 +1,18 @@
import { Component, type ReactNode } from "react"
import { useLocale } from "./i18n"
function ErrorFallback({ error, onRetry }: { error: Error; onRetry: () => void }) {
const { t } = useLocale()
return (
<div style={{ padding: "2rem", fontFamily: "ui-monospace, monospace", color: "#e5e7eb", background: "#0b0f10", minHeight: "100vh" }}>
<h2 style={{ color: "#4ed6a5" }}>{t("error.title")}</h2>
<p style={{ color: "#9ca3af" }}>{t("error.hint")}</p>
<pre style={{ whiteSpace: "pre-wrap", color: "#f87171" }}>{String(error)}</pre>
<button onClick={onRetry} style={{ marginTop: "1rem", padding: "0.5rem 1rem", background: "#1f2937", color: "#e5e7eb", border: "1px solid #374151", borderRadius: 8, cursor: "pointer" }}>{t("error.retry")}</button>
</div>
)
}
interface State { error: Error | null; stack: string }
export class ErrorBoundary extends Component<{ children: ReactNode }, State> {
state: State = { error: null, stack: "" }
@@ -9,11 +23,6 @@ export class ErrorBoundary extends Component<{ children: ReactNode }, State> {
}
render() {
if (!this.state.error) return this.props.children
return <div style={{ padding: "2rem", fontFamily: "ui-monospace, monospace", color: "#e5e7eb", background: "#0b0f10", minHeight: "100vh" }}>
<h2 style={{ color: "#4ed6a5" }}>colibrì UI hit an error</h2>
<p style={{ color: "#9ca3af" }}>The engine is unaffected. Try refreshing.</p>
<pre style={{ whiteSpace: "pre-wrap", color: "#f87171" }}>{String(this.state.error)}</pre>
<button onClick={() => this.setState({ error: null, stack: "" })} style={{ marginTop: "1rem", padding: "0.5rem 1rem", background: "#1f2937", color: "#e5e7eb", border: "1px solid #374151", borderRadius: 8, cursor: "pointer" }}>Retry</button>
</div>
return <ErrorFallback error={this.state.error} onRetry={() => this.setState({ error: null, stack: "" })} />
}
}