chore: Follow up chat list context menu

lib/pages/chat_list/chat_list.dart

@@ -21,6 +21,7 @@ import 'package:fluffychat/pages/chat_list/chat_list_view.dart';
 import 'package:fluffychat/utils/localized_exception_extension.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
+import 'package:fluffychat/widgets/avatar.dart';
 import '../../../utils/account_bundles.dart';
 import '../../config/setting_keys.dart';
 import '../../utils/matrix_sdk_extensions/matrix_file_extension.dart';
@@ -612,46 +613,130 @@ class ChatListController extends State<ChatList>
     super.dispose();
   }
 
-  void chatContextAction(Room room, [Room? space]) async {
+  void chatContextAction(
-    final action = await showModalActionSheet<ChatContextAction>(
+    Room room,
-      context: context,
+    BuildContext posContext, [
-      actions: [
+    Room? space,
+  ]) async {
+    final overlay =
+        Overlay.of(posContext).context.findRenderObject() as RenderBox;
+
+    final button = posContext.findRenderObject() as RenderBox;
+
+    final position = RelativeRect.fromRect(
+      Rect.fromPoints(
+        button.localToGlobal(const Offset(0, -65), ancestor: overlay),
+        button.localToGlobal(
+          button.size.bottomRight(Offset.zero) + const Offset(-50, 0),
+          ancestor: overlay,
+        ),
+      ),
+      Offset.zero & overlay.size,
+    );
+
+    final displayname =
+        room.getLocalizedDisplayname(MatrixLocals(L10n.of(context)!));
+
+    final action = await showMenu<ChatContextAction>(
+      context: posContext,
+      position: position,
+      items: [
+        PopupMenuItem(
+          enabled: false,
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Avatar(
+                mxContent: room.avatar,
+                size: Avatar.defaultSize / 2,
+                name: displayname,
+              ),
+              const SizedBox(width: 12),
+              Text(displayname),
+            ],
+          ),
+        ),
+        const PopupMenuDivider(),
         if (space != null)
-          SheetAction(
+          PopupMenuItem(
-            key: ChatContextAction.goToSpace,
+            value: ChatContextAction.goToSpace,
-            icon: Icons.chevron_right_outlined,
+            child: Row(
-            label: L10n.of(context)!.goToSpace(space.getLocalizedDisplayname()),
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                const Icon(Icons.navigate_next_outlined),
+                const SizedBox(width: 12),
+                Expanded(
+                  child: Text(
+                    L10n.of(context)!
+                        .goToSpace(space.getLocalizedDisplayname()),
                   ),
-        SheetAction(
-          key: ChatContextAction.markUnread,
-          icon: room.markedUnread
-              ? Icons.mark_as_unread
-              : Icons.mark_as_unread_outlined,
-          label: room.markedUnread
-              ? L10n.of(context)!.markAsRead
-              : L10n.of(context)!.markAsUnread,
                 ),
-        SheetAction(
+              ],
-          key: ChatContextAction.favorite,
-          icon: room.isFavourite ? Icons.push_pin : Icons.push_pin_outlined,
-          label: room.isFavourite
-              ? L10n.of(context)!.unpin
-              : L10n.of(context)!.pin,
             ),
-        SheetAction(
+          ),
-          key: ChatContextAction.mute,
+        PopupMenuItem(
-          icon: room.pushRuleState == PushRuleState.notify
+          value: ChatContextAction.mute,
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(
+                room.pushRuleState == PushRuleState.notify
                     ? Icons.notifications_off_outlined
-              : Icons.notifications_outlined,
+                    : Icons.notifications_off,
-          label: room.pushRuleState == PushRuleState.notify
+              ),
+              const SizedBox(width: 12),
+              Text(
+                room.pushRuleState == PushRuleState.notify
                     ? L10n.of(context)!.muteChat
                     : L10n.of(context)!.unmuteChat,
               ),
-        SheetAction(
+            ],
-          isDestructiveAction: true,
+          ),
-          key: ChatContextAction.leave,
+        ),
-          icon: Icons.delete_outlined,
+        PopupMenuItem(
-          label: L10n.of(context)!.leave,
+          value: ChatContextAction.markUnread,
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(
+                room.markedUnread
+                    ? Icons.mark_as_unread
+                    : Icons.mark_as_unread_outlined,
+              ),
+              const SizedBox(width: 12),
+              Text(
+                room.markedUnread
+                    ? L10n.of(context)!.markAsRead
+                    : L10n.of(context)!.markAsUnread,
+              ),
+            ],
+          ),
+        ),
+        PopupMenuItem(
+          value: ChatContextAction.favorite,
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(room.isFavourite ? Icons.push_pin : Icons.push_pin_outlined),
+              const SizedBox(width: 12),
+              Text(
+                room.isFavourite
+                    ? L10n.of(context)!.unpin
+                    : L10n.of(context)!.pin,
+              ),
+            ],
+          ),
+        ),
+        PopupMenuItem(
+          value: ChatContextAction.leave,
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              const Icon(Icons.delete_outlined),
+              const SizedBox(width: 12),
+              Text(L10n.of(context)!.leave),
+            ],
+          ),
         ),
       ],
     );
@@ -659,14 +744,20 @@ class ChatListController extends State<ChatList>
     if (action == null) return;
     if (!mounted) return;
 
+    if (action == ChatContextAction.goToSpace) {
+      setActiveSpace(space!.id);
+      return;
+    }
+
     if (action == ChatContextAction.leave) {
       final confirmed = await showOkCancelAlertDialog(
         useRootNavigator: false,
         context: context,
         title: L10n.of(context)!.areYouSure,
-        okLabel: L10n.of(context)!.yes,
+        okLabel: L10n.of(context)!.leave,
         cancelLabel: L10n.of(context)!.no,
         message: L10n.of(context)!.archiveRoomDescription,
+        isDestructiveAction: true,
       );
       if (confirmed == OkCancelResult.cancel) return;
     }
@@ -677,7 +768,6 @@ class ChatListController extends State<ChatList>
       future: () async {
         switch (action) {
           case ChatContextAction.goToSpace:
-            setActiveSpace(space!.id);
             return;
           case ChatContextAction.favorite:
             return room.setFavourite(!room.isFavourite);

lib/pages/chat_list/chat_list_body.dart

@@ -14,6 +14,7 @@ import 'package:fluffychat/pages/user_bottom_sheet/user_bottom_sheet.dart';
 import 'package:fluffychat/utils/adaptive_bottom_sheet.dart';
 import 'package:fluffychat/utils/stream_extension.dart';
 import 'package:fluffychat/widgets/avatar.dart';
+import 'package:fluffychat/widgets/hover_builder.dart';
 import 'package:fluffychat/widgets/public_room_bottom_sheet.dart';
 import '../../config/themes.dart';
 import '../../widgets/connection_status_header.dart';
@@ -34,8 +35,8 @@ class ChatListViewBody extends StatelessWidget {
         spaceId: activeSpace,
         onBack: controller.clearActiveSpace,
         onChatTab: (room) => controller.onChatTap(room),
-        onChatContext: (room) =>
+        onChatContext: (room, context) =>
-            controller.chatContextAction(room, client.getRoomById(activeSpace)),
+            controller.chatContextAction(room, context),
         activeChat: controller.activeChat,
         toParentSpace: controller.setActiveSpace,
       );
@@ -174,6 +175,12 @@ class ChatListViewBody extends StatelessWidget {
                                 (filter) => Padding(
                                   padding:
                                       const EdgeInsets.symmetric(horizontal: 4),
+                                  child: HoverBuilder(
+                                    builder: (context, hovered) =>
+                                        AnimatedScale(
+                                      duration: FluffyThemes.animationDuration,
+                                      curve: FluffyThemes.animationCurve,
+                                      scale: hovered ? 1.1 : 1.0,
                                       child: InkWell(
                                         borderRadius: BorderRadius.circular(
                                           AppConfig.borderRadius,
@@ -186,7 +193,8 @@ class ChatListViewBody extends StatelessWidget {
                                             vertical: 6,
                                           ),
                                           decoration: BoxDecoration(
-                                        color: filter == controller.activeFilter
+                                            color: filter ==
+                                                    controller.activeFilter
                                                 ? Theme.of(context)
                                                     .colorScheme
                                                     .primary
@@ -201,12 +209,12 @@ class ChatListViewBody extends StatelessWidget {
                                           child: Text(
                                             filter.toLocalizedString(context),
                                             style: TextStyle(
-                                          fontWeight:
+                                              fontWeight: filter ==
-                                              filter == controller.activeFilter
+                                                      controller.activeFilter
                                                   ? FontWeight.bold
                                                   : FontWeight.normal,
-                                          color:
+                                              color: filter ==
-                                              filter == controller.activeFilter
+                                                      controller.activeFilter
                                                   ? Theme.of(context)
                                                       .colorScheme
                                                       .onPrimary
@@ -218,6 +226,8 @@ class ChatListViewBody extends StatelessWidget {
                                         ),
                                       ),
                                     ),
+                                  ),
+                                ),
                               )
                               .toList(),
                         ),
@@ -311,8 +321,8 @@ class ChatListViewBody extends StatelessWidget {
                       key: Key('chat_list_item_${room.id}'),
                       filter: filter,
                       onTap: () => controller.onChatTap(room),
-                      onLongPress: () =>
+                      onLongPress: (context) =>
-                          controller.chatContextAction(room, space),
+                          controller.chatContextAction(room, context, space),
                       activeChat: controller.activeChat == room.id,
                     );
                   },

lib/pages/chat_list/chat_list_item.dart

@@ -19,7 +19,7 @@ class ChatListItem extends StatelessWidget {
   final Room room;
   final Room? space;
   final bool activeChat;
-  final void Function()? onLongPress;
+  final void Function(BuildContext context)? onLongPress;
   final void Function()? onForget;
   final void Function() onTap;
   final String? filter;
@@ -103,11 +103,10 @@ class ChatListItem extends StatelessWidget {
         color: backgroundColor,
         child: FutureBuilder(
           future: room.loadHeroUsers(),
-          builder: (context, snapshot) => HoverBuilder(
+          builder: (context, snapshot) => ListTile(
-            builder: (context, hovered) => ListTile(
             visualDensity: const VisualDensity(vertical: -0.5),
             contentPadding: const EdgeInsets.symmetric(horizontal: 8),
-              onLongPress: onLongPress,
+            onLongPress: () => onLongPress?.call(context),
             leading: HoverBuilder(
               builder: (context, hovered) => AnimatedScale(
                 duration: FluffyThemes.animationDuration,
@@ -134,7 +133,7 @@ class ChatListItem extends StatelessWidget {
                             mxContent: space.avatar,
                             size: Avatar.defaultSize * 0.75,
                             name: space.getLocalizedDisplayname(),
-                              onTap: onLongPress,
+                            onTap: () => onLongPress?.call(context),
                           ),
                         ),
                       Positioned(
@@ -145,9 +144,8 @@ class ChatListItem extends StatelessWidget {
                               ? room.isSpace
                                   ? BorderSide(
                                       width: 0,
-                                        color: Theme.of(context)
+                                      color:
-                                            .colorScheme
+                                          Theme.of(context).colorScheme.outline,
-                                            .outline,
                                     )
                                   : null
                               : BorderSide(
@@ -167,7 +165,7 @@ class ChatListItem extends StatelessWidget {
                           name: displayname,
                           presenceUserId: directChatMatrixId,
                           presenceBackgroundColor: backgroundColor,
-                            onTap: onLongPress,
+                          onTap: () => onLongPress?.call(context),
                         ),
                       ),
                     ],
@@ -288,8 +286,7 @@ class ChatListItem extends StatelessWidget {
                                               room.lastEvent?.senderId),
                                     )
                                   : null,
-                                initialData:
+                              initialData: lastEvent?.calcLocalizedBodyFallback(
-                                    lastEvent?.calcLocalizedBodyFallback(
                                 MatrixLocals(L10n.of(context)!),
                                 hideReply: true,
                                 hideEdit: true,
@@ -339,8 +336,7 @@ class ChatListItem extends StatelessWidget {
                         : hasNotifications || room.markedUnread
                             ? theme.colorScheme.primary
                             : theme.colorScheme.primaryContainer,
-                      borderRadius:
+                    borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-                          BorderRadius.circular(AppConfig.borderRadius),
                   ),
                   child: Center(
                     child: hasNotifications
@@ -370,7 +366,6 @@ class ChatListItem extends StatelessWidget {
           ),
         ),
       ),
-      ),
     );
   }
 }

lib/pages/chat_list/space_view.dart

@@ -20,7 +20,7 @@ class SpaceView extends StatefulWidget {
   final void Function() onBack;
   final void Function(String spaceId) toParentSpace;
   final void Function(Room room) onChatTab;
-  final void Function(Room room) onChatContext;
+  final void Function(Room room, BuildContext context) onChatContext;
   final String? activeChat;
 
   const SpaceView({
@@ -367,7 +367,10 @@ class _SpaceViewState extends State<SpaceView> {
                             room,
                             filter: filter,
                             onTap: () => widget.onChatTab(room),
-                            onLongPress: () => widget.onChatContext(room),
+                            onLongPress: (context) => widget.onChatContext(
+                              room,
+                              context,
+                            ),
                             activeChat: widget.activeChat == room.id,
                           );
                         },