TF-3758 Update mailbox app bar

Signed-off-by: dab246 <tdvu@linagora.com>

core/lib/presentation/extensions/string_extension.dart

@@ -1,4 +1,7 @@
+import 'package:collection/collection.dart';
+import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/utils/app_logger.dart';
+import 'package:flutter/material.dart';
 
 extension StringExtension on String {
 
@@ -78,4 +81,21 @@ extension StringExtension on String {
         return 'application/octet-stream'; // Unknown type
     }
   }
+
+  List<Color> get gradientColors {
+    return AppColor.mapGradientColor[_generateGradientColorIndex()];
+  }
+
+  int _generateGradientColorIndex() {
+    try {
+      if (isNotEmpty && codeUnits.isNotEmpty) {
+        return codeUnits.sum % AppColor.mapGradientColor.length;
+      } else {
+        return 0;
+      }
+    } catch (e) {
+      logError('StringExtension::_generateGradientColorIndex(): $e');
+      return 0;
+    }
+  }
 }

core/lib/presentation/utils/theme_utils.dart

@@ -92,6 +92,8 @@ class ThemeUtils {
         fontFamily: ConstantsUI.fontApp,
         fontWeight: FontWeight.w500,
         letterSpacing: 0.15,
+        fontSize: 16,
+        height: 24 / 16,
       ),
       titleSmall: TextStyle(
         fontFamily: ConstantsUI.fontApp,

lib/features/base/widget/application_logo_with_text_widget.dart

@@ -11,11 +11,13 @@ class ApplicationLogoWidthTextWidget extends StatelessWidget {
 
   final VoidCallback? onTapAction;
   final EdgeInsetsGeometry? margin;
+  final double? iconSize;
 
   ApplicationLogoWidthTextWidget({
     super.key,
     this.onTapAction,
     this.margin,
+    this.iconSize,
   });
 
   @override
@@ -24,7 +26,7 @@ class ApplicationLogoWidthTextWidget extends StatelessWidget {
       icon: PlatformInfo.isWeb && AppConfig.isSaasPlatForm
         ? _imagePaths.icLogoWithTextBeta
         : _imagePaths.icLogoWithText,
-      iconSize: 33,
+      iconSize: iconSize ?? 33,
       padding: EdgeInsets.zero,
       margin: margin,
       backgroundColor: Colors.transparent,

lib/features/base/widget/user_avatar_builder.dart

@@ -0,0 +1,33 @@
+import 'package:core/presentation/extensions/string_extension.dart';
+import 'package:core/presentation/views/image/avatar_builder.dart';
+import 'package:flutter/material.dart';
+
+class UserAvatarBuilder extends StatelessWidget {
+  final String username;
+  final double? size;
+  final VoidCallback? onTapAction;
+
+  const UserAvatarBuilder({
+    Key? key,
+    required this.username,
+    this.size,
+    this.onTapAction,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final avatarBuilder = AvatarBuilder()
+      ..text(username.firstLetterToUpperCase)
+      ..size(size ?? 32)
+      ..addTextStyle(Theme.of(context).textTheme.titleMedium?.copyWith(
+            color: Colors.white,
+          ))
+      ..avatarColor(username.gradientColors);
+
+    if (onTapAction != null) {
+      avatarBuilder.addOnTapActionClick(onTapAction!);
+    }
+
+    return avatarBuilder.build();
+  }
+}

lib/features/mailbox/presentation/mailbox_view.dart

@@ -12,11 +12,11 @@ import 'package:tmail_ui_user/features/mailbox/presentation/widgets/app_grid_vie
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/bottom_bar_selection_mailbox_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/folder_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/folders_bar_widget.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_app_bar.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_item_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_loading_bar_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/sending_queue_mailbox_widget.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/widgets/user_information_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/dashboard_routes.dart';
 import 'package:tmail_ui_user/features/quotas/presentation/quotas_view.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
@@ -36,6 +36,22 @@ class MailboxView extends BaseMailboxView {
           children: [
             Expanded(
               child: Column(children: [
+                Obx(() {
+                  final accountId = controller
+                      .mailboxDashBoardController
+                      .accountId
+                      .value;
+
+                  final username = accountId != null
+                    ? controller.mailboxDashBoardController.getOwnEmailAddress()
+                    : '';
+
+                  return MailboxAppBar(
+                    username: username,
+                    openSettingsAction:
+                        controller.mailboxDashBoardController.goToSettings,
+                  );
+                }),
                 _buildHeaderMailbox(context),
                 Expanded(child: Container(
                   color: Colors.white,
@@ -170,24 +186,6 @@ class MailboxView extends BaseMailboxView {
       physics: const AlwaysScrollableScrollPhysics(),
       padding: const EdgeInsets.only(bottom: 16),
       child: Column(children: [
-        Obx(() {
-          if (controller.isSelectionEnabled() && controller.responsiveUtils.isLandscapeMobile(context)) {
-            return const SizedBox.shrink();
-          }
-          return UserInformationWidget(
-            userName: controller.mailboxDashBoardController.accountId.value != null
-              ? controller.mailboxDashBoardController.getOwnEmailAddress()
-              : '',
-            subtitle: AppLocalizations.of(context).manage_account,
-            onSubtitleClick: controller.mailboxDashBoardController.goToSettings,
-            border: const Border(
-                bottom: BorderSide(
-                  color: AppColor.colorDividerHorizontal,
-                  width: 0.5,
-                )
-            ),
-          );
-        }),
         Obx(() => MailboxLoadingBarWidget(viewState: controller.viewState.value)),
         Obx(() {
           final linagoraApps = controller

lib/features/mailbox/presentation/widgets/mailbox_app_bar.dart

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/features/base/widget/application_logo_with_text_widget.dart';
+import 'package:tmail_ui_user/features/base/widget/user_avatar_builder.dart';
+
+typedef OnOpenSettingsAction = void Function();
+
+class MailboxAppBar extends StatelessWidget {
+  final String username;
+  final OnOpenSettingsAction? openSettingsAction;
+
+  const MailboxAppBar({
+    super.key,
+    required this.username,
+    this.openSettingsAction,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsetsDirectional.symmetric(
+        horizontal: 16,
+        vertical: 4,
+      ),
+      height: 50,
+      child: Row(
+        children: [
+          ApplicationLogoWidthTextWidget(iconSize: 22),
+          const Spacer(),
+          UserAvatarBuilder(
+            username: username,
+            onTapAction: openSettingsAction,
+          ),
+        ],
+      ),
+    );
+  }
+}

model/lib/extensions/email_address_extension.dart

@@ -1,8 +1,7 @@
-import 'dart:ui';
-
+import 'package:core/presentation/extensions/capitalize_extension.dart';
+import 'package:core/presentation/extensions/string_extension.dart';
+import 'package:flutter/material.dart';
 import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
-import 'package:core/core.dart';
-import 'package:collection/collection.dart';
 
 extension EmailAddressExtension on EmailAddress {
 
@@ -44,19 +43,5 @@ extension EmailAddressExtension on EmailAddress {
 
   String get labelAvatar => asString().isNotEmpty ? asString()[0].toUpperCase() : '';
 
-  List<Color> get avatarColors {
-    return AppColor.mapGradientColor[_generateIndex()];
-  }
-
-  int _generateIndex() {
-    if (emailAddress.isNotEmpty) {
-      final codeUnits = emailAddress.codeUnits;
-      if (codeUnits.isNotEmpty) {
-        final sumCodeUnits = codeUnits.sum;
-        final index = sumCodeUnits % AppColor.mapGradientColor.length;
-        return index;
-      }
-    }
-    return 0;
-  }
+  List<Color> get avatarColors => emailAddress.gradientColors;
 }