TF-467 Apply new UI for mailbox browser

assets/images/ic_menu_drawer.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.3333 19.8334C23.9777 19.8334 24.5 20.3557 24.5 21C24.5 21.6444 23.9777 22.1667 23.3333 22.1667H4.66667C4.02233 22.1667 3.5 21.6444 3.5 21C3.5 20.3557 4.02233 19.8334 4.66667 19.8334H23.3333ZM23.3333 15.1667C23.9777 15.1667 24.5 15.689 24.5 16.3334C24.5 16.9777 23.9777 17.5 23.3333 17.5H4.66667C4.02233 17.5 3.5 16.9777 3.5 16.3334C3.5 15.689 4.02233 15.1667 4.66667 15.1667H23.3333ZM23.3333 10.5C23.9777 10.5 24.5 11.0224 24.5 11.6667C24.5 12.311 23.9777 12.8334 23.3333 12.8334H4.66667C4.02233 12.8334 3.5 12.311 3.5 11.6667C3.5 11.0224 4.02233 10.5 4.66667 10.5H23.3333ZM23.3333 5.83337C23.9777 5.83337 24.5 6.35571 24.5 7.00004C24.5 7.64437 23.9777 8.16671 23.3333 8.16671H4.66667C4.02233 8.16671 3.5 7.64437 3.5 7.00004C3.5 6.35571 4.02233 5.83337 4.66667 5.83337H23.3333Z" fill="#99A2AD"/>
+</svg>

core/lib/presentation/extensions/color_extension.dart

@@ -107,6 +107,7 @@ extension AppColor on Color {
   static const colorAvatar = Color(0xFFDE5E5E);
   static const colorFocusButton = Color(0x14818C99);
   static const colorBorderEmailAddressInvalid = Color(0xFFFF3347);
+  static const colorBgMailboxSelected = Color(0xFF99E4E8EC);
 
   static const mapGradientColor = [
     [Color(0xFF21D4FD), Color(0xFFB721FF)],

core/lib/presentation/resources/image_paths.dart

@@ -87,6 +87,7 @@ class ImagePaths {
   String get icEmpty => _getImagePath('ic_empty.svg');
   String get icNotConnection => _getImagePath('ic_not_connection.svg');
   String get icDeleteTrash => _getImagePath('ic_delete_trash.svg');
+  String get icMenuDrawer => _getImagePath('ic_menu_drawer.svg');
 
   String _getImagePath(String imageName) {
     return AssetsPaths.images + imageName;

core/lib/presentation/utils/responsive_utils.dart

@@ -9,7 +9,7 @@ class ResponsiveUtils {
   final int minTabletLargeWidth = 900;
 
   final double defaultSizeDrawerWidthMobileTablet = 375;
-  final double defaultSizeDrawerWidthWeb = 320;
+  final double defaultSizeDrawerWidthWeb = 262;
 
   final double _loginTextFieldWidthSmallScreen = 280.0;
   final double _loginTextFieldWidthLargeScreen = 320.0;

core/lib/presentation/views/button/icon_button_web.dart

@@ -20,7 +20,7 @@ Widget buildIconWeb({
           icon: icon,
           iconSize: iconSize,
           padding: iconPadding ?? EdgeInsets.all(8.0),
-          splashRadius: splashRadius ?? 20,
+          splashRadius: splashRadius ?? 15,
           tooltip: tooltip ?? '',
           onPressed: onTap)
   );

core/lib/presentation/views/search/search_bar_view.dart

@@ -1,6 +1,8 @@
 
 import 'package:core/core.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 
 typedef OnOpenSearchViewAction = Function();
@@ -61,30 +63,20 @@ class SearchBarView {
               child: Row(
                 crossAxisAlignment: CrossAxisAlignment.center,
                 children: [
-                  _buildSearchButton(),
+                  buildIconWeb(
-                  Expanded(child: Text(
+                      splashRadius: 12,
-                    _hintTextSearch ?? '',
+                      icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 16, height: 16, fit: BoxFit.fill),
-                    maxLines: 1,
+                      onTap: () => _onOpenSearchViewAction?.call()),
-                    style: TextStyle(fontSize: 17, color: AppColor.colorHintSearchBar)))
+                  Expanded(child:
+                    Transform(transform: Matrix4.translationValues(-5, 0.0, 0.0),
+                    child: Text(
+                        _hintTextSearch ?? '',
+                        maxLines: 1,
+                        style: TextStyle(fontSize: kIsWeb ? 15 : 17, color: AppColor.colorHintSearchBar))))
                 ]
               )
           )
       ),
     );
   }
-
- Widget _buildSearchButton() {
-   return Material(
-     color: Colors.transparent,
-     shape: CircleBorder(),
-     child: Padding(
-       padding: EdgeInsets.only(left: 2),
-       child: IconButton(
-         splashRadius: 20,
-         icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 18, height: 18, fit: BoxFit.fill),
-         onPressed: () => _onOpenSearchViewAction?.call()
-       )
-     )
-   );
- }
 }

lib/features/base/base_mailbox_controller.dart

@@ -14,6 +14,8 @@ abstract class BaseMailboxController extends BaseController {
 
   final folderMailboxTree = MailboxTree(MailboxNode.root()).obs;
   final defaultMailboxTree = MailboxTree(MailboxNode.root()).obs;
+  final listMailboxNodeSelected = <MailboxNode>[].obs;
+  final listPresentationMailboxSelected = <PresentationMailbox>[].obs;
 
   List<PresentationMailbox> allMailboxes = <PresentationMailbox>[];
 
@@ -55,6 +57,13 @@ abstract class BaseMailboxController extends BaseController {
         ? SelectMode.ACTIVE
         : SelectMode.INACTIVE;
 
+
+    if (newSelectMode == SelectMode.INACTIVE) {
+      listMailboxNodeSelected.removeWhere((mailboxNode) => mailboxNode.item.id == mailboxNodeSelected.item.id);
+    } else {
+      listMailboxNodeSelected.add(mailboxNodeSelected);
+    }
+
     if (defaultMailboxTree.value.updateSelectedNode(mailboxNodeSelected, newSelectMode) != null) {
       log('selectMailboxNode() refresh defaultMailboxTree');
       defaultMailboxTree.refresh();

lib/features/mailbox/presentation/mailbox_controller.dart

@@ -2,6 +2,7 @@ import 'dart:async';
 
 import 'package:core/core.dart';
 import 'package:dartz/dartz.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
@@ -168,6 +169,8 @@ class MailboxController extends BaseMailboxController {
     _openMailboxEventController.stream.throttleTime(Duration(milliseconds: 800)).listen((event) {
       _handleOpenMailbox(event.buildContext, event.presentationMailbox);
     });
+
+    _initCollapseMailboxCategories();
   }
 
   @override
@@ -225,6 +228,16 @@ class MailboxController extends BaseMailboxController {
   @override
   void onError(error) {}
 
+  void _initCollapseMailboxCategories() {
+    if (currentContext != null) {
+      if (kIsWeb && (_responsiveUtils.isMobile(currentContext!)) || _responsiveUtils.isTablet(currentContext!)) {
+        mailboxCategoriesExpandMode.value = MailboxCategoriesExpandMode(
+            defaultMailbox: ExpandMode.COLLAPSE,
+            folderMailbox: ExpandMode.COLLAPSE);
+      }
+    }
+  }
+
   void getAllMailboxAction(AccountId accountId) async {
     consumeState(_getAllMailboxInteractor.execute(accountId));
   }
@@ -367,12 +380,13 @@ class MailboxController extends BaseMailboxController {
 
   void enableSearch() {
     _cancelSelectMailbox();
+    listMailboxNodeSelected.clear();
     searchState.value = searchState.value.enableSearchState();
   }
 
   void disableSearch(BuildContext context) {
     _cancelSelectMailbox();
-
+    listPresentationMailboxSelected.clear();
     listMailboxSearched.clear();
     searchState.value = searchState.value.disableSearchState();
     searchQuery.value = SearchQuery.initial();
@@ -384,10 +398,12 @@ class MailboxController extends BaseMailboxController {
     searchQuery.value = SearchQuery.initial();
     searchFocus.requestFocus();
     listMailboxSearched.clear();
+    listPresentationMailboxSelected.clear();
   }
 
   void searchMailbox(String value) {
     searchQuery.value = SearchQuery(value);
+    listPresentationMailboxSelected.clear();
     _searchMailboxAction(allMailboxes, searchQuery.value);
   }
 
@@ -418,13 +434,17 @@ class MailboxController extends BaseMailboxController {
 
   bool isSelectionEnabled() => currentSelectMode.value == SelectMode.ACTIVE;
 
-  void selectMailbox(BuildContext context, PresentationMailbox mailboxSelected) {
+  void selectMailboxSearched(BuildContext context, PresentationMailbox mailboxSelected) {
-    if (isSearchActive()) {
+    listMailboxSearched.value = listMailboxSearched
-      listMailboxSearched.value = listMailboxSearched
+        .map((mailbox) => mailbox.id == mailboxSelected.id ? mailbox.toggleSelectPresentationMailbox() : mailbox)
-          .map((mailbox) => mailbox.id == mailboxSelected.id
+        .toList();
-              ? mailbox.toggleSelectPresentationMailbox()
+
-              : mailbox)
+    if (kIsWeb) {
-          .toList();
+      if (mailboxSelected.selectMode == SelectMode.ACTIVE) {
+        listPresentationMailboxSelected.removeWhere((mailbox) => mailbox.id == mailboxSelected.id);
+      } else {
+        listPresentationMailboxSelected.add(mailboxSelected);
+      }
     }
   }
 
@@ -438,6 +458,10 @@ class MailboxController extends BaseMailboxController {
       folderMailboxTree.value.updateNodesUIMode(SelectMode.INACTIVE, ExpandMode.COLLAPSE);
     }
     currentSelectMode.value = SelectMode.INACTIVE;
+    if (kIsWeb) {
+      listPresentationMailboxSelected.clear();
+      listMailboxNodeSelected.clear();
+    }
   }
 
   List<PresentationMailbox> get listMailboxSelected {

lib/features/mailbox/presentation/mailbox_view.dart

@@ -418,7 +418,7 @@ class MailboxView extends GetWidget<MailboxController> {
                         allSelectMode: controller.currentSelectMode.value,
                         lastMailbox: controller.listMailboxSearched.last)
                     ..addOnOpenMailboxAction((mailbox) => controller.openMailbox(context, mailbox))
-                    ..addOnSelectMailboxActionClick((mailbox) => controller.selectMailbox(context, mailbox)))
+                    ..addOnSelectMailboxActionClick((mailbox) => controller.selectMailboxSearched(context, mailbox)))
                   .build())
         )
     ));

lib/features/mailbox/presentation/mailbox_view_web.dart

@@ -6,6 +6,7 @@ import 'package:get/get.dart';
 import 'package:model/model.dart';
 import 'package:package_info_plus/package_info_plus.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_controller.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/widgets/bottom_bar_selection_mailbox_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart';
@@ -21,195 +22,102 @@ class MailboxView extends GetWidget<MailboxController> {
 
   @override
   Widget build(BuildContext context) {
-    return _buildBodyMailbox(context);
+    return Drawer(
-  }
+        child: Scaffold(
-
+          backgroundColor: Colors.white,
-  Widget _buildBodyMailbox(BuildContext context) {
+          body: Column(
-    return SafeArea(
+              children: [
-        top: _responsiveUtils.isMobile(context) ? true : false,
+                _buildLogoApp(context),
-        bottom: false,
+                if (!_responsiveUtils.isDesktop(context)) Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
-        left: false,
+                Expanded(child: Container(
-        right: false,
+                  padding: EdgeInsets.zero,
-        child: ClipRRect(
+                  color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
-            borderRadius: BorderRadius.only(
+                  child: Column(children: [
-                topRight: Radius.circular(_responsiveUtils.isMobile(context) ? 14 : 0),
+                    if (_responsiveUtils.isDesktop(context)) _buildComposerButton(context),
-                topLeft: Radius.circular(_responsiveUtils.isMobile(context) ? 14 : 0)),
+                    SizedBox(height: 16),
-            child: Drawer(
+                    Obx(() => controller.isSearchActive() ? _buildInputSearchFormWidget(context) : SizedBox.shrink()),
-                child: Scaffold(
+                    Expanded(child: Obx(() => Container(
-                  backgroundColor: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
+                      color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
-                  body: Column(
+                      padding: EdgeInsets.zero,
-                      children: [
+                      child: RefreshIndicator(
-                        if (_responsiveUtils.isDesktop(context))
+                          color: AppColor.primaryColor,
-                          Container(
+                          onRefresh: () async => controller.refreshAllMailbox(),
-                              color: Colors.white,
+                          child: controller.isSearchActive()
-                              padding: EdgeInsets.only(left: 20, top: 20, bottom: 24),
+                              ? _buildListMailboxSearched(context, controller.listMailboxSearched)
-                              child: (SloganBuilder(arrangedByHorizontal: true)
+                              : _buildListMailbox(context)),
-                                ..setSloganText(AppLocalizations.of(context).app_name)
+                    ))),
-                                ..setSloganTextAlign(TextAlign.center)
+                  ]),
-                                ..setSloganTextStyle(TextStyle(color: Colors.black, fontSize: 25, fontWeight: FontWeight.bold))
+                )),
-                                ..setSizeLogo(28)
-                                ..setLogo(_imagePaths.icLogoTMail))
-                                  .build()),
-                        if (!_responsiveUtils.isDesktop(context)) _buildHeaderMailbox(context),
-                        if (_responsiveUtils.isDesktop(context))
-                          Row(children: [
-                            Expanded(child: Container(
-                                padding: EdgeInsets.only(top: 16, left: 20),
-                                color: AppColor.colorBgDesktop,
-                                alignment: Alignment.centerLeft,
-                                child: (ButtonBuilder(_imagePaths.icCompose)
-                                  ..key(Key('button_compose_email'))
-                                  ..decoration(BoxDecoration(borderRadius: BorderRadius.circular(25), color: AppColor.colorTextButton))
-                                  ..paddingIcon(EdgeInsets.only(right: 8))
-                                  ..iconColor(Colors.white)
-                                  ..maxWidth(140)
-                                  ..size(20)
-                                  ..radiusSplash(10)
-                                  ..padding(EdgeInsets.symmetric(vertical: 13))
-                                  ..textStyle(TextStyle(fontSize: 15, color: Colors.white, fontWeight: FontWeight.w500))
-                                  ..onPressActionClick(() => controller.mailboxDashBoardController.composeEmailAction())
-                                  ..text(AppLocalizations.of(context).compose, isVertical: false))
-                                    .build())
-                            ),
-                            Obx(() {
-                              if (controller.isSearchActive()) {
-                                return controller.listMailboxSearched.isNotEmpty
-                                    ? Padding(
-                                    padding: EdgeInsets.only(top: 16),
-                                    child: _buildEditMailboxButton(context, controller.isSelectionEnabled()))
-                                    : SizedBox.shrink();
-                              } else {
-                                return Padding(
-                                    padding: EdgeInsets.only(top: 16),
-                                    child: _buildEditMailboxButton(context, controller.isSelectionEnabled()));
-                              }
-                            })
-                          ]),
-                        Obx(() => !controller.isSearchActive() && _responsiveUtils.isDesktop(context)
-                            ? Row(children: [
-                          Expanded(child: _buildSearchBarWidget(context)),
-                          buildIconWeb(
-                              icon: SvgPicture.asset(_imagePaths.icAddNewFolder, color: AppColor.colorTextButton, fit: BoxFit.fill),
-                              tooltip: AppLocalizations.of(context).new_mailbox,
-                              onTap: () => controller.goToCreateNewMailboxView()),
-                        ])
-                            : SizedBox.shrink()),
-                        Obx(() => controller.isSearchActive() ? _buildInputSearchFormWidget(context) : SizedBox.shrink()),
-                        Expanded(child: Obx(() => Container(
-                          color: _responsiveUtils.isDesktop(context)
-                              ? Colors.transparent
-                              : controller.isSearchActive() ? Colors.white : AppColor.colorBgMailbox,
-                          child: RefreshIndicator(
-                              color: AppColor.primaryColor,
-                              onRefresh: () async => controller.refreshAllMailbox(),
-                              child: controller.isSearchActive()
-                                  ? _buildListMailboxSearched(context, controller.listMailboxSearched)
-                                  : _buildListMailbox(context)),
-                        ))),
-                        Obx(() => controller.isSelectionEnabled()
-                            ? _buildOptionSelectionMailbox(context)
-                            : SizedBox.shrink()),
-                      ]
-                  ),
-                )
-            )
-        )
-    );
-  }
-
-  Widget _buildHeaderMailbox(BuildContext context) {
-    return Column(
-        mainAxisAlignment: MainAxisAlignment.start,
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Padding(
-              padding: EdgeInsets.only(
-                  top: _responsiveUtils.isMobile(context) ? 14 : 30,
-                  bottom: 10),
-              child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
-                !_responsiveUtils.isDesktop(context) && !_responsiveUtils.isTabletLarge(context)
-                    ? _buildCloseScreenButton(context)
-                    : SizedBox(width: 50),
                 Obx(() {
                   if (controller.isSearchActive()) {
-                    return controller.listMailboxSearched.isNotEmpty
+                    return controller.listPresentationMailboxSelected.isNotEmpty
-                        ? SizedBox(width: controller.isSelectionEnabled() ? 49 : 40)
+                        ? _buildOptionSelectionMailbox(context)
                         : SizedBox.shrink();
                   } else {
-                    return SizedBox(width: controller.isSelectionEnabled() ? 49 : 40);
+                    return controller.listMailboxNodeSelected.isNotEmpty
+                        ? _buildOptionSelectionMailbox(context)
+                        : SizedBox.shrink();
                   }
                 }),
-                Expanded(child: Text(
+              ]
-                    AppLocalizations.of(context).folders,
+          ),
-                    textAlign: TextAlign.center,
-                    style: TextStyle(fontSize: 20, color: AppColor.colorNameEmail, fontWeight: FontWeight.w700))),
-                Obx(() {
-                  if (controller.isSearchActive()) {
-                    return controller.listMailboxSearched.isNotEmpty
-                        ? _buildEditMailboxButton(context, controller.isSelectionEnabled())
-                        : SizedBox(width: 25);
-                  } else {
-                    return _buildEditMailboxButton(context, controller.isSelectionEnabled());
-                  }
-                }),
-                _buildAddNewFolderButton(context),
-              ])),
-          Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
-        ]
-    );
-  }
-
-  Widget _buildCloseScreenButton(BuildContext context) {
-    return Padding(
-        padding: EdgeInsets.only(left: 16, right: 16),
-        child: IconButton(
-            key: Key('mailbox_close_button'),
-            onPressed: () => controller.closeMailboxScreen(context),
-            icon: SvgPicture.asset(_imagePaths.icCloseMailbox, width: 30, height: 30, fit: BoxFit.fill)));
-  }
-
-  Widget _buildAddNewFolderButton(BuildContext context) {
-    return Padding(
-        padding: EdgeInsets.only(right: 10),
-        child: IconButton(
-            key: Key('create_new_mailbox_button'),
-            onPressed: () => controller.goToCreateNewMailboxView(),
-            icon: SvgPicture.asset(_imagePaths.icAddNewFolder, width: 30, height: 30, fit: BoxFit.fill)));
-  }
-
-  Widget _buildEditMailboxButton(BuildContext context, bool isSelectionEnabled) {
-    return Material(
-        shape: CircleBorder(),
-        color: Colors.transparent,
-        child: TextButton(
-            child: Text(
-                !isSelectionEnabled ? AppLocalizations.of(context).edit : AppLocalizations.of(context).cancel,
-                style: TextStyle(fontSize: 17, color: AppColor.colorTextButton)),
-            onPressed: () => !isSelectionEnabled
-                ? controller.enableSelectionMailbox()
-                : controller.disableSelectionMailbox()
         )
     );
   }
 
-  Widget _buildUserInformationWidget(BuildContext context) {
+  Widget _buildLogoApp(BuildContext context) {
-    return Padding(
+    return Container(
-        padding: EdgeInsets.only(left: 16, top: 8.0, right: 16),
+        color: Colors.white,
-        child: Obx(() => (UserInformationWidgetBuilder(
+        padding: EdgeInsets.only(
-            _imagePaths,
+            top: _responsiveUtils.isDesktop(context) ? 25 : 16,
-            context,
+            bottom: _responsiveUtils.isDesktop(context) ? 25 : 16,
-            controller.mailboxDashBoardController.userProfile.value)
+            left: _responsiveUtils.isDesktop(context) ? 32 : 16),
-          ..addOnLogoutAction(() => controller.mailboxDashBoardController.logoutAction()))
+        child: Row(children: [
-            .build()));
+              (SloganBuilder(arrangedByHorizontal: true)
+            ..setSloganText(AppLocalizations.of(context).app_name)
+            ..setSloganTextAlign(TextAlign.center)
+            ..setSloganTextStyle(TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold))
+            ..setSizeLogo(24)
+            ..setLogo(_imagePaths.icLogoTMail))
+          .build(),
+          Obx(() {
+            if (controller.mailboxDashBoardController.appInformation.value != null) {
+              return _buildVersionInformation(context, controller.mailboxDashBoardController.appInformation.value!);
+            } else {
+              return SizedBox.shrink();
+            }
+          }),
+        ])
+    );
+  }
+
+  Widget _buildComposerButton(BuildContext context) {
+    return Container(
+        padding: EdgeInsets.only(top: 16, right: 16, left: 20),
+        color: AppColor.colorBgDesktop,
+        alignment: Alignment.centerLeft,
+        child: (ButtonBuilder(_imagePaths.icCompose)
+            ..key(Key('button_compose_email'))
+            ..decoration(BoxDecoration(borderRadius: BorderRadius.circular(25), color: AppColor.colorTextButton))
+            ..paddingIcon(EdgeInsets.only(right: 8))
+            ..iconColor(Colors.white)
+            ..maxWidth(140)
+            ..size(20)
+            ..radiusSplash(10)
+            ..padding(EdgeInsets.symmetric(vertical: 13))
+            ..textStyle(TextStyle(fontSize: 15, color: Colors.white, fontWeight: FontWeight.w500))
+            ..onPressActionClick(() => controller.mailboxDashBoardController.composeEmailAction())
+            ..text(AppLocalizations.of(context).compose, isVertical: false))
+          .build());
   }
 
   Widget _buildSearchBarWidget(BuildContext context) {
     return Padding(
-        padding: EdgeInsets.only(top: _responsiveUtils.isDesktop(context) ? 16 : 12, bottom: 16, left: 16, right: 16),
+        padding: EdgeInsets.only(top: 16, bottom: 16, right: 4, left: _responsiveUtils.isDesktop(context) ? 0 : 12),
         child: (SearchBarView(_imagePaths)
-          ..hintTextSearch(AppLocalizations.of(context).hint_search_mailboxes)
+            ..hintTextSearch(AppLocalizations.of(context).hint_search_mailboxes)
-          ..addOnOpenSearchViewAction(() => controller.enableSearch()))
+            ..addOnOpenSearchViewAction(() => controller.enableSearch()))
-            .build());
+          .build());
   }
 
   Widget _buildLoadingView() {
@@ -231,222 +139,191 @@ class MailboxView extends GetWidget<MailboxController> {
         key: PageStorageKey('mailbox_list'),
         primary: false,
         shrinkWrap: true,
-        padding: EdgeInsets.zero,
+        padding: EdgeInsets.only(
+            right: _responsiveUtils.isDesktop(context) ? 8 : 0,
+            left: _responsiveUtils.isDesktop(context) ? 20 : 0),
         children: [
-          Obx(() => (controller.isSelectionEnabled() && _responsiveUtils.isMobileDevice(context) && _responsiveUtils.isLandscape(context))
-              || _responsiveUtils.isDesktop(context) ? SizedBox.shrink() : _buildUserInformationWidget(context)),
-          Obx(() => (controller.isSelectionEnabled() && _responsiveUtils.isMobileDevice(context) && _responsiveUtils.isLandscape(context))
-              || _responsiveUtils.isDesktop(context) ? SizedBox.shrink() : _buildLineSpaceUserInformation()),
-          if (!_responsiveUtils.isDesktop(context)) _buildSearchBarWidget(context),
-          _buildLoadingView(),
-          Obx(() => controller.defaultMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
-              ? Container(
-              decoration: BoxDecoration(
-                  borderRadius: BorderRadius.circular(14),
-                  color: Colors.white),
-              margin: EdgeInsets.only(left: 16, right: 16, top: 4),
-              child: _buildDefaultMailbox(context))
-              : SizedBox.shrink()),
-          Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
-              ? Padding(
-              padding: EdgeInsets.only(left: 25, top: 26, bottom: 12),
-              child: Text(
-                  AppLocalizations.of(context).folders,
-                  maxLines: 1,
-                  style: TextStyle(fontSize: 20, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600)))
-              : SizedBox.shrink()),
-          Container(
-            decoration: BoxDecoration(
-                borderRadius: BorderRadius.circular(14),
-                color: Colors.white),
-            margin: EdgeInsets.only(left: 16, right: 16, bottom: 30),
-            child: _buildFolderMailbox(context),
-          ),
           Obx(() {
-            if (controller.mailboxDashBoardController.appInformation.value != null) {
+            if ((controller.isSelectionEnabled()
-              return _buildVersionInformation(context, controller.mailboxDashBoardController.appInformation.value!);
+                && _responsiveUtils.isMobile(context)
-            } else {
+                && _responsiveUtils.isLandscape(context))
+                || _responsiveUtils.isDesktop(context)) {
               return SizedBox.shrink();
             }
+            return _buildUserInformation(context);
           }),
+          _buildLoadingView(),
+          Obx(() => controller.defaultMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
+              ? _buildMailboxCategory(context, MailboxCategories.exchange, controller.defaultMailboxTree.value.root)
+              : SizedBox.shrink()),
+          SizedBox(height: 8),
+          Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
+              ? Column(children: [
+                  Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
+                  SizedBox(height: 8),
+                ])
+              : SizedBox.shrink()),
+          Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
+              ? _buildMailboxCategory(context, MailboxCategories.folders, controller.folderMailboxTree.value.root)
+              : SizedBox.shrink()),
+          Obx(() => !controller.isSearchActive()
+              ? Row(children: [
+                  Expanded(child: _buildSearchBarWidget(context)),
+                  Padding(
+                    padding: EdgeInsets.only(right: 8),
+                    child: buildIconWeb(
+                        icon: SvgPicture.asset(_imagePaths.icAddNewFolder, color: AppColor.colorTextButton, fit: BoxFit.fill),
+                        tooltip: AppLocalizations.of(context).new_mailbox,
+                        onTap: () => controller.goToCreateNewMailboxView())),
+                ])
+              : SizedBox.shrink()),
         ]
     );
   }
 
-  Widget _buildLineSpaceUserInformation() {
+  Widget _buildUserInformation(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.symmetric(vertical: 10),
+      child: Column(children: [
+        Padding(
+          padding: EdgeInsets.only(left: 16, bottom: 10),
+          child: (UserInformationWidgetBuilder(_imagePaths, context, controller.mailboxDashBoardController.userProfile.value)
+              ..addOnLogoutAction(() => controller.mailboxDashBoardController.logoutAction()))
+            .build()),
+        Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2)
+      ]),
+    );
+  }
+
+  Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) {
     return Padding(
-        padding: EdgeInsets.only(top: 16),
+        padding: EdgeInsets.only(left: _responsiveUtils.isDesktop(context) ? 12 : 16, right: _responsiveUtils.isDesktop(context) ? 4 : 12),
-        child: Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2));
+        child: Row(children: [
+          Expanded(child: Text(categories.getTitle(context),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: TextStyle(fontSize: 17, color: Colors.black, fontWeight: FontWeight.bold))),
+          buildIconWeb(
+              splashRadius: 12,
+              icon: SvgPicture.asset(
+                  categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
+                      ? _imagePaths.icExpandFolder
+                      : _imagePaths.icCollapseFolder,
+                  color: AppColor.primaryColor, fit: BoxFit.fill),
+              tooltip: AppLocalizations.of(context).collapse,
+              onTap: () => controller.toggleMailboxCategories(categories))
+        ]));
   }
 
-  Widget _buildDefaultMailbox(BuildContext context) {
+  Widget _buildBodyMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) {
-    return Obx(() => controller.defaultMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
+    final lastNode = mailboxNode.childrenItems?.last;
-        ? Transform(
+
-        transform: Matrix4.translationValues(-4.0, 0.0, 0.0),
+    return Container(
-        child: Padding(
+        margin: EdgeInsets.zero,
-            padding: EdgeInsets.only(top: 10, bottom: 10),
+        padding: EdgeInsets.only(right: _responsiveUtils.isDesktop(context) ? 8 : 16, left: _responsiveUtils.isDesktop(context) ? 0 : 12),
-            child: TreeView(
+        child: TreeView(
-                startExpanded: false,
+            key: Key('${categories.keyValue}_mailbox_list'),
-                key: Key('default_mailbox_list'),
+            children: _buildListChildTileWidget(context, mailboxNode, lastNode: lastNode)));
-                children: _buildListChildTileWidget(context, controller.defaultMailboxTree.value.root)))
-    )
-        : SizedBox.shrink()
-    );
   }
 
-  Widget _buildFolderMailbox(BuildContext context) {
+  Widget _buildMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) {
-    return Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
+    return Column(children: [
-        ? Transform(
+      _buildHeaderMailboxCategory(context, categories),
-        transform: Matrix4.translationValues(-4.0, 0.0, 0.0),
+      AnimatedContainer(
-        child: Padding(
+          duration: Duration(milliseconds: 400),
-            padding: EdgeInsets.only(top: 10, bottom: 10),
+          child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
-            child: TreeView(
+              ? _buildBodyMailboxCategory(context, categories, mailboxNode)
-                startExpanded: false,
+              : Offstage())
-                key: Key('folder_mailbox_list'),
+    ]);
-                children: _buildListChildTileWidget(context, controller.folderMailboxTree.value.root)))
-    )
-        : SizedBox.shrink()
-    );
   }
 
-  List<Widget> _buildListChildTileWidget(BuildContext context, MailboxNode parentNode) {
+  List<Widget> _buildListChildTileWidget(BuildContext context, MailboxNode parentNode, {MailboxNode? lastNode}) {
     return parentNode.childrenItems
         ?.map((mailboxNode) => mailboxNode.hasChildren()
-        ? Padding(
+          ? TreeViewChild(
-        padding: EdgeInsets.only(left: 16),
-        child: TreeViewChild(
-            context,
-            key: Key('children_tree_mailbox_child'),
-            isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
-            parent: Obx(() => (MailBoxFolderTileBuilder(
                 context,
-                _imagePaths,
+                key: Key('children_tree_mailbox_child'),
-                mailboxNode,
+                isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
-                allSelectMode: controller.currentSelectMode.value)
+                parent: Obx(() => (MailBoxFolderTileBuilder(context, _imagePaths, mailboxNode, lastNode: lastNode,
+                        mailboxNodeSelected: controller.mailboxDashBoardController.selectedMailbox.value)
+                    ..addOnOpenMailboxFolderClick((mailboxNode) => controller.openMailbox(context, mailboxNode.item))
+                    ..addOnExpandFolderActionClick((mailboxNode) => controller.toggleMailboxFolder(mailboxNode))
+                    ..addOnSelectMailboxFolderClick((mailboxNode) => controller.selectMailboxNode(mailboxNode)))
+                  .build()),
+                children: _buildListChildTileWidget(context, mailboxNode)
+            ).build()
+          : Obx(() => (MailBoxFolderTileBuilder(context, _imagePaths, mailboxNode, lastNode: lastNode,
+                  mailboxNodeSelected: controller.mailboxDashBoardController.selectedMailbox.value)
               ..addOnOpenMailboxFolderClick((mailboxNode) => controller.openMailbox(context, mailboxNode.item))
-              ..addOnExpandFolderActionClick((mailboxNode) => controller.toggleMailboxFolder(mailboxNode))
               ..addOnSelectMailboxFolderClick((mailboxNode) => controller.selectMailboxNode(mailboxNode)))
-                .build()),
+            .build())
-            children: _buildListChildTileWidget(context, mailboxNode)
-        ).build())
-        : Padding(
-        padding: EdgeInsets.only(left: 16),
-        child: Obx(() => (MailBoxFolderTileBuilder(
-            context,
-            _imagePaths,
-            mailboxNode,
-            allSelectMode: controller.currentSelectMode.value)
-          ..addOnOpenMailboxFolderClick((mailboxNode) => controller.openMailbox(context, mailboxNode.item))
-          ..addOnSelectMailboxFolderClick((mailboxNode) => controller.selectMailboxNode(mailboxNode)))
-            .build(),
-        )
-    )
     ).toList() ?? <Widget>[];
   }
 
   Widget _buildInputSearchFormWidget(BuildContext context) {
     return Padding(
-        padding: EdgeInsets.only(top: 16, bottom: 16),
+        padding: EdgeInsets.only(left: 8),
         child: Row(
             children: [
-              _buildBackSearchButton(context),
+              buildIconWeb(
-              Expanded(child: (SearchAppBarWidget(
+                  icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.colorTextButton, fit: BoxFit.fill),
-                  context,
+                  onTap: () => controller.disableSearch(context)),
-                  _imagePaths,
+              Expanded(child: (SearchAppBarWidget(context, _imagePaths, _responsiveUtils, controller.searchQuery.value,
-                  _responsiveUtils,
+                      controller.searchFocus, controller.searchInputController, hasBackButton: false, hasSearchButton: true)
-                  controller.searchQuery.value,
+                  ..addPadding(EdgeInsets.zero)
-                  controller.searchFocus,
+                  ..setMargin(EdgeInsets.only(right: 16))
-                  controller.searchInputController,
+                  ..addDecoration(BoxDecoration(borderRadius: BorderRadius.circular(12), color: AppColor.colorBgSearchBar))
-                  hasBackButton: false,
+                  ..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 20, height: 20, fit: BoxFit.fill))
-                  hasSearchButton: true)
+                  ..setHintText(AppLocalizations.of(context).hint_search_mailboxes)
-                ..addPadding(EdgeInsets.zero)
+                  ..addOnClearTextSearchAction(() => controller.clearSearchText())
-                ..setMargin(EdgeInsets.only(right: 16))
+                  ..addOnTextChangeSearchAction((query) => controller.searchMailbox(query))
-                ..addDecoration(BoxDecoration(borderRadius: BorderRadius.circular(12), color: AppColor.colorBgSearchBar))
+                  ..addOnSearchTextAction((query) => controller.searchMailbox(query)))
-                ..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 20, height: 20, fit: BoxFit.fill))
+                .build())
-                ..setHintText(AppLocalizations.of(context).hint_search_mailboxes)
-                ..addOnClearTextSearchAction(() => controller.clearSearchText())
-                ..addOnTextChangeSearchAction((query) => controller.searchMailbox(query))
-                ..addOnSearchTextAction((query) => controller.searchMailbox(query)))
-                  .build())
             ]
         )
     );
   }
 
-  Widget _buildBackSearchButton(BuildContext context) {
-    return Padding(
-        padding: EdgeInsets.only(left: 5),
-        child: Material(
-            shape: CircleBorder(),
-            color: Colors.transparent,
-            child: IconButton(
-                splashRadius: 20,
-                color: AppColor.colorTextButton,
-                icon: SvgPicture.asset(_imagePaths.icBack, width: 20, height: 20, color: AppColor.colorTextButton, fit: BoxFit.fill),
-                onPressed: () => controller.disableSearch(context)
-            )
-        ));
-  }
-
   Widget _buildListMailboxSearched(BuildContext context, List<PresentationMailbox> listMailbox) {
     return Container(
-        margin: _responsiveUtils.isDesktop(context)
+        margin: EdgeInsets.zero,
-            ? EdgeInsets.only(left: 16, right: 16)
+        color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
-            : EdgeInsets.zero,
-        decoration: _responsiveUtils.isDesktop(context)
-            ? BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white)
-            : null,
         child: ListView.builder(
             padding: EdgeInsets.only(left: 16, right: 8),
             key: Key('list_mailbox_searched'),
             itemCount: listMailbox.length,
             shrinkWrap: true,
             primary: false,
-            itemBuilder: (context, index) => Obx(() => (MailboxSearchTileBuilder(
+            itemBuilder: (context, index) =>
+                Obx(() => (MailboxSearchTileBuilder(
                       _imagePaths,
                       listMailbox[index],
-                      allSelectMode: controller.currentSelectMode.value,
                       lastMailbox: controller.listMailboxSearched.last)
                   ..addOnOpenMailboxAction((mailbox) => controller.openMailbox(context, mailbox))
-                  ..addOnSelectMailboxActionClick((mailbox) => controller.selectMailbox(context, mailbox)))
+                  ..addOnSelectMailboxActionClick((mailbox) => controller.selectMailboxSearched(context, mailbox)))
                 .build()))
     );
   }
 
   Widget _buildOptionSelectionMailbox(BuildContext context) {
-    if (_responsiveUtils.isDesktop(context)) {
+    return Column(children: [
-      return Container(
+      Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2),
-        decoration: BoxDecoration(
+      Padding(
-            borderRadius: BorderRadius.circular(16),
+          padding: EdgeInsets.symmetric(vertical: 16),
-            boxShadow: [BoxShadow(color: AppColor.colorEmailAddressTag, spreadRadius: 1, blurRadius: 1, offset: Offset(0, 0.5))],
+          child: (BottomBarSelectionMailboxWidget(context, _imagePaths, controller.listMailboxSelected)
-            color: Colors.white),
-        margin: EdgeInsets.only(left: 10, bottom: 10, right: 10),
-        padding: EdgeInsets.all(8),
-        child: (BottomBarSelectionMailboxWidget(context, _imagePaths, controller.listMailboxSelected)
-          ..addOnMailboxActionsClick((actions, listMailboxSelected) => controller.pressMailboxSelectionAction(context, actions, listMailboxSelected)))
-            .build(),
-      );
-    } else {
-      return Column(children: [
-        Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2),
-        Padding(
-            padding: EdgeInsets.only(bottom: 30, top: 5),
-            child: (BottomBarSelectionMailboxWidget(context, _imagePaths, controller.listMailboxSelected)
               ..addOnMailboxActionsClick((actions, listMailboxSelected) => controller.pressMailboxSelectionAction(context, actions, listMailboxSelected)))
-                .build()
+            .build()
-        )
+      )
-      ]);
+    ]);
-    }
   }
 
   Widget _buildVersionInformation(BuildContext context, PackageInfo packageInfo) {
     return Container(
-      padding: EdgeInsets.symmetric(vertical: 16, horizontal: 16),
+      padding: EdgeInsets.only(top: 4),
-      margin: EdgeInsets.only(bottom: 30),
       child: Text(
-        '${AppLocalizations.of(context).version} ${packageInfo.version}',
+        'v.${packageInfo.version}',
         textAlign: TextAlign.center,
-        style: TextStyle(fontSize: 16, color: AppColor.colorContentEmail, fontWeight: FontWeight.w500),
+        style: TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.w500),
       ),
     );
   }

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

@@ -1,6 +1,8 @@
 import 'package:core/core.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
 import 'package:model/model.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/extensions/presentation_mailbox_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_displayed.dart';
@@ -13,17 +15,22 @@ typedef OnSelectMailboxFolderClick = void Function(MailboxNode);
 
 class MailBoxFolderTileBuilder {
 
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+
   final MailboxNode _mailboxNode;
   final BuildContext _context;
   final ImagePaths _imagePaths;
   final SelectMode allSelectMode;
   final MailboxDisplayed mailboxDisplayed;
   final MailboxNode? lastNode;
+  final PresentationMailbox? mailboxNodeSelected;
 
   OnExpandFolderActionClick? _onExpandFolderActionClick;
   OnOpenMailboxFolderClick? _onOpenMailboxFolderClick;
   OnSelectMailboxFolderClick? _onSelectMailboxFolderClick;
 
+  bool isHoverIcon = false;
+
   MailBoxFolderTileBuilder(
     this._context,
     this._imagePaths,
@@ -32,6 +39,7 @@ class MailBoxFolderTileBuilder {
       this.allSelectMode = SelectMode.INACTIVE,
       this.mailboxDisplayed = MailboxDisplayed.mailbox,
       this.lastNode,
+      this.mailboxNodeSelected,
     }
   );
 
@@ -55,20 +63,20 @@ class MailBoxFolderTileBuilder {
       child: Container(
         key: Key('mailbox_folder_tile'),
         decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(0),
+          borderRadius: BorderRadius.circular(kIsWeb ? 10 : 0),
-          color: Colors.white
+          color: backgroundColorItem
         ),
+        padding: kIsWeb ? EdgeInsets.only(left: 8, right: 4) : EdgeInsets.zero,
         child: MediaQuery(
           data: MediaQueryData(padding: EdgeInsets.zero),
           child: Column(children: [
             ListTile(
+              hoverColor: Colors.transparent,
               onTap: () => allSelectMode == SelectMode.ACTIVE
                   ? _onSelectMailboxFolderClick?.call(_mailboxNode)
                   : _onOpenMailboxFolderClick?.call(_mailboxNode),
               contentPadding: EdgeInsets.zero,
-              leading: allSelectMode == SelectMode.ACTIVE
+              leading: _buildLeadingIcon(),
-                  ? _buildSelectModeIcon()
-                  : _buildMailboxIcon(),
               title: _buildTitleFolderItem(),
               trailing: _mailboxNode.hasChildren()
                   ? Transform(
@@ -78,16 +86,16 @@ class MailBoxFolderTileBuilder {
                               _mailboxNode.expandMode == ExpandMode.EXPAND ? _imagePaths.icExpandFolder : _imagePaths.icCollapseFolder,
                               color: _mailboxNode.expandMode == ExpandMode.EXPAND ? AppColor.colorExpandMailbox : AppColor.colorCollapseMailbox,
                               fit: BoxFit.fill),
-                          splashRadius: 15,
+                          splashRadius: 10,
                           tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND ? AppLocalizations.of(_context).collapse : AppLocalizations.of(_context).expand,
                           onTap: () => _onExpandFolderActionClick?.call(_mailboxNode)))
                   : _mailboxNode.item.getCountUnReadEmails().isNotEmpty
                         && mailboxDisplayed == MailboxDisplayed.mailbox
                         && !_mailboxNode.hasChildren()
-                    ? Padding(padding: EdgeInsets.only(right: 12), child: _buildCounter())
+                    ? SizedBox(width: 40)
                     : SizedBox.shrink()
             ),
-            if (lastNode?.item.id != _mailboxNode.item.id)
+            if (lastNode?.item.id != _mailboxNode.item.id && !kIsWeb)
               Padding(
                   padding: EdgeInsets.only(left: allSelectMode == SelectMode.ACTIVE ? 50 : 35),
                   child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)),
@@ -97,6 +105,14 @@ class MailBoxFolderTileBuilder {
     );
   }
 
+  Widget _buildLeadingIcon() {
+    if (kIsWeb) {
+      return _mailboxNode.selectMode == SelectMode.ACTIVE ? _buildSelectModeIcon() : _buildMailboxIcon();
+    } else {
+      return allSelectMode == SelectMode.ACTIVE ? _buildSelectModeIcon() : _buildMailboxIcon();
+    }
+  }
+
   Widget _buildTitleFolderItem() {
     return Row(
       children: [
@@ -112,8 +128,8 @@ class MailBoxFolderTileBuilder {
             overflow: TextOverflow.ellipsis,
             style: TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.normal),
           ))),
-        if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty && mailboxDisplayed == MailboxDisplayed.mailbox && _mailboxNode.hasChildren())
+        if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty && mailboxDisplayed == MailboxDisplayed.mailbox)
-          Transform(transform: Matrix4.translationValues(30.0, 0.0, 0.0), child: _buildCounter())
+          Transform(transform: Matrix4.translationValues(25.0, 0.0, 0.0), child: _buildCounter())
       ],
     );
   }
@@ -128,22 +144,42 @@ class MailBoxFolderTileBuilder {
   }
 
   Widget _buildMailboxIcon() {
-    return SvgPicture.asset(
+    if (kIsWeb) {
-        '${_mailboxNode.item.getMailboxIcon(_imagePaths)}',
+      return StatefulBuilder(
-        width: 28,
+          builder: (BuildContext context, StateSetter setState) {
-        height: 28,
+            return InkWell(
-        fit: BoxFit.fill
+                onTap: () {},
-    );
+                onHover: (value) => setState(() => isHoverIcon = value),
+                child: isHoverIcon
+                  ? _buildSelectModeIcon()
+                  : SvgPicture.asset('${_mailboxNode.item.getMailboxIcon(_imagePaths)}', width: 28, height: 28, fit: BoxFit.fill)
+            );
+          });
+    } else {
+      return SvgPicture.asset('${_mailboxNode.item.getMailboxIcon(_imagePaths)}', width: 28, height: 28, fit: BoxFit.fill);
+    }
   }
 
   Widget _buildSelectModeIcon() {
     return Transform(
-        transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
+        transform: Matrix4.translationValues(kIsWeb ? -8.0 : -10.0, 0.0, 0.0),
         child: buildIconWeb(
             icon: SvgPicture.asset(
                 _mailboxNode.selectMode == SelectMode.ACTIVE ? _imagePaths.icSelected : _imagePaths.icUnSelected,
+                width: kIsWeb ? 20 : 24,
+                height: kIsWeb ? 20 : 24,
                 fit: BoxFit.fill),
-            splashRadius: 15,
             onTap: () => _onSelectMailboxFolderClick?.call(_mailboxNode)));
   }
+
+  Color get backgroundColorItem {
+    if (kIsWeb) {
+      if (mailboxNodeSelected?.id == _mailboxNode.item.id) {
+        return AppColor.colorBgMailboxSelected;
+      }
+      return _responsiveUtils.isDesktop(_context) ? AppColor.colorBgDesktop : Colors.white;
+    } else {
+      return Colors.white;
+    }
+  }
 }

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

@@ -1,4 +1,5 @@
 import 'package:core/core.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:model/model.dart';
@@ -14,6 +15,8 @@ class MailboxSearchTileBuilder {
   final SelectMode allSelectMode;
   final ImagePaths _imagePaths;
 
+  bool isHoverIcon = false;
+
   OnOpenMailboxActionClick? _onOpenMailboxActionClick;
   OnSelectMailboxActionClick? _onSelectMailboxActionClick;
 
@@ -42,10 +45,6 @@ class MailboxSearchTileBuilder {
       child: Container(
         key: Key('mailbox_list_tile'),
         alignment: Alignment.center,
-        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(0),
-          color: Colors.white
-        ),
         child: MediaQuery(
           data: MediaQueryData(padding: EdgeInsets.zero),
           child: Column(children: [
@@ -54,9 +53,7 @@ class MailboxSearchTileBuilder {
                 onTap: () => allSelectMode == SelectMode.ACTIVE
                     ? _onSelectMailboxActionClick?.call(_presentationMailbox)
                     : _onOpenMailboxActionClick?.call(_presentationMailbox),
-                leading: allSelectMode == SelectMode.ACTIVE
+                leading: _buildLeadingIcon(),
-                    ? _buildSelectModeIcon()
-                    : _buildMailboxIcon(),
                 title: Row(children: [
                       if (allSelectMode == SelectMode.ACTIVE)
                         Transform(
@@ -83,7 +80,7 @@ class MailboxSearchTileBuilder {
                       )
                     : null,
             ),
-            if (lastMailbox?.id != _presentationMailbox.id)
+            if (lastMailbox?.id != _presentationMailbox.id && !kIsWeb)
               Padding(
                 padding: EdgeInsets.only(left: allSelectMode == SelectMode.ACTIVE ? 50 : 35),
                 child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)),
@@ -93,23 +90,40 @@ class MailboxSearchTileBuilder {
     );
   }
 
+  Widget _buildLeadingIcon() {
+    if (kIsWeb) {
+      return _presentationMailbox.selectMode == SelectMode.ACTIVE ? _buildSelectModeIcon() : _buildMailboxIcon();
+    } else {
+      return allSelectMode == SelectMode.ACTIVE ? _buildSelectModeIcon() : _buildMailboxIcon();
+    }
+  }
+
   Widget _buildMailboxIcon() {
-    return SvgPicture.asset(
+    if (kIsWeb) {
-        '${_presentationMailbox.getMailboxIcon(_imagePaths)}',
+      return StatefulBuilder(
-        width: 28,
+          builder: (BuildContext context, StateSetter setState) {
-        height: 28,
+            return InkWell(
-        fit: BoxFit.fill
+                onTap: () {},
-    );
+                onHover: (value) => setState(() => isHoverIcon = value),
+                child: isHoverIcon
+                    ? _buildSelectModeIcon()
+                    : SvgPicture.asset('${_presentationMailbox.getMailboxIcon(_imagePaths)}', width: 28, height: 28, fit: BoxFit.fill)
+            );
+          });
+    } else {
+      return SvgPicture.asset('${_presentationMailbox.getMailboxIcon(_imagePaths)}', width: 28, height: 28, fit: BoxFit.fill);
+    }
   }
 
   Widget _buildSelectModeIcon() {
     return Transform(
-        transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
+        transform: Matrix4.translationValues(kIsWeb ? -8.0 : -10.0, 0.0, 0.0),
         child: buildIconWeb(
             icon: SvgPicture.asset(
                 _presentationMailbox.selectMode == SelectMode.ACTIVE ? _imagePaths.icSelected : _imagePaths.icUnSelected,
+                width: kIsWeb ? 20 : 24,
+                height: kIsWeb ? 20 : 24,
                 fit: BoxFit.fill),
-            splashRadius: 15,
             onTap: () => _onSelectMailboxActionClick?.call(_presentationMailbox)));
   }
 }

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

@@ -1,5 +1,6 @@
 
 import 'package:core/core.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get_utils/src/platform/platform.dart';
@@ -72,11 +73,12 @@ class UserInformationWidgetBuilder {
               )
             )
         ])),
-        Transform(
+        if (!kIsWeb)
-          transform: Matrix4.translationValues(14.0, 0.0, 0.0),
+          Transform(
-          child: IconButton(
+            transform: Matrix4.translationValues(14.0, 0.0, 0.0),
-            icon: SvgPicture.asset(_imagePaths.icCollapseFolder, fit: BoxFit.fill, color: AppColor.colorCollapseMailbox),
+            child: IconButton(
-            onPressed: () => {}))
+              icon: SvgPicture.asset(_imagePaths.icCollapseFolder, fit: BoxFit.fill, color: AppColor.colorCollapseMailbox),
+              onPressed: () => {}))
       ]),
     );
   }

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart

@@ -22,18 +22,19 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
       key: controller.scaffoldKey,
       drawer: ResponsiveWidget(
           responsiveUtils: _responsiveUtils,
-          mobile: Container(child: MailboxView(),
+          mobile: _responsiveUtils.isPortrait(context)
-              width: _responsiveUtils.isPortrait(context) ? _responsiveUtils.getSizeScreenWidth(context) : _responsiveUtils.getSizeScreenWidth(context) / 2),
+              ? SizedBox(child: MailboxView(), width: double.infinity)
-          tablet: Container(child: MailboxView(), width: _responsiveUtils.getSizeScreenWidth(context) / 2),
+              : SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb),
+          tablet: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb),
           tabletLarge: SizedBox.shrink(),
           desktop: SizedBox.shrink()
       ),
-      drawerEnableOpenDragGesture: !_responsiveUtils.isDesktop(context),
+      drawerEnableOpenDragGesture: _responsiveUtils.isMobile(context) || _responsiveUtils.isTablet(context),
       body: Stack(children: [
         ResponsiveWidget(
             responsiveUtils: _responsiveUtils,
-            desktop: _buildDesktopView(context),
+            desktop: _buildLargeScreenView(context),
-            tabletLarge: _buildTabletLargeView(context),
+            tabletLarge: _buildLargeScreenView(context),
             tablet: ThreadView(),
             mobile: ThreadView()
         ),
@@ -83,8 +84,8 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
     }
   }
 
-  Widget _buildDesktopView(BuildContext context) {
+  Widget _buildLargeScreenView(BuildContext context) {
-    if (controller.isDrawerOpen && _responsiveUtils.isDesktop(context)) {
+    if (controller.isDrawerOpen && (_responsiveUtils.isDesktop(context) || _responsiveUtils.isTabletLarge(context))) {
       WidgetsBinding.instance?.addPostFrameCallback((_) {
         controller.closeDrawer();
       });
@@ -94,26 +95,8 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          Expanded(flex: 1, child: MailboxView()),
+          SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb),
-          Expanded(flex: 3, child: _buildThreadAndEmailContainer(context)),
+          Expanded(child: _buildThreadAndEmailContainer(context))
-        ],
-      ),
-    );
-  }
-
-  Widget _buildTabletLargeView(BuildContext context) {
-    if (controller.isDrawerOpen && _responsiveUtils.isTabletLarge(context)) {
-      WidgetsBinding.instance?.addPostFrameCallback((_) {
-        controller.closeDrawer();
-      });
-    }
-
-    return Container(
-      child: Row(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Expanded(flex: 2, child: MailboxView()),
-          Expanded(flex: 4, child: _buildThreadAndEmailContainer(context)),
         ],
       ),
     );

lib/features/thread/presentation/widgets/search_app_bar_widget.dart

@@ -130,19 +130,12 @@ class SearchAppBarWidget {
  }
 
  Widget _buildClearTextSearchButton() {
-   return Material(
+    return buildIconWeb(
-       shape: CircleBorder(),
+        icon: _iconClearText ?? SvgPicture.asset(_imagePaths.icComposerClose, width: 12, height: 12, fit: BoxFit.fill),
-     color: Colors.transparent,
+        onTap: () {
-     child: IconButton(
+          _searchInputController?.clear();
-         splashRadius: 20,
+          _onClearTextSearchAction?.call();
-         padding: EdgeInsets.zero,
+        });
-         icon: _iconClearText ?? SvgPicture.asset(_imagePaths.icComposerClose, fit: BoxFit.fill),
-         onPressed: () {
-           _searchInputController?.clear();
-           _onClearTextSearchAction?.call();
-         }
-      )
-   );
  }
 
   Widget _buildSearchInputForm() {
@@ -168,14 +161,8 @@ class SearchAppBarWidget {
   }
 
  Widget _buildSearchButton() {
-   return Material(
+    return buildIconWeb(
-       shape: CircleBorder(),
+        icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 16, height: 16, fit: BoxFit.fill),
-       color: Colors.transparent,
+        onTap: () => _onSearchTextAction?.call(_searchInputController?.text ?? ''));
-       child: IconButton(
-           splashRadius: 20,
-           icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 18, height: 18, fit: BoxFit.fill),
-           onPressed: () => _onSearchTextAction?.call(_searchInputController?.text ?? '')
-       )
-   );
  }
 }