From 48ece1e1546fbc115f4b5564386045b789ada3c4 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sat, 26 Aug 2023 14:51:48 -0700
Subject: [PATCH] Improve display mode button text.

---
 src/editor.ts                       |  4 ++--
 src/localize/languages/en.json      | 10 +++++-----
 src/localize/languages/it.json      |  9 +++++----
 src/localize/languages/pt-BR.json   | 10 +++++-----
 src/localize/languages/pt-PT.json   | 10 +++++-----
 src/utils/menu-controller.ts        |  4 +++-
 tests/utils/menu-controller.test.ts |  5 ++++-
 7 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/editor.ts b/src/editor.ts
index 56a3b231..2bbc2b2c 100644
--- a/src/editor.ts
+++ b/src/editor.ts
@@ -557,8 +557,8 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
 
   protected _displayModes: EditorSelectOption[] = [
     { value: '', label: '' },
-    { value: 'single', label: localize('config.common.display.modes.single') },
-    { value: 'grid', label: localize('config.common.display.modes.grid') },
+    { value: 'single', label: localize('display_modes.single') },
+    { value: 'grid', label: localize('display_modes.grid') },
   ];
 
   public setConfig(config: RawFrigateCardConfig): void {
diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json
index d95f7d5b..a5e860f4 100644
--- a/src/localize/languages/en.json
+++ b/src/localize/languages/en.json
@@ -153,11 +153,7 @@
         "grid_columns": "Exact number of grid columns",
         "grid_max_columns": "Maximum number of grid columns",
         "grid_selected_width_factor": "Increase selected media width by this factor",
-        "mode": "Mode",
-        "modes": {
-          "single": "Show single media viewer",
-          "grid": "Show media viewer for each camera in a grid"
-        }
+        "mode": "Mode"
       },
       "layout": {
         "fit": "Layout fit",
@@ -376,6 +372,10 @@
       }
     }
   },
+  "display_modes": {
+    "single": "Show single media viewer",
+    "grid": "Show media viewer for each camera in a grid"
+  },
   "editor": {
     "add_new_camera": "Add new camera",
     "button": "Button",
diff --git a/src/localize/languages/it.json b/src/localize/languages/it.json
index 25fdaf4a..fa1b9a97 100644
--- a/src/localize/languages/it.json
+++ b/src/localize/languages/it.json
@@ -153,10 +153,7 @@
         "grid_columns": "",
         "grid_max_columns": "",
         "grid_selected_width_factor": "",
-        "modes": {
-          "single": "",
-          "grid": ""
-        }
+        "mode": ""
       },
       "layout": {
         "fit": "Adatta al layout",
@@ -369,6 +366,10 @@
       }
     }
   },
+  "display_modes": {
+    "grid": "",
+    "single": ""
+  },
   "editor": {
     "add_new_camera": "Aggiungi nuova telecamera",
     "button": "Pulsante",
diff --git a/src/localize/languages/pt-BR.json b/src/localize/languages/pt-BR.json
index f5da9fb5..827c014d 100644
--- a/src/localize/languages/pt-BR.json
+++ b/src/localize/languages/pt-BR.json
@@ -153,11 +153,7 @@
         "grid_columns": "",
         "grid_max_columns": "",
         "grid_selected_width_factor": "",
-        "mode": "",
-        "modes": {
-          "single": "",
-          "grid": ""
-        }
+        "mode": ""
       },
       "layout": {
         "fit": "Ajuste de layout",
@@ -375,6 +371,10 @@
       }
     }
   },
+  "display_modes": {
+    "grid": "",
+    "single": ""
+  },
   "editor": {
     "add_new_camera": "Adicionar nova câmera",
     "button": "Botão",
diff --git a/src/localize/languages/pt-PT.json b/src/localize/languages/pt-PT.json
index f25d95f6..5ec59b7f 100644
--- a/src/localize/languages/pt-PT.json
+++ b/src/localize/languages/pt-PT.json
@@ -153,11 +153,7 @@
         "grid_columns": "",
         "grid_max_columns": "",
         "grid_selected_width_factor": "",
-        "mode": "",
-        "modes": {
-          "single": "",
-          "grid": ""
-        }
+        "mode": ""
       },
       "layout": {
         "fit": "Fit",
@@ -363,6 +359,10 @@
       }
     }
   },
+  "display_modes": {
+    "grid": "",
+    "single": ""
+  },
   "editor": {
     "add_new_camera": "Adicionar nova câmera",
     "button": "Botão",
diff --git a/src/utils/menu-controller.ts b/src/utils/menu-controller.ts
index 2790e2c6..f069397f 100644
--- a/src/utils/menu-controller.ts
+++ b/src/utils/menu-controller.ts
@@ -404,7 +404,9 @@ export class MenuButtonController {
           icon: isGrid ? 'mdi:grid-off' : 'mdi:grid',
           ...config.menu.buttons.display_mode,
           type: 'custom:frigate-card-menu-icon',
-          title: localize('config.menu.buttons.display_mode'),
+          title: isGrid
+            ? localize('display_modes.single')
+            : localize('display_modes.grid'),
           tap_action: action,
         });
       }
diff --git a/tests/utils/menu-controller.test.ts b/tests/utils/menu-controller.test.ts
index 36adc42b..00c578c5 100644
--- a/tests/utils/menu-controller.test.ts
+++ b/tests/utils/menu-controller.test.ts
@@ -1102,7 +1102,10 @@ describe('MenuButtonController', () => {
           enabled: true,
           priority: 50,
           type: 'custom:frigate-card-menu-icon',
-          title: 'Display mode',
+          title:
+            displayMode === 'grid'
+              ? 'Show single media viewer'
+              : 'Show media viewer for each camera in a grid',
           tap_action: {
             action: 'fire-dom-event',
             frigate_card_action: 'display_mode_select',