Create vault settings component

Move controls from settings.component.html to vault-settings.component.html
Register VaultSettingsComponent within app.module
Register route for VaultSettingsComponent
Add new string in en/messages.json

apps/browser/src/_locales/en/messages.json

@@ -3038,6 +3038,9 @@
   "accountSecurity": {
     "message": "Account security"
   },
+  "vaultSettings": {
+    "message": "Vault settings"
+  },
   "errorAssigningTargetCollection": {
     "message": "Error assigning target collection."
   },

apps/browser/src/popup/app-routing.module.ts

@@ -49,6 +49,7 @@ import { ViewComponent } from "../vault/popup/components/vault/view.component";
 import { FolderAddEditComponent } from "../vault/popup/settings/folder-add-edit.component";
 import { FoldersComponent } from "../vault/popup/settings/folders.component";
 import { SyncComponent } from "../vault/popup/settings/sync.component";
+import { VaultSettingsComponent } from "../vault/popup/settings/vault-settings.component";
 
 import { debounceNavigationGuard } from "./services/debounce-navigation.service";
 import { ExcludedDomainsComponent } from "./settings/excluded-domains.component";
@@ -251,6 +252,12 @@ const routes: Routes = [
     canActivate: [AuthGuard],
     data: { state: "account-security" },
   },
+  {
+    path: "vault-settings",
+    component: VaultSettingsComponent,
+    canActivate: [AuthGuard],
+    data: { state: "vault-settings" },
+  },
   {
     path: "folders",
     component: FoldersComponent,

apps/browser/src/popup/app.module.ts

@@ -67,6 +67,7 @@ import { ViewComponent } from "../vault/popup/components/vault/view.component";
 import { FolderAddEditComponent } from "../vault/popup/settings/folder-add-edit.component";
 import { FoldersComponent } from "../vault/popup/settings/folders.component";
 import { SyncComponent } from "../vault/popup/settings/sync.component";
+import { VaultSettingsComponent } from "../vault/popup/settings/vault-settings.component";
 
 import { AppRoutingModule } from "./app-routing.module";
 import { AppComponent } from "./app.component";
@@ -152,6 +153,7 @@ import "../platform/popup/locales";
     SetPasswordComponent,
     AccountSecurityComponent,
     SettingsComponent,
+    VaultSettingsComponent,
     ShareComponent,
     SsoComponent,
     SyncComponent,

apps/browser/src/tools/popup/settings/settings.component.html

@@ -30,17 +30,9 @@ <h2 class="box-header">{{ "manage" | i18n }}</h2>
       <button
         type="button"
         class="box-content-row box-content-row-flex text-default"
-        routerLink="/folders"
+        routerLink="/vault-settings"
       >
-        <div class="row-main">{{ "folders" | i18n }}</div>
-        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
-      </button>
-      <button
-        type="button"
-        class="box-content-row box-content-row-flex text-default"
-        routerLink="/sync"
-      >
-        <div class="row-main">{{ "sync" | i18n }}</div>
+        <div class="row-main">{{ "vault" | i18n }}</div>
         <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
       <button
@@ -72,27 +64,6 @@ <h2 class="box-header">{{ "account" | i18n }}</h2>
   <div class="box list">
     <h2 class="box-header">{{ "tools" | i18n }}</h2>
     <div class="box-content single-line">
-      <button
-        type="button"
-        class="box-content-row box-content-row-flex text-default"
-        appStopClick
-        (click)="import()"
-      >
-        <div class="row-main">{{ "importItems" | i18n }}</div>
-        <i
-          class="bwi bwi-external-link bwi-lg row-sub-icon bwi-rotate-270 bwi-fw"
-          aria-hidden="true"
-        ></i>
-      </button>
-      <button
-        type="button"
-        class="box-content-row box-content-row-flex text-default"
-        appStopClick
-        (click)="export()"
-      >
-        <div class="row-main">{{ "exportVault" | i18n }}</div>
-        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
-      </button>
       <button
         type="button"
         class="box-content-row box-content-row-flex text-default"

apps/browser/src/vault/popup/settings/vault-settings.component.html

@@ -0,0 +1,56 @@
+<app-header>
+  <div class="left">
+    <button type="button" routerLink="/tabs/settings">
+      <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
+      <span>{{ "back" | i18n }}</span>
+    </button>
+  </div>
+  <h1 class="center">
+    <span class="title">{{ "vaultSettings" | i18n }}</span>
+  </h1>
+  <div class="right">
+    <app-pop-out></app-pop-out>
+  </div>
+</app-header>
+<main tabindex="-1">
+  <div class="box list">
+    <div class="box-content single-line">
+      <button
+        type="button"
+        class="box-content-row box-content-row-flex text-default"
+        routerLink="/folders"
+      >
+        <div class="row-main">{{ "folders" | i18n }}</div>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
+      </button>
+      <button
+        type="button"
+        class="box-content-row box-content-row-flex text-default"
+        appStopClick
+        (click)="import()"
+      >
+        <div class="row-main">{{ "importItems" | i18n }}</div>
+        <i
+          class="bwi bwi-external-link bwi-lg row-sub-icon bwi-rotate-270 bwi-fw"
+          aria-hidden="true"
+        ></i>
+      </button>
+      <button
+        type="button"
+        class="box-content-row box-content-row-flex text-default"
+        routerLink="/export"
+      >
+        <div class="row-main">{{ "exportVault" | i18n }}</div>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
+      </button>
+      <button
+        type="button"
+        class="box-content-row box-content-row-flex text-default"
+        routerLink="/sync"
+      >
+        <div class="row-main">{{ "sync" | i18n }}</div>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
+</main>

apps/browser/src/vault/popup/settings/vault-settings.component.ts

@@ -0,0 +1,27 @@
+import { Component } from "@angular/core";
+import { Router } from "@angular/router";
+
+import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+
+import { BrowserApi } from "../../../platform/browser/browser-api";
+import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils";
+
+@Component({
+  selector: "vault-settings",
+  templateUrl: "vault-settings.component.html",
+})
+export class VaultSettingsComponent {
+  constructor(
+    public messagingService: MessagingService,
+    private router: Router,
+  ) {}
+
+  async import() {
+    await this.router.navigate(["/import"]);
+    if (await BrowserApi.isPopupOpen()) {
+      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      BrowserPopupUtils.openCurrentPagePopout(window);
+    }
+  }
+}