TF-3952 Add the number of recipients widget

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

core/lib/presentation/extensions/color_extension.dart

@@ -270,6 +270,7 @@ extension AppColor on Color {
   static const gray6D7885 = Color(0xFF6D7885);
   static const m3Primary = Color(0xFF0A84FF);
   static const m3Primary95 = Color(0xFFE3F1FF);
+  static const gray49454F = Color(0xFF49454F);
 
   static const mapGradientColor = [
     [Color(0xFF21D4FD), Color(0xFFB721FF)],

lib/features/manage_account/presentation/forward/forward_view.dart

@@ -12,6 +12,7 @@ import 'package:tmail_ui_user/features/manage_account/presentation/forward/forwa
 import 'package:tmail_ui_user/features/manage_account/presentation/forward/widgets/autocomplete_contact_text_field_with_tags.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/forward/widgets/forward_warning_banner.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/forward/widgets/list_email_forward_widget.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/forward/widgets/number_of_recipient_widget.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/model/account_menu_item.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/widgets/setting_explanation_widget.dart';
@@ -79,12 +80,18 @@ class ForwardView extends GetWidget<ForwardController> with AppLoaderMixin {
                   Expanded(
                     child: Padding(
                       padding: isWebDesktop
-                        ? const EdgeInsetsDirectional.only(top: 24)
+                        ? EdgeInsets.zero
                         : const EdgeInsetsDirectional.symmetric(horizontal: 16),
                       child: Column(
                         crossAxisAlignment: CrossAxisAlignment.start,
                         children: [
                           _buildKeepLocalSwitchButton(context),
+                          Obx(
+                            () => NumberOfRecipientWidget(
+                              numberOfRecipient:
+                                controller.listRecipientForward.length,
+                            ),
+                          ),
                           Obx(
                             () => controller.currentForward.value != null
                                 ? _buildAddRecipientsFormWidget(context)

lib/features/manage_account/presentation/forward/widgets/number_of_recipient_widget.dart

@@ -0,0 +1,50 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class NumberOfRecipientWidget extends StatelessWidget {
+  final int numberOfRecipient;
+
+  const NumberOfRecipientWidget({super.key, required this.numberOfRecipient});
+
+  @override
+  Widget build(BuildContext context) {
+    final appLocalizations = AppLocalizations.of(context);
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 36),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Flexible(
+            child: Text(
+              appLocalizations.forwardTo,
+              style: ThemeUtils.textStyleInter600().copyWith(
+                fontSize: 14,
+                height: 20 / 14,
+                letterSpacing: 0.25,
+                color: AppColor.gray424244,
+              ),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+          Container(
+            decoration: BoxDecoration(
+              color: AppColor.gray49454F.withValues(alpha: 0.08),
+              borderRadius: const BorderRadius.all(Radius.circular(16)),
+            ),
+            margin: const EdgeInsetsDirectional.only(start: 16),
+            padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 12),
+            child: Text(
+              '$numberOfRecipient ${appLocalizations.recipient.toLowerCase()}',
+              style: ThemeUtils.textStyleBodyBody3(color: Colors.black),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}