TF-3479 Add hide button for composer

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

lib/features/composer/presentation/composer_controller.dart

@@ -1609,10 +1609,10 @@ class ComposerController extends BaseController
   }
 
   void displayScreenTypeComposerAction(ScreenDisplayMode displayMode) async {
-    if (screenDisplayMode.value == ScreenDisplayMode.minimize) {
+    if (screenDisplayMode.value.isNotContentVisible()) {
       _isEmailBodyLoaded = false;
     }
-    if (richTextWebController != null && screenDisplayMode.value != ScreenDisplayMode.minimize) {
+    if (richTextWebController != null && !screenDisplayMode.value.isNotContentVisible()) {
       final textCurrent = await richTextWebController!.editorController.getText();
       richTextWebController!.editorController.setText(textCurrent);
     }

lib/features/composer/presentation/composer_view_web.dart

@@ -641,6 +641,7 @@ class ComposerView extends GetWidget<ComposerController> {
         },
         composerManager: controller.mailboxDashBoardController.composerManager,
         responsiveUtils: controller.responsiveUtils,
+        imagePaths: controller.imagePaths,
         displayMode: controller.screenDisplayMode.value,
         emailSubject: controller.subjectEmail.value ?? '',
         onCloseViewAction: () => controller.handleClickCloseComposer(context),

lib/features/composer/presentation/manager/composer_manager.dart

@@ -189,6 +189,11 @@ class ComposerManager extends GetxController {
   }) {
     if (composerIdsQueue.isEmpty) return;
 
+    if (newDisplayMode.isNotContentVisible()) {
+      composers.refresh();
+      return;
+    }
+
     var (availableScreenWidth, totalOpenedComposersWidth, composerControllers) =
       _getSizeToArrangeComposer(screenWidth: screenWidth);
 
@@ -245,6 +250,10 @@ class ComposerManager extends GetxController {
       : null;
   }
 
+  bool get isAllHiddenComposer {
+    return composerIdsQueue.every((id) => getComposerView(id).controller.isHiddenScreen);
+  }
+
   List<String> get hiddenComposerIds {
     return composerIdsQueue
       .where((id) => getComposerView(id).controller.isHiddenScreen)

lib/features/composer/presentation/model/screen_display_mode.dart

@@ -4,4 +4,6 @@ enum ScreenDisplayMode {
   minimize,
   normal,
   hidden;
+
+  bool isNotContentVisible() => this == minimize || this == hidden;
 }

lib/features/composer/presentation/styles/composer_style.dart

@@ -9,7 +9,7 @@ class ComposerStyle {
   static const double keyboardToolBarHeight = 200;
   static const double popupMenuRadius = 8;
   static const double suggestionItemHeight = 60;
-  static const double normalWidth = 725;
+  static const double normalWidth = 600;
   static const double normalHeight = 525;
   static const double minimizeWidth = 400;
   static const double minimizeHeight = 52;

lib/features/composer/presentation/view/web/composer_overlay_view.dart

@@ -35,7 +35,27 @@ class ComposerOverlayView extends StatelessWidget {
       if (fullScreenComposerView != null) return fullScreenComposerView;
 
       if (composerIdsQueue.length == 1) {
-        return _composerManager.getComposerView(composerIdsQueue.first);
+        final composerView = _composerManager.getComposerView(composerIdsQueue.first);
+
+        if (composerView.controller.isHiddenScreen) {
+          return Align(
+            alignment: AlignmentDirectional.bottomEnd,
+            child: SingleChildScrollView(
+              scrollDirection: Axis.horizontal,
+              child: Padding(
+                padding: const EdgeInsetsDirectional.all(ComposerStyle.padding),
+                child: ExpandComposerButton(
+                  countComposerHidden: 1,
+                  onRemoveHiddenComposerItem: (controller) =>
+                    controller.handleClickCloseComposer(context),
+                  onShowComposerAction: _composerManager.showComposerIfHidden,
+                ),
+              ),
+            ),
+          );
+        } else {
+          return composerView;
+        }
       }
 
       final countComposerHidden = _composerManager.countComposerHidden;

lib/features/composer/presentation/view/web/desktop_responsive_container_view.dart

@@ -1,3 +1,4 @@
+import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:pointer_interceptor/pointer_interceptor.dart';
@@ -9,6 +10,7 @@ import 'package:tmail_ui_user/features/composer/presentation/widgets/web/minimiz
 class DesktopResponsiveContainerView extends StatelessWidget {
 
   final ResponsiveUtils responsiveUtils;
+  final ImagePaths imagePaths;
   final ComposerManager composerManager;
   final ScreenDisplayMode displayMode;
   final String emailSubject;
@@ -21,6 +23,7 @@ class DesktopResponsiveContainerView extends StatelessWidget {
     required this.childBuilder,
     required this.composerManager,
     required this.responsiveUtils,
+    required this.imagePaths,
     required this.displayMode,
     required this.emailSubject,
     required this.onCloseViewAction,
@@ -32,6 +35,7 @@ class DesktopResponsiveContainerView extends StatelessWidget {
     if (displayMode == ScreenDisplayMode.minimize) {
       final composerWidget = PointerInterceptor(
         child: MinimizeComposerWidget(
+          imagePaths: imagePaths,
           emailSubject: emailSubject,
           onCloseViewAction: onCloseViewAction,
           onChangeDisplayModeAction: onChangeDisplayModeAction,

lib/features/composer/presentation/widgets/web/desktop_app_bar_composer_widget.dart

@@ -35,6 +35,16 @@ class DesktopAppBarComposerWidget extends StatelessWidget {
           Expanded(child: TitleComposerWidget(emailSubject: emailSubject)),
           if (onChangeDisplayModeAction != null)
             ... [
+                  TMailButtonWidget.fromIcon(
+                    icon: imagePaths.icDoubleArrowDown,
+                    backgroundColor: Colors.transparent,
+                    tooltipMessage: AppLocalizations.of(context).hide,
+                    iconSize: AppBarComposerWidgetStyle.iconSize,
+                    iconColor: AppBarComposerWidgetStyle.iconColor,
+                    padding: AppBarComposerWidgetStyle.iconPadding,
+                    onTapActionCallback: () => onChangeDisplayModeAction!(ScreenDisplayMode.hidden),
+                  ),
+                  const SizedBox(width: AppBarComposerWidgetStyle.space),
                   TMailButtonWidget.fromIcon(
                     icon: imagePaths.icMinimize,
                     backgroundColor: Colors.transparent,

lib/features/composer/presentation/widgets/web/expand_composer_button.dart

@@ -89,6 +89,8 @@ class _ExpandComposerButtonState extends State<ExpandComposerButton> {
       ),
     );
 
+    final isAllHiddenComposer = _composerManager.isAllHiddenComposer;
+
     return PortalTarget(
         visible: _visible,
         portalFollower: GestureDetector(
@@ -96,10 +98,16 @@ class _ExpandComposerButtonState extends State<ExpandComposerButton> {
           onTap: () => setState(() => _visible = false),
         ),
         child: PortalTarget(
-          anchor: const Aligned(
+          anchor: Aligned(
-            follower: Alignment.bottomLeft,
+            follower: isAllHiddenComposer
-            target: Alignment.topLeft,
+              ? Alignment.bottomRight
-            offset:  Offset(0.0, 0.0),
+              : Alignment.bottomLeft,
+            target: isAllHiddenComposer
+              ? Alignment.topRight
+              : Alignment.topLeft,
+            offset: isAllHiddenComposer
+              ? const Offset(16.0, 0.0)
+              : const Offset(0.0, 0.0),
           ),
           portalFollower: HiddenComposerListViewOverlay(
             composerManager: _composerManager,

lib/features/composer/presentation/widgets/web/minimize_composer_widget.dart

@@ -1,7 +1,6 @@
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:flutter/material.dart';
-import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/screen_display_mode.dart';
 import 'package:tmail_ui_user/features/composer/presentation/styles/minimize_composer_widget_style.dart';
 import 'package:tmail_ui_user/features/composer/presentation/widgets/title_composer_widget.dart';
@@ -11,14 +10,14 @@ typedef OnChangeDisplayModeAction = Function(ScreenDisplayMode mode);
 
 class MinimizeComposerWidget extends StatelessWidget {
 
+  final ImagePaths imagePaths;
   final OnChangeDisplayModeAction onChangeDisplayModeAction;
   final VoidCallback onCloseViewAction;
   final String emailSubject;
 
-  final _imagePaths = Get.find<ImagePaths>();
+  const MinimizeComposerWidget({
-
-  MinimizeComposerWidget({
     super.key,
+    required this.imagePaths,
     required this.emailSubject,
     required this.onChangeDisplayModeAction,
     required this.onCloseViewAction,
@@ -40,7 +39,7 @@ class MinimizeComposerWidget extends StatelessWidget {
         child: Row(
           children: [
             TMailButtonWidget.fromIcon(
-              icon: _imagePaths.icCancel,
+              icon: imagePaths.icCancel,
               backgroundColor: Colors.transparent,
               tooltipMessage: AppLocalizations.of(context).saveAndClose,
               iconSize: MinimizeComposerWidgetStyle.iconSize,
@@ -50,7 +49,7 @@ class MinimizeComposerWidget extends StatelessWidget {
             ),
             const SizedBox(width: MinimizeComposerWidgetStyle.space),
             TMailButtonWidget.fromIcon(
-              icon: _imagePaths.icFullScreen,
+              icon: imagePaths.icFullScreen,
               backgroundColor: Colors.transparent,
               tooltipMessage: AppLocalizations.of(context).fullscreen,
               iconSize: MinimizeComposerWidgetStyle.iconSize,
@@ -60,7 +59,7 @@ class MinimizeComposerWidget extends StatelessWidget {
             ),
             const SizedBox(width: MinimizeComposerWidgetStyle.space),
             TMailButtonWidget.fromIcon(
-              icon: _imagePaths.icChevronUp,
+              icon: imagePaths.icChevronUp,
               backgroundColor: Colors.transparent,
               tooltipMessage: AppLocalizations.of(context).show,
               iconSize: MinimizeComposerWidgetStyle.iconSize,
@@ -69,6 +68,16 @@ class MinimizeComposerWidget extends StatelessWidget {
               onTapActionCallback: () => onChangeDisplayModeAction(ScreenDisplayMode.normal)
             ),
             const SizedBox(width: MinimizeComposerWidgetStyle.space),
+            TMailButtonWidget.fromIcon(
+              icon: imagePaths.icDoubleArrowDown,
+              backgroundColor: Colors.transparent,
+              tooltipMessage: AppLocalizations.of(context).hide,
+              iconSize: MinimizeComposerWidgetStyle.iconSize,
+              iconColor: MinimizeComposerWidgetStyle.iconColor,
+              padding: MinimizeComposerWidgetStyle.iconPadding,
+              onTapActionCallback: () => onChangeDisplayModeAction(ScreenDisplayMode.hidden),
+            ),
+            const SizedBox(width: MinimizeComposerWidgetStyle.space),
             Expanded(child: TitleComposerWidget(emailSubject: emailSubject)),
           ]
         )

lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart

@@ -826,7 +826,7 @@ class MailboxDashBoardController extends ReloadableController
   }
 
   void hideMailboxMenuWhenScreenSizeChange(BuildContext context) {
-    if (isDrawerOpen && responsiveUtils.isWebDesktop(context)) {
+    if (responsiveUtils.isWebDesktop(context) && isDrawerOpen) {
       WidgetsBinding.instance.addPostFrameCallback((_) {
         closeMailboxMenuDrawer();
       });