feat(i18n): add internationalization with DE, FR, ES, PT translations (#12)
All checks were successful
CI / Format (push) Successful in 3s
CI / Clippy (push) Successful in 3m4s
CI / Security Audit (push) Successful in 1m39s
CI / Tests (push) Successful in 4m26s
CI / Deploy (push) Successful in 5s

Add a compile-time i18n system with 270 translation keys across 5 locales
(EN, DE, FR, ES, PT). Translations are embedded via include_str! and parsed
lazily into flat HashMaps with English fallback for missing keys.

- Add src/i18n module with Locale enum, t()/tw() lookup functions, and tests
- Add JSON translation files for all 5 locales under assets/i18n/
- Provide locale Signal via Dioxus context in App, persisted to localStorage
- Replace all hardcoded UI strings across 33 component/page files
- Add compact locale picker (globe icon + ISO alpha-2 code) in sidebar header
- Add click-outside backdrop dismissal for locale dropdown

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-authored-by: Sharang Parnerkar <parnerkarsharang@gmail.com>
Reviewed-on: #12
This commit was merged in pull request #12.
This commit is contained in:
2026-02-22 16:48:51 +00:00
parent 50237f5377
commit d814e22f9d
43 changed files with 3015 additions and 383 deletions

View File

@@ -1,5 +1,6 @@
use dioxus::prelude::*;
use crate::i18n::{t, Locale};
use crate::models::AnalyticsMetric;
/// Analytics page placeholder for LangFuse integration.
@@ -8,7 +9,10 @@ use crate::models::AnalyticsMetric;
/// plus a mock stats bar showing sample metrics.
#[component]
pub fn AnalyticsPage() -> Element {
let metrics = mock_metrics();
let locale = use_context::<Signal<Locale>>();
let l = *locale.read();
let metrics = mock_metrics(l);
rsx! {
section { class: "placeholder-page",
@@ -25,39 +29,41 @@ pub fn AnalyticsPage() -> Element {
}
div { class: "placeholder-card",
div { class: "placeholder-icon", "L" }
h2 { "Analytics & Observability" }
h2 { "{t(l, \"developer.analytics_title\")}" }
p { class: "placeholder-desc",
"Monitor and analyze your AI pipelines with LangFuse. \
Track token usage, latency, costs, and quality metrics \
across all your deployments."
"{t(l, \"developer.analytics_desc\")}"
}
button { class: "btn-primary", disabled: true, "Launch LangFuse" }
span { class: "placeholder-badge", "Coming Soon" }
button { class: "btn-primary", disabled: true, "{t(l, \"developer.launch_analytics\")}" }
span { class: "placeholder-badge", "{t(l, \"common.coming_soon\")}" }
}
}
}
}
/// Returns mock analytics metrics for the stats bar.
fn mock_metrics() -> Vec<AnalyticsMetric> {
///
/// # Arguments
///
/// * `locale` - The current locale for translating metric labels
fn mock_metrics(locale: Locale) -> Vec<AnalyticsMetric> {
vec![
AnalyticsMetric {
label: "Total Requests".into(),
label: t(locale, "developer.total_requests"),
value: "12,847".into(),
change_pct: 14.2,
},
AnalyticsMetric {
label: "Avg Latency".into(),
label: t(locale, "developer.avg_latency"),
value: "245ms".into(),
change_pct: -8.5,
},
AnalyticsMetric {
label: "Tokens Used".into(),
label: t(locale, "developer.tokens_used"),
value: "2.4M".into(),
change_pct: 22.1,
},
AnalyticsMetric {
label: "Error Rate".into(),
label: t(locale, "developer.error_rate"),
value: "0.3%".into(),
change_pct: -12.0,
},