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/components/app_shell.rs

@@ -1,6 +1,9 @@
 use dioxus::prelude::*;
+use dioxus_free_icons::icons::bs_icons::{BsList, BsX};
+use dioxus_free_icons::Icon;
 
 use crate::components::sidebar::Sidebar;
+use crate::i18n::{t, tw, Locale};
 use crate::infrastructure::auth_check::check_auth;
 use crate::models::AuthInfo;
 use crate::Route;
@@ -12,6 +15,9 @@ use crate::Route;
 /// sidebar with real user data and the active child route.
 #[component]
 pub fn AppShell() -> Element {
+    let locale = use_context::<Signal<Locale>>();
+    let mut mobile_menu_open = use_signal(|| false);
+
     // use_resource memoises the async call and avoids infinite re-render
     // loops that use_effect + spawn + signal writes can cause.
     #[allow(clippy::redundant_closure)]
@@ -23,12 +29,44 @@ pub fn AppShell() -> Element {
 
     match auth_snapshot {
         Some(Ok(info)) if info.authenticated => {
+            let menu_open = *mobile_menu_open.read();
+            let sidebar_cls = if menu_open {
+                "sidebar sidebar--open"
+            } else {
+                "sidebar"
+            };
+
             rsx! {
                 div { class: "app-shell",
+                    // Mobile top bar (visible only on small screens via CSS)
+                    header { class: "mobile-header",
+                        button {
+                            class: "mobile-menu-btn",
+                            onclick: move |_| {
+                                let current = *mobile_menu_open.read();
+                                mobile_menu_open.set(!current);
+                            },
+                            if menu_open {
+                                Icon { icon: BsX, width: 24, height: 24 }
+                            } else {
+                                Icon { icon: BsList, width: 24, height: 24 }
+                            }
+                        }
+                        span { class: "mobile-header-title", "CERTifAI" }
+                    }
+                    // Backdrop overlay when sidebar is open on mobile
+                    if menu_open {
+                        div {
+                            class: "sidebar-backdrop",
+                            onclick: move |_| mobile_menu_open.set(false),
+                        }
+                    }
                     Sidebar {
                         email: info.email,
                         name: info.name,
                         avatar_url: info.avatar_url,
+                        class: sidebar_cls,
+                        on_nav: move |_| mobile_menu_open.set(false),
                     }
                     main { class: "main-content", Outlet::<Route> {} }
                 }
@@ -40,16 +78,17 @@ pub fn AppShell() -> Element {
             nav.push(NavigationTarget::<Route>::External("/auth".into()));
             rsx! {
                 div { class: "app-shell loading",
-                    p { "Redirecting to login..." }
+                    p { {t(*locale.read(), "auth.redirecting_login")} }
                 }
             }
         }
         Some(Err(e)) => {
             let msg = e.to_string();
+            let error_text = tw(*locale.read(), "auth.auth_error", &[("msg", &msg)]);
             rsx! {
                 div { class: "auth-error",
-                    p { "Authentication error: {msg}" }
-                    a { href: "/auth", "Login" }
+                    p { {error_text} }
+                    a { href: "/auth", {t(*locale.read(), "common.login")} }
                 }
             }
         }
@@ -57,7 +96,7 @@ pub fn AppShell() -> Element {
             // Still loading.
             rsx! {
                 div { class: "app-shell loading",
-                    p { "Loading..." }
+                    p { {t(*locale.read(), "common.loading")} }
                 }
             }
         }