TF-933 Apply new design for SearchInputForm on Web Desktop

core/lib/presentation/views/quick_search/quick_search_input_form.dart

@@ -3,6 +3,7 @@ import 'dart:async';
 import 'dart:math';
 import 'dart:io';
 
+import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:flutter/foundation.dart';
 
 import 'package:flutter/material.dart';
@@ -85,6 +86,8 @@ class QuickSearchInputForm<T, R> extends FormField<String> {
         RecentSelectionCallback<R>? onRecentSelected,
         EdgeInsets? listActionPadding,
         bool hideSuggestionsBox: false,
+        BoxDecoration? decoration,
+        double? maxHeight,
       }) : assert(
   initialValue == null || textFieldConfiguration.controller == null),
         assert(minCharsForSuggestions >= 0),
@@ -146,6 +149,8 @@ class QuickSearchInputForm<T, R> extends FormField<String> {
               onRecentSelected: onRecentSelected,
               listActionPadding: listActionPadding,
               hideSuggestionsBox: hideSuggestionsBox,
+              decoration: decoration,
+              maxHeight: maxHeight,
             );
           });
 
@@ -505,6 +510,10 @@ class TypeAheadFieldQuickSearch<T, R> extends StatefulWidget {
   /// Padding button action
   final EdgeInsets? listActionPadding;
   final bool hideSuggestionsBox;
+  /// Box decoration search input
+  final BoxDecoration? decoration;
+  /// Max height search input
+  final double? maxHeight;
 
   /// Creates a [TypeAheadFieldQuickSearch]
   TypeAheadFieldQuickSearch(
@@ -545,6 +554,8 @@ class TypeAheadFieldQuickSearch<T, R> extends StatefulWidget {
         this.onRecentSelected,
         this.listActionPadding,
         this.hideSuggestionsBox = false,
+        this.decoration,
+        this.maxHeight,
       }) : assert(animationStart >= 0.0 && animationStart <= 1.0),
         assert(
         direction == AxisDirection.down || direction == AxisDirection.up),
@@ -631,6 +642,7 @@ class _TypeAheadFieldQuickSearchState<T, R> extends State<TypeAheadFieldQuickSea
           this._suggestionsBox!.close();
         }
       }
+      setState(() {});
     };
 
     this._effectiveFocusNode!.addListener(_focusNodeListener);
@@ -653,6 +665,7 @@ class _TypeAheadFieldQuickSearchState<T, R> extends State<TypeAheadFieldQuickSea
         if (this._effectiveFocusNode!.hasFocus) {
           this._suggestionsBox!.open();
         }
+        setState(() {});
       }
     });
   }
@@ -762,15 +775,13 @@ class _TypeAheadFieldQuickSearchState<T, R> extends State<TypeAheadFieldQuickSea
           offset: Offset(
               widget.suggestionsBoxDecoration.offsetX,
               _suggestionsBox!.direction == AxisDirection.down
-                  ? _suggestionsBox!.textBoxHeight +
+                  ? _suggestionsBox!.textBoxHeight + widget.suggestionsBoxVerticalOffset
-                  widget.suggestionsBoxVerticalOffset
                   : _suggestionsBox!.directionUpOffset),
           child: _suggestionsBox!.direction == AxisDirection.down
               ? suggestionsList
               : FractionalTranslation(
-            translation:
+                  translation: Offset(0.0, -1.0), // visually flips list to go up
-            Offset(0.0, -1.0), // visually flips list to go up
+                  child: suggestionsList,
-            child: suggestionsList,
           ),
         ),
       );
@@ -781,52 +792,72 @@ class _TypeAheadFieldQuickSearchState<T, R> extends State<TypeAheadFieldQuickSea
   Widget build(BuildContext context) {
     return CompositedTransformTarget(
       link: this._layerLink,
-      child: Row(
+      child: Container(
-        mainAxisAlignment: MainAxisAlignment.center,
+        decoration: this._suggestionsBox?.isOpened == true
-        children: [
+          ? const BoxDecoration(
-          if (widget.textFieldConfiguration.leftButton != null)
+              borderRadius: BorderRadius.only(
-            widget.textFieldConfiguration.leftButton!,
+                  topRight: Radius.circular(16),
-          Expanded(
+                  topLeft: Radius.circular(16)),
-            child: TextField(
+              boxShadow: [
-              focusNode: this._effectiveFocusNode,
+                BoxShadow(
-              controller: this._effectiveController,
+                    color: AppColor.colorShadowComposer,
-              decoration: widget.textFieldConfiguration.decoration,
+                    blurRadius: 32),
-              style: widget.textFieldConfiguration.style,
+                BoxShadow(
-              textAlign: widget.textFieldConfiguration.textAlign,
+                    color: AppColor.colorShadowComposer,
-              enabled: widget.textFieldConfiguration.enabled,
+                    blurRadius: 4),
-              keyboardType: widget.textFieldConfiguration.keyboardType,
+              ],
-              autofocus: widget.textFieldConfiguration.autofocus,
+              color: Colors.white)
-              inputFormatters: widget.textFieldConfiguration.inputFormatters,
+          : const BoxDecoration(
-              autocorrect: widget.textFieldConfiguration.autocorrect,
+              borderRadius: BorderRadius.all(Radius.circular(12)),
-              maxLines: widget.textFieldConfiguration.maxLines,
+              color: AppColor.colorBgSearchBar),
-              textAlignVertical: widget.textFieldConfiguration.textAlignVertical,
+        height: widget.maxHeight,
-              minLines: widget.textFieldConfiguration.minLines,
+        child: Row(
-              maxLength: widget.textFieldConfiguration.maxLength,
+          mainAxisAlignment: MainAxisAlignment.center,
-              maxLengthEnforcement: widget.textFieldConfiguration.maxLengthEnforcement,
+          children: [
-              obscureText: widget.textFieldConfiguration.obscureText,
+            if (widget.textFieldConfiguration.leftButton != null)
-              onChanged: widget.textFieldConfiguration.onChanged,
+              widget.textFieldConfiguration.leftButton!,
-              onSubmitted: widget.textFieldConfiguration.onSubmitted,
+            Expanded(
-              onEditingComplete: widget.textFieldConfiguration.onEditingComplete,
+              child: TextField(
-              onTap: widget.textFieldConfiguration.onTap,
+                focusNode: this._effectiveFocusNode,
-              scrollPadding: widget.textFieldConfiguration.scrollPadding,
+                controller: this._effectiveController,
-              textInputAction: widget.textFieldConfiguration.textInputAction,
+                decoration: widget.textFieldConfiguration.decoration,
-              textCapitalization: widget.textFieldConfiguration.textCapitalization,
+                style: widget.textFieldConfiguration.style,
-              keyboardAppearance: widget.textFieldConfiguration.keyboardAppearance,
+                textAlign: widget.textFieldConfiguration.textAlign,
-              cursorWidth: widget.textFieldConfiguration.cursorWidth,
+                enabled: widget.textFieldConfiguration.enabled,
-              cursorRadius: widget.textFieldConfiguration.cursorRadius,
+                keyboardType: widget.textFieldConfiguration.keyboardType,
-              cursorColor: widget.textFieldConfiguration.cursorColor,
+                autofocus: widget.textFieldConfiguration.autofocus,
-              textDirection: widget.textFieldConfiguration.textDirection,
+                inputFormatters: widget.textFieldConfiguration.inputFormatters,
-              enableInteractiveSelection:
+                autocorrect: widget.textFieldConfiguration.autocorrect,
-              widget.textFieldConfiguration.enableInteractiveSelection,
+                maxLines: widget.textFieldConfiguration.maxLines,
-              readOnly: widget.hideKeyboard,
+                textAlignVertical: widget.textFieldConfiguration.textAlignVertical,
+                minLines: widget.textFieldConfiguration.minLines,
+                maxLength: widget.textFieldConfiguration.maxLength,
+                maxLengthEnforcement: widget.textFieldConfiguration.maxLengthEnforcement,
+                obscureText: widget.textFieldConfiguration.obscureText,
+                onChanged: widget.textFieldConfiguration.onChanged,
+                onSubmitted: widget.textFieldConfiguration.onSubmitted,
+                onEditingComplete: widget.textFieldConfiguration.onEditingComplete,
+                onTap: widget.textFieldConfiguration.onTap,
+                scrollPadding: widget.textFieldConfiguration.scrollPadding,
+                textInputAction: widget.textFieldConfiguration.textInputAction,
+                textCapitalization: widget.textFieldConfiguration.textCapitalization,
+                keyboardAppearance: widget.textFieldConfiguration.keyboardAppearance,
+                cursorWidth: widget.textFieldConfiguration.cursorWidth,
+                cursorRadius: widget.textFieldConfiguration.cursorRadius,
+                cursorColor: widget.textFieldConfiguration.cursorColor,
+                textDirection: widget.textFieldConfiguration.textDirection,
+                enableInteractiveSelection:
+                widget.textFieldConfiguration.enableInteractiveSelection,
+                readOnly: widget.hideKeyboard,
+              ),
             ),
-          ),
+            if (widget.textFieldConfiguration.clearTextButton != null
-          if (widget.textFieldConfiguration.clearTextButton != null
+                && this._effectiveController?.text.isNotEmpty == true)
-              && this._effectiveController?.text.isNotEmpty == true)
+              widget.textFieldConfiguration.clearTextButton!,
-            widget.textFieldConfiguration.clearTextButton!,
+            if (widget.textFieldConfiguration.rightButton != null)
-          if (widget.textFieldConfiguration.rightButton != null)
+              widget.textFieldConfiguration.rightButton!,
-            widget.textFieldConfiguration.rightButton!,
+          ],
-        ],
+        ),
       ),
     );
   }
@@ -1066,12 +1097,12 @@ class _SuggestionsListState<T, R> extends State<_SuggestionsList<T, R>>
     final animationChild = widget.transitionBuilder != null
         ? widget.transitionBuilder!(context, child, this._animationController)
         : SizeTransition(
-      axisAlignment: -1.0,
+            axisAlignment: -1.0,
-      sizeFactor: CurvedAnimation(
+            sizeFactor: CurvedAnimation(
-          parent: this._animationController!,
+                parent: this._animationController!,
-          curve: Curves.fastOutSlowIn),
+                curve: Curves.fastOutSlowIn),
-      child: child,
+            child: child,
-    );
+          );
 
     BoxConstraints constraints;
     if (widget.decoration!.constraints == null) {
@@ -1088,10 +1119,16 @@ class _SuggestionsListState<T, R> extends State<_SuggestionsList<T, R>>
     }
 
     var container = Material(
-      elevation: widget.decoration!.elevation,
+      elevation: widget.suggestionsBox?.isOpened == true
+        ? 1
+        : widget.decoration!.elevation,
       color: widget.decoration!.color,
       shape: widget.decoration!.shape,
-      borderRadius: widget.decoration!.borderRadius,
+      borderRadius:  widget.suggestionsBox?.isOpened == true
+        ? const BorderRadius.only(
+            bottomLeft: Radius.circular(16),
+            bottomRight: Radius.circular(16))
+        : widget.decoration!.borderRadius,
       shadowColor: widget.decoration!.shadowColor,
       clipBehavior: widget.decoration!.clipBehavior,
       child: ConstrainedBox(
@@ -1258,7 +1295,7 @@ class _SuggestionsListState<T, R> extends State<_SuggestionsList<T, R>>
     if (widget.decoration!.hasScrollbar) {
       child = Scrollbar(
         controller: _scrollController,
-        child: child,
+        child: Container(child: child),
       );
     }
 

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

@@ -6,62 +6,42 @@ import 'package:flutter_svg/flutter_svg.dart';
 
 typedef OnOpenSearchViewAction = Function();
 
-class SearchBarView {
+class SearchBarView extends StatelessWidget {
-  OnOpenSearchViewAction? _onOpenSearchViewAction;
 
+  final OnOpenSearchViewAction? onOpenSearchViewAction;
   final ImagePaths _imagePaths;
+  final double? heightSearchBar;
+  final EdgeInsets? padding;
+  final EdgeInsets? margin;
+  final String? hintTextSearch;
+  final double? maxSizeWidth;
+  final Widget? rightButton;
+  final double? radius;
 
-  double? _heightSearchBar;
+  const SearchBarView(this._imagePaths, {
-  EdgeInsets? _padding;
+    this.heightSearchBar,
-  EdgeInsets? _margin;
+    this.padding,
-  String? _hintTextSearch;
+    this.margin,
-  double? _maxSizeWidth;
+    this.hintTextSearch,
-  Widget? _rightButton;
+    this.maxSizeWidth,
+    this.rightButton,
+    this.onOpenSearchViewAction,
+    this.radius,
+  });
 
-
+  Widget build(BuildContext context) {
-  SearchBarView(this._imagePaths);
-
-  void addOnOpenSearchViewAction(OnOpenSearchViewAction onOpenSearchViewAction) {
-    _onOpenSearchViewAction = onOpenSearchViewAction;
-  }
-
-  void setHeightSearchBar(double heightSearchBar) {
-    _heightSearchBar = heightSearchBar;
-  }
-
-  void addPadding(EdgeInsets padding) {
-    _padding = padding;
-  }
-
-  void addRightButton(Widget rightButton) {
-    _rightButton = rightButton;
-  }
-
-  void addMargin(EdgeInsets margin) {
-    _margin = margin;
-  }
-
-  void hintTextSearch(String text) {
-    _hintTextSearch = text;
-  }
-
-  void maxSizeWidth(double? size) {
-    _maxSizeWidth = size;
-  }
-
-  Widget build() {
     return Container(
         key: Key('search_bar_widget'),
         alignment: Alignment.center,
-        height: _heightSearchBar ?? 40,
+        height: heightSearchBar ?? 40,
-        width: _maxSizeWidth ?? double.infinity,
+        width: maxSizeWidth ?? double.infinity,
         decoration: BoxDecoration(
-            borderRadius: BorderRadius.circular(10),
+            borderRadius: BorderRadius.circular(radius ?? 10),
             color: AppColor.colorBgSearchBar),
-        padding: _padding ?? EdgeInsets.zero,
+        padding: padding ?? EdgeInsets.zero,
-        margin: _margin ?? EdgeInsets.zero,
+        margin: margin ?? EdgeInsets.zero,
         child: InkWell(
-          onTap: () => _onOpenSearchViewAction?.call(),
+          onTap: onOpenSearchViewAction,
           mouseCursor: SystemMouseCursors.text,
           child: Row(
             mainAxisAlignment: MainAxisAlignment.center,
@@ -71,16 +51,24 @@ class SearchBarView {
                   splashRadius: 15,
                   minSize: 40,
                   iconPadding: EdgeInsets.zero,
-                  icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 16, height: 16, fit: BoxFit.fill),
+                  icon: SvgPicture.asset(
-                  onTap: () => _onOpenSearchViewAction?.call()),
+                      _imagePaths.icSearchBar,
+                      width: 16,
+                      height: 16,
+                      fit: BoxFit.fill),
+                  onTap: onOpenSearchViewAction),
               Expanded(
                 child: Text(
-                    _hintTextSearch ?? '',
+                    hintTextSearch ?? '',
                     maxLines: 1,
-                    style: TextStyle(fontSize: kIsWeb ? 15 : 17, color: AppColor.colorHintSearchBar)),
+                    overflow: CommonTextStyle.defaultTextOverFlow,
+                    softWrap: CommonTextStyle.defaultSoftWrap,
+                    style: TextStyle(
+                        fontSize: kIsWeb ? 15 : 17,
+                        color: AppColor.colorHintSearchBar)),
               ),
-              if(_rightButton != null)
+              if(rightButton != null)
-                _rightButton!
+                rightButton!
             ]
           ),
         ),

lib/features/destination_picker/presentation/destination_picker_view.dart

@@ -232,10 +232,10 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
             left: _responsiveUtils.isLandscapeMobile(context) &&
                 !BuildUtils.isWeb ? 0 : 16,
             right: 16),
-        child: (SearchBarView(_imagePaths)
+        child: SearchBarView(
-            ..hintTextSearch(AppLocalizations.of(context).hint_search_mailboxes)
+            _imagePaths,
-            ..addOnOpenSearchViewAction(() => controller.enableSearch()))
+            hintTextSearch: AppLocalizations.of(context).hint_search_mailboxes,
-          .build());
+            onOpenSearchViewAction: controller.enableSearch));
   }
 
   Widget _buildBodyDestinationPicker(BuildContext context, MailboxActions? actions) {

lib/features/mailbox/presentation/mailbox_view.dart

@@ -187,10 +187,10 @@ class MailboxView extends GetWidget<MailboxController> {
           bottom: 16,
           left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
           right: 16),
-      child: (SearchBarView(_imagePaths)
+      child: SearchBarView(
-          ..hintTextSearch(AppLocalizations.of(context).hint_search_mailboxes)
+        _imagePaths,
-          ..addOnOpenSearchViewAction(() => controller.enableSearch()))
+        hintTextSearch: AppLocalizations.of(context).hint_search_mailboxes,
-        .build());
+        onOpenSearchViewAction: controller.enableSearch));
   }
 
   Widget _buildLoadingView() {

lib/features/mailbox/presentation/mailbox_view_web.dart

@@ -130,10 +130,10 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu
   Widget _buildSearchBarWidget(BuildContext context) {
     return Padding(
         padding: EdgeInsets.only(top: 16, bottom: 16, right: 4, left: _responsiveUtils.isDesktop(context) ? 0 : 12),
-        child: (SearchBarView(_imagePaths)
+        child: SearchBarView(
-            ..hintTextSearch(AppLocalizations.of(context).hint_search_mailboxes)
+            _imagePaths,
-            ..addOnOpenSearchViewAction(() => controller.enableSearch()))
+            hintTextSearch: AppLocalizations.of(context).hint_search_mailboxes,
-          .build());
+            onOpenSearchViewAction: controller.enableSearch));
   }
 
   Widget _buildLoadingView() {

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart

@@ -8,7 +8,6 @@ import 'package:tmail_ui_user/features/composer/presentation/composer_view_web.d
 import 'package:tmail_ui_user/features/email/presentation/email_view.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/state/mark_as_mailbox_read_state.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_view_web.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/domain/model/recent_search.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/action/dashboard_action.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/base_mailbox_dashboard_view.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/search_controller.dart';
@@ -18,8 +17,7 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/sear
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_overlay.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/icon_open_advanced_search_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/download/download_task_item_widget.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/email_quick_search_item_tile_widget.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/search_input_form_widget.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/recent_search_item_tile_widget.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/extensions/vacation_response_extension.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/vacation/widgets/vacation_notification_message_widget.dart';
 import 'package:tmail_ui_user/features/thread/domain/model/filter_message_option.dart';
@@ -63,7 +61,9 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
                     Container(
                       width: responsiveUtils.defaultSizeMenu,
                       color: Colors.white,
-                      padding: const EdgeInsets.only(top: 25, bottom: 25, left: 28),
+                      padding: const EdgeInsets.only(left: 28),
+                      alignment: Alignment.center,
+                      height: 80,
                       child: Row(children: [
                         (SloganBuilder(arrangedByHorizontal: true)
                             ..setSloganText(AppLocalizations.of(context).app_name)
@@ -88,7 +88,9 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
                     ),
                     Expanded(child: Container(
                       color: Colors.white,
-                      padding: const EdgeInsets.only(right: 10, top: 16, bottom: 10),
+                      alignment: Alignment.center,
+                      padding: const EdgeInsets.only(right: 10),
+                      height: 80,
                       child: _buildRightHeader(context)))
                   ]),
                   Expanded(child: Row(
@@ -176,44 +178,49 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
   }
 
   Widget _buildRightHeader(BuildContext context) {
-    return Row(children: [
+    return LayoutBuilder(builder: (context, constraint) {
-      Obx(() => !searchController.isSearchActive() ? const Spacer() : const SizedBox.shrink()),
+      return Row(children: [
-      Obx(() {
+        Container(
-        if (searchController.isSearchActive()) {
+          width: constraint.maxWidth / 2,
-          return Expanded(child: _buildSearchForm(context));
+          height: 52,
-        } else {
+          color: Colors.transparent,
-          return PortalTarget(
+          child: Obx(() {
-            visible: searchController.isAdvancedSearchViewOpen.isTrue,
+            if (searchController.isSearchActive()) {
-            portalFollower: GestureDetector(
+              return SearchInputFormWidget(
-                behavior: HitTestBehavior.opaque,
+                  maxWidth: constraint.maxWidth / 2,
-                onTap: () => searchController.selectOpenAdvanceSearch()),
+                  dashBoardController: controller,
-            child: PortalTarget(
+                  imagePaths: imagePaths);
-              visible: searchController.isAdvancedSearchViewOpen.isTrue,
+            } else {
-              anchor: const Aligned(
+              return PortalTarget(
-                follower: Alignment.topRight,
+                visible: searchController.isAdvancedSearchViewOpen.isTrue,
-                target: Alignment.bottomRight,
+                portalFollower: GestureDetector(
-                widthFactor: 3,
+                    behavior: HitTestBehavior.opaque,
-                backup: Aligned(
+                    onTap: () => searchController.selectOpenAdvanceSearch()),
-                  follower: Alignment.topRight,
+                child: PortalTarget(
-                  target: Alignment.bottomRight,
+                  visible: searchController.isAdvancedSearchViewOpen.isTrue,
-                  widthFactor: 3,
+                  anchor: const Aligned(
+                    follower: Alignment.topRight,
+                    target: Alignment.bottomRight,
+                    widthFactor: 1,
+                    backup: Aligned(
+                      follower: Alignment.topRight,
+                      target: Alignment.bottomRight,
+                      widthFactor: 1,
+                    ),
+                  ),
+                  portalFollower: AdvancedSearchFilterOverlay(maxWidth: constraint.maxWidth / 2),
+                  child: SearchBarView(imagePaths,
+                      hintTextSearch: AppLocalizations.of(context).search_emails,
+                      onOpenSearchViewAction: controller.searchController.enableSearch,
+                      heightSearchBar: 52,
+                      radius: 12,
+                      rightButton: IconOpenAdvancedSearchWidget(context)),
                 ),
-              ),
+              );
-              portalFollower: responsiveUtils.isMobile(context)
+            }
-                  ? const SizedBox.shrink()
+          })),
-                  : const AdvancedSearchFilterOverlay(),
+        const Spacer(),
-              child: (SearchBarView(imagePaths)
+        Obx(() => (AvatarBuilder()
-                  ..hintTextSearch(AppLocalizations.of(context).search_emails)
-                  ..maxSizeWidth(240)
-                  ..addOnOpenSearchViewAction(() => searchController.enableSearch())
-                  ..addRightButton(IconOpenAdvancedSearchWidget(context)))
-                .build(),
-            ),
-          );
-        }
-      }),
-      Obx(() => !searchController.isSearchActive() ? const SizedBox(width: 16) : const SizedBox.shrink()),
-      Obx(() => (AvatarBuilder()
           ..text(controller.userProfile.value?.getAvatarText() ?? '')
           ..backgroundColor(Colors.white)
           ..textColor(Colors.black)
@@ -233,9 +240,10 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
               color: AppColor.colorShadowBgContentEmail,
               spreadRadius: 1, blurRadius: 1, offset: Offset(0, 0.5))])
           ..size(48))
-        .build()),
+            .build()),
-      const SizedBox(width: 16)
+        const SizedBox(width: 16)
-    ]);
+      ]);
+    });
   }
 
   Widget _buildListButtonTopBar(BuildContext context) {
@@ -420,197 +428,6 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
         controller.selectedMailbox.value?.isDrafts == true;
   }
 
-  Widget _buildSearchForm(BuildContext context) {
-    return Row(
-        children: [
-          buildIconWeb(
-              icon: SvgPicture.asset(
-                  imagePaths.icBack,
-                  color: AppColor.colorTextButton,
-                  fit: BoxFit.fill),
-              onTap: () => controller.dispatchAction(DisableSearchEmailAction())),
-          Expanded(child: Container(
-            decoration: const BoxDecoration(
-              borderRadius: BorderRadius.all(Radius.circular(10)),
-              color: AppColor.colorBgSearchBar),
-            height: 45,
-            child: PortalTarget(
-              visible: searchController.isAdvancedSearchViewOpen.isTrue,
-              portalFollower: GestureDetector(
-                  behavior: HitTestBehavior.opaque,
-                  onTap: () => searchController.selectOpenAdvanceSearch()),
-              child: PortalTarget(
-                visible: searchController.isAdvancedSearchViewOpen.isTrue,
-                anchor: const Aligned(
-                  follower: Alignment.topLeft,
-                  target: Alignment.bottomLeft,
-                  widthFactor: 1,
-                  backup: Aligned(
-                    follower: Alignment.topLeft,
-                    target: Alignment.bottomLeft,
-                    widthFactor: 1,
-                  ),
-                ),
-                portalFollower: responsiveUtils.isMobile(context)
-                    ? const SizedBox.shrink()
-                    : const AdvancedSearchFilterOverlay(),
-                child: QuickSearchInputForm<PresentationEmail, RecentSearch>(
-                    textFieldConfiguration: QuickSearchTextFieldConfiguration(
-                        controller: searchController.searchInputController,
-                        autofocus: true,
-                        enabled: searchController.isAdvancedSearchViewOpen.isFalse,
-                        focusNode: searchController.searchFocus,
-                        textInputAction: TextInputAction.done,
-                        onSubmitted: (keyword) {
-                          if (keyword.trim().isNotEmpty) {
-                            searchController.saveRecentSearch(RecentSearch.now(keyword));
-                          }
-                          controller.searchEmail(context, keyword);
-                        },
-                        onChanged: (query) {
-                          log('MailboxDashBoardView::_buildSearchForm(): onChanged: $query');
-                          searchController.onChangeTextSearch(query);
-                        },
-                        decoration: InputDecoration(
-                            border: InputBorder.none,
-                            focusedBorder: InputBorder.none,
-                            enabledBorder: InputBorder.none,
-                            contentPadding: EdgeInsets.zero,
-                            hintText: AppLocalizations.of(context).search_mail,
-                            hintStyle: const TextStyle(
-                                color: AppColor.colorHintSearchBar,
-                                fontSize: 17.0),
-                            labelStyle: const TextStyle(
-                                color: AppColor.colorHintSearchBar,
-                                fontSize: 17.0)
-                        ),
-                        leftButton: buildIconWeb(
-                            icon: SvgPicture.asset(
-                                imagePaths.icSearchBar,
-                                width: 16,
-                                height: 16,
-                                fit: BoxFit.fill),
-                            onTap: () {
-                              final keyword = searchController.searchInputController.text;
-                              if (keyword.trim().isNotEmpty) {
-                                searchController.saveRecentSearch(RecentSearch.now(keyword));
-                              }
-                              controller.searchEmail(context, keyword);
-                            }),
-                        clearTextButton: buildIconWeb(
-                            icon: SvgPicture.asset(
-                                imagePaths.icClearTextSearch,
-                                width: 16,
-                                height: 16,
-                                fit: BoxFit.fill),
-                            onTap: () {
-                              searchController.clearTextSearch();
-                            }),
-                        rightButton: IconOpenAdvancedSearchWidget(context)
-                    ),
-                    suggestionsBoxDecoration: QuickSearchSuggestionsBoxDecoration(
-                      color: Colors.white,
-                      borderRadius: const BorderRadius.all(Radius.circular(16)),
-                      constraints: BoxConstraints(
-                          maxWidth: responsiveUtils.isDesktop(context)
-                              ? 556
-                              : double.infinity),
-                    ),
-                    debounceDuration: const Duration(milliseconds: 500),
-                    listActionButton: const [
-                      QuickSearchFilter.hasAttachment,
-                      QuickSearchFilter.last7Days,
-                      QuickSearchFilter.fromMe,
-                    ],
-                    actionButtonBuilder: (context, filterAction) {
-                      if (filterAction is QuickSearchFilter) {
-                        return buildQuickSearchFilterButton(context, filterAction);
-                      }
-                      return const SizedBox.shrink();
-                    },
-                    buttonActionCallback: (filterAction) {
-                      if (filterAction is QuickSearchFilter) {
-                        controller.selectQuickSearchFilter(
-                            quickSearchFilter: filterAction,
-                            fromSuggestionBox: true,
-                        );
-                      }
-                    },
-                    listActionPadding: const EdgeInsets.only(
-                        left: 24, right: 24, top: 20, bottom: 12),
-                    titleHeaderRecent: Padding(
-                      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
-                      child: Text(AppLocalizations.of(context).recent,
-                          style: const TextStyle(fontSize: 13.0,
-                              color: AppColor.colorTextButtonHeaderThread,
-                              fontWeight: FontWeight.w500)
-                      )
-                    ),
-                    buttonShowAllResult: (context, keyword) {
-                      if (keyword is String) {
-                        return InkWell(
-                          onTap: () {
-                            if (keyword.trim().isNotEmpty) {
-                              searchController.saveRecentSearch(RecentSearch.now(keyword));
-                            }
-                            controller.searchEmail(context, keyword);
-                          },
-                          child: Padding(
-                              padding: const EdgeInsets.symmetric(
-                                  horizontal: 24,
-                                  vertical: 14),
-                              child: Row(children: [
-                                Text(AppLocalizations.of(context).showingResultsFor,
-                                    style: const TextStyle(fontSize: 13.0,
-                                        color: AppColor.colorTextButtonHeaderThread,
-                                        fontWeight: FontWeight.w500)
-                                ),
-                                const SizedBox(width: 4),
-                                Expanded(child: Text('"$keyword"',
-                                    style: const TextStyle(
-                                        fontSize: 13.0,
-                                        color: Colors.black,
-                                        fontWeight: FontWeight.w500)))
-                              ])
-                          ),
-                        );
-                      } else {
-                        return const SizedBox.shrink();
-                      }
-                    },
-                    loadingBuilder: (context) => Padding(
-                      padding: const EdgeInsets.only(bottom: 16),
-                      child: loadingWidget,
-                    ),
-                    fetchRecentActionCallback: (pattern) async {
-                      return searchController.getAllRecentSearchAction(pattern);
-                    },
-                    itemRecentBuilder: (context, recent) {
-                      return RecentSearchItemTileWidget(recent);
-                    },
-                    onRecentSelected: (recent) {
-                      searchController.searchInputController.text = recent.value;
-                      controller.searchEmail(context, recent.value);
-                    },
-                    suggestionsCallback: (pattern) async {
-                      return controller.quickSearchEmails();
-                    },
-                    itemBuilder: (context, email) {
-                      return EmailQuickSearchItemTileWidget(
-                          email, controller.selectedMailbox.value);
-                    },
-                    onSuggestionSelected: (presentationEmail) async {
-                      controller.dispatchAction(
-                          OpenEmailDetailedAction(context, presentationEmail));
-                    }),
-              ),
-            ),
-          )),
-          const SizedBox(width: 16),
-        ]
-    );
-  }
-
   Widget _buildMarkAsMailboxReadLoading(BuildContext context) {
     return Obx(() {
       final viewState = controller.viewStateMarkAsReadMailbox.value;

lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_overlay.dart

@@ -7,7 +7,12 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/ad
 
 class AdvancedSearchFilterOverlay extends StatelessWidget {
 
-  const AdvancedSearchFilterOverlay({Key? key}) : super(key: key);
+  final double? maxWidth;
+
+  const AdvancedSearchFilterOverlay({
+    Key? key,
+    this.maxWidth
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -19,10 +24,10 @@ class AdvancedSearchFilterOverlay extends StatelessWidget {
         padding: const EdgeInsets.only(top: 8, bottom: 16),
         child: Container(
           constraints: BoxConstraints(
-            minWidth: 660,
+            minWidth: maxWidth ?? 660,
             maxHeight: _getHeightOverlay(context, responsiveUtils),
           ),
-          width: 660,
+          width: maxWidth ?? 660,
           height: _getHeightOverlay(context, responsiveUtils),
           padding: responsiveUtils.landscapeTabletSupported(context)
             ? EdgeInsets.zero

lib/features/mailbox_dashboard/presentation/widgets/search_input_form_widget.dart

@@ -0,0 +1,241 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_portal/flutter_portal.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:model/email/presentation_email.dart';
+import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/domain/model/recent_search.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/action/dashboard_action.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/quick_search_filter.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_overlay.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/icon_open_advanced_search_widget.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/email_quick_search_item_tile_widget.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/recent_search_item_tile_widget.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class SearchInputFormWidget extends StatelessWidget with AppLoaderMixin {
+
+  final MailboxDashBoardController dashBoardController;
+  final ImagePaths imagePaths;
+  final double maxWidth;
+
+  const SearchInputFormWidget({
+    Key? key,
+    required this.dashBoardController,
+    required this.imagePaths,
+    required this.maxWidth,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final controller = dashBoardController.searchController;
+
+    return PortalTarget(
+      visible: controller.isAdvancedSearchViewOpen.isTrue,
+      portalFollower: GestureDetector(
+          behavior: HitTestBehavior.opaque,
+          onTap: () => controller.selectOpenAdvanceSearch()),
+      child: PortalTarget(
+        visible: controller.isAdvancedSearchViewOpen.isTrue,
+        anchor: const Aligned(
+          follower: Alignment.topRight,
+          target: Alignment.bottomRight,
+          widthFactor: 1,
+          backup: Aligned(
+            follower: Alignment.topRight,
+            target: Alignment.bottomRight,
+            widthFactor: 1,
+          ),
+        ),
+        portalFollower: AdvancedSearchFilterOverlay(maxWidth: maxWidth),
+        child: QuickSearchInputForm<PresentationEmail, RecentSearch>(
+            maxHeight: 52,
+            suggestionsBoxVerticalOffset: 0.0,
+            textFieldConfiguration: QuickSearchTextFieldConfiguration(
+                controller: controller.searchInputController,
+                autofocus: true,
+                enabled: controller.isAdvancedSearchViewOpen.isFalse,
+                focusNode: controller.searchFocus,
+                textInputAction: TextInputAction.done,
+                onSubmitted: (keyword) {
+                  final query = keyword.trim();
+                  if (query.isNotEmpty) {
+                    controller.saveRecentSearch(RecentSearch.now(query));
+                    dashBoardController.searchEmail(context, query);
+                  }
+                },
+                onChanged: controller.onChangeTextSearch,
+                decoration: InputDecoration(
+                    border: InputBorder.none,
+                    focusedBorder: InputBorder.none,
+                    enabledBorder: InputBorder.none,
+                    contentPadding: EdgeInsets.zero,
+                    hintText: AppLocalizations.of(context).search_emails,
+                    hintStyle: const TextStyle(
+                        color: AppColor.colorHintSearchBar,
+                        fontSize: 16.0),
+                    labelStyle: const TextStyle(
+                        color: Colors.black,
+                        fontSize: 16.0)
+                ),
+                leftButton: buildIconWeb(
+                    icon: SvgPicture.asset(
+                        imagePaths.icSearchBar,
+                        width: 16,
+                        height: 16,
+                        fit: BoxFit.fill),
+                    onTap: () {
+                      final keyword = controller.searchInputController.text.trim();
+                      if (keyword.isNotEmpty) {
+                        controller.saveRecentSearch(RecentSearch.now(keyword));
+                        dashBoardController.searchEmail(context, keyword);
+                      }
+                    }),
+                clearTextButton: buildIconWeb(
+                    icon: SvgPicture.asset(
+                        imagePaths.icClearTextSearch,
+                        width: 16,
+                        height: 16,
+                        fit: BoxFit.fill),
+                    onTap: controller.clearTextSearch),
+                rightButton: IconOpenAdvancedSearchWidget(context)
+            ),
+            suggestionsBoxDecoration: QuickSearchSuggestionsBoxDecoration(
+                color: Colors.white,
+                borderRadius: const BorderRadius.all(Radius.circular(16)),
+                constraints: BoxConstraints(maxWidth: maxWidth)),
+            debounceDuration: const Duration(milliseconds: 500),
+            listActionButton: QuickSearchFilter.values,
+            actionButtonBuilder: (context, filterAction) {
+              if (filterAction is QuickSearchFilter) {
+                return buildListButtonForQuickSearchForm(context, filterAction);
+              } else {
+                return const SizedBox.shrink();
+              }
+            },
+            buttonActionCallback: (filterAction) {
+              if (filterAction is QuickSearchFilter) {
+                dashBoardController.selectQuickSearchFilter(
+                  quickSearchFilter: filterAction,
+                  fromSuggestionBox: true,
+                );
+              }
+            },
+            listActionPadding: const EdgeInsets.only(
+                left: 12,
+                right: 12,
+                top: 12,
+                bottom: 6),
+            titleHeaderRecent: Padding(
+                padding: const EdgeInsets.only(
+                    left: 12,
+                    right: 12,
+                    bottom: 8,
+                    top: 12),
+                child: Text(AppLocalizations.of(context).recent,
+                    style: const TextStyle(
+                        fontSize: 13.0,
+                        color: AppColor.colorTextButtonHeaderThread,
+                        fontWeight: FontWeight.w500)
+                )
+            ),
+            buttonShowAllResult: (context, keyword) {
+              if (keyword is String) {
+                return InkWell(
+                  onTap: () {
+                    final query = keyword.trim();
+                    if (query.isNotEmpty) {
+                      controller.saveRecentSearch(RecentSearch.now(query));
+                      dashBoardController.searchEmail(context, query);
+                    }
+                  },
+                  child: Padding(
+                      padding: const EdgeInsets.all(12),
+                      child: Row(children: [
+                        Text(AppLocalizations.of(context).showingResultsFor,
+                            style: const TextStyle(
+                                fontSize: 13.0,
+                                color: AppColor.colorTextButtonHeaderThread,
+                                fontWeight: FontWeight.w500)),
+                        const SizedBox(width: 4),
+                        Expanded(child: Text('"$keyword"',
+                            style: const TextStyle(
+                                fontSize: 13.0,
+                                color: Colors.black,
+                                fontWeight: FontWeight.w500)))
+                      ])
+                  ),
+                );
+              } else {
+                return const SizedBox.shrink();
+              }
+            },
+            loadingBuilder: (context) => Padding(
+                padding: const EdgeInsets.only(bottom: 16),
+                child: loadingWidget),
+            fetchRecentActionCallback: controller.getAllRecentSearchAction,
+            itemRecentBuilder: (context, recent) =>
+                RecentSearchItemTileWidget(recent),
+            onRecentSelected: (recent) {
+              controller.searchInputController.text = recent.value;
+              dashBoardController.searchEmail(context, recent.value);
+            },
+            suggestionsCallback: (pattern) =>
+                dashBoardController.quickSearchEmails(),
+            itemBuilder: (context, email) =>
+                EmailQuickSearchItemTileWidget(email, dashBoardController.selectedMailbox.value),
+            onSuggestionSelected: (presentationEmail) =>
+                dashBoardController.dispatchAction(
+                    OpenEmailDetailedAction
+                      (context,
+                        presentationEmail))),
+      ),
+    );
+  }
+
+  Widget buildListButtonForQuickSearchForm(BuildContext context, QuickSearchFilter filter) {
+    final controller = dashBoardController.searchController;
+
+    return Obx(() {
+      final isFilterSelected = dashBoardController.checkQuickSearchFilterSelected(
+          quickSearchFilter: filter);
+
+      return Chip(
+        labelPadding: const EdgeInsets.only(
+            top: 2,
+            bottom: 2,
+            right: 10),
+        label: Text(
+          filter.getTitle(
+              context,
+              receiveTimeType: controller.emailReceiveTimeType.value),
+          maxLines: 1,
+          overflow: CommonTextStyle.defaultTextOverFlow,
+          softWrap: CommonTextStyle.defaultSoftWrap,
+          style: filter.getTextStyle(
+              quickSearchFilterSelected: isFilterSelected),
+        ),
+        avatar: SvgPicture.asset(
+            filter.getIcon(
+                imagePaths,
+                quickSearchFilterSelected: isFilterSelected),
+            width: 16,
+            height: 16,
+            fit: BoxFit.fill),
+        labelStyle: filter.getTextStyle(
+            quickSearchFilterSelected: isFilterSelected),
+        backgroundColor: filter.getBackgroundColor(
+            quickSearchFilterSelected: isFilterSelected),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(10),
+          side: BorderSide(
+              color: filter.getBackgroundColor(
+                  quickSearchFilterSelected: isFilterSelected)),
+        ),
+      );
+    });
+  }
+}

lib/features/thread/presentation/thread_view.dart

@@ -176,11 +176,12 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin,
         portalFollower: _responsiveUtils.isMobile(context)
             ? const SizedBox.shrink()
             : const AdvancedSearchFilterOverlay(),
-        child: (SearchBarView(_imagePaths)
+        child: SearchBarView(
-            ..hintTextSearch(AppLocalizations.of(context).search_emails)
+          _imagePaths,
-            ..addOnOpenSearchViewAction(() => controller.enableSearch(context))
+          hintTextSearch: AppLocalizations.of(context).search_emails,
-            ..addRightButton(IconOpenAdvancedSearchWidget(context)))
+          onOpenSearchViewAction: () => controller.enableSearch(context),
-          .build(),
+          rightButton: IconOpenAdvancedSearchWidget(context),
+        ),
       ),
     );
   }