From 3ea751640c8875c86fbcb84e3a8a5134821dc6ec Mon Sep 17 00:00:00 2001
From: Felipe Contreras Salinas <felipe@bstr.cl>
Date: Sat, 15 Mar 2025 21:44:33 -0300
Subject: [PATCH] chore: persist selected language

---
 README.md                      |  5 +++--
 locales/en/main.ftl            |  2 +-
 locales/es/main.ftl            |  2 +-
 src/components/calculator.rs   |  2 +-
 src/components/localization.rs | 18 ++++++++++++------
 5 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index f244c92..9509754 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,7 @@ cargo install leptosfmt
 
 To develop the project, run
 ```sh
-trunk serve --port 3000 --open
+trunk serve --open
 ```
 which, will open the app in your default browser at `http://localhost:3000`.
 
@@ -30,7 +30,8 @@ To build the project for release, use the command
 ```sh
 trunk build --release
 ```
-This will output the files necessary to run your app into the `dist` folder; you can then use any static site host to serve these files.
+This will output the files necessary to run your app into the `dist` folder; you can
+then use any static site host to serve these files.
 
 [Leptos]: https://github.com/leptos-rs/leptos
 [Rustup]: https://rustup.rs/
diff --git a/locales/en/main.ftl b/locales/en/main.ftl
index ef3b336..9e3759f 100644
--- a/locales/en/main.ftl
+++ b/locales/en/main.ftl
@@ -3,4 +3,4 @@ title = Hypergeometric Distribution Calculator
 population = Population Size
 successes = Successes in Population
 sample = Sample Size
-sample_successes = Successes in Sample
+sample-successes = Successes in Sample
diff --git a/locales/es/main.ftl b/locales/es/main.ftl
index ac1aaa8..35663c2 100644
--- a/locales/es/main.ftl
+++ b/locales/es/main.ftl
@@ -3,4 +3,4 @@ title = Calculadora Distribución Hipergeométrica
 population = Tamaño población
 successes =  Éxitos en la población
 sample = Tamaño de la muestra
-sample_successes = Éxitos en la muestra
+sample-successes = Éxitos en la muestra
diff --git a/src/components/calculator.rs b/src/components/calculator.rs
index 8211455..7c9a4e9 100644
--- a/src/components/calculator.rs
+++ b/src/components/calculator.rs
@@ -65,7 +65,7 @@ pub fn Calculator() -> impl IntoView {
                 />
             </p>
             <p>
-                <label for="sample_successes">{move_tr!("sample_successes")}</label>
+                <label for="sample_successes">{move_tr!("sample-successes")}</label>
                 <input
                     id="sample_successes"
                     type="number"
diff --git a/src/components/localization.rs b/src/components/localization.rs
index b09fed9..6d1b163 100644
--- a/src/components/localization.rs
+++ b/src/components/localization.rs
@@ -2,7 +2,9 @@
 
 use fluent_templates::static_loader;
 use leptos::html::ElementChild;
-use leptos::prelude::{Children, GlobalAttributes, OnAttribute, PropAttribute, Set};
+use leptos::prelude::{
+    AddAnyAttr, Children, Get, GlobalAttributes, IntoAttribute, OnAttribute, PropAttribute, Set,
+};
 use leptos::{IntoView, component, view};
 use leptos_fluent::{Language, expect_i18n, leptos_fluent};
 
@@ -21,6 +23,10 @@ pub fn I18n(children: Children) -> impl IntoView {
         translations: [TRANSLATIONS],
         locales: "./locales",
         check_translations: "./src/**/*.rs",
+        initial_language_from_localstorage: true,
+        initial_language_from_navigator_to_localstorage: true,
+        set_language_to_localstorage: true,
+        sync_html_tag_lang: true,
     }
 }
 #[component]
@@ -44,11 +50,11 @@ fn render_language(lang: &'static Language) -> impl IntoView {
     let i18n = expect_i18n();
     view! {
         <option
-                id=lang
-                value=lang
-                prop:selected=lang.is_active()
-                on:click=move |_| i18n.language.set(lang)
-            >
+            id=lang
+            value=lang
+            prop:selected=lang.is_active()
+            on:click=move |_| i18n.language.set(lang)
+        >
             {lang.name}
         </option>
     }