From 228817b85f08f7b3cba927e4941095f87ca2b74c Mon Sep 17 00:00:00 2001
From: Daniel James Smith <2670567+djsmith85@users.noreply.github.com>
Date: Thu, 21 Nov 2024 22:16:49 +0100
Subject: [PATCH] Ensure labels on nav-buttons can be translated (#12084)

- Introduce using i18n by importing JslibModule
- Use i18n within markup
- Ensure navButtons.labels is a key that is present in the en/messages.json

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
---
 .../src/platform/popup/layout/popup-layout.stories.ts |  4 ++++
 .../popup/layout/popup-tab-navigation.component.html  |  2 +-
 .../popup/layout/popup-tab-navigation.component.ts    | 11 ++++++-----
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
index 5b9417a6a19..e80ac249ac1 100644
--- a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
+++ b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
@@ -313,6 +313,10 @@ export default {
               back: "Back",
               loading: "Loading",
               search: "Search",
+              vault: "Vault",
+              generator: "Generator",
+              send: "Send",
+              settings: "Settings",
             });
           },
         },
diff --git a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
index e53e8905e69..78b859f33b1 100644
--- a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
@@ -28,7 +28,7 @@
               aria-hidden="true"
             ></i>
             <span class="tw-truncate tw-max-w-full">
-              {{ button.label }}
+              {{ button.label | i18n }}
             </span>
           </button>
         </li>
diff --git a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts
index ced3f6462e9..e01b4efd71b 100644
--- a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts
+++ b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts
@@ -2,13 +2,14 @@ import { CommonModule } from "@angular/common";
 import { Component } from "@angular/core";
 import { RouterModule } from "@angular/router";
 
+import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { LinkModule } from "@bitwarden/components";
 
 @Component({
   selector: "popup-tab-navigation",
   templateUrl: "popup-tab-navigation.component.html",
   standalone: true,
-  imports: [CommonModule, LinkModule, RouterModule],
+  imports: [CommonModule, LinkModule, RouterModule, JslibModule],
   host: {
     class: "tw-block tw-h-full tw-w-full tw-flex tw-flex-col",
   },
@@ -16,25 +17,25 @@ import { LinkModule } from "@bitwarden/components";
 export class PopupTabNavigationComponent {
   navButtons = [
     {
-      label: "Vault",
+      label: "vault",
       page: "/tabs/vault",
       iconKey: "lock",
       iconKeyActive: "lock-f",
     },
     {
-      label: "Generator",
+      label: "generator",
       page: "/tabs/generator",
       iconKey: "generate",
       iconKeyActive: "generate-f",
     },
     {
-      label: "Send",
+      label: "send",
       page: "/tabs/send",
       iconKey: "send",
       iconKeyActive: "send-f",
     },
     {
-      label: "Settings",
+      label: "settings",
       page: "/tabs/settings",
       iconKey: "cog",
       iconKeyActive: "cog-f",