TF-710 [WEB] Relayout destination picker base on prototype

core/lib/presentation/extensions/color_extension.dart

@@ -129,6 +129,7 @@ extension AppColor on Color {
   static const colorBorderWrapIconStyleCode = Color(0xFFE4E4E4);
   static const colorBackgroundWrapIconStyleCode = Color(0xFFF2F3F5);
   static const colorSelectedRichTextButton = Color(0x99EBEDF0);
+  static const colorShadowDestinationPicker = Color(0x33000000);
 
   static const mapGradientColor = [
     [Color(0xFF21D4FD), Color(0xFFB721FF)],

lib/features/destination_picker/presentation/destination_picker_view.dart

@@ -8,6 +8,7 @@ import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
 import 'package:tmail_ui_user/features/destination_picker/presentation/destination_picker_controller.dart';
 import 'package:tmail_ui_user/features/destination_picker/presentation/model/destination_picker_arguments.dart';
 import 'package:tmail_ui_user/features/destination_picker/presentation/widgets/app_bar_destination_picker_builder.dart';
+import 'package:tmail_ui_user/features/destination_picker/presentation/widgets/top_bar_destination_picker_web_builder.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_displayed.dart';
@@ -33,6 +34,37 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
       actions = arguments.mailboxAction;
     }
 
+    if (BuildUtils.isWeb) {
+      return PointerInterceptor(
+        child: GestureDetector(
+          onTap: () => controller.closeDestinationPicker(),
+          child: Scaffold(
+            backgroundColor: AppColor.colorShadowDestinationPicker,
+            body: Align(
+              alignment: Alignment.center,
+              child: Card(
+                color: Colors.white,
+                margin: _getMarginDestinationPicker(context),
+                elevation: 16,
+                shape: const RoundedRectangleBorder(
+                    borderRadius: BorderRadius.all(Radius.circular(14))),
+                child: Container(
+                    decoration: const BoxDecoration(
+                        color: Colors.white,
+                        borderRadius: BorderRadius.all(Radius.circular(14))),
+                    width: _getWidthDestinationPicker(context),
+                    child: ClipRRect(
+                        borderRadius: const BorderRadius.all(Radius.circular(14)),
+                        child: _buildDestinationPickerWebWidget(context, actions)
+                    )
+                )
+              )
+            )
+          ),
+        ),
+      );
+    }
+
     if (actions == MailboxActions.create) {
       return PointerInterceptor(child: Card(
           margin: EdgeInsets.zero,
@@ -100,6 +132,22 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
     }
   }
 
+  Widget _buildDestinationPickerWebWidget(BuildContext context, MailboxActions? actions) {
+    return Column(children: [
+      Obx(() => TopBarDestinationPickerWebBuilder(
+          controller.mailboxAction.value,
+          onCloseAction: () => controller.closeDestinationPicker())),
+      Obx(() => controller.isSearchActive()
+          ? _buildInputSearchFormWidget(context)
+          : const SizedBox.shrink()),
+      Expanded(child: Container(
+          color: actions == MailboxActions.create
+              ? AppColor.colorBgMailbox
+              : Colors.white,
+          child: _buildBodyDestinationPicker(context, actions)))
+    ]);
+  }
+
   Widget _buildBodyMailboxLocation(BuildContext context, MailboxActions? actions) {
     return SafeArea(
         top: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context),
@@ -152,8 +200,10 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
   Widget _buildSearchBarWidget(BuildContext context) {
     return Padding(
         padding: EdgeInsets.only(
-            top: _responsiveUtils.isScreenWithShortestSide(context) || BuildUtils.isWeb ? 12 : 0,
-            left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
+            top: _responsiveUtils.isScreenWithShortestSide(context) &&
+                !BuildUtils.isWeb ? 12 : 0,
+            left: _responsiveUtils.isLandscapeMobile(context) &&
+                !BuildUtils.isWeb ? 0 : 16,
             right: 16),
         child: (SearchBarView(_imagePaths)
             ..hintTextSearch(AppLocalizations.of(context).hint_search_mailboxes)
@@ -415,7 +465,8 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
 
   Widget _buildInputSearchFormWidget(BuildContext context) {
     return Padding(
-        padding: const EdgeInsets.only(top: 16, bottom: 16),
+        padding: const EdgeInsets.symmetric(
+            vertical: BuildUtils.isWeb ? 0 : 16),
         child: Row(
             children: [
               Padding(padding: const EdgeInsets.only(left: 5), child: buildIconWeb(
@@ -441,4 +492,28 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
         )
     );
   }
+
+  double _getWidthDestinationPicker(BuildContext context) {
+    if (BuildUtils.isWeb) {
+      if (_responsiveUtils.isMobile(context)) {
+        return double.infinity;
+      } else {
+        return 500;
+      }
+    } else {
+      return 500;
+    }
+  }
+
+  EdgeInsets _getMarginDestinationPicker(BuildContext context) {
+    if (BuildUtils.isWeb) {
+      if (_responsiveUtils.isMobile(context)) {
+        return EdgeInsets.zero;
+      } else {
+        return const EdgeInsets.symmetric(vertical: 50);
+      }
+    } else {
+      return EdgeInsets.zero;
+    }
+  }
 }

lib/features/destination_picker/presentation/widgets/top_bar_destination_picker_web_builder.dart

@@ -0,0 +1,55 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class TopBarDestinationPickerWebBuilder extends StatelessWidget {
+
+  final MailboxActions? _mailboxAction;
+  final VoidCallback? onCloseAction;
+
+  const TopBarDestinationPickerWebBuilder(
+      this._mailboxAction,
+      {
+        Key? key,
+        this.onCloseAction,
+      }
+  ) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final _imagePaths = Get.find<ImagePaths>();
+
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
+      color: Colors.white,
+      child: Row(
+          mainAxisAlignment: MainAxisAlignment.end,
+          children: [
+            const SizedBox(width: 40),
+            Expanded(
+              child: Text(
+                _mailboxAction?.getTitle(context) ?? '',
+                maxLines: 1,
+                overflow: CommonTextStyle.defaultTextOverFlow,
+                textAlign: TextAlign.center,
+                style: const TextStyle(
+                    fontSize: 20,
+                    color: Colors.black,
+                    fontWeight: FontWeight.w700))),
+            buildIconWeb(
+                iconSize: 32,
+                colorSelected: Colors.white,
+                splashRadius: 20,
+                iconPadding: const EdgeInsets.all(5),
+                icon: SvgPicture.asset(_imagePaths.icCloseMailbox, fit: BoxFit.fill),
+                tooltip: AppLocalizations.of(context).close,
+                onTap: () => onCloseAction?.call()),
+          ]
+      ),
+    );
+  }
+}

lib/features/thread/presentation/thread_view.dart

@@ -572,7 +572,7 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin,
 
   double? _getItemExtent(BuildContext context) {
     if (BuildUtils.isWeb) {
-     return _responsiveUtils.isDesktop(context) ? 52 : 85;
+     return _responsiveUtils.isDesktop(context) ? 52 : 90;
     } else {
       return null;
     }