feat(web,server): user avatar color (#4779)

mobile/lib/shared/ui/app_bar_dialog/app_bar_profile_info.dart

@@ -22,14 +22,12 @@ class AppBarProfileInfoBox extends HookConsumerWidget {
     final user = Store.tryGet(StoreKey.currentUser);
 
     buildUserProfileImage() {
-      const immichImage = CircleAvatar(
-        radius: 20,
-        backgroundImage: AssetImage('assets/immich-logo-no-outline.png'),
-        backgroundColor: Colors.transparent,
-      );
-
-      if (authState.profileImagePath.isEmpty || user == null) {
-        return immichImage;
+      if (user == null) {
+        return const CircleAvatar(
+          radius: 20,
+          backgroundImage: AssetImage('assets/immich-logo-no-outline.png'),
+          backgroundColor: Colors.transparent,
+        );
       }
 
       final userImage = UserCircleAvatar(
@@ -38,18 +36,6 @@ class AppBarProfileInfoBox extends HookConsumerWidget {
         user: user,
       );
 
-      if (uploadProfileImageStatus == UploadProfileStatus.idle) {
-        return authState.profileImagePath.isNotEmpty ? userImage : immichImage;
-      }
-
-      if (uploadProfileImageStatus == UploadProfileStatus.success) {
-        return userImage;
-      }
-
-      if (uploadProfileImageStatus == UploadProfileStatus.failure) {
-        return immichImage;
-      }
-
       if (uploadProfileImageStatus == UploadProfileStatus.loading) {
         return const SizedBox(
           height: 40,
@@ -58,7 +44,7 @@ class AppBarProfileInfoBox extends HookConsumerWidget {
         );
       }
 
-      return immichImage;
+      return userImage;
     }
 
     pickUserProfileImage() async {

mobile/lib/shared/ui/immich_app_bar.dart

@@ -4,8 +4,6 @@ import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/shared/models/store.dart';
 import 'package:immich_mobile/shared/ui/app_bar_dialog/app_bar_dialog.dart';
 import 'package:immich_mobile/shared/ui/user_circle_avatar.dart';
-import 'package:immich_mobile/modules/login/models/authentication_state.model.dart';
-import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
 
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/modules/backup/models/backup_state.model.dart';
@@ -26,7 +24,6 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
     final bool isEnableAutoBackup =
         backupState.backgroundBackup || backupState.autoBackup;
     final ServerInfo serverInfoState = ref.watch(serverInfoProvider);
-    AuthenticationState authState = ref.watch(authenticationProvider);
     final user = Store.tryGet(StoreKey.currentUser);
     final isDarkTheme = context.isDarkTheme;
     const widgetSize = 30.0;
@@ -55,7 +52,7 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
           alignment: Alignment.bottomRight,
           isLabelVisible: serverInfoState.isVersionMismatch,
           offset: const Offset(2, 2),
-          child: authState.profileImagePath.isEmpty || user == null
+          child: user == null
               ? const Icon(
                   Icons.face_outlined,
                   size: widgetSize,

mobile/lib/shared/ui/user_circle_avatar.dart

@@ -3,7 +3,6 @@ import 'dart:math';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/shared/models/store.dart';
 import 'package:immich_mobile/shared/models/user.dart';
 import 'package:immich_mobile/shared/ui/transparent_image.dart';
@@ -13,32 +12,17 @@ class UserCircleAvatar extends ConsumerWidget {
   final User user;
   double radius;
   double size;
-  bool useRandomBackgroundColor;
 
   UserCircleAvatar({
     super.key,
     this.radius = 22,
     this.size = 44,
-    this.useRandomBackgroundColor = false,
     required this.user,
   });
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final randomColors = [
-      Colors.red[200],
-      Colors.blue[200],
-      Colors.green[200],
-      Colors.yellow[200],
-      Colors.purple[200],
-      Colors.orange[200],
-      Colors.pink[200],
-      Colors.teal[200],
-      Colors.indigo[200],
-      Colors.cyan[200],
-      Colors.brown[200],
-    ];
-
+    bool isDarkTheme = Theme.of(context).brightness == Brightness.dark;
     final profileImageUrl =
         '${Store.get(StoreKey.serverEndpoint)}/user/profile-image/${user.id}?d=${Random().nextInt(1024)}';
 
@@ -46,15 +30,16 @@ class UserCircleAvatar extends ConsumerWidget {
       user.name[0].toUpperCase(),
       style: TextStyle(
         fontWeight: FontWeight.bold,
-        color: context.isDarkTheme ? Colors.black : Colors.white,
+        fontSize: 12,
+        color: isDarkTheme && user.avatarColor == AvatarColorEnum.primary
+            ? Colors.black
+            : Colors.white,
       ),
     );
     return CircleAvatar(
-      backgroundColor: useRandomBackgroundColor
-          ? randomColors[Random().nextInt(randomColors.length)]
-          : context.primaryColor,
+      backgroundColor: user.avatarColor.toColor(),
       radius: radius,
-      child: user.profileImagePath == ""
+      child: user.profileImagePath.isEmpty
           ? textIcon
           : ClipRRect(
               borderRadius: BorderRadius.circular(50),