feat: add context menu actions for desktops

Related: #849

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

assets/l10n/intl_en.arb

@@ -2750,5 +2750,6 @@
   "experimentalVideoCalls": "Experimental video calls",
   "@experimentalVideoCalls": {},
   "emailOrUsername": "Email or username",
-  "@emailOrUsername": {}
+  "@emailOrUsername": {},
+  "select": "Select"
 }

lib/pages/chat_list/chat_list_item.dart

@@ -1,3 +1,4 @@
+import 'package:fluffychat/utils/contextual_actions.dart';
 import 'package:flutter/material.dart';
 
 import 'package:adaptive_dialog/adaptive_dialog.dart';
@@ -6,6 +7,7 @@ import 'package:future_loading_dialog/future_loading_dialog.dart';
 import 'package:matrix/matrix.dart';
 import 'package:pedantic/pedantic.dart';
 import 'package:vrouter/vrouter.dart';
+import 'package:contextmenu/contextmenu.dart';
 
 import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions.dart/matrix_locals.dart';
@@ -155,7 +157,70 @@ class ChatListItem extends StatelessWidget {
             ? 20.0
             : 14.0
         : 0.0;
-    return ListTile(
+    return ContextMenuArea(
+      builder: (c) {
+        // important to separate between [c] and [context]
+        final provider = ContextualActions.of(context);
+        if (provider.actions.isNotEmpty) {
+          return provider.buildContextMenu(c)
+            ..insert(
+              0,
+              ListTile(
+                title: Text(L10n.of(context)!.select),
+                leading: const Icon(Icons.select_all),
+                onTap: () {
+                  Navigator.of(c).pop();
+                  onLongPress?.call();
+                },
+              ),
+            );
+        } else {
+          return [
+            ListTile(
+              title: Text(L10n.of(context)!.select),
+              leading: const Icon(Icons.select_all),
+              onTap: () {
+                Navigator.of(c).pop();
+                onLongPress?.call();
+              },
+            ),
+            /* 
+              if (controller.spaces.isNotEmpty)
+                ContextualAction(
+                  label: L10n.of(context)!.addToSpace,
+                  icon: const Icon(Icons.group_work_outlined),
+                  action: controller.addOrRemoveToSpace,
+                ),
+              ContextualAction(
+                label: L10n.of(context)!.toggleUnread,
+                icon: Icon(controller.anySelectedRoomNotMarkedUnread
+                    ? Icons.mark_chat_read_outlined
+                    : Icons.mark_chat_unread_outlined),
+                action: controller.toggleUnread,
+              ),
+              ContextualAction(
+                label: L10n.of(context)!.toggleFavorite,
+                icon: Icon(controller.anySelectedRoomNotFavorite
+                    ? Icons.push_pin_outlined
+                    : Icons.push_pin),
+                action: controller.toggleFavouriteRoom,
+              ),
+              ContextualAction(
+                icon: Icon(controller.anySelectedRoomNotMuted
+                    ? Icons.notifications_off_outlined
+                    : Icons.notifications_outlined),
+                label: L10n.of(context)!.toggleMuted,
+                action: controller.toggleMuted,
+              ),
+              ContextualAction(
+                icon: const Icon(Icons.delete_outlined),
+                label: L10n.of(context)!.archive,
+                action: controller.archiveAction,
+              ), */
+          ];
+        }
+      },
+      child: ListTile(
         selected: selected || activeChat,
         selectedTileColor: selected
             ? Theme.of(context).primaryColor.withAlpha(100)
@@ -320,6 +385,7 @@ class ChatListItem extends StatelessWidget {
           ],
         ),
         onTap: () => clickAction(context),
+      ),
     );
   }
 }

lib/pages/chat_list/chat_list_view.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 
+import 'package:fluffychat/utils/contextual_actions.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
@@ -25,10 +26,48 @@ class ChatListView extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    return ContextualActions(
+      child: Builder(builder: (context) {
         return StreamBuilder<Object?>(
           stream: Matrix.of(context).onShareContentChanged.stream,
-        builder: (_, __) {
+          builder: (context, __) {
             final selectMode = controller.selectMode;
+            if (selectMode == SelectMode.select) {
+              ContextualActions.of(context).actions.addAll({
+                if (controller.spaces.isNotEmpty)
+                  ContextualAction(
+                    label: L10n.of(context)!.addToSpace,
+                    icon: const Icon(Icons.group_work_outlined),
+                    action: controller.addOrRemoveToSpace,
+                  ),
+                ContextualAction(
+                  label: L10n.of(context)!.toggleUnread,
+                  icon: Icon(controller.anySelectedRoomNotMarkedUnread
+                      ? Icons.mark_chat_read_outlined
+                      : Icons.mark_chat_unread_outlined),
+                  action: controller.toggleUnread,
+                ),
+                ContextualAction(
+                  label: L10n.of(context)!.toggleFavorite,
+                  icon: Icon(controller.anySelectedRoomNotFavorite
+                      ? Icons.push_pin_outlined
+                      : Icons.push_pin),
+                  action: controller.toggleFavouriteRoom,
+                ),
+                ContextualAction(
+                  icon: Icon(controller.anySelectedRoomNotMuted
+                      ? Icons.notifications_off_outlined
+                      : Icons.notifications_outlined),
+                  label: L10n.of(context)!.toggleMuted,
+                  action: controller.toggleMuted,
+                ),
+                ContextualAction(
+                  icon: const Icon(Icons.delete_outlined),
+                  label: L10n.of(context)!.archive,
+                  action: controller.archiveAction,
+                ),
+              });
+            }
             return VWidgetGuard(
               onSystemPop: (redirector) async {
                 final selMode = controller.selectMode;
@@ -57,41 +96,7 @@ class ChatListView extends StatelessWidget {
                   actions: selectMode == SelectMode.share
                       ? null
                       : selectMode == SelectMode.select
-                        ? [
+                          ? ContextualActions.of(context).buildAppBar()
-                            if (controller.spaces.isNotEmpty)
-                              IconButton(
-                                tooltip: L10n.of(context)!.addToSpace,
-                                icon: const Icon(Icons.group_work_outlined),
-                                onPressed: controller.addOrRemoveToSpace,
-                              ),
-                            IconButton(
-                              tooltip: L10n.of(context)!.toggleUnread,
-                              icon: Icon(
-                                  controller.anySelectedRoomNotMarkedUnread
-                                      ? Icons.mark_chat_read_outlined
-                                      : Icons.mark_chat_unread_outlined),
-                              onPressed: controller.toggleUnread,
-                            ),
-                            IconButton(
-                              tooltip: L10n.of(context)!.toggleFavorite,
-                              icon: Icon(controller.anySelectedRoomNotFavorite
-                                  ? Icons.push_pin_outlined
-                                  : Icons.push_pin),
-                              onPressed: controller.toggleFavouriteRoom,
-                            ),
-                            IconButton(
-                              icon: Icon(controller.anySelectedRoomNotMuted
-                                  ? Icons.notifications_off_outlined
-                                  : Icons.notifications_outlined),
-                              tooltip: L10n.of(context)!.toggleMuted,
-                              onPressed: controller.toggleMuted,
-                            ),
-                            IconButton(
-                              icon: const Icon(Icons.delete_outlined),
-                              tooltip: L10n.of(context)!.archive,
-                              onPressed: controller.archiveAction,
-                            ),
-                          ]
                           : [
                               IconButton(
                                 icon: const Icon(Icons.search_outlined),
@@ -232,7 +237,10 @@ class ChatListView extends StatelessWidget {
                 ),
               ),
             );
-        });
+          },
+        );
+      }),
+    );
   }
 }
 

lib/utils/contextual_actions.dart

@@ -0,0 +1,78 @@
+import 'package:flutter/material.dart';
+
+class ContextualActions extends InheritedWidget {
+  final ContextualActionState _state = ContextualActionState();
+
+  ContextualActions({Key? key, required Widget child})
+      : super(key: key, child: child);
+
+  static ContextualActions of(BuildContext context) {
+    final ContextualActions? result =
+        context.dependOnInheritedWidgetOfExactType<ContextualActions>();
+    assert(result != null, 'No ContextualActions found in context');
+    return result!;
+  }
+
+  Set<ContextualAction> get actions => _state.actions;
+  set actions(Set<ContextualAction> actions) => _state.actions = actions;
+
+  List<Widget> buildAppBar() => _state.buildAppBar();
+  List<Widget> buildContextMenu(BuildContext context) =>
+      _state.buildContextMenu(context);
+
+  @override
+  bool updateShouldNotify(covariant ContextualActions oldWidget) =>
+      _state != oldWidget._state;
+}
+
+class ContextualActionState {
+  /// the currently set [ContextualActions]
+  ///
+  /// use [replace] instead of `=` operator
+  Set<ContextualAction> actions = {};
+  Set<ContextualAction> contextMenuOnly = {};
+
+  /// unregisters all present actions and adds riven [newActions]
+  void replace(Iterable<ContextualAction> newActions) {
+    actions.removeWhere((element) => true);
+    actions.addAll(newActions);
+  }
+
+  /// buildseach item of [actions] as [IconButton] for use in AppBar
+  List<Widget> buildAppBar() {
+    return actions
+        .map(
+          (action) => IconButton(
+            icon: action.icon,
+            tooltip: action.label,
+            onPressed: action.action,
+          ),
+        )
+        .toList();
+  }
+
+  /// builds each item of [actions] as [ListTile] for use in a [ContextMenuArea]
+  List<Widget> buildContextMenu(BuildContext context) {
+    return actions
+        .map(
+          (action) => ListTile(
+            leading: action.icon,
+            title: Text(action.label),
+            onTap: () {
+              Navigator.of(context).pop();
+              action.action.call();
+            },
+          ),
+        )
+        .toList();
+  }
+}
+
+class ContextualAction {
+  final VoidCallback action;
+  final Widget icon;
+  final String label;
+
+  const ContextualAction(
+      {required this.action, required this.icon, required this.label});
+}

pubspec.lock

@@ -22,6 +22,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.3.0"
+  after_layout:
+    dependency: transitive
+    description:
+      name: after_layout
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.0"
   analyzer:
     dependency: transitive
     description:
@@ -241,6 +248,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.2.0"
+  contextmenu:
+    dependency: "direct main"
+    description:
+      name: contextmenu
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.0"
   convert:
     dependency: transitive
     description:

pubspec.yaml

@@ -18,6 +18,7 @@ dependencies:
   chewie: ^1.2.2
   collection: ^1.15.0-nullsafety.4
   connectivity_plus: ^2.2.0
+  contextmenu: ^3.0.0
   cupertino_icons: any
   desktop_drop: ^0.3.2
   desktop_lifecycle: ^0.1.0

web/index.html

@@ -32,7 +32,7 @@
   <link rel="stylesheet" type="text/css" href="splash/style.css">
 </head>
 
-<body style="position: fixed; inset: 0px; overflow: hidden; padding: 0px; margin: 0px; user-select: none; touch-action: none; font: 14px sans-serif; color: red;">
+<body oncontextmenu="return false;" style="position: fixed; inset: 0px; overflow: hidden; padding: 0px; margin: 0px; user-select: none; touch-action: none; font: 14px sans-serif; color: red;">
   <!-- This script installs service_worker.js to provide PWA functionality to
        application. For more information, see:
        https://developers.google.com/web/fundamentals/primers/service-workers -->