[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>;
+}