[SG-58] Avatar color selector (#3691)

* changes

* merge

* undo

* work

* stuffs

* chore: added custom color picker

* oops

* chore: everything but the broken sink

* picker v2

* fix: cleanup

* fix: linty

* fix: use tailwind

* fix: use tailwind

* undo: merge error

* remove: old color picker

* fix: merge issue

* chore: use input vs component

* fix: move logic out!

* fix: revert changes to bit-avatar

* fix: cleanup undos

* feat: color lookup for "me" badge in vault

* fix: naming stuff

* fix: event emitter

* fix: linty

* fix: protect

* fix: remove v1 states
work: navatar

* fix: big

* fix: messages merge issue

* bug: differing bg colors for generated components

* feat: added sync stuff

* fix: cli

* fix: remove service refs, use state

* fix: moved from EventEmitter to Subjects

* fix: srs

* fix: strict stuff is nice tbh

* SG-920 + SG-921 (#4342)

* SG-920 + SG-921

* Update change-avatar.component.html

* Update selectable-avatar.component.ts

* [SG-926] [SG-58] [Defect] - Selected Avatar color does not persist in the Account Settings menu (#4359)

* SG-926

* fix: comment

* fix: undo

* fix: imp

* work: done with static values (#4272)

* [SG-35] (#4361)

Co-authored-by: Todd Martin <106564991+trmartin4@users.noreply.github.com>

apps/desktop/src/app/layout/account-switcher.component.html

@@ -12,6 +12,7 @@
     <app-avatar
       [text]="activeAccount.name"
       [id]="activeAccount.id"
+      [color]="activeAccount.avatarColor"
       [size]="25"
       [circle]="true"
       [fontSize]="14"
@@ -65,6 +66,7 @@
           [circle]="true"
           [fontSize]="14"
           [dynamic]="true"
+          [color]="a.value.avatarColor"
           *ngIf="a.value.profile.email != null"
           aria-hidden="true"
         ></app-avatar>

apps/desktop/src/app/layout/account-switcher.component.ts

@@ -16,6 +16,7 @@ type ActiveAccount = {
   id: string;
   name: string;
   email: string;
+  avatarColor: string;
 };
 
 export class SwitcherAccount extends Account {
@@ -27,6 +28,8 @@ export class SwitcherAccount extends Account {
     );
   }
 
+  avatarColor: string;
+
   private removeWebProtocolFromString(urlString: string) {
     const regex = /http(s)?(:)?(\/\/)?|(\/\/)?(www\.)?/g;
     return urlString.replace(regex, "");
@@ -112,6 +115,7 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
               id: await this.tokenService.getUserId(),
               name: (await this.tokenService.getName()) ?? (await this.tokenService.getEmail()),
               email: await this.tokenService.getEmail(),
+              avatarColor: await this.stateService.getAvatarColor(),
             };
           } catch {
             this.activeAccount = undefined;
@@ -162,6 +166,9 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
         userId: userId,
       });
       switcherAccounts[userId] = new SwitcherAccount(baseAccounts[userId]);
+      switcherAccounts[userId].avatarColor = await this.stateService.getAvatarColor({
+        userId: userId,
+      });
     }
     return switcherAccounts;
   }