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