Split styles file for some widget in email view

(cherry picked from commit 75b11811e8036298fe11ab7e6613498b8aa349ea)
2023-10-09 10:25:20 +07:00
parent 89a7b12da4
commit 54683e5e59
11 changed files with 721 additions and 581 deletions
@@ -1009,7 +1009,7 @@ class SingleEmailController extends BaseController with AppLoaderMixin {
    mailboxDashBoardController.goToComposer(ComposerArguments.fromEmailAddress(emailAddress));
  }

-  void openMailToLink(Uri? uri) {
+  Future<void> openMailToLink(Uri? uri) async {
    log('SingleEmailController::openMailToLink(): ${uri.toString()}');
    String address = uri?.path ?? '';
    log('SingleEmailController::openMailToLink(): address: $address');
@@ -1,8 +1,7 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
-import 'package:core/presentation/utils/icon_utils.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
-import 'package:core/presentation/views/button/icon_button_web.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:core/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart';
 import 'package:core/presentation/views/html_viewer/html_content_viewer_widget.dart';
 import 'package:core/presentation/views/html_viewer/html_viewer_controller_for_web.dart';
@@ -25,8 +24,8 @@ import 'package:tmail_ui_user/features/base/widget/popup_item_widget.dart';
 import 'package:tmail_ui_user/features/email/presentation/controller/single_email_controller.dart';
 import 'package:tmail_ui_user/features/email/presentation/extensions/calendar_event_extension.dart';
 import 'package:tmail_ui_user/features/email/presentation/styles/email_view_styles.dart';
-import 'package:tmail_ui_user/features/email/presentation/widgets/app_bar_mail_widget_builder.dart';
-import 'package:tmail_ui_user/features/email/presentation/widgets/bottom_bar_mail_widget_builder.dart';
+import 'package:tmail_ui_user/features/email/presentation/widgets/email_view_app_bar_widget.dart';
+import 'package:tmail_ui_user/features/email/presentation/widgets/email_view_bottom_bar_widget.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/calendar_event/calendar_event_action_banner_widget.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/calendar_event/calendar_event_detail_widget.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/calendar_event/calendar_event_information_widget.dart';
@@ -74,21 +73,155 @@ class EmailView extends GetWidget<SingleEmailController> {
                      : const BoxDecoration(color: Colors.white),
                  margin: _getMarginEmailView(context),
                  child: Obx(() {
-                    if (controller.currentEmail != null) {
+                    final currentEmail = controller.currentEmail;
+                    if (currentEmail != null) {
                      return Column(children: [
-                        _buildAppBar(context, controller.currentEmail!),
-                        _buildVacationNotificationMessage(context),
-                        const Divider(color: AppColor.colorDividerHorizontal, height: 1),
+                        Obx(() => EmailViewAppBarWidget(
+                          key: const Key('email_view_app_bar_widget'),
+                          presentationEmail: currentEmail,
+                          mailboxContain: _getMailboxContain(currentEmail),
+                          isSearchActivated: controller.mailboxDashBoardController.searchController.isSearchEmailRunning,
+                          onBackAction: () => controller.closeEmailView(context),
+                          onEmailActionClick: (email, action) => controller.handleEmailAction(context, email, action),
+                          onMoreActionClick: (email, position) {
+                            if (position == null) {
+                              controller.openContextMenuAction(
+                                context,
+                                _emailActionMoreActionTile(context, email)
+                              );
+                            } else {
+                              controller.openPopupMenuAction(
+                                context,
+                                position,
+                                _popupMenuEmailActionTile(context, email)
+                              );
+                            }
+                          },
+                          optionsWidget: PlatformInfo.isWeb && controller.emailSupervisorController.supportedPageView.isTrue
+                            ? _buildNavigatorPageViewWidgets(context)
+                            : null,
+                        )),
+                        Obx(() {
+                          final vacation = controller.mailboxDashBoardController.vacationResponse.value;
+                          if (vacation?.vacationResponderIsValid == true &&
+                              (
+                                responsiveUtils.isMobile(context) ||
+                                responsiveUtils.isTablet(context) ||
+                                responsiveUtils.isLandscapeMobile(context)
+                              )
+                          ) {
+                            return VacationNotificationMessageWidget(
+                              margin: const EdgeInsets.only(left: 12, right: 12, bottom: 5),
+                              vacationResponse: vacation!,
+                              actionGotoVacationSetting: controller.mailboxDashBoardController.goToVacationSetting,
+                              actionEndNow: controller.mailboxDashBoardController.disableVacationResponder
+                            );
+                          } else {
+                            return const SizedBox.shrink();
+                          }
+                        }),
                        Expanded(
                          child: Obx(() {
-                            return controller.emailSupervisorController.supportedPageView.isTrue
-                              ? _buildMultipleEmailView(controller.emailSupervisorController.currentListEmail)
-                              : _buildSingleEmailView(context, controller.currentEmail!);
+                            if (controller.emailSupervisorController.supportedPageView.isTrue) {
+                              final currentListEmail = controller.emailSupervisorController.currentListEmail;
+                              return PageView.builder(
+                                physics: controller.emailSupervisorController.scrollPhysicsPageView.value,
+                                itemCount: currentListEmail.length,
+                                allowImplicitScrolling: true,
+                                controller: controller.emailSupervisorController.pageController,
+                                onPageChanged: controller.emailSupervisorController.onPageChanged,
+                                itemBuilder: (context, index) {
+                                  final currentEmail = currentListEmail[index];
+                                  if (PlatformInfo.isMobile) {
+                                    return SingleChildScrollView(
+                                      physics : const ClampingScrollPhysics(),
+                                      child: Container(
+                                        width: double.infinity,
+                                        alignment: Alignment.center,
+                                        color: Colors.white,
+                                        child: Obx(() => _buildEmailMessage(
+                                          context: context,
+                                          presentationEmail: currentEmail,
+                                          calendarEvent: controller.calendarEvent.value
+                                        ))
+                                      )
+                                    );
+                                  } else {
+                                    return Obx(() {
+                                      final calendarEvent = controller.calendarEvent.value;
+                                      if (currentEmail.hasCalendarEvent && calendarEvent != null) {
+                                        return SingleChildScrollView(
+                                          physics : const ClampingScrollPhysics(),
+                                          child: Container(
+                                            width: double.infinity,
+                                            alignment: Alignment.center,
+                                            color: Colors.white,
+                                            child: _buildEmailMessage(
+                                              context: context,
+                                              presentationEmail: currentEmail,
+                                              calendarEvent: calendarEvent,
+                                              emailAddressSender: currentEmail.listEmailAddressSender.getListAddress(),
+                                            )
+                                          )
+                                        );
+                                      } else {
+                                        return _buildEmailMessage(
+                                          context: context,
+                                          presentationEmail: currentEmail,
+                                        );
+                                      }
+                                    });
+                                  }
+                                }
+                              );
+                            } else {
+                              if (PlatformInfo.isMobile) {
+                                return SingleChildScrollView(
+                                  physics : const ClampingScrollPhysics(),
+                                  child: Container(
+                                    width: double.infinity,
+                                    alignment: Alignment.center,
+                                    color: Colors.white,
+                                    child: Obx(() => _buildEmailMessage(
+                                      context: context,
+                                      presentationEmail: currentEmail,
+                                      calendarEvent: controller.calendarEvent.value
+                                    ))
+                                  )
+                                );
+                              } else {
+                                return Obx(() {
+                                  final calendarEvent = controller.calendarEvent.value;
+                                  if (currentEmail.hasCalendarEvent && calendarEvent != null) {
+                                    return SingleChildScrollView(
+                                      physics : const ClampingScrollPhysics(),
+                                      child: Container(
+                                        width: double.infinity,
+                                        alignment: Alignment.center,
+                                        color: Colors.white,
+                                        child: _buildEmailMessage(
+                                          context: context,
+                                          presentationEmail: currentEmail,
+                                          calendarEvent: calendarEvent,
+                                          emailAddressSender: currentEmail.listEmailAddressSender.getListAddress(),
+                                        )
+                                      )
+                                    );
+                                  } else {
+                                    return _buildEmailMessage(
+                                      context: context,
+                                      presentationEmail: currentEmail,
+                                    );
+                                  }
+                                });
+                              }
+                            }
                          }),
                        ),
-                        BottomBarMailWidgetBuilder(
-                          controller.currentEmail!,
-                          onPressEmailActionClick: controller.pressEmailAction
+                        EmailViewBottomBarWidget(
+                          key: const Key('email_view_button_bar'),
+                          presentationEmail: currentEmail,
+                          emailActionCallback: controller.pressEmailAction
                        ),
                      ]);
                    } else {
@@ -119,19 +252,6 @@ class EmailView extends GetWidget<SingleEmailController> {
    }
  }

-  Widget _buildMultipleEmailView(List<PresentationEmail> listEmails) {
-    return Obx(
-      () => PageView.builder(
-        physics: controller.emailSupervisorController.scrollPhysicsPageView.value,
-        itemCount: listEmails.length,
-        allowImplicitScrolling: true,
-        controller: controller.emailSupervisorController.pageController,
-        onPageChanged: controller.emailSupervisorController.onPageChanged,
-        itemBuilder: (context, index) => _buildSingleEmailView(context, listEmails[index])
-      ),
-    );
-  }
-
  bool _supportVerticalDivider(BuildContext context) {
    if (PlatformInfo.isWeb) {
      return responsiveUtils.isTabletLarge(context);
@@ -142,259 +262,167 @@ class EmailView extends GetWidget<SingleEmailController> {
    }
  }

-  Widget _buildVacationNotificationMessage(BuildContext context) {
-    return Obx(() {
-      final vacation = controller.mailboxDashBoardController.vacationResponse.value;
-      if (vacation?.vacationResponderIsValid == true &&
-          (responsiveUtils.isMobile(context) ||
-              responsiveUtils.isTablet(context) ||
-              responsiveUtils.isLandscapeMobile(context))) {
-        return VacationNotificationMessageWidget(
-          margin: const EdgeInsets.only(left: 12, right: 12, bottom: 5),
-          vacationResponse: vacation!,
-          actionGotoVacationSetting: controller.mailboxDashBoardController.goToVacationSetting,
-          actionEndNow: controller.mailboxDashBoardController.disableVacationResponder);
-      } else {
-        return const SizedBox.shrink();
-      }
-    });
-  }
-
-  Widget _buildAppBar(BuildContext context, PresentationEmail presentationEmail) {
-    return Obx(() => AppBarMailWidgetBuilder(
-      presentationEmail,
-      mailboxContain: _getMailboxContain(presentationEmail),
-      isSearchIsRunning: controller.mailboxDashBoardController.searchController.isSearchEmailRunning,
-      onBackActionClick: () => controller.closeEmailView(context),
-      onEmailActionClick: (email, action) =>
-          controller.handleEmailAction(context, email, action),
-      onMoreActionClick: (email, position) {
-        if (position == null) {
-          controller.openContextMenuAction(
-              context,
-              _emailActionMoreActionTile(context, email));
-        } else {
-          controller.openPopupMenuAction(
-              context,
-              position,
-              _popupMenuEmailActionTile(context, email));
-        }
-      },
-      optionsWidget: PlatformInfo.isWeb && controller.emailSupervisorController.supportedPageView.isTrue
-        ? _buildNavigatorPageViewWidgets(context)
-        : null,
-    ));
-  }
-
  PresentationMailbox? _getMailboxContain(PresentationEmail currentEmail) {
    return currentEmail.findMailboxContain(controller.mailboxDashBoardController.mapMailboxById);
  }
  
  List<Widget> _buildNavigatorPageViewWidgets(BuildContext context) {
    return [
-      buildIconWeb(
-        icon: SvgPicture.asset(
-          DirectionUtils.isDirectionRTLByLanguage(context) ? imagePaths.icOlder : imagePaths.icNewer,
-          colorFilter: controller.emailSupervisorController.nextEmailActivated
-            ? AppColor.primaryColor.asFilter()
-            : AppColor.colorAttachmentIcon.asFilter(),
-          width: IconUtils.defaultIconSize,
-          height: IconUtils.defaultIconSize,
-          fit: BoxFit.fill),
-        tooltip: AppLocalizations.of(context).newer,
-        onTap: controller.emailSupervisorController.moveToNextEmail),
-      buildIconWeb(
-        icon: SvgPicture.asset(
-          DirectionUtils.isDirectionRTLByLanguage(context) ? imagePaths.icNewer : imagePaths.icOlder,
-          width: IconUtils.defaultIconSize,
-          height: IconUtils.defaultIconSize,
-          colorFilter: controller.emailSupervisorController.previousEmailActivated
-            ? AppColor.primaryColor.asFilter()
-            : AppColor.colorAttachmentIcon.asFilter(),
-          fit: BoxFit.fill),
-        tooltip: AppLocalizations.of(context).older,
-        onTap: controller.emailSupervisorController.backToPreviousEmail),
+      TMailButtonWidget.fromIcon(
+        icon: DirectionUtils.isDirectionRTLByLanguage(context)
+          ? imagePaths.icOlder
+          : imagePaths.icNewer,
+        iconColor: controller.emailSupervisorController.nextEmailActivated
+          ? AppColor.primaryColor
+          : AppColor.colorAttachmentIcon,
+        iconSize: EmailViewStyles.pageViewIconSize,
+        backgroundColor: Colors.transparent,
+        padding: EmailViewStyles.pageViewButtonPadding,
+        tooltipMessage: AppLocalizations.of(context).newer,
+        onTapActionCallback: controller.emailSupervisorController.moveToNextEmail
+      ),
+      TMailButtonWidget.fromIcon(
+        icon: DirectionUtils.isDirectionRTLByLanguage(context)
+          ? imagePaths.icNewer
+          : imagePaths.icOlder,
+        iconColor: controller.emailSupervisorController.previousEmailActivated
+          ? AppColor.primaryColor
+          : AppColor.colorAttachmentIcon,
+        iconSize: EmailViewStyles.pageViewIconSize,
+        padding: EmailViewStyles.pageViewButtonPadding,
+        backgroundColor: Colors.transparent,
+        tooltipMessage: AppLocalizations.of(context).older,
+        onTapActionCallback: controller.emailSupervisorController.backToPreviousEmail
+      ),
    ];
  }

-  Widget _buildSingleEmailView(BuildContext context, PresentationEmail presentationEmail) {
-    if (PlatformInfo.isMobile) {
-      return SingleChildScrollView(
-        physics : const ClampingScrollPhysics(),
-        child: Container(
-          width: double.infinity,
-          alignment: Alignment.center,
-          color: Colors.white,
-          child: Obx(() => _buildEmailMessage(
-            context: context,
-            presentationEmail: presentationEmail,
-            calendarEvent: controller.calendarEvent.value
-          ))
-        )
-      );
-    } else {
-      return Obx(() {
-        final calendarEvent = controller.calendarEvent.value;
-        if (presentationEmail.hasCalendarEvent && calendarEvent != null) {
-          return SingleChildScrollView(
-            physics : const ClampingScrollPhysics(),
-            child: Container(
-              width: double.infinity,
-              alignment: Alignment.center,
-              color: Colors.white,
-              child: _buildEmailMessage(
-                context: context,
-                presentationEmail: presentationEmail,
-                calendarEvent: calendarEvent,
-                emailAddressSender: presentationEmail.listEmailAddressSender.getListAddress(),
-              )
-            )
-          );
-        } else {
-          return _buildEmailMessage(context: context, presentationEmail: presentationEmail);
-        }
-      });
-    }
-  }
-
  Widget _buildEmailMessage({
    required BuildContext context,
    required PresentationEmail presentationEmail,
    CalendarEvent? calendarEvent,
    List<String>? emailAddressSender,
  }) {
-    return LayoutBuilder(
-      builder: (context, constraints) {
-        return Column(crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            EmailSubjectWidget(presentationEmail: presentationEmail),
-            InformationSenderAndReceiverBuilder(
-              controller: controller,
-              emailSelected: presentationEmail,
-              imagePaths: imagePaths,
-              responsiveUtils: responsiveUtils,
-            ),
-            Obx(() {
-              final attachments = controller.attachments.listAttachmentsDisplayedOutSide;
-              if (attachments.isNotEmpty) {
-                return EmailAttachmentsWidget(
-                  attachments: attachments,
-                  onDragStarted: () {
-                    log('EmailView::_buildEmailMessage:onDragStarted:');
-                    controller.mailboxDashBoardController.enableDraggableApp();
-                  },
-                  onDragEnd: (details) {
-                    log('EmailView::_buildEmailMessage:onDragEnd:');
-                    controller.mailboxDashBoardController.disableDraggableApp();
-                  },
-                  downloadAttachmentAction: (attachment) {
-                    if (PlatformInfo.isWeb) {
-                      controller.downloadAttachmentForWeb(context, attachment);
-                    } else {
-                      controller.exportAttachment(context, attachment);
-                    }
-                  },
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        EmailSubjectWidget(presentationEmail: presentationEmail),
+        InformationSenderAndReceiverBuilder(
+          controller: controller,
+          emailSelected: presentationEmail,
+          imagePaths: imagePaths,
+          responsiveUtils: responsiveUtils,
+        ),
+        Obx(() {
+          final attachments = controller.attachments.listAttachmentsDisplayedOutSide;
+          if (attachments.isNotEmpty) {
+            return EmailAttachmentsWidget(
+              attachments: attachments,
+              onDragStarted: () {
+                log('EmailView::_buildEmailMessage:onDragStarted:');
+                controller.mailboxDashBoardController.enableDraggableApp();
+              },
+              onDragEnd: (details) {
+                log('EmailView::_buildEmailMessage:onDragEnd:');
+                controller.mailboxDashBoardController.disableDraggableApp();
+              },
+              downloadAttachmentAction: (attachment) {
+                if (PlatformInfo.isWeb) {
+                  controller.downloadAttachmentForWeb(context, attachment);
+                } else {
+                  controller.exportAttachment(context, attachment);
+                }
+              },
+            );
+          } else {
+            return const SizedBox.shrink();
+          }
+        }),
+        Obx(() => EmailViewLoadingBarWidget(
+          viewState: controller.emailLoadedViewState.value
+        )),
+        if (calendarEvent != null)
+          Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              CalendarEventInformationWidget(
+                calendarEvent: calendarEvent,
+                eventActions: controller.eventActions,
+                onOpenComposerAction: controller.openNewComposerAction,
+                onOpenNewTabAction: controller.openNewTabAction,
+              ),
+              if (calendarEvent.getTitleEventAction(context, emailAddressSender ?? []).isNotEmpty)
+                CalendarEventActionBannerWidget(
+                  calendarEvent: calendarEvent,
+                  listEmailAddressSender: emailAddressSender ?? []
+                ),
+              CalendarEventDetailWidget(
+                calendarEvent: calendarEvent,
+                eventActions: controller.eventActions,
+                onOpenComposerAction: controller.openNewComposerAction,
+                onOpenNewTabAction: controller.openNewTabAction,
+              ),
+            ],
+          )
+        else if (presentationEmail.id == controller.currentEmail?.id)
+          Obx(() {
+            if (controller.emailContents.value != null) {
+              final allEmailContents = controller.emailContents.value ?? '';
+
+              if (PlatformInfo.isWeb) {
+                return Expanded(
+                  child: Padding(
+                    padding: const EdgeInsetsDirectional.only(start: 16, bottom: 16),
+                    child: LayoutBuilder(builder: (context, constraints) {
+                      return Obx(() {
+                        return Stack(
+                          children: [
+                            HtmlContentViewerOnWeb(
+                              widthContent: constraints.maxWidth,
+                              heightContent: constraints.maxHeight,
+                              contentHtml: allEmailContents,
+                              controller: HtmlViewerControllerForWeb(),
+                              mailtoDelegate: controller.openMailToLink,
+                              direction: AppUtils.getCurrentDirection(context),
+                            ),
+                            if (controller.mailboxDashBoardController.isDraggableAppActive)
+                              PointerInterceptor(
+                                child: SizedBox(
+                                  width: constraints.maxWidth,
+                                  height: constraints.maxHeight,
+                                )
+                              )
+                          ],
+                        );
+                      });
+                    }),
+                  ),
                );
              } else {
-                return const SizedBox.shrink();
-              }
-            }),
-            Obx(() => EmailViewLoadingBarWidget(
-              viewState: controller.emailLoadedViewState.value
-            )),
-            if (calendarEvent != null)
-              Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  CalendarEventInformationWidget(
-                    calendarEvent: calendarEvent,
-                    eventActions: controller.eventActions,
-                    onOpenComposerAction: controller.openNewComposerAction,
-                    onOpenNewTabAction: controller.openNewTabAction,
+                return Padding(
+                  padding: const EdgeInsetsDirectional.symmetric(
+                    vertical: EmailViewStyles.mobileContentVerticalMargin,
+                    horizontal: EmailViewStyles.mobileContentHorizontalMargin
                  ),
-                  if (calendarEvent.getTitleEventAction(context, emailAddressSender ?? []).isNotEmpty)
-                    CalendarEventActionBannerWidget(
-                      calendarEvent: calendarEvent,
-                      listEmailAddressSender: emailAddressSender ?? []
-                    ),
-                  CalendarEventDetailWidget(
-                    calendarEvent: calendarEvent,
-                    eventActions: controller.eventActions,
-                    onOpenComposerAction: controller.openNewComposerAction,
-                    onOpenNewTabAction: controller.openNewTabAction,
+                  child: HtmlContentViewer(
+                    contentHtml: allEmailContents,
+                    mailtoDelegate: controller.openMailToLink,
+                    onScrollHorizontalEnd: controller.toggleScrollPhysicsPagerView,
+                    onWebViewLoaded: (isScrollPageViewActivated) {
+                      log('EmailView::_buildEmailContent(): isScrollPageViewActivated: $isScrollPageViewActivated');
+                      controller.emailSupervisorController.updateScrollPhysicPageView(isScrollPageViewActivated: isScrollPageViewActivated);
+                    },
+                    direction: AppUtils.getCurrentDirection(context),
                  ),
-                ],
-              )
-            else
-              _buildEmailContentOnHtmlViewer(context, constraints, presentationEmail)
-          ],
-        );
-      });
-  }
-
-  Widget _buildEmailContentOnHtmlViewer(
-    BuildContext context,
-    BoxConstraints constraints,
-    PresentationEmail email
-  ) {
-    if (email.id != controller.currentEmail?.id) {
-      return const SizedBox.shrink();
-    }
-    return Obx(() {
-      if (controller.emailContents.value != null) {
-        final allEmailContents = controller.emailContents.value;
-
-        if (PlatformInfo.isWeb) {
-          return Expanded(
-            child: Padding(
-              padding: const EdgeInsetsDirectional.only(start: 16, bottom: 16),
-              child: Obx(() {
-                return Stack(
-                  children: [
-                    HtmlContentViewerOnWeb(
-                      widthContent: constraints.maxWidth,
-                      heightContent: responsiveUtils.getSizeScreenHeight(context),
-                      contentHtml: allEmailContents ?? "",
-                      controller: HtmlViewerControllerForWeb(),
-                      mailtoDelegate: (uri) => controller.openMailToLink(uri),
-                      direction: AppUtils.getCurrentDirection(context),
-                    ),
-                    if (controller.mailboxDashBoardController.isDraggableAppActive)
-                      PointerInterceptor(
-                        child: SizedBox(
-                          width: constraints.maxWidth,
-                          height: constraints.maxHeight,
-                        )
-                      )
-                  ],
                );
-              }),
-            ),
-          );
-        } else {
-          return Padding(
-            padding: const EdgeInsetsDirectional.symmetric(
-              vertical: EmailViewStyles.mobileContentVerticalMargin,
-              horizontal: EmailViewStyles.mobileContentHorizontalMargin
-            ),
-            child: HtmlContentViewer(
-              heightContent: responsiveUtils.getSizeScreenHeight(context),
-              contentHtml: allEmailContents ?? "",
-              mailtoDelegate: (uri) async => controller.openMailToLink(uri),
-              onScrollHorizontalEnd: controller.toggleScrollPhysicsPagerView,
-              onWebViewLoaded: (isScrollPageViewActivated) {
-                log('EmailView::_buildEmailContent(): isScrollPageViewActivated: $isScrollPageViewActivated');
-                controller.emailSupervisorController.updateScrollPhysicPageView(isScrollPageViewActivated: isScrollPageViewActivated);
-              },
-              direction: AppUtils.getCurrentDirection(context),
-            ),
-          );
-        }
-      } else {
-        return const SizedBox.shrink();
-      }
-    });
+              }
+            } else {
+              return const SizedBox.shrink();
+            }
+          })
+      ],
+    );
  }

  List<Widget> _emailActionMoreActionTile(BuildContext context, PresentationEmail email) {
@@ -0,0 +1,24 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/icon_utils.dart';
+import 'package:flutter/material.dart';
+
+class EmailViewAppBarWidgetStyles {
+  static const double bottomBorderWidth = 0.5;
+  static const double borderWidth = 0;
+  static const double height = 52;
+  static const double radius = 20;
+  static const double buttonIconSize = IconUtils.defaultIconSize;
+  static const double deleteButtonIconSize = 20;
+  static const double space = 5;
+
+  static const Color bottomBorderColor = AppColor.colorDividerHorizontal;
+  static const Color backgroundColor = Colors.white;
+  static const Color emptyTrashButtonColor = AppColor.primaryColor;
+  static const Color deletePermanentButtonColor = AppColor.colorDeletePermanentlyButton;
+  static const Color buttonActivatedColor = AppColor.primaryColor;
+  static const Color buttonDeactivatedColor = AppColor.colorAttachmentIcon;
+
+  static const EdgeInsetsGeometry padding = EdgeInsets.symmetric(horizontal: 16);
+  static const EdgeInsetsGeometry buttonPadding = EdgeInsets.all(5);
+}
@@ -0,0 +1,16 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
+class EmailViewBackButtonStyles {
+  static const double offsetWidth = 270;
+
+  static const Color iconColor = AppColor.primaryColor;
+
+  static const EdgeInsetsGeometry rtlPadding = EdgeInsetsDirectional.symmetric(horizontal: 8);
+
+  static const TextStyle labelTextStyle = TextStyle(
+    fontSize: 17,
+    color: AppColor.colorTextButton
+  );
+}
@@ -0,0 +1,29 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:flutter/material.dart';
+
+class EmailViewBottomBarWidgetStyles {
+  static const double topBorderWidth = 0.5;
+  static const double borderWidth = 0;
+  static const double buttonRadius = 0;
+  static const double buttonIconSize = 20;
+  static const double replyAllButtonIconSize = 15;
+  static const double radius = 20;
+
+  static const Color topBorderColor = AppColor.colorDividerHorizontal;
+  static const Color backgroundColor = Colors.white;
+  static const Color buttonBackgroundColor =  Colors.transparent;
+
+  static const EdgeInsetsGeometry buttonPadding = EdgeInsets.symmetric(horizontal: 8, vertical: 12);
+
+  static TextStyle getButtonTextStyle(
+    BuildContext context,
+    ResponsiveUtils responsiveUtils
+  ) {
+    return TextStyle(
+      fontSize: responsiveUtils.isPortraitMobile(context) ? 12 : 16,
+      color: AppColor.colorTextButton
+    );
+  }
+}
@@ -1,5 +1,11 @@

+import 'package:core/presentation/utils/icon_utils.dart';
+import 'package:flutter/material.dart';
+
 class EmailViewStyles {
  static const double mobileContentHorizontalMargin = 16;
  static const double mobileContentVerticalMargin = 12;
+  static const double pageViewIconSize = IconUtils.defaultIconSize;
+
+  static const EdgeInsetsGeometry pageViewButtonPadding = EdgeInsets.all(5);
 }
@@ -1,189 +0,0 @@
-
-import 'package:core/core.dart';
-import 'package:core/utils/direction_utils.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/presentation/extensions/presentation_mailbox_extension.dart';
-import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
-
-typedef OnBackActionClick = void Function();
-typedef OnEmailActionClick = void Function(PresentationEmail, EmailActionType);
-typedef OnMoreActionClick = void Function(PresentationEmail, RelativeRect?);
-
-class AppBarMailWidgetBuilder extends StatelessWidget {
-  final _imagePaths = Get.find<ImagePaths>();
-  final _responsiveUtils = Get.find<ResponsiveUtils>();
-
-  final PresentationEmail _presentationEmail;
-  final List<Widget>? optionsWidget;
-  final PresentationMailbox? mailboxContain;
-  final bool isSearchIsRunning;
-  final OnBackActionClick? onBackActionClick;
-  final OnEmailActionClick? onEmailActionClick;
-  final OnMoreActionClick? onMoreActionClick;
-
-  AppBarMailWidgetBuilder(
-    this._presentationEmail,
-    {
-      Key? key,
-      this.mailboxContain,
-      this.onBackActionClick,
-      this.onEmailActionClick,
-      this.onMoreActionClick,
-      this.optionsWidget,
-      this.isSearchIsRunning = false,
-    }
-  ) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      key: const Key('app_bar_messenger_widget'),
-      color: Colors.transparent,
-      height: 52,
-      padding: const EdgeInsets.symmetric(horizontal: 16),
-      child: Row(children: [
-        if (_supportDisplayMailboxNameTitle(context))
-          Material(
-            color: Colors.transparent,
-            child: InkWell(
-              onTap: () => onBackActionClick?.call(),
-              customBorder: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
-              child: Tooltip(
-                message: isSearchIsRunning
-                    ? AppLocalizations.of(context).backToSearchResults
-                    : AppLocalizations.of(context).back,
-                child: Container(
-                  color: Colors.transparent,
-                  height: 32,
-                  padding: DirectionUtils.isDirectionRTLByLanguage(context)
-                    ? const EdgeInsetsDirectional.only(end: 10)
-                    : const EdgeInsets.symmetric(horizontal: 8),
-                  child: Row(mainAxisSize: MainAxisSize.min, children: [
-                    SvgPicture.asset(
-                      DirectionUtils.isDirectionRTLByLanguage(context)
-                        ? _imagePaths.icArrowRight
-                        : _imagePaths.icBack,
-                      width: DirectionUtils.isDirectionRTLByLanguage(context) ? null : 16,
-                      height: DirectionUtils.isDirectionRTLByLanguage(context) ? null : 16,
-                      colorFilter: AppColor.colorTextButton.asFilter(),
-                      fit: BoxFit.fill),
-                    if (!isSearchIsRunning)
-                      Container(
-                        margin: DirectionUtils.isDirectionRTLByLanguage(context)
-                          ? null
-                          : const EdgeInsetsDirectional.only(start: 8),
-                        constraints: BoxConstraints(
-                            maxWidth: _responsiveUtils.getSizeScreenWidth(context) - 250),
-                        child: Text(
-                            mailboxContain?.getDisplayName(context) ?? '',
-                            maxLines: 1,
-                            overflow: CommonTextStyle.defaultTextOverFlow,
-                            softWrap: CommonTextStyle.defaultSoftWrap,
-                            style: const TextStyle(fontSize: 17, color: AppColor.colorTextButton)),
-                      ),
-                  ]),
-                ),
-              ),
-            ),
-          ),
-        const Spacer(),
-        _buildListOptionButton(context),
-      ])
-    );
-  }
-
-  bool _supportDisplayMailboxNameTitle(BuildContext context) {
-    if (PlatformInfo.isWeb) {
-      return _responsiveUtils.isDesktop(context) ||
-          _responsiveUtils.isMobile(context) ||
-          _responsiveUtils.isTablet(context) ||
-          isSearchIsRunning;
-    } else {
-      return _responsiveUtils.isPortraitMobile(context) ||
-          _responsiveUtils.isLandscapeMobile(context) ||
-          _responsiveUtils.isTablet(context) ||
-          isSearchIsRunning;
-    }
-  }
-
-  Widget _buildListOptionButton(BuildContext context) {
-    return Row(
-      children: [
-        if(optionsWidget != null)
-          ...optionsWidget!,
-        buildIconWeb(
-            icon: SvgPicture.asset(
-                _imagePaths.icMoveEmail,
-                width: IconUtils.defaultIconSize,
-                height: IconUtils.defaultIconSize,
-                fit: BoxFit.fill),
-            tooltip: AppLocalizations.of(context).move_message,
-            onTap: () => onEmailActionClick?.call(
-                _presentationEmail,
-                EmailActionType.moveToMailbox)),
-        buildIconWeb(
-          icon: SvgPicture.asset(
-              _presentationEmail.hasStarred
-                ? _imagePaths.icStar
-                : _imagePaths.icUnStar,
-              width: IconUtils.defaultIconSize,
-              height: IconUtils.defaultIconSize,
-              fit: BoxFit.fill),
-          tooltip: _presentationEmail.hasStarred
-              ? AppLocalizations.of(context).not_starred
-              : AppLocalizations.of(context).mark_as_starred,
-          onTap: () => onEmailActionClick?.call(_presentationEmail,
-              _presentationEmail.hasStarred
-                  ? EmailActionType.unMarkAsStarred
-                  : EmailActionType.markAsStarred)),
-        buildIconWeb(
-            icon: SvgPicture.asset(
-                _imagePaths.icDeleteComposer,
-                colorFilter: mailboxContain?.isTrash == false
-                  ? AppColor.colorTextButton.asFilter()
-                  : AppColor.colorDeletePermanentlyButton.asFilter(),
-                width: PlatformInfo.isWeb ? 18 : 20,
-                height: PlatformInfo.isWeb ? 18 : 20,
-                fit: BoxFit.fill),
-            tooltip: mailboxContain?.isTrash == false
-                ? AppLocalizations.of(context).move_to_trash
-                : AppLocalizations.of(context).delete_permanently,
-            onTap: () {
-              if (mailboxContain?.isTrash == false) {
-                onEmailActionClick?.call(
-                    _presentationEmail,
-                    EmailActionType.moveToTrash);
-              } else {
-                onEmailActionClick?.call(
-                    _presentationEmail,
-                    EmailActionType.deletePermanently);
-              }
-            }),
-        buildIconWebHasPosition(
-          context,
-          tooltip: AppLocalizations.of(context).more,
-          icon: SvgPicture.asset(
-              _imagePaths.icMore,
-              width: IconUtils.defaultIconSize,
-              height: IconUtils.defaultIconSize,
-              fit: BoxFit.fill),
-          onTap: () {
-            if (_responsiveUtils.isPortraitMobile(context) ||
-                _responsiveUtils.isLandscapeMobile(context)) {
-              onMoreActionClick?.call(_presentationEmail, null);
-            }
-          },
-          onTapDown: (position) {
-            if (!_responsiveUtils.isPortraitMobile(context) &&
-                !_responsiveUtils.isLandscapeMobile(context)) {
-              onMoreActionClick?.call(_presentationEmail, position);
-            }
-          }
-        ),
-      ]
-    );
-  }
-}
@@ -1,131 +0,0 @@
-import 'package:core/presentation/extensions/color_extension.dart';
-import 'package:core/presentation/resources/image_paths.dart';
-import 'package:core/presentation/utils/responsive_utils.dart';
-import 'package:core/presentation/views/button/tmail_button_widget.dart';
-import 'package:flutter/material.dart';
-import 'package:get/get.dart';
-import 'package:model/email/email_action_type.dart';
-import 'package:model/email/presentation_email.dart';
-import 'package:model/extensions/presentation_email_extension.dart';
-import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
-
-typedef OnPressEmailActionClick = void Function(
-  EmailActionType emailActionType,
-  PresentationEmail presentationEmail
-);
-
-class BottomBarMailWidgetBuilder extends StatelessWidget {
-
-  static const double maxWidthBottomBar = 540;
-
-  final PresentationEmail _presentationEmail;
-  final OnPressEmailActionClick? onPressEmailActionClick;
-
-  const BottomBarMailWidgetBuilder(
-    this._presentationEmail,
-    {
-      Key? key,
-      this.onPressEmailActionClick
-    }
-  ) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    final imagePaths = Get.find<ImagePaths>();
-    final responsiveUtils = Get.find<ResponsiveUtils>();
-
-    return Container(
-      decoration: const BoxDecoration(
-        border: Border(
-          top: BorderSide(
-            color: AppColor.colorDividerHorizontal,
-            width: 0.5,
-          )
-        ),
-      ),
-      child: IntrinsicHeight(
-        child: Row(
-          children: [
-            if (_presentationEmail.numberOfAllEmailAddress() > 1)
-              Expanded(
-                child: TMailButtonWidget(
-                  key: const Key('reply_all_emails_button'),
-                  text: AppLocalizations.of(context).reply_all,
-                  icon: imagePaths.icReplyAll,
-                  borderRadius: 0,
-                  iconSize: 15,
-                  textAlign: TextAlign.center,
-                  flexibleText: true,
-                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
-                  backgroundColor: Colors.transparent,
-                  textStyle: TextStyle(
-                    fontSize: responsiveUtils.isPortraitMobile(context) ? 12 : 16,
-                    color: AppColor.colorTextButton
-                  ),
-                  verticalDirection: responsiveUtils.isPortraitMobile(context),
-                  onTapActionCallback: () => onPressEmailActionClick?.call(EmailActionType.replyAll, _presentationEmail),
-                ),
-              ),
-            Expanded(
-              child: TMailButtonWidget(
-                key: const Key('reply_email_button'),
-                text: AppLocalizations.of(context).reply,
-                icon: imagePaths.icReply,
-                borderRadius: 0,
-                iconSize: 20,
-                textAlign: TextAlign.center,
-                flexibleText: true,
-                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
-                backgroundColor: Colors.transparent,
-                textStyle: TextStyle(
-                  fontSize: responsiveUtils.isPortraitMobile(context) ? 12 : 16,
-                  color: AppColor.colorTextButton
-                ),
-                verticalDirection: responsiveUtils.isPortraitMobile(context),
-                onTapActionCallback: () => onPressEmailActionClick?.call(EmailActionType.reply, _presentationEmail),
-              ),
-            ),
-            Expanded(
-              child: TMailButtonWidget(
-                key: const Key('forward_email_button'),
-                text: AppLocalizations.of(context).forward,
-                icon: imagePaths.icForward,
-                borderRadius: 0,
-                iconSize: 20,
-                textAlign: TextAlign.center,
-                flexibleText: true,
-                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
-                backgroundColor: Colors.transparent,
-                textStyle: TextStyle(
-                  fontSize: responsiveUtils.isPortraitMobile(context) ? 12 : 16,
-                  color: AppColor.colorTextButton
-                ),
-                verticalDirection: responsiveUtils.isPortraitMobile(context),
-                onTapActionCallback: () => onPressEmailActionClick?.call(EmailActionType.forward, _presentationEmail),
-              ),
-            ),
-            Expanded(
-              child: TMailButtonWidget(
-                key: const Key('compose_new_email_button'),
-                text: AppLocalizations.of(context).new_message,
-                icon: imagePaths.icNewMessage,
-                borderRadius: 0,
-                iconSize: 20,
-                textAlign: TextAlign.center,
-                flexibleText: true,
-                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
-                backgroundColor: Colors.transparent,
-                textStyle: TextStyle(
-                  fontSize: responsiveUtils.isPortraitMobile(context) ? 12 : 16,
-                  color: AppColor.colorTextButton
-                ),
-                verticalDirection: responsiveUtils.isPortraitMobile(context),
-                onTapActionCallback: () => onPressEmailActionClick?.call(EmailActionType.compose, _presentationEmail),
-              ),
-            ),
-          ]
-        ),
-      )
-    );
-  }
-}
@@ -0,0 +1,164 @@
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
+import 'package:core/utils/platform_info.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:model/email/email_action_type.dart';
+import 'package:model/email/presentation_email.dart';
+import 'package:model/extensions/presentation_mailbox_extension.dart';
+import 'package:model/mailbox/presentation_mailbox.dart';
+import 'package:tmail_ui_user/features/email/presentation/styles/email_view_app_bar_widget_styles.dart';
+import 'package:tmail_ui_user/features/email/presentation/widgets/email_view_back_button.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+typedef OnEmailActionClick = void Function(PresentationEmail, EmailActionType);
+typedef OnMoreActionClick = void Function(PresentationEmail, RelativeRect?);
+
+class EmailViewAppBarWidget extends StatelessWidget {
+  final _imagePaths = Get.find<ImagePaths>();
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+
+  final PresentationEmail presentationEmail;
+  final List<Widget>? optionsWidget;
+  final PresentationMailbox? mailboxContain;
+  final bool isSearchActivated;
+  final VoidCallback onBackAction;
+  final OnEmailActionClick? onEmailActionClick;
+  final OnMoreActionClick? onMoreActionClick;
+
+  EmailViewAppBarWidget({
+    Key? key,
+    required this.presentationEmail,
+    required this.onBackAction,
+    required this.isSearchActivated,
+    this.mailboxContain,
+    this.onEmailActionClick,
+    this.onMoreActionClick,
+    this.optionsWidget,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(builder: (context, constraints) {
+      return Container(
+        height: EmailViewAppBarWidgetStyles.height,
+        padding: EmailViewAppBarWidgetStyles.padding,
+        decoration: const BoxDecoration(
+          border: Border(
+            bottom: BorderSide(
+              color: EmailViewAppBarWidgetStyles.bottomBorderColor,
+              width: EmailViewAppBarWidgetStyles.bottomBorderWidth,
+            ),
+            top: BorderSide(
+              color: EmailViewAppBarWidgetStyles.bottomBorderColor,
+              width: EmailViewAppBarWidgetStyles.borderWidth,
+            ),
+            right: BorderSide(
+              color: EmailViewAppBarWidgetStyles.bottomBorderColor,
+              width: EmailViewAppBarWidgetStyles.borderWidth,
+            ),
+            left: BorderSide(
+              color: EmailViewAppBarWidgetStyles.bottomBorderColor,
+              width: EmailViewAppBarWidgetStyles.borderWidth,
+            ),
+          ),
+          borderRadius: BorderRadius.only(
+            topLeft: Radius.circular(EmailViewAppBarWidgetStyles.radius),
+            topRight: Radius.circular(EmailViewAppBarWidgetStyles.radius),
+          ),
+          color: EmailViewAppBarWidgetStyles.backgroundColor,
+        ),
+        child: Row(children: [
+          if (_supportDisplayMailboxNameTitle(context))
+            EmailViewBackButton(
+              onBackAction: onBackAction,
+              mailboxContain: mailboxContain,
+              isSearchActivated: isSearchActivated,
+              maxWidth: constraints.maxWidth,
+            ),
+          const Spacer(),
+          Row(
+            children: [
+                if(optionsWidget != null)
+                  ...optionsWidget!,
+                const SizedBox(width: EmailViewAppBarWidgetStyles.space),
+                TMailButtonWidget.fromIcon(
+                  icon: _imagePaths.icMoveEmail,
+                  iconSize: EmailViewAppBarWidgetStyles.buttonIconSize,
+                  tooltipMessage: AppLocalizations.of(context).move_message,
+                  backgroundColor: Colors.transparent,
+                  padding: EmailViewAppBarWidgetStyles.buttonPadding,
+                  onTapActionCallback: () => onEmailActionClick?.call(presentationEmail, EmailActionType.moveToMailbox)
+                ),
+                const SizedBox(width: EmailViewAppBarWidgetStyles.space),
+                TMailButtonWidget.fromIcon(
+                  icon: presentationEmail.hasStarred
+                    ? _imagePaths.icStar
+                    : _imagePaths.icUnStar,
+                  iconSize: EmailViewAppBarWidgetStyles.buttonIconSize,
+                  backgroundColor: Colors.transparent,
+                  padding: EmailViewAppBarWidgetStyles.buttonPadding,
+                  tooltipMessage: presentationEmail.hasStarred
+                    ? AppLocalizations.of(context).not_starred
+                    : AppLocalizations.of(context).mark_as_starred,
+                  onTapActionCallback: () => onEmailActionClick?.call(
+                    presentationEmail,
+                    presentationEmail.hasStarred ? EmailActionType.unMarkAsStarred : EmailActionType.markAsStarred
+                  )
+                ),
+                const SizedBox(width: EmailViewAppBarWidgetStyles.space),
+                TMailButtonWidget.fromIcon(
+                  icon: _imagePaths.icDeleteComposer,
+                  iconSize: EmailViewAppBarWidgetStyles.deleteButtonIconSize,
+                  backgroundColor: Colors.transparent,
+                  padding: EmailViewAppBarWidgetStyles.buttonPadding,
+                  iconColor: mailboxContain?.isTrash == false
+                    ? EmailViewAppBarWidgetStyles.emptyTrashButtonColor
+                    : EmailViewAppBarWidgetStyles.deletePermanentButtonColor,
+                  tooltipMessage: mailboxContain?.isTrash == false
+                    ? AppLocalizations.of(context).move_to_trash
+                    : AppLocalizations.of(context).delete_permanently,
+                  onTapActionCallback: () {
+                    if (mailboxContain?.isTrash == false) {
+                      onEmailActionClick?.call(presentationEmail, EmailActionType.moveToTrash);
+                    } else {
+                      onEmailActionClick?.call(presentationEmail, EmailActionType.deletePermanently);
+                    }
+                  }
+                ),
+                const SizedBox(width: EmailViewAppBarWidgetStyles.space),
+                TMailButtonWidget.fromIcon(
+                  icon: _imagePaths.icMore,
+                  iconSize: EmailViewAppBarWidgetStyles.buttonIconSize,
+                  backgroundColor: Colors.transparent,
+                  padding: EmailViewAppBarWidgetStyles.buttonPadding,
+                  tooltipMessage: AppLocalizations.of(context).more,
+                  onTapActionCallback: _responsiveUtils.isScreenWithShortestSide(context)
+                    ? () => onMoreActionClick?.call(presentationEmail, null)
+                    : null,
+                  onTapActionAtPositionCallback: !_responsiveUtils.isScreenWithShortestSide(context)
+                    ? (position) => onMoreActionClick?.call(presentationEmail, position)
+                    : null
+                ),
+              ]
+          ),
+        ])
+      );
+    });
+  }
+
+  bool _supportDisplayMailboxNameTitle(BuildContext context) {
+    if (PlatformInfo.isWeb) {
+      return _responsiveUtils.isDesktop(context) ||
+        _responsiveUtils.isMobile(context) ||
+        _responsiveUtils.isTablet(context) ||
+        isSearchActivated;
+    } else {
+      return _responsiveUtils.isPortraitMobile(context) ||
+        _responsiveUtils.isLandscapeMobile(context) ||
+        _responsiveUtils.isTablet(context) ||
+        isSearchActivated;
+    }
+  }
+}
@@ -0,0 +1,64 @@
+
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
+import 'package:core/utils/direction_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:model/mailbox/presentation_mailbox.dart';
+import 'package:tmail_ui_user/features/email/presentation/styles/email_view_back_button_styles.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class EmailViewBackButton extends StatelessWidget {
+  final _imagePaths = Get.find<ImagePaths>();
+
+  final bool isSearchActivated;
+  final VoidCallback onBackAction;
+  final double maxWidth;
+  final PresentationMailbox? mailboxContain;
+
+  EmailViewBackButton({
+    super.key,
+    required this.onBackAction,
+    required this.isSearchActivated,
+    required this.maxWidth,
+    this.mailboxContain,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    if (!isSearchActivated) {
+      return TMailButtonWidget(
+        text: mailboxContain?.getDisplayName(context) ?? '',
+        icon: DirectionUtils.isDirectionRTLByLanguage(context)
+          ? _imagePaths.icArrowRight
+          : _imagePaths.icBack,
+        iconColor: EmailViewBackButtonStyles.iconColor,
+        textStyle: EmailViewBackButtonStyles.labelTextStyle,
+        backgroundColor: Colors.transparent,
+        mainAxisSize: MainAxisSize.min,
+        padding: DirectionUtils.isDirectionRTLByLanguage(context)
+          ? EmailViewBackButtonStyles.rtlPadding
+          : null,
+        maxWidth: maxWidth - EmailViewBackButtonStyles.offsetWidth,
+        flexibleText: true,
+        maxLines: 1,
+        tooltipMessage: AppLocalizations.of(context).back,
+        onTapActionCallback: onBackAction,
+      );
+    } else {
+      return TMailButtonWidget.fromIcon(
+        icon: DirectionUtils.isDirectionRTLByLanguage(context)
+          ? _imagePaths.icArrowRight
+          : _imagePaths.icBack,
+        iconColor: EmailViewBackButtonStyles.iconColor,
+        padding: DirectionUtils.isDirectionRTLByLanguage(context)
+          ? EmailViewBackButtonStyles.rtlPadding
+          : null,
+        backgroundColor: Colors.transparent,
+        tooltipMessage: AppLocalizations.of(context).backToSearchResults,
+        onTapActionCallback: onBackAction,
+      );
+    }
+  }
+}
@@ -0,0 +1,129 @@
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:model/email/email_action_type.dart';
+import 'package:model/email/presentation_email.dart';
+import 'package:model/extensions/presentation_email_extension.dart';
+import 'package:tmail_ui_user/features/email/presentation/styles/email_view_bottom_bar_widget_styles.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+typedef OnEmailActionCallback = void Function(EmailActionType, PresentationEmail);
+
+class EmailViewBottomBarWidget extends StatelessWidget {
+
+  final _imagePaths = Get.find<ImagePaths>();
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+
+  final PresentationEmail presentationEmail;
+  final OnEmailActionCallback emailActionCallback;
+
+  EmailViewBottomBarWidget({
+    Key? key,
+    required this.presentationEmail,
+    required this.emailActionCallback
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: const BoxDecoration(
+        border: Border(
+          top: BorderSide(
+            color: EmailViewBottomBarWidgetStyles.topBorderColor,
+            width: EmailViewBottomBarWidgetStyles.topBorderWidth,
+          ),
+          bottom: BorderSide(
+            color: EmailViewBottomBarWidgetStyles.topBorderColor,
+            width: EmailViewBottomBarWidgetStyles.borderWidth,
+          ),
+          right: BorderSide(
+            color: EmailViewBottomBarWidgetStyles.topBorderColor,
+            width: EmailViewBottomBarWidgetStyles.borderWidth,
+          ),
+          left: BorderSide(
+            color: EmailViewBottomBarWidgetStyles.topBorderColor,
+            width: EmailViewBottomBarWidgetStyles.borderWidth,
+          ),
+        ),
+        borderRadius: BorderRadius.only(
+          bottomLeft: Radius.circular(EmailViewBottomBarWidgetStyles.radius),
+          bottomRight: Radius.circular(EmailViewBottomBarWidgetStyles.radius),
+        ),
+        color: EmailViewBottomBarWidgetStyles.backgroundColor
+      ),
+      child: IntrinsicHeight(
+        child: Row(
+          children: [
+            if (presentationEmail.numberOfAllEmailAddress() > 1)
+              Expanded(
+                child: TMailButtonWidget(
+                  key: const Key('reply_all_emails_button'),
+                  text: AppLocalizations.of(context).reply_all,
+                  icon: _imagePaths.icReplyAll,
+                  borderRadius: EmailViewBottomBarWidgetStyles.buttonRadius,
+                  iconSize: EmailViewBottomBarWidgetStyles.replyAllButtonIconSize,
+                  textAlign: TextAlign.center,
+                  flexibleText: true,
+                  padding: EmailViewBottomBarWidgetStyles.buttonPadding,
+                  backgroundColor: EmailViewBottomBarWidgetStyles.buttonBackgroundColor,
+                  textStyle: EmailViewBottomBarWidgetStyles.getButtonTextStyle(context, _responsiveUtils),
+                  verticalDirection: _responsiveUtils.isPortraitMobile(context),
+                  onTapActionCallback: () => emailActionCallback.call(EmailActionType.replyAll, presentationEmail),
+                ),
+              ),
+            Expanded(
+              child: TMailButtonWidget(
+                key: const Key('reply_email_button'),
+                text: AppLocalizations.of(context).reply,
+                icon: _imagePaths.icReply,
+                borderRadius: EmailViewBottomBarWidgetStyles.buttonRadius,
+                iconSize: EmailViewBottomBarWidgetStyles.buttonIconSize,
+                textAlign: TextAlign.center,
+                flexibleText: true,
+                padding: EmailViewBottomBarWidgetStyles.buttonPadding,
+                backgroundColor: EmailViewBottomBarWidgetStyles.buttonBackgroundColor,
+                textStyle: EmailViewBottomBarWidgetStyles.getButtonTextStyle(context, _responsiveUtils),
+                verticalDirection: _responsiveUtils.isPortraitMobile(context),
+                onTapActionCallback: () => emailActionCallback.call(EmailActionType.reply, presentationEmail),
+              ),
+            ),
+            Expanded(
+              child: TMailButtonWidget(
+                key: const Key('forward_email_button'),
+                text: AppLocalizations.of(context).forward,
+                icon: _imagePaths.icForward,
+                borderRadius: EmailViewBottomBarWidgetStyles.buttonRadius,
+                iconSize: EmailViewBottomBarWidgetStyles.buttonIconSize,
+                textAlign: TextAlign.center,
+                flexibleText: true,
+                padding: EmailViewBottomBarWidgetStyles.buttonPadding,
+                backgroundColor: EmailViewBottomBarWidgetStyles.buttonBackgroundColor,
+                textStyle: EmailViewBottomBarWidgetStyles.getButtonTextStyle(context, _responsiveUtils),
+                verticalDirection: _responsiveUtils.isPortraitMobile(context),
+                onTapActionCallback: () => emailActionCallback.call(EmailActionType.forward, presentationEmail),
+              ),
+            ),
+            Expanded(
+              child: TMailButtonWidget(
+                key: const Key('compose_new_email_button'),
+                text: AppLocalizations.of(context).new_message,
+                icon: _imagePaths.icNewMessage,
+                borderRadius: EmailViewBottomBarWidgetStyles.buttonRadius,
+                iconSize: EmailViewBottomBarWidgetStyles.buttonIconSize,
+                textAlign: TextAlign.center,
+                flexibleText: true,
+                padding: EmailViewBottomBarWidgetStyles.buttonPadding,
+                backgroundColor: EmailViewBottomBarWidgetStyles.buttonBackgroundColor,
+                textStyle: EmailViewBottomBarWidgetStyles.getButtonTextStyle(context, _responsiveUtils),
+                verticalDirection: _responsiveUtils.isPortraitMobile(context),
+                onTapActionCallback: () => emailActionCallback.call(EmailActionType.compose, presentationEmail),
+              ),
+            ),
+          ]
+        ),
+      )
+    );
+  }
+}