TF-3950 Apply new style for Folder Visibility on web

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

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

@@ -75,7 +75,6 @@ class _LabelMailboxItemWidgetState extends State<LabelMailboxItemWidget> {
             itemKey: widget.itemKey,
             mailboxNode: widget.mailboxNode,
             imagePaths: _imagePaths,
-            responsiveUtils: _responsiveUtils,
             onExpandFolderActionClick: widget.onClickExpandMailboxNodeAction,
           ),
       ],

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

@@ -1,3 +1,4 @@
+import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
@@ -23,6 +24,7 @@ class MailboxCategoryWidget extends StatefulWidget {
   final EdgeInsetsGeometry? padding;
   final double? height;
   final double? iconSpace;
+  final Color? iconColor;
   final TextStyle? labelTextStyle;
 
   const MailboxCategoryWidget({
@@ -35,6 +37,7 @@ class MailboxCategoryWidget extends StatefulWidget {
     this.padding,
     this.height,
     this.iconSpace,
+    this.iconColor,
     this.labelTextStyle,
   });
 
@@ -59,6 +62,7 @@ class _MailboxCategoryWidgetState extends State<MailboxCategoryWidget> {
               _imagePaths.icFolderMailbox,
               width: MailboxIconWidgetStyles.iconSize,
               height: MailboxIconWidgetStyles.iconSize,
+              colorFilter: widget.iconColor?.asFilter(),
               fit: BoxFit.fill,
             ),
             SizedBox(width: widget.iconSpace ?? MailboxItemWidgetStyles.labelIconSpace),

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

@@ -1,6 +1,5 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 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:core/utils/direction_utils.dart';
 import 'package:flutter/material.dart';
@@ -14,7 +13,7 @@ class MailboxExpandButton extends StatelessWidget {
   final GlobalKey itemKey;
   final MailboxNode mailboxNode;
   final ImagePaths imagePaths;
-  final ResponsiveUtils responsiveUtils;
+  final Color? color;
   final OnClickExpandMailboxNodeAction? onExpandFolderActionClick;
 
   const MailboxExpandButton({
@@ -22,8 +21,8 @@ class MailboxExpandButton extends StatelessWidget {
     required this.itemKey,
     required this.mailboxNode,
     required this.imagePaths,
-    required this.responsiveUtils,
     required this.onExpandFolderActionClick,
+    this.color,
   });
 
   @override
@@ -33,7 +32,7 @@ class MailboxExpandButton extends StatelessWidget {
         imagePaths,
         DirectionUtils.isDirectionRTLByLanguage(context),
       ),
-      iconColor: _expandIconColor,
+      iconColor: color ?? _expandIconColor,
       iconSize: 17,
       margin: const EdgeInsetsDirectional.only(start: 8),
       padding: const EdgeInsets.all(3),

lib/features/manage_account/presentation/mailbox_visibility/extensions/toggle_expand_folders_extension.dart

@@ -0,0 +1,13 @@
+import 'package:model/mailbox/expand_mode.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_controller.dart';
+
+extension ToggleExpandFoldersExtension on MailboxVisibilityController {
+  void toggleExpandFolders() {
+    final currentExpand = foldersExpandMode.value;
+    if (currentExpand == ExpandMode.COLLAPSE) {
+      foldersExpandMode.value = ExpandMode.EXPAND;
+    } else {
+      foldersExpandMode.value = ExpandMode.COLLAPSE;
+    }
+  }
+}

lib/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_controller.dart

@@ -9,6 +9,7 @@ import 'package:jmap_dart_client/jmap/core/properties/properties.dart';
 import 'package:jmap_dart_client/jmap/core/state.dart' as jmap;
 import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
 import 'package:model/extensions/presentation_mailbox_extension.dart';
+import 'package:model/mailbox/expand_mode.dart';
 import 'package:model/mailbox/presentation_mailbox.dart';
 import 'package:tmail_ui_user/features/base/base_mailbox_controller.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/constants/mailbox_constants.dart';
@@ -37,6 +38,7 @@ class MailboxVisibilityController extends BaseMailboxController {
   SubscribeMultipleMailboxInteractor? _subscribeMultipleMailboxInteractor;
   final _accountDashBoardController = Get.find<ManageAccountDashBoardController>();
   final mailboxListScrollController = ScrollController();
+  final foldersExpandMode = Rx(ExpandMode.EXPAND);
 
   MailboxVisibilityController(
     TreeBuilder treeBuilder,

lib/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_view.dart

@@ -1,5 +1,6 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/state/success.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:core/presentation/views/list/tree_view.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
@@ -8,13 +9,17 @@ import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/mixin/mailbox_widget_mixin.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/base/setting_detail_view_builder.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/extensions/toggle_expand_folders_extension.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/state/mailbox_visibility_state.dart';
-import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/utils/mailbox_visibility_utils.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folder_tile_builder.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folders_bar_widget.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/model/account_menu_item.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/widgets/setting_explanation_widget.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/widgets/setting_header_widget.dart';
 
 class MailboxVisibilityView extends GetWidget<MailboxVisibilityController>
@@ -27,30 +32,59 @@ class MailboxVisibilityView extends GetWidget<MailboxVisibilityController>
   Widget build(BuildContext context) {
     return SettingDetailViewBuilder(
       responsiveUtils: controller.responsiveUtils,
-      child: Column(
+      child: Container(
-        crossAxisAlignment: CrossAxisAlignment.start,
+        color: SettingsUtils.getContentBackgroundColor(
-        children: [
+          context,
-          if (controller.responsiveUtils.isWebDesktop(context))
+          controller.responsiveUtils,
-            ...[
+        ),
-              const SettingHeaderWidget(menuItem: AccountMenuItem.mailboxVisibility),
+        decoration: SettingsUtils.getBoxDecorationForContent(
-              const Divider(height: 1, color: AppColor.colorDividerHeaderSetting),
+          context,
-            ],
+          controller.responsiveUtils,
-          _buildLoadingView(),
+        ),
-          Expanded(child: Padding(
+        width: double.infinity,
-            padding: MailboxVisibilityUtils.getPaddingListView(context, controller.responsiveUtils),
+        padding: controller.responsiveUtils.isDesktop(context)
-            child: _buildListMailbox(context)
+            ? const EdgeInsets.symmetric(vertical: 30, horizontal: 22)
-          ))
+            : null,
-        ]
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            if (controller.responsiveUtils.isWebDesktop(context))
+              SettingHeaderWidget(
+                menuItem: AccountMenuItem.mailboxVisibility,
+                textStyle: ThemeUtils.textStyleInter600().copyWith(
+                  color: Colors.black.withValues(alpha: 0.9),
+                ),
+                padding: EdgeInsets.zero,
+              )
+            else
+              const SettingExplanationWidget(
+                menuItem: AccountMenuItem.mailboxVisibility,
+                padding: EdgeInsetsDirectional.only(
+                  start: 16,
+                  end: 16,
+                  bottom: 16,
+                ),
+                isCenter: true,
+              ),
+            _buildLoadingView(),
+            Expanded(
+              child: _buildListMailbox(context),
+            ),
+          ],
+        ),
       ),
     );
   }
 
   Widget _buildLoadingView() {
-    return Obx(() => controller.viewState.value.fold(
+    return Obx(
-      (failure) => const SizedBox.shrink(),
+      () => controller.viewState.value.fold(
-      (success) => success is LoadingState || success is LoadingBuildTreeMailboxVisibility
+        (failure) => const SizedBox(height: 24),
-        ? Padding(padding: const EdgeInsets.only(top: 16), child: loadingWidget)
+        (success) => success is LoadingState || success is LoadingBuildTreeMailboxVisibility
-        : const SizedBox.shrink()));
+            ? loadingWidget
+            : const SizedBox(height: 24),
+      ),
+    );
   }
 
   Widget _buildListMailbox(BuildContext context) {
@@ -58,68 +92,141 @@ class MailboxVisibilityView extends GetWidget<MailboxVisibilityController>
       controller: controller.mailboxListScrollController,
       key: const PageStorageKey('mailbox_list'),
       physics: const ClampingScrollPhysics(),
-      child: Column(children: [
+      child: Column(
-        Obx(() => controller.defaultMailboxIsNotEmpty
+        crossAxisAlignment: CrossAxisAlignment.start,
-          ? _buildMailboxCategory(
+        children: [
-              context,
+          Obx(() => controller.defaultMailboxIsNotEmpty
-              MailboxCategories.exchange,
+              ? _buildMailboxCategory(
-              controller.defaultRootNode)
+                  context,
-          : const SizedBox.shrink()
+                  MailboxCategories.exchange,
-        ),
+                  controller.defaultRootNode,
-        Obx(() => controller.teamMailboxesIsNotEmpty
+                )
-          ? _buildMailboxCategory(
+              : const SizedBox.shrink()),
-              context,
+          Obx(() {
-              MailboxCategories.teamMailboxes,
+            return MailboxVisibilityFoldersBarWidget(
-              controller.teamMailboxesRootNode)
+              imagePaths: controller.imagePaths,
-          : const SizedBox.shrink()
+              expandMode: controller.foldersExpandMode.value,
-        ),
+              onToggleExpandFolder: controller.toggleExpandFolders,
-        Obx(() => controller.personalMailboxIsNotEmpty
+            );
-          ? _buildMailboxCategory(
+          }),
-              context,
+          Obx(() => AnimatedContainer(
-              MailboxCategories.personalFolders,
+                duration: const Duration(milliseconds: 400),
-              controller.personalRootNode)
+                child: controller.foldersExpandMode.value == ExpandMode.EXPAND
-          : const SizedBox.shrink()
+                    ? buildFolders(context)
-        )
+                    : const Offstage(),
-      ])
+              )),
+        ],
+      ),
     );
   }
 
-  Widget _buildMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) {
+  Widget buildFolders(BuildContext context) {
-    if (categories == MailboxCategories.exchange) {
+    return Column(
-      return _buildBodyMailboxCategory(context, categories, mailboxNode);
+      mainAxisSize: MainAxisSize.min,
-    }
+      children: [
-    return Column(children: [
+        Obx(() {
-      Obx(() => MailboxCategoryWidget(
+          if (controller.personalMailboxIsNotEmpty) {
-        categories: categories,
+            return _buildMailboxCategory(
-        expandMode: categories.getExpandMode(
+              context,
-          controller.mailboxCategoriesExpandMode.value,
+              MailboxCategories.personalFolders,
-        ),
+              controller.personalRootNode,
-        onToggleMailboxCategories: (categories, itemKey) =>
+            );
-          controller.toggleMailboxCategories(
+          } else {
-            categories,
+            return const SizedBox.shrink();
-            controller.mailboxListScrollController,
+          }
-            itemKey,
+        }),
-          ),
+        Obx(() {
-        padding: const EdgeInsetsDirectional.symmetric(vertical: 8),
+          if (controller.teamMailboxesIsNotEmpty) {
-      )),
+            return _buildMailboxCategory(
-      AnimatedContainer(
+              context,
-        duration: const Duration(milliseconds: 400),
+              MailboxCategories.teamMailboxes,
-        child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
+              controller.teamMailboxesRootNode,
-          ? _buildBodyMailboxCategory(context, categories, mailboxNode)
+            );
-          : const Offstage()
+          } else {
-      )
+            return const SizedBox.shrink();
-    ]);
+          }
+        }),
+      ],
+    );
   }
 
-  Widget _buildBodyMailboxCategory(
+  Widget _buildMailboxCategory(
     BuildContext context,
     MailboxCategories categories,
     MailboxNode mailboxNode,
   ) {
-    return TreeView(
+    switch (categories) {
+      case MailboxCategories.exchange:
+        return _buildBodyMailboxCategory(
+          context: context,
+          categories: categories,
+          mailboxNode: mailboxNode,
+        );
+      default:
+        return Column(
+          children: [
+            Obx(
+              () => MailboxCategoryWidget(
+                categories: categories,
+                expandMode: categories.getExpandMode(
+                  controller.mailboxCategoriesExpandMode.value,
+                ),
+                onToggleMailboxCategories: (categories, itemKey) =>
+                    controller.toggleMailboxCategories(
+                        categories,
+                        controller.mailboxListScrollController,
+                        itemKey,
+                    ),
+                isArrangeLTR: false,
+                showIcon: true,
+                iconSpace: 8,
+                iconColor: AppColor.steelGrayA540,
+                padding: const EdgeInsets.symmetric(
+                  horizontal: MailboxItemWidgetStyles.itemPadding,
+                ),
+                height: 40,
+              ),
+            ),
+            Obx(() {
+              final categoriesExpandMode =
+                  controller.mailboxCategoriesExpandMode.value;
+
+              bool isExpand = categories.getExpandMode(categoriesExpandMode) ==
+                  ExpandMode.EXPAND;
+
+              return AnimatedContainer(
+                duration: const Duration(milliseconds: 400),
+                child: isExpand
+                    ? _buildBodyMailboxCategory(
+                        context: context,
+                        categories: categories,
+                        mailboxNode: mailboxNode,
+                        padding: const EdgeInsetsDirectional.only(start: 10),
+                      )
+                    : const Offstage(),
+              );
+            }),
+          ],
+        );
+    }
+  }
+
+  Widget _buildBodyMailboxCategory({
+    required BuildContext context,
+    required MailboxCategories categories,
+    required MailboxNode mailboxNode,
+    EdgeInsetsGeometry? padding,
+  }) {
+    final treeView = TreeView(
       key: Key('${categories.keyValue}_mailbox_list'),
-      children: _buildListChildTileWidget(context, mailboxNode)
+      children: _buildListChildTileWidget(context, mailboxNode),
     );
+
+    if (padding != null) {
+      return Padding(padding: padding, child: treeView);
+    } else {
+      return treeView;
+    }
   }
 
   List<Widget> _buildListChildTileWidget(
@@ -134,7 +241,7 @@ class MailboxVisibilityView extends GetWidget<MailboxVisibilityController>
             isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
             paddingChild: const EdgeInsetsDirectional.only(start: 10),
             parent: MailBoxVisibilityFolderTileBuilder(
-              mailboxNode,
+              mailboxNode: mailboxNode,
               onClickExpandMailboxNodeAction: (mailboxNode, itemKey) {
                 controller.toggleMailboxFolder(
                   mailboxNode,
@@ -146,7 +253,7 @@ class MailboxVisibilityView extends GetWidget<MailboxVisibilityController>
             ),
             children: _buildListChildTileWidget(context, mailboxNode)).build()
         : MailBoxVisibilityFolderTileBuilder(
-            mailboxNode,
+            mailboxNode: mailboxNode,
             onClickExpandMailboxNodeAction: (mailboxNode, itemKey) {
               controller.toggleMailboxFolder(
                 mailboxNode,

lib/features/manage_account/presentation/mailbox_visibility/utils/mailbox_visibility_utils.dart

@@ -1,14 +0,0 @@
-import 'package:core/presentation/utils/responsive_utils.dart';
-import 'package:flutter/material.dart';
-
-class MailboxVisibilityUtils {
-  static EdgeInsets getPaddingListView(BuildContext context, ResponsiveUtils responsiveUtils) {
-    if (responsiveUtils.isWebDesktop(context)) {
-      return const EdgeInsets.all(8);
-    } else if (responsiveUtils.isMobile(context) || responsiveUtils.isLandscapeMobile(context)) {
-      return const EdgeInsets.symmetric(horizontal: 16, vertical: 8);
-    } else {
-      return const EdgeInsets.symmetric(horizontal: 32, vertical: 8);
-    }
-  }
-}

lib/features/manage_account/presentation/mailbox_visibility/widgets/label_mailbox_visibility_item_widget.dart

@@ -0,0 +1,91 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:core/presentation/views/text/text_overflow_builder.dart';
+import 'package:flutter/material.dart';
+import 'package:model/extensions/presentation_mailbox_extension.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/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/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/mailbox_expand_button.dart';
+
+class LabelMailboxVisibilityItemWidget extends StatelessWidget {
+  final GlobalKey itemKey;
+  final ImagePaths imagePaths;
+  final MailboxNode mailboxNode;
+  final OnClickExpandMailboxNodeAction onClickExpandMailboxNodeAction;
+
+  const LabelMailboxVisibilityItemWidget({
+    super.key,
+    required this.itemKey,
+    required this.imagePaths,
+    required this.mailboxNode,
+    required this.onClickExpandMailboxNodeAction,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final displayNameWidget = TextOverflowBuilder(
+      mailboxNode.item.getDisplayName(context),
+      style: _displayNameTextStyle,
+    );
+
+    final nameWithExpandIcon = Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        if (mailboxNode.hasChildren())
+          Flexible(child: displayNameWidget)
+        else
+          Flexible(
+            child: Padding(
+              padding: const EdgeInsets.symmetric(vertical: 3),
+              child: displayNameWidget,
+            ),
+          ),
+        if (mailboxNode.hasChildren())
+          MailboxExpandButton(
+            itemKey: itemKey,
+            mailboxNode: mailboxNode,
+            imagePaths: imagePaths,
+            color: mailboxNode.item.isSubscribedMailbox ||
+                    mailboxNode.item.isDefault
+                ? AppColor.m3SurfaceBackground
+                : AppColor.steelGray400,
+            onExpandFolderActionClick: onClickExpandMailboxNodeAction,
+          ),
+      ],
+    );
+
+    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;
+    }
+  }
+
+  bool get _isSubscribedMailbox => mailboxNode.item.isSubscribedMailbox;
+
+  TextStyle get _displayNameTextStyle {
+    return ThemeUtils.textStyleBodyBody3(
+      color: _isSubscribedMailbox || mailboxNode.item.isDefault
+          ? Colors.black
+          : AppColor.steelGray400,
+    );
+  }
+}

lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_subscribe_button.dart

@@ -0,0 +1,48 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
+import 'package:flutter/material.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/utils/mailbox_method_action_define.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class MailboxSubscribeButton extends StatelessWidget {
+  final ImagePaths imagePaths;
+  final MailboxNode mailboxNode;
+  final OnClickSubscribeMailboxAction onClickSubscribeMailboxAction;
+
+  const MailboxSubscribeButton({
+    super.key,
+    required this.imagePaths,
+    required this.mailboxNode,
+    required this.onClickSubscribeMailboxAction,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final isSubscribedMailbox = mailboxNode.item.isSubscribedMailbox;
+    final appLocalizations = AppLocalizations.of(context);
+
+    return TMailButtonWidget(
+      text: isSubscribedMailbox ? appLocalizations.hide : appLocalizations.show,
+      textStyle: ThemeUtils.textStyleInter400.copyWith(
+        fontSize: 12,
+        height: 18 / 12,
+        letterSpacing: 0.0,
+        color: AppColor.primaryLinShare,
+      ),
+      icon: mailboxNode.item.isSubscribedMailbox
+          ? imagePaths.icHideMailbox
+          : imagePaths.icShowMailbox,
+      iconAlignment: TextDirection.rtl,
+      iconSize: 20,
+      iconSpace: 8,
+      iconColor: AppColor.primaryLinShare,
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
+      backgroundColor: Colors.transparent,
+      onTapActionCallback: () => onClickSubscribeMailboxAction(mailboxNode),
+    );
+  }
+}

lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folder_tile_builder.dart

@@ -1,168 +1,98 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
-import 'package:core/presentation/utils/style_utils.dart';
-import 'package:core/presentation/utils/theme_utils.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:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:model/extensions/presentation_mailbox_extension.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart';
+import 'package:model/mailbox/presentation_mailbox.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/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/mailbox_item_widget_styles.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';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_icon_widget.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/widgets/label_mailbox_visibility_item_widget.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_subscribe_button.dart';
 
 class MailBoxVisibilityFolderTileBuilder extends StatefulWidget {
-
+  final MailboxNode mailboxNode;
-  final MailboxNode _mailboxNode;
+  final OnClickExpandMailboxNodeAction onClickExpandMailboxNodeAction;
-  final OnClickExpandMailboxNodeAction? onClickExpandMailboxNodeAction;
+  final OnClickSubscribeMailboxAction onClickSubscribeMailboxAction;
-  final OnClickSubscribeMailboxAction? onClickSubscribeMailboxAction;
 
   const MailBoxVisibilityFolderTileBuilder(
-    this._mailboxNode, {
+      {Key? key,
-    Key? key,
+      required this.mailboxNode,
-    this.onClickExpandMailboxNodeAction,
+      required this.onClickExpandMailboxNodeAction,
-    this.onClickSubscribeMailboxAction
+      required this.onClickSubscribeMailboxAction})
-  }) : super(key: key);
+      : super(key: key);
 
   @override
-  State<MailBoxVisibilityFolderTileBuilder> createState() => _MailBoxVisibilityFolderTileBuilderState();
+  State<MailBoxVisibilityFolderTileBuilder> createState() =>
+      _MailBoxVisibilityFolderTileBuilderState();
 }
 
-class _MailBoxVisibilityFolderTileBuilderState extends State<MailBoxVisibilityFolderTileBuilder> {
+class _MailBoxVisibilityFolderTileBuilderState
-
+    extends State<MailBoxVisibilityFolderTileBuilder> {
   final _imagePaths = Get.find<ImagePaths>();
 
   final GlobalKey _key = GlobalKey();
 
   @override
   Widget build(BuildContext context) {
-    return Material(
+    final bodyWidget = Material(
       key: _key,
-      color: Colors.transparent,
+      type: MaterialType.transparency,
       child: InkWell(
         onTap: () {},
-        borderRadius: const BorderRadius.all(Radius.circular(8)),
+        borderRadius: const BorderRadius.all(
-        child: Padding(
+          Radius.circular(MailboxItemWidgetStyles.borderRadius),
-          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+        ),
-          child: Row(
+        child: Container(
-            children: [
+          padding: const EdgeInsets.symmetric(horizontal: 12),
-              _buildLeadingMailboxItem(context),
+          width: 315,
-              Expanded(child: _buildTitleFolderItem(context)),
+          height: 40,
-              if (!widget._mailboxNode.item.isDefault)
+          child: Row(children: [
-                _buildSubscribeButton(context),
+            if (_isIconDisplayed)
-              const SizedBox(width: 32),
+              MailboxIconWidget(
-            ]
+                icon: _iconMailbox,
-          ),
+                padding: const EdgeInsetsDirectional.only(end: 8),
+                color: _iconMailboxColor,
+              ),
+            Expanded(
+              child: LabelMailboxVisibilityItemWidget(
+                itemKey: _key,
+                mailboxNode: widget.mailboxNode,
+                imagePaths: _imagePaths,
+                onClickExpandMailboxNodeAction:
+                    widget.onClickExpandMailboxNodeAction,
+              ),
+            ),
+            if (!_mailbox.isDefault)
+              MailboxSubscribeButton(
+                imagePaths: _imagePaths,
+                mailboxNode: widget.mailboxNode,
+                onClickSubscribeMailboxAction:
+                    widget.onClickSubscribeMailboxAction,
+              ),
+          ]),
         ),
       ),
     );
-  }
 
-  Widget _buildLeadingMailboxItem(BuildContext context) {
     return Row(
-      mainAxisSize: MainAxisSize.min,
       children: [
-        Visibility.maintain(
+        Flexible(child: bodyWidget),
-          visible: widget._mailboxNode.hasChildren() && widget._mailboxNode.item.isPersonal,
+        const Spacer(),
-          child: TMailButtonWidget.fromIcon(
-            icon: widget._mailboxNode.expandMode.getIcon(
-              _imagePaths,
-              DirectionUtils.isDirectionRTLByLanguage(context),
-            ),
-            iconColor: widget._mailboxNode.item.allowedToDisplay
-              ? Colors.black
-              : AppColor.colorIconUnSubscribedMailbox,
-            padding: const EdgeInsets.all(5),
-            iconSize: 20,
-            backgroundColor: Colors.transparent,
-            tooltipMessage: widget._mailboxNode.expandMode.getTooltipMessage(AppLocalizations.of(context)),
-            onTapActionCallback: () =>
-                widget.onClickExpandMailboxNodeAction?.call(
-                    widget._mailboxNode,
-                    _key,
-                )
-          ),
-        ),
-        if (!widget._mailboxNode.item.isTeamMailboxes)
-          _buildMailboxIcon(context),
-      ]
-    );
-  }
-
-  Widget _buildTitleFolderItem(BuildContext context) {
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Text(
-          widget._mailboxNode.item.getDisplayName(context),
-          maxLines: 1,
-          softWrap: CommonTextStyle.defaultSoftWrap,
-          overflow: CommonTextStyle.defaultTextOverFlow,
-          style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-            fontSize: widget._mailboxNode.item.isTeamMailboxes ? 16 : 14,
-            color: widget._mailboxNode.item.allowedToDisplay
-              ? Colors.black
-              : AppColor.colorTitleAUnSubscribedMailbox,
-            fontWeight: widget._mailboxNode.item.isTeamMailboxes
-              ? FontWeight.w500
-              : FontWeight.normal),
-        ),
-        if (widget._mailboxNode.item.isTeamMailboxes)
-          Text(
-            widget._mailboxNode.item.emailTeamMailBoxes,
-            maxLines: 1,
-            softWrap: CommonTextStyle.defaultSoftWrap,
-            overflow: CommonTextStyle.defaultTextOverFlow,
-            style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-              fontSize: 13,
-              color: AppColor.colorEmailAddressFull,
-              fontWeight: FontWeight.normal),
-          ),
       ],
     );
   }
 
-  Widget _buildMailboxIcon(BuildContext context) {
+  PresentationMailbox get _mailbox => widget.mailboxNode.item;
-    return Padding(
-      padding: const EdgeInsetsDirectional.only(end: 8),
-      child: SvgPicture.asset(
-        widget._mailboxNode.item.getMailboxIcon(_imagePaths),
-        width: 20,
-        height: 20,
-        colorFilter: widget._mailboxNode.item.allowedToDisplay
-          ? AppColor.primaryColor.asFilter()
-          : AppColor.colorIconUnSubscribedMailbox.asFilter(),
-        fit: BoxFit.fill
-      ),
-    );
-  }
 
-  Widget _buildSubscribeButton(BuildContext context) {
+  bool get _isIconDisplayed => _mailbox.isPersonal || _mailbox.hasParentId();
-    return Material(
+
-      color: Colors.transparent,
+  String get _iconMailbox => _mailbox.getMailboxIcon(_imagePaths);
-      child: InkWell(
+
-        onTap: () => widget.onClickSubscribeMailboxAction?.call(widget._mailboxNode),
+  Color get _iconMailboxColor =>
-        borderRadius: const BorderRadius.all(Radius.circular(5)),
+      _mailbox.isSubscribedMailbox || _mailbox.isDefault
-        child: Padding(
+          ? AppColor.steelGrayA540
-          padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
+          : AppColor.steelGray200;
-          child: Text(
-            widget._mailboxNode.item.isSubscribedMailbox
-              ? AppLocalizations.of(context).hide
-              : AppLocalizations.of(context).show,
-            maxLines: 1,
-            softWrap: CommonTextStyle.defaultSoftWrap,
-            overflow: CommonTextStyle.defaultTextOverFlow,
-            style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-              fontSize: 15,
-              color: AppColor.primaryColor,
-              fontWeight: FontWeight.normal
-            )
-          ),
-        ),
-      ),
-    );
-  }
 }

lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folders_bar_widget.dart

@@ -0,0 +1,55 @@
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/theme_utils.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/mailbox/expand_mode.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class MailboxVisibilityFoldersBarWidget extends StatelessWidget {
+  final ImagePaths imagePaths;
+  final ExpandMode expandMode;
+  final VoidCallback onToggleExpandFolder;
+
+  const MailboxVisibilityFoldersBarWidget({
+    super.key,
+    required this.imagePaths,
+    required this.expandMode,
+    required this.onToggleExpandFolder,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final appLocalizations = AppLocalizations.of(context);
+    return Container(
+      padding: const EdgeInsetsDirectional.symmetric(horizontal: 12),
+      height: 40,
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Flexible(
+            child: Text(
+              appLocalizations.folders,
+              style: ThemeUtils.textStyleBodyBody3(),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+          TMailButtonWidget.fromIcon(
+            icon: expandMode.getIcon(
+              imagePaths,
+              DirectionUtils.isDirectionRTLByLanguage(context),
+            ),
+            iconColor: Colors.black,
+            iconSize: 17,
+            backgroundColor: Colors.transparent,
+            padding: const EdgeInsets.all(3),
+            tooltipMessage: expandMode.getTooltipMessage(appLocalizations),
+            onTapActionCallback: onToggleExpandFolder,
+          )
+        ],
+      ),
+    );
+  }
+}