From 32bbc9421b4135a86c27b849b8d4d388484de724 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Tue, 4 Apr 2023 14:04:05 +0200
Subject: [PATCH] Translate theme settings (#16053)

---
 .../editor/view-editor/hui-view-editor.ts     |  1 -
 src/panels/profile/ha-pick-dashboard-row.ts   |  1 +
 .../profile/ha-pick-first-weekday-row.ts      |  1 +
 src/panels/profile/ha-pick-language-row.ts    |  1 +
 .../profile/ha-pick-number-format-row.ts      |  1 +
 src/panels/profile/ha-pick-theme-row.ts       | 27 ++++++++++++-------
 src/panels/profile/ha-pick-time-format-row.ts |  1 +
 src/translations/en.json                      |  4 ++-
 8 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
index 6e6d8c9d98..35850f8bc8 100644
--- a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
@@ -93,7 +93,6 @@ export class HuiViewEditor extends LitElement {
     const schema = this._schema(this.hass.localize);
 
     const data = {
-      theme: "Backend-selected",
       ...this._config,
       type: this._type,
     };
diff --git a/src/panels/profile/ha-pick-dashboard-row.ts b/src/panels/profile/ha-pick-dashboard-row.ts
index 39354f25bc..7b88eb9dfa 100644
--- a/src/panels/profile/ha-pick-dashboard-row.ts
+++ b/src/panels/profile/ha-pick-dashboard-row.ts
@@ -37,6 +37,7 @@ class HaPickDashboardRow extends LitElement {
               .disabled=${!this._dashboards?.length}
               .value=${this.hass.defaultPanel}
               @selected=${this._dashboardChanged}
+              naturalMenuWidth
             >
               <mwc-list-item value="lovelace">
                 ${this.hass.localize(
diff --git a/src/panels/profile/ha-pick-first-weekday-row.ts b/src/panels/profile/ha-pick-first-weekday-row.ts
index c9142efb57..6a615cc433 100644
--- a/src/panels/profile/ha-pick-first-weekday-row.ts
+++ b/src/panels/profile/ha-pick-first-weekday-row.ts
@@ -30,6 +30,7 @@ class FirstWeekdayRow extends LitElement {
           .disabled=${this.hass.locale === undefined}
           .value=${this.hass.locale.first_weekday}
           @selected=${this._handleFormatSelection}
+          naturalMenuWidth
         >
           ${[
             FirstWeekday.language,
diff --git a/src/panels/profile/ha-pick-language-row.ts b/src/panels/profile/ha-pick-language-row.ts
index c2e7ba86f6..7bab38abdc 100644
--- a/src/panels/profile/ha-pick-language-row.ts
+++ b/src/panels/profile/ha-pick-language-row.ts
@@ -39,6 +39,7 @@ export class HaPickLanguageRow extends LitElement {
           )}
           .value=${this.hass.locale.language}
           @selected=${this._languageSelectionChanged}
+          naturalMenuWidth
         >
           ${this._languages.map(
             (language) => html`<mwc-list-item
diff --git a/src/panels/profile/ha-pick-number-format-row.ts b/src/panels/profile/ha-pick-number-format-row.ts
index d8588f6e1a..6c9a739dd7 100644
--- a/src/panels/profile/ha-pick-number-format-row.ts
+++ b/src/panels/profile/ha-pick-number-format-row.ts
@@ -31,6 +31,7 @@ class NumberFormatRow extends LitElement {
           .disabled=${this.hass.locale === undefined}
           .value=${this.hass.locale.number_format}
           @selected=${this._handleFormatSelection}
+          naturalMenuWidth
         >
           ${Object.values(NumberFormat).map((format) => {
             const formattedNumber = formatNumber(1234567.89, {
diff --git a/src/panels/profile/ha-pick-theme-row.ts b/src/panels/profile/ha-pick-theme-row.ts
index 0dcdaca9dd..1677ff7e15 100644
--- a/src/panels/profile/ha-pick-theme-row.ts
+++ b/src/panels/profile/ha-pick-theme-row.ts
@@ -23,6 +23,9 @@ import {
 import { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 
+const BACKEND_SELECTED_THEME = "Backend-selected";
+const DEFAULT_THEME = "default";
+
 @customElement("ha-pick-theme-row")
 export class HaPickThemeRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -65,16 +68,24 @@ export class HaPickThemeRow extends LitElement {
         <ha-select
           .label=${this.hass.localize("ui.panel.profile.themes.dropdown_label")}
           .disabled=${!hasThemes}
-          .value=${this.hass.selectedTheme?.theme || "Backend-selected"}
+          .value=${this.hass.selectedTheme?.theme || BACKEND_SELECTED_THEME}
           @selected=${this._handleThemeSelection}
+          naturalMenuWidth
         >
+          <mwc-list-item .value=${BACKEND_SELECTED_THEME}>
+            ${this.hass.localize("ui.panel.profile.themes.backend-selected")}
+          </mwc-list-item>
+          <mwc-list-item .value=${DEFAULT_THEME}>
+            ${this.hass.localize("ui.panel.profile.themes.default")}
+          </mwc-list-item>
           ${this._themeNames.map(
-            (theme) =>
-              html`<mwc-list-item .value=${theme}>${theme}</mwc-list-item>`
+            (theme) => html`
+              <mwc-list-item .value=${theme}>${theme}</mwc-list-item>
+            `
           )}
         </ha-select>
       </ha-settings-row>
-      ${curTheme === "default" || this._supportsModeSelection(curTheme)
+      ${curTheme === DEFAULT_THEME || this._supportsModeSelection(curTheme)
         ? html` <div class="inputs">
             <ha-formfield
               .label=${this.hass.localize(
@@ -114,7 +125,7 @@ export class HaPickThemeRow extends LitElement {
               >
               </ha-radio>
             </ha-formfield>
-            ${curTheme === "default"
+            ${curTheme === DEFAULT_THEME
               ? html`<div class="color-pickers">
                   <ha-textfield
                     .value=${themeSettings?.primaryColor ||
@@ -154,9 +165,7 @@ export class HaPickThemeRow extends LitElement {
       (!oldHass || oldHass.themes.themes !== this.hass.themes.themes);
 
     if (themesChanged) {
-      this._themeNames = ["Backend-selected", "default"].concat(
-        Object.keys(this.hass.themes.themes).sort()
-      );
+      this._themeNames = Object.keys(this.hass.themes.themes).sort();
     }
   }
 
@@ -198,7 +207,7 @@ export class HaPickThemeRow extends LitElement {
       return;
     }
 
-    if (theme === "Backend-selected") {
+    if (theme === BACKEND_SELECTED_THEME) {
       if (this.hass.selectedTheme?.theme) {
         fireEvent(this, "settheme", {
           theme: "",
diff --git a/src/panels/profile/ha-pick-time-format-row.ts b/src/panels/profile/ha-pick-time-format-row.ts
index 48a910cd9e..e890e10474 100644
--- a/src/panels/profile/ha-pick-time-format-row.ts
+++ b/src/panels/profile/ha-pick-time-format-row.ts
@@ -32,6 +32,7 @@ class TimeFormatRow extends LitElement {
           .disabled=${this.hass.locale === undefined}
           .value=${this.hass.locale.time_format}
           @selected=${this._handleFormatSelection}
+          naturalMenuWidth
         >
           ${Object.values(TimeFormat).map((format) => {
             const formattedTime = formatTime(date, {
diff --git a/src/translations/en.json b/src/translations/en.json
index 1255298cec..8b8e01ef28 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -4711,7 +4711,9 @@
           },
           "primary_color": "Primary color",
           "accent_color": "Accent color",
-          "reset": "Reset"
+          "reset": "Reset",
+          "backend-selected": "Use backend preferred theme",
+          "default": "Default"
         },
         "dashboard": {
           "header": "Dashboard",