[PM-7611] Create a new vault settings component [UI changes] (#9220)

* Create vault-settings-v2 component

- Copy existing vault-settings component
- Make new component standalone
- Replace app-header with popup-header
- Replace nav-buttons with bit-item

- Register route to show new component when extension refresh flag is enabled

* Move sync functionality to vault-settings-v2

* Use anchors instead of buttons when navigating to a sub-page

* Removed unneeded component within routing

* Use new ToastService instead of PlatformUtils

* Remove unused MessagingService

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

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

@@ -54,6 +54,7 @@ import { AppearanceComponent } from "../vault/popup/settings/appearance.componen
 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 { VaultSettingsV2Component } from "../vault/popup/settings/vault-settings-v2.component";
 import { VaultSettingsComponent } from "../vault/popup/settings/vault-settings.component";
 
 import { extensionRefreshRedirect, extensionRefreshSwap } from "./extension-refresh-route-utils";
@@ -263,12 +264,11 @@ const routes: Routes = [
     canActivate: [AuthGuard],
     data: { state: "notifications" },
   },
-  {
+  ...extensionRefreshSwap(VaultSettingsComponent, VaultSettingsV2Component, {
     path: "vault-settings",
-    component: VaultSettingsComponent,
     canActivate: [AuthGuard],
     data: { state: "vault-settings" },
-  },
+  }),
   {
     path: "folders",
     component: FoldersComponent,

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

@@ -0,0 +1,35 @@
+<popup-page>
+  <popup-header slot="header" [pageTitle]="'vault' | i18n" showBackButton>
+    <ng-container slot="end">
+      <app-pop-out></app-pop-out>
+    </ng-container>
+  </popup-header>
+
+  <bit-item-group>
+    <bit-item>
+      <a bit-item-content routerLink="/folders">
+        {{ "folders" | i18n }}
+        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
+      </a>
+    </bit-item>
+    <bit-item>
+      <button type="button" bit-item-content (click)="import()">
+        {{ "importItems" | i18n }}
+        <i slot="end" class="bwi bwi-popout" aria-hidden="true"></i>
+      </button>
+    </bit-item>
+    <bit-item>
+      <a bit-item-content routerLink="/export">
+        {{ "exportVault" | i18n }}
+        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
+      </a>
+    </bit-item>
+    <bit-item>
+      <button type="button" bit-item-content (click)="sync()">
+        {{ "syncVaultNow" | i18n }}
+        <span slot="secondary">{{ lastSync }}</span>
+        <i slot="end" class="bwi bwi-refresh" aria-hidden="true"></i>
+      </button>
+    </bit-item>
+  </bit-item-group>
+</popup-page>

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

@@ -0,0 +1,76 @@
+import { CommonModule } from "@angular/common";
+import { Component, OnInit } from "@angular/core";
+import { Router, RouterModule } from "@angular/router";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
+import { ItemModule, ToastOptions, ToastService } from "@bitwarden/components";
+
+import { BrowserApi } from "../../../platform/browser/browser-api";
+import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils";
+import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
+import { PopupFooterComponent } from "../../../platform/popup/layout/popup-footer.component";
+import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
+import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";
+
+@Component({
+  templateUrl: "vault-settings-v2.component.html",
+  standalone: true,
+  imports: [
+    CommonModule,
+    JslibModule,
+    RouterModule,
+    PopupPageComponent,
+    PopupFooterComponent,
+    PopupHeaderComponent,
+    PopOutComponent,
+    ItemModule,
+  ],
+})
+export class VaultSettingsV2Component implements OnInit {
+  lastSync = "--";
+
+  constructor(
+    private router: Router,
+    private syncService: SyncService,
+    private toastService: ToastService,
+    private i18nService: I18nService,
+  ) {}
+
+  async ngOnInit() {
+    await this.setLastSync();
+  }
+
+  async import() {
+    await this.router.navigate(["/import"]);
+    if (await BrowserApi.isPopupOpen()) {
+      await BrowserPopupUtils.openCurrentPagePopout(window);
+    }
+  }
+
+  async sync() {
+    let toastConfig: ToastOptions;
+    const success = await this.syncService.fullSync(true);
+    if (success) {
+      await this.setLastSync();
+      toastConfig = {
+        variant: "success",
+        title: "",
+        message: this.i18nService.t("syncingComplete"),
+      };
+    } else {
+      toastConfig = { variant: "error", title: "", message: this.i18nService.t("syncingFailed") };
+    }
+    this.toastService.showToast(toastConfig);
+  }
+
+  private async setLastSync() {
+    const last = await this.syncService.getLastSync();
+    if (last != null) {
+      this.lastSync = last.toLocaleDateString() + " " + last.toLocaleTimeString();
+    } else {
+      this.lastSync = this.i18nService.t("never");
+    }
+  }
+}