From 565846f8376db4d0c73882a070af4ca32d93e404 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Mon, 1 Jan 2024 21:21:15 -0800
Subject: [PATCH] [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    |  3 +++
 .../account-switcher.component.html           | 19 +++++++++++++++----
 .../account-switching/account.component.ts    |  2 +-
 .../current-account.component.html            |  2 +-
 .../services/account-switcher.service.ts      | 14 ++++++++++++--
 5 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index b2225bab4f..dfbda4c1b2 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/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."
   },
diff --git a/apps/browser/src/auth/popup/account-switching/account-switcher.component.html b/apps/browser/src/auth/popup/account-switching/account-switcher.component.html
index 364ee07fba..5f9887833e 100644
--- a/apps/browser/src/auth/popup/account-switching/account-switcher.component.html
+++ b/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>
diff --git a/apps/browser/src/auth/popup/account-switching/account.component.ts b/apps/browser/src/auth/popup/account-switching/account.component.ts
index 2455aee1b8..ccc7141691 100644
--- a/apps/browser/src/auth/popup/account-switching/account.component.ts
+++ b/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" };
     }
 
diff --git a/apps/browser/src/auth/popup/account-switching/current-account.component.html b/apps/browser/src/auth/popup/account-switching/current-account.component.html
index 777d3af304..dacf4b34be 100644
--- a/apps/browser/src/auth/popup/account-switching/current-account.component.html
+++ b/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"
diff --git a/apps/browser/src/auth/popup/account-switching/services/account-switcher.service.ts b/apps/browser/src/auth/popup/account-switching/services/account-switcher.service.ts
index 19ede98e2c..987361dc56 100644
--- a/apps/browser/src/auth/popup/account-switching/services/account-switcher.service.ts
+++ b/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;
+          }
+        });
       }),
     );