sharang/certifai
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Activity

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

Browse Source 
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:
Sharang Parnerkar
2026-02-22 16:48:51 +00:00
parent 50237f5377
commit d814e22f9d
43 changed files with 3015 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/pages/organization/dashboard.rs
View File

@@ -1,6 +1,7 @@
use dioxus::prelude::*;
use crate::components::{MemberRow, PageHeader};
use crate::i18n::{t, tw, Locale};
use crate::models::{BillingUsage, MemberRole, OrgMember};
/// Organization dashboard with billing stats, member table, and invite modal.
@@ -9,6 +10,9 @@ use crate::models::{BillingUsage, MemberRole, OrgMember};
/// with role management, and a button to invite new members.
#[component]
pub fn OrgDashboardPage() -> Element {
let locale = use_context::<Signal<Locale>>();
let l = *locale.read();
let members = use_signal(mock_members);
let usage = mock_usage();
let mut show_invite = use_signal(|| false);
@@ -23,10 +27,10 @@ pub fn OrgDashboardPage() -> Element {
rsx! {
section { class: "org-dashboard-page",
PageHeader {
title: "Organization".to_string(),
subtitle: "Manage members and billing".to_string(),
title: t(l, "org.title"),
subtitle: t(l, "org.subtitle"),
actions: rsx! {
button { class: "btn-primary", onclick: move |_| show_invite.set(true), "Invite Member" }
button { class: "btn-primary", onclick: move |_| show_invite.set(true), {t(l, "org.invite_member")} }
},
}
@@ -34,15 +38,15 @@ pub fn OrgDashboardPage() -> Element {
div { class: "org-stats-bar",
div { class: "org-stat",
span { class: "org-stat-value", "{usage.seats_used}/{usage.seats_total}" }
span { class: "org-stat-label", "Seats Used" }
span { class: "org-stat-label", {t(l, "org.seats_used")} }
}
div { class: "org-stat",
span { class: "org-stat-value", "{tokens_display}" }
span { class: "org-stat-label", "of {tokens_limit_display} tokens" }
span { class: "org-stat-label", {tw(l, "org.of_tokens", &[("limit", &tokens_limit_display)])} }
}
div { class: "org-stat",
span { class: "org-stat-value", "{usage.billing_cycle_end}" }
span { class: "org-stat-label", "Cycle Ends" }
span { class: "org-stat-label", {t(l, "org.cycle_ends")} }
}
}
@@ -51,10 +55,10 @@ pub fn OrgDashboardPage() -> Element {
table { class: "org-table",
thead {
tr {
th { "Name" }
th { "Email" }
th { "Role" }
th { "Joined" }
th { {t(l, "org.name")} }
th { {t(l, "org.email")} }
th { {t(l, "org.role")} }
th { {t(l, "org.joined")} }
}
}
tbody {
@@ -78,13 +82,13 @@ pub fn OrgDashboardPage() -> Element {
class: "modal-content",
// Prevent clicks inside modal from closing it
onclick: move |evt: Event<MouseData>| evt.stop_propagation(),
h3 { "Invite New Member" }
h3 { {t(l, "org.invite_title")} }
div { class: "form-group",
label { "Email Address" }
label { {t(l, "org.email_address")} }
input {
class: "form-input",
r#type: "email",
placeholder: "colleague@company.com",
placeholder: t(l, "org.email_placeholder"),
value: "{invite_email}",
oninput: move |evt: Event<FormData>| {
invite_email.set(evt.value());
@@ -95,12 +99,12 @@ pub fn OrgDashboardPage() -> Element {
button {
class: "btn-secondary",
onclick: move |_| show_invite.set(false),
"Cancel"
{t(l, "common.cancel")}
}
button {
class: "btn-primary",
onclick: move |_| show_invite.set(false),
"Send Invite"
{t(l, "org.send_invite")}
}
}
}

8
src/pages/organization/mod.rs
View File

@@ -8,6 +8,7 @@ use dioxus::prelude::*;
use crate::app::Route;
use crate::components::sub_nav::{SubNav, SubNavItem};
use crate::i18n::{t, Locale};
/// Shell layout for the Organization section.
///
@@ -15,13 +16,16 @@ use crate::components::sub_nav::{SubNav, SubNavItem};
/// the child route outlet. Sits inside the main `AppShell` layout.
#[component]
pub fn OrgShell() -> Element {
let locale = use_context::<Signal<Locale>>();
let l = *locale.read();
let tabs = vec![
SubNavItem {
label: "Pricing",
label: t(l, "nav.pricing"),
route: Route::OrgPricingPage {},
},
SubNavItem {
label: "Dashboard",
label: t(l, "nav.dashboard"),
route: Route::OrgDashboardPage {},
},
];

64
src/pages/organization/pricing.rs
View File

@@ -2,6 +2,7 @@ use dioxus::prelude::*;
use crate::app::Route;
use crate::components::{PageHeader, PricingCard};
use crate::i18n::{t, tw, Locale};
use crate::models::PricingPlan;
/// Organization pricing page displaying three plan tiers.
@@ -10,14 +11,17 @@ use crate::models::PricingPlan;
/// organization dashboard.
#[component]
pub fn OrgPricingPage() -> Element {
let locale = use_context::<Signal<Locale>>();
let l = *locale.read();
let navigator = use_navigator();
let plans = mock_plans();
let plans = mock_plans(l);
rsx! {
section { class: "pricing-page",
PageHeader {
title: "Pricing".to_string(),
subtitle: "Choose the plan that fits your organization".to_string(),
title: t(l, "org.pricing_title"),
subtitle: t(l, "org.pricing_subtitle"),
}
div { class: "pricing-grid",
for plan in plans {
@@ -34,52 +38,56 @@ pub fn OrgPricingPage() -> Element {
}
}
/// Returns mock pricing plans.
fn mock_plans() -> Vec<PricingPlan> {
/// Returns mock pricing plans with translated names and features.
///
/// # Arguments
///
/// * `l` - The active locale for translating user-facing plan text
fn mock_plans(l: Locale) -> Vec<PricingPlan> {
vec![
PricingPlan {
id: "starter".into(),
name: "Starter".into(),
name: t(l, "pricing.starter"),
price_eur: 49,
features: vec![
"Up to 5 users".into(),
"1 LLM provider".into(),
"100K tokens/month".into(),
"Community support".into(),
"Basic analytics".into(),
tw(l, "pricing.up_to_users", &[("n", "5")]),
t(l, "pricing.llm_provider_1"),
t(l, "pricing.tokens_100k"),
t(l, "pricing.community_support"),
t(l, "pricing.basic_analytics"),
],
highlighted: false,
max_seats: Some(5),
},
PricingPlan {
id: "team".into(),
name: "Team".into(),
name: t(l, "pricing.team"),
price_eur: 199,
features: vec![
"Up to 25 users".into(),
"All LLM providers".into(),
"1M tokens/month".into(),
"Priority support".into(),
"Advanced analytics".into(),
"Custom MCP tools".into(),
"SSO integration".into(),
tw(l, "pricing.up_to_users", &[("n", "25")]),
t(l, "pricing.all_providers"),
t(l, "pricing.tokens_1m"),
t(l, "pricing.priority_support"),
t(l, "pricing.advanced_analytics"),
t(l, "pricing.custom_mcp"),
t(l, "pricing.sso"),
],
highlighted: true,
max_seats: Some(25),
},
PricingPlan {
id: "enterprise".into(),
name: "Enterprise".into(),
name: t(l, "pricing.enterprise"),
price_eur: 499,
features: vec![
"Unlimited users".into(),
"All LLM providers".into(),
"Unlimited tokens".into(),
"Dedicated support".into(),
"Full observability".into(),
"Custom integrations".into(),
"SLA guarantee".into(),
"On-premise deployment".into(),
t(l, "pricing.unlimited_users"),
t(l, "pricing.all_providers"),
t(l, "pricing.unlimited_tokens"),
t(l, "pricing.dedicated_support"),
t(l, "pricing.full_observability"),
t(l, "pricing.custom_integrations"),
t(l, "pricing.sla"),
t(l, "pricing.on_premise"),
],
highlighted: false,
max_seats: None,