create child components for advanced_search_filter_view

env.file

@@ -1,3 +1,3 @@
-SERVER_URL=http://localhost
+SERVER_URL=https://jmap.upn.integration-open-paas.org
 DOMAIN_REDIRECT_URL=http://localhost:3000
 WEB_OIDC_CLIENT_ID=teammail-web

lib/features/login/domain/usecases/check_oidc_is_available_interactor.dart

@@ -13,7 +13,7 @@ class CheckOIDCIsAvailableInteractor {
     try {
       final result = await _oidcRepository.checkOIDCIsAvailable(oidcRequest);
       log('CheckOIDCIsAvailableInteractor::execute(): result: $result');
-      return Right<Failure, Success>(CheckOIDCIsAvailableSuccess(result));
+      return Left<Failure, Success>(CheckOIDCIsAvailableFailure('aaaa'));
     } catch (e) {
       log('CheckOIDCIsAvailableInteractor::execute(): ERROR: $e');
       return Left<Failure, Success>(CheckOIDCIsAvailableFailure(e));

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

@@ -73,11 +73,6 @@ class AdvancedFilterController extends BaseController {
     hasAttachment.value = _searchEmailFilter.hasAttachment;
   }
 
-  @override
-  void onInit() {
-    super.onInit();
-    // TODO: implement onDone
-  }
   @override
   void onDone() {
     // TODO: implement onDone

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

@@ -1,5 +1,4 @@
 import 'package:core/core.dart';
-import 'package:dropdown_button2/dropdown_button2.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
@@ -7,8 +6,8 @@ import 'package:tmail_ui_user/features/base/mixin/popup_context_menu_action_mixi
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/advanced_filter_controller.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/advanced_search_filter.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/email_receive_time_type.dart';
-import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_form_bottom_view.dart';
-import 'package:tmail_ui_user/main/routes/route_navigation.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/drop_down_button_filter_widget.dart';
 
 class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
     with PopupContextMenuActionMixin {
@@ -16,8 +15,8 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
     Key? key,
   }) : super(key: key);
 
-  final ImagePaths imagePaths = Get.find<ImagePaths>();
+  final ImagePaths _imagePaths = Get.find<ImagePaths>();
-  final ResponsiveUtils responsiveUtils = Get.find<ResponsiveUtils>();
+  final ResponsiveUtils _responsiveUtils = Get.find<ResponsiveUtils>();
 
   @override
   Widget build(BuildContext context) {
@@ -57,46 +56,19 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
             advancedSearchFilterField: AdvancedSearchFilterField.mailBox,
             isSelectFormList: true,
           ),
-          // _buildFilterField(
+          _buildFilterField(
-          //   textEditingController: controller.dateFilterInputController,
+            textEditingController: controller.dateFilterInputController,
-          //   context: context,
+            context: context,
-          //   advancedSearchFilterField: AdvancedSearchFilterField.date,
+            advancedSearchFilterField: AdvancedSearchFilterField.date,
-          //   isSelectFormList: true,
+            isSelectFormList: true,
-          //   onTap: () {
+            onTap: () {
-          //     openContextMenuAction(
+              openContextMenuAction(
-          //       context,
+                context,
-          //       _buildEmailReceiveTimeTypeActionTiles(context),
+                _buildEmailReceiveTimeTypeActionTiles(context),
-          //     );
+              );
-          //   },
+            },
-          // ),
-          _buildEmailReceiveTimeTypeDropDownButton(),
-          _buildCheckboxHasAttachment(context),
-          Row(
-            children: [
-              Expanded(
-                child: _buildButton(
-                  onAction: () {
-                    controller.cleanSearchFilter();
-                  },
-                  colorButton: AppColor.primaryColor.withOpacity(0.14),
-                  colorText: AppColor.primaryColor,
-                  text: AppLocalizations.of(context).clearFilter,
-                ),
-              ),
-              const SizedBox(width: 12),
-              Expanded(
-                child: _buildButton(
-                  onAction: () {
-                    controller.applyAdvancedSearchFilter(context);
-                    popBack();
-                  },
-                  colorButton: AppColor.primaryColor,
-                  colorText: AppColor.primaryLightColor,
-                  text: AppLocalizations.of(context).search,
-                ),
-              ),
-            ],
           ),
+         const AdvancedSearchFilterFormBottomView()
         ],
       ),
     );
@@ -107,7 +79,21 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
         .map(
           (e) => Material(
             child: PopupMenuItem(
-              child: Text(e.getTitle(context)),
+              child: Row(children: [
+                const SizedBox(width: 12),
+                Expanded(
+                    child: Text(e.getTitle(context),
+                        style: const TextStyle(
+                            fontSize: 15,
+                            color: Colors.black,
+                            fontWeight: FontWeight.w500))),
+                if (e ==
+                    controller.dateFilterSelectedFormAdvancedSearch.value) ...[
+                  const SizedBox(width: 12),
+                  SvgPicture.asset(_imagePaths.icFilterSelected,
+                      width: 16, height: 16, fit: BoxFit.fill),
+                ]
+              ]),
               onTap: () {
                 controller.dateFilterSelectedFormAdvancedSearch.value = e;
                 controller.dateFilterInputController.text = e.getTitle(context);
@@ -127,7 +113,7 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
   }) {
     final child = [
       SizedBox(
-        width: responsiveUtils.isMobile(context) ? null : 112,
+        width: _responsiveUtils.isMobile(context) ? null : 112,
         child: Text(
           advancedSearchFilterField.getTitle(context),
           style: const TextStyle(
@@ -137,7 +123,7 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
         ),
       ),
       const Padding(padding: EdgeInsets.all(4)),
-      responsiveUtils.isMobile(context)
+      _responsiveUtils.isMobile(context)
           ? _buildTextField(
               isSelectFormList: isSelectFormList,
               onTap: onTap,
@@ -146,7 +132,7 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
               textEditingController: textEditingController,
             )
           : Expanded(
-              child: _buildTextField(
+              child: _buildTextFieldFilterForWeb(
                 isSelectFormList: isSelectFormList,
                 onTap: onTap,
                 context: context,
@@ -157,147 +143,75 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
     ];
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 8),
-      child: responsiveUtils.isMobile(context)
+      child: _responsiveUtils.isMobile(context)
           ? Column(
               mainAxisAlignment: MainAxisAlignment.start,
               crossAxisAlignment: CrossAxisAlignment.start,
               mainAxisSize: MainAxisSize.min,
               children: child,
             )
-          : Row(children: child),
+          : SizedBox(height: 44, child: Row(children: child)),
     );
   }
 
+  Widget _buildTextFieldFilterForWeb({
+    required BuildContext context,
+    required AdvancedSearchFilterField advancedSearchFilterField,
+    required TextEditingController textEditingController,
+    VoidCallback? onTap,
+    bool isSelectFormList = false,
+  }) {
+    switch (advancedSearchFilterField) {
+      case AdvancedSearchFilterField.date:
+        return const DateDropDownButton();
+      default:
+        return _buildTextField(
+          isSelectFormList: isSelectFormList,
+          onTap: onTap,
+          context: context,
+          advancedSearchFilterField: advancedSearchFilterField,
+          textEditingController: textEditingController,
+        );
+    }
+  }
+
   Widget _buildTextField({
     required BuildContext context,
     required AdvancedSearchFilterField advancedSearchFilterField,
     required TextEditingController textEditingController,
     VoidCallback? onTap,
     bool isSelectFormList = false,
-  }) =>
-      TextField(
-        controller: textEditingController,
-        readOnly: isSelectFormList,
-        onTap: onTap,
-        decoration: InputDecoration(
-          filled: true,
-          fillColor: AppColor.loginTextFieldBackgroundColor,
-          contentPadding: const EdgeInsets.only(
-            right: 8,
-            left: 12,
-          ),
-          border: const OutlineInputBorder(
-            borderRadius: BorderRadius.all(
-              Radius.circular(10),
-            ),
-          ),
-          hintText: advancedSearchFilterField.getHintText(context),
-          hintStyle: const TextStyle(
-            fontSize: 14,
-            color: AppColor.colorHintSearchBar,
-          ),
-          suffixIconConstraints:
-              const BoxConstraints(minHeight: 24, minWidth: 24),
-          suffixIcon: isSelectFormList
-              ? buildIconWeb(
-                  icon: SvgPicture.asset(
-                    imagePaths.icDropDown,
-                  ),
-                )
-              : null,
-        ),
-      );
-
-  Widget _buildCheckboxHasAttachment(BuildContext context) {
-    return Obx(
-      () => CheckboxListTile(
-        contentPadding: EdgeInsets.zero,
-        controlAffinity: ListTileControlAffinity.leading,
-        value: controller.hasAttachment.value,
-        onChanged: (value) {
-          controller.hasAttachment.value = value ?? false;
-        },
-        title: Text(AppLocalizations.of(context).hasAttachment),
-      ),
-    );
-  }
-
-  Widget _buildButton({
-    required Color colorButton,
-    required Color colorText,
-    required String text,
-    required VoidCallback onAction,
   }) {
-    return InkWell(
+    return TextField(
-      onTap: onAction,
+      controller: textEditingController,
-      onTapDown: (_) {
+      readOnly: isSelectFormList,
-        onAction.call();
+      onTap: onTap,
-      },
+      decoration: InputDecoration(
-      child: Container(
+        filled: true,
-        padding: const EdgeInsets.symmetric(vertical: 16),
+        fillColor: AppColor.loginTextFieldBackgroundColor,
-        alignment: Alignment.center,
+        contentPadding: const EdgeInsets.only(
-        decoration: BoxDecoration(
+          right: 8,
-            borderRadius: BorderRadius.circular(10), color: colorButton),
+          left: 12,
-        child: Text(
-          text,
-          style: TextStyle(fontSize: 17, color: colorText),
         ),
-      ),
+        border: const OutlineInputBorder(
-    );
+          borderRadius: BorderRadius.all(
-  }
+            Radius.circular(10),
-
+          ),
-  Widget _buildEmailReceiveTimeTypeDropDownButton() {
-    return DropdownButtonHideUnderline(
-      child: DropdownButton2<EmailReceiveTimeType>(
-        isExpanded: true,
-        hint: Row(
-          children: [
-            Expanded(
-                child: Text(
-              controller.dateFilterSelectedFormAdvancedSearch.value.name,
-              style: const TextStyle(
-                  fontSize: 16,
-                  fontWeight: FontWeight.normal,
-                  color: Colors.black),
-              maxLines: 1,
-              overflow: BuildUtils.isWeb ? null : TextOverflow.ellipsis,
-            )),
-          ],
         ),
-        items: EmailReceiveTimeType.values
+        hintText: advancedSearchFilterField.getHintText(context),
-            .map((item) => DropdownMenuItem<EmailReceiveTimeType>(
+        hintStyle: const TextStyle(
-                  value: item,
+          fontSize: 14,
-                  child: Text(
+          color: AppColor.colorHintSearchBar,
-                    item.name,
+        ),
-                    style: const TextStyle(
+        suffixIconConstraints:
-                        fontSize: 16,
+            const BoxConstraints(minHeight: 24, minWidth: 24),
-                        fontWeight: FontWeight.normal,
+        suffixIcon: isSelectFormList
-                        color: Colors.black),
+            ? buildIconWeb(
-                    maxLines: 1,
+                icon: SvgPicture.asset(
-                    overflow: BuildUtils.isWeb ? null : TextOverflow.ellipsis,
+                  _imagePaths.icDropDown,
-                  ),
+                ),
-                ))
+              )
-            .toList(),
+            : null,
-        value: controller.dateFilterSelectedFormAdvancedSearch.value,
-        onChanged: (item) {
-          controller.dateFilterSelectedFormAdvancedSearch.value = item!;
-        },
-        icon: SvgPicture.asset(imagePaths.icDropDown),
-        buttonPadding: const EdgeInsets.symmetric(horizontal: 12),
-        buttonDecoration: BoxDecoration(
-            borderRadius: BorderRadius.circular(10),
-            border: Border.all(
-                color: AppColor.colorInputBorderCreateMailbox, width: 0.5),
-            color: AppColor.colorInputBackgroundCreateMailbox),
-        itemHeight: 44,
-        buttonHeight: 44,
-        selectedItemHighlightColor: Colors.black12,
-        itemPadding: const EdgeInsets.symmetric(horizontal: 12),
-        dropdownMaxHeight: 200,
-        dropdownDecoration: BoxDecoration(borderRadius: BorderRadius.circular(10), color: Colors.white),
-        dropdownElevation: 4,
-        scrollbarRadius: const Radius.circular(40),
-        scrollbarThickness: 6,
       ),
     );
   }

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

@@ -0,0 +1,94 @@
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/advanced_filter_controller.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+import 'package:tmail_ui_user/main/routes/route_navigation.dart';
+
+class AdvancedSearchFilterFormBottomView
+    extends GetWidget<AdvancedFilterController> {
+  const AdvancedSearchFilterFormBottomView({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final ResponsiveUtils _responsiveUtils = Get.find<ResponsiveUtils>();
+
+    return Padding(
+      padding: EdgeInsets.only(top: _responsiveUtils.isMobile(context) ? 8 : 20),
+      child: Column(
+        children: [
+          if (_responsiveUtils.isMobile(context))
+            _buildCheckboxHasAttachment(context),
+          Row(
+            mainAxisAlignment: _responsiveUtils.isMobile(context)
+                ? MainAxisAlignment.spaceEvenly
+                : MainAxisAlignment.end,
+            crossAxisAlignment: CrossAxisAlignment.end,
+            mainAxisSize: MainAxisSize.max,
+            children: [
+              if (!_responsiveUtils.isMobile(context))
+                Expanded(child: _buildCheckboxHasAttachment(context)),
+              _buildButton(
+                onAction: () {
+                  controller.cleanSearchFilter();
+                },
+                colorButton: AppColor.primaryColor.withOpacity(0.14),
+                colorText: AppColor.primaryColor,
+                text: AppLocalizations.of(context).clearFilter,
+              ),
+              const SizedBox(width: 12),
+              _buildButton(
+                onAction: () {
+                  controller.applyAdvancedSearchFilter(context);
+                  popBack();
+                },
+                colorButton: AppColor.primaryColor,
+                colorText: AppColor.primaryLightColor,
+                text: AppLocalizations.of(context).search,
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildCheckboxHasAttachment(BuildContext context) {
+    return Obx(
+      () => CheckboxListTile(
+        contentPadding: EdgeInsets.zero,
+        controlAffinity: ListTileControlAffinity.leading,
+        value: controller.hasAttachment.value,
+        onChanged: (value) {
+          controller.hasAttachment.value = value ?? false;
+        },
+        title: Text(AppLocalizations.of(context).hasAttachment),
+      ),
+    );
+  }
+
+  Widget _buildButton({
+    required Color colorButton,
+    required Color colorText,
+    required String text,
+    required VoidCallback onAction,
+  }) {
+    return InkWell(
+      onTap: onAction,
+      onTapDown: (_) {
+        onAction.call();
+      },
+      child: Container(
+        constraints: const BoxConstraints(maxWidth: 154),
+        padding: const EdgeInsets.symmetric(vertical: 16),
+        alignment: Alignment.center,
+        decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(10), color: colorButton),
+        child: Text(
+          text,
+          style: TextStyle(fontSize: 17, color: colorText),
+        ),
+      ),
+    );
+  }
+}

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

@@ -7,20 +7,23 @@ class AdvancedSearchFilterOverlay extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return Padding(
-      width: 660,
+      padding: const EdgeInsets.only(top: 8),
-      height: 558,
+      child: Container(
-      padding: const EdgeInsets.all(32),
+        width: 660,
-      decoration: BoxDecoration(
+        height: 558,
-        color: Colors.white,
+        padding: const EdgeInsets.all(32),
-        borderRadius: BorderRadius.circular(16),
+        decoration: BoxDecoration(
-        boxShadow: const [
+          color: Colors.white,
-          BoxShadow(
+          borderRadius: BorderRadius.circular(16),
-            color: AppColor.colorShadowBgContentEmail,
+          boxShadow: const [
-            spreadRadius: 1, blurRadius: 1, offset: Offset(0, 0.5)),
+            BoxShadow(
-        ]
+              color: AppColor.colorShadowBgContentEmail,
+              spreadRadius: 1, blurRadius: 1, offset: Offset(0, 0.5)),
+          ]
+        ),
+        child: AdvancedSearchInputForm(),
       ),
-      child: AdvancedSearchInputForm(),
     );
   }
 }

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

@@ -0,0 +1,105 @@
+import 'package:core/core.dart';
+import 'package:dropdown_button2/dropdown_button2.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/advanced_filter_controller.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/email_receive_time_type.dart';
+
+class DateDropDownButton extends GetWidget<AdvancedFilterController> {
+  const DateDropDownButton({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Obx(
+      () => _buildDropDownButton<EmailReceiveTimeType>(
+        items: EmailReceiveTimeType.values,
+        itemSelected: controller.dateFilterSelectedFormAdvancedSearch.value,
+        context: context,
+        onChanged: (item) {
+          controller.dateFilterSelectedFormAdvancedSearch.value = item!;
+        },
+      ),
+    );
+  }
+}
+
+class MailBoxDropDownButton extends StatelessWidget {
+  const MailBoxDropDownButton({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container();
+  }
+}
+
+
+Widget _buildDropDownButton<T>({
+  required List<T> items,
+  required T itemSelected,
+  required BuildContext context,
+  required Function(T?)? onChanged,
+}) {
+  final ImagePaths _imagePaths = Get.find<ImagePaths>();
+
+  return DropdownButtonHideUnderline(
+    child: DropdownButton2<T>(
+      isExpanded: true,
+      items: items
+          .map((item) => DropdownMenuItem<T>(
+                value: item,
+                child: Text(
+                  StringConvert.writeNullToEmpty(_getTextItemDropdown<T>(
+                    item: item,
+                    context: context,
+                  )),
+                  style: const TextStyle(
+                      fontSize: 16,
+                      fontWeight: FontWeight.normal,
+                      color: Colors.black),
+                  maxLines: 1,
+                  overflow: BuildUtils.isWeb ? null : TextOverflow.ellipsis,
+                ),
+              ))
+          .toList(),
+      value: itemSelected,
+      onChanged: onChanged,
+      icon: SvgPicture.asset(_imagePaths.icDropDown),
+      buttonPadding: const EdgeInsets.symmetric(horizontal: 12),
+      buttonDecoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(10),
+        border: Border.all(
+          color: AppColor.colorInputBorderCreateMailbox,
+          width: 0.5,
+        ),
+        color: AppColor.colorInputBackgroundCreateMailbox,
+      ),
+      itemHeight: 44,
+      buttonHeight: 44,
+      selectedItemHighlightColor: AppColor.primaryColor.withOpacity(0.12),
+      itemPadding: const EdgeInsets.symmetric(horizontal: 12),
+      dropdownMaxHeight: 200,
+      dropdownDecoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(10),
+        color: Colors.white,
+      ),
+      dropdownElevation: 4,
+      scrollbarRadius: const Radius.circular(40),
+      scrollbarThickness: 6,
+    ),
+  );
+}
+
+String? _getTextItemDropdown<T>(
+    {required T item, required BuildContext context}) {
+  if (item is EmailReceiveTimeType) {
+    return item.getTitle(context);
+  }
+
+  if (item is Mailbox) {
+    return item.name?.name;
+  }
+
+  return null;
+}

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

@@ -1,6 +1,5 @@
 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/icon_button_web.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';

lib/features/thread/presentation/thread_view.dart

@@ -1,5 +1,6 @@
 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/model.dart';
@@ -10,6 +11,7 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/domain/model/recent_sea
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/mixin/filter_email_popup_menu_mixin.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/email_receive_time_type.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';
@@ -181,153 +183,167 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin,
                 borderRadius: BorderRadius.all(Radius.circular(10)),
                 color: AppColor.colorBgSearchBar),
             height: 45,
-            child: QuickSearchInputForm<PresentationEmail, RecentSearch>(
+            child: PortalTarget(
-                textFieldConfiguration: QuickSearchTextFieldConfiguration(
+              visible: controller.searchController.isAdvancedSearchViewOpen.isTrue,
-                    controller: controller.searchController.searchInputController,
+              anchor: const Aligned(
-                    autofocus: true,
+                follower: Alignment.topLeft,
-                    focusNode: controller.searchController.searchFocus,
+                target: Alignment.bottomLeft,
-                    textInputAction: TextInputAction.done,
+                widthFactor: 1,
-                    onSubmitted: (keyword) {
+                backup: Aligned(
-                      if (keyword.trim().isNotEmpty) {
+                  follower: Alignment.bottomLeft,
-                        controller.searchController.saveRecentSearch(RecentSearch.now(keyword));
+                  target: Alignment.topLeft,
-                      }
+                  widthFactor: 1,
-                      controller.mailboxDashBoardController.searchEmail(context, keyword);
-                    },
-                    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 = controller.currentTextSearch;
-                          if (keyword.trim().isNotEmpty) {
-                            controller.searchController.saveRecentSearch(RecentSearch.now(keyword));
-                          }
-                          controller.mailboxDashBoardController.searchEmail(context, keyword);
-                        }),
-                    clearTextButton: buildIconWeb(
-                        icon: SvgPicture.asset(
-                            _imagePaths.icClearTextSearch,
-                            width: 16,
-                            height: 16,
-                            fit: BoxFit.fill),
-                        onTap: () {
-                          controller.clearTextSearch();
-                        }),
-                    rightButton: IconOpenAdvancedSearchWidget(context)
                 ),
-                suggestionsBoxDecoration: const QuickSearchSuggestionsBoxDecoration(
+              ),
-                  color: Colors.white,
+              portalFollower: _responsiveUtils.isMobile(context) ? const SizedBox.shrink() : const AdvancedSearchFilterOverlay(),
-                  borderRadius: BorderRadius.all(Radius.circular(16)),
+              child: QuickSearchInputForm<PresentationEmail, RecentSearch>(
-                ),
+                  textFieldConfiguration: QuickSearchTextFieldConfiguration(
-                debounceDuration: const Duration(milliseconds: 500),
+                      controller: controller.searchController.searchInputController,
-                hideSuggestionsBox: _responsiveUtils.isScreenWithShortestSide(context),
+                      autofocus: true,
-                listActionButton: const [
+                      focusNode: controller.searchController.searchFocus,
-                  QuickSearchFilter.hasAttachment,
+                      textInputAction: TextInputAction.done,
-                  QuickSearchFilter.last7Days,
+                      onSubmitted: (keyword) {
-                  QuickSearchFilter.fromMe,
-                ],
-                actionButtonBuilder: (context, filterAction) {
-                  if (filterAction is QuickSearchFilter) {
-                    return _buildQuickSearchFilterButtonSuggestionBox(
-                        context,
-                        filterAction);
-                  }
-                  return const SizedBox.shrink();
-                },
-                buttonActionCallback: (filterAction) {
-                  if (filterAction is QuickSearchFilter) {
-                    controller.mailboxDashBoardController.selectQuickSearchFilter(
-                      quickSearchFilter: filterAction,
-                      fromSuggestionBox: true,
-                    );
-                  }
-                },
-                listActionPadding: const EdgeInsets.only(
-                    left: 24,
-                    top: 24,
-                    right: 24,
-                    bottom: 16),
-                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) {
                           controller.searchController.saveRecentSearch(RecentSearch.now(keyword));
                         }
                         controller.mailboxDashBoardController.searchEmail(context, keyword);
                       },
-                      child: Padding(
+                      decoration: InputDecoration(
-                          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
+                          border: InputBorder.none,
-                          child: Row(children: [
+                          focusedBorder: InputBorder.none,
-                            Text(AppLocalizations.of(context).showingResultsFor,
+                          enabledBorder: InputBorder.none,
-                                style: const TextStyle(fontSize: 13.0,
+                          contentPadding: EdgeInsets.zero,
-                                    color: AppColor.colorTextButtonHeaderThread,
+                          hintText: AppLocalizations.of(context).search_mail,
-                                    fontWeight: FontWeight.w500)
+                          hintStyle: const TextStyle(
-                            ),
+                              color: AppColor.colorHintSearchBar,
-                            const SizedBox(width: 4),
+                              fontSize: 17.0),
-                            Expanded(child: Text('"$keyword"',
+                          labelStyle: const TextStyle(
-                                style: const TextStyle(
+                              color: AppColor.colorHintSearchBar,
-                                    fontSize: 13.0,
+                              fontSize: 17.0)
-                                    color: Colors.black,
-                                    fontWeight: FontWeight.w500)))
-                          ])
                       ),
-                    );
+                      leftButton: buildIconWeb(
-                  } else {
+                          icon: SvgPicture.asset(
+                              _imagePaths.icSearchBar,
+                              width: 16,
+                              height: 16,
+                              fit: BoxFit.fill),
+                          onTap: () {
+                            final keyword = controller.currentTextSearch;
+                            if (keyword.trim().isNotEmpty) {
+                              controller.searchController.saveRecentSearch(RecentSearch.now(keyword));
+                            }
+                            controller.mailboxDashBoardController.searchEmail(context, keyword);
+                          }),
+                      clearTextButton: buildIconWeb(
+                          icon: SvgPicture.asset(
+                              _imagePaths.icClearTextSearch,
+                              width: 16,
+                              height: 16,
+                              fit: BoxFit.fill),
+                          onTap: () {
+                            controller.clearTextSearch();
+                          }),
+                      rightButton: IconOpenAdvancedSearchWidget(context)
+                  ),
+                  suggestionsBoxDecoration: const QuickSearchSuggestionsBoxDecoration(
+                    color: Colors.white,
+                    borderRadius: BorderRadius.all(Radius.circular(16)),
+                  ),
+                  debounceDuration: const Duration(milliseconds: 500),
+                  hideSuggestionsBox: _responsiveUtils.isScreenWithShortestSide(context),
+                  listActionButton: const [
+                    QuickSearchFilter.hasAttachment,
+                    QuickSearchFilter.last7Days,
+                    QuickSearchFilter.fromMe,
+                  ],
+                  actionButtonBuilder: (context, filterAction) {
+                    if (filterAction is QuickSearchFilter) {
+                      return _buildQuickSearchFilterButtonSuggestionBox(
+                          context,
+                          filterAction);
+                    }
                     return const SizedBox.shrink();
-                  }
+                  },
-                },
+                  buttonActionCallback: (filterAction) {
-                loadingBuilder: (context) => Padding(
+                    if (filterAction is QuickSearchFilter) {
-                  padding: const EdgeInsets.only(bottom: 16),
+                      controller.searchController.selectQuickSearchFilter(
-                  child: loadingWidget,
+                        quickSearchFilter: filterAction,
-                ),
+                        fromSuggestionBox: true,
-                fetchRecentActionCallback: (pattern) async {
+                      );
-                  return controller.searchController.getAllRecentSearchAction(pattern);
+                    }
-                },
+                  },
-                itemRecentBuilder: (context, recent) {
+                  listActionPadding: const EdgeInsets.only(
-                  return RecentSearchItemTileWidget(recent);
+                      left: 24,
-                },
+                      top: 24,
-                onRecentSelected: (recent) {
+                      right: 24,
-                  controller.searchController.updateTextSearch(recent.value);
+                      bottom: 16),
-                  controller.mailboxDashBoardController.searchEmail(context, recent.value);
+                  titleHeaderRecent: Padding(
-                },
+                      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
-                suggestionsCallback: (pattern) async {
+                      child: Text(AppLocalizations.of(context).recent,
-                  return controller.mailboxDashBoardController.quickSearchEmails();
+                          style: const TextStyle(fontSize: 13.0,
-                },
+                              color: AppColor.colorTextButtonHeaderThread,
-                itemBuilder: (context, email) {
+                              fontWeight: FontWeight.w500)
-                  return EmailQuickSearchItemTileWidget(
+                      )
-                      email,
+                  ),
-                      controller.currentMailbox);
+                  buttonShowAllResult: (context, keyword) {
-                },
+                    if (keyword is String) {
-                onSuggestionSelected: (presentationEmail) async {
+                      return InkWell(
-                  controller.pressEmailAction(
+                        onTap: () {
-                      context,
+                          if (keyword.trim().isNotEmpty) {
-                      EmailActionType.preview,
+                            controller.searchController.saveRecentSearch(RecentSearch.now(keyword));
-                      presentationEmail);
+                          }
-                }),
+                          controller.mailboxDashBoardController.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 controller.searchController.getAllRecentSearchAction(pattern);
+                  },
+                  itemRecentBuilder: (context, recent) {
+                    return RecentSearchItemTileWidget(recent);
+                  },
+                  onRecentSelected: (recent) {
+                    controller.searchController.updateTextSearch(recent.value);
+                    controller.mailboxDashBoardController.searchEmail(context, recent.value);
+                  },
+                  suggestionsCallback: (pattern) async {
+                    return controller.searchController.quickSearchEmails();
+                  },
+                  itemBuilder: (context, email) {
+                    return EmailQuickSearchItemTileWidget(
+                        email,
+                        controller.currentMailbox);
+                  },
+                  onSuggestionSelected: (presentationEmail) async {
+                    controller.pressEmailAction(
+                        context,
+                        EmailActionType.preview,
+                        presentationEmail);
+                  }),
+            ),
           )),
           const SizedBox(width: 16),
         ]