[PM-5430] Separate Active Account from other accounts (#7374)

* make spacing consistent between log out and lock all buttons

* update color of avatar when no active account

* separate active account from other available accounts

* remove unnecessary ng-container

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

@@ -2835,6 +2835,9 @@
   "activeAccount": {
     "message": "Active account"
   },
+  "availableAccounts": {
+    "message": "Available accounts"
+  },
   "accountLimitReached": {
     "message": "Account limit reached. Log out of an account to add another."
   },

apps/browser/src/auth/popup/account-switching/account-switcher.component.html

@@ -15,9 +15,20 @@
   <div class="tw-p-2">
     <div *ngIf="availableAccounts$ | async as availableAccounts">
       <ul class="tw-grid tw-list-none tw-gap-2" role="listbox">
-        <li *ngFor="let availableAccount of availableAccounts" role="option">
-          <auth-account [account]="availableAccount" (loading)="loading = $event"></auth-account>
-        </li>
+        <ng-container
+          *ngFor="let availableAccount of availableAccounts; first as isFirst"
+          role="option"
+        >
+          <li *ngIf="availableAccount.isActive" class="tw-mb-4">
+            <auth-account [account]="availableAccount" (loading)="loading = $event"></auth-account>
+          </li>
+          <div *ngIf="isFirst" class="tw-uppercase tw-text-muted">
+            {{ "availableAccounts" | i18n }}
+          </div>
+          <li *ngIf="!availableAccount.isActive">
+            <auth-account [account]="availableAccount" (loading)="loading = $event"></auth-account>
+          </li>
+        </ng-container>
       </ul>
       <!--
         If the user has not reached the account limit, the last 'availableAccount' will have an 'id' of
@@ -58,7 +69,7 @@
         </button>
         <button
           type="button"
-          class="account-switcher-row tw-mt-2 tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-p-3"
+          class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-p-3"
           (click)="lockAll()"
         >
           <i class="bwi bwi-lock tw-text-2xl" aria-hidden="true"></i>

apps/browser/src/auth/popup/account-switching/account.component.ts

@@ -42,7 +42,7 @@ export class AccountComponent {
   }
 
   get status() {
-    if (this.account.isActive && this.account.status !== AuthenticationStatus.Locked) {
+    if (this.account.isActive) {
       return { text: this.i18nService.t("active"), icon: "bwi-check-circle" };
     }
 

apps/browser/src/auth/popup/account-switching/current-account.component.html

@@ -25,7 +25,7 @@
       <span class="tw-sr-only">{{ "switchAccounts" | i18n }}</span>
       <bit-avatar
         [text]="'&hellip;'"
-        [color]="'#175DDC'"
+        [color]="'#6795E8'"
         size="small"
         aria-hidden="true"
         class="[&>img]:tw-block"

apps/browser/src/auth/popup/account-switching/services/account-switcher.service.ts

@@ -77,11 +77,21 @@ export class AccountSwitcherService {
           options.push({
             name: "Add account",
             id: this.SPECIAL_ADD_ACCOUNT_ID,
-            isActive: activeAccount?.id == null,
+            isActive: false,
           });
         }
 
-        return options;
+        return options.sort((a, b) => {
+          // Active account is always first
+          if (a.isActive) {
+            return -1;
+          }
+
+          // "Add Account" button is always last
+          if (a.id === this.SPECIAL_ADD_ACCOUNT_ID) {
+            return 1;
+          }
+        });
       }),
     );