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