Apply new UI for contact support

Signed-off-by: dab246 <tdvu@linagora.com>

lib/features/mailbox/presentation/widgets/folder_widget.dart

@@ -0,0 +1,85 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:core/presentation/views/text/text_overflow_builder.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_icon_widget_styles.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart';
+
+class FolderWidget extends StatelessWidget {
+  final String icon;
+  final String label;
+  final VoidCallback onOpenFolderAction;
+  final String? tooltip;
+  final EdgeInsetsGeometry? padding;
+
+  const FolderWidget({
+    super.key,
+    required this.icon,
+    required this.label,
+    required this.onOpenFolderAction,
+    this.tooltip,
+    this.padding,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    Widget item = Container(
+      decoration: const BoxDecoration(
+        borderRadius: BorderRadius.all(
+          Radius.circular(MailboxItemWidgetStyles.borderRadius),
+        ),
+      ),
+      padding: const EdgeInsets.symmetric(
+        horizontal: MailboxItemWidgetStyles.itemPadding,
+      ),
+      height: MailboxItemWidgetStyles.height,
+      child: Row(children: [
+        SvgPicture.asset(
+          icon,
+          width: MailboxIconWidgetStyles.iconSize,
+          height: MailboxIconWidgetStyles.iconSize,
+          fit: BoxFit.fill,
+        ),
+        const SizedBox(width: MailboxItemWidgetStyles.labelIconSpace),
+        Expanded(
+          child: Padding(
+            padding: const EdgeInsets.symmetric(vertical: 3),
+            child: TextOverflowBuilder(
+              label,
+              style: ThemeUtils.textStyleBodyBody3(color: Colors.black),
+            ),
+          ),
+        )
+      ]),
+    );
+
+    if (tooltip != null) {
+      item = Tooltip(
+        message: tooltip,
+        child: item,
+      );
+    }
+
+    item = Material(
+      color: Colors.transparent,
+      child: InkWell(
+        onTap: onOpenFolderAction,
+        borderRadius: const BorderRadius.all(
+          Radius.circular(MailboxItemWidgetStyles.borderRadius),
+        ),
+        hoverColor: AppColor.blue100,
+        child: item,
+      ),
+    );
+
+    if (padding != null) {
+      return Padding(
+        padding: padding!,
+        child: item,
+      );
+    } else {
+      return item;
+    }
+  }
+}

lib/features/mailbox/presentation/widgets/mailbox_category_widget.dart

@@ -3,10 +3,13 @@ import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:core/utils/direction_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:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_icon_widget_styles.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/styles/mailbox_item_widget_styles.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 typedef OnToggleMailboxCategories = Function(MailboxCategories, GlobalKey);
@@ -16,6 +19,7 @@ class MailboxCategoryWidget extends StatefulWidget {
   final ExpandMode expandMode;
   final OnToggleMailboxCategories onToggleMailboxCategories;
   final bool isArrangeLTR;
+  final bool showIcon;
   final EdgeInsetsGeometry? padding;
 
   const MailboxCategoryWidget({
@@ -24,6 +28,7 @@ class MailboxCategoryWidget extends StatefulWidget {
     required this.expandMode,
     required this.onToggleMailboxCategories,
     this.isArrangeLTR = true,
+    this.showIcon = false,
     this.padding,
   });
 
@@ -42,6 +47,16 @@ class _MailboxCategoryWidgetState extends State<MailboxCategoryWidget> {
     final item = Row(
       key: _key,
       children: [
+        if (widget.showIcon)
+          ...[
+            SvgPicture.asset(
+              _imagePaths.icFolderMailbox,
+              width: MailboxIconWidgetStyles.iconSize,
+              height: MailboxIconWidgetStyles.iconSize,
+              fit: BoxFit.fill,
+            ),
+            const SizedBox(width: MailboxItemWidgetStyles.labelIconSpace),
+          ],
         if (!widget.isArrangeLTR)
           Flexible(
             child: Text(