TF-3911 Add Keyboard shortcuts dictionary in Setting

2025-10-02 13:25:29 +07:00
parent 846c9c6583
commit 0bd60ea83d
26 changed files with 991 additions and 147 deletions
@@ -0,0 +1,66 @@
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/model/keyboard_shortcuts/keyboard_shortcut.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+extension ShortcutContextText on ShortcutContext {
+  String getDisplayName(AppLocalizations appLocalizations) {
+    switch (this) {
+      case ShortcutContext.mailComposer:
+        return appLocalizations.mailComposer;
+      case ShortcutContext.focusOnSearch:
+        return appLocalizations.focusOnSearch;
+      case ShortcutContext.openedModal:
+        return appLocalizations.openedModal;
+      case ShortcutContext.mailboxList:
+        return appLocalizations.mailboxList;
+      case ShortcutContext.openedMailView:
+        return appLocalizations.openedMailView;
+      case ShortcutContext.mailboxListWithSelectedEmail:
+        return appLocalizations.mailboxListWithSelectedMail;
+    }
+  }
+}
+
+extension ShortcutCategoryText on ShortcutCategory {
+  String getDisplayName(
+    AppLocalizations appLocalizations, {
+    bool isDesktop = false,
+  }) {
+    switch (this) {
+      case ShortcutCategory.navigationAndClosing:
+        return !isDesktop
+            ? appLocalizations.navigation
+            : appLocalizations.navigationAndClosing;
+      case ShortcutCategory.readingAndReplying:
+        return !isDesktop
+            ? appLocalizations.reading
+            : appLocalizations.readingAndReplying;
+      case ShortcutCategory.messageManagementAndSelection:
+        return !isDesktop
+            ? appLocalizations.message
+            : appLocalizations.messageManagementAndSelection;
+    }
+  }
+
+  String getIcon(ImagePaths imagePaths) {
+    switch (this) {
+      case ShortcutCategory.navigationAndClosing:
+        return imagePaths.icNavigation;
+      case ShortcutCategory.readingAndReplying:
+        return imagePaths.icReading;
+      case ShortcutCategory.messageManagementAndSelection:
+        return imagePaths.icMessage;
+    }
+  }
+
+  double getTabWidth() {
+    switch (this) {
+      case ShortcutCategory.navigationAndClosing:
+        return 174;
+      case ShortcutCategory.readingAndReplying:
+        return 164;
+      case ShortcutCategory.messageManagementAndSelection:
+        return 280;
+    }
+  }
+}
@@ -0,0 +1,190 @@
+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/theme_utils.dart';
+import 'package:core/utils/platform_info.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_custom_tab_bar/custom_tab_bar.dart';
+import 'package:flutter_custom_tab_bar/indicator/custom_indicator.dart';
+import 'package:flutter_custom_tab_bar/indicator/linear_indicator.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/base/setting_detail_view_builder.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/extensions/keyboard_shortcut_extension.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/keyboard_shortcuts/widgets/shortcut_category_list_widget.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/keyboard_shortcuts/widgets/shortcut_tab_bar_widget.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/model/account_menu_item.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/model/keyboard_shortcuts/keyboard_shortcut.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/model/keyboard_shortcuts/keyboard_shortcuts_manager.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/widgets/setting_explanation_widget.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/widgets/setting_header_widget.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class KeyboardShortcutsView extends StatefulWidget {
+  const KeyboardShortcutsView({Key? key}) : super(key: key);
+
+  @override
+  State<KeyboardShortcutsView> createState() => _KeyboardShortcutsViewState();
+}
+
+class _KeyboardShortcutsViewState extends State<KeyboardShortcutsView> {
+  static const double _desktopTabViewMaxWidth = 618;
+
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+  final _imagePaths = Get.find<ImagePaths>();
+  final _categories = ShortcutCategory.values;
+
+  late final CustomTabBarController _tabBarController;
+  late final PageController _pageController;
+
+  @override
+  void initState() {
+    super.initState();
+    _tabBarController = CustomTabBarController();
+    _pageController = PageController();
+  }
+
+  @override
+  void dispose() {
+    _pageController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final appLocalizations = AppLocalizations.of(context);
+    final allShortcuts = KeyboardShortcutsManager.generateKeyboardShortcuts(
+      appLocalizations,
+    );
+    final isDesktop = _responsiveUtils.isDesktop(context);
+    double tabBarMaxHeight = isDesktop ? 52 : 82;
+
+    return SettingDetailViewBuilder(
+      responsiveUtils: _responsiveUtils,
+      child: Container(
+        color: SettingsUtils.getContentBackgroundColor(
+          context,
+          _responsiveUtils,
+        ),
+        decoration: SettingsUtils.getBoxDecorationForContent(
+          context,
+          _responsiveUtils,
+        ),
+        width: double.infinity,
+        padding: isDesktop
+            ? const EdgeInsets.symmetric(vertical: 30, horizontal: 22)
+            : null,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            if (_responsiveUtils.isWebDesktop(context))
+              SettingHeaderWidget(
+                menuItem: AccountMenuItem.keyboardShortcuts,
+                textStyle: ThemeUtils.textStyleInter600().copyWith(
+                  color: Colors.black.withValues(alpha: 0.9),
+                ),
+                padding: EdgeInsets.zero,
+              )
+            else
+              const SettingExplanationWidget(
+                menuItem: AccountMenuItem.keyboardShortcuts,
+                padding: EdgeInsetsDirectional.only(
+                  start: 16,
+                  end: 16,
+                  bottom: 16,
+                ),
+                isCenter: true,
+                textAlign: TextAlign.center,
+              ),
+            Expanded(
+              child: Padding(
+                padding: SettingsUtils.getBodyPadding(
+                  context,
+                  _responsiveUtils,
+                ),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    LayoutBuilder(
+                      builder: (context, constraints) {
+                        final maxWidth = constraints.maxWidth;
+                        final countCategories = _categories.length;
+
+                        return Stack(
+                          children: [
+                            CustomTabBar(
+                              tabBarController: _tabBarController,
+                              height: tabBarMaxHeight,
+                              width: isDesktop
+                                  ? _desktopTabViewMaxWidth
+                                  : maxWidth,
+                              itemCount: countCategories,
+                              builder: (_, index) {
+                                final category = _categories[index];
+                                return ShortcutTabBarWidget(
+                                  index: index,
+                                  label: category.getDisplayName(
+                                    appLocalizations,
+                                    isDesktop: isDesktop,
+                                  ),
+                                  icon: isDesktop
+                                      ? null
+                                      : category.getIcon(_imagePaths),
+                                  width: isDesktop
+                                      ? category.getTabWidth()
+                                      : maxWidth / countCategories,
+                                  height: tabBarMaxHeight,
+                                );
+                              },
+                              indicator: LinearIndicator(
+                                color: AppColor.primaryLinShare,
+                                height: 1,
+                                bottom: 0,
+                              ),
+                              pageController: _pageController,
+                            ),
+                            PositionedDirectional(
+                              bottom: 0,
+                              start: 0,
+                              end: 0,
+                              child: Divider(
+                                color: Colors.black.withValues(alpha: 0.12),
+                              ),
+                            ),
+                          ],
+                        );
+                      }
+                    ),
+                    Expanded(
+                      child: SizedBox(
+                        width: isDesktop
+                            ? _desktopTabViewMaxWidth
+                            : double.infinity,
+                        child: PageView.builder(
+                          controller: _pageController,
+                          itemCount: _categories.length,
+                          physics: PlatformInfo.isMobile
+                              ? const PageScrollPhysics()
+                              : const NeverScrollableScrollPhysics(),
+                          itemBuilder: (_, index) {
+                            final category = _categories[index];
+                            final shortcutsByCategory = allShortcuts
+                              .where((shortcut) => shortcut.category == category)
+                              .toList();
+                            return ShortcutCategoryList(
+                              shortcutsByCategory: shortcutsByCategory,
+                            );
+                          },
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/keyboard_shortcuts/widgets/shortcut_row_widget.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/model/keyboard_shortcuts/keyboard_shortcut.dart';
+
+class ShortcutCategoryList extends StatelessWidget {
+  final List<KeyboardShortcut> shortcutsByCategory;
+
+  const ShortcutCategoryList({
+    super.key,
+    required this.shortcutsByCategory,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView.builder(
+      padding: const EdgeInsets.only(top: 40),
+      itemCount: shortcutsByCategory.length,
+      itemBuilder: (_, index) {
+        final item = shortcutsByCategory[index];
+        return ShortcutRow(item: item);
+      },
+    );
+  }
+}
@@ -0,0 +1,30 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
+class ShortcutKeyWidget extends StatelessWidget {
+  final String label;
+
+  const ShortcutKeyWidget({super.key, required this.label});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsetsDirectional.only(end: 4),
+      padding: const EdgeInsets.all(6),
+      decoration: BoxDecoration(
+        color: AppColor.blue100,
+        borderRadius: const BorderRadius.all(Radius.circular(2)),
+        border: Border.all(
+          width: 1,
+          color: AppColor.gray200,
+        ),
+      ),
+      child: Text(
+        label,
+        style: Theme.of(context).textTheme.bodySmall?.copyWith(
+              color: Colors.black.withValues(alpha: 0.88),
+            ),
+      ),
+    );
+  }
+}
@@ -0,0 +1,47 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/extensions/keyboard_shortcut_extension.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/keyboard_shortcuts/widgets/shortcut_key_widget.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/model/keyboard_shortcuts/keyboard_shortcut.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class ShortcutRow extends StatelessWidget {
+  final KeyboardShortcut item;
+
+  const ShortcutRow({super.key, required this.item});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsetsDirectional.only(
+        top: 5,
+        bottom: 21,
+      ),
+      child: Wrap(
+        spacing: 27,
+        runSpacing: 8,
+        crossAxisAlignment: WrapCrossAlignment.center,
+        children: [
+          Text(
+            item.label,
+            style: ThemeUtils.textStyleBodyBody3(
+              color: Colors.black,
+            ),
+          ),
+          Text(
+            item.context.getDisplayName(AppLocalizations.of(context)),
+            style: ThemeUtils.textStyleBodyBody3(
+              color: AppColor.gray424244.withValues(alpha: 0.64),
+            ),
+          ),
+          Row(
+            mainAxisSize: MainAxisSize.min,
+            children:
+                item.keys.map((key) => ShortcutKeyWidget(label: key)).toList(),
+          ),
+        ],
+      ),
+    );
+  }
+}
@@ -0,0 +1,79 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_custom_tab_bar/library.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+class ShortcutTabBarWidget extends StatelessWidget {
+  final int index;
+  final String label;
+  final String? icon;
+  final double? height;
+  final double? width;
+
+  const ShortcutTabBarWidget({
+    super.key,
+    required this.index,
+    required this.label,
+    this.icon,
+    this.height,
+    this.width,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final labelWidget = Text(
+      label,
+      style: ThemeUtils.textStyleInter400.copyWith(
+        fontSize: 14,
+        height: 20 / 14,
+        letterSpacing: 0.25,
+        color: AppColor.gray424244,
+      ),
+      textAlign: TextAlign.center,
+      maxLines: 2,
+      overflow: TextOverflow.ellipsis,
+    );
+
+    return TabBarItem(
+      index: index,
+      transform: ColorsTransform(
+        highlightColor: AppColor.gray424244,
+        normalColor: AppColor.gray424244,
+        builder: (context, _) {
+          if (icon != null) {
+            return Container(
+              height: height,
+              width: width,
+              alignment: Alignment.center,
+              padding: const EdgeInsets.symmetric(horizontal: 16),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  SvgPicture.asset(
+                    icon!,
+                    width: 20,
+                    height: 20,
+                    colorFilter: AppColor.gray686E76.asFilter(),
+                    fit: BoxFit.fill,
+                  ),
+                  const SizedBox(height: 10),
+                  labelWidget,
+                ],
+              ),
+            );
+          } else {
+            return Container(
+              height: height,
+              width: width,
+              alignment: Alignment.center,
+              margin: EdgeInsets.zero,
+              padding: const EdgeInsets.symmetric(horizontal: 16),
+              child: labelWidget,
+            );
+          }
+        },
+      ),
+    );
+  }
+}
@@ -14,6 +14,7 @@ import 'package:tmail_ui_user/features/manage_account/presentation/extensions/va
 import 'package:tmail_ui_user/features/manage_account/presentation/extensions/validate_setting_capability_supported_extension.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/forward/forward_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/identities/identities_view.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/keyboard_shortcuts/keyboard_shortcuts_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/language_and_region_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/manage_account_dashboard_controller.dart';
@@ -175,6 +176,8 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl
          } else {
            return const SizedBox.shrink();
          }
+        case AccountMenuItem.keyboardShortcuts:
+          return const KeyboardShortcutsView();
        default:
          return const SizedBox.shrink();
      }
@@ -1,5 +1,6 @@
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/base/mixin/contact_support_mixin.dart';
@@ -16,7 +17,8 @@ class ManageAccountMenuController extends GetxController with ContactSupportMixi
  final listAccountMenuItem = RxList<AccountMenuItem>([
    AccountMenuItem.profiles,
    AccountMenuItem.mailboxVisibility,
-    AccountMenuItem.languageAndRegion,
+    if (PlatformInfo.isWeb)
+      AccountMenuItem.keyboardShortcuts,
  ]);

  late Worker _quotaRxWorker;
@@ -58,6 +60,8 @@ class ManageAccountMenuController extends GetxController with ContactSupportMixi
      AccountMenuItem.mailboxVisibility,
      if (dashBoardController.isLanguageSettingDisplayed)
        AccountMenuItem.languageAndRegion,
+      if (PlatformInfo.isWeb)
+        AccountMenuItem.keyboardShortcuts,
    ];
    listAccountMenuItem.value = newListMenuSetting;

@@ -3,7 +3,9 @@ import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/base/mixin/contact_support_mixin.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/profile_setting/profile_setting_action_type.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/extensions/export_trace_log_extension.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/extensions/handle_profile_setting_action_type_click_extension.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/manage_account_dashboard_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/model/account_menu_item.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/model/settings_page_level.dart';
@@ -13,7 +15,16 @@ class SettingsController extends GetxController with ContactSupportMixin {
  final responsiveUtils = Get.find<ResponsiveUtils>();
  final imagePaths = Get.find<ImagePaths>();

-  void selectSettings(AccountMenuItem accountMenuItem) => manageAccountDashboardController.selectSettings(accountMenuItem);
+  void selectSettings(BuildContext context, AccountMenuItem accountMenuItem) {
+    if (accountMenuItem == AccountMenuItem.signOut) {
+      manageAccountDashboardController.handleProfileSettingActionTypeClick(
+        context: context,
+        actionType: ProfileSettingActionType.signOut,
+      );
+    } else {
+      manageAccountDashboardController.selectSettings(accountMenuItem);
+    }
+  }

  void backToUniversalSettings() => manageAccountDashboardController.backToUniversalSettings();

@@ -5,8 +5,6 @@ import 'package:get/get.dart';
 import 'package:model/extensions/session_extension.dart';
 import 'package:tmail_ui_user/features/home/domain/extensions/session_extensions.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/user_information_widget.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/profile_setting/profile_setting_action_type.dart';
-import 'package:tmail_ui_user/features/manage_account/presentation/extensions/handle_profile_setting_action_type_click_extension.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings/settings_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/menu/widgets/setting_first_level_tile_builder.dart';
@@ -19,6 +17,20 @@ class SettingsFirstLevelView extends GetWidget<SettingsController> {

  @override
  Widget build(BuildContext context) {
+    final indent = SettingsUtils.getHorizontalPadding(
+      context,
+      controller.responsiveUtils,
+    );
+
+    final appLocalizations = AppLocalizations.of(context);
+
+    final divider = Divider(
+      color: AppColor.colorDividerHorizontal,
+      height: 1,
+      indent: indent,
+      endIndent: indent,
+    );
+
    return SingleChildScrollView(
      key: const Key('setting_menu'),
      child: Column(children: [
@@ -43,40 +55,23 @@ class SettingsFirstLevelView extends GetWidget<SettingsController> {
            titlePadding: const EdgeInsetsDirectional.only(start: 16),
          );
        }),
-        Divider(
-          color: AppColor.colorDividerHorizontal,
-          height: 1,
-          indent: SettingsUtils.getHorizontalPadding(context, controller.responsiveUtils),
-          endIndent: SettingsUtils.getHorizontalPadding(context, controller.responsiveUtils)
-        ),
-        SettingFirstLevelTileBuilder(
+        divider,
+        _buildSettingItem(
          key: const Key('setting_profiles'),
-          AppLocalizations.of(context).profiles,
-          AccountMenuItem.profiles.getIcon(controller.imagePaths),
-          subtitle: AppLocalizations.of(context).profilesSettingExplanation,
-          () => controller.selectSettings(AccountMenuItem.profiles)
-        ),
-        Divider(
-          color: AppColor.colorDividerHorizontal,
-          height: 1,
-          indent: SettingsUtils.getHorizontalPadding(context, controller.responsiveUtils),
-          endIndent: SettingsUtils.getHorizontalPadding(context, controller.responsiveUtils)
+          context: context,
+          menuItem: AccountMenuItem.profiles,
+          appLocalizations: appLocalizations,
        ),
+        divider,
        Obx(() {
          if (controller.manageAccountDashboardController.isRuleFilterCapabilitySupported) {
            return Column(children: [
-              SettingFirstLevelTileBuilder(
-                AccountMenuItem.emailRules.getName(AppLocalizations.of(context)),
-                AccountMenuItem.emailRules.getIcon(controller.imagePaths),
-                subtitle: AppLocalizations.of(context).emailRuleSettingExplanation,
-                () => controller.selectSettings(AccountMenuItem.emailRules)
-              ),
-              Divider(
-                color: AppColor.colorDividerHorizontal,
-                height: 1,
-                indent: SettingsUtils.getHorizontalPadding(context, controller.responsiveUtils),
-                endIndent: SettingsUtils.getHorizontalPadding(context, controller.responsiveUtils)
+              _buildSettingItem(
+                context: context,
+                menuItem: AccountMenuItem.emailRules,
+                appLocalizations: appLocalizations,
              ),
+              divider,
            ]);
          } else {
            return const SizedBox.shrink();
@@ -85,19 +80,13 @@ class SettingsFirstLevelView extends GetWidget<SettingsController> {
        Obx(() {
          if (controller.manageAccountDashboardController.isServerSettingsCapabilitySupported) {
            return Column(children: [
-              SettingFirstLevelTileBuilder(
+              _buildSettingItem(
                key: const ValueKey('setting_preferences'),
-                AccountMenuItem.preferences.getName(AppLocalizations.of(context)),
-                AccountMenuItem.preferences.getIcon(controller.imagePaths),
-                subtitle: AppLocalizations.of(context).emailReadReceiptsSettingExplanation,
-                () => controller.selectSettings(AccountMenuItem.preferences)
-              ),
-              Divider(
-                color: AppColor.colorDividerHorizontal,
-                height: 1,
-                indent: SettingsUtils.getHorizontalPadding(context, controller.responsiveUtils),
-                endIndent: SettingsUtils.getHorizontalPadding(context, controller.responsiveUtils)
+                context: context,
+                menuItem: AccountMenuItem.preferences,
+                appLocalizations: appLocalizations,
              ),
+              divider,
            ]);
          } else {
            return const SizedBox.shrink();
@@ -106,18 +95,12 @@ class SettingsFirstLevelView extends GetWidget<SettingsController> {
        Obx(() {
          if (controller.manageAccountDashboardController.isForwardCapabilitySupported) {
            return Column(children: [
-              SettingFirstLevelTileBuilder(
-                AccountMenuItem.forward.getName(AppLocalizations.of(context)),
-                AccountMenuItem.forward.getIcon(controller.imagePaths),
-                subtitle: AppLocalizations.of(context).forwardingSettingExplanation,
-                () => controller.selectSettings(AccountMenuItem.forward)
-              ),
-              Divider(
-                color: AppColor.colorDividerHorizontal,
-                height: 1,
-                indent: SettingsUtils.getHorizontalPadding(context, controller.responsiveUtils),
-                endIndent: SettingsUtils.getHorizontalPadding(context, controller.responsiveUtils)
+              _buildSettingItem(
+                context: context,
+                menuItem: AccountMenuItem.forward,
+                appLocalizations: appLocalizations,
              ),
+              divider,
            ]);
          } else {
            return const SizedBox.shrink();
@@ -126,28 +109,21 @@ class SettingsFirstLevelView extends GetWidget<SettingsController> {
        Obx(() {
          if (controller.manageAccountDashboardController.isVacationCapabilitySupported) {
            return Column(children: [
-              SettingFirstLevelTileBuilder(
-                AccountMenuItem.vacation.getName(AppLocalizations.of(context)),
-                AccountMenuItem.vacation.getIcon(controller.imagePaths),
-                subtitle: AppLocalizations.of(context).vacationSettingExplanation,
-                () => controller.selectSettings(AccountMenuItem.vacation)
-              ),
-              Divider(
-                color: AppColor.colorDividerHorizontal,
-                height: 1,
-                indent: SettingsUtils.getHorizontalPadding(context, controller.responsiveUtils),
-                endIndent: SettingsUtils.getHorizontalPadding(context, controller.responsiveUtils)
+              _buildSettingItem(
+                context: context,
+                menuItem: AccountMenuItem.vacation,
+                appLocalizations: appLocalizations,
              ),
+              divider,
            ]);
          } else {
            return const SizedBox.shrink();
          }
        }),
-        SettingFirstLevelTileBuilder(
-          AccountMenuItem.mailboxVisibility.getName(AppLocalizations.of(context)),
-          AccountMenuItem.mailboxVisibility.getIcon(controller.imagePaths),
-          subtitle: AppLocalizations.of(context).folderVisibilitySubtitle,
-          () => controller.selectSettings(AccountMenuItem.mailboxVisibility)
+        _buildSettingItem(
+          context: context,
+          menuItem: AccountMenuItem.mailboxVisibility,
+          appLocalizations: appLocalizations,
        ),
        Obx(() {
          if (!controller.manageAccountDashboardController.isLanguageSettingDisplayed) {
@@ -155,41 +131,24 @@ class SettingsFirstLevelView extends GetWidget<SettingsController> {
          }

          return Column(children: [
-            Divider(
-              color: AppColor.colorDividerHorizontal,
-              height: 1,
-              indent: SettingsUtils.getHorizontalPadding(context, controller.responsiveUtils),
-              endIndent: SettingsUtils.getHorizontalPadding(context, controller.responsiveUtils)
-            ),
-            SettingFirstLevelTileBuilder(
+            divider,
+            _buildSettingItem(
              key: const Key('setting_language_region'),
-              AccountMenuItem.languageAndRegion.getName(AppLocalizations.of(context)),
-              AccountMenuItem.languageAndRegion.getIcon(controller.imagePaths),
-              () => controller.selectSettings(AccountMenuItem.languageAndRegion)
+              context: context,
+              menuItem: AccountMenuItem.languageAndRegion,
+              appLocalizations: appLocalizations,
            ),
          ]);
        }),
        Obx(() {
          if (controller.manageAccountDashboardController.octetsQuota.value != null) {
            return Column(children: [
-              Divider(
-                color: AppColor.colorDividerHorizontal,
-                height: 1,
-                indent: SettingsUtils.getHorizontalPadding(
-                  context,
-                  controller.responsiveUtils,
-                ),
-                endIndent: SettingsUtils.getHorizontalPadding(
-                  context,
-                  controller.responsiveUtils,
-                ),
-              ),
-              SettingFirstLevelTileBuilder(
+              divider,
+              _buildSettingItem(
                key: const ValueKey('setting_storage'),
-                AccountMenuItem.storage.getName(AppLocalizations.of(context)),
-                AccountMenuItem.storage.getIcon(controller.imagePaths),
-                subtitle: AppLocalizations.of(context).storageSettingExplanation,
-                () => controller.selectSettings(AccountMenuItem.storage),
+                context: context,
+                menuItem: AccountMenuItem.keyboardShortcuts,
+                appLocalizations: appLocalizations,
              ),
            ]);
          } else {
@@ -199,18 +158,12 @@ class SettingsFirstLevelView extends GetWidget<SettingsController> {
        Obx(() {
          if (controller.manageAccountDashboardController.isFcmCapabilitySupported && PlatformInfo.isMobile) {
            return Column(children: [
-              Divider(
-                  color: AppColor.colorDividerHorizontal,
-                  height: 1,
-                  indent: SettingsUtils.getHorizontalPadding(context, controller.responsiveUtils),
-                  endIndent: SettingsUtils.getHorizontalPadding(context, controller.responsiveUtils)
+              divider,
+              _buildSettingItem(
+                context: context,
+                menuItem: AccountMenuItem.notification,
+                appLocalizations: appLocalizations,
              ),
-              SettingFirstLevelTileBuilder(
-                AppLocalizations.of(context).notification,
-                controller.imagePaths.icNotification,
-                    () => controller.selectSettings(AccountMenuItem.notification),
-                subtitle: AppLocalizations.of(context).allowsTwakeMailToNotifyYouWhenANewMessageArrivesOnYourPhone,
-              )
            ]);
          } else {
            return const SizedBox.shrink();
@@ -232,45 +185,41 @@ class SettingsFirstLevelView extends GetWidget<SettingsController> {
          if (contactSupportCapability?.isAvailable != true) return const SizedBox.shrink();

          return Column(children: [
-            Divider(
-              color: AppColor.colorDividerHorizontal,
-              height: 1,
-              indent: SettingsUtils.getHorizontalPadding(
-                context,
-                controller.responsiveUtils,
-              ),
-              endIndent: SettingsUtils.getHorizontalPadding(
-                context,
-                controller.responsiveUtils,
-              ),
-            ),
-            SettingFirstLevelTileBuilder(
-              AccountMenuItem.contactSupport.getName(AppLocalizations.of(context)),
-              AccountMenuItem.contactSupport.getIcon(controller.imagePaths),
-              () => controller.onGetHelpOrReportBug(
+            divider,
+            _buildSettingItem(
+              context: context,
+              menuItem: AccountMenuItem.contactSupport,
+              appLocalizations: appLocalizations,
+              onActionCallback: () => controller.onGetHelpOrReportBug(
                contactSupportCapability!,
                route: AppRoutes.settings,
              ),
            ),
          ]);
        }),
-        Divider(
-          color: AppColor.colorDividerHorizontal,
-          height: 1,
-          indent: SettingsUtils.getHorizontalPadding(context, controller.responsiveUtils),
-          endIndent: SettingsUtils.getHorizontalPadding(context, controller.responsiveUtils)
-        ),
-        SettingFirstLevelTileBuilder(
-          AppLocalizations.of(context).sign_out,
-          controller.imagePaths.icSignOut,
-          () => controller
-            .manageAccountDashboardController
-            .handleProfileSettingActionTypeClick(
-              context: context,
-              actionType: ProfileSettingActionType.signOut,
-            )
+        divider,
+        _buildSettingItem(
+          context: context,
+          menuItem: AccountMenuItem.signOut,
+          appLocalizations: appLocalizations,
        ),
      ]),
    );
  }
+
+  Widget _buildSettingItem({
+    required BuildContext context,
+    required AccountMenuItem menuItem,
+    required AppLocalizations appLocalizations,
+    Key? key,
+    VoidCallback? onActionCallback,
+  }) {
+    return SettingFirstLevelTileBuilder(
+      key: key,
+      menuItem.getName(appLocalizations),
+      menuItem.getIcon(controller.imagePaths),
+      subtitle: menuItem.getExplanation(appLocalizations),
+      onActionCallback ?? () => controller.selectSettings(context, menuItem),
+    );
+  }
 }
@@ -5,6 +5,7 @@ import 'package:tmail_ui_user/features/manage_account/presentation/extensions/va
 import 'package:tmail_ui_user/features/manage_account/presentation/extensions/validate_setting_capability_supported_extension.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/forward/forward_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/identities/identities_view.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/keyboard_shortcuts/keyboard_shortcuts_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/language_and_region_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings/setting_app_bar.dart';
@@ -145,6 +146,8 @@ class SettingsView extends GetWidget<SettingsController> {
          } else {
            return const SizedBox.shrink();
          }
+        case AccountMenuItem.keyboardShortcuts:
+          return const KeyboardShortcutsView();
        default:
          return const SizedBox.shrink();
      }
@@ -149,4 +149,17 @@ class SettingsUtils {
      return const EdgeInsetsDirectional.symmetric(vertical: 8);
    }
  }
+
+  static EdgeInsetsGeometry getBodyPadding(
+    BuildContext context,
+    ResponsiveUtils responsiveUtils,
+  ) {
+    if (responsiveUtils.isMobile(context)) {
+      return const EdgeInsetsDirectional.only(top: 16, start: 24, end: 24);
+    } else if (responsiveUtils.isDesktop(context)) {
+      return const EdgeInsetsDirectional.only(top: 36);
+    } else {
+      return const EdgeInsetsDirectional.only(top: 16, start: 44, end: 44);
+    }
+  }
 }
@@ -20,7 +20,7 @@ class SettingFirstLevelTileBuilder extends StatelessWidget {
    this.clickAction,
    {
      Key? key,
-      this.subtitle
+      this.subtitle = '',
    }
  ) : super(key: key);

@@ -29,7 +29,7 @@ class SettingFirstLevelTileBuilder extends StatelessWidget {

  final String settingIcon;
  final String title;
-  final String? subtitle;
+  final String subtitle;
  final SettingFirstLevelTileClickAction clickAction;

  @override
@@ -70,7 +70,7 @@ class SettingFirstLevelTileBuilder extends StatelessWidget {
                      ))
                    ],
                  ),
-                  subtitle != null
+                  subtitle.isNotEmpty
                    ? Padding(
                        padding: EdgeInsets.only(
                          left: AppUtils.isDirectionRTL(context) ? 12 : _getSubtitleLeftPadding(context),
@@ -78,7 +78,7 @@ class SettingFirstLevelTileBuilder extends StatelessWidget {
                          top: 12
                        ),
                        child: Text(
-                          subtitle!,
+                          subtitle,
                          style: ThemeUtils.defaultTextStyleInterFont.copyWith(
                            fontSize: 13,
                            color: AppColor.colorContentEmail,
@@ -13,6 +13,7 @@ enum AccountMenuItem {
  notification,
  contactSupport,
  storage,
+  keyboardShortcuts,
  signOut,
  none;

@@ -38,6 +39,8 @@ enum AccountMenuItem {
        return imagePaths.icHelp;
      case AccountMenuItem.storage:
        return imagePaths.icStorage;
+      case AccountMenuItem.keyboardShortcuts:
+        return imagePaths.icKeyboard;
      case AccountMenuItem.signOut:
        return imagePaths.icSignOut;
      case AccountMenuItem.none:
@@ -67,6 +70,8 @@ enum AccountMenuItem {
        return appLocalizations.contactSupport;
      case AccountMenuItem.storage:
        return appLocalizations.storageQuotas;
+      case AccountMenuItem.keyboardShortcuts:
+        return appLocalizations.keyboardShortcuts;
      case AccountMenuItem.signOut:
        return appLocalizations.sign_out;
      case AccountMenuItem.none:
@@ -90,6 +95,10 @@ enum AccountMenuItem {
        return appLocalizations.folderVisibilitySubtitle;
      case AccountMenuItem.storage:
        return appLocalizations.storageSettingExplanation;
+      case AccountMenuItem.notification:
+        return appLocalizations.allowsTwakeMailToNotifyYouWhenANewMessageArrivesOnYourPhone;
+      case AccountMenuItem.keyboardShortcuts:
+        return appLocalizations.keyboardShortcutsSettingExplanation;
      default:
        return '';
    }
@@ -117,6 +126,8 @@ enum AccountMenuItem {
        return 'contact-support';
      case AccountMenuItem.storage:
        return 'storage';
+      case AccountMenuItem.keyboardShortcuts:
+        return 'keyboard-shortcuts';
      case AccountMenuItem.signOut:
        return 'sign-out';
      case AccountMenuItem.none:
@@ -0,0 +1,38 @@
+import 'package:equatable/equatable.dart';
+
+enum ShortcutCategory {
+  navigationAndClosing,
+  readingAndReplying,
+  messageManagementAndSelection,
+}
+
+enum ShortcutContext {
+  mailComposer,
+  focusOnSearch,
+  openedModal,
+  mailboxList,
+  mailboxListWithSelectedEmail,
+  openedMailView,
+}
+
+class KeyboardShortcut with EquatableMixin {
+  final String label;
+  final ShortcutCategory category;
+  final ShortcutContext context;
+  final List<String> keys;
+
+  const KeyboardShortcut({
+    required this.label,
+    required this.category,
+    required this.context,
+    required this.keys,
+  });
+
+  @override
+  List<Object?> get props => [
+    label,
+    category,
+    context,
+    keys,
+  ];
+}
@@ -0,0 +1,96 @@
+import 'package:tmail_ui_user/features/manage_account/presentation/model/keyboard_shortcuts/keyboard_shortcut.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class KeyboardShortcutsManager {
+  KeyboardShortcutsManager._();
+
+  static List<KeyboardShortcut> generateKeyboardShortcuts(
+    AppLocalizations appLocalizations,
+  ) {
+    return [
+      // Navigation & Closing
+      KeyboardShortcut(
+        label: appLocalizations.closeMailComposer,
+        category: ShortcutCategory.navigationAndClosing,
+        context: ShortcutContext.mailComposer,
+        keys: ['ESC'],
+      ),
+      KeyboardShortcut(
+        label: appLocalizations.removeFocusFromSearch,
+        category: ShortcutCategory.navigationAndClosing,
+        context: ShortcutContext.focusOnSearch,
+        keys: ['ESC'],
+      ),
+      KeyboardShortcut(
+        label: appLocalizations.closeModalWindow,
+        category: ShortcutCategory.navigationAndClosing,
+        context: ShortcutContext.openedModal,
+        keys: ['ESC'],
+      ),
+      KeyboardShortcut(
+        label: appLocalizations.openNewMessage,
+        category: ShortcutCategory.navigationAndClosing,
+        context: ShortcutContext.mailboxList,
+        keys: ['N'],
+      ),
+
+      // Reading & Replying
+      KeyboardShortcut(
+        label: appLocalizations.reply,
+        category: ShortcutCategory.readingAndReplying,
+        context: ShortcutContext.openedMailView,
+        keys: ['R'],
+      ),
+      KeyboardShortcut(
+        label: appLocalizations.replyToAll,
+        category: ShortcutCategory.readingAndReplying,
+        context: ShortcutContext.openedMailView,
+        keys: ['Shift', 'R'],
+      ),
+      KeyboardShortcut(
+        label: appLocalizations.forward,
+        category: ShortcutCategory.readingAndReplying,
+        context: ShortcutContext.openedMailView,
+        keys: ['F'],
+      ),
+      KeyboardShortcut(
+        label: appLocalizations.mark_as_read,
+        category: ShortcutCategory.readingAndReplying,
+        context: ShortcutContext.openedMailView,
+        keys: ['Q'],
+      ),
+      KeyboardShortcut(
+        label: appLocalizations.mark_as_unread,
+        category: ShortcutCategory.readingAndReplying,
+        context: ShortcutContext.openedMailView,
+        keys: ['U'],
+      ),
+
+      // Message Management & Selection
+      KeyboardShortcut(
+        label: appLocalizations.deleteMessage,
+        category: ShortcutCategory.messageManagementAndSelection,
+        context: ShortcutContext.openedMailView,
+        keys: ['Delete'],
+      ),
+      KeyboardShortcut(
+        label: appLocalizations.deleteMessage,
+        category: ShortcutCategory.messageManagementAndSelection,
+        context: ShortcutContext.mailboxListWithSelectedEmail,
+        keys: ['Delete'],
+      ),
+      KeyboardShortcut(
+        label: appLocalizations.mark_as_read,
+        category: ShortcutCategory.messageManagementAndSelection,
+        context: ShortcutContext.mailboxListWithSelectedEmail,
+        keys: ['Q'],
+      ),
+      KeyboardShortcut(
+        label: appLocalizations.mark_as_unread,
+        category: ShortcutCategory.messageManagementAndSelection,
+        context: ShortcutContext.mailboxListWithSelectedEmail,
+        keys: ['U'],
+      ),
+    ];
+  }
+}
@@ -1,5 +1,5 @@
 {
-  "@@last_modified": "2025-10-17T09:52:08.303266",
+  "@@last_modified": "2025-10-29T10:59:38.089168",
  "initializing_data": "Initializing data...",
  "@initializing_data": {
    "type": "text",
@@ -2688,13 +2688,13 @@
    "placeholders_order": [],
    "placeholders": {}
  },
-  "noEmailInYourCurrentFolder": "There are no emails in your current folder",
+  "noEmailInYourCurrentFolder": "We're sorry, there are no emails in your current folder",
  "@noEmailInYourCurrentFolder": {
    "type": "text",
    "placeholders_order": [],
    "placeholders": {}
  },
-  "noEmailMatchYourCurrentFilter": "There are no emails that match your current filter.",
+  "noEmailMatchYourCurrentFilter": "We're sorry, there are no emails that match your current filter.",
  "@noEmailMatchYourCurrentFilter": {
    "type": "text",
    "placeholders_order": [],
@@ -4937,5 +4937,119 @@
    "type": "text",
    "placeholders_order": [],
    "placeholders": {}
+  },
+  "keyboardShortcuts": "Keyboard shortcuts",
+  "@keyboardShortcuts": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "keyboardShortcutsSettingExplanation": "Mailbox & email actions",
+  "@keyboardShortcutsSettingExplanation": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "navigationAndClosing": "Navigation & Closing",
+  "@navigationAndClosing": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "readingAndReplying": "Reading & Replying",
+  "@readingAndReplying": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "messageManagementAndSelection": "Message Management & Selection",
+  "@messageManagementAndSelection": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "navigation": "Navigation",
+  "@navigation": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "reading": "Reading",
+  "@reading": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "closeMailComposer": "Close mail composer",
+  "@closeMailComposer": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "removeFocusFromSearch": "Remove focus from search",
+  "@removeFocusFromSearch": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "closeModalWindow": "Close modal window",
+  "@closeModalWindow": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "openNewMessage": "Open new message",
+  "@openNewMessage": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "mailComposer": "Mail composer",
+  "@mailComposer": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "focusOnSearch": "Focus on search",
+  "@focusOnSearch": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "openedModal": "Opened modal",
+  "@openedModal": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "mailboxList": "Mailbox list",
+  "@mailboxList": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "openedMailView": "Opened mail view",
+  "@openedMailView": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "mailboxListWithSelectedMail": "Mailbox list (selected mail)",
+  "@mailboxListWithSelectedMail": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "replyToAll": "Reply to all",
+  "@replyToAll": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "deleteMessage": "Delete message",
+  "@deleteMessage": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
  }
-}
+}
@@ -5212,4 +5212,137 @@ class AppLocalizations {
      name: 'mailHasBeenUnstarred',
    );
  }
+
+  String get keyboardShortcuts {
+    return Intl.message(
+      'Keyboard shortcuts',
+      name: 'keyboardShortcuts',
+    );
+  }
+
+  String get keyboardShortcutsSettingExplanation {
+    return Intl.message(
+      'Mailbox & email actions',
+      name: 'keyboardShortcutsSettingExplanation',
+    );
+  }
+
+  String get navigationAndClosing {
+    return Intl.message(
+      'Navigation & Closing',
+      name: 'navigationAndClosing',
+    );
+  }
+
+  String get readingAndReplying {
+    return Intl.message(
+      'Reading & Replying',
+      name: 'readingAndReplying',
+    );
+  }
+
+  String get messageManagementAndSelection {
+    return Intl.message(
+      'Message Management & Selection',
+      name: 'messageManagementAndSelection',
+    );
+  }
+
+  String get navigation {
+    return Intl.message(
+      'Navigation',
+      name: 'navigation',
+    );
+  }
+
+  String get reading {
+    return Intl.message(
+      'Reading',
+      name: 'reading',
+    );
+  }
+
+  String get closeMailComposer {
+    return Intl.message(
+      'Close mail composer',
+      name: 'closeMailComposer',
+    );
+  }
+
+  String get removeFocusFromSearch {
+    return Intl.message(
+      'Remove focus from search',
+      name: 'removeFocusFromSearch',
+    );
+  }
+
+  String get closeModalWindow {
+    return Intl.message(
+      'Close modal window',
+      name: 'closeModalWindow',
+    );
+  }
+
+  String get openNewMessage {
+    return Intl.message(
+      'Open new message',
+      name: 'openNewMessage',
+    );
+  }
+
+  String get mailComposer {
+    return Intl.message(
+      'Mail composer',
+      name: 'mailComposer',
+    );
+  }
+
+  String get focusOnSearch {
+    return Intl.message(
+      'Focus on search',
+      name: 'focusOnSearch',
+    );
+  }
+
+  String get openedModal {
+    return Intl.message(
+      'Opened modal',
+      name: 'openedModal',
+    );
+  }
+
+  String get mailboxList {
+    return Intl.message(
+      'Mailbox list',
+      name: 'mailboxList',
+    );
+  }
+
+  String get openedMailView {
+    return Intl.message(
+      'Opened mail view',
+      name: 'openedMailView',
+    );
+  }
+
+  String get mailboxListWithSelectedMail {
+    return Intl.message(
+      'Mailbox list (selected mail)',
+      name: 'mailboxListWithSelectedMail',
+    );
+  }
+
+  String get replyToAll {
+    return Intl.message(
+      'Reply to all',
+      name: 'replyToAll',
+    );
+  }
+
+  String get deleteMessage {
+    return Intl.message(
+      'Delete message',
+      name: 'deleteMessage',
+    );
+  }
 }