From 0da4a4895d7881ed080e87fe0fcc5481ff236c5b Mon Sep 17 00:00:00 2001
From: Ancor Gonzalez Sosa <ancor@suse.com>
Date: Wed, 20 Dec 2023 14:13:23 +0000
Subject: [PATCH] [web] Display most representative country in timezone
 selector

---
 web/src/assets/styles/blocks.scss            | 4 ++--
 web/src/client/l10n.js                       | 7 ++++---
 web/src/components/l10n/TimezoneSelector.jsx | 1 +
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/src/assets/styles/blocks.scss b/web/src/assets/styles/blocks.scss
index 22113f29e1..acf738cbaa 100644
--- a/web/src/assets/styles/blocks.scss
+++ b/web/src/assets/styles/blocks.scss
@@ -385,14 +385,14 @@ ul[data-of="agama/keymaps"] {
 ul[data-of="agama/timezones"] {
   li {
     display: grid;
-    grid-template-columns: 1fr 2fr 1fr;
+    grid-template-columns: 1fr 2fr 1fr 1fr;
 
     > :last-child {
       grid-column: 1 / -1;
       font-size: 80%;
     }
 
-    > :nth-child(3) {
+    > :nth-child(4) {
       color: var(--color-gray-dimmed);
       text-align: end;
     }
diff --git a/web/src/client/l10n.js b/web/src/client/l10n.js
index cf9154a6dd..ec5c79b207 100644
--- a/web/src/client/l10n.js
+++ b/web/src/client/l10n.js
@@ -31,6 +31,7 @@ const LOCALE_PATH = "/org/opensuse/Agama1/Locale";
  * @typedef {object} Timezone
  * @property {string} id - Timezone id (e.g., "Atlantic/Canary").
  * @property {Array<string>} parts - Name of the timezone parts (e.g., ["Atlantic", "Canary"]).
+ * @property {string} country - Name of the country associated to the zone or empty string (e.g., "Spain").
  * @property {number} utcOffset - UTC offset.
  */
 
@@ -230,13 +231,13 @@ class L10nClient {
   /**
    * @private
    *
-   * @param {[string, Array<string>]} dbusTimezone
+   * @param {[string, Array<string>, string]} dbusTimezone
    * @returns {Timezone}
    */
-  buildTimezone([id, parts]) {
+  buildTimezone([id, parts, country]) {
     const utcOffset = timezoneUTCOffset(id);
 
-    return ({ id, parts, utcOffset });
+    return ({ id, parts, country, utcOffset });
   }
 
   /**
diff --git a/web/src/components/l10n/TimezoneSelector.jsx b/web/src/components/l10n/TimezoneSelector.jsx
index 55ddc9b629..5244d2956c 100644
--- a/web/src/components/l10n/TimezoneSelector.jsx
+++ b/web/src/components/l10n/TimezoneSelector.jsx
@@ -77,6 +77,7 @@ const TimezoneItem = ({ timezone, date }) => {
     <>
       <div>{part1}</div>
       <div>{restParts.join('-')}</div>
+      <div>{timezone.country}</div>
       <div>{time || ""}</div>
       <div>{timezone.details}</div>
     </>