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,6 +1,7 @@
use dioxus::prelude::*;
use crate::components::PageHeader;
use crate::i18n::{t, Locale};
use crate::models::{EmbeddingEntry, LlmProvider, ModelEntry, ProviderConfig};
/// Providers page for configuring LLM and embedding model backends.
@@ -9,6 +10,9 @@ use crate::models::{EmbeddingEntry, LlmProvider, ModelEntry, ProviderConfig};
/// shows the currently active provider status.
#[component]
pub fn ProvidersPage() -> Element {
let locale = use_context::<Signal<Locale>>();
let l = *locale.read();
let mut selected_provider = use_signal(|| LlmProvider::Ollama);
let mut selected_model = use_signal(|| "llama3.1:8b".to_string());
let mut selected_embedding = use_signal(|| "nomic-embed-text".to_string());
@@ -39,13 +43,13 @@ pub fn ProvidersPage() -> Element {
rsx! {
section { class: "providers-page",
PageHeader {
title: "Providers".to_string(),
subtitle: "Configure your LLM and embedding backends".to_string(),
title: t(l, "providers.title"),
subtitle: t(l, "providers.subtitle"),
}
div { class: "providers-layout",
div { class: "providers-form",
div { class: "form-group",
label { "Provider" }
label { "{t(l, \"providers.provider\")}" }
select {
class: "form-select",
value: "{provider_val.label()}",
@@ -67,7 +71,7 @@ pub fn ProvidersPage() -> Element {
}
}
div { class: "form-group",
label { "Model" }
label { "{t(l, \"providers.model\")}" }
select {
class: "form-select",
value: "{selected_model}",
@@ -81,7 +85,7 @@ pub fn ProvidersPage() -> Element {
}
}
div { class: "form-group",
label { "Embedding Model" }
label { "{t(l, \"providers.embedding_model\")}" }
select {
class: "form-select",
value: "{selected_embedding}",
@@ -95,11 +99,11 @@ pub fn ProvidersPage() -> Element {
}
}
div { class: "form-group",
label { "API Key" }
label { "{t(l, \"providers.api_key\")}" }
input {
class: "form-input",
r#type: "password",
placeholder: "Enter API key...",
placeholder: "{t(l, \"providers.api_key_placeholder\")}",
value: "{api_key}",
oninput: move |evt: Event<FormData>| {
api_key.set(evt.value());
@@ -110,34 +114,34 @@ pub fn ProvidersPage() -> Element {
button {
class: "btn-primary",
onclick: move |_| saved.set(true),
"Save Configuration"
"{t(l, \"providers.save_config\")}"
}
if *saved.read() {
p { class: "form-success", "Configuration saved." }
p { class: "form-success", "{t(l, \"providers.config_saved\")}" }
}
}
div { class: "providers-status",
h3 { "Active Configuration" }
h3 { "{t(l, \"providers.active_config\")}" }
div { class: "status-card",
div { class: "status-row",
span { class: "status-label", "Provider" }
span { class: "status-label", "{t(l, \"providers.provider\")}" }
span { class: "status-value", "{active_config.provider.label()}" }
}
div { class: "status-row",
span { class: "status-label", "Model" }
span { class: "status-label", "{t(l, \"providers.model\")}" }
span { class: "status-value", "{active_config.selected_model}" }
}
div { class: "status-row",
span { class: "status-label", "Embedding" }
span { class: "status-label", "{t(l, \"providers.embedding\")}" }
span { class: "status-value", "{active_config.selected_embedding}" }
}
div { class: "status-row",
span { class: "status-label", "API Key" }
span { class: "status-label", "{t(l, \"providers.api_key\")}" }
span { class: "status-value",
if active_config.api_key_set {
"Set"
"{t(l, \"common.set\")}"
} else {
"Not set"
"{t(l, \"common.not_set\")}"
}
}
}