Init mailbox feature add presentation layer

2021-07-27 12:56:27 +07:00
parent 8772126a3f
commit cab53453b5
18 changed files with 1170 additions and 1 deletions
@@ -0,0 +1,23 @@
+import 'package:core/core.dart';
+import 'package:dartz/dartz.dart';
+import 'package:get/get.dart';
+
+abstract class BaseController extends GetxController {
+  final viewState = Rx<Either<Failure, Success>>(Right(UIState.idle));
+
+  void consumeState(Stream<Either<Failure, Success>> newStateStream) async {
+    newStateStream.listen(
+      (state) => onData(state),
+      onError: (error) => onError(error),
+      onDone: () => onDone()
+    );
+  }
+
+  void onData(Either<Failure, Success> newState) {
+    viewState.value = newState;
+  }
+
+  void onError(dynamic error);
+
+  void onDone();
+}
@@ -0,0 +1,22 @@
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/mailbox/data/datasource/mailbox_datasource.dart';
+import 'package:tmail_ui_user/features/mailbox/data/datasource_impl/mailbox_datasource_impl.dart';
+import 'package:tmail_ui_user/features/mailbox/data/network/mailbox_api.dart';
+import 'package:tmail_ui_user/features/mailbox/data/repository/mailbox_repository_impl.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/repository/mailbox_repository.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/usecases/get_all_mailbox_interactor.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_controller.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_tree_builder.dart';
+
+class MailboxBindings extends Bindings {
+  @override
+  void dependencies() {
+    Get.lazyPut(() => MailboxDataSourceImpl(Get.find<MailboxAPI>()));
+    Get.lazyPut<MailboxDataSource>(() => Get.find<MailboxDataSourceImpl>());
+    Get.lazyPut(() => MailboxRepositoryImpl(Get.find<MailboxDataSource>()));
+    Get.lazyPut<MailboxRepository>(() => Get.find<MailboxRepositoryImpl>());
+    Get.lazyPut(() => GetAllMailboxInteractor(Get.find<MailboxRepository>()));
+    Get.lazyPut(() => TreeBuilder());
+    Get.lazyPut(() => MailboxController(Get.find<GetAllMailboxInteractor>(), Get.find<TreeBuilder>()));
+  }
+}
@@ -0,0 +1,60 @@
+import 'package:core/presentation/state/failure.dart';
+import 'package:core/presentation/state/success.dart';
+import 'package:dartz/dartz.dart';
+import 'package:get/get.dart';
+import 'package:jmap_dart_client/jmap/account_id.dart';
+import 'package:jmap_dart_client/jmap/core/id.dart';
+import 'package:model/mailbox/presentation_mailbox.dart';
+import 'package:tmail_ui_user/features/base/base_controller.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/state/get_all_mailboxes_state.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/usecases/get_all_mailbox_interactor.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_tree.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_tree_builder.dart';
+import 'package:tmail_ui_user/main/routes/app_routes.dart';
+
+class MailboxController extends BaseController {
+
+  final GetAllMailboxInteractor _getAllMailboxInteractor;
+  final TreeBuilder _treeBuilder;
+
+  MailboxController(this._getAllMailboxInteractor, this._treeBuilder);
+
+  final folderMailboxTree = MailboxTree(MailboxNode.root()).obs;
+
+  @override
+  void onReady() {
+    super.onReady();
+    getAllMailboxAction();
+  }
+  
+  void getAllMailboxAction() async {
+    final AccountId accountId = AccountId(Id('93c56f4408cff66f0a929aea8e3940e753c3275e5622582ae3010e7277b7696c'));
+    consumeState(_getAllMailboxInteractor.execute(accountId));
+  }
+
+  @override
+  void onData(Either<Failure, Success> newState) {
+    super.onData(newState);
+    newState
+      .map((success) => success is GetAllMailboxSuccess
+        ? _buildTree(success.folderMailboxList)
+        : null);
+  }
+
+  @override
+  void onDone() {
+  }
+
+  @override
+  void onError(error) {
+  }
+
+  void _buildTree(List<PresentationMailbox> folderMailboxList) async {
+    folderMailboxTree.value = await _treeBuilder.generateMailboxTree(folderMailboxList);
+  }
+
+  void closeMailboxScreen() {
+    Get.offAllNamed(AppRoutes.LOGIN);
+  }
+}
@@ -0,0 +1,161 @@
+import 'package:built_collection/built_collection.dart';
+import 'package:core/core.dart';
+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:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:model/model.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/state/get_all_mailboxes_state.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_controller.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_tree.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_button_new_folder_builder.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_tile_builder.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/search_form_widget_builder.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/storage_widget_builder.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/user_information_widget_builder.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class MailboxView extends GetWidget<MailboxController> {
+
+  final mailboxController = Get.find<MailboxController>();
+  final imagePaths = Get.find<ImagePaths>();
+  final responsiveUtils = Get.find<ResponsiveUtils>();
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      resizeToAvoidBottomInset: false,
+      backgroundColor: AppColor.primaryLightColor,
+      body: SafeArea(
+        child: Column(
+          mainAxisSize: MainAxisSize.max,
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            _buildCloseScreenButton(),
+            _buildUserInformationWidget(context),
+            _buildSearchFormWidget(context),
+            _buildLoadingView(),
+            Expanded(child: RefreshIndicator(
+              color: AppColor.primaryColor,
+              onRefresh: () async => mailboxController.getAllMailboxAction(),
+              child: _buildListMailbox(context)))
+          ])),
+      bottomNavigationBar: _buildStorageWidget(context),
+    );
+  }
+
+  Widget _buildCloseScreenButton() {
+    return Padding(
+      padding: EdgeInsets.only(left: 24, top: 12, right: 16),
+      child: IconButton(
+        key: Key('mailbox_close_button'),
+        onPressed: () => mailboxController.closeMailboxScreen(),
+        icon: SvgPicture.asset(imagePaths.icCloseMailbox, width: 30, height: 30, fit: BoxFit.fill)));
+  }
+
+  Widget _buildUserInformationWidget(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.only(left: 16, top: 8.0, right: 16),
+      child: UserInformationWidgetBuilder()
+        .onOpenUserInformationAction(() => {})
+        .build());
+  }
+
+  Widget _buildSearchFormWidget(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.only(top: 16, bottom: 12, left: 16, right: 16),
+      child: SearchFormWidgetBuilder(context)
+        .onNewSearchQuery((searchQuery) => {})
+        .build());
+  }
+
+  Widget _buildLoadingView() {
+    return Obx(() => mailboxController.viewState.value.fold(
+      (failure) => SizedBox.shrink(),
+      (success) => success == UIState.loading
+        ? Center(child: Padding(
+            padding: EdgeInsets.only(top: 16),
+            child: SizedBox(
+              width: 30,
+              height: 30,
+              child: CircularProgressIndicator(color: AppColor.primaryColor))))
+        : SizedBox.shrink()));
+  }
+
+  Widget _buildListMailbox(BuildContext context) {
+    return ListView(
+      key: Key('mailbox_list'),
+      primary: true,
+      children: [
+        Obx(() => mailboxController.viewState.value.fold(
+            (failure) => SizedBox.shrink(),
+            (success) => success is GetAllMailboxSuccess
+              ? _buildDefaultMailbox(success.defaultMailboxList)
+              : SizedBox.shrink())
+        ),
+        Padding(
+          padding: EdgeInsets.only(left: 40, top: 20),
+          child: Text(
+            AppLocalizations.of(context).my_folders,
+            maxLines: 1,
+            style: TextStyle(fontSize: 12, color: AppColor.myFolderTitleColor, fontWeight: FontWeight.w500))
+        ),
+        Padding(
+          padding: EdgeInsets.only(left: 16, right: 16, top: 10),
+          child: MailboxNewFolderTileBuilder()
+            .addIcon(imagePaths.icMailboxNewFolder)
+            .addName(AppLocalizations.of(context).new_folder)
+            .build()
+        ),
+        Obx(() => mailboxController.folderMailboxTree.value.root.childrenItems.isNotEmpty
+            ? _buildFolderMailbox(context, mailboxController.folderMailboxTree.value)
+            : SizedBox.shrink()
+        ),
+      ]
+    );
+  }
+
+  Widget _buildDefaultMailbox(List<PresentationMailbox> defaultMailbox) {
+    return ListView.builder(
+      padding: EdgeInsets.only(top: 16, left: 16, right: 16),
+      key: Key('default_mailbox_list'),
+      itemCount: defaultMailbox.length,
+      shrinkWrap: true,
+      primary: false,
+      itemBuilder: (context, index) =>
+        MailboxTileBuilder(defaultMailbox[index])
+          .build());
+  }
+
+  Widget _buildFolderMailbox(BuildContext context, MailboxTree mailboxTree) {
+    return Padding(
+      padding: EdgeInsets.only(left: 4, right: 16),
+      child: TreeView(
+        startExpanded: false,
+        key: Key('folder_mailbox_list'),
+        children: _buildListChildTileWidget(context, mailboxTree.root.childrenItems))
+    );
+  }
+
+  List<Widget> _buildListChildTileWidget(BuildContext context, BuiltList<MailboxNode> listMailboxNode) {
+    return listMailboxNode
+      .map((mailboxNode) => mailboxNode.hasChildren()
+        ? Padding(
+            padding: EdgeInsets.only(left: 16),
+            child: TreeViewChild(
+              key: Key('children_tree_mailbox_child'),
+              parent: MailBoxFolderTileBuilder(mailboxNode).build(context),
+              children: _buildListChildTileWidget(context, mailboxNode.childrenItems)))
+        : Padding(
+            padding: EdgeInsets.only(left: 16),
+            child: MailBoxFolderTileBuilder(mailboxNode).build(context)))
+      .toList();
+  }
+
+  Widget _buildStorageWidget(BuildContext context) => StorageWidgetBuilder(context).build();
+}
@@ -0,0 +1,48 @@
+import 'package:built_collection/built_collection.dart';
+import 'package:equatable/equatable.dart';
+import 'package:jmap_dart_client/jmap/core/id.dart';
+import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
+import 'package:model/mailbox/presentation_mailbox.dart';
+
+class MailboxNode with EquatableMixin{
+  static PresentationMailbox _root = PresentationMailbox(MailboxId(Id('root')));
+
+  PresentationMailbox item;
+  late BuiltList<MailboxNode> childrenItems;
+
+  factory MailboxNode.root() => MailboxNode(_root);
+
+  bool hasChildren() => childrenItems.isNotEmpty;
+
+  MailboxNode(this.item, {List<MailboxNode> child = const []}) {
+    this.childrenItems = BuiltList(child);
+  }
+
+  MailboxNode? addChild(PresentationMailbox mailbox) {
+    if (_validateChild(mailbox)) {
+      final node = MailboxNode(mailbox);
+      _addChildNode(node);
+      return node;
+    }
+    return null;
+  }
+
+  void _addChildNode(MailboxNode node) {
+    childrenItems = (ListBuilder<MailboxNode>(childrenItems)
+        ..add(node))
+      .build();
+  }
+
+  bool _validateChild(PresentationMailbox mailbox) {
+    if (mailbox.parentId == item.id) {
+      return true;
+    }
+    if (item == _root) {
+      return true;
+    }
+    return false;
+  }
+
+  @override
+  List<Object?> get props => [item, childrenItems];
+}
@@ -0,0 +1,43 @@
+import 'dart:collection';
+
+import 'package:equatable/equatable.dart';
+import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
+import 'package:model/mailbox/presentation_mailbox.dart';
+
+import 'mailbox_node.dart';
+
+class MailboxTree with EquatableMixin {
+  MailboxNode root;
+  MailboxTree(this.root);
+
+  MailboxNode? findNode(MailboxId? mailboxId) {
+    var result;
+    final queue = ListQueue<MailboxNode>();
+    queue.addLast(root);
+    while (queue.isNotEmpty && mailboxId != null) {
+      final currentNode = queue.removeFirst();
+      if (mailboxId == currentNode.item.id) {
+        result = currentNode;
+        break;
+      }
+      currentNode.childrenItems.forEach((child) {
+        queue.addLast(child);
+      });
+    }
+    return result;
+  }
+
+  MailboxNode? insertNode(PresentationMailbox mailbox) {
+    if (mailbox.parentId == null) {
+      return root.addChild(mailbox);
+    }
+
+    final foundParent = findNode(mailbox.parentId);
+    return foundParent != null
+        ? foundParent.addChild(mailbox)
+        : root.addChild(mailbox);
+  }
+
+  @override
+  List<Object?> get props => [root];
+}
@@ -0,0 +1,58 @@
+import 'dart:collection';
+
+import 'package:built_collection/built_collection.dart';
+import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
+import 'package:model/mailbox/presentation_mailbox.dart';
+
+import 'mailbox_node.dart';
+import 'mailbox_tree.dart';
+
+class TreeBuilder {
+  Future<MailboxTree> generateMailboxTree(List<PresentationMailbox> mailboxesList) async {
+    final Map<MailboxId, BuiltList<PresentationMailbox>> mapNotFoundParentMailbox = HashMap();
+
+    final tree = MailboxTree(MailboxNode.root());
+    mailboxesList.forEach((mailbox) {
+      if (mailbox.hasParentId()) {
+        final parentId = mailbox.parentId!;
+        final foundParent = tree.findNode(parentId);
+        if (foundParent != null) {
+          _addDescendant(tree, mailbox, maybeDescendant: mapNotFoundParentMailbox);
+        } else {
+          final siblingTrees = mapNotFoundParentMailbox[mailbox.parentId];
+          if (siblingTrees != null) {
+            mapNotFoundParentMailbox.addAll({
+              parentId: (ListBuilder<PresentationMailbox>(siblingTrees)..add(mailbox)).build()
+            });
+          } else {
+            mapNotFoundParentMailbox.addAll({parentId: (ListBuilder<PresentationMailbox>()..add(mailbox)).build()});
+          }
+        }
+      } else {
+        _addDescendant(tree, mailbox, maybeDescendant: mapNotFoundParentMailbox);
+      }
+    });
+    mapNotFoundParentMailbox.forEach((_, listMailbox) {
+      listMailbox.forEach((mailbox) {
+        _addDescendant(tree, mailbox);
+      });
+    });
+    return tree;
+  }
+
+  MailboxNode? _addDescendant(
+      MailboxTree tree,
+      PresentationMailbox mailboxChild,
+      {Map<MailboxId, BuiltList<PresentationMailbox>>? maybeDescendant}
+      ) {
+    final queue = ListQueue<PresentationMailbox>();
+    queue.addLast(mailboxChild);
+    while (queue.isNotEmpty) {
+      final current = queue.removeFirst();
+      tree.insertNode(current);
+      maybeDescendant?.remove(current.id)?.forEach((child) {
+        queue.addLast(child);
+      });
+    }
+  }
+}
@@ -0,0 +1,69 @@
+import 'dart:ui';
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+
+typedef OnOpenMailboxNewFolderActionClick = void Function();
+
+class MailboxNewFolderTileBuilder {
+  final imagePath = Get.find<ImagePaths>();
+
+  String? _icon;
+  String? _name;
+
+  OnOpenMailboxNewFolderActionClick? _onOpenMailboxFolderActionClick;
+
+  MailboxNewFolderTileBuilder();
+
+  MailboxNewFolderTileBuilder addIcon(String icon) {
+    _icon = icon;
+    return this;
+  }
+
+  MailboxNewFolderTileBuilder addName(String name) {
+    _name = name;
+    return this;
+  }
+
+  MailboxNewFolderTileBuilder onOpenMailboxFolderAction(OnOpenMailboxNewFolderActionClick onOpenMailboxFolderActionClick) {
+    _onOpenMailboxFolderActionClick = onOpenMailboxFolderActionClick;
+    return this;
+  }
+
+  Widget build() {
+    return Theme(
+      data: ThemeData(
+        splashColor: Colors.transparent,
+        highlightColor: Colors.transparent),
+      child: Container(
+        key: Key('mailbox_new_folder_tile'),
+        alignment: Alignment.center,
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(16),
+          color: AppColor.mailboxBackgroundColor),
+        child: ListTile(
+          onTap: () => {
+            if (_onOpenMailboxFolderActionClick != null) {
+              _onOpenMailboxFolderActionClick!()
+            }
+          },
+          leading: Transform(
+            transform: Matrix4.translationValues(24.0, 0.0, 0.0),
+            child: _icon != null
+              ? SvgPicture.asset(_icon!, width: 24, height: 24, color: AppColor.mailboxIconColor, fit: BoxFit.fill)
+              : SizedBox.shrink()),
+          title: Transform(
+            transform: Matrix4.translationValues(10.0, 0.0, 0.0),
+            child: Text(
+              _name ?? '',
+              maxLines: 1,
+              style: TextStyle(fontSize: 15, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold),
+            )),
+        )
+      )
+    );
+  }
+}
@@ -0,0 +1,57 @@
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_tree.dart';
+
+typedef OnOpenMailBoxFolderActionClick = void Function(MailboxTree mailboxTree);
+
+class MailBoxFolderTileBuilder extends StatelessWidget {
+
+  final imagePaths = Get.find<ImagePaths>();
+
+  final MailboxNode _mailboxNode;
+
+  final OnOpenMailBoxFolderActionClick? onOpenMailBoxFolderActionClick;
+
+  MailBoxFolderTileBuilder(
+    this._mailboxNode,
+    {
+      this.onOpenMailBoxFolderActionClick
+    }
+  );
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      key: Key('mailbox_folder_tile'),
+      alignment: Alignment.center,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(16),
+        color: AppColor.mailboxBackgroundColor),
+      child: ListTile(
+        leading: Transform(
+          transform: Matrix4.translationValues(20.0, 0.0, 0.0),
+          child: SvgPicture.asset(imagePaths.icMailboxFolder, width: 24, height: 24, color: AppColor.mailboxIconColor, fit: BoxFit.fill)),
+        title: Transform(
+          transform: Matrix4.translationValues(10.0, 0.0, 0.0),
+          child: Text(
+            _mailboxNode.item.name!.name,
+            maxLines: 1,
+            style: TextStyle(fontSize: 15, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold),
+          )),
+        trailing: Transform(
+          transform: Matrix4.translationValues(-16.0, 0.0, 0.0),
+          child: _mailboxNode.hasChildren()
+            ? SvgPicture.asset(
+                imagePaths.icFolderArrow,
+                width: 12,
+                height: 12,
+                color: AppColor.mailboxIconColor,
+                fit: BoxFit.fill)
+            : SizedBox.shrink()))
+    );
+  }
+}
@@ -0,0 +1,86 @@
+import 'dart:ui';
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:model/model.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/extensions/presentation_mailbox_extension.dart';
+
+typedef OnOpenMailboxActionClick = void Function();
+
+class MailboxTileBuilder {
+  final imagePaths = Get.find<ImagePaths>();
+
+  final PresentationMailbox _presentationMailbox;
+
+  OnOpenMailboxActionClick? _onOpenMailboxActionClick;
+
+  MailboxTileBuilder(this._presentationMailbox);
+
+  MailboxTileBuilder onOpenMailboxAction(OnOpenMailboxActionClick onOpenMailboxActionClick) {
+    _onOpenMailboxActionClick = onOpenMailboxActionClick;
+    return this;
+  }
+
+  Widget build() {
+    return Theme(
+      data: ThemeData(
+        splashColor: Colors.transparent,
+        highlightColor: Colors.transparent),
+      child: Container(
+        key: Key('mailbox_list_tile'),
+        alignment: Alignment.center,
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(16),
+          color: _presentationMailbox.selectMode == SelectMode.ACTIVE
+            ? AppColor.mailboxSelectedBackgroundColor
+            : AppColor.mailboxBackgroundColor),
+        child: ListTile(
+          focusColor: AppColor.primaryLightColor,
+          hoverColor: AppColor.primaryLightColor,
+          onTap: () => {
+            if (_onOpenMailboxActionClick != null) {
+              _onOpenMailboxActionClick!()
+            }
+          },
+          leading: Transform(
+            transform: Matrix4.translationValues(20.0, 0.0, 0.0),
+            child: SvgPicture.asset(
+              '${_presentationMailbox.getMailboxIcon(imagePaths)}',
+              width: 24,
+              height: 24,
+              color: _presentationMailbox.selectMode == SelectMode.ACTIVE
+                ? AppColor.mailboxSelectedIconColor
+                : AppColor.mailboxIconColor,
+              fit: BoxFit.fill)),
+          title: Transform(
+            transform: Matrix4.translationValues(8.0, 0.0, 0.0),
+            child: Text(
+              _presentationMailbox.name!.name,
+              maxLines: 1,
+              overflow:TextOverflow.ellipsis,
+              style: TextStyle(
+                fontSize: 15,
+                color: _presentationMailbox.selectMode == SelectMode.ACTIVE
+                  ? AppColor.mailboxSelectedTextColor
+                  : AppColor.mailboxTextColor,
+                fontWeight: FontWeight.bold),
+            )),
+          trailing: Transform(
+            transform: Matrix4.translationValues(-16.0, 0.0, 0.0),
+            child: Text(
+              '${_presentationMailbox.getCountUnReadEmails()}',
+              maxLines: 1,
+              style: TextStyle(
+                fontSize: 15,
+                color: _presentationMailbox.selectMode == SelectMode.ACTIVE
+                  ? AppColor.mailboxSelectedTextNumberColor
+                  : AppColor.mailboxTextNumberColor,
+                fontWeight: FontWeight.bold))
+          )),
+      )
+    );
+  }
+}
@@ -0,0 +1,67 @@
+import 'dart:ui';
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:flutter_typeahead/flutter_typeahead.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+typedef OnNewSearchQuery = Function(String);
+
+class SearchFormWidgetBuilder {
+  final imagePath = Get.find<ImagePaths>();
+  final TextEditingController _typeAheadController = TextEditingController();
+
+  final BuildContext _context;
+
+  OnNewSearchQuery? _onNewSearchQuery;
+
+  SearchFormWidgetBuilder(this._context);
+
+  SearchFormWidgetBuilder onNewSearchQuery(OnNewSearchQuery onNewSearchQuery) {
+    _onNewSearchQuery = onNewSearchQuery;
+    return this;
+  }
+
+  Widget build() {
+    return Container(
+      key: Key('search_folder_form'),
+      alignment: Alignment.center,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(16),
+        border: Border.all(color: AppColor.searchBorderColor),
+        color: AppColor.primaryLightColor),
+      child: TypeAheadFormField(
+        textFieldConfiguration: TextFieldConfiguration(
+          controller: _typeAheadController,
+          textInputAction: TextInputAction.done,
+          decoration: InputDecoration(
+            border: InputBorder.none,
+            focusedBorder: InputBorder.none,
+            enabledBorder: InputBorder.none,
+            contentPadding: EdgeInsets.only(left: 0, top: 15, bottom: 15, right: 15),
+            hintText: AppLocalizations.of(_context).search_folder,
+            hintStyle: TextStyle(color: AppColor.searchHintTextColor, fontSize: 15.0, fontWeight: FontWeight.w500),
+            icon: Padding(
+              padding: EdgeInsets.only(left: 20),
+              child: SvgPicture.asset(imagePath.icSearch, width: 24, height: 24, fit: BoxFit.fill),
+            ))),
+        debounceDuration: Duration(milliseconds: 300),
+        suggestionsCallback: (pattern) async {
+          if (_onNewSearchQuery != null) {
+            _onNewSearchQuery!(pattern);
+          }
+          return [];
+        },
+        itemBuilder: (BuildContext context, itemData) => SizedBox.shrink(),
+        onSuggestionSelected: (suggestion) {},
+        noItemsFoundBuilder: (context) => SizedBox(),
+        hideOnEmpty: true,
+        hideOnError: true,
+        hideOnLoading: true,
+        hideSuggestionsOnKeyboardHide: true,
+      ));
+  }
+}
@@ -0,0 +1,51 @@
+import 'dart:ui';
+
+import 'package:core/core.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class StorageWidgetBuilder {
+  final imagePath = Get.find<ImagePaths>();
+  final BuildContext _context;
+
+  StorageWidgetBuilder(this._context);
+
+  Widget build() {
+    return Container(
+      key: Key('storage_widget'),
+      padding: EdgeInsets.only(left: 40, top: 16, bottom: 20, right: 40),
+      color: AppColor.storageBackgroundColor,
+      alignment: Alignment.bottomLeft,
+      height: 112,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            AppLocalizations.of(_context).storage,
+            maxLines: 1,
+            style: TextStyle(fontSize: 12, color: AppColor.storageTitleColor, fontWeight: FontWeight.w500)),
+          Padding(
+            padding: EdgeInsets.only(top: 8.0),
+            child: RichText(
+              text: TextSpan(
+                style: TextStyle(fontSize: 16, color: AppColor.storageMaxSizeColor, fontWeight: FontWeight.w700),
+                children: [
+                  TextSpan(
+                    text: '299.6MB',
+                    style: TextStyle(fontWeight: FontWeight.w700, fontSize: 16, color: AppColor.storageUseSizeColor)),
+                  TextSpan(
+                    text: ' / unlimited',
+                    style: TextStyle(fontWeight: FontWeight.w700, fontSize: 16, color: AppColor.storageMaxSizeColor))
+                ]
+              )
+            )
+          )
+        ]
+      )
+    );
+  }
+}
@@ -0,0 +1,59 @@
+import 'dart:ui';
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+
+typedef OnOpenUserInformationActionClick = void Function();
+
+class UserInformationWidgetBuilder {
+  final imagePath = Get.find<ImagePaths>();
+
+  OnOpenUserInformationActionClick? _onOpenUserInformationActionClick;
+
+  UserInformationWidgetBuilder();
+
+  UserInformationWidgetBuilder onOpenUserInformationAction(
+      OnOpenUserInformationActionClick onOpenUserInformationActionClick) {
+    _onOpenUserInformationActionClick = onOpenUserInformationActionClick;
+    return this;
+  }
+
+  Widget build() {
+    return Container(
+      key: Key('user_information_widget'),
+      alignment: Alignment.center,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(16),
+        color: AppColor.userInformationBackgroundColor),
+      child: ListTile(
+        onTap: () {
+          if (_onOpenUserInformationActionClick != null) {
+            _onOpenUserInformationActionClick!();
+          }
+        },
+        leading: SvgPicture.asset(imagePath.icTMailLogo, width: 40, height: 40, fit: BoxFit.fill),
+        title: Transform(
+          transform: Matrix4.translationValues(0.0, 0.0, 0.0),
+          child: Text(
+            'John Doe',
+            maxLines: 1,
+            style: TextStyle(fontSize: 16, color: AppColor.nameUserColor, fontWeight: FontWeight.w500),
+          )),
+        subtitle: Transform(
+          transform: Matrix4.translationValues(0.0, 4.0, 0.0),
+          child: Text(
+            'user@example.com',
+            maxLines: 1,
+            style: TextStyle(fontSize: 12, color: AppColor.emailUserColor, fontWeight: FontWeight.w500),
+          )),
+        trailing: Transform(
+          transform: Matrix4.translationValues(0.0, 0.0, 0.0),
+          child: IconButton(
+            icon: SvgPicture.asset(imagePath.icNextArrow, width: 7, height: 12, fit: BoxFit.fill),
+            onPressed: () => {}))),
+    );
+  }
+}