[PM-7076] Create settings-v2.component (#9213)

* Create settings-v2.component

Create new settings page
Add routing based on extension refresh flag

* Wrap anchors around the icons

* Add account-switcher to settings page

---------

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

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

@@ -38,6 +38,7 @@ import { SendGroupingsComponent } from "../tools/popup/send/send-groupings.compo
 import { SendTypeComponent } from "../tools/popup/send/send-type.component";
 import { ExportComponent } from "../tools/popup/settings/export.component";
 import { ImportBrowserComponent } from "../tools/popup/settings/import/import-browser.component";
+import { SettingsV2Component } from "../tools/popup/settings/settings-v2.component";
 import { SettingsComponent } from "../tools/popup/settings/settings.component";
 import { Fido2Component } from "../vault/popup/components/fido2/fido2.component";
 import { AddEditComponent } from "../vault/popup/components/vault/add-edit.component";
@@ -381,12 +382,11 @@ const routes: Routes = [
         canActivate: [AuthGuard],
         data: { state: "tabs_generator" },
       },
-      {
+      ...extensionRefreshSwap(SettingsComponent, SettingsV2Component, {
         path: "settings",
-        component: SettingsComponent,
         canActivate: [AuthGuard],
         data: { state: "tabs_settings" },
-      },
+      }),
       {
         path: "send",
         component: SendGroupingsComponent,

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

@@ -0,0 +1,47 @@
+<popup-page>
+  <popup-header slot="header" pageTitle="{{ 'settings' | i18n }}">
+    <ng-container slot="end">
+      <app-pop-out></app-pop-out>
+      <app-current-account></app-current-account>
+    </ng-container>
+  </popup-header>
+
+  <bit-item-group>
+    <bit-item>
+      <a bit-item-content routerLink="/account-security"
+        >{{ "accountSecurity" | i18n }}
+        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
+      </a>
+    </bit-item>
+    <bit-item>
+      <a bit-item-content routerLink="/autofill"
+        >{{ "autofill" | i18n }}
+        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
+      </a>
+    </bit-item>
+    <bit-item>
+      <a bit-item-content routerLink="/notifications"
+        >{{ "notifications" | i18n }}
+        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
+      </a>
+    </bit-item>
+    <bit-item>
+      <a bit-item-content routerLink="/vault-settings"
+        >{{ "vault" | i18n }}
+        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
+      </a>
+    </bit-item>
+    <bit-item>
+      <a bit-item-content routerLink="/appearance"
+        >{{ "appearance" | i18n }}
+        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
+      </a>
+    </bit-item>
+    <bit-item>
+      <a bit-item-content routerLink="/about"
+        >{{ "about" | i18n }}
+        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
+      </a>
+    </bit-item>
+  </bit-item-group>
+</popup-page>

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

@@ -0,0 +1,27 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import { RouterModule } from "@angular/router";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ItemModule } from "@bitwarden/components";
+
+import { CurrentAccountComponent } from "../../../auth/popup/account-switching/current-account.component";
+import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
+import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
+import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";
+
+@Component({
+  templateUrl: "settings-v2.component.html",
+  standalone: true,
+  imports: [
+    CommonModule,
+    JslibModule,
+    RouterModule,
+    PopupPageComponent,
+    PopupHeaderComponent,
+    PopOutComponent,
+    ItemModule,
+    CurrentAccountComponent,
+  ],
+})
+export class SettingsV2Component {}