feat: implement keyboard shortcuts

Added shortcuts for the following actions:

- search chats
- start chat
- chat details
- show widgets
- cycle accounts
- switch to account $i
- toggle emoji picker
- send file

Related: #849

Signed-off-by: TheOneWithTheBraid <the-one@with-the-braid.cf>

assets/l10n/intl_en.arb

@@ -2750,5 +2750,14 @@
   "experimentalVideoCalls": "Experimental video calls",
   "@experimentalVideoCalls": {},
   "emailOrUsername": "Email or username",
-  "@emailOrUsername": {}
+  "@emailOrUsername": {},
+  "switchToAccount": "Switch to account {number}",
+    "@switchToAccount": {
+      "type": "number",
+      "placeholders": {
+        "number": {}
+      }
+    },
+    "nextAccount": "Next account",
+    "previousAccount": "Previous account"
 }

lib/pages/chat/chat_input_row.dart

@@ -1,7 +1,9 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 
 import 'package:animations/animations.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:keyboard_shortcuts/keyboard_shortcuts.dart';
 import 'package:matrix/matrix.dart';
 
 import 'package:fluffychat/config/app_config.dart';
@@ -72,7 +74,8 @@ class ChatInputRow extends StatelessWidget {
                   : Container(),
             ]
           : <Widget>[
-              AnimatedContainer(
+              KeyBoardShortcuts(
+                child: AnimatedContainer(
                   duration: const Duration(milliseconds: 200),
                   height: 56,
                   width: controller.inputText.isEmpty ? 56 : 0,
@@ -165,9 +168,18 @@ class ChatInputRow extends StatelessWidget {
                     ],
                   ),
                 ),
+                keysToPress: {
+                  LogicalKeyboardKey.altLeft,
+                  LogicalKeyboardKey.keyA
+                },
+                onKeysPressed: () =>
+                    controller.onAddPopupMenuButtonSelected('file'),
+                helpLabel: L10n.of(context)!.sendFile,
+              ),
               Container(
                 height: 56,
                 alignment: Alignment.center,
+                child: KeyBoardShortcuts(
                   child: IconButton(
                     tooltip: L10n.of(context)!.emojis,
                     icon: PageTransitionSwitcher(
@@ -193,6 +205,13 @@ class ChatInputRow extends StatelessWidget {
                     ),
                     onPressed: controller.emojiPickerAction,
                   ),
+                  keysToPress: {
+                    LogicalKeyboardKey.altLeft,
+                    LogicalKeyboardKey.keyE
+                  },
+                  onKeysPressed: controller.emojiPickerAction,
+                  helpLabel: L10n.of(context)!.emojis,
+                ),
               ),
               if (controller.matrix!.isMultiAccount &&
                   controller.matrix!.hasComplexBundles &&

lib/pages/chat_list/chat_list_view.dart

@@ -2,9 +2,11 @@ import 'dart:async';
 
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 
 import 'package:animations/animations.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:keyboard_shortcuts/keyboard_shortcuts.dart';
 import 'package:matrix/matrix.dart';
 import 'package:vrouter/vrouter.dart';
 
@@ -43,10 +45,10 @@ class ChatListView extends StatelessWidget {
                       ? null
                       : Theme.of(context).colorScheme.primary,
                 ),
-                leading: selectMode == SelectMode.normal
+                leading: Matrix.of(context).isMultiAccount
-                    ? Matrix.of(context).isMultiAccount
                     ? ClientChooserButton(controller)
-                        : null
+                    : selectMode == SelectMode.normal
+                        ? null
                         : IconButton(
                             tooltip: L10n.of(context)!.cancel,
                             icon: const Icon(Icons.close_outlined),
@@ -93,12 +95,21 @@ class ChatListView extends StatelessWidget {
                             ),
                           ]
                         : [
-                            IconButton(
+                            KeyBoardShortcuts(
+                              keysToPress: {
+                                LogicalKeyboardKey.controlLeft,
+                                LogicalKeyboardKey.keyF
+                              },
+                              onKeysPressed: () =>
+                                  VRouter.of(context).to('/search'),
+                              helpLabel: L10n.of(context)!.search,
+                              child: IconButton(
                                 icon: const Icon(Icons.search_outlined),
                                 tooltip: L10n.of(context)!.search,
                                 onPressed: () =>
                                     VRouter.of(context).to('/search'),
                               ),
+                            ),
                             if (selectMode == SelectMode.normal)
                               IconButton(
                                 icon: const Icon(Icons.camera_alt_outlined),
@@ -213,12 +224,21 @@ class ChatListView extends StatelessWidget {
                 Expanded(child: _ChatListViewBody(controller)),
               ]),
               floatingActionButton: selectMode == SelectMode.normal
-                  ? FloatingActionButton.extended(
+                  ? KeyBoardShortcuts(
+                      child: FloatingActionButton.extended(
                         isExtended: controller.scrolledToTop,
                         onPressed: () =>
                             VRouter.of(context).to('/newprivatechat'),
                         icon: const Icon(CupertinoIcons.chat_bubble),
                         label: Text(L10n.of(context)!.newChat),
+                      ),
+                      keysToPress: {
+                        LogicalKeyboardKey.controlLeft,
+                        LogicalKeyboardKey.keyN
+                      },
+                      onKeysPressed: () =>
+                          VRouter.of(context).to('/newprivatechat'),
+                      helpLabel: L10n.of(context)!.newChat,
                     )
                   : null,
               bottomNavigationBar: Column(

lib/pages/chat_list/client_chooser_button.dart

@@ -1,5 +1,8 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 
+import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:keyboard_shortcuts/keyboard_shortcuts.dart';
 import 'package:matrix/matrix.dart';
 
 import 'package:fluffychat/widgets/avatar.dart';
@@ -8,6 +11,7 @@ import 'chat_list.dart';
 
 class ClientChooserButton extends StatelessWidget {
   final ChatListController controller;
+
   const ClientChooserButton(this.controller, {Key? key}) : super(key: key);
 
   List<PopupMenuEntry<Object>> _bundleMenuItems(BuildContext context) {
@@ -81,26 +85,137 @@ class ClientChooserButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final matrix = Matrix.of(context);
+
+    int clientCount = 0;
+    matrix.accountBundles.forEach((key, value) => clientCount += value.length);
     return Center(
       child: FutureBuilder<Profile>(
         future: matrix.client.ownProfile,
-        builder: (context, snapshot) => PopupMenuButton<Object>(
+        builder: (context, snapshot) => Stack(
+          alignment: Alignment.center,
+          children: [
+            ...List.generate(
+              clientCount,
+              (index) => KeyBoardShortcuts(
+                child: Container(),
+                keysToPress: _buildKeyboardShortcut(index + 1),
+                helpLabel: L10n.of(context)!.switchToAccount(index + 1),
+                onKeysPressed: () => _handleKeyboardShortcut(matrix, index),
+              ),
+            ),
+            KeyBoardShortcuts(
+              child: Container(),
+              keysToPress: {
+                LogicalKeyboardKey.controlLeft,
+                LogicalKeyboardKey.tab
+              },
+              helpLabel: L10n.of(context)!.nextAccount,
+              onKeysPressed: () => _nextAccount(matrix),
+            ),
+            KeyBoardShortcuts(
+              child: Container(),
+              keysToPress: {
+                LogicalKeyboardKey.controlLeft,
+                LogicalKeyboardKey.shiftLeft,
+                LogicalKeyboardKey.tab
+              },
+              helpLabel: L10n.of(context)!.previousAccount,
+              onKeysPressed: () => _previousAccount(matrix),
+            ),
+            PopupMenuButton<Object>(
               child: Avatar(
                 mxContent: snapshot.data?.avatarUrl,
-            name: snapshot.data?.displayName ?? matrix.client.userID!.localpart,
+                name: snapshot.data?.displayName ??
+                    matrix.client.userID!.localpart,
                 size: 28,
                 fontSize: 12,
               ),
-          onSelected: (Object object) {
+              onSelected: _clientSelected,
+              itemBuilder: _bundleMenuItems,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Set<LogicalKeyboardKey>? _buildKeyboardShortcut(int index) {
+    if (index > 0 && index < 10) {
+      return {
+        LogicalKeyboardKey.altLeft,
+        LogicalKeyboardKey(0x00000000030 + index)
+      };
+    } else {
+      return null;
+    }
+  }
+
+  void _clientSelected(Object object) {
     if (object is Client) {
       controller.setActiveClient(object);
     } else if (object is String) {
       controller.setActiveBundle(object);
     }
-          },
+  }
-          itemBuilder: _bundleMenuItems,
+
-        ),
+  void _handleKeyboardShortcut(MatrixState matrix, int index) {
-      ),
+    final bundles = matrix.accountBundles.keys.toList()
-    );
+      ..sort((a, b) => a!.isValidMatrixId == b!.isValidMatrixId
+          ? 0
+          : a.isValidMatrixId && !b.isValidMatrixId
+              ? -1
+              : 1);
+    // beginning from end if negative
+    if (index < 0) {
+      int clientCount = 0;
+      matrix.accountBundles
+          .forEach((key, value) => clientCount += value.length);
+      _handleKeyboardShortcut(matrix, clientCount);
+    }
+    for (final bundleName in bundles) {
+      final bundle = matrix.accountBundles[bundleName];
+      if (bundle != null) {
+        if (index < bundle.length) {
+          return _clientSelected(bundle[index]!);
+        } else {
+          index -= bundle.length;
+        }
+      }
+    }
+    // if index too high, restarting from 0
+    _handleKeyboardShortcut(matrix, 0);
+  }
+
+  int? _shortcutIndexOfClient(MatrixState matrix, Client client) {
+    int index = 0;
+
+    final bundles = matrix.accountBundles.keys.toList()
+      ..sort((a, b) => a!.isValidMatrixId == b!.isValidMatrixId
+          ? 0
+          : a.isValidMatrixId && !b.isValidMatrixId
+              ? -1
+              : 1);
+    for (final bundleName in bundles) {
+      final bundle = matrix.accountBundles[bundleName];
+      if (bundle == null) return null;
+      if (bundle.contains(client)) {
+        return index + bundle.indexOf(client);
+      } else {
+        index += bundle.length;
+      }
+    }
+    return null;
+  }
+
+  void _nextAccount(MatrixState matrix) {
+    final client = matrix.client;
+    final lastIndex = _shortcutIndexOfClient(matrix, client);
+    _handleKeyboardShortcut(matrix, lastIndex! + 1);
+  }
+
+  void _previousAccount(MatrixState matrix) {
+    final client = matrix.client;
+    final lastIndex = _shortcutIndexOfClient(matrix, client);
+    _handleKeyboardShortcut(matrix, lastIndex! - 1);
   }
 }

lib/widgets/chat_settings_popup_menu.dart

@@ -2,10 +2,12 @@ import 'dart:async';
 
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 
 import 'package:adaptive_dialog/adaptive_dialog.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:future_loading_dialog/future_loading_dialog.dart';
+import 'package:keyboard_shortcuts/keyboard_shortcuts.dart';
 import 'package:matrix/matrix.dart';
 import 'package:vrouter/vrouter.dart';
 
@@ -16,6 +18,7 @@ import 'matrix.dart';
 class ChatSettingsPopupMenu extends StatefulWidget {
   final Room room;
   final bool displayChatDetails;
+
   const ChatSettingsPopupMenu(this.room, this.displayChatDetails, {Key? key})
       : super(key: key);
 
@@ -101,21 +104,32 @@ class _ChatSettingsPopupMenuState extends State<ChatSettingsPopupMenu> {
         ),
       );
     }
-    return PopupMenuButton(
+    return Stack(
+      alignment: Alignment.center,
+      children: [
+        KeyBoardShortcuts(
+          child: Container(),
+          keysToPress: {
+            LogicalKeyboardKey.controlLeft,
+            LogicalKeyboardKey.keyI
+          },
+          helpLabel: L10n.of(context)!.chatDetails,
+          onKeysPressed: _showChatDetails,
+        ),
+        KeyBoardShortcuts(
+          child: Container(),
+          keysToPress: {
+            LogicalKeyboardKey.controlLeft,
+            LogicalKeyboardKey.keyW
+          },
+          helpLabel: L10n.of(context)!.matrixWidgets,
+          onKeysPressed: _showWidgets,
+        ),
+        PopupMenuButton(
           onSelected: (String choice) async {
             switch (choice) {
               case 'widgets':
-            [TargetPlatform.iOS, TargetPlatform.macOS]
+                _showWidgets();
-                    .contains(Theme.of(context).platform)
-                ? showCupertinoModalPopup(
-                    context: context,
-                    builder: (context) =>
-                        CupertinoWidgetsBottomSheet(room: widget.room),
-                  )
-                : showModalBottomSheet(
-                    context: context,
-                    builder: (context) => WidgetsBottomSheet(room: widget.room),
-                  );
                 break;
               case 'leave':
                 final confirmed = await showOkCancelAlertDialog(
@@ -136,8 +150,8 @@ class _ChatSettingsPopupMenuState extends State<ChatSettingsPopupMenu> {
               case 'mute':
                 await showFutureLoadingDialog(
                     context: context,
-                future: () =>
+                    future: () => widget.room
-                    widget.room.setPushRuleState(PushRuleState.mentionsOnly));
+                        .setPushRuleState(PushRuleState.mentionsOnly));
                 break;
               case 'unmute':
                 await showFutureLoadingDialog(
@@ -146,12 +160,32 @@ class _ChatSettingsPopupMenuState extends State<ChatSettingsPopupMenu> {
                         widget.room.setPushRuleState(PushRuleState.notify));
                 break;
               case 'details':
-            VRouter.of(context)
+                _showChatDetails();
-                .toSegments(['rooms', widget.room.id, 'details']);
                 break;
             }
           },
           itemBuilder: (BuildContext context) => items,
+        ),
+      ],
     );
   }
+
+  void _showWidgets() => [TargetPlatform.iOS, TargetPlatform.macOS]
+          .contains(Theme.of(context).platform)
+      ? showCupertinoModalPopup(
+          context: context,
+          builder: (context) => CupertinoWidgetsBottomSheet(room: widget.room),
+        )
+      : showModalBottomSheet(
+          context: context,
+          builder: (context) => WidgetsBottomSheet(room: widget.room),
+        );
+
+  void _showChatDetails() {
+    if (VRouter.of(context).path.endsWith('/details')) {
+      VRouter.of(context).toSegments(['rooms', widget.room.id]);
+    } else {
+      VRouter.of(context).toSegments(['rooms', widget.room.id, 'details']);
+    }
+  }
 }

pubspec.lock

@@ -429,7 +429,7 @@ packages:
       name: file_picker
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "4.4.0"
+    version: "4.5.0"
   file_picker_cross:
     dependency: "direct main"
     description:
@@ -715,7 +715,7 @@ packages:
       name: flutter_webrtc
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.8.2"
+    version: "0.8.3"
   frontend_server_client:
     dependency: transitive
     description:
@@ -891,6 +891,15 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.6.3"
+  keyboard_shortcuts:
+    dependency: "direct main"
+    description:
+      path: "."
+      ref: null-safety
+      resolved-ref: "5aa8786475bca1b90ff35409eff3e0f5a4768601"
+      url: "https://github.com/TheOneWithTheBraid/keyboard_shortcuts.git"
+    source: git
+    version: "0.1.4"
   latlong2:
     dependency: transitive
     description:
@@ -960,7 +969,7 @@ packages:
       name: matrix
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.8.11"
+    version: "0.8.12"
   matrix_api_lite:
     dependency: transitive
     description:
@@ -1198,7 +1207,7 @@ packages:
       name: permission_handler_apple
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "9.0.2"
+    version: "9.0.3"
   permission_handler_platform_interface:
     dependency: transitive
     description:
@@ -1813,6 +1822,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.7"
+  visibility_detector:
+    dependency: transitive
+    description:
+      name: visibility_detector
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.2.2"
   vm_service:
     dependency: transitive
     description:

pubspec.yaml

@@ -55,6 +55,7 @@ dependencies:
   image: ^3.1.1
   image_picker: ^0.8.4+8
   intl: any
+  keyboard_shortcuts: ^0.1.4
   localstorage: ^4.0.0+1
   lottie: ^1.2.2
   matrix: ^0.8.11
@@ -135,4 +136,10 @@ dependency_overrides:
     hosted:
       name: geolocator_android
       url: https://hanntech-gmbh.gitlab.io/free2pass/flutter-geolocator-floss
+  # waiting for null safety
+  # Upstream pull request: https://github.com/AntoineMarcel/keyboard_shortcuts/pull/13
+  keyboard_shortcuts:
+    git:
+      url: https://github.com/TheOneWithTheBraid/keyboard_shortcuts.git
+      ref: null-safety
   provider: 5.0.0