TF-3758 Allow Folders to be expandable

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

lib/features/mailbox/presentation/extensions/toggle_expand_folders_extension.dart

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

lib/features/mailbox/presentation/mailbox_controller.dart

@@ -122,6 +122,7 @@ class MailboxController extends BaseMailboxController
 
   final _activeScrollTop = RxBool(false);
   final _activeScrollBottom = RxBool(true);
+  final foldersExpandMode = Rx(ExpandMode.EXPAND);
 
   MailboxId? _newFolderId;
   NavigationRouter? _navigationRouter;

lib/features/mailbox/presentation/mailbox_view.dart

@@ -5,6 +5,7 @@ import 'package:model/model.dart';
 import 'package:tmail_ui_user/features/base/widget/application_version_widget.dart';
 import 'package:tmail_ui_user/features/home/domain/extensions/session_extensions.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/base_mailbox_view.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/extensions/toggle_expand_folders_extension.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';
@@ -98,37 +99,25 @@ class MailboxView extends BaseMailboxView {
             return const SizedBox.shrink();
           }
         }),
-        FoldersBarWidget(
-          onOpenSearchFolder: () => controller.openSearchViewAction(context),
-          onAddNewFolder:  () => controller.goToCreateNewMailboxView(context),
-          imagePaths: controller.imagePaths,
-          responsiveUtils: controller.responsiveUtils,
-          height: 40,
-          padding: const EdgeInsets.symmetric(horizontal: 24),
-          labelStyle: ThemeUtils.textStyleInter500(),
-        ),
         Obx(() {
-          if (controller.personalMailboxIsNotEmpty) {
+          return FoldersBarWidget(
-            return _buildMailboxCategory(
+            onOpenSearchFolder: () => controller.openSearchViewAction(context),
-              context,
+            onAddNewFolder:  () => controller.goToCreateNewMailboxView(context),
-              MailboxCategories.personalFolders,
+            imagePaths: controller.imagePaths,
-              controller.personalRootNode
+            responsiveUtils: controller.responsiveUtils,
-            );
+            height: 40,
-          } else {
+            padding: const EdgeInsetsDirectional.only(start: 24, end: 12),
-            return const SizedBox.shrink();
+            labelStyle: ThemeUtils.textStyleInter500(),
-          }
+            expandMode: controller.foldersExpandMode.value,
-        }),
+            onToggleExpandFolder: controller.toggleExpandFolders,
-        Obx(() {
+          );
-          if (controller.teamMailboxesIsNotEmpty) {
-            return _buildMailboxCategory(
-              context,
-              MailboxCategories.teamMailboxes,
-              controller.teamMailboxesRootNode
-            );
-          } else {
-            return const SizedBox.shrink();
-          }
         }),
+        Obx(() => AnimatedContainer(
+          duration: const Duration(milliseconds: 400),
+          child: controller.foldersExpandMode.value == ExpandMode.EXPAND
+            ? _buildFolders(context)
+            : const Offstage(),
+        )),
         Obx(() {
           final accountId = controller
               .mailboxDashBoardController
@@ -146,12 +135,17 @@ class MailboxView extends BaseMailboxView {
             return const SizedBox.shrink();
           }
 
+          final isFoldersExpanded =
+              controller.foldersExpandMode.value == ExpandMode.EXPAND;
+
           return Column(
             mainAxisSize: MainAxisSize.min,
             children: [
-              const Padding(
+              Padding(
-                padding: EdgeInsets.only(top: 8),
+                padding: isFoldersExpanded
-                child: Divider(color: AppColor.folderDivider, height: 1),
+                  ? const EdgeInsets.only(top: 8)
+                  : EdgeInsets.zero,
+                child: const Divider(color: AppColor.folderDivider, height: 1),
               ),
               FolderWidget(
                 icon: controller.imagePaths.icHelp,
@@ -175,6 +169,36 @@ class MailboxView extends BaseMailboxView {
     );
   }
 
+  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({
     required BuildContext context,
     required MailboxCategories categories,

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

@@ -3,7 +3,11 @@ import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_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:core/utils/platform_info.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 FoldersBarWidget extends StatelessWidget {
@@ -14,6 +18,8 @@ class FoldersBarWidget extends StatelessWidget {
   final double? height;
   final EdgeInsetsGeometry? padding;
   final TextStyle? labelStyle;
+  final ExpandMode? expandMode;
+  final VoidCallback? onToggleExpandFolder;
 
   const FoldersBarWidget({
     super.key,
@@ -24,6 +30,8 @@ class FoldersBarWidget extends StatelessWidget {
     this.height,
     this.padding,
     this.labelStyle,
+    this.expandMode,
+    this.onToggleExpandFolder,
   });
 
   @override
@@ -61,6 +69,13 @@ class FoldersBarWidget extends StatelessWidget {
       );
     }
 
+    final labelFolder = Text(
+      AppLocalizations.of(context).folders,
+      style: labelStyle ?? ThemeUtils.textStyleInter700(),
+      maxLines: 1,
+      overflow: TextOverflow.ellipsis,
+    );
+
     return Container(
       padding: padding ?? EdgeInsetsDirectional.only(
         start: responsiveUtils.isWebDesktop(context) ? 10 : 26,
@@ -69,15 +84,30 @@ class FoldersBarWidget extends StatelessWidget {
       height: height ?? 48,
       child: Row(
         children: [
-          Expanded(
+          if (expandMode != null)
-            child: Text(
+            Expanded(child: Row(
-              AppLocalizations.of(context).folders,
+              children: [
-              style: labelStyle ?? ThemeUtils.textStyleInter700(),
+                Flexible(child: labelFolder),
-              maxLines: 1,
+                TMailButtonWidget.fromIcon(
-              overflow: TextOverflow.ellipsis,
+                  icon: expandMode!.getIcon(
-            ),
+                    imagePaths,
+                    DirectionUtils.isDirectionRTLByLanguage(context),
+                  ),
+                  iconColor: Colors.black,
+                  iconSize: PlatformInfo.isMobile ? 17 : 20,
+                  backgroundColor: Colors.transparent,
+                  padding: EdgeInsets.all(PlatformInfo.isMobile ? 3 : 5),
+                  tooltipMessage: expandMode!.getTooltipMessage(AppLocalizations.of(context)),
+                  onTapActionCallback: () => onToggleExpandFolder?.call(),
+                )
+              ],
+            ))
+          else
+            Expanded(child: labelFolder),
+          Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [searchBarIcon, newFolderIcon],
           ),
-          Row(children: [searchBarIcon, newFolderIcon]),
         ],
       ),
     );