From 87c228c03ff5085a3241ea78ffe5fc9086175e59 Mon Sep 17 00:00:00 2001
From: William Martin <contact@willmartian.com>
Date: Wed, 19 Nov 2025 09:06:22 -0500
Subject: [PATCH] split account-menu to new component

---
 .../header/account-menu.component.html        | 63 ++++++++++++++++++
 .../layouts/header/account-menu.component.ts  | 41 ++++++++++++
 .../layouts/header/web-header.component.html  | 65 +------------------
 .../layouts/header/web-header.component.ts    | 30 +--------
 4 files changed, 108 insertions(+), 91 deletions(-)
 create mode 100644 apps/web/src/app/layouts/header/account-menu.component.html
 create mode 100644 apps/web/src/app/layouts/header/account-menu.component.ts

diff --git a/apps/web/src/app/layouts/header/account-menu.component.html b/apps/web/src/app/layouts/header/account-menu.component.html
new file mode 100644
index 00000000000..981ef2c89c0
--- /dev/null
+++ b/apps/web/src/app/layouts/header/account-menu.component.html
@@ -0,0 +1,63 @@
+@let account = account$ | async;
+@if (account) {
+  <button
+    type="button"
+    [bitMenuTriggerFor]="accountMenu"
+    class="tw-border-0 tw-bg-transparent tw-p-0 tw-shrink-0"
+  >
+    <dynamic-avatar [id]="account.id" [text]="account | userName"></dynamic-avatar>
+  </button>
+
+  <bit-menu #accountMenu>
+    <div class="tw-flex tw-min-w-52 tw-max-w-72 tw-flex-col">
+      <div
+        class="tw-flex tw-items-center tw-px-4 tw-py-1 tw-leading-tight tw-text-muted"
+        appStopProp
+      >
+        <dynamic-avatar [id]="account.id" [text]="account | userName"></dynamic-avatar>
+        <div class="tw-ml-2 tw-block tw-overflow-hidden tw-whitespace-nowrap">
+          <span>{{ "loggedInAs" | i18n }}</span>
+          <small class="tw-block tw-overflow-hidden tw-whitespace-nowrap">
+            {{ account | userName }}
+          </small>
+        </div>
+      </div>
+
+      @if (selfHosted) {
+        <bit-menu-divider></bit-menu-divider>
+        <span class="tw-break-all tw-px-4 tw-py-1 tw-text-left tw-text-muted">
+          {{ hostname }}
+        </span>
+      }
+
+      <bit-menu-divider></bit-menu-divider>
+
+      <a bitMenuItem routerLink="/settings/account">
+        <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
+        {{ "accountSettings" | i18n }}
+      </a>
+      <a bitMenuItem href="https://bitwarden.com/help/" target="_blank" rel="noreferrer">
+        <i class="bwi bwi-fw bwi-question-circle" aria-hidden="true"></i>
+        {{ "getHelp" | i18n }}
+      </a>
+      <a bitMenuItem href="https://bitwarden.com/download/" target="_blank" rel="noreferrer">
+        <i class="bwi bwi-fw bwi-download" aria-hidden="true"></i>
+        {{ "getApps" | i18n }}
+      </a>
+
+      <bit-menu-divider></bit-menu-divider>
+
+      @if (canLock$ | async) {
+        <button bitMenuItem type="button" (click)="lock()">
+          <i class="bwi bwi-fw bwi-lock" aria-hidden="true"></i>
+          {{ "lockNow" | i18n }}
+        </button>
+      }
+
+      <button bitMenuItem type="button" (click)="logout()">
+        <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
+        {{ "logOut" | i18n }}
+      </button>
+    </div>
+  </bit-menu>
+}
diff --git a/apps/web/src/app/layouts/header/account-menu.component.ts b/apps/web/src/app/layouts/header/account-menu.component.ts
new file mode 100644
index 00000000000..0feb5760ff7
--- /dev/null
+++ b/apps/web/src/app/layouts/header/account-menu.component.ts
@@ -0,0 +1,41 @@
+import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
+import { map, Observable } from "rxjs";
+
+import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import {
+  VaultTimeoutAction,
+  VaultTimeoutSettingsService,
+} from "@bitwarden/common/key-management/vault-timeout";
+import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+
+import { DynamicAvatarComponent } from "../../components/dynamic-avatar.component";
+import { SharedModule } from "../../shared";
+
+@Component({
+  selector: "app-account-menu",
+  templateUrl: "./account-menu.component.html",
+  imports: [SharedModule, DynamicAvatarComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AccountMenuComponent {
+  private readonly platformUtilsService = inject(PlatformUtilsService);
+  private readonly vaultTimeoutSettingsService = inject(VaultTimeoutSettingsService);
+  private readonly messagingService = inject(MessagingService);
+  private readonly accountService = inject(AccountService);
+
+  protected readonly account$: Observable<Account | null> = this.accountService.activeAccount$;
+  protected readonly canLock$: Observable<boolean> = this.vaultTimeoutSettingsService
+    .availableVaultTimeoutActions$()
+    .pipe(map((actions) => actions.includes(VaultTimeoutAction.Lock)));
+  protected readonly selfHosted = this.platformUtilsService.isSelfHost();
+  protected readonly hostname = globalThis.location.hostname;
+
+  protected lock() {
+    this.messagingService.send("lockVault");
+  }
+
+  protected logout() {
+    this.messagingService.send("logout");
+  }
+}
diff --git a/apps/web/src/app/layouts/header/web-header.component.html b/apps/web/src/app/layouts/header/web-header.component.html
index 3ceeb895c0c..97e2a1e3706 100644
--- a/apps/web/src/app/layouts/header/web-header.component.html
+++ b/apps/web/src/app/layouts/header/web-header.component.html
@@ -7,70 +7,7 @@
 
     <ng-content></ng-content>
     <product-switcher></product-switcher>
-
-    @let account = account$ | async;
-    @if (account) {
-      <button
-        type="button"
-        [bitMenuTriggerFor]="accountMenu"
-        class="tw-border-0 tw-bg-transparent tw-p-0 tw-shrink-0"
-      >
-        <dynamic-avatar [id]="account.id" [text]="account | userName"></dynamic-avatar>
-      </button>
-
-      <bit-menu #accountMenu>
-        <div class="tw-flex tw-min-w-52 tw-max-w-72 tw-flex-col">
-          <div
-            class="tw-flex tw-items-center tw-px-4 tw-py-1 tw-leading-tight tw-text-muted"
-            appStopProp
-          >
-            <dynamic-avatar [id]="account.id" [text]="account | userName"></dynamic-avatar>
-            <div class="tw-ml-2 tw-block tw-overflow-hidden tw-whitespace-nowrap">
-              <span>{{ "loggedInAs" | i18n }}</span>
-              <small class="tw-block tw-overflow-hidden tw-whitespace-nowrap">
-                {{ account | userName }}
-              </small>
-            </div>
-          </div>
-
-          @if (selfHosted) {
-            <bit-menu-divider></bit-menu-divider>
-            <span class="tw-break-all tw-px-4 tw-py-1 tw-text-left tw-text-muted">
-              {{ hostname }}
-            </span>
-          }
-
-          <bit-menu-divider></bit-menu-divider>
-
-          <a bitMenuItem routerLink="/settings/account">
-            <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
-            {{ "accountSettings" | i18n }}
-          </a>
-          <a bitMenuItem href="https://bitwarden.com/help/" target="_blank" rel="noreferrer">
-            <i class="bwi bwi-fw bwi-question-circle" aria-hidden="true"></i>
-            {{ "getHelp" | i18n }}
-          </a>
-          <a bitMenuItem href="https://bitwarden.com/download/" target="_blank" rel="noreferrer">
-            <i class="bwi bwi-fw bwi-download" aria-hidden="true"></i>
-            {{ "getApps" | i18n }}
-          </a>
-
-          <bit-menu-divider></bit-menu-divider>
-
-          @if (canLock$ | async) {
-            <button bitMenuItem type="button" (click)="lock()">
-              <i class="bwi bwi-fw bwi-lock" aria-hidden="true"></i>
-              {{ "lockNow" | i18n }}
-            </button>
-          }
-
-          <button bitMenuItem type="button" (click)="logout()">
-            <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
-            {{ "logOut" | i18n }}
-          </button>
-        </div>
-      </bit-menu>
-    }
+    <app-account-menu></app-account-menu>
 
     <ng-container slot="title-suffix">
       <ng-content select="[slot=title-suffix]"></ng-content>
diff --git a/apps/web/src/app/layouts/header/web-header.component.ts b/apps/web/src/app/layouts/header/web-header.component.ts
index 14bc6186757..5f06743c549 100644
--- a/apps/web/src/app/layouts/header/web-header.component.ts
+++ b/apps/web/src/app/layouts/header/web-header.component.ts
@@ -2,37 +2,27 @@ import { ChangeDetectionStrategy, Component, inject, input } from "@angular/core
 import { ActivatedRoute } from "@angular/router";
 import { map, Observable } from "rxjs";
 
-import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service";
-import {
-  VaultTimeoutAction,
-  VaultTimeoutSettingsService,
-} from "@bitwarden/common/key-management/vault-timeout";
-import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
-import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { BannerModule, HeaderComponent } from "@bitwarden/components";
 
-import { DynamicAvatarComponent } from "../../components/dynamic-avatar.component";
 import { SharedModule } from "../../shared";
 import { ProductSwitcherModule } from "../product-switcher/product-switcher.module";
 
+import { AccountMenuComponent } from "./account-menu.component";
+
 @Component({
   selector: "app-header",
   templateUrl: "./web-header.component.html",
   imports: [
     SharedModule,
-    DynamicAvatarComponent,
     ProductSwitcherModule,
     BannerModule,
     HeaderComponent,
+    AccountMenuComponent,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class WebHeaderComponent {
   private route = inject(ActivatedRoute);
-  private platformUtilsService = inject(PlatformUtilsService);
-  private vaultTimeoutSettingsService = inject(VaultTimeoutSettingsService);
-  private messagingService = inject(MessagingService);
-  private accountService = inject(AccountService);
 
   /**
    * Custom title that overrides the route data `titleId`
@@ -51,18 +41,4 @@ export class WebHeaderComponent {
       };
     }),
   );
-  protected account$: Observable<Account | null> = this.accountService.activeAccount$;
-  protected canLock$: Observable<boolean> = this.vaultTimeoutSettingsService
-    .availableVaultTimeoutActions$()
-    .pipe(map((actions) => actions.includes(VaultTimeoutAction.Lock)));
-  protected readonly selfHosted = this.platformUtilsService.isSelfHost();
-  protected readonly hostname = globalThis.location.hostname;
-
-  protected lock() {
-    this.messagingService.send("lockVault");
-  }
-
-  protected logout() {
-    this.messagingService.send("logout");
-  }
 }