TF-1437 Apply new design mailbox list for destination picker

lib/features/mailbox/presentation/mixin/mailbox_widget_mixin.dart

@@ -1,16 +1,24 @@
 
+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/utils/style_utils.dart';
+import 'package:core/presentation/views/button/icon_button_web.dart';
 import 'package:core/utils/build_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:model/mailbox/expand_mode.dart';
 import 'package:model/mailbox/presentation_mailbox.dart';
+import 'package:tmail_ui_user/features/base/base_mailbox_controller.dart';
 import 'package:tmail_ui_user/features/base/widget/popup_item_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_controller.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/context_item_mailbox_action.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/widgets/mailbox_bottom_sheet_action_tile_builder.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 mixin MailboxWidgetMixin {
 
@@ -214,4 +222,56 @@ mixin MailboxWidgetMixin {
       )
     );
   }
+
+  Widget buildHeaderMailboxCategory(
+    BuildContext context,
+    ResponsiveUtils responsiveUtils,
+    ImagePaths imagePaths,
+    MailboxCategories categories,
+    BaseMailboxController baseMailboxController,
+    {
+      required Function(MailboxCategories categories) toggleMailboxCategories,
+      EdgeInsets? padding
+    }
+  ) {
+    return Padding(
+      padding: padding ?? EdgeInsets.only(
+        top: 10,
+        left: responsiveUtils.isDesktop(context) ? 0 : 16,
+        right: responsiveUtils.isDesktop(context) ? 0 : 16
+      ),
+      child: Row(children: [
+        Obx(() {
+          final expandMode = categories.getExpandMode(baseMailboxController.mailboxCategoriesExpandMode.value);
+          return buildIconWeb(
+            splashRadius: 5,
+            iconPadding: EdgeInsets.zero,
+            minSize: 12,
+            icon: SvgPicture.asset(
+              expandMode == ExpandMode.EXPAND
+                ? imagePaths.icExpandFolder
+                : imagePaths.icCollapseFolder,
+              color: AppColor.primaryColor,
+              fit: BoxFit.fill
+            ),
+            tooltip: expandMode == ExpandMode.EXPAND
+              ? AppLocalizations.of(context).collapse
+              : AppLocalizations.of(context).expand,
+            onTap: () => toggleMailboxCategories(categories)
+          );
+        }),
+        Expanded(child: Text(
+          categories.getTitle(context),
+          maxLines: 1,
+          overflow: CommonTextStyle.defaultTextOverFlow,
+          softWrap: CommonTextStyle.defaultSoftWrap,
+          style: const TextStyle(
+            fontSize: 17,
+            color: Colors.black,
+            fontWeight: FontWeight.bold
+          )
+        )),
+      ])
+    );
+  }
 }