TF-390 Apply new ui composer for mobile

lib/features/composer/presentation/composer_controller.dart

@@ -57,8 +57,6 @@ class ComposerController extends BaseController {
   final _imagePaths = Get.find<ImagePaths>();
   final _responsiveUtils = Get.find<ResponsiveUtils>();
 
-  final expandMode = ExpandMode.COLLAPSE.obs;
-  final expandModeMobile = ExpandMode.EXPAND.obs;
   final expandModeAttachments = ExpandMode.EXPAND.obs;
   final composerArguments = Rxn<ComposerArguments>();
   final isEnableEmailSendButton = false.obs;
@@ -154,7 +152,6 @@ class ComposerController extends BaseController {
     toEmailAddressController.dispose();
     ccEmailAddressController.dispose();
     bccEmailAddressController.dispose();
-    toEmailAddressFocusNode.dispose();
     super.onClose();
   }
 
@@ -626,8 +623,6 @@ class ComposerController extends BaseController {
       final isChanged = await _isEmailChanged(context, arguments);
       if (isChanged) {
         log('ComposerController::saveEmailAsDrafts(): saveEmailAsDrafts isChanged: $isChanged');
-        _saveEmailAddress();
-
         final newEmail = await _generateEmail(mapDefaultMailboxId, userProfile, asDrafts: true);
         final accountId = session.accounts.keys.first;
         final oldEmail = arguments.presentationEmail;
@@ -683,9 +678,8 @@ class ComposerController extends BaseController {
     if (!kIsWeb) {
       htmlEditorApi?.unfocus(context);
       htmlControllerBrowser.clearFocus();
-    } else {
-      FocusManager.instance.primaryFocus?.unfocus();
     }
+    FocusManager.instance.primaryFocus?.unfocus();
   }
 
   void closeComposerWeb() {
@@ -754,17 +748,23 @@ class ComposerController extends BaseController {
     }
   }
 
-  void collapseComposer(ExpandMode expandMode) {
-    expandModeMobile.value = expandMode;
-  }
-
   void addEmailAddressType(PrefixEmailAddress prefixEmailAddress) {
     listEmailAddressType.add(prefixEmailAddress);
   }
 
   void deleteEmailAddressType(PrefixEmailAddress prefixEmailAddress) {
     listEmailAddressType.remove(prefixEmailAddress);
-    updateListEmailAddress(prefixEmailAddress, List.empty());
+    updateListEmailAddress(prefixEmailAddress, <EmailAddress>[]);
+    switch(prefixEmailAddress) {
+      case PrefixEmailAddress.cc:
+        ccEmailAddressController.clear();
+        break;
+      case PrefixEmailAddress.bcc:
+        bccEmailAddressController.clear();
+        break;
+      default:
+        break;
+    }
   }
 
   void onSubjectEmailFocusChange(bool isFocus) {
@@ -825,7 +825,8 @@ class ComposerController extends BaseController {
     }
   }
 
-  void closeComposer(BuildContext context) {
+  void closeComposer() {
+    FocusManager.instance.primaryFocus?.unfocus();
     popBack();
   }
 }

lib/features/composer/presentation/composer_view.dart

@@ -24,7 +24,15 @@ class ComposerView extends GetWidget<ComposerController> {
   Widget build(BuildContext context) {
     return ResponsiveWidget(
       responsiveUtils: responsiveUtils,
-      mobile: WillPopScope(
+      mobile: _buildComposerViewForMobile(context),
+      tablet: _buildComposerViewForTablet(context),
+      tabletLarge: _buildComposerViewForTablet(context),
+      desktop: _buildComposerViewForTablet(context),
+    );
+  }
+
+  Widget _buildComposerViewForMobile(BuildContext context) {
+    return WillPopScope(
         onWillPop: () async {
           controller.saveEmailAsDrafts(context);
           return true;
@@ -34,29 +42,26 @@ class ComposerView extends GetWidget<ComposerController> {
               controller.clearFocusEditor(context);
             },
             child: Scaffold(
-                backgroundColor: AppColor.primaryLightColor,
+              backgroundColor: Colors.white,
               body: SafeArea(
-                    right: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context),
+                  right: responsiveUtils.isMobile(context) && responsiveUtils.isLandscape(context),
-                    left: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context),
+                  left: responsiveUtils.isMobile(context) && responsiveUtils.isLandscape(context),
                   child: Container(
                       color: Colors.white,
                       child: Column(children: [
-                          Obx(() => Padding(
+                        Obx(() => _buildAppBar(context, controller.isEnableEmailSendButton.value)),
-                            padding: EdgeInsets.only(left: 8, right: 8,
+                        Divider(color: AppColor.colorDividerComposer, height: 1),
-                                top: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context) ? 16 : 0,
+                        Expanded(child: _buildBodyMobile(context))
-                                bottom: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context) ? 8 : 0),
-                            child: _buildAppBar(context, controller.isEnableEmailSendButton.value, controller.expandModeMobile.value),)),
-                          Obx(() => controller.expandModeMobile == ExpandMode.COLLAPSE
-                              ? Divider(color: AppColor.colorDividerComposer, height: 1)
-                              : SizedBox.shrink()),
-                          Expanded(child: _buildEditorAndAttachments(context))
                       ])
                   )
               ),
             )
         )
-      ),
+    );
-      tablet: WillPopScope(
+  }
+
+  Widget _buildComposerViewForTablet(BuildContext context) {
+    return WillPopScope(
         onWillPop: () async {
           controller.saveEmailAsDrafts(context);
           return true;
@@ -70,84 +75,105 @@ class ComposerView extends GetWidget<ComposerController> {
                 body: Align(alignment: Alignment.center, child: Card(
                     color: Colors.transparent,
                     elevation: 20,
+                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(24))),
+                    shadowColor: Colors.transparent,
                     child: Container(
-                        decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(10))),
+                        decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(24))),
-                        width: responsiveUtils.getSizeScreenWidth(context) * 0.85,
+                        width: responsiveUtils.getSizeScreenWidth(context) * 0.9,
-                        height: responsiveUtils.getSizeScreenHeight(context) * 0.85,
+                        height: responsiveUtils.getSizeScreenHeight(context) * 0.9,
                         child: ClipRRect(
-                            borderRadius: BorderRadius.all(Radius.circular(10)),
+                            borderRadius: BorderRadius.all(Radius.circular(24)),
                             child: SafeArea(
                                 child: Column(children: [
-                                  Obx(() => Padding(
+                                    Padding(padding: EdgeInsets.symmetric(horizontal: 16), child: _buildAppBar(context, controller.isEnableEmailSendButton.value)),
-                                    padding: EdgeInsets.only(left: 8, right: 8),
+                                    Padding(padding: EdgeInsets.only(top: 8), child: Divider(color: AppColor.colorDividerComposer, height: 1)),
-                                    child: _buildAppBar(context, controller.isEnableEmailSendButton.value, controller.expandModeMobile.value),)),
+                                    Expanded(child: _buildBodyTablet(context)),
-                                  Obx(() => controller.expandModeMobile == ExpandMode.COLLAPSE
+                                    Divider(color: AppColor.colorDividerComposer, height: 1),
-                                      ? Divider(color: AppColor.colorDividerComposer, height: 1)
+                                    Obx(() => _buildBottomBar(context, controller.isEnableEmailSendButton.value)),
-                                      : SizedBox.shrink()),
+                                ]),
-                                  Expanded(child: _buildEditorAndAttachments(context))
-                                ])
                             )
                         )
                     )
                 ))
             )
         )
-      )
     );
   }
 
-  Widget _buildAppBar(BuildContext context, bool isEnableSendButton, ExpandMode expandModeMobile) {
+  Widget _buildAppBar(BuildContext context, bool isEnableSendButton) {
-    return Row(children: [
+    return Container(
-        Material(
+      padding: responsiveUtils.isMobile(context) ? EdgeInsets.all(8) : EdgeInsets.zero,
-            type: MaterialType.circle,
+      color: Colors.white,
-            color: Colors.transparent,
+      child: Row(
-            child: TextButton(
+          children: [
-                child: Text(
+            buildIconWeb(
-                    AppLocalizations.of(context).cancel,
+                icon: SvgPicture.asset(imagePaths.icClose, width: 30, height: 30, fit: BoxFit.fill),
-                    style: TextStyle(fontWeight: FontWeight.normal, fontSize: 17, color: AppColor.colorTextButton)),
+                tooltip: AppLocalizations.of(context).close,
-                onPressed: () {
+                iconPadding: EdgeInsets.zero,
+                onTap: () {
                   controller.saveEmailAsDrafts(context);
-                  controller.closeComposer(context);
+                  controller.closeComposer();
-                }
+                }),
-            )
+            Expanded(child: _buildTitleComposer(context)),
-        ),
-        if (expandModeMobile == ExpandMode.EXPAND)
-          Spacer(),
-        if (expandModeMobile == ExpandMode.COLLAPSE)
-          Expanded(child: Text(
-            AppLocalizations.of(context).new_message.capitalizeFirstEach,
-            overflow: TextOverflow.ellipsis,
-            textAlign: TextAlign.center,
-            maxLines: 1,
-            style: TextStyle(fontSize: 17, fontWeight: FontWeight.w600, color: Colors.black),
-          )),
             buildIconWeb(
-            icon: SvgPicture.asset(imagePaths.icAttachmentsComposer, fit: BoxFit.fill),
+                icon: SvgPicture.asset(
-            tooltip: AppLocalizations.of(context).pick_attachments,
+                    isEnableSendButton ? imagePaths.icSendMobile : imagePaths.icSendDisable,
-            onTap: () => controller.openPickAttachmentMenu(context, _pickAttachmentsActionTiles(context))),
+                    fit: BoxFit.fill),
-        if (expandModeMobile == ExpandMode.COLLAPSE)
-          buildIconWeb(
-            icon: SvgPicture.asset(isEnableSendButton ? imagePaths.icSendMobile : imagePaths.icSendDisable, fit: BoxFit.fill),
                 tooltip: AppLocalizations.of(context).send,
                 onTap: () => controller.sendEmailAction(context)),
-    ]);
+          ]
+      ),
+    );
   }
 
-  Widget _buildTitleComposer(BuildContext context, bool isEnableSendButton) {
+  Widget _buildBottomBar(BuildContext context, bool isEnableSendButton) {
-    return Row(children: [
+    return Container(
-      Expanded(child: Text(
+      padding: EdgeInsets.symmetric(vertical: 16),
-        AppLocalizations.of(context).new_message.capitalizeFirstEach,
+      color: Colors.white,
+      child: Row(mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            buildTextButton(
+                AppLocalizations.of(context).cancel,
+                textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 17, color: AppColor.lineItemListColor),
+                backgroundColor: AppColor.emailAddressChipColor,
+                width: 150,
+                height: 44,
+                radius: 10,
+                onTap: () => controller.closeComposer()),
+            SizedBox(width: 12),
+            buildTextButton(
+                AppLocalizations.of(context).save_to_drafts,
+                textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 17, color: AppColor.colorTextButton),
+                backgroundColor: AppColor.emailAddressChipColor,
+                width: 150,
+                height: 44,
+                radius: 10,
+                onTap: () {
+                  controller.saveEmailAsDrafts(context);
+                  controller.closeComposer();
+                }),
+            SizedBox(width: 12),
+            buildTextButton(
+                AppLocalizations.of(context).send,
+                width: 150,
+                height: 44,
+                radius: 10,
+                onTap: () => controller.sendEmailAction(context)),
+          ]
+      ),
+    );
+  }
+
+  Widget _buildTitleComposer(BuildContext context) {
+    return Obx(() => Text(
+      controller.subjectEmail.isNotEmpty == true
+          ? controller.subjectEmail.value ?? ''
+          : AppLocalizations.of(context).new_message.capitalizeFirstEach,
       overflow: TextOverflow.ellipsis,
       maxLines: 1,
-        style: TextStyle(fontSize: 34, fontWeight: FontWeight.w700, color: Colors.black),
+      textAlign: TextAlign.center,
-      )),
+      style: TextStyle(fontSize: responsiveUtils.isMobile(context) ? 17 : 24, fontWeight: FontWeight.bold, color: Colors.black),
-      buildIconWeb(
+    ));
-        iconSize: 36,
-        iconPadding: EdgeInsets.zero,
-        icon: SvgPicture.asset(isEnableSendButton ? imagePaths.icSendMobile : imagePaths.icSendDisable, width: 36, height: 36, fit: BoxFit.fill),
-        tooltip: AppLocalizations.of(context).send,
-        onTap: () => controller.sendEmailAction(context)),
-    ]);
   }
 
   List<Widget> _pickAttachmentsActionTiles(BuildContext context) {
@@ -177,101 +203,122 @@ class ComposerView extends GetWidget<ComposerController> {
   }
 
   Widget _buildEmailAddress(BuildContext context) {
-    return Column(children: [
+    return Column(
-      Obx(() => (EmailAddressInputBuilder(
+      children: [
-              context,
+        Obx(() => Padding(
-              imagePaths,
+            padding: EdgeInsets.only(left: responsiveUtils.isMobile(context) ? 16 : 0),
+            child: (EmailAddressInputBuilder(context, imagePaths, responsiveUtils,
                     PrefixEmailAddress.to,
                     controller.listToEmailAddress,
                     controller.listEmailAddressType,
+                    expandMode: controller.toAddressExpandMode.value,
                     controller: controller.toEmailAddressController,
+                    focusNode: controller.toEmailAddressFocusNode,
                     isInitial: controller.isInitialRecipient.value)
+                ..addOnFocusEmailAddressChangeAction((prefixEmailAddress, focus) => controller.onEmailAddressFocusChange(prefixEmailAddress, focus))
+                ..addOnShowFullListEmailAddressAction((prefixEmailAddress) => controller.showFullEmailAddress(prefixEmailAddress))
+                ..addOnAddEmailAddressTypeAction((prefixEmailAddress) => controller.addEmailAddressType(prefixEmailAddress))
                 ..addOnUpdateListEmailAddressAction((prefixEmailAddress, listEmailAddress) => controller.updateListEmailAddress(prefixEmailAddress, listEmailAddress))
                 ..addOnSuggestionEmailAddress((word) => controller.getAutoCompleteSuggestion(word)))
               .build()
-      ),
+        )),
-      Obx(() => controller.expandMode.value == ExpandMode.EXPAND
+        Obx(() => controller.listEmailAddressType.contains(PrefixEmailAddress.cc) == true
             ? Divider(color: AppColor.colorDividerComposer, height: 1)
             : SizedBox.shrink()),
-      Obx(() => controller.expandMode.value == ExpandMode.EXPAND
+        Obx(() => controller.listEmailAddressType.contains(PrefixEmailAddress.cc) == true
-        ? (EmailAddressInputBuilder(
+            ? Padding(
-                context,
+                padding: EdgeInsets.only(left: responsiveUtils.isMobile(context) ? 16 : 0),
-                imagePaths,
+                child: (EmailAddressInputBuilder(context, imagePaths, responsiveUtils,
                         PrefixEmailAddress.cc,
                         controller.listCcEmailAddress,
                         controller.listEmailAddressType,
+                        expandMode: controller.ccAddressExpandMode.value,
                         controller: controller.ccEmailAddressController,
                         isInitial: controller.isInitialRecipient.value,)
+                    ..addOnFocusEmailAddressChangeAction((prefixEmailAddress, focus) => controller.onEmailAddressFocusChange(prefixEmailAddress, focus))
+                    ..addOnShowFullListEmailAddressAction((prefixEmailAddress) => controller.showFullEmailAddress(prefixEmailAddress))
+                    ..addOnDeleteEmailAddressTypeAction((prefixEmailAddress) => controller.deleteEmailAddressType(prefixEmailAddress))
                     ..addOnUpdateListEmailAddressAction((prefixEmailAddress, listEmailAddress) => controller.updateListEmailAddress(prefixEmailAddress, listEmailAddress))
                     ..addOnSuggestionEmailAddress((word) => controller.getAutoCompleteSuggestion(word)))
-          .build()
+                  .build())
             : SizedBox.shrink()
         ),
-      Obx(() => controller.expandMode.value == ExpandMode.EXPAND
+        Obx(() => controller.listEmailAddressType.contains(PrefixEmailAddress.bcc) == true
             ? Divider(color: AppColor.colorDividerComposer, height: 1)
             : SizedBox.shrink()),
-      Obx(() => controller.expandMode.value == ExpandMode.EXPAND
+        Obx(() => controller.listEmailAddressType.contains(PrefixEmailAddress.bcc) == true
-        ? (EmailAddressInputBuilder(
+            ? Padding(
-              context,
+                padding: EdgeInsets.only(left: responsiveUtils.isMobile(context) ? 16 : 0),
-              imagePaths,
+                child: (EmailAddressInputBuilder(context, imagePaths, responsiveUtils,
                         PrefixEmailAddress.bcc,
                         controller.listBccEmailAddress,
                         controller.listEmailAddressType,
+                        expandMode: controller.bccAddressExpandMode.value,
                         controller: controller.bccEmailAddressController,
                         isInitial: controller.isInitialRecipient.value,)
+                    ..addOnFocusEmailAddressChangeAction((prefixEmailAddress, focus) => controller.onEmailAddressFocusChange(prefixEmailAddress, focus))
+                    ..addOnShowFullListEmailAddressAction((prefixEmailAddress) => controller.showFullEmailAddress(prefixEmailAddress))
+                    ..addOnDeleteEmailAddressTypeAction((prefixEmailAddress) => controller.deleteEmailAddressType(prefixEmailAddress))
                     ..addOnUpdateListEmailAddressAction((prefixEmailAddress, listEmailAddress) => controller.updateListEmailAddress(prefixEmailAddress, listEmailAddress))
                     ..addOnSuggestionEmailAddress((word) => controller.getAutoCompleteSuggestion(word)))
-          .build()
+                  .build())
             : SizedBox.shrink()
         ),
-    ]);
+      ],
+    );
   }
 
   Widget _buildSubjectEmail(BuildContext context) {
     return Row(
-      crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Padding(
-          padding: EdgeInsets.only(right: 8, top: 16),
+              padding: EdgeInsets.only(right: 8),
               child: Text(
                   '${AppLocalizations.of(context).subject_email}:',
                   style: TextStyle(fontSize: 15, color: AppColor.colorHintEmailAddressInput))),
           Expanded(
+              child: FocusScope(child: Focus(
+                onFocusChange: (focus) => controller.onSubjectEmailFocusChange(focus),
                 child: (TextFieldBuilder()
                     ..key(Key('subject_email_input'))
                     ..cursorColor(AppColor.colorTextButton)
+                    ..maxLines(responsiveUtils.isMobile(context) ? null : 1)
                     ..onChange((value) => controller.setSubjectEmail(value))
-              ..textStyle(TextStyle(color: AppColor.colorEmailAddress, fontSize: 15))
+                    ..textStyle(TextStyle(color: Colors.black, fontSize: 15, fontWeight: FontWeight.normal))
                     ..textDecoration(InputDecoration(contentPadding: EdgeInsets.zero, border: InputBorder.none))
                     ..addController(controller.subjectEmailInputController))
-            .build()
+                  .build(),
+              ))
           )
         ]
     );
   }
 
-  Widget _buildEditorAndAttachments(BuildContext context) {
+  Widget _buildListButton(BuildContext context) {
-    return NotificationListener<ScrollNotification>(
+    return  Transform(
-        onNotification: (ScrollNotification scrollInfo) {
+        transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
-          if (scrollInfo is ScrollEndNotification) {
+        child: Padding(
-            if (scrollInfo.metrics.pixels >= 30) {
+            padding: EdgeInsets.symmetric(vertical: 5),
-              controller.collapseComposer(ExpandMode.COLLAPSE);
+            child: Row(children: [
-            } else if (scrollInfo.metrics.pixels <= scrollInfo.metrics.minScrollExtent) {
+              buildIconWeb(
-              controller.collapseComposer(ExpandMode.EXPAND);
+                  icon: SvgPicture.asset(imagePaths.icAttachmentsComposer, color: AppColor.colorTextButton, fit: BoxFit.fill),
+                  tooltip: AppLocalizations.of(context).attach_file,
+                  onTap: () => controller.openPickAttachmentMenu(context, _pickAttachmentsActionTiles(context))),
+            ])
+        )
+    );
   }
-          }
+
-          return false;
+  Widget _buildBodyMobile(BuildContext context) {
-        },
+    return SingleChildScrollView(
-        child: SingleChildScrollView(
       physics: ClampingScrollPhysics(),
       child: Column(children: [
-            Obx(() => Padding(
+        _buildEmailAddress(context),
-                padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
+        Divider(color: AppColor.colorDividerComposer, height: 1),
-                child: _buildTitleComposer(context, controller.isEnableEmailSendButton.value))),
+        Padding(padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8), child: _buildSubjectEmail(context)),
-            Padding(padding: EdgeInsets.symmetric(horizontal: 16), child: _buildEmailAddress(context)),
+        Divider(color: AppColor.colorDividerComposer, height: 1),
-            Padding(padding: EdgeInsets.symmetric(horizontal: 16), child: Divider(color: AppColor.colorDividerComposer, height: 1)),
+        Padding(padding: EdgeInsets.symmetric(horizontal: 16),  child: _buildListButton(context)),
-            Padding(padding: EdgeInsets.symmetric(horizontal: 16), child: _buildSubjectEmail(context)),
+        Divider(color: AppColor.colorDividerComposer, height: 1),
-            Padding(padding: EdgeInsets.symmetric(horizontal: 16), child: Divider(color: AppColor.colorDividerComposer, height: 1)),
         Obx(() => controller.attachments.isNotEmpty
             ? Padding(
                 padding: EdgeInsets.symmetric(horizontal: 16),
@@ -289,7 +336,57 @@ class ComposerView extends GetWidget<ComposerController> {
             padding: EdgeInsets.only(left: 16, right: 16, bottom: 20),
             child: _buildComposerEditor(context)),
       ])
+    );
+  }
+
+  Widget _buildBodyTablet(BuildContext context) {
+    return SingleChildScrollView(
+      physics: ClampingScrollPhysics(),
+      child: Column(children: [
+        Padding(
+            padding: EdgeInsets.only(left: 16),
+            child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
+              Padding(padding: EdgeInsets.only(top: 20),
+                  child: (AvatarBuilder()
+                      ..text('${controller.mailboxDashBoardController.userProfile.value?.getAvatarText() ?? ''}')
+                      ..size(56)
+                      ..addTextStyle(TextStyle(fontWeight: FontWeight.w600, fontSize: 28, color: Colors.white))
+                      ..backgroundColor(AppColor.colorAvatar))
+                    .build()),
+              Expanded(child: Padding(
+                padding: EdgeInsets.only(left: 16),
+                child: Column(children: [
+                  _buildEmailAddress(context),
+                  Divider(color: AppColor.colorDividerComposer, height: 1),
+                  Padding(padding: EdgeInsets.only(right: 16), child: _buildSubjectEmail(context)),
+                  Divider(color: AppColor.colorDividerComposer, height: 1),
+                  _buildListButton(context),
+                ]),
+              ))
+            ])),
+        Divider(color: AppColor.colorDividerComposer, height: 1),
+        Padding(
+            padding: EdgeInsets.only(left: 60, right: 25),
+            child: Column(children: [
+              Obx(() => controller.attachments.isNotEmpty
+                  ? Padding(
+                      padding: EdgeInsets.symmetric(horizontal: 16),
+                      child: _buildAttachmentsTitle(context, controller.attachments, controller.expandModeAttachments.value))
+                  : SizedBox.shrink()),
+              Obx(() => controller.attachments.isEmpty
+                  ? _buildAttachmentsLoadingView()
+                  : SizedBox.shrink()),
+              Obx(() => controller.attachments.isNotEmpty
+                  ? Padding(
+                      padding: EdgeInsets.only(bottom: 8, left: 16, right: 16),
+                      child: _buildAttachmentsList(context, controller.attachments, controller.expandModeAttachments.value))
+                  : SizedBox.shrink()),
+              Padding(
+                  padding: EdgeInsets.only(left: 16, right: 16, bottom: 20, top: 10),
+                  child: _buildComposerEditor(context)),
+            ])
         )
+      ])
     );
   }
 

lib/features/composer/presentation/composer_view_web.dart

@@ -310,7 +310,7 @@ class ComposerView extends GetWidget<ComposerController> {
             children: [
               Obx(() => Padding(
                   padding: EdgeInsets.only(left: responsiveUtils.isMobile(context) ? 16 : 0),
-                  child: (EmailAddressInputBuilder(context, imagePaths,
+                  child: (EmailAddressInputBuilder(context, imagePaths, responsiveUtils,
                           PrefixEmailAddress.to,
                           controller.listToEmailAddress,
                           controller.listEmailAddressType,
@@ -331,7 +331,7 @@ class ComposerView extends GetWidget<ComposerController> {
               Obx(() => controller.listEmailAddressType.contains(PrefixEmailAddress.cc) == true
                   ? Padding(
                   padding: EdgeInsets.only(left: responsiveUtils.isMobile(context) ? 16 : 0),
-                  child: (EmailAddressInputBuilder(context, imagePaths,
+                  child: (EmailAddressInputBuilder(context, imagePaths, responsiveUtils,
                             PrefixEmailAddress.cc,
                             controller.listCcEmailAddress,
                             controller.listEmailAddressType,
@@ -352,7 +352,7 @@ class ComposerView extends GetWidget<ComposerController> {
               Obx(() => controller.listEmailAddressType.contains(PrefixEmailAddress.bcc) == true
                   ? Padding(
                       padding: EdgeInsets.only(left: responsiveUtils.isMobile(context) ? 16 : 0),
-                      child: (EmailAddressInputBuilder(context, imagePaths,
+                      child: (EmailAddressInputBuilder(context, imagePaths, responsiveUtils,
                             PrefixEmailAddress.bcc,
                             controller.listBccEmailAddress,
                             controller.listEmailAddressType,

lib/features/composer/presentation/widgets/email_address_input_builder.dart

@@ -23,6 +23,7 @@ class EmailAddressInputBuilder {
 
   final BuildContext _context;
   final ImagePaths _imagePaths;
+  final ResponsiveUtils _responsiveUtils;
   final ExpandMode expandMode;
   final PrefixEmailAddress _prefixEmailAddress;
   final List<PrefixEmailAddress> _listEmailAddressType;
@@ -30,7 +31,7 @@ class EmailAddressInputBuilder {
   final FocusNode? focusNode;
   final bool? isInitial;
 
-  List<EmailAddress> _listEmailAddress;
+  List<EmailAddress> _listEmailAddress = <EmailAddress>[];
 
   OnUpdateListEmailAddressAction? _onUpdateListEmailAddressAction;
   OnSuggestionEmailAddress? _onSuggestionEmailAddress;
@@ -66,6 +67,7 @@ class EmailAddressInputBuilder {
   EmailAddressInputBuilder(
     this._context,
     this._imagePaths,
+    this._responsiveUtils,
     this._prefixEmailAddress,
     this._listEmailAddress,
     this._listEmailAddressType,
@@ -94,7 +96,7 @@ class EmailAddressInputBuilder {
             if (!_listEmailAddressType.contains(PrefixEmailAddress.cc))
               Transform(
                 transform: Matrix4.translationValues(
-                    _listEmailAddressType.contains(PrefixEmailAddress.bcc) ? 0.0 : 16.0,
+                    _listEmailAddressType.contains(PrefixEmailAddress.bcc) ? 0.0 : _responsiveUtils.isMobile(_context) ? 24 : 16.0,
                     0.0, 0.0),
                 child: buildTextCircleButton(AppLocalizations.of(_context).cc_email_address_prefix,
                   textStyle: TextStyle(
@@ -217,32 +219,35 @@ class EmailAddressInputBuilder {
   }
 
   Widget _buildSuggestionItem(StateSetter setState, BuildContext context, TagsEditorState<EmailAddress> tagEditorState, EmailAddress emailAddress) {
-    return Container(
+    return ListTile(
+      leading: Container(
+        width: 40,
+        height: 40,
+        alignment: Alignment.center,
         decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(8),
+          shape: BoxShape.circle,
-          border: Border.all(color: Colors.white),
+          color: AppColor.avatarColor,
-          color: Colors.white),
+          border: Border.all(color: AppColor.colorShadowBgContentEmail, width: 1.0)),
-      child: ListTile(
-        key: ObjectKey(emailAddress),
-        leading: CircleAvatar(
-            backgroundColor: AppColor.avatarColor,
         child: Text(
             emailAddress.asString().isNotEmpty ? emailAddress.asString()[0].toUpperCase() : '',
             style: TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.w600))),
       title: Text(
           emailAddress.asString(),
+          maxLines: 1,
+          overflow: kIsWeb ? null : TextOverflow.ellipsis,
           style: TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.normal)),
       subtitle: emailAddress.displayName.isNotEmpty && emailAddress.emailAddress.isNotEmpty
           ? Text(
               emailAddress.emailAddress,
+              maxLines: 1,
+              overflow: kIsWeb ? null : TextOverflow.ellipsis,
               style: TextStyle(color: AppColor.colorHintSearchBar, fontSize: 13, fontWeight: FontWeight.normal))
           : null,
       onTap: () {
         setState(() => _listEmailAddress.add(emailAddress));
-          tagEditorState.selectSuggestion(emailAddress);
         _onUpdateListEmailAddressAction?.call(_prefixEmailAddress, _listEmailAddress);
+        tagEditorState.selectSuggestion(emailAddress);
       },
-      ),
     );
   }