design: Redesign chat app bar

lib/pages/chat/chat.dart

@@ -1,7 +1,6 @@
 import 'dart:async';
 import 'dart:io';
 
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart';
@@ -21,10 +20,8 @@ import 'package:scroll_to_index/scroll_to_index.dart';
 import 'package:vrouter/vrouter.dart';
 
 import 'package:fluffychat/pages/chat/chat_view.dart';
-import 'package:fluffychat/pages/chat/cupertino_widgets_bottom_sheet.dart';
 import 'package:fluffychat/pages/chat/event_info_dialog.dart';
 import 'package:fluffychat/pages/chat/recording_dialog.dart';
-import 'package:fluffychat/pages/chat/widgets_bottom_sheet.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions.dart/event_extension.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions.dart/ios_badge_client_extension.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions.dart/matrix_locals.dart';
@@ -585,17 +582,6 @@ class ChatController extends State<Chat> {
         .any((cl) => selectedEvents.first.senderId == cl!.userID);
   }
 
-  void showWidgetsSheet() => [TargetPlatform.iOS, TargetPlatform.macOS]
-          .contains(Theme.of(context).platform)
-      ? showCupertinoModalPopup(
-          context: context,
-          builder: (context) => CupertinoWidgetsBottomSheet(room: room!),
-        )
-      : showModalBottomSheet(
-          context: context,
-          builder: (context) => WidgetsBottomSheet(room: room!),
-        );
-
   void forwardEventsAction() async {
     if (selectedEvents.length == 1) {
       Matrix.of(context).shareContent = selectedEvents.first.content;

lib/pages/chat/chat_app_bar_title.dart

@@ -6,10 +6,7 @@ import 'package:vrouter/vrouter.dart';
 import 'package:fluffychat/pages/chat/chat.dart';
 import 'package:fluffychat/pages/user_bottom_sheet/user_bottom_sheet.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions.dart/matrix_locals.dart';
-import 'package:fluffychat/utils/room_status_extension.dart';
-import 'package:fluffychat/utils/stream_extension.dart';
 import 'package:fluffychat/widgets/avatar.dart';
-import 'package:fluffychat/widgets/matrix.dart';
 
 class ChatAppBarTitle extends StatelessWidget {
   final ChatController controller;
@@ -25,12 +22,9 @@ class ChatAppBarTitle extends StatelessWidget {
       return Text(controller.selectedEvents.length.toString());
     }
     final directChatMatrixID = room.directChatMatrixID;
-    return ListTile(
+    return InkWell(
-      leading: Avatar(
+      splashColor: Colors.transparent,
-        mxContent: room.avatar,
+      highlightColor: Colors.transparent,
-        name: room.displayname,
-      ),
-      contentPadding: EdgeInsets.zero,
       onTap: directChatMatrixID != null
           ? () => showModalBottomSheet(
                 context: context,
@@ -42,20 +36,22 @@ class ChatAppBarTitle extends StatelessWidget {
                 ),
               )
           : () => VRouter.of(context).toSegments(['rooms', room.id, 'details']),
-      title: Text(room.getLocalizedDisplayname(MatrixLocals(L10n.of(context)!)),
+      child: Row(
-          maxLines: 1),
+        children: [
-      subtitle: StreamBuilder<Object>(
+          Avatar(
-        stream: Matrix.of(context)
+            mxContent: room.avatar,
-            .client
+            name: room.displayname,
-            .onPresence
+            size: 32,
-            .stream
+          ),
-            .where((p) => p.senderId == room.directChatMatrixID)
+          const SizedBox(width: 12),
-            .rateLimit(const Duration(seconds: 1)),
+          Text(
-        builder: (context, snapshot) => Text(
+            room.getLocalizedDisplayname(MatrixLocals(L10n.of(context)!)),
-          room.getLocalizedStatus(context),
+            maxLines: 1,
-          maxLines: 1,
+            style: const TextStyle(
-          //overflow: TextOverflow.ellipsis,
+              fontSize: 16,
-        ),
+            ),
+          ),
+        ],
       ),
     );
   }

lib/pages/chat/chat_view.dart

@@ -112,14 +112,7 @@ class ChatView extends StatelessWidget {
           ),
       ];
     } else {
-      final widgets = controller.room?.widgets ?? [];
       return [
-        if (widgets.isNotEmpty)
-          IconButton(
-            onPressed: controller.showWidgetsSheet,
-            icon: const Icon(Icons.widgets),
-            tooltip: L10n.of(context)!.matrixWidgets,
-          ),
         IconButton(
           onPressed: controller.onPhoneButtonTap,
           icon: const Icon(Icons.call_outlined),

lib/widgets/chat_settings_popup_menu.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
 import 'package:adaptive_dialog/adaptive_dialog.dart';
@@ -8,6 +9,8 @@ import 'package:future_loading_dialog/future_loading_dialog.dart';
 import 'package:matrix/matrix.dart';
 import 'package:vrouter/vrouter.dart';
 
+import 'package:fluffychat/pages/chat/cupertino_widgets_bottom_sheet.dart';
+import 'package:fluffychat/pages/chat/widgets_bottom_sheet.dart';
 import 'matrix.dart';
 
 class ChatSettingsPopupMenu extends StatefulWidget {
@@ -40,6 +43,17 @@ class _ChatSettingsPopupMenuState extends State<ChatSettingsPopupMenu> {
           (u) => setState(() {}),
         );
     final items = <PopupMenuEntry<String>>[
+      if (widget.room.widgets.isNotEmpty)
+        PopupMenuItem<String>(
+          value: 'widgets',
+          child: Row(
+            children: [
+              const Icon(Icons.widgets_outlined),
+              const SizedBox(width: 12),
+              Text(L10n.of(context)!.matrixWidgets),
+            ],
+          ),
+        ),
       widget.room.pushRuleState == PushRuleState.notify
           ? PopupMenuItem<String>(
               value: 'mute',
@@ -90,6 +104,19 @@ class _ChatSettingsPopupMenuState extends State<ChatSettingsPopupMenu> {
     return PopupMenuButton(
       onSelected: (String choice) async {
         switch (choice) {
+          case 'widgets':
+            [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),
+                  );
+            break;
           case 'leave':
             final confirmed = await showOkCancelAlertDialog(
               useRootNavigator: false,