Fix padding item email in Thread and Search

Signed-off-by: dab246 <tdvu@linagora.com>
(cherry picked from commit 377085ba9054c6eb4c8e3d8388821473b3335962)

core/lib/presentation/views/dialog/confirmation_dialog_builder.dart

@@ -1,7 +1,6 @@
 
 import 'package:core/core.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 
 typedef OnConfirmButtonAction = void Function();
 typedef OnCancelButtonAction = void Function();

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart

@@ -61,10 +61,7 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
                       Container(
                         width: ResponsiveUtils.defaultSizeMenu,
                         color: Colors.white,
-                        padding: EdgeInsets.only(
+                        padding: const EdgeInsetsDirectional.only(start: 28),
-                          left: AppUtils.isDirectionRTL(context) ? 0 : 28,
-                          right: AppUtils.isDirectionRTL(context) ? 28 : 0,
-                        ),
                         alignment: Alignment.center,
                         height: 80,
                         child: Row(children: [
@@ -246,26 +243,21 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
 
   Widget _buildThreadViewForWebDesktop(BuildContext context) {
     return Container(
-      margin: EdgeInsets.only(
+      margin: const EdgeInsetsDirectional.only(end: 16, top: 8, bottom: 16),
-        right: AppUtils.isDirectionRTL(context) ? 0 : 16,
-        left: AppUtils.isDirectionRTL(context) ? 16 : 0,
-        top: 8,
-        bottom: 16
-      ),
       decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(20),
+        borderRadius: const BorderRadius.all(Radius.circular(20)),
         border: Border.all(color: AppColor.colorBorderBodyThread, width: 1),
         color: Colors.white),
       child: ClipRRect(
-        borderRadius: BorderRadius.circular(20),
+        borderRadius: const BorderRadius.all(Radius.circular(20)),
         child: Column(children: [
           Obx(() {
-            if (controller.isSelectionEnabled()) {
+            final listEmailSelected = controller.listEmailSelected;
+            if (controller.isSelectionEnabled() && listEmailSelected.isNotEmpty) {
               return Padding(
-                padding: const EdgeInsets.all(12.0),
+                padding: const EdgeInsets.symmetric(vertical: 8.5, horizontal: 16),
                 child: TopBarThreadSelection(
-                  context,
+                  listEmailSelected,
-                  controller.listEmailSelected,
                   controller.mapMailboxById,
                   onCancelSelection: () =>
                     controller.dispatchAction(CancelSelectionAllEmailAction()),
@@ -275,11 +267,11 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
                       listEmails,
                       actionType
                     )),
-                ).build(),
+                ),
               );
             } else {
               return Padding(
-                padding: const EdgeInsets.all(16.0),
+                padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                 child: _buildListButtonTopBar(context),
               );
             }

lib/features/mailbox_dashboard/presentation/widgets/top_bar_thread_selection.dart

@@ -1,9 +1,8 @@
 
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
-import 'package:core/presentation/views/button/icon_button_web.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
 import 'package:model/email/email_action_type.dart';
@@ -14,125 +13,138 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 typedef OnEmailActionTypeAction = Function(List<PresentationEmail> listEmail, EmailActionType actionType);
 
-class TopBarThreadSelection {
+class TopBarThreadSelection extends StatelessWidget{
 
   final imagePaths = Get.find<ImagePaths>();
 
-  final BuildContext context;
   final List<PresentationEmail> listEmail;
   final Map<MailboxId, PresentationMailbox> mapMailbox;
   final OnEmailActionTypeAction? onEmailActionTypeAction;
   final VoidCallback? onCancelSelection;
 
   TopBarThreadSelection(
-    this.context,
     this.listEmail,
-    this.mapMailbox, {
+    this.mapMailbox,
+    {
+      super.key,
       this.onEmailActionTypeAction,
       this.onCancelSelection,
-  });
+    }
+  );
 
-  Widget build() {
+  @override
+  Widget build(BuildContext context) {
     final canDeletePermanently = listEmail.isAllCanDeletePermanently(mapMailbox);
     final canSpamAndMove = listEmail.isAllCanSpamAndMove(mapMailbox);
     final isAllSpam = listEmail.isAllSpam(mapMailbox);
     final isAllBelongToTheSameMailbox = listEmail.isAllBelongToTheSameMailbox(mapMailbox);
 
     return Row(children: [
-      buildIconWeb(
+      TMailButtonWidget.fromIcon(
-          icon: SvgPicture.asset(
+        icon: imagePaths.icClose,
-              imagePaths.icClose,
+        iconColor: AppColor.primaryColor,
-              colorFilter: AppColor.colorTextButton.asFilter(),
+        tooltipMessage: AppLocalizations.of(context).cancel,
-              fit: BoxFit.fill),
+        backgroundColor: Colors.transparent,
-          tooltip: AppLocalizations.of(context).cancel,
+        iconSize: 28,
-          onTap: onCancelSelection),
+        padding: const EdgeInsets.all(3),
-      Text(AppLocalizations.of(context).count_email_selected(listEmail.length),
+        onTapActionCallback: onCancelSelection
+      ),
+      Text(
+        AppLocalizations.of(context).count_email_selected(listEmail.length),
         style: const TextStyle(
           fontSize: 17,
           fontWeight: FontWeight.w500,
-              color: AppColor.colorTextButton)),
+          color: AppColor.colorTextButton
+        )
+      ),
       const SizedBox(width: 30),
-      buildIconWeb(
+      TMailButtonWidget.fromIcon(
-          icon: SvgPicture.asset(
+        icon:  listEmail.isAllEmailRead
-              listEmail.isAllEmailRead
           ? imagePaths.icUnread
           : imagePaths.icRead,
-              fit: BoxFit.fill),
+        tooltipMessage: listEmail.isAllEmailRead
-          tooltip: listEmail.isAllEmailRead
           ? AppLocalizations.of(context).mark_as_unread
           : AppLocalizations.of(context).mark_as_read,
-          onTap: () => onEmailActionTypeAction?.call(
+        backgroundColor: Colors.transparent,
+        iconSize: 24,
+        onTapActionCallback: () => onEmailActionTypeAction?.call(
           List.from(listEmail),
-              listEmail.isAllEmailRead
+          listEmail.isAllEmailRead ? EmailActionType.markAsUnread : EmailActionType.markAsRead
-                  ? EmailActionType.markAsUnread
+        )
-                  : EmailActionType.markAsRead)),
+      ),
-      buildIconWeb(
+      TMailButtonWidget.fromIcon(
-          icon: SvgPicture.asset(
+        icon: listEmail.isAllEmailStarred
-              listEmail.isAllEmailStarred
           ? imagePaths.icUnStar
           : imagePaths.icStar,
-              fit: BoxFit.fill),
+        tooltipMessage: listEmail.isAllEmailStarred
-          tooltip: listEmail.isAllEmailStarred
           ? AppLocalizations.of(context).un_star
           : AppLocalizations.of(context).star,
-          onTap: () => onEmailActionTypeAction?.call(
+        backgroundColor: Colors.transparent,
+        iconSize: 24,
+        onTapActionCallback: () => onEmailActionTypeAction?.call(
           List.from(listEmail),
-              listEmail.isAllEmailStarred
+          listEmail.isAllEmailStarred ? EmailActionType.unMarkAsStarred : EmailActionType.markAsStarred
-                  ? EmailActionType.unMarkAsStarred
+        )
-                  : EmailActionType.markAsStarred)),
+      ),
     if (canSpamAndMove)
      ...[
-       buildIconWeb(
+       TMailButtonWidget.fromIcon(
-           icon: SvgPicture.asset(imagePaths.icMove, fit: BoxFit.fill),
+         icon: imagePaths.icMove,
-           tooltip: AppLocalizations.of(context).move,
+         iconSize: 22,
-           onTap: () => onEmailActionTypeAction?.call(
+         tooltipMessage: AppLocalizations.of(context).move,
+         backgroundColor: Colors.transparent,
+         onTapActionCallback: () => onEmailActionTypeAction?.call(
            List.from(listEmail),
-               EmailActionType.moveToMailbox)),
+           EmailActionType.moveToMailbox
-       buildIconWeb(
+         )
-           icon: SvgPicture.asset(
+       ),
-               isAllSpam ? imagePaths.icNotSpam : imagePaths.icSpam,
+       TMailButtonWidget.fromIcon(
-               fit: BoxFit.fill),
+         icon: isAllSpam ? imagePaths.icNotSpam : imagePaths.icSpam,
-           tooltip: isAllSpam
+         backgroundColor: Colors.transparent,
+         iconSize: 24,
+         tooltipMessage: isAllSpam
            ? AppLocalizations.of(context).un_spam
            : AppLocalizations.of(context).mark_as_spam,
-           onTap: () {
+         onTapActionCallback: () {
            if (isAllSpam) {
              onEmailActionTypeAction?.call(
                List.from(listEmail),
-                   EmailActionType.unSpam);
+               EmailActionType.unSpam
+             );
            } else {
              onEmailActionTypeAction?.call(
                List.from(listEmail.listEmailCanSpam(mapMailbox)),
-                   EmailActionType.moveToSpam);
+               EmailActionType.moveToSpam
+             );
            }
-           })
+         }
+       )
       ],
       if (isAllBelongToTheSameMailbox)
-        buildIconWeb(
+        TMailButtonWidget.fromIcon(
-          icon: SvgPicture.asset(
+          icon: imagePaths.icDeleteComposer,
-              canDeletePermanently
+          backgroundColor: Colors.transparent,
-                  ? imagePaths.icDeleteComposer
+          iconSize: 20,
-                  : imagePaths.icDelete,
+          iconColor: canDeletePermanently
-              colorFilter: canDeletePermanently
+            ? AppColor.colorDeletePermanentlyButton
-                  ? AppColor.colorDeletePermanentlyButton.asFilter()
+            : AppColor.primaryColor,
-                  : AppColor.primaryColor.asFilter(),
+          tooltipMessage: canDeletePermanently
-              width: 20,
-              height: 20,
-              fit: BoxFit.fill),
-          tooltip: canDeletePermanently
             ? AppLocalizations.of(context).delete_permanently
             : AppLocalizations.of(context).move_to_trash,
-          onTap: () {
+          onTapActionCallback: () {
             if (canDeletePermanently) {
               onEmailActionTypeAction?.call(
                 List.from(listEmail),
-                  EmailActionType.deletePermanently);
+                EmailActionType.deletePermanently
+              );
             } else {
               onEmailActionTypeAction?.call(
                 List.from(listEmail),
-                  EmailActionType.moveToTrash);
+                EmailActionType.moveToTrash
+              );
             }
-          }),
+          }
+        ),
     ]);
   }
 }

lib/features/search/email/presentation/search_email_view.dart

@@ -29,6 +29,7 @@ import 'package:tmail_ui_user/features/search/email/presentation/widgets/email_s
 import 'package:tmail_ui_user/features/search/email/presentation/widgets/email_sort_by_cupertino_action_sheet_action_builder.dart';
 import 'package:tmail_ui_user/features/thread/domain/state/search_email_state.dart';
 import 'package:tmail_ui_user/features/thread/domain/state/search_more_email_state.dart';
+import 'package:tmail_ui_user/features/thread/presentation/styles/item_email_tile_styles.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/email_tile_builder.dart'
   if (dart.library.html) 'package:tmail_ui_user/features/thread/presentation/widgets/email_tile_web_builder.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/empty_emails_widget.dart';
@@ -483,11 +484,10 @@ class SearchEmailView extends GetWidget<SearchEmailController>
           return false;
         },
         child: PlatformInfo.isMobile
-          ? ListView.builder(
+          ? ListView.separated(
               controller: controller.resultSearchScrollController,
               physics: const AlwaysScrollableScrollPhysics(),
               key: const PageStorageKey('list_presentation_email_in_search_view'),
-              itemExtent: _getItemExtent(context),
               itemCount: listPresentationEmail.length,
               itemBuilder: (context, index) {
                 final currentPresentationEmail = listPresentationEmail[index];
@@ -497,8 +497,7 @@ class SearchEmailView extends GetWidget<SearchEmailController>
                   searchQuery: controller.searchQuery,
                   isShowingEmailContent: controller.mailboxDashBoardController.selectedEmail.value?.id == currentPresentationEmail.id,
                   isSearchEmailRunning: true,
-                  padding: SearchEmailUtils.getPaddingSearchResultList(context, controller.responsiveUtils),
+                  padding: SearchEmailUtils.getPaddingItemListMobile(context, controller.responsiveUtils),
-                  paddingDivider: SearchEmailUtils.getPaddingDividerSearchResultList(context, controller.responsiveUtils),
                   mailboxContain: currentPresentationEmail.mailboxContain,
                   emailActionClick: (action, email) {
                     controller.pressEmailAction(
@@ -523,15 +522,23 @@ class SearchEmailView extends GetWidget<SearchEmailController>
                     }
                   },
                 ));
+              },
+              separatorBuilder: (BuildContext context, int index) {
+                if (index < listPresentationEmail.length - 1) {
+                  return Padding(
+                    padding: SearchEmailUtils.getPaddingItemListMobile(context, controller.responsiveUtils),
+                    child: const Divider(color: AppColor.lineItemListColor, height: 1));
+                } else {
+                  return const SizedBox.shrink();
                 }
+              },
             )
           : ScrollbarListView(
               scrollController: controller.resultSearchScrollController,
-              child: ListView.builder(
+              child: ListView.separated(
                 controller: controller.resultSearchScrollController,
                 physics: const AlwaysScrollableScrollPhysics(),
                 key: const PageStorageKey('list_presentation_email_in_search_view'),
-                itemExtent: _getItemExtent(context),
                 itemCount: listPresentationEmail.length,
                 itemBuilder: (context, index) {
                   final currentPresentationEmail = listPresentationEmail[index];
@@ -542,7 +549,6 @@ class SearchEmailView extends GetWidget<SearchEmailController>
                     isShowingEmailContent: controller.mailboxDashBoardController.selectedEmail.value?.id == currentPresentationEmail.id,
                     isSearchEmailRunning: true,
                     padding: SearchEmailUtils.getPaddingSearchResultList(context, controller.responsiveUtils),
-                    paddingDivider: SearchEmailUtils.getPaddingDividerSearchResultList(context, controller.responsiveUtils),
                     mailboxContain: currentPresentationEmail.mailboxContain,
                     emailActionClick: (action, email) {
                       controller.pressEmailAction(
@@ -566,21 +572,26 @@ class SearchEmailView extends GetWidget<SearchEmailController>
                         );
                       }
                     },
+
                   ));
-                }
+                },
+                separatorBuilder: (context, index) {
+                  return Padding(
+                    padding: ItemEmailTileStyles.getPaddingDividerWeb(context, controller.responsiveUtils),
+                    child: Divider(
+                      color: index < listPresentationEmail.length - 1 &&
+                        controller.selectionMode.value == SelectMode.INACTIVE
+                        ? AppColor.lineItemListColor
+                        : Colors.white,
+                      height: 1
+                    )
+                  );
+                },
               )
             )
     );
   }
 
-  double? _getItemExtent(BuildContext context) {
-    if (PlatformInfo.isWeb) {
-      return controller.responsiveUtils.isDesktop(context) ? 52 : 95;
-    } else {
-      return null;
-    }
-  }
-
   Widget _buildLoadingView() {
     return Obx(() => controller.viewState.value.fold(
         (failure) => const SizedBox.shrink(),

lib/features/search/email/presentation/utils/search_email_utils.dart

@@ -6,10 +6,14 @@ import 'package:flutter/material.dart';
 class SearchEmailUtils {
   static EdgeInsets getPaddingAppBar(BuildContext context, ResponsiveUtils responsiveUtils) {
     if (PlatformInfo.isWeb) {
+      if (responsiveUtils.isMobile(context)) {
         return const EdgeInsets.symmetric(horizontal: 16);
       } else {
-      if (responsiveUtils.isScreenWithShortestSide(context)) {
+        return const EdgeInsets.symmetric(horizontal: 32);
-        return const EdgeInsets.symmetric(horizontal: 10);
+      }
+    } else {
+      if (responsiveUtils.isPortraitMobile(context)) {
+        return const EdgeInsets.symmetric(horizontal: 8);
       } else {
         return const EdgeInsets.symmetric(horizontal: 32);
       }
@@ -49,31 +53,35 @@ class SearchEmailUtils {
   }
 
   static EdgeInsets getPaddingSearchFilterButton(BuildContext context, ResponsiveUtils responsiveUtils) {
-    if (PlatformInfo.isWeb || !responsiveUtils.isScreenWithShortestSide(context)) {
+    if (PlatformInfo.isWeb) {
-      return const EdgeInsets.all(12);
-    } else {
       return const EdgeInsets.symmetric(vertical: 12, horizontal: 16);
+    } else {
+      if (responsiveUtils.isPortraitMobile(context)) {
+        return const EdgeInsets.symmetric(vertical: 12, horizontal: 16);
+      } else {
+        return const EdgeInsets.symmetric(vertical: 12, horizontal: 32);
+      }
+    }
+  }
+
+  static EdgeInsets getPaddingItemListMobile(BuildContext context, ResponsiveUtils responsiveUtils) {
+    if (responsiveUtils.isPortraitMobile(context)) {
+      return const EdgeInsets.symmetric(horizontal: 16);
+    } else {
+      return const EdgeInsets.symmetric(horizontal: 32);
     }
   }
 
   static EdgeInsets getMarginSearchFilterButton(BuildContext context, ResponsiveUtils responsiveUtils) {
-    if (PlatformInfo.isWeb || !responsiveUtils.isScreenWithShortestSide(context)) {
+    if (PlatformInfo.isWeb) {
       return const EdgeInsets.symmetric(horizontal: 20);
     } else {
       return EdgeInsets.zero;
     }
   }
 
-  static EdgeInsets getPaddingSearchResultList(BuildContext context, ResponsiveUtils responsiveUtils) {
+  static EdgeInsetsGeometry getPaddingSearchResultList(BuildContext context, ResponsiveUtils responsiveUtils) {
-    if (PlatformInfo.isWeb) {
+    return const EdgeInsetsDirectional.only(top: 8, bottom: 8, end: 8);
-      return const EdgeInsets.only(left: 10);
-    } else {
-      if (responsiveUtils.isScreenWithShortestSide(context)) {
-        return const EdgeInsets.symmetric(horizontal: 16, vertical: 5);
-      } else {
-        return const EdgeInsets.symmetric(horizontal: 32, vertical: 5);
-      }
-    }
   }
 
   static EdgeInsets getPaddingDividerSearchResultList(BuildContext context, ResponsiveUtils responsiveUtils) {

lib/features/thread/presentation/mixin/base_email_item_tile.dart

@@ -216,30 +216,33 @@ mixin BaseEmailItemTile {
         fit: BoxFit.fill);
   }
 
-  Widget buildIconAvatarText(PresentationEmail email, {
+  Widget buildIconAvatarText(
+    PresentationEmail email,
+    {
       double? iconSize,
       TextStyle? textStyle
-  }) {
+    }
+  ) {
     return Container(
-        width: iconSize ?? 56,
+      width: iconSize ?? ItemEmailTileStyles.avatarIconSize,
-        height: iconSize ?? 56,
+      height: iconSize ?? ItemEmailTileStyles.avatarIconSize,
       alignment: Alignment.center,
-        decoration: BoxDecoration(
+      decoration: ShapeDecoration(
-            borderRadius: BorderRadius.circular((iconSize ?? 56) * 0.5),
+        shape: const CircleBorder(),
-            border: Border.all(color: Colors.transparent),
         gradient: LinearGradient(
           begin: Alignment.topCenter,
           end: Alignment.bottomCenter,
           stops: const [0.0, 1.0],
-                colors: email.avatarColors),
+          colors: email.avatarColors
-            color: AppColor.avatarColor
+        )
       ),
       child: Text(
         email.getAvatarText(),
         style: textStyle ?? const TextStyle(
-                fontSize: 20,
+          fontSize: 22,
           color: Colors.white,
-                fontWeight: FontWeight.w500)
+          fontWeight: FontWeight.w500
+        )
       )
     );
   }

lib/features/thread/presentation/styles/app_bar/default_web_app_bar_thread_widget_style.dart

@@ -1,5 +1,6 @@
 
 import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:tmail_ui_user/features/thread/domain/model/filter_message_option.dart';
 
@@ -10,7 +11,13 @@ class DefaultWebAppBarThreadWidgetStyle {
 
   static const Color backgroundColor = Colors.white;
 
-  static const EdgeInsetsGeometry padding = EdgeInsets.symmetric(vertical: 8, horizontal: 16);
+  static EdgeInsetsGeometry getPadding(BuildContext context, ResponsiveUtils responsiveUtils) {
+    if (responsiveUtils.isMobile(context) || responsiveUtils.isTabletLarge(context)) {
+      return const EdgeInsets.symmetric(horizontal: 16, vertical: 8);
+    } else {
+      return const EdgeInsets.symmetric(horizontal: 32, vertical: 8);
+    }
+  }
   static const EdgeInsetsGeometry mailboxMenuPadding = EdgeInsets.all(5);
   static const EdgeInsetsGeometry titlePadding = EdgeInsets.symmetric(horizontal: 16);
 

lib/features/thread/presentation/styles/app_bar/mobile_app_bar_thread_widget_style.dart

@@ -1,5 +1,6 @@
 
 import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:tmail_ui_user/features/thread/domain/model/filter_message_option.dart';
 
@@ -11,7 +12,13 @@ class MobileAppBarThreadWidgetStyle {
   static const Color backgroundColor = Colors.white;
   static const Color backButtonColor = AppColor.primaryColor;
 
-  static const EdgeInsetsGeometry padding = EdgeInsets.symmetric(vertical: 8, horizontal: 16);
+  static EdgeInsetsGeometry getPadding(BuildContext context, ResponsiveUtils responsiveUtils) {
+    if (responsiveUtils.isPortraitMobile(context) || responsiveUtils.isLandscapeTablet(context)) {
+      return const EdgeInsets.symmetric(horizontal: 16, vertical: 8);
+    } else {
+      return const EdgeInsets.symmetric(horizontal: 32, vertical: 8);
+    }
+  }
 
   static const TextStyle editButtonStyle = TextStyle(
     fontSize: 17,

lib/features/thread/presentation/styles/app_bar/selection_web_app_bar_thread_widget_style.dart

@@ -1,5 +1,6 @@
 
 import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:flutter/material.dart';
 
 class SelectionWebAppBarThreadWidgetStyle {
@@ -11,7 +12,13 @@ class SelectionWebAppBarThreadWidgetStyle {
   static const Color backgroundColor = Colors.white;
   static const Color cancelButtonColor = AppColor.primaryColor;
 
-  static const EdgeInsetsGeometry padding = EdgeInsets.symmetric(vertical: 8, horizontal: 16);
+  static EdgeInsetsGeometry getPadding(BuildContext context, ResponsiveUtils responsiveUtils) {
+    if (responsiveUtils.isMobile(context) || responsiveUtils.isTabletLarge(context)) {
+      return const EdgeInsets.symmetric(horizontal: 16, vertical: 8);
+    } else {
+      return const EdgeInsets.symmetric(horizontal: 32, vertical: 8);
+    }
+  }
   static const EdgeInsetsGeometry closeButtonPadding = EdgeInsets.all(3);
 
   static const TextStyle emailCounterStyle = TextStyle(

lib/features/thread/presentation/styles/item_email_tile_styles.dart

@@ -1,9 +1,13 @@
 
 import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/utils/platform_info.dart';
 import 'package:flutter/cupertino.dart';
 
 class ItemEmailTileStyles {
 
+  static const double avatarIconSize = 60.0;
+  static const double horizontalTitleGap = 8.0;
+
   static EdgeInsetsGeometry getSpaceCalendarEventIcon(BuildContext context, ResponsiveUtils responsiveUtils) {
     if (responsiveUtils.isScreenWithShortestSide(context)) {
       return const EdgeInsetsDirectional.only(end: 4);
@@ -13,4 +17,32 @@ class ItemEmailTileStyles {
       return const EdgeInsetsDirectional.only(end: 8);
     }
   }
+
+  static EdgeInsetsGeometry getPaddingItemList(BuildContext context, ResponsiveUtils responsiveUtils) {
+    if (PlatformInfo.isWeb) {
+      if (responsiveUtils.isDesktop(context)) {
+        return const EdgeInsetsDirectional.only(start: 120);
+      } else if (responsiveUtils.isMobile(context) || responsiveUtils.isTabletLarge(context)) {
+        return const EdgeInsets.symmetric(horizontal: 16);
+      } else {
+        return const EdgeInsets.symmetric(horizontal: 32);
+      }
+    } else {
+      if (responsiveUtils.isPortraitMobile(context) || responsiveUtils.isLandscapeTablet(context)) {
+        return const EdgeInsets.symmetric(horizontal: 16);
+      } else {
+        return const EdgeInsets.symmetric(horizontal: 32);
+      }
+    }
+  }
+
+  static EdgeInsetsGeometry getPaddingDividerWeb(BuildContext context, ResponsiveUtils responsiveUtils) {
+    if (responsiveUtils.isDesktop(context)) {
+      return const EdgeInsetsDirectional.only(start: 120);
+    } else if (responsiveUtils.isMobile(context) || responsiveUtils.isTabletLarge(context)) {
+      return const EdgeInsets.symmetric(horizontal: 12);
+    } else {
+      return const EdgeInsets.symmetric(horizontal: 24);
+    }
+  }
 }

lib/features/thread/presentation/thread_view.dart

@@ -22,6 +22,7 @@ import 'package:tmail_ui_user/features/thread/domain/state/search_email_state.da
 import 'package:tmail_ui_user/features/thread/presentation/model/delete_action_type.dart';
 import 'package:tmail_ui_user/features/thread/presentation/styles/banner_delete_all_spam_emails_styles.dart';
 import 'package:tmail_ui_user/features/thread/presentation/styles/banner_empty_trash_styles.dart';
+import 'package:tmail_ui_user/features/thread/presentation/styles/item_email_tile_styles.dart';
 import 'package:tmail_ui_user/features/thread/presentation/styles/scroll_to_top_button_widget_styles.dart';
 import 'package:tmail_ui_user/features/thread/presentation/thread_controller.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar/app_bar_thread_widget.dart';
@@ -193,10 +194,8 @@ class ThreadView extends GetWidget<ThreadController>
   Widget _buildSearchBarView(BuildContext context) {
     return Container(
       color: Colors.white,
-      padding: EdgeInsets.symmetric(
+      padding: ItemEmailTileStyles.getPaddingItemList(context, controller.responsiveUtils),
-        horizontal: 16,
+      margin: EdgeInsets.only(bottom: !controller.responsiveUtils.isWebDesktop(context) ? 8 : 0),
-        vertical: controller.responsiveUtils.isWebNotDesktop(context) ? 8 : 0),
-      margin: EdgeInsets.only(bottom: PlatformInfo.isMobile ? 8 : 0),
       child: SearchBarView(controller.imagePaths,
         hintTextSearch: AppLocalizations.of(context).search_emails,
         onOpenSearchViewAction: controller.goToSearchView));
@@ -346,14 +345,21 @@ class ThreadView extends GetWidget<ThreadController>
         return false;
       },
       child: PlatformInfo.isMobile
-        ? ListView.builder(
+        ? ListView.separated(
             key: const PageStorageKey('list_presentation_email_in_threads'),
             controller: controller.listEmailController,
             physics: const AlwaysScrollableScrollPhysics(),
-            padding: EdgeInsets.zero,
-            itemExtent: _getItemExtent(context),
             itemCount: listPresentationEmail.length,
-            itemBuilder: (context, index) => Obx(() => _buildEmailItem(context, listPresentationEmail[index]))
+            itemBuilder: (context, index) => Obx(() => _buildEmailItemNotDraggable(context, listPresentationEmail[index])),
+            separatorBuilder: (context, index) {
+              if (index < listPresentationEmail.length - 1) {
+                return Padding(
+                  padding: ItemEmailTileStyles.getPaddingItemList(context, controller.responsiveUtils),
+                  child: const Divider(color: AppColor.lineItemListColor, height: 1));
+              } else {
+                return const SizedBox.shrink();
+              }
+            },
           )
         : Focus(
             focusNode: controller.focusNodeKeyBoard,
@@ -361,14 +367,24 @@ class ThreadView extends GetWidget<ThreadController>
             onKey: controller.handleKeyEvent,
             child: ScrollbarListView(
               scrollController: controller.listEmailController,
-              child: ListView.builder(
+              child: ListView.separated(
                 key: const PageStorageKey('list_presentation_email_in_threads'),
                 controller: controller.listEmailController,
                 physics: const AlwaysScrollableScrollPhysics(),
-                padding: EdgeInsets.zero,
-                itemExtent: _getItemExtent(context),
                 itemCount: listPresentationEmail.length,
-                itemBuilder: (context, index) => Obx(() => _buildEmailItem(context, listPresentationEmail[index]))
+                itemBuilder: (context, index) => Obx(() => _buildEmailItem(context, listPresentationEmail[index])),
+                separatorBuilder: (context, index) {
+                  return Padding(
+                    padding: ItemEmailTileStyles.getPaddingDividerWeb(context, controller.responsiveUtils),
+                    child: Divider(
+                      color: index < listPresentationEmail.length - 1 &&
+                        controller.mailboxDashBoardController.currentSelectMode.value == SelectMode.INACTIVE
+                          ? AppColor.lineItemListColor
+                          : Colors.white,
+                      height: 1
+                    )
+                  );
+                },
               ),
             ),
           )
@@ -546,14 +562,6 @@ class ThreadView extends GetWidget<ThreadController>
     );
   }
 
-  double? _getItemExtent(BuildContext context) {
-    if (PlatformInfo.isWeb) {
-     return controller.responsiveUtils.isDesktop(context) ? 52 : 98;
-    } else {
-      return null;
-    }
-  }
-
   Widget _buildEmptyEmail(BuildContext context) {
     return Obx(() => controller.viewState.value.fold(
       (failure) => const SizedBox.shrink(),

lib/features/thread/presentation/widgets/app_bar/default_web_app_bar_thread_widget.dart

@@ -1,5 +1,6 @@
 
 import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/utils/style_utils.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:flutter/material.dart';
@@ -13,6 +14,7 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class DefaultWebAppBarThreadWidget extends StatelessWidget {
   final _imagePaths = Get.find<ImagePaths>();
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
 
   final PresentationMailbox? mailboxSelected;
   final FilterMessageOption filterOption;
@@ -34,7 +36,7 @@ class DefaultWebAppBarThreadWidget extends StatelessWidget {
     return LayoutBuilder(builder: (context, constraints) {
       return Container(
         color: DefaultWebAppBarThreadWidgetStyle.backgroundColor,
-        padding: DefaultWebAppBarThreadWidgetStyle.padding,
+        padding: DefaultWebAppBarThreadWidgetStyle.getPadding(context, _responsiveUtils),
         constraints: const BoxConstraints(minHeight: DefaultWebAppBarThreadWidgetStyle.minHeight),
         child: Row(
           children: [

lib/features/thread/presentation/widgets/app_bar/mobile_app_bar_thread_widget.dart

@@ -1,5 +1,6 @@
 
 import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
@@ -14,6 +15,7 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class MobileAppBarThreadWidget extends StatelessWidget {
   final _imagePaths = Get.find<ImagePaths>();
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
 
   final PresentationMailbox? mailboxSelected;
   final List<PresentationEmail> listEmailSelected;
@@ -43,7 +45,7 @@ class MobileAppBarThreadWidget extends StatelessWidget {
     return LayoutBuilder(builder: (context, constraints) {
       return Container(
         color: MobileAppBarThreadWidgetStyle.backgroundColor,
-        padding: MobileAppBarThreadWidgetStyle.padding,
+        padding: MobileAppBarThreadWidgetStyle.getPadding(context, _responsiveUtils),
         constraints: const BoxConstraints(minHeight: MobileAppBarThreadWidgetStyle.minHeight),
         child: Stack(
           alignment: AlignmentDirectional.center,

lib/features/thread/presentation/widgets/app_bar/selection_web_app_bar_thread_widget.dart

@@ -1,5 +1,6 @@
 
 import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/utils/style_utils.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:flutter/material.dart';
@@ -16,6 +17,7 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class SelectionWebAppBarThreadWidget extends StatelessWidget {
   final _imagePaths = Get.find<ImagePaths>();
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
 
   final PresentationMailbox? mailboxSelected;
   final List<PresentationEmail> listEmailSelected;
@@ -42,7 +44,7 @@ class SelectionWebAppBarThreadWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       color: SelectionWebAppBarThreadWidgetStyle.backgroundColor,
-      padding: SelectionWebAppBarThreadWidgetStyle.padding,
+      padding: SelectionWebAppBarThreadWidgetStyle.getPadding(context, _responsiveUtils),
       constraints: const BoxConstraints(minHeight: SelectionWebAppBarThreadWidgetStyle.minHeight),
       child: Row(
         children: [

lib/features/thread/presentation/widgets/email_tile_builder.dart

@@ -7,6 +7,7 @@ import 'package:model/mailbox/presentation_mailbox.dart';
 import 'package:model/mailbox/select_mode.dart';
 import 'package:tmail_ui_user/features/thread/domain/model/search_query.dart';
 import 'package:tmail_ui_user/features/thread/presentation/mixin/base_email_item_tile.dart';
+import 'package:tmail_ui_user/features/thread/presentation/styles/item_email_tile_styles.dart';
 
 class EmailTileBuilder extends StatelessWidget with BaseEmailItemTile {
 
@@ -16,7 +17,6 @@ class EmailTileBuilder extends StatelessWidget with BaseEmailItemTile {
   final SearchQuery? searchQuery;
   final bool isSearchEmailRunning;
   final EdgeInsetsGeometry? padding;
-  final EdgeInsetsGeometry? paddingDivider;
   final bool isDrag;
   final bool isShowingEmailContent;
   final OnPressEmailActionClick? emailActionClick;
@@ -31,7 +31,6 @@ class EmailTileBuilder extends StatelessWidget with BaseEmailItemTile {
     this.isSearchEmailRunning = false,
     this.mailboxContain,
     this.padding,
-    this.paddingDivider,
     this.isDrag = false,
     this.emailActionClick,
     this.onMoreActionClick,
@@ -40,18 +39,18 @@ class EmailTileBuilder extends StatelessWidget with BaseEmailItemTile {
   @override
   Widget build(BuildContext context) {
     return Material(
-      color: Colors.transparent,
+      type: MaterialType.transparency,
-      child: Column(
+      child: ListTile(
-        children: [
-          ListTile(
         tileColor: isShowingEmailContent ? AppColor.colorItemEmailSelectedDesktop : null,
-            contentPadding: padding ?? const EdgeInsetsDirectional.symmetric(horizontal: 16, vertical: 5),
+        contentPadding: padding ?? ItemEmailTileStyles.getPaddingItemList(context, responsiveUtils),
         onTap: () => emailActionClick?.call(
             EmailActionType.preview,
             presentationEmail),
         onLongPress: () => emailActionClick?.call(
             EmailActionType.selection,
             presentationEmail),
+        minLeadingWidth: ItemEmailTileStyles.avatarIconSize,
+        horizontalTitleGap: ItemEmailTileStyles.horizontalTitleGap,
         leading: GestureDetector(
           onTap: () => emailActionClick?.call(
               selectAllMode == SelectMode.ACTIVE
@@ -59,9 +58,8 @@ class EmailTileBuilder extends StatelessWidget with BaseEmailItemTile {
                   : EmailActionType.preview,
               presentationEmail),
           child: Container(
-                  width: 56,
+            width: ItemEmailTileStyles.avatarIconSize,
-                  height: 56,
+            height: ItemEmailTileStyles.avatarIconSize,
-                  color: Colors.transparent,
             alignment: Alignment.center,
             child:  selectAllMode == SelectMode.ACTIVE
               ? buildIconAvatarSelection(context, presentationEmail)
@@ -135,11 +133,6 @@ class EmailTileBuilder extends StatelessWidget with BaseEmailItemTile {
           ],
         ),
       ),
-          Padding(
-            padding: paddingDivider ?? const EdgeInsetsDirectional.symmetric(horizontal: 16),
-            child: const Divider(color: AppColor.lineItemListColor, height: 1)),
-        ],
-      ),
     );
   }
 }

lib/features/thread/presentation/widgets/email_tile_web_builder.dart

@@ -21,8 +21,7 @@ class EmailTileBuilder extends StatefulWidget {
   final PresentationMailbox? mailboxContain;
   final SearchQuery? searchQuery;
   final bool isSearchEmailRunning;
-  final EdgeInsets? padding;
+  final EdgeInsetsGeometry? padding;
-  final EdgeInsets? paddingDivider;
   final bool isDrag;
   final bool isShowingEmailContent;
   final OnPressEmailActionClick? emailActionClick;
@@ -37,7 +36,6 @@ class EmailTileBuilder extends StatefulWidget {
     this.isSearchEmailRunning = false,
     this.mailboxContain,
     this.padding,
-    this.paddingDivider,
     this.isDrag = false,
     this.emailActionClick,
     this.onMoreActionClick,
@@ -54,15 +52,12 @@ class _EmailTileBuilderState extends State<EmailTileBuilder>  with BaseEmailItem
   Widget build(BuildContext context) {
     return Container(
       margin: _getMarginItem(context),
-      padding: _getPaddingItem(context),
+      padding: widget.padding ?? _getPaddingItem(context),
       decoration: _getDecorationItem(),
       alignment: Alignment.center,
       child: ResponsiveWidget(
         responsiveUtils: responsiveUtils,
-        mobile: Stack(
+        mobile: InkWell(
-          alignment: Alignment.bottomCenter,
-          children: [
-            InkWell(
           onTap: () => widget.emailActionClick?.call(
             EmailActionType.preview,
             widget.presentationEmail
@@ -177,16 +172,6 @@ class _EmailTileBuilderState extends State<EmailTileBuilder>  with BaseEmailItem
             ]
           )
         ),
-            if (widget.selectAllMode == SelectMode.INACTIVE)
-              Transform(
-                transform: Matrix4.translationValues(0.0, 10.0, 0.0),
-                child: const Divider(
-                  color: AppColor.lineItemListColor,
-                  height: 1
-                )
-              ),
-          ],
-        ),
         tablet: InkWell(
           onTap: () => widget.emailActionClick?.call(
             EmailActionType.preview,
@@ -216,10 +201,7 @@ class _EmailTileBuilderState extends State<EmailTileBuilder>  with BaseEmailItem
                       )
                     )
                   ),
-                  Expanded(child: Stack(
+                  Expanded(child: Column(children: [
-                    alignment: Alignment.bottomCenter,
-                    children: [
-                      Column(children: [
                     Row(children: [
                       if (!widget.presentationEmail.hasRead)
                         Padding(
@@ -291,14 +273,7 @@ class _EmailTileBuilderState extends State<EmailTileBuilder>  with BaseEmailItem
                         )
                       ),
                     ]),
-                      ]),
+                  ]))
-                      if (widget.selectAllMode == SelectMode.INACTIVE)
-                        Transform(
-                          transform: Matrix4.translationValues(0.0, 10.0, 0.0),
-                          child: const Divider(color: AppColor.lineItemListColor, height: 1),
-                        ),
-                    ],
-                  ))
                 ]
               ),
               ValueListenableBuilder(
@@ -331,10 +306,7 @@ class _EmailTileBuilderState extends State<EmailTileBuilder>  with BaseEmailItem
             widget.presentationEmail
           ),
           onHover: (value) => _hoverNotifier.value = value,
-          child: Stack(
+          child: Row(children: [
-            alignment: Alignment.bottomCenter,
-            children: [
-              Row(children: [
             Container(
               padding: const EdgeInsetsDirectional.symmetric(horizontal: 16),
               alignment: Alignment.center,
@@ -418,15 +390,6 @@ class _EmailTileBuilderState extends State<EmailTileBuilder>  with BaseEmailItem
               }
             ),
           ]),
-              if ( widget.selectAllMode == SelectMode.INACTIVE)
-                Transform(
-                  transform: Matrix4.translationValues(0.0, 10, 0.0),
-                  child: const Padding(
-                    padding: EdgeInsetsDirectional.only(start: 120),
-                    child: Divider(color: AppColor.lineItemListColor, height: 1)
-                  ),
-                )
-            ]),
         ),
       ),
     );
@@ -435,28 +398,28 @@ class _EmailTileBuilderState extends State<EmailTileBuilder>  with BaseEmailItem
   EdgeInsetsGeometry _getMarginItem(BuildContext context) {
     if (responsiveUtils.isDesktop(context)) {
       return const EdgeInsets.only(top: 3);
+    } else if (responsiveUtils.isTablet(context)) {
+      return const EdgeInsetsDirectional.only(top: 3, start: 24, end: 24);
     } else {
-      return const EdgeInsetsDirectional.only(top: 3, start: 16, end: 16);
+      return const EdgeInsetsDirectional.only(top: 3, start: 12, end: 12);
     }
   }
 
   EdgeInsetsGeometry _getPaddingItem(BuildContext context) {
     if (responsiveUtils.isDesktop(context)) {
-      return const EdgeInsets.symmetric(vertical: 8);
+      return const EdgeInsets.symmetric(vertical: 4);
     } else {
-      return const EdgeInsetsDirectional.only(bottom: 8, end: 8, top: 8);
+      return const EdgeInsetsDirectional.only(bottom: 4, end: 8, top: 4);
     }
   }
 
   BoxDecoration _getDecorationItem() {
     if ((widget.selectAllMode == SelectMode.ACTIVE && widget.presentationEmail.selectMode == SelectMode.ACTIVE) || widget.isDrag || widget.isShowingEmailContent) {
-      return BoxDecoration(
+      return const BoxDecoration(
-        borderRadius: BorderRadius.circular(14),
+        borderRadius: BorderRadius.all(Radius.circular(14)),
         color: AppColor.colorItemEmailSelectedDesktop);
     } else {
-      return BoxDecoration(
+      return const BoxDecoration(color: Colors.white);
-        borderRadius: BorderRadius.circular(0),
-        color: Colors.white);
     }
   }