feat(ui): update LanguageScreen layout, texts, and dynamic i18n

Author: zodiacfireworks

src/edit_python_pe/main.py

@@ -105,38 +105,77 @@ def compose(self) -> ComposeResult:
 class LanguageScreen(Screen):
     def compose(self) -> ComposeResult:
         with Vertical(id="lang-container"):
-            yield Static("Select your language / Seleccione su idioma:")
+            yield Static(
+                _("Welcome aboard to Python Perú"),
+                id="welcome-header",
+                classes="header",
+            )
+            yield Static(_("Select your language"), id="lang-label")
             yield OptionList(
                 "English",
                 "Español",
                 "Français",
                 "Italiano",
                 "Português",
-                "Runa Simi (Quechua)",
+                "Runa Simi",
                 id="lang-select",
             )
-            yield Button("Continue / Continuar", id="lang-continue")
+            with Horizontal(id="lang-actions"):
+                yield Button(_("Quit"), id="lang-quit", variant="error")
+                yield Button(
+                    _("Continue"), id="lang-continue", variant="primary"
+                )
+            yield Static(
+                _("Proudly built with 🤍 in Perú"),
+                id="footer-msg",
+                classes="footer",
+            )
+
+    def on_option_list_option_highlighted(
+        self, event: OptionList.OptionHighlighted
+    ) -> None:
+        lang_map = {
+            0: "en",
+            1: "es",
+            2: "fr",
+            3: "it",
+            4: "pt",
+            5: "qu",
+        }
+        lang_code = (
+            lang_map.get(event.option_index, "en")
+            if event.option_index is not None
+            else "en"
+        )
+
+        set_language(lang_code)
+
+        # Update labels dynamically
+        self.query_one("#welcome-header", Static).update(
+            _("Welcome aboard to Python Perú")
+        )
+        self.query_one("#lang-label", Static).update(_("Select your language"))
+        self.query_one("#lang-continue", Button).label = _("Continue")
+        self.query_one("#lang-quit", Button).label = _("Quit")
+        self.query_one("#footer-msg", Static).update(
+            _("Proudly built with 🤍 in Perú")
+        )
 
     def on_button_pressed(self, event: Button.Pressed) -> None:
-        if event.button.id == "lang-continue":
-            lang_map = {
-                0: "en",
-                1: "es",
-                2: "fr",
-                3: "it",
-                4: "pt",
-                5: "qu",
-            }
+        if event.button.id == "lang-quit":
+            self.app.exit()
+        elif event.button.id == "lang-continue":
+            # If the user clicks continue without highlighting an option,
+            # make sure we set default
             opt_list = self.query_one("#lang-select", OptionList)
             selected_idx = opt_list.highlighted
+            lang_map = {0: "en", 1: "es", 2: "fr", 3: "it", 4: "pt", 5: "qu"}
             lang_code = (
                 lang_map.get(selected_idx, "en")
                 if selected_idx is not None
                 else "en"
             )
-
             set_language(lang_code)
-
             self.app.push_screen(AuthScreen())
 
 

src/edit_python_pe/styles.tcss

@@ -0,0 +1,105 @@
+/* styles.tcss */
+
+LabeledInput {
+    height: auto;
+}
+
+LabeledInput Static {
+    width: 25%;
+}
+
+LabeledInput Input {
+    width: 100%;
+}
+
+SocialEntry Select {
+    width: 25%;
+}
+
+SocialEntry Input {
+    width: 50%;
+}
+
+SocialEntry Button {
+    width: 25%;
+}
+
+AliasEntry Input {
+    width: 75%;
+}
+
+AliasEntry Button {
+    width: 25%;
+}
+
+/* Base styles for screens and structure */
+
+Screen {
+    align: center middle;
+}
+
+#form-container {
+    padding: 1;
+}
+
+#auth-container {
+    width: 50%;
+    height: auto;
+    border: solid green;
+    padding: 1;
+    align: center middle;
+}
+
+#auth-container Static {
+    text-align: center;
+    margin-bottom: 1;
+}
+
+#lang-container {
+    width: 50%;
+    height: auto;
+    border: solid blue;
+    padding: 1;
+    align: center middle;
+}
+
+#lang-container Static {
+    text-align: center;
+    margin-bottom: 1;
+}
+
+#lang-actions {
+    align: center middle;
+    height: auto;
+    width: 100%;
+}
+
+#lang-actions Button {
+    margin: 1;
+}
+
+.footer {
+    text-align: center;
+    color: gray;
+    margin-top: 1;
+}
+
+LoadingIndicator {
+    margin-top: 1;
+}
+
+.header {
+    text-align: center;
+    text-style: bold;
+    margin-bottom: 1;
+}
+
+.subheader {
+    text-style: bold;
+    margin-top: 1;
+}
+
+.label {
+    text-align: right;
+    margin-right: 1;
+}