Add align Folder with icon of folder

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

lib/features/mailbox/presentation/mailbox_view.dart

@@ -11,6 +11,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.d
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/app_grid_view.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/bottom_bar_selection_mailbox_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/folder_widget.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/folders_bar_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_item_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_loading_bar_widget.dart';
@@ -237,39 +238,11 @@ class MailboxView extends BaseMailboxView {
         }),
         const SizedBox(height: 8),
         const Divider(color: AppColor.colorDividerMailbox, height: 1),
-        Container(
+        FoldersBarWidget(
-          padding: const EdgeInsetsDirectional.symmetric(
+          onOpenSearchFolder: () => controller.openSearchViewAction(context),
-            horizontal: 16,
+          onAddNewFolder:  () => controller.goToCreateNewMailboxView(context),
-            vertical: 6
+          imagePaths: controller.imagePaths,
-          ),
+          responsiveUtils: controller.responsiveUtils,
-          child: Row(
-            children: [
-              Expanded(
-                child: Text(
-                  AppLocalizations.of(context).folders,
-                  style: ThemeUtils.textStyleInter700(color: Colors.black),
-                ),
-              ),
-              Row(children: [
-                TMailButtonWidget.fromIcon(
-                  icon: controller.imagePaths.icSearchBar,
-                  iconColor: AppColor.steelGrayA540,
-                  iconSize: 20,
-                  backgroundColor: Colors.transparent,
-                  tooltipMessage: AppLocalizations.of(context).searchForFolders,
-                  onTapActionCallback: () => controller.openSearchViewAction(context)
-                ),
-                TMailButtonWidget.fromIcon(
-                  icon: controller.imagePaths.icAddNewFolder,
-                  iconColor: AppColor.steelGrayA540,
-                  iconSize: 20,
-                  backgroundColor: Colors.transparent,
-                  tooltipMessage: AppLocalizations.of(context).newFolder,
-                  onTapActionCallback: () => controller.goToCreateNewMailboxView(context)
-                ),
-              ]),
-            ],
-          ),
         ),
         Obx(() {
           if (controller.personalMailboxIsNotEmpty) {

lib/features/mailbox/presentation/mailbox_view_web.dart

@@ -12,6 +12,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_catego
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/app_grid_view.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/folder_widget.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/folders_bar_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_item_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_loading_bar_widget.dart';
@@ -135,46 +136,11 @@ class MailboxView extends BaseMailboxView {
         }),
         const SizedBox(height: 8),
         const Divider(color: AppColor.colorDividerMailbox, height: 1),
-        Padding(
+        FoldersBarWidget(
-          padding: const EdgeInsetsDirectional.symmetric(vertical: 4),
+          onOpenSearchFolder: () => controller.openSearchViewAction(context),
-          child: Row(
+          onAddNewFolder:  () => controller.goToCreateNewMailboxView(context),
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          imagePaths: controller.imagePaths,
-            children: [
+          responsiveUtils: controller.responsiveUtils,
-              Expanded(
-                child: Padding(
-                  padding: EdgeInsetsDirectional.only(
-                    start: controller.responsiveUtils.isWebDesktop(context) ? 0 : 16,
-                  ),
-                  child: Text(
-                    AppLocalizations.of(context).folders,
-                    style: ThemeUtils.textStyleInter700(color: Colors.black),
-                  ),
-                ),
-              ),
-              Padding(
-                padding: EdgeInsetsDirectional.only(end: controller.responsiveUtils.isDesktop(context) ? 0 : 12),
-                child: Row(
-                  children: [
-                    TMailButtonWidget.fromIcon(
-                      icon: controller.imagePaths.icSearchBar,
-                      backgroundColor: Colors.transparent,
-                      iconColor: AppColor.steelGrayA540,
-                      iconSize: 20,
-                      tooltipMessage: AppLocalizations.of(context).searchForFolders,
-                      onTapActionCallback: () => controller.openSearchViewAction(context)
-                    ),
-                    TMailButtonWidget.fromIcon(
-                      icon: controller.imagePaths.icAddNewFolder,
-                      backgroundColor: Colors.transparent,
-                      iconColor: AppColor.steelGrayA540,
-                      iconSize: 20,
-                      tooltipMessage: AppLocalizations.of(context).newFolder,
-                      onTapActionCallback: () => controller.goToCreateNewMailboxView(context)
-                    ),
-                  ],
-                )
-              ),
-            ]),
         ),
         Obx(() {
           if (controller.personalMailboxIsNotEmpty) {

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

@@ -0,0 +1,77 @@
+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/utils/theme_utils.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class FoldersBarWidget extends StatelessWidget {
+  final VoidCallback onOpenSearchFolder;
+  final VoidCallback onAddNewFolder;
+  final ImagePaths imagePaths;
+  final ResponsiveUtils responsiveUtils;
+
+  const FoldersBarWidget({
+    super.key,
+    required this.onOpenSearchFolder,
+    required this.onAddNewFolder,
+    required this.imagePaths,
+    required this.responsiveUtils,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    Widget searchBarIcon = TMailButtonWidget.fromIcon(
+      icon: imagePaths.icSearchBar,
+      backgroundColor: Colors.transparent,
+      iconColor: AppColor.steelGrayA540,
+      iconSize: 20,
+      tooltipMessage: AppLocalizations.of(context).searchForFolders,
+      onTapActionCallback: onOpenSearchFolder,
+    );
+
+    if (responsiveUtils.isWebDesktop(context)) {
+      searchBarIcon = Transform(
+        transform: Matrix4.translationValues(8, 0, 0),
+        child: searchBarIcon,
+      );
+    }
+
+    Widget newFolderIcon = TMailButtonWidget.fromIcon(
+      icon: imagePaths.icAddNewFolder,
+      backgroundColor: Colors.transparent,
+      iconColor: AppColor.steelGrayA540,
+      iconSize: 24,
+      padding: const EdgeInsets.all(5),
+      tooltipMessage: AppLocalizations.of(context).newFolder,
+      onTapActionCallback: onAddNewFolder,
+    );
+
+    if (responsiveUtils.isWebDesktop(context)) {
+      newFolderIcon = Transform(
+        transform: Matrix4.translationValues(8, 0, 0),
+        child: newFolderIcon,
+      );
+    }
+
+    return Container(
+      padding: EdgeInsetsDirectional.only(
+        start: responsiveUtils.isWebDesktop(context) ? 10 : 26,
+        end: responsiveUtils.isWebDesktop(context) ? 0 : 8,
+      ),
+      height: 48,
+      child: Row(
+        children: [
+          Expanded(
+            child: Text(
+              AppLocalizations.of(context).folders,
+              style: ThemeUtils.textStyleInter700(color: Colors.black),
+            ),
+          ),
+          Row(children: [searchBarIcon, newFolderIcon]),
+        ],
+      ),
+    );
+  }
+}