[PM-5266] Create Avatar Service (#7905)

* rename file, move, and update imports

* refactor and implement StateProvider

* remove comments

* add migration

* use 'disk-local' for web

* add JSDoc comments

* move AvatarService before SyncService

* create factory

* replace old method with observable in story

* fix tests

* add tests for migration

* receive most recent avatarColor emission

* move logic to component

* fix CLI dependency

* remove BehaviorSubject

* cleanup

* use UserKeyDefinition

* avoid extra write

* convert to observable

* fix tests

libs/common/src/auth/abstractions/avatar.service.ts

@@ -0,0 +1,29 @@
+import { Observable } from "rxjs";
+
+import { UserId } from "../../types/guid";
+
+export abstract class AvatarService {
+  /**
+   * An observable monitoring the active user's avatar color.
+   * The observable updates when the avatar color changes.
+   */
+  avatarColor$: Observable<string | null>;
+  /**
+   * Sets the avatar color of the active user
+   *
+   * @param color the color to set the avatar color to
+   * @returns a promise that resolves when the avatar color is set
+   */
+  abstract setAvatarColor(color: string): Promise<void>;
+  /**
+   * Gets the avatar color of the specified user.
+   *
+   * @remarks This is most useful for account switching where we show an
+   *          avatar for each account. If you only need the active user's
+   *          avatar color, use the avatarColor$ observable above instead.
+   *
+   * @param userId the userId of the user whose avatar color should be retreived
+   * @return an Observable that emits a string of the avatar color of the specified user
+   */
+  abstract getUserAvatarColor$(userId: UserId): Observable<string | null>;
+}

libs/common/src/auth/services/avatar.service.ts

@@ -0,0 +1,33 @@
+import { Observable } from "rxjs";
+
+import { ApiService } from "../../abstractions/api.service";
+import { UpdateAvatarRequest } from "../../models/request/update-avatar.request";
+import { AVATAR_DISK, StateProvider, UserKeyDefinition } from "../../platform/state";
+import { UserId } from "../../types/guid";
+import { AvatarService as AvatarServiceAbstraction } from "../abstractions/avatar.service";
+
+const AVATAR_COLOR = new UserKeyDefinition<string>(AVATAR_DISK, "avatarColor", {
+  deserializer: (value) => value,
+  clearOn: [],
+});
+
+export class AvatarService implements AvatarServiceAbstraction {
+  avatarColor$: Observable<string>;
+
+  constructor(
+    private apiService: ApiService,
+    private stateProvider: StateProvider,
+  ) {
+    this.avatarColor$ = this.stateProvider.getActive(AVATAR_COLOR).state$;
+  }
+
+  async setAvatarColor(color: string): Promise<void> {
+    const { avatarColor } = await this.apiService.putAvatar(new UpdateAvatarRequest(color));
+
+    await this.stateProvider.setUserState(AVATAR_COLOR, avatarColor);
+  }
+
+  getUserAvatarColor$(userId: UserId): Observable<string | null> {
+    return this.stateProvider.getUser(userId, AVATAR_COLOR).state$;
+  }
+}