Autofocus chatbox on edit/reply

lib/widgets/chat_page/composer/chat_box.dart

@@ -1,6 +1,5 @@
 import "package:fast_immutable_collections/fast_immutable_collections.dart";
 import "package:flutter/material.dart";
-import "package:flutter/services.dart";
 import "package:flutter_chat_core/flutter_chat_core.dart";
 import "package:flutter_hooks/flutter_hooks.dart";
 import "package:fluttertagger/fluttertagger.dart";
@@ -15,6 +14,7 @@ class ChatBox extends HookConsumerWidget {
   final Message? relatedMessage;
   final RelationType relationType;
   final VoidCallback onDismiss;
+  final FocusNode? node;
   final Future<void> Function(
     String text, {
     required bool shouldMention,
@@ -26,6 +26,7 @@ class ChatBox extends HookConsumerWidget {
     required this.relationType,
     required this.onDismiss,
     required this.onSend,
+    this.node,
     super.key,
   });
 
@@ -55,18 +56,6 @@ class ChatBox extends HookConsumerWidget {
       controller.value.text = "";
     }
 
-    final node = useFocusNode(
-      onKeyEvent: (_, event) {
-        if (event is KeyDownEvent &&
-            event.logicalKey == LogicalKeyboardKey.escape) {
-          onDismiss();
-          return KeyEventResult.handled;
-        }
-
-        return KeyEventResult.ignored;
-      },
-    );
-
     final style = TextStyle(
       color: theme.colorScheme.primary,
       fontWeight: FontWeight.bold,
@@ -135,7 +124,7 @@ class ChatBox extends HookConsumerWidget {
                           triggerCharacter: triggerCharacter.value,
                           addTag: ({required id, required name}) {
                             controller.value.addTag(id: id, name: name);
-                            node.requestFocus();
+                            node?.requestFocus();
                           },
                         ),
                         controller: controller.value,

lib/widgets/chat_page/room_appbar.dart

@@ -9,12 +9,12 @@ import "package:nexus/widgets/chat_page/room_menu.dart";
 
 class RoomAppbar extends ConsumerWidget implements PreferredSizeWidget {
   final bool isDesktop;
-  final void Function(BuildContext context) onOpenMemberList;
+  final void Function(BuildContext context)? onOpenMemberList;
   final void Function(BuildContext context) onOpenDrawer;
   const RoomAppbar({
     required this.isDesktop,
-    required this.onOpenMemberList,
     required this.onOpenDrawer,
+    this.onOpenMemberList,
     super.key,
   });
 
@@ -23,10 +23,12 @@ class RoomAppbar extends ConsumerWidget implements PreferredSizeWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final room = ref.watch(SelectedRoomController.provider)!;
+    final room = ref.watch(SelectedRoomController.provider);
     return Appbar(
       leading: isDesktop
-          ? ExpandableImage(
+          ? room == null
+                ? null
+                : ExpandableImage(
                     room.metadata?.avatar?.toString(),
                     child: AvatarOrHash(
                       room.metadata?.avatar,
@@ -37,7 +39,9 @@ class RoomAppbar extends ConsumerWidget implements PreferredSizeWidget {
                   )
           : DrawerButton(onPressed: () => onOpenDrawer(context)),
       scrolledUnderElevation: 0,
-      title: Column(
+      title: room == null
+          ? null
+          : Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 Text(
@@ -63,11 +67,11 @@ class RoomAppbar extends ConsumerWidget implements PreferredSizeWidget {
           tooltip: "Open pinned messages",
         ),
         IconButton(
-          onPressed: () => onOpenMemberList(context),
+          onPressed: () => onOpenMemberList?.call(context),
           tooltip: "Open member list",
           icon: Icon(Icons.people),
         ),
-        RoomMenu(room),
+        if (room != null) RoomMenu(room),
       ].toIList(),
     );
   }

lib/widgets/chat_page/room_chat.dart

@@ -1,4 +1,5 @@
 import "package:flutter/material.dart";
+import "package:flutter/services.dart";
 import "package:flutter_chat_core/flutter_chat_core.dart";
 import "package:flutter_chat_ui/flutter_chat_ui.dart";
 import "package:flutter_hooks/flutter_hooks.dart";
@@ -47,17 +48,36 @@ class RoomChat extends HookConsumerWidget {
     final danger = theme.colorScheme.error;
 
     if (roomId == null || userId == null) {
-      return Center(
+      return Scaffold(
+        appBar: RoomAppbar(
+          isDesktop: isDesktop,
+          onOpenDrawer: (_) => Scaffold.of(context).openDrawer(),
+          onOpenMemberList: null,
+        ),
+        body: Center(
           child: Text(
             "Nothing to see here...",
             style: theme.textTheme.headlineMedium,
           ),
+        ),
       );
     }
 
     final controllerProvider = RoomChatController.provider(roomId);
     final notifier = ref.watch(controllerProvider.notifier);
 
+    final composerNode = useFocusNode(
+      onKeyEvent: (_, event) {
+        if (event is KeyDownEvent &&
+            event.logicalKey == LogicalKeyboardKey.escape) {
+          relatedMessage.value = null;
+          return KeyEventResult.handled;
+        }
+
+        return KeyEventResult.ignored;
+      },
+    );
+
     List<PopupMenuEntry> getMessageOptions(Message message) {
       final isSentByMe = message.authorId == userId;
       return [
@@ -65,6 +85,7 @@ class RoomChat extends HookConsumerWidget {
           onTap: () {
             relatedMessage.value = message;
             relationType.value = RelationType.reply;
+            composerNode.requestFocus();
           },
           child: ListTile(leading: Icon(Icons.reply), title: Text("Reply")),
         ),
@@ -73,6 +94,7 @@ class RoomChat extends HookConsumerWidget {
             onTap: () {
               relatedMessage.value = message;
               relationType.value = RelationType.edit;
+              composerNode.requestFocus();
             },
             child: ListTile(leading: Icon(Icons.edit), title: Text("Edit")),
           ),
@@ -259,6 +281,7 @@ class RoomChat extends HookConsumerWidget {
                                 ),
 
                             composerBuilder: (_) => ChatBox(
+                              node: composerNode,
                               onSend:
                                   (
                                     text, {