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>

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",
             });
           },
         },

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>

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",