TF-248 Add search form input inside ThreadView

assets/images/ic_search_bar.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.50006 1C9.53765 1 12.0001 3.46256 12.0001 6.50029C12.0001 7.74868 11.5842 8.89993 10.8835 9.82304L14.7791 13.7233C15.0718 14.0164 15.0715 14.4913 14.7785 14.784C14.4854 15.0767 14.0105 15.0764 13.7178 14.7834L9.82266 10.8839C8.89959 11.5847 7.74839 12.0006 6.50006 12.0006C3.46246 12.0006 1 9.53802 1 6.50029C1 3.46256 3.46246 1 6.50006 1ZM6.50006 2.5C4.2909 2.5 2.5 4.29098 2.5 6.50029C2.5 8.70961 4.2909 10.5006 6.50006 10.5006C8.70921 10.5006 10.5001 8.70961 10.5001 6.50029C10.5001 4.29098 8.70921 2.5 6.50006 2.5Z" fill="#818C99"/>
+</svg>

core/lib/presentation/extensions/color_extension.dart

@@ -65,6 +65,8 @@ extension AppColor on Color {
   static const colorNameEmail = Color(0xFF000000);
   static const colorContentEmail = Color(0xFF6D7885);
   static const colorTextButton = Color(0xFF007AFF);
+  static const colorHintSearchBar = Color(0xFF818C99);
+  static const colorBgSearchBar = Color(0xFFEBEDF0);
 
   static const mapGradientColor = [
     [Color(0xFF21D4FD), Color(0xFFB721FF)],

core/lib/presentation/resources/image_paths.dart

@@ -49,6 +49,7 @@ class ImagePaths {
   String get icChevron => _getImagePath('ic_chevron.svg');
   String get icChevronDown => _getImagePath('ic_chevron_down.svg');
   String get icFilter => _getImagePath('ic_filter.svg');
+  String get icSearchBar => _getImagePath('ic_search_bar.svg');
 
   String _getImagePath(String imageName) {
     return AssetsPaths.images + imageName;

lib/features/thread/presentation/thread_view.dart

@@ -11,6 +11,7 @@ import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar_threa
 import 'package:tmail_ui_user/features/thread/presentation/widgets/email_context_menu_action_builder.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/email_tile_builder.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/search_app_bar_widget.dart';
+import 'package:tmail_ui_user/features/thread/presentation/widgets/search_bar_thread_view_widget.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/suggestion_box_widget.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
@@ -37,6 +38,11 @@ class ThreadView extends GetWidget<ThreadController> {
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 _buildAppBarThread(context),
+                Obx(() => !controller.isSearchActive()
+                  ? (SearchBarThreadViewWidget(context, imagePaths)
+                      ..addOnOpenSearchViewAction(() => controller.enableSearch(context)))
+                    .build()
+                  : SizedBox.shrink()),
                 Expanded(child: Stack(
                   children: [
                     Container(
@@ -76,7 +82,7 @@ class ThreadView extends GetWidget<ThreadController> {
     return Obx(() {
       return Stack(
         children: [
-          _buildAppBarNormal(context),
+          if (!controller.isSearchActive()) _buildAppBarNormal(context),
           if (controller.isSearchActive()) _buildSearchForm(context),
           if (controller.currentSelectMode.value == SelectMode.ACTIVE) _buildAppBarSelectModeActive(context),
         ],

lib/features/thread/presentation/widgets/search_bar_thread_view_widget.dart

@@ -0,0 +1,82 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+typedef OnOpenSearchViewAction = Function();
+
+class SearchBarThreadViewWidget {
+ OnOpenSearchViewAction? _onOpenSearchViewAction;
+
+ final BuildContext _context;
+ final ImagePaths _imagePaths;
+
+  double? _heightSearchBar;
+  EdgeInsets? _padding;
+  EdgeInsets? _margin;
+
+ SearchBarThreadViewWidget(
+    this._context,
+    this._imagePaths,
+  );
+
+  void addOnOpenSearchViewAction(OnOpenSearchViewAction onOpenSearchViewAction) {
+    _onOpenSearchViewAction = onOpenSearchViewAction;
+  }
+
+  void setHeightSearchBar(double heightSearchBar) {
+    _heightSearchBar = heightSearchBar;
+  }
+
+  void addPadding(EdgeInsets padding) {
+    _padding = padding;
+  }
+
+  void addMargin(EdgeInsets margin) {
+    _margin = margin;
+  }
+
+  Widget build() {
+    return GestureDetector(
+      onTap: () => _onOpenSearchViewAction?.call(),
+      child: Container(
+          key: Key('search_bar_widget'),
+          alignment: Alignment.topCenter,
+          height: _heightSearchBar ?? 40,
+          decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(10),
+              color: AppColor.colorBgSearchBar),
+          padding: _padding ?? EdgeInsets.zero,
+          margin: _margin ?? EdgeInsets.only(left: 16, right: 16, bottom: 10),
+          child: MediaQuery(
+              data: MediaQueryData(padding: EdgeInsets.zero),
+              child: Row(
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: [
+                  _buildSearchButton(),
+                  Text(
+                    AppLocalizations.of(_context).hint_search_emails,
+                    style: TextStyle(fontSize: 17, color: AppColor.colorHintSearchBar),)
+                ]
+              )
+          )
+      ),
+    );
+  }
+
+ Widget _buildSearchButton() {
+   return Material(
+     borderRadius: BorderRadius.circular(12),
+     color: Colors.transparent,
+     child: Padding(
+       padding: EdgeInsets.only(left: 2),
+       child: IconButton(
+         color: AppColor.appColor,
+         icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 18, height: 18, fit: BoxFit.fill),
+         onPressed: () => _onOpenSearchViewAction?.call()
+       )
+     )
+   );
+ }
+}

lib/main/localizations/app_localizations.dart

@@ -464,5 +464,11 @@ class AppLocalizations {
     return Intl.message('Edit',
         name: 'edit');
   }
+
+  String get hint_search_emails {
+    return Intl.message(
+        'Search for emails and files',
+        name: 'hint_search_emails');
+  }
 }