TF-467 Apply new UI for mailbox browser

2022-04-08 20:09:35 +07:00
parent 706ce81c03
commit 09be1eb833
15 changed files with 382 additions and 453 deletions
@@ -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();
@@ -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) {
-    if (isSearchActive()) {
-      listMailboxSearched.value = listMailboxSearched
-          .map((mailbox) => mailbox.id == mailboxSelected.id
-              ? mailbox.toggleSelectPresentationMailbox()
-              : mailbox)
-          .toList();
+  void selectMailboxSearched(BuildContext context, PresentationMailbox mailboxSelected) {
+    listMailboxSearched.value = listMailboxSearched
+        .map((mailbox) => mailbox.id == mailboxSelected.id ? mailbox.toggleSelectPresentationMailbox() : mailbox)
+        .toList();
+
+    if (kIsWeb) {
+      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 {
@@ -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())
        )
    ));
@@ -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);
-  }
-
-  Widget _buildBodyMailbox(BuildContext context) {
-    return SafeArea(
-        top: _responsiveUtils.isMobile(context) ? true : false,
-        bottom: false,
-        left: false,
-        right: false,
-        child: ClipRRect(
-            borderRadius: BorderRadius.only(
-                topRight: Radius.circular(_responsiveUtils.isMobile(context) ? 14 : 0),
-                topLeft: Radius.circular(_responsiveUtils.isMobile(context) ? 14 : 0)),
-            child: Drawer(
-                child: Scaffold(
-                  backgroundColor: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
-                  body: Column(
-                      children: [
-                        if (_responsiveUtils.isDesktop(context))
-                          Container(
-                              color: Colors.white,
-                              padding: EdgeInsets.only(left: 20, top: 20, bottom: 24),
-                              child: (SloganBuilder(arrangedByHorizontal: true)
-                                ..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),
+    return Drawer(
+        child: Scaffold(
+          backgroundColor: Colors.white,
+          body: Column(
+              children: [
+                _buildLogoApp(context),
+                if (!_responsiveUtils.isDesktop(context)) Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
+                Expanded(child: Container(
+                  padding: EdgeInsets.zero,
+                  color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
+                  child: Column(children: [
+                    if (_responsiveUtils.isDesktop(context)) _buildComposerButton(context),
+                    SizedBox(height: 16),
+                    Obx(() => controller.isSearchActive() ? _buildInputSearchFormWidget(context) : SizedBox.shrink()),
+                    Expanded(child: Obx(() => Container(
+                      color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
+                      padding: EdgeInsets.zero,
+                      child: RefreshIndicator(
+                          color: AppColor.primaryColor,
+                          onRefresh: () async => controller.refreshAllMailbox(),
+                          child: controller.isSearchActive()
+                              ? _buildListMailboxSearched(context, controller.listMailboxSearched)
+                              : _buildListMailbox(context)),
+                    ))),
+                  ]),
+                )),
                Obx(() {
                  if (controller.isSearchActive()) {
-                    return controller.listMailboxSearched.isNotEmpty
-                        ? SizedBox(width: controller.isSelectionEnabled() ? 49 : 40)
+                    return controller.listPresentationMailboxSelected.isNotEmpty
+                        ? _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) {
-    return Padding(
-        padding: EdgeInsets.only(left: 16, top: 8.0, right: 16),
-        child: Obx(() => (UserInformationWidgetBuilder(
-            _imagePaths,
-            context,
-            controller.mailboxDashBoardController.userProfile.value)
-          ..addOnLogoutAction(() => controller.mailboxDashBoardController.logoutAction()))
-            .build()));
+  Widget _buildLogoApp(BuildContext context) {
+    return Container(
+        color: Colors.white,
+        padding: EdgeInsets.only(
+            top: _responsiveUtils.isDesktop(context) ? 25 : 16,
+            bottom: _responsiveUtils.isDesktop(context) ? 25 : 16,
+            left: _responsiveUtils.isDesktop(context) ? 32 : 16),
+        child: Row(children: [
+              (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)
-          ..addOnOpenSearchViewAction(() => controller.enableSearch()))
-            .build());
+            ..hintTextSearch(AppLocalizations.of(context).hint_search_mailboxes)
+            ..addOnOpenSearchViewAction(() => controller.enableSearch()))
+          .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) {
-              return _buildVersionInformation(context, controller.mailboxDashBoardController.appInformation.value!);
-            } else {
+            if ((controller.isSelectionEnabled()
+                && _responsiveUtils.isMobile(context)
+                && _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),
-        child: Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2));
+        padding: EdgeInsets.only(left: _responsiveUtils.isDesktop(context) ? 12 : 16, right: _responsiveUtils.isDesktop(context) ? 4 : 12),
+        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) {
-    return Obx(() => controller.defaultMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
-        ? Transform(
-        transform: Matrix4.translationValues(-4.0, 0.0, 0.0),
-        child: Padding(
-            padding: EdgeInsets.only(top: 10, bottom: 10),
-            child: TreeView(
-                startExpanded: false,
-                key: Key('default_mailbox_list'),
-                children: _buildListChildTileWidget(context, controller.defaultMailboxTree.value.root)))
-    )
-        : SizedBox.shrink()
-    );
+  Widget _buildBodyMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) {
+    final lastNode = mailboxNode.childrenItems?.last;
+
+    return Container(
+        margin: EdgeInsets.zero,
+        padding: EdgeInsets.only(right: _responsiveUtils.isDesktop(context) ? 8 : 16, left: _responsiveUtils.isDesktop(context) ? 0 : 12),
+        child: TreeView(
+            key: Key('${categories.keyValue}_mailbox_list'),
+            children: _buildListChildTileWidget(context, mailboxNode, lastNode: lastNode)));
  }

-  Widget _buildFolderMailbox(BuildContext context) {
-    return Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
-        ? Transform(
-        transform: Matrix4.translationValues(-4.0, 0.0, 0.0),
-        child: Padding(
-            padding: EdgeInsets.only(top: 10, bottom: 10),
-            child: TreeView(
-                startExpanded: false,
-                key: Key('folder_mailbox_list'),
-                children: _buildListChildTileWidget(context, controller.folderMailboxTree.value.root)))
-    )
-        : SizedBox.shrink()
-    );
+  Widget _buildMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) {
+    return Column(children: [
+      _buildHeaderMailboxCategory(context, categories),
+      AnimatedContainer(
+          duration: Duration(milliseconds: 400),
+          child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
+              ? _buildBodyMailboxCategory(context, categories, mailboxNode)
+              : Offstage())
+    ]);
  }

-  List<Widget> _buildListChildTileWidget(BuildContext context, MailboxNode parentNode) {
+  List<Widget> _buildListChildTileWidget(BuildContext context, MailboxNode parentNode, {MailboxNode? lastNode}) {
    return parentNode.childrenItems
        ?.map((mailboxNode) => mailboxNode.hasChildren()
-        ? Padding(
-        padding: EdgeInsets.only(left: 16),
-        child: TreeViewChild(
-            context,
-            key: Key('children_tree_mailbox_child'),
-            isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
-            parent: Obx(() => (MailBoxFolderTileBuilder(
+          ? TreeViewChild(
                context,
-                _imagePaths,
-                mailboxNode,
-                allSelectMode: controller.currentSelectMode.value)
+                key: Key('children_tree_mailbox_child'),
+                isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
+                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()),
-            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(),
-        )
-    )
+            .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),
-              Expanded(child: (SearchAppBarWidget(
-                  context,
-                  _imagePaths,
-                  _responsiveUtils,
-                  controller.searchQuery.value,
-                  controller.searchFocus,
-                  controller.searchInputController,
-                  hasBackButton: false,
-                  hasSearchButton: true)
-                ..addPadding(EdgeInsets.zero)
-                ..setMargin(EdgeInsets.only(right: 16))
-                ..addDecoration(BoxDecoration(borderRadius: BorderRadius.circular(12), color: AppColor.colorBgSearchBar))
-                ..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 20, height: 20, fit: BoxFit.fill))
-                ..setHintText(AppLocalizations.of(context).hint_search_mailboxes)
-                ..addOnClearTextSearchAction(() => controller.clearSearchText())
-                ..addOnTextChangeSearchAction((query) => controller.searchMailbox(query))
-                ..addOnSearchTextAction((query) => controller.searchMailbox(query)))
-                  .build())
+              buildIconWeb(
+                  icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.colorTextButton, fit: BoxFit.fill),
+                  onTap: () => controller.disableSearch(context)),
+              Expanded(child: (SearchAppBarWidget(context, _imagePaths, _responsiveUtils, controller.searchQuery.value,
+                      controller.searchFocus, controller.searchInputController, hasBackButton: false, hasSearchButton: true)
+                  ..addPadding(EdgeInsets.zero)
+                  ..setMargin(EdgeInsets.only(right: 16))
+                  ..addDecoration(BoxDecoration(borderRadius: BorderRadius.circular(12), color: AppColor.colorBgSearchBar))
+                  ..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 20, height: 20, fit: BoxFit.fill))
+                  ..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)
-            ? EdgeInsets.only(left: 16, right: 16)
-            : EdgeInsets.zero,
-        decoration: _responsiveUtils.isDesktop(context)
-            ? BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white)
-            : null,
+        margin: EdgeInsets.zero,
+        color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
        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 Container(
-        decoration: BoxDecoration(
-            borderRadius: BorderRadius.circular(16),
-            boxShadow: [BoxShadow(color: AppColor.colorEmailAddressTag, spreadRadius: 1, blurRadius: 1, offset: Offset(0, 0.5))],
-            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)
+    return Column(children: [
+      Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2),
+      Padding(
+          padding: EdgeInsets.symmetric(vertical: 16),
+          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),
-      margin: EdgeInsets.only(bottom: 30),
+      padding: EdgeInsets.only(top: 4),
      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),
      ),
    );
  }
@@ -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),
-          color: Colors.white
+          borderRadius: BorderRadius.circular(kIsWeb ? 10 : 0),
+          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
-                  ? _buildSelectModeIcon()
-                  : _buildMailboxIcon(),
+              leading: _buildLeadingIcon(),
              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())
-          Transform(transform: Matrix4.translationValues(30.0, 0.0, 0.0), child: _buildCounter())
+        if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty && mailboxDisplayed == MailboxDisplayed.mailbox)
+          Transform(transform: Matrix4.translationValues(25.0, 0.0, 0.0), child: _buildCounter())
      ],
    );
  }
@@ -128,22 +144,42 @@ class MailBoxFolderTileBuilder {
  }

  Widget _buildMailboxIcon() {
-    return SvgPicture.asset(
-        '${_mailboxNode.item.getMailboxIcon(_imagePaths)}',
-        width: 28,
-        height: 28,
-        fit: BoxFit.fill
-    );
+    if (kIsWeb) {
+      return StatefulBuilder(
+          builder: (BuildContext context, StateSetter setState) {
+            return InkWell(
+                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;
+    }
+  }
 }
@@ -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
-                    ? _buildSelectModeIcon()
-                    : _buildMailboxIcon(),
+                leading: _buildLeadingIcon(),
                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(
-        '${_presentationMailbox.getMailboxIcon(_imagePaths)}',
-        width: 28,
-        height: 28,
-        fit: BoxFit.fill
-    );
+    if (kIsWeb) {
+      return StatefulBuilder(
+          builder: (BuildContext context, StateSetter setState) {
+            return InkWell(
+                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)));
  }
 }
@@ -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(
-          transform: Matrix4.translationValues(14.0, 0.0, 0.0),
-          child: IconButton(
-            icon: SvgPicture.asset(_imagePaths.icCollapseFolder, fit: BoxFit.fill, color: AppColor.colorCollapseMailbox),
-            onPressed: () => {}))
+        if (!kIsWeb)
+          Transform(
+            transform: Matrix4.translationValues(14.0, 0.0, 0.0),
+            child: IconButton(
+              icon: SvgPicture.asset(_imagePaths.icCollapseFolder, fit: BoxFit.fill, color: AppColor.colorCollapseMailbox),
+              onPressed: () => {}))
      ]),
    );
  }
@@ -22,18 +22,19 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
      key: controller.scaffoldKey,
      drawer: ResponsiveWidget(
          responsiveUtils: _responsiveUtils,
-          mobile: Container(child: MailboxView(),
-              width: _responsiveUtils.isPortrait(context) ? _responsiveUtils.getSizeScreenWidth(context) : _responsiveUtils.getSizeScreenWidth(context) / 2),
-          tablet: Container(child: MailboxView(), width: _responsiveUtils.getSizeScreenWidth(context) / 2),
+          mobile: _responsiveUtils.isPortrait(context)
+              ? SizedBox(child: MailboxView(), width: double.infinity)
+              : 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),
-            tabletLarge: _buildTabletLargeView(context),
+            desktop: _buildLargeScreenView(context),
+            tabletLarge: _buildLargeScreenView(context),
            tablet: ThreadView(),
            mobile: ThreadView()
        ),
@@ -83,8 +84,8 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
    }
  }

-  Widget _buildDesktopView(BuildContext context) {
-    if (controller.isDrawerOpen && _responsiveUtils.isDesktop(context)) {
+  Widget _buildLargeScreenView(BuildContext 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()),
-          Expanded(flex: 3, 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)),
+          SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb),
+          Expanded(child: _buildThreadAndEmailContainer(context))
        ],
      ),
    );
@@ -130,19 +130,12 @@ class SearchAppBarWidget {
 }

 Widget _buildClearTextSearchButton() {
-   return Material(
-       shape: CircleBorder(),
-     color: Colors.transparent,
-     child: IconButton(
-         splashRadius: 20,
-         padding: EdgeInsets.zero,
-         icon: _iconClearText ?? SvgPicture.asset(_imagePaths.icComposerClose, fit: BoxFit.fill),
-         onPressed: () {
-           _searchInputController?.clear();
-           _onClearTextSearchAction?.call();
-         }
-      )
-   );
+    return buildIconWeb(
+        icon: _iconClearText ?? SvgPicture.asset(_imagePaths.icComposerClose, width: 12, height: 12, fit: BoxFit.fill),
+        onTap: () {
+          _searchInputController?.clear();
+          _onClearTextSearchAction?.call();
+        });
 }

  Widget _buildSearchInputForm() {
@@ -168,14 +161,8 @@ class SearchAppBarWidget {
  }

 Widget _buildSearchButton() {
-   return Material(
-       shape: CircleBorder(),
-       color: Colors.transparent,
-       child: IconButton(
-           splashRadius: 20,
-           icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 18, height: 18, fit: BoxFit.fill),
-           onPressed: () => _onSearchTextAction?.call(_searchInputController?.text ?? '')
-       )
-   );
+    return buildIconWeb(
+        icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 16, height: 16, fit: BoxFit.fill),
+        onTap: () => _onSearchTextAction?.call(_searchInputController?.text ?? ''));
 }
 }