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/organization/dashboard.rs

@@ -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")}
                             }
                         }
                     }