TF-3704 Re-arrange layout for mailbox item in left side bar and destination picker

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

lib/features/destination_picker/presentation/destination_picker_view.dart

@@ -348,7 +348,8 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
             categories,
             controller,
             toggleMailboxCategories: controller.toggleMailboxCategories,
-            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8)
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+            isArrangeLTR: false,
           ),
           AnimatedContainer(
             duration: const Duration(milliseconds: 400),

lib/features/mailbox/presentation/mailbox_view.dart

@@ -1,5 +1,4 @@
 import 'package:core/core.dart';
-import 'package:core/utils/direction_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
@@ -331,38 +330,6 @@ class MailboxView extends BaseMailboxView {
     );
   }
 
-  Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) {
-    return Padding(
-        padding: EdgeInsetsDirectional.only(
-          start: 12,
-          end: controller.responsiveUtils.isLandscapeMobile(context) ? 8 : 28),
-        child: Row(children: [
-          TMailButtonWidget.fromIcon(
-            icon: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
-              ? controller.imagePaths.icArrowBottom
-              : DirectionUtils.isDirectionRTLByLanguage(context)
-                  ? controller.imagePaths.icArrowLeft
-                  : controller.imagePaths.icArrowRight,
-            tooltipMessage: AppLocalizations.of(context).collapse,
-            backgroundColor: Colors.transparent,
-            padding: const EdgeInsets.all(5),
-            iconColor: Colors.black,
-            iconSize: 20,
-            onTapActionCallback: () => controller.toggleMailboxCategories(categories)
-          ),
-          Expanded(
-            child: Text(
-              categories.getTitle(context),
-              maxLines: 1,
-              overflow: TextOverflow.ellipsis,
-              style: ThemeUtils.textStyleBodyBody3(
-                color: Colors.black,
-              )
-            )
-          ),
-        ]));
-  }
-
   Widget _buildBodyMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) {
     final lastNode = mailboxNode.childrenItems?.last;
 
@@ -382,7 +349,18 @@ class MailboxView extends BaseMailboxView {
       return _buildBodyMailboxCategory(context, categories, mailboxNode);
     }
     return Column(children: [
-      _buildHeaderMailboxCategory(context, categories),
+      buildHeaderMailboxCategory(
+        context,
+        controller.responsiveUtils,
+        controller.imagePaths,
+        categories,
+        controller,
+        toggleMailboxCategories: controller.toggleMailboxCategories,
+        padding: EdgeInsetsDirectional.only(
+          start: 16,
+          end: controller.responsiveUtils.isLandscapeMobile(context) ? 8 : 28),
+        isArrangeLTR: false,
+      ),
       AnimatedContainer(
         duration: const Duration(milliseconds: 400),
         child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND

lib/features/mailbox/presentation/mailbox_view_web.dart

@@ -323,7 +323,8 @@ class MailboxView extends BaseMailboxView {
             toggleMailboxCategories: controller.toggleMailboxCategories,
             padding: controller.responsiveUtils.isDesktop(context)
               ? null
-              : const EdgeInsetsDirectional.only(start: 16)
+              : const EdgeInsetsDirectional.only(start: 16),
+            isArrangeLTR: false,
           ),
           AnimatedContainer(
             duration: const Duration(milliseconds: 400),

lib/features/mailbox/presentation/mixin/mailbox_widget_mixin.dart

@@ -340,30 +340,40 @@ mixin MailboxWidgetMixin {
     BaseMailboxController baseMailboxController,
     {
       required Function(MailboxCategories categories) toggleMailboxCategories,
-      EdgeInsetsGeometry? padding
+      EdgeInsetsGeometry? padding,
+      bool isArrangeLTR = true,
     }
   ) {
-    return Padding(
+    final item = Row(children: [
-      padding: padding ?? EdgeInsets.zero,
+      if (!isArrangeLTR)
-      child: Row(children: [
+        Flexible(
-        Obx(() {
+          child: Text(
-          final expandMode = categories.getExpandMode(baseMailboxController.mailboxCategoriesExpandMode.value);
+            categories.getTitle(context),
-          return TMailButtonWidget.fromIcon(
+            maxLines: 1,
-            icon: expandMode == ExpandMode.EXPAND
+            overflow: CommonTextStyle.defaultTextOverFlow,
-              ? imagePaths.icArrowBottom
+            softWrap: CommonTextStyle.defaultSoftWrap,
-              : DirectionUtils.isDirectionRTLByLanguage(context)
+            style: ThemeUtils.textStyleBodyBody3(color: Colors.black),
-                  ? imagePaths.icArrowLeft
+          ),
-                  : imagePaths.icArrowRight,
+        ),
-            iconColor: Colors.black,
+      Obx(() {
-            iconSize: 20,
+        final expandMode = categories.getExpandMode(baseMailboxController.mailboxCategoriesExpandMode.value);
-            backgroundColor: Colors.transparent,
+        return TMailButtonWidget.fromIcon(
-            padding: const EdgeInsets.all(5),
+          icon: expandMode == ExpandMode.EXPAND
-            tooltipMessage: expandMode == ExpandMode.EXPAND
+            ? imagePaths.icArrowBottom
-              ? AppLocalizations.of(context).collapse
+            : DirectionUtils.isDirectionRTLByLanguage(context)
-              : AppLocalizations.of(context).expand,
+                ? imagePaths.icArrowLeft
-            onTapActionCallback: () => toggleMailboxCategories(categories)
+                : imagePaths.icArrowRight,
-          );
+          iconColor: Colors.black,
-        }),
+          iconSize: 20,
+          backgroundColor: Colors.transparent,
+          padding: const EdgeInsets.all(5),
+          tooltipMessage: expandMode == ExpandMode.EXPAND
+            ? AppLocalizations.of(context).collapse
+            : AppLocalizations.of(context).expand,
+          onTapActionCallback: () => toggleMailboxCategories(categories)
+        );
+      }),
+      if (isArrangeLTR)
         Expanded(child: Text(
           categories.getTitle(context),
           maxLines: 1,
@@ -371,7 +381,12 @@ mixin MailboxWidgetMixin {
           softWrap: CommonTextStyle.defaultSoftWrap,
           style: ThemeUtils.textStyleBodyBody3(color: Colors.black)
         )),
-      ])
+    ]);
-    );
+
+    if (padding != null) {
+      return Padding(padding: padding, child: item);
+    } else {
+      return item;
+    }
   }
 }

lib/features/mailbox/presentation/styles/count_of_emails_styles.dart

@@ -1,8 +0,0 @@
-
-import 'package:flutter/material.dart';
-
-class CountOfEmailsStyles {
-  static const Color textColor = Colors.black;
-  static const double textSize = 13;
-  static const FontWeight textFontWeight = FontWeight.w400;
-}

lib/features/mailbox/presentation/styles/leading_mailbox_item_widget_styles.dart

@@ -1,17 +1,8 @@
 
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/utils/direction_utils.dart';
 import 'package:flutter/material.dart';
 
 class LeadingMailboxItemWidgetStyles {
-  static const double expandIconSize = 15;
-  static const double expandIconSplashRadius = 12;
-
-  static const Color displayColor = Colors.black;
-  static const Color normalColor = AppColor.colorIconUnSubscribedMailbox;
-
-  static const EdgeInsetsGeometry expandIconPadding = EdgeInsetsDirectional.only(start: 8);
-
   static Matrix4 mailboxIconTransform(BuildContext context) => Matrix4.translationValues(
     DirectionUtils.isDirectionRTLByLanguage(context) ? 0.0 : -4.0,
     0.0,

lib/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart

@@ -3,5 +3,6 @@ class MailboxItemWidgetStyles {
   static const double selectionIconSize = 20;
   static const double space = 4;
   static const double padding = 8;
+  static const double itemPadding = 10;
   static const double borderRadius = 8;
 }

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

@@ -1,7 +1,6 @@
 
 import 'package:core/presentation/utils/style_utils.dart';
-import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/styles/count_of_emails_styles.dart';
 
 class CountOfEmailsWidget extends StatelessWidget {
 
@@ -16,10 +15,8 @@ class CountOfEmailsWidget extends StatelessWidget {
       maxLines: 1,
       overflow: CommonTextStyle.defaultTextOverFlow,
       softWrap: CommonTextStyle.defaultSoftWrap,
-      style: const TextStyle(
+      style: Theme.of(context).textTheme.bodySmall?.copyWith(
-        fontSize: CountOfEmailsStyles.textSize,
+        color: Colors.black,
-        color: CountOfEmailsStyles.textColor,
-        fontWeight: CountOfEmailsStyles.textFontWeight
       ),
     );
   }

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

@@ -1,3 +1,4 @@
+import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/views/text/text_overflow_builder.dart';
 import 'package:flutter/material.dart';
@@ -7,80 +8,128 @@ import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.d
 import 'package:tmail_ui_user/features/mailbox/presentation/styles/label_mailbox_item_widget_styles.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/empty_mailbox_popup_dialog_widget.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_expand_button.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/trailing_mailbox_item_widget.dart';
 
 class LabelMailboxItemWidget extends StatelessWidget {
 
   final ResponsiveUtils responsiveUtils;
+  final ImagePaths imagePaths;
   final MailboxNode mailboxNode;
   final bool showTrailing;
   final bool isItemHovered;
   final bool isSelected;
   final OnClickOpenMenuMailboxNodeAction? onMenuActionClick;
   final OnEmptyMailboxActionCallback? onEmptyMailboxActionCallback;
+  final OnClickExpandMailboxNodeAction? onClickExpandMailboxNodeAction;
 
   const LabelMailboxItemWidget({
     super.key,
     required this.mailboxNode,
     required this.responsiveUtils,
+    required this.imagePaths,
     this.showTrailing = true,
     this.isItemHovered = false,
     this.isSelected = false,
     this.onMenuActionClick,
     this.onEmptyMailboxActionCallback,
+    this.onClickExpandMailboxNodeAction,
   });
 
   @override
   Widget build(BuildContext context) {
-    return Column(
+    final displayNameWidget = TextOverflowBuilder(
-      crossAxisAlignment: CrossAxisAlignment.start,
+      mailboxNode.item.getDisplayName(context),
-      mainAxisSize: MainAxisSize.min,
+      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+        fontSize: LabelMailboxItemWidgetStyles.labelFolderTextSize,
+        color: LabelMailboxItemWidgetStyles.labelFolderTextColor,
+        fontWeight: _mailboxNameTextFontWeight,
+      ),
+    );
+
+    final nameWithExpandIcon = Row(
       children: [
-        if (showTrailing)
+        if (mailboxNode.hasChildren())
-          Row(
+          Flexible(child: displayNameWidget)
-            children: [
-              Expanded(
-                child: TextOverflowBuilder(
-                  mailboxNode.item.getDisplayName(context),
-                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                    fontSize: LabelMailboxItemWidgetStyles.labelFolderTextSize,
-                    color: LabelMailboxItemWidgetStyles.labelFolderTextColor,
-                    fontWeight: _mailboxNameTextFontWeight
-                  ),
-                ),
-              ),
-              if (responsiveUtils.isWebDesktop(context) && mailboxNode.item.allowedHasEmptyAction)
-                EmptyMailboxPopupDialogWidget(
-                  mailboxNode: mailboxNode,
-                  onEmptyMailboxActionCallback: (mailboxNode) => onEmptyMailboxActionCallback?.call(mailboxNode),
-                ),
-              TrailingMailboxItemWidget(
-                mailboxNode: mailboxNode,
-                isItemHovered: isItemHovered,
-                onMenuActionClick: onMenuActionClick
-              )
-            ],
-          )
         else
-          TextOverflowBuilder(
+          Flexible(
-            mailboxNode.item.getDisplayName(context),
+            child: Padding(
-            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+              padding: const EdgeInsets.symmetric(vertical: 3),
-              fontSize: LabelMailboxItemWidgetStyles.labelFolderTextSize,
+              child: displayNameWidget,
-              color: LabelMailboxItemWidgetStyles.labelFolderTextColor,
-              fontWeight: _mailboxNameTextFontWeight
             ),
           ),
-        if (mailboxNode.item.isTeamMailboxes)
+        if (mailboxNode.hasChildren())
+          MailboxExpandButton(
+            mailboxNode: mailboxNode,
+            imagePaths: imagePaths,
+            onExpandFolderActionClick: onClickExpandMailboxNodeAction,
+          ),
+      ],
+    );
+
+    if (!showTrailing) {
+      if (mailboxNode.item.isTeamMailboxes) {
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            nameWithExpandIcon,
+            TextOverflowBuilder(
+              mailboxNode.item.emailTeamMailBoxes,
+              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                fontSize: LabelMailboxItemWidgetStyles.labelFolderTextSize,
+                color: LabelMailboxItemWidgetStyles.teamMailboxEmailTextColor,
+                fontWeight: LabelMailboxItemWidgetStyles.labelFolderTextFontWeight,
+              ),
+            ),
+          ],
+        );
+      } else {
+        return nameWithExpandIcon;
+      }
+    }
+
+    final trailingWidget = TrailingMailboxItemWidget(
+      mailboxNode: mailboxNode,
+      responsiveUtils: responsiveUtils,
+      imagePaths: imagePaths,
+      isItemHovered: isItemHovered,
+      onMenuActionClick: onMenuActionClick,
+    );
+
+    final childWidget = Row(
+      children: [
+        Expanded(child: nameWithExpandIcon),
+        if (responsiveUtils.isWebDesktop(context) &&
+            mailboxNode.item.allowedHasEmptyAction)
+          EmptyMailboxPopupDialogWidget(
+            mailboxNode: mailboxNode,
+            onEmptyMailboxActionCallback: (mailboxNode) =>
+                onEmptyMailboxActionCallback?.call(mailboxNode),
+          ),
+        trailingWidget,
+      ],
+    );
+
+    if (mailboxNode.item.isTeamMailboxes) {
+      return Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          childWidget,
           TextOverflowBuilder(
             mailboxNode.item.emailTeamMailBoxes,
             style: Theme.of(context).textTheme.bodyMedium?.copyWith(
               fontSize: LabelMailboxItemWidgetStyles.labelFolderTextSize,
               color: LabelMailboxItemWidgetStyles.teamMailboxEmailTextColor,
-              fontWeight: LabelMailboxItemWidgetStyles.labelFolderTextFontWeight
+              fontWeight: LabelMailboxItemWidgetStyles.labelFolderTextFontWeight,
             ),
-          )
+          ),
-      ],
+        ],
-    );
+      );
+    } else {
+      return childWidget;
+    }
   }
 
   FontWeight get _mailboxNameTextFontWeight {

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

@@ -1,16 +1,11 @@
 
 import 'package:core/presentation/resources/image_paths.dart';
-import 'package:core/presentation/views/button/tmail_button_widget.dart';
-import 'package:core/utils/direction_utils.dart';
 import 'package:flutter/material.dart';
-import 'package:model/extensions/presentation_mailbox_extension.dart';
-import 'package:model/mailbox/expand_mode.dart';
 import 'package:model/mailbox/select_mode.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/styles/leading_mailbox_item_widget_styles.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_icon_widget.dart';
-import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class LeadingMailboxItemWidget extends StatelessWidget {
 
@@ -18,63 +13,25 @@ class LeadingMailboxItemWidget extends StatelessWidget {
   final MailboxNode mailboxNode;
   final SelectMode selectionMode;
   final OnSelectMailboxNodeAction? onSelectMailboxFolderClick;
-  final OnClickExpandMailboxNodeAction? onExpandFolderActionClick;
 
   const LeadingMailboxItemWidget({
     super.key,
     required this.imagePaths,
     required this.mailboxNode,
     this.selectionMode = SelectMode.INACTIVE,
-    this.onExpandFolderActionClick,
     this.onSelectMailboxFolderClick,
   });
 
   @override
   Widget build(BuildContext context) {
-    return Row(children: [
+    return Transform(
-      Visibility.maintain(
+      transform: LeadingMailboxItemWidgetStyles.mailboxIconTransform(context),
-        visible: mailboxNode.hasChildren(),
+      child: MailboxIconWidget(
-        child: TMailButtonWidget.fromIcon(
+        imagePaths: imagePaths,
-          icon: _getExpandIcon(context, imagePaths),
+        mailboxNode: mailboxNode,
-          iconColor: _expandIconColor,
+        selectionMode: selectionMode,
-          iconSize: 20,
+        onSelectMailboxFolderClick: onSelectMailboxFolderClick
-          padding: const EdgeInsets.all(5),
+      )
-          backgroundColor: Colors.transparent,
+    );
-          tooltipMessage: _getExpandTooltipMessage(context),
-          onTapActionCallback: () => onExpandFolderActionClick?.call(mailboxNode)
-        ),
-      ),
-      Transform(
-        transform: LeadingMailboxItemWidgetStyles.mailboxIconTransform(context),
-        child: MailboxIconWidget(
-          imagePaths: imagePaths,
-          mailboxNode: mailboxNode,
-          selectionMode: selectionMode,
-          onSelectMailboxFolderClick: onSelectMailboxFolderClick
-        )
-      ),
-    ]);
-  }
-
-  String _getExpandIcon(BuildContext context, ImagePaths imagePaths) {
-    if (mailboxNode.expandMode == ExpandMode.EXPAND) {
-      return imagePaths.icArrowBottom;
-    } else {
-      return DirectionUtils.isDirectionRTLByLanguage(context)
-        ? imagePaths.icArrowLeft
-        : imagePaths.icArrowRight;
-    }
-  }
-
-  Color get _expandIconColor {
-    return mailboxNode.item.allowedToDisplay
-      ? LeadingMailboxItemWidgetStyles.displayColor
-      : LeadingMailboxItemWidgetStyles.normalColor;
-  }
-
-  String _getExpandTooltipMessage(BuildContext context) {
-    return mailboxNode.expandMode == ExpandMode.EXPAND
-      ? AppLocalizations.of(context).collapse
-      : AppLocalizations.of(context).expand;
   }
 }

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

@@ -0,0 +1,58 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
+import 'package:core/utils/direction_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:model/extensions/presentation_mailbox_extension.dart';
+import 'package:model/mailbox/expand_mode.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class MailboxExpandButton extends StatelessWidget {
+  final MailboxNode mailboxNode;
+  final ImagePaths imagePaths;
+  final OnClickExpandMailboxNodeAction? onExpandFolderActionClick;
+
+  const MailboxExpandButton({
+    super.key,
+    required this.mailboxNode,
+    required this.imagePaths,
+    required this.onExpandFolderActionClick,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return TMailButtonWidget.fromIcon(
+      icon: _getExpandIcon(context, imagePaths),
+      iconColor: _expandIconColor,
+      iconSize: 20,
+      padding: const EdgeInsets.all(5),
+      backgroundColor: Colors.transparent,
+      tooltipMessage: _getExpandTooltipMessage(context),
+      onTapActionCallback: () => onExpandFolderActionClick?.call(mailboxNode),
+    );
+  }
+
+  String _getExpandIcon(BuildContext context, ImagePaths imagePaths) {
+    if (mailboxNode.expandMode == ExpandMode.EXPAND) {
+      return imagePaths.icArrowBottom;
+    } else {
+      return DirectionUtils.isDirectionRTLByLanguage(context)
+          ? imagePaths.icArrowLeft
+          : imagePaths.icArrowRight;
+    }
+  }
+
+  Color get _expandIconColor {
+    return mailboxNode.item.allowedToDisplay
+        ? Colors.black
+        : AppColor.steelGray200;
+  }
+
+  String _getExpandTooltipMessage(BuildContext context) {
+    return mailboxNode.expandMode == ExpandMode.EXPAND
+        ? AppLocalizations.of(context).collapse
+        : AppLocalizations.of(context).expand;
+  }
+}

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

@@ -77,7 +77,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                 color: backgroundColorItem
               ),
               padding: const EdgeInsetsDirectional.symmetric(
-                horizontal: MailboxItemWidgetStyles.padding,
+                horizontal: MailboxItemWidgetStyles.itemPadding,
                 vertical: MailboxItemWidgetStyles.space,
               ),
               child: Row(
@@ -91,17 +91,18 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                     mailboxNode: widget.mailboxNode,
                     selectionMode: widget.selectionMode,
                     onSelectMailboxFolderClick: widget.onSelectMailboxFolderClick,
-                    onExpandFolderActionClick: widget.onExpandFolderActionClick,
                   ),
                   const SizedBox(width: MailboxItemWidgetStyles.space),
                   Expanded(
                     child: LabelMailboxItemWidget(
                       responsiveUtils: _responsiveUtils,
                       mailboxNode: widget.mailboxNode,
+                      imagePaths: _imagePaths,
                       isItemHovered: _isItemHovered,
                       isSelected: _isSelected,
                       onMenuActionClick: widget.onMenuActionClick,
-                      onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback
+                      onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback,
+                      onClickExpandMailboxNodeAction: widget.onExpandFolderActionClick,
                     )
                   ),
                 ]
@@ -123,7 +124,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                 color: backgroundColorItem
               ),
               padding: const EdgeInsetsDirectional.symmetric(
-                horizontal: MailboxItemWidgetStyles.padding,
+                horizontal: MailboxItemWidgetStyles.itemPadding,
                 vertical: MailboxItemWidgetStyles.space,
               ),
               child: Row(
@@ -133,17 +134,18 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                     mailboxNode: widget.mailboxNode,
                     selectionMode: widget.selectionMode,
                     onSelectMailboxFolderClick: widget.onSelectMailboxFolderClick,
-                    onExpandFolderActionClick: widget.onExpandFolderActionClick,
                   ),
                   const SizedBox(width: MailboxItemWidgetStyles.space),
                   Expanded(
                     child: LabelMailboxItemWidget(
                       responsiveUtils: _responsiveUtils,
                       mailboxNode: widget.mailboxNode,
+                      imagePaths: _imagePaths,
                       isItemHovered: _isItemHovered,
                       isSelected: _isSelected,
                       onMenuActionClick: widget.onMenuActionClick,
-                      onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback
+                      onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback,
+                      onClickExpandMailboxNodeAction: widget.onExpandFolderActionClick,
                     )
                   ),
                 ]
@@ -165,42 +167,37 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                   color: backgroundColorItem
                 ),
                 padding: const EdgeInsetsDirectional.symmetric(
-                  horizontal: MailboxItemWidgetStyles.padding,
+                  horizontal: MailboxItemWidgetStyles.itemPadding,
                   vertical: MailboxItemWidgetStyles.space,
                 ),
-                child: Column(
+                child: Row(
-                  mainAxisSize: MainAxisSize.min,
-                  mainAxisAlignment: MainAxisAlignment.center,
                   children: [
-                    Row(
+                    LeadingMailboxItemWidget(
-                      children: [
+                      imagePaths: _imagePaths,
-                        LeadingMailboxItemWidget(
+                      mailboxNode: widget.mailboxNode,
-                          imagePaths: _imagePaths,
+                      selectionMode: widget.selectionMode,
-                          mailboxNode: widget.mailboxNode,
+                      onSelectMailboxFolderClick: widget.onSelectMailboxFolderClick,
-                          selectionMode: widget.selectionMode,
-                          onSelectMailboxFolderClick: widget.onSelectMailboxFolderClick,
-                          onExpandFolderActionClick: widget.onExpandFolderActionClick,
-                        ),
-                        const SizedBox(width: MailboxItemWidgetStyles.padding),
-                        Expanded(
-                          child: LabelMailboxItemWidget(
-                            responsiveUtils: _responsiveUtils,
-                            mailboxNode: widget.mailboxNode,
-                            isItemHovered: _isItemHovered,
-                            isSelected: _isSelected,
-                            onMenuActionClick: widget.onMenuActionClick,
-                            onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback
-                        )
-                        ),
-                        if (_isSelectActionNoValid)
-                          SvgPicture.asset(
-                            _imagePaths.icSelectedSB,
-                            width: MailboxItemWidgetStyles.selectionIconSize,
-                            height: MailboxItemWidgetStyles.selectionIconSize,
-                            fit: BoxFit.fill
-                          )
-                      ]
                     ),
+                    const SizedBox(width: MailboxItemWidgetStyles.padding),
+                    Expanded(
+                      child: LabelMailboxItemWidget(
+                        responsiveUtils: _responsiveUtils,
+                        mailboxNode: widget.mailboxNode,
+                        imagePaths: _imagePaths,
+                        isItemHovered: _isItemHovered,
+                        isSelected: _isSelected,
+                        onMenuActionClick: widget.onMenuActionClick,
+                        onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback,
+                        onClickExpandMailboxNodeAction: widget.onExpandFolderActionClick,
+                    )
+                    ),
+                    if (_isSelectActionNoValid)
+                      SvgPicture.asset(
+                        _imagePaths.icSelectedSB,
+                        width: MailboxItemWidgetStyles.selectionIconSize,
+                        height: MailboxItemWidgetStyles.selectionIconSize,
+                        fit: BoxFit.fill
+                      )
                   ]
                 ),
               ),
@@ -222,7 +219,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                 hoverColor: AppColor.colorMailboxHovered,
                 child: Container(
                   padding: const EdgeInsetsDirectional.symmetric(
-                    horizontal: MailboxItemWidgetStyles.padding,
+                    horizontal: MailboxItemWidgetStyles.itemPadding,
                     vertical: MailboxItemWidgetStyles.space,
                   ),
                   color: widget.mailboxNode.isSelected
@@ -235,18 +232,19 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                         mailboxNode: widget.mailboxNode,
                         selectionMode: widget.selectionMode,
                         onSelectMailboxFolderClick: widget.onSelectMailboxFolderClick,
-                        onExpandFolderActionClick: widget.onExpandFolderActionClick,
                       ),
                       const SizedBox(width: MailboxItemWidgetStyles.padding),
                       Expanded(
                         child: LabelMailboxItemWidget(
                           responsiveUtils: _responsiveUtils,
                           mailboxNode: widget.mailboxNode,
+                          imagePaths: _imagePaths,
                           showTrailing: false,
                           isSelected: _isSelected,
                           isItemHovered: _isItemHovered,
                           onMenuActionClick: widget.onMenuActionClick,
-                          onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback
+                          onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback,
+                          onClickExpandMailboxNodeAction: widget.onExpandFolderActionClick,
                         )
                       ),
                       if (_isSelectActionNoValid)
@@ -256,7 +254,6 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                           height: MailboxItemWidgetStyles.selectionIconSize,
                           fit: BoxFit.fill
                         ),
-                      const SizedBox(width: MailboxItemWidgetStyles.padding),
                     ]
                   )
                 ),

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

@@ -4,7 +4,6 @@ import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
-import 'package:get/get.dart';
 import 'package:model/extensions/presentation_mailbox_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/styles/trailing_mailbox_item_widget_styles.dart';
@@ -14,15 +13,16 @@ import 'package:tmail_ui_user/features/mailbox/presentation/widgets/count_of_ema
 class TrailingMailboxItemWidget extends StatelessWidget {
 
   final MailboxNode mailboxNode;
+  final ImagePaths imagePaths;
+  final ResponsiveUtils responsiveUtils;
   final bool isItemHovered;
   final OnClickOpenMenuMailboxNodeAction? onMenuActionClick;
 
-  final _imagePaths = Get.find<ImagePaths>();
+  const TrailingMailboxItemWidget({
-  final _responsiveUtils = Get.find<ResponsiveUtils>();
-
-  TrailingMailboxItemWidget({
     super.key,
     required this.mailboxNode,
+    required this.imagePaths,
+    required this.responsiveUtils,
     this.isItemHovered = false,
     this.onMenuActionClick,
   });
@@ -32,16 +32,16 @@ class TrailingMailboxItemWidget extends StatelessWidget {
     if (PlatformInfo.isWeb) {
       if (isItemHovered) {
         return TMailButtonWidget.fromIcon(
-          margin: _responsiveUtils.isDesktop(context) && mailboxNode.item.allowedHasEmptyAction
+          margin: responsiveUtils.isDesktop(context) && mailboxNode.item.allowedHasEmptyAction
             ? EdgeInsets.zero
             : TrailingMailboxItemWidgetStyles.menuIconMargin,
-          icon: _imagePaths.icComposerMenu,
+          icon: imagePaths.icComposerMenu,
           iconSize: TrailingMailboxItemWidgetStyles.menuIconSize,
           padding: TrailingMailboxItemWidgetStyles.menuIconPadding,
           backgroundColor: TrailingMailboxItemWidgetStyles.menuIconBackgroundColor,
           onTapActionAtPositionCallback: (position) => onMenuActionClick?.call(position, mailboxNode),
         );
-      } else if (_responsiveUtils.isDesktop(context) && mailboxNode.item.allowedHasEmptyAction) {
+      } else if (responsiveUtils.isDesktop(context) && mailboxNode.item.allowedHasEmptyAction) {
         return const SizedBox();
       } else if (mailboxNode.item.allowedToDisplayCountOfUnreadEmails) {
         return Padding(