TF-3950 Apply new style for Folder Visibility on web

Signed-off-by: dab246 <tdvu@linagora.com>
2025-08-07 12:42:45 +07:00
parent b72048788a
commit efba186e68
11 changed files with 457 additions and 223 deletions
@@ -75,7 +75,6 @@ class _LabelMailboxItemWidgetState extends State<LabelMailboxItemWidget> {
            itemKey: widget.itemKey,
            mailboxNode: widget.mailboxNode,
            imagePaths: _imagePaths,
-            responsiveUtils: _responsiveUtils,
            onExpandFolderActionClick: widget.onClickExpandMailboxNodeAction,
          ),
      ],
@@ -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),
@@ -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),
@@ -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;
+    }
+  }
+}
@@ -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,
@@ -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(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          if (controller.responsiveUtils.isWebDesktop(context))
-            ...[
-              const SettingHeaderWidget(menuItem: AccountMenuItem.mailboxVisibility),
-              const Divider(height: 1, color: AppColor.colorDividerHeaderSetting),
-            ],
-          _buildLoadingView(),
-          Expanded(child: Padding(
-            padding: MailboxVisibilityUtils.getPaddingListView(context, controller.responsiveUtils),
-            child: _buildListMailbox(context)
-          ))
-        ]
+      child: Container(
+        color: SettingsUtils.getContentBackgroundColor(
+          context,
+          controller.responsiveUtils,
+        ),
+        decoration: SettingsUtils.getBoxDecorationForContent(
+          context,
+          controller.responsiveUtils,
+        ),
+        width: double.infinity,
+        padding: controller.responsiveUtils.isDesktop(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(
-      (failure) => const SizedBox.shrink(),
-      (success) => success is LoadingState || success is LoadingBuildTreeMailboxVisibility
-        ? Padding(padding: const EdgeInsets.only(top: 16), child: loadingWidget)
-        : const SizedBox.shrink()));
+    return Obx(
+      () => controller.viewState.value.fold(
+        (failure) => const SizedBox(height: 24),
+        (success) => success is LoadingState || success is LoadingBuildTreeMailboxVisibility
+            ? 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: [
-        Obx(() => controller.defaultMailboxIsNotEmpty
-          ? _buildMailboxCategory(
-              context,
-              MailboxCategories.exchange,
-              controller.defaultRootNode)
-          : const SizedBox.shrink()
-        ),
-        Obx(() => controller.teamMailboxesIsNotEmpty
-          ? _buildMailboxCategory(
-              context,
-              MailboxCategories.teamMailboxes,
-              controller.teamMailboxesRootNode)
-          : const SizedBox.shrink()
-        ),
-        Obx(() => controller.personalMailboxIsNotEmpty
-          ? _buildMailboxCategory(
-              context,
-              MailboxCategories.personalFolders,
-              controller.personalRootNode)
-          : const SizedBox.shrink()
-        )
-      ])
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Obx(() => controller.defaultMailboxIsNotEmpty
+              ? _buildMailboxCategory(
+                  context,
+                  MailboxCategories.exchange,
+                  controller.defaultRootNode,
+                )
+              : const SizedBox.shrink()),
+          Obx(() {
+            return MailboxVisibilityFoldersBarWidget(
+              imagePaths: controller.imagePaths,
+              expandMode: controller.foldersExpandMode.value,
+              onToggleExpandFolder: controller.toggleExpandFolders,
+            );
+          }),
+          Obx(() => AnimatedContainer(
+                duration: const Duration(milliseconds: 400),
+                child: controller.foldersExpandMode.value == ExpandMode.EXPAND
+                    ? buildFolders(context)
+                    : const Offstage(),
+              )),
+        ],
+      ),
    );
  }

-  Widget _buildMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) {
-    if (categories == MailboxCategories.exchange) {
-      return _buildBodyMailboxCategory(context, categories, mailboxNode);
-    }
-    return Column(children: [
-      Obx(() => MailboxCategoryWidget(
-        categories: categories,
-        expandMode: categories.getExpandMode(
-          controller.mailboxCategoriesExpandMode.value,
-        ),
-        onToggleMailboxCategories: (categories, itemKey) =>
-          controller.toggleMailboxCategories(
-            categories,
-            controller.mailboxListScrollController,
-            itemKey,
-          ),
-        padding: const EdgeInsetsDirectional.symmetric(vertical: 8),
-      )),
-      AnimatedContainer(
-        duration: const Duration(milliseconds: 400),
-        child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
-          ? _buildBodyMailboxCategory(context, categories, mailboxNode)
-          : const Offstage()
-      )
-    ]);
+  Widget buildFolders(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Obx(() {
+          if (controller.personalMailboxIsNotEmpty) {
+            return _buildMailboxCategory(
+              context,
+              MailboxCategories.personalFolders,
+              controller.personalRootNode,
+            );
+          } else {
+            return const SizedBox.shrink();
+          }
+        }),
+        Obx(() {
+          if (controller.teamMailboxesIsNotEmpty) {
+            return _buildMailboxCategory(
+              context,
+              MailboxCategories.teamMailboxes,
+              controller.teamMailboxesRootNode,
+            );
+          } 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,
@@ -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);
-    }
-  }
-}
@@ -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,
+    );
+  }
+}
@@ -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),
+    );
+  }
+}
@@ -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 OnClickExpandMailboxNodeAction? onClickExpandMailboxNodeAction;
-  final OnClickSubscribeMailboxAction? onClickSubscribeMailboxAction;
+  final MailboxNode mailboxNode;
+  final OnClickExpandMailboxNodeAction onClickExpandMailboxNodeAction;
+  final OnClickSubscribeMailboxAction onClickSubscribeMailboxAction;

  const MailBoxVisibilityFolderTileBuilder(
-    this._mailboxNode, {
-    Key? key,
-    this.onClickExpandMailboxNodeAction,
-    this.onClickSubscribeMailboxAction
-  }) : super(key: key);
+      {Key? key,
+      required this.mailboxNode,
+      required this.onClickExpandMailboxNodeAction,
+      required this.onClickSubscribeMailboxAction})
+      : 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)),
-        child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-          child: Row(
-            children: [
-              _buildLeadingMailboxItem(context),
-              Expanded(child: _buildTitleFolderItem(context)),
-              if (!widget._mailboxNode.item.isDefault)
-                _buildSubscribeButton(context),
-              const SizedBox(width: 32),
-            ]
-          ),
+        borderRadius: const BorderRadius.all(
+          Radius.circular(MailboxItemWidgetStyles.borderRadius),
+        ),
+        child: Container(
+          padding: const EdgeInsets.symmetric(horizontal: 12),
+          width: 315,
+          height: 40,
+          child: Row(children: [
+            if (_isIconDisplayed)
+              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(
-          visible: widget._mailboxNode.hasChildren() && widget._mailboxNode.item.isPersonal,
-          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),
-          ),
+        Flexible(child: bodyWidget),
+        const Spacer(),
      ],
    );
  }

-  Widget _buildMailboxIcon(BuildContext context) {
-    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
-      ),
-    );
-  }
+  PresentationMailbox get _mailbox => widget.mailboxNode.item;

-  Widget _buildSubscribeButton(BuildContext context) {
-    return Material(
-      color: Colors.transparent,
-      child: InkWell(
-        onTap: () => widget.onClickSubscribeMailboxAction?.call(widget._mailboxNode),
-        borderRadius: const BorderRadius.all(Radius.circular(5)),
-        child: Padding(
-          padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
-          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
-            )
-          ),
-        ),
-      ),
-    );
-  }
+  bool get _isIconDisplayed => _mailbox.isPersonal || _mailbox.hasParentId();
+
+  String get _iconMailbox => _mailbox.getMailboxIcon(_imagePaths);
+
+  Color get _iconMailboxColor =>
+      _mailbox.isSubscribedMailbox || _mailbox.isDefault
+          ? AppColor.steelGrayA540
+          : AppColor.steelGray200;
 }
@@ -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,
+          )
+        ],
+      ),
+    );
+  }
+}