TF-4002 Apply new design for folder creation modal on mobile

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

@@ -10,6 +10,9 @@ class FolderItemWidget extends StatelessWidget {
   final ImagePaths imagePaths;
   final String folderName;
   final bool isSelected;
+  final Color? iconColor;
+  final String? iconSelected;
+  final TextStyle? textStyle;
   final VoidCallback? onTapAction;
 
   const FolderItemWidget({
@@ -17,6 +20,9 @@ class FolderItemWidget extends StatelessWidget {
     required this.imagePaths,
     required this.folderName,
     this.isSelected = false,
+    this.iconColor,
+    this.iconSelected,
+    this.textStyle,
     this.onTapAction,
   });
 
@@ -33,7 +39,8 @@ class FolderItemWidget extends StatelessWidget {
             imagePaths.icFolderMailbox,
             width: MailboxIconWidgetStyles.iconSize,
             height: MailboxIconWidgetStyles.iconSize,
-            colorFilter: AppColor.primaryLinShare.asFilter(),
+            colorFilter:
+                iconColor?.asFilter() ?? AppColor.primaryLinShare.asFilter(),
             fit: BoxFit.fill,
           ),
           const SizedBox(width: MailboxItemWidgetStyles.labelIconSpace),
@@ -42,23 +49,23 @@ class FolderItemWidget extends StatelessWidget {
               folderName,
               maxLines: 1,
               overflow: TextOverflow.ellipsis,
-              style: isSelected
+              style: textStyle ??
-                  ? ThemeUtils.textStyleInter700(
+                  (isSelected
-                      color: Colors.black,
+                      ? ThemeUtils.textStyleInter700(
-                      fontSize: 14,
+                          color: Colors.black,
-                    )
+                          fontSize: 14,
-                  : ThemeUtils.textStyleBodyBody3(
+                        )
-                      color: Colors.black,
+                      : ThemeUtils.textStyleBodyBody3(
-                    ),
+                          color: Colors.black,
+                        )),
             ),
           ),
           const SizedBox(width: MailboxItemWidgetStyles.labelIconSpace),
           if (isSelected)
             SvgPicture.asset(
-              imagePaths.icCheck,
+              iconSelected ?? imagePaths.icCheck,
               width: MailboxIconWidgetStyles.iconSize,
               height: MailboxIconWidgetStyles.iconSize,
-              colorFilter: AppColor.primaryLinShare.asFilter(),
               fit: BoxFit.fill,
             ),
         ],

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

@@ -25,6 +25,7 @@ class LabelMailboxItemWidget extends StatefulWidget {
   final bool isItemHovered;
   final bool isSelected;
   final bool isSelectedFolderInModal;
+  final TextStyle? textStyle;
   final OnClickOpenMenuMailboxNodeAction? onMenuActionClick;
   final OnEmptyMailboxActionCallback? onEmptyMailboxActionCallback;
   final OnClickExpandMailboxNodeAction? onClickExpandMailboxNodeAction;
@@ -37,6 +38,7 @@ class LabelMailboxItemWidget extends StatefulWidget {
     this.isItemHovered = false,
     this.isSelected = false,
     this.isSelectedFolderInModal = false,
+    this.textStyle,
     this.onMenuActionClick,
     this.onEmptyMailboxActionCallback,
     this.onClickExpandMailboxNodeAction,
@@ -58,7 +60,7 @@ class _LabelMailboxItemWidgetState extends State<LabelMailboxItemWidget> {
   Widget build(BuildContext context) {
     final displayNameWidget = TextOverflowBuilder(
       widget.mailboxNode.item.getDisplayName(context),
-      style: _displayNameTextStyle,
+      style: widget.textStyle ?? _displayNameTextStyle,
     );
 
     final nameWithExpandIcon = Row(

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

@@ -26,6 +26,10 @@ class MailboxItemWidget extends StatefulWidget {
   final MailboxActions? mailboxActions;
   final MailboxId? mailboxIdAlreadySelected;
   final Color? hoverColor;
+  final TextStyle? textStyle;
+  final Color? iconColor;
+  final double? itemHeight;
+  final String? iconSelected;
 
   final OnClickExpandMailboxNodeAction? onExpandFolderActionClick;
   final OnClickOpenMailboxNodeAction? onOpenMailboxFolderClick;
@@ -43,6 +47,10 @@ class MailboxItemWidget extends StatefulWidget {
     this.mailboxActions,
     this.mailboxIdAlreadySelected,
     this.hoverColor,
+    this.iconColor,
+    this.textStyle,
+    this.itemHeight,
+    this.iconSelected,
     this.onExpandFolderActionClick,
     this.onOpenMailboxFolderClick,
     this.onSelectMailboxFolderClick,
@@ -88,9 +96,9 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                 padding: const EdgeInsetsDirectional.symmetric(
                   horizontal: MailboxItemWidgetStyles.itemPadding,
                 ),
-                height: widget.mailboxNode.item.isTeamMailboxes
+                height: widget.itemHeight ?? (widget.mailboxNode.item.isTeamMailboxes
                     ? MailboxItemWidgetStyles.teamMailboxHeight
-                    : MailboxItemWidgetStyles.height,
+                    : MailboxItemWidgetStyles.height),
                 child: Row(
                   mainAxisAlignment: MainAxisAlignment.center,
                   crossAxisAlignment: widget.mailboxNode.item.isTeamMailboxes
@@ -98,13 +106,17 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                     : CrossAxisAlignment.center,
                   children: [
                     if (_isIconDisplayed)
-                      MailboxIconWidget(icon: _iconMailbox),
+                      MailboxIconWidget(
+                        icon: _iconMailbox,
+                        color: widget.iconColor,
+                      ),
                     Expanded(
                       child: LabelMailboxItemWidget(
                         itemKey: _key,
                         mailboxNode: widget.mailboxNode,
                         isItemHovered: _isItemHovered,
                         isSelected: _isSelected,
+                        textStyle: widget.textStyle,
                         onMenuActionClick: widget.onMenuActionClick,
                         onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback,
                         onClickExpandMailboxNodeAction: widget.onExpandFolderActionClick,
@@ -143,9 +155,9 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                 padding: const EdgeInsetsDirectional.symmetric(
                   horizontal: MailboxItemWidgetStyles.itemPadding,
                 ),
-                height: widget.mailboxNode.item.isTeamMailboxes
+                height: widget.itemHeight ?? (widget.mailboxNode.item.isTeamMailboxes
                     ? MailboxItemWidgetStyles.teamMailboxHeight
-                    : MailboxItemWidgetStyles.mobileHeight,
+                    : MailboxItemWidgetStyles.mobileHeight),
                 child: Row(
                   children: [
                     if (_isIconDisplayed)
@@ -154,7 +166,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                         padding: const EdgeInsetsDirectional.only(
                           end: MailboxItemWidgetStyles.mobileLabelIconSpace,
                         ),
-                        color: AppColor.iconFolder,
+                        color: widget.iconColor ?? AppColor.iconFolder,
                       ),
                     Expanded(
                       child: LabelMailboxItemWidget(
@@ -162,6 +174,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                         mailboxNode: widget.mailboxNode,
                         isItemHovered: _isItemHovered,
                         isSelected: _isSelected,
+                        textStyle: widget.textStyle,
                         onMenuActionClick: widget.onMenuActionClick,
                         onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback,
                         onClickExpandMailboxNodeAction: widget.onExpandFolderActionClick,
@@ -192,9 +205,9 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                 padding: const EdgeInsetsDirectional.symmetric(
                   horizontal: MailboxItemWidgetStyles.mobileItemPadding,
                 ),
-                height: widget.mailboxNode.item.isTeamMailboxes
+                height: widget.itemHeight ?? (widget.mailboxNode.item.isTeamMailboxes
                     ? MailboxItemWidgetStyles.teamMailboxHeight
-                    : MailboxItemWidgetStyles.mobileHeight,
+                    : MailboxItemWidgetStyles.mobileHeight),
                 child: Row(
                   children: [
                     if (_isIconDisplayed)
@@ -203,7 +216,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                         padding: const EdgeInsetsDirectional.only(
                           end: MailboxItemWidgetStyles.mobileLabelIconSpace,
                         ),
-                        color: AppColor.iconFolder,
+                        color: widget.iconColor ?? AppColor.iconFolder,
                       ),
                     Expanded(
                       child: LabelMailboxItemWidget(
@@ -211,6 +224,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                         mailboxNode: widget.mailboxNode,
                         isItemHovered: _isItemHovered,
                         isSelected: _isSelected,
+                        textStyle: widget.textStyle,
                         onMenuActionClick: widget.onMenuActionClick,
                         onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback,
                         onClickExpandMailboxNodeAction: widget.onExpandFolderActionClick,
@@ -240,16 +254,19 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                   padding: const EdgeInsetsDirectional.symmetric(
                     horizontal: MailboxItemWidgetStyles.itemPadding,
                   ),
-                  height: widget.mailboxNode.item.isTeamMailboxes
+                  height: widget.itemHeight ?? (widget.mailboxNode.item.isTeamMailboxes
                       ? MailboxItemWidgetStyles.teamMailboxHeight
-                      : MailboxItemWidgetStyles.height,
+                      : MailboxItemWidgetStyles.height),
                   color: widget.mailboxNode.isSelected
                       ? AppColor.colorItemSelected
                       : Colors.transparent,
                   child: Row(
                     children: [
                       if (_isIconDisplayed)
-                        MailboxIconWidget(icon: _iconMailbox),
+                        MailboxIconWidget(
+                          icon: _iconMailbox,
+                          color: widget.iconColor,
+                        ),
                       Expanded(
                         child: LabelMailboxItemWidget(
                           itemKey: _key,
@@ -257,6 +274,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                           showTrailing: false,
                           isSelected: _isSelected,
                           isItemHovered: _isItemHovered,
+                          textStyle: widget.textStyle,
                           isSelectedFolderInModal: isSelectedFolderInModal,
                           onMenuActionClick: widget.onMenuActionClick,
                           onEmptyMailboxActionCallback: widget.onEmptyMailboxActionCallback,
@@ -265,9 +283,9 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                       ),
                       if (isSelectedFolderInModal)
                         SvgPicture.asset(
-                          isFolderModalActive
+                          widget.iconSelected ?? (isFolderModalActive
-                            ? _imagePaths.icCheck
+                              ? _imagePaths.icCheck
-                            : _imagePaths.icSelectedSB,
+                              : _imagePaths.icSelectedSB),
                           width: MailboxItemWidgetStyles.selectionIconSize,
                           height: MailboxItemWidgetStyles.selectionIconSize,
                           fit: BoxFit.fill

lib/features/mailbox_creator/presentation/mailbox_creator_controller.dart

@@ -1,4 +1,4 @@
-import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
 import 'package:model/model.dart';
@@ -14,8 +14,11 @@ import 'package:tmail_ui_user/features/mailbox_creator/domain/model/verification
 import 'package:tmail_ui_user/features/mailbox_creator/domain/state/verify_name_view_state.dart';
 import 'package:tmail_ui_user/features/mailbox_creator/domain/usecases/verify_name_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox_creator/presentation/extensions/validator_failure_extension.dart';
+import 'package:tmail_ui_user/features/mailbox_creator/presentation/model/bottom_modal_folder_tree_arguments.dart';
 import 'package:tmail_ui_user/features/mailbox_creator/presentation/model/mailbox_creator_arguments.dart';
 import 'package:tmail_ui_user/features/mailbox_creator/presentation/model/new_mailbox_arguments.dart';
+import 'package:tmail_ui_user/features/mailbox_creator/presentation/widgets/bottom_modal/bottom_modal_folder_tree_list_bindings.dart';
+import 'package:tmail_ui_user/features/mailbox_creator/presentation/widgets/bottom_modal/bottom_modal_folder_tree_list_widget.dart';
 import 'package:tmail_ui_user/main/routes/route_navigation.dart';
 
 class MailboxCreatorController extends BaseController
@@ -124,13 +127,20 @@ class MailboxCreatorController extends BaseController
   void openFolderModal(BuildContext context) {
     nameInputFocusNode.unfocus();
 
-    if (!responsiveUtils.isMobile(context)) {
+    if (responsiveUtils.isMobile(context)) {
+      _showFolderListBottomModal(context);
+    } else {
       isFolderModalEnabled.value = true;
     }
   }
 
-  void selectMailboxLocation(MailboxNode? mailboxDestination) {
+  void selectMailboxLocation(
-    isFolderModalEnabled.value = false;
+    BuildContext context,
+    MailboxNode? mailboxDestination,
+  ) {
+    if (!responsiveUtils.isMobile(context)) {
+      isFolderModalEnabled.value = false;
+    }
     selectedMailbox.value = mailboxDestination?.item;
     _createListMailboxNameAsStringInMailboxLocation();
   }
@@ -177,6 +187,41 @@ class MailboxCreatorController extends BaseController
     }
   }
 
+  Future<void> _showFolderListBottomModal(BuildContext context) async {
+    BottomModalFolderTreeListBindings().dependencies();
+
+    final result = await showModalBottomSheet(
+      context: context,
+      showDragHandle: true,
+      useSafeArea: true,
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.only(
+          topLeft: Radius.circular(16.0),
+          topRight: Radius.circular(16.0),
+        ),
+      ),
+      backgroundColor: Colors.white,
+      routeSettings: RouteSettings(
+        arguments: BottomModalFolderTreeArguments(
+          defaultMailboxTree.value,
+          personalMailboxTree.value,
+          selectedMailbox.value,
+        ),
+      ),
+      builder: (_) => const BottomModalFolderTreeListWidget(),
+    ).whenComplete(BottomModalFolderTreeListBindings().dispose);
+
+    if (result is PresentationMailbox) {
+      if (result.id == MailboxNode.root().item.id) {
+        selectedMailbox.value = null;
+      } else {
+        selectedMailbox.value = result;
+      }
+      _createListMailboxNameAsStringInMailboxLocation();
+    }
+  }
+
+
   void closeView() {
     nameInputFocusNode.unfocus();
     popBack();

lib/features/mailbox_creator/presentation/mailbox_creator_view.dart

@@ -2,6 +2,7 @@ import 'dart:math';
 
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/base/widget/default_field/default_button_arrow_down_field_widget.dart';
@@ -159,10 +160,9 @@ class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
                                 defaultTree: controller.defaultMailboxTree.value,
                                 personalTree: controller.personalMailboxTree.value,
                                 imagePaths: controller.imagePaths,
-                                listScrollController:
+                                listScrollController: controller.listFolderScrollController,
-                                controller.listFolderScrollController,
                                 mailboxIdSelected: selectedMailbox?.id,
-                                onSelectFolderAction: controller.selectMailboxLocation,
+                                onSelectFolderAction: (node) => controller.selectMailboxLocation(context, node),
                                 onToggleFolderAction: controller.toggleFolder,
                               )),
                             )
@@ -197,6 +197,21 @@ class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
       ),
     );
 
-    return Center(child: bodyWidget);
+    bodyWidget = Center(child: bodyWidget);
+
+    if (PlatformInfo.isMobile) {
+      bodyWidget = GestureDetector(
+        onTap: controller.closeView,
+        child: Scaffold(
+          backgroundColor: AppColor.blackAlpha20,
+          body: GestureDetector(
+            onTap: controller.nameInputFocusNode.unfocus,
+            child: bodyWidget,
+          ),
+        ),
+      );
+    }
+
+    return bodyWidget;
   }
 }

lib/features/mailbox_creator/presentation/model/bottom_modal_folder_tree_arguments.dart

@@ -0,0 +1,23 @@
+
+import 'package:equatable/equatable.dart';
+import 'package:model/mailbox/presentation_mailbox.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_tree.dart';
+
+class BottomModalFolderTreeArguments with EquatableMixin {
+  final MailboxTree personalMailboxTree;
+  final MailboxTree defaultMailboxTree;
+  final PresentationMailbox? selectedMailbox;
+
+  BottomModalFolderTreeArguments(
+    this.defaultMailboxTree,
+    this.personalMailboxTree,
+    this.selectedMailbox,
+  );
+
+  @override
+  List<Object?> get props => [
+    defaultMailboxTree,
+    personalMailboxTree,
+    selectedMailbox,
+  ];
+}

lib/features/mailbox_creator/presentation/widgets/bottom_modal/bottom_modal_folder_tree_list_bindings.dart

@@ -0,0 +1,13 @@
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/mailbox_creator/presentation/widgets/bottom_modal/bottom_modal_folder_tree_list_controller.dart';
+
+class BottomModalFolderTreeListBindings extends Bindings {
+  @override
+  void dependencies() {
+    Get.lazyPut(() => BottomModalFolderTreeListController());
+  }
+
+  void dispose() {
+    Get.delete<BottomModalFolderTreeListController>();
+  }
+}

lib/features/mailbox_creator/presentation/widgets/bottom_modal/bottom_modal_folder_tree_list_controller.dart

@@ -0,0 +1,64 @@
+
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
+import 'package:tmail_ui_user/features/base/base_controller.dart';
+import 'package:tmail_ui_user/features/base/mixin/expand_folder_trigger_scrollable_mixin.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_tree.dart';
+import 'package:tmail_ui_user/features/mailbox_creator/presentation/model/bottom_modal_folder_tree_arguments.dart';
+import 'package:tmail_ui_user/main/routes/route_navigation.dart';
+
+class BottomModalFolderTreeListController extends BaseController
+    with ExpandFolderTriggerScrollableMixin {
+  final personalMailboxTree = MailboxTree(MailboxNode.root()).obs;
+  final defaultMailboxTree = MailboxTree(MailboxNode.root()).obs;
+  final mailboxIdSelected = Rxn<MailboxId>();
+
+  final ScrollController listFolderScrollController = ScrollController();
+
+  @override
+  void onInit() {
+    super.onInit();
+    BottomModalFolderTreeArguments? arguments = Get.arguments;
+    if (arguments != null) {
+      personalMailboxTree.value = arguments.personalMailboxTree;
+      defaultMailboxTree.value = arguments.defaultMailboxTree;
+      mailboxIdSelected.value = arguments.selectedMailbox?.id;
+    }
+  }
+
+  void selectFolderAction(MailboxNode? mailboxNode) {
+    final selectedMailbox = mailboxNode?.item;
+    popBack(result: selectedMailbox);
+  }
+
+  void toggleFolder(MailboxNode selectedMailboxNode, GlobalKey itemKey) {
+    final newExpandMode = selectedMailboxNode.expandMode.toggle();
+
+    if (defaultMailboxTree.value.updateExpandedNode(selectedMailboxNode, newExpandMode) != null) {
+      defaultMailboxTree.refresh();
+      triggerScrollWhenExpandFolder(
+        selectedMailboxNode.expandMode,
+        itemKey,
+        listFolderScrollController,
+      );
+    }
+
+    if (personalMailboxTree.value.updateExpandedNode(selectedMailboxNode, newExpandMode) != null) {
+      personalMailboxTree.refresh();
+      triggerScrollWhenExpandFolder(
+        selectedMailboxNode.expandMode,
+        itemKey,
+        listFolderScrollController,
+      );
+    }
+  }
+
+  @override
+  void onClose() {
+    listFolderScrollController.dispose();
+    super.onClose();
+  }
+}

lib/features/mailbox_creator/presentation/widgets/bottom_modal/bottom_modal_folder_tree_list_widget.dart

@@ -0,0 +1,154 @@
+import 'dart:math';
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:core/presentation/views/list/tree_view.dart';
+import 'package:core/utils/platform_info.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
+import 'package:model/mailbox/expand_mode.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_displayed.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_tree.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/folder_item_widget.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_item_widget.dart';
+import 'package:tmail_ui_user/features/mailbox_creator/presentation/widgets/bottom_modal/bottom_modal_folder_tree_list_controller.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class BottomModalFolderTreeListWidget extends GetWidget<BottomModalFolderTreeListController> {
+
+  const BottomModalFolderTreeListWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    Widget bodyWidget = Container(
+      constraints: BoxConstraints(
+        maxHeight: min(
+          controller.responsiveUtils.getSizeScreenHeight(context) - 32,
+          469,
+        ),
+      ),
+      child: SingleChildScrollView(
+        physics: const ClampingScrollPhysics(),
+        controller: controller.listFolderScrollController,
+        padding: const EdgeInsetsDirectional.all(14),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Obx(() => FolderItemWidget(
+              folderName: AppLocalizations.of(context).personalFolders,
+              imagePaths: controller.imagePaths,
+              isSelected: controller.mailboxIdSelected.value == null,
+              iconColor: AppColor.gray424244.withValues(alpha: 0.72),
+              iconSelected: controller.imagePaths.icChecked,
+              textStyle: ThemeUtils.textStyleInter400.copyWith(
+                color: AppColor.gray424244.withValues(alpha: 0.9),
+                fontSize: 16,
+                height: 21.01 / 16,
+                letterSpacing: -0.15,
+              ),
+              onTapAction: () =>
+                controller.selectFolderAction(MailboxNode.root()),
+            )),
+            Obx(() {
+              final defaultTree = controller.defaultMailboxTree.value;
+              if (defaultTree.root.hasChildren()) {
+                return _buildFolderTree(
+                  mailboxTree: defaultTree,
+                  mailboxIdSelected: controller.mailboxIdSelected.value,
+                );
+              } else {
+                return const SizedBox.shrink();
+              }
+            }),
+            Obx(() {
+              final personalTree = controller.personalMailboxTree.value;
+              if (personalTree.root.hasChildren()) {
+                return _buildFolderTree(
+                  mailboxTree: personalTree,
+                  mailboxIdSelected: controller.mailboxIdSelected.value,
+                );
+              } else {
+                return const SizedBox.shrink();
+              }
+            }),
+          ],
+        ),
+      ),
+    );
+
+    if (PlatformInfo.isMobile) {
+      return SafeArea(child: bodyWidget);
+    } else {
+      return bodyWidget;
+    }
+  }
+
+  Widget _buildFolderTree({
+    required MailboxTree mailboxTree,
+    MailboxId? mailboxIdSelected,
+  }) {
+    return TreeView(
+      children: _buildListChildTileWidget(
+        parentNode: mailboxTree.root,
+        mailboxIdSelected: mailboxIdSelected,
+      ),
+    );
+  }
+
+  List<Widget> _buildListChildTileWidget({
+    required MailboxNode parentNode,
+    MailboxId? mailboxIdSelected,
+  }) {
+    return parentNode.childrenItems?.map(
+      (mailboxNode) {
+        if (mailboxNode.hasChildren()) {
+          return TreeViewChild(
+            isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
+            paddingChild: const EdgeInsetsDirectional.only(start: 14),
+            parent: MailboxItemWidget(
+              mailboxNode: mailboxNode,
+              mailboxIdAlreadySelected: mailboxIdSelected,
+              mailboxDisplayed: MailboxDisplayed.modalFolder,
+              hoverColor: AppColor.blue100,
+              iconColor: AppColor.gray424244.withValues(alpha: 0.72),
+              textStyle: ThemeUtils.textStyleInter400.copyWith(
+                color: AppColor.gray424244.withValues(alpha: 0.9),
+                fontSize: 16,
+                height: 21.01 / 16,
+                letterSpacing: -0.15,
+              ),
+              itemHeight: 48,
+              iconSelected: controller.imagePaths.icChecked,
+              onOpenMailboxFolderClick: controller.selectFolderAction,
+              onExpandFolderActionClick: controller.toggleFolder,
+            ),
+            children: _buildListChildTileWidget(
+              parentNode: mailboxNode,
+              mailboxIdSelected: mailboxIdSelected,
+            ),
+          ).build();
+        } else {
+          return MailboxItemWidget(
+            mailboxNode: mailboxNode,
+            mailboxDisplayed: MailboxDisplayed.modalFolder,
+            mailboxIdAlreadySelected: mailboxIdSelected,
+            hoverColor: AppColor.blue100,
+            iconColor: AppColor.gray424244.withValues(alpha: 0.72),
+            textStyle: ThemeUtils.textStyleInter400.copyWith(
+              color: AppColor.gray424244.withValues(alpha: 0.9),
+              fontSize: 16,
+              height: 21.01 / 16,
+              letterSpacing: -0.15,
+            ),
+            itemHeight: 48,
+            iconSelected: controller.imagePaths.icChecked,
+            onOpenMailboxFolderClick: controller.selectFolderAction,
+            onExpandFolderActionClick: controller.toggleFolder,
+          );
+        }
+      },
+    ).toList() ?? [];
+  }
+}

lib/main/routes/dialog_router.dart

@@ -29,7 +29,7 @@ class DialogRouter {
       barrierDismissible: true,
       barrierLabel: routeName,
       routeSettings: RouteSettings(arguments: arguments),
-      pageBuilder: (_, __, ___) => _generateView(routeName: routeName, arguments: arguments)
+      pageBuilder: (_, __, ___) => _generateView(routeName: routeName)
     );
 
     _isDialogOpened.value = false;
@@ -69,8 +69,7 @@ class DialogRouter {
     }
   }
 
-  static Widget _generateView({required String routeName, required Object? arguments}) {
+  static Widget _generateView({required String routeName}) {
-    log('DialogRouter::_generateView():routeName: $routeName | arguments: $arguments');
     switch(routeName) {
       case AppRoutes.mailboxCreator:
         return MailboxCreatorView();