feat(i18n): add internationalization with DE, FR, ES, PT translations (#12)

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

src/pages/developer/agents.rs

@@ -1,23 +1,26 @@
 use dioxus::prelude::*;
 
+use crate::i18n::{t, Locale};
+
 /// Agents page placeholder for the LangGraph agent builder.
 ///
 /// Shows a "Coming Soon" card with a disabled launch button.
 /// Will eventually integrate with the LangGraph framework.
 #[component]
 pub fn AgentsPage() -> Element {
+    let locale = use_context::<Signal<Locale>>();
+    let l = *locale.read();
+
     rsx! {
         section { class: "placeholder-page",
             div { class: "placeholder-card",
                 div { class: "placeholder-icon", "A" }
-                h2 { "Agent Builder" }
+                h2 { "{t(l, \"developer.agents_title\")}" }
                 p { class: "placeholder-desc",
-                    "Build and manage AI agents with LangGraph. \
-                    Create multi-step reasoning pipelines, tool-using agents, \
-                    and autonomous workflows."
+                    "{t(l, \"developer.agents_desc\")}"
                 }
-                button { class: "btn-primary", disabled: true, "Launch Agent Builder" }
-                span { class: "placeholder-badge", "Coming Soon" }
+                button { class: "btn-primary", disabled: true, "{t(l, \"developer.launch_agents\")}" }
+                span { class: "placeholder-badge", "{t(l, \"common.coming_soon\")}" }
             }
         }
     }

src/pages/developer/analytics.rs

@@ -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,
         },

src/pages/developer/flow.rs

@@ -1,23 +1,26 @@
 use dioxus::prelude::*;
 
+use crate::i18n::{t, Locale};
+
 /// Flow page placeholder for the LangFlow visual workflow builder.
 ///
 /// Shows a "Coming Soon" card with a disabled launch button.
 /// Will eventually integrate with LangFlow for visual flow design.
 #[component]
 pub fn FlowPage() -> Element {
+    let locale = use_context::<Signal<Locale>>();
+    let l = *locale.read();
+
     rsx! {
         section { class: "placeholder-page",
             div { class: "placeholder-card",
                 div { class: "placeholder-icon", "F" }
-                h2 { "Flow Builder" }
+                h2 { "{t(l, \"developer.flow_title\")}" }
                 p { class: "placeholder-desc",
-                    "Design visual AI workflows with LangFlow. \
-                    Drag-and-drop nodes to create data processing pipelines, \
-                    prompt chains, and integration flows."
+                    "{t(l, \"developer.flow_desc\")}"
                 }
-                button { class: "btn-primary", disabled: true, "Launch Flow Builder" }
-                span { class: "placeholder-badge", "Coming Soon" }
+                button { class: "btn-primary", disabled: true, "{t(l, \"developer.launch_flow\")}" }
+                span { class: "placeholder-badge", "{t(l, \"common.coming_soon\")}" }
             }
         }
     }

src/pages/developer/mod.rs

@@ -10,6 +10,7 @@ use dioxus::prelude::*;
 
 use crate::app::Route;
 use crate::components::sub_nav::{SubNav, SubNavItem};
+use crate::i18n::{t, Locale};
 
 /// Shell layout for the Developer section.
 ///
@@ -17,17 +18,20 @@ use crate::components::sub_nav::{SubNav, SubNavItem};
 /// the child route outlet. Sits inside the main `AppShell` layout.
 #[component]
 pub fn DeveloperShell() -> Element {
+    let locale = use_context::<Signal<Locale>>();
+    let l = *locale.read();
+
     let tabs = vec![
         SubNavItem {
-            label: "Agents",
+            label: t(l, "nav.agents"),
             route: Route::AgentsPage {},
         },
         SubNavItem {
-            label: "Flow",
+            label: t(l, "nav.flow"),
             route: Route::FlowPage {},
         },
         SubNavItem {
-            label: "Analytics",
+            label: t(l, "nav.analytics"),
             route: Route::AnalyticsPage {},
         },
     ];