Merge pull request #916 from pangeachat/reorder-chat-options

Reorder chat options

lib/pages/chat/chat_input_row.dart

@@ -1,11 +1,13 @@
 import 'package:animations/animations.dart';
 import 'package:fluffychat/pangea/choreographer/widgets/send_button.dart';
 import 'package:fluffychat/pangea/constants/language_constants.dart';
+import 'package:fluffychat/pangea/widgets/chat/pangea_reaction_picker.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
 import 'package:fluffychat/widgets/avatar.dart';
 import 'package:fluffychat/widgets/matrix.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:material_symbols_icons/symbols.dart';
 import 'package:matrix/matrix.dart';
 
 import '../../config/themes.dart';
@@ -55,9 +57,9 @@ class ChatInputRow extends StatelessWidget {
       children: [
         Row(
           // crossAxisAlignment: CrossAxisAlignment.end,
+          // mainAxisAlignment: MainAxisAlignment.spaceBetween,
           crossAxisAlignment: CrossAxisAlignment.center,
           // Pangea#
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: controller.selectMode
               ? <Widget>[
                   if (controller.selectedEvents
@@ -77,19 +79,22 @@ class ChatInputRow extends StatelessWidget {
                         ),
                       ),
                     )
+                  // #Pangea
+                  // else
+                  //   SizedBox(
+                  //     height: height,
+                  //     child: TextButton(
+                  //       onPressed: controller.forwardEventsAction,
+                  //       child: Row(
+                  //         children: <Widget>[
+                  //           const Icon(Icons.keyboard_arrow_left_outlined),
+                  //           Text(L10n.of(context)!.forward),
+                  //         ],
+                  //       ),
+                  //     ),
+                  //   ),
                   else
-                    SizedBox(
+                    // Pangea#
-                      height: height,
-                      child: TextButton(
-                        onPressed: controller.forwardEventsAction,
-                        child: Row(
-                          children: <Widget>[
-                            const Icon(Icons.keyboard_arrow_left_outlined),
-                            Text(L10n.of(context)!.forward),
-                          ],
-                        ),
-                      ),
-                    ),
                     controller.selectedEvents.length == 1
                         ? controller.selectedEvents.first
                                 .getDisplayEvent(controller.timeline!)
@@ -101,8 +106,13 @@ class ChatInputRow extends StatelessWidget {
                                   onPressed: controller.replyAction,
                                   child: Row(
                                     children: <Widget>[
+                                      // #Pangea
+                                      // Text(L10n.of(context)!.reply),
+                                      // const Icon(Icons.keyboard_arrow_right),
+                                      const Icon(Symbols.reply),
+                                      const SizedBox(width: 6),
                                       Text(L10n.of(context)!.reply),
-                                    const Icon(Icons.keyboard_arrow_right),
+                                      // Pangea#
                                     ],
                                   ),
                                 ),
@@ -121,6 +131,9 @@ class ChatInputRow extends StatelessWidget {
                                 ),
                               )
                         : const SizedBox.shrink(),
+                  // #Pangea
+                  PangeaReactionsPicker(controller),
+                  // Pangea#
                 ]
               : <Widget>[
                   // #Pangea

lib/pangea/widgets/chat/message_selection_overlay.dart

@@ -550,7 +550,13 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
                     messageOffset!.dy -
                     messageSize!.height -
                     belowMessageHeight,
+                child: Padding(
+                  padding: EdgeInsets.only(
+                    left: horizontalPadding,
+                    right: horizontalPadding,
+                  ),
                   child: overlayMessage,
+                ),
               )
         : AnimatedBuilder(
             animation: _overlayPositionAnimation!,
@@ -564,12 +570,7 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
             },
           );
 
-    return Padding(
+    return Stack(
-      padding: EdgeInsets.only(
-        left: horizontalPadding,
-        right: horizontalPadding,
-      ),
-      child: Stack(
       children: [
         positionedOverlayMessage,
         Align(
@@ -596,7 +597,6 @@ class MessageOverlayController extends State<MessageSelectionOverlay>
           child: OverlayHeader(controller: widget.chatController),
         ),
       ],
-      ),
     );
   }
 }

lib/pangea/widgets/chat/overlay_footer.dart

@@ -1,7 +1,6 @@
 import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/pages/chat/chat.dart';
 import 'package:fluffychat/pages/chat/chat_input_row.dart';
-import 'package:fluffychat/pages/chat/reactions_picker.dart';
 import 'package:flutter/material.dart';
 
 class OverlayFooter extends StatelessWidget {
@@ -18,7 +17,7 @@ class OverlayFooter extends StatelessWidget {
 
     return Container(
       margin: EdgeInsets.only(
-        bottom: bottomSheetPadding,
+        bottom: bottomSheetPadding + 16,
         left: bottomSheetPadding,
         right: bottomSheetPadding,
       ),
@@ -34,12 +33,7 @@ class OverlayFooter extends StatelessWidget {
             borderRadius: const BorderRadius.all(
               Radius.circular(24),
             ),
-            child: Column(
+            child: ChatInputRow(controller),
-              children: [
-                ReactionsPicker(controller),
-                ChatInputRow(controller),
-              ],
-            ),
           ),
         ],
       ),

lib/pangea/widgets/chat/overlay_header.dart

@@ -1,7 +1,7 @@
 import 'package:fluffychat/pages/chat/chat.dart';
-import 'package:fluffychat/pages/chat/chat_app_bar_title.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:material_symbols_icons/symbols.dart';
 import 'package:matrix/matrix.dart';
 
 class OverlayHeader extends StatelessWidget {
@@ -21,20 +21,11 @@ class OverlayHeader extends StatelessWidget {
           actionsIconTheme: IconThemeData(
             color: Theme.of(context).colorScheme.primary,
           ),
-          leading: IconButton(
-            icon: const Icon(Icons.close),
-            onPressed: controller.clearSelectedEvents,
-            tooltip: L10n.of(context)!.close,
-            color: Theme.of(context).colorScheme.primary,
-          ),
-          titleSpacing: 0,
-          title: ChatAppBarTitle(controller),
           actions: [
-            if (controller.canEditSelectedEvents)
             IconButton(
-                icon: const Icon(Icons.edit_outlined),
+              icon: const Icon(Symbols.forward),
-                tooltip: L10n.of(context)!.edit,
+              tooltip: L10n.of(context)!.forward,
-                onPressed: controller.editSelectedEventAction,
+              onPressed: controller.forwardEventsAction,
             ),
             if (controller.selectedEvents.length == 1 &&
                 controller.selectedEvents.single.messageType ==
@@ -44,27 +35,30 @@ class OverlayHeader extends StatelessWidget {
                 tooltip: L10n.of(context)!.copy,
                 onPressed: controller.copyEventsAction,
               ),
-            if (controller.canSaveSelectedEvent)
-              // Use builder context to correctly position the share dialog on iPad
-              Builder(
-                builder: (context) => IconButton(
-                  icon: Icon(Icons.adaptive.share),
-                  tooltip: L10n.of(context)!.share,
-                  onPressed: () => controller.saveSelectedEvent(context),
-                ),
-              ),
             if (controller.canPinSelectedEvents)
               IconButton(
                 icon: const Icon(Icons.push_pin_outlined),
                 onPressed: controller.pinEvent,
                 tooltip: L10n.of(context)!.pinMessage,
               ),
+            if (controller.canEditSelectedEvents)
+              IconButton(
+                icon: const Icon(Icons.edit_outlined),
+                tooltip: L10n.of(context)!.edit,
+                onPressed: controller.editSelectedEventAction,
+              ),
             if (controller.canRedactSelectedEvents)
               IconButton(
                 icon: const Icon(Icons.delete_outlined),
                 tooltip: L10n.of(context)!.redactMessage,
                 onPressed: controller.redactEventsAction,
               ),
+            if (controller.selectedEvents.length == 1)
+              IconButton(
+                icon: const Icon(Icons.shield_outlined),
+                tooltip: L10n.of(context)!.reportMessage,
+                onPressed: controller.reportEventAction,
+              ),
             if (controller.selectedEvents.length == 1)
               IconButton(
                 icon: const Icon(Icons.info_outlined),
@@ -74,12 +68,6 @@ class OverlayHeader extends StatelessWidget {
                   controller.clearSelectedEvents();
                 },
               ),
-            if (controller.selectedEvents.length == 1)
-              IconButton(
-                icon: const Icon(Icons.shield_outlined),
-                tooltip: L10n.of(context)!.reportMessage,
-                onPressed: controller.reportEventAction,
-              ),
           ],
         ),
       ],

lib/pangea/widgets/chat/pangea_reaction_picker.dart

@@ -0,0 +1,86 @@
+import 'package:fluffychat/config/app_emojis.dart';
+import 'package:fluffychat/pages/chat/chat.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:matrix/matrix.dart';
+
+class PangeaReactionsPicker extends StatelessWidget {
+  final ChatController controller;
+
+  const PangeaReactionsPicker(this.controller, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    if (controller.showEmojiPicker) return const SizedBox.shrink();
+    final display = controller.editEvent == null &&
+        controller.replyEvent == null &&
+        controller.room.canSendDefaultMessages &&
+        controller.selectedEvents.isNotEmpty;
+
+    if (!display) {
+      return const SizedBox.shrink();
+    }
+    final emojis = List<String>.from(AppEmojis.emojis);
+    final allReactionEvents = controller.selectedEvents.first
+        .aggregatedEvents(
+          controller.timeline!,
+          RelationshipTypes.reaction,
+        )
+        .where(
+          (event) =>
+              event.senderId == event.room.client.userID &&
+              event.type == 'm.reaction',
+        );
+
+    for (final event in allReactionEvents) {
+      try {
+        emojis.remove(event.content.tryGetMap('m.relates_to')!['key']);
+      } catch (_) {}
+    }
+    return Flexible(
+      child: Row(
+        children: [
+          Flexible(
+            child: SingleChildScrollView(
+              scrollDirection: Axis.horizontal,
+              child: Row(
+                children: emojis
+                    .map(
+                      (emoji) => InkWell(
+                        borderRadius: BorderRadius.circular(8),
+                        onTap: () => controller.sendEmojiAction(emoji),
+                        child: Container(
+                          width: kIsWeb ? 56 : 48,
+                          alignment: Alignment.center,
+                          child: Text(
+                            emoji,
+                            style: const TextStyle(fontSize: 24),
+                          ),
+                        ),
+                      ),
+                    )
+                    .toList(),
+              ),
+            ),
+          ),
+          InkWell(
+            borderRadius: BorderRadius.circular(8),
+            child: Container(
+              margin: const EdgeInsets.symmetric(horizontal: 8),
+              width: 36,
+              height: 56,
+              decoration: BoxDecoration(
+                color: theme.colorScheme.onInverseSurface,
+                shape: BoxShape.circle,
+              ),
+              child: const Icon(Icons.add_outlined),
+            ),
+            onTap: () => controller.pickEmojiReactionAction(allReactionEvents),
+          ),
+        ],
+      ),
+    );
+  }
+}