design: New three column layout for wide screens

assets/l10n/intl_en.arb

@@ -1577,6 +1577,7 @@
             "username": {}
         }
     },
+    "directChat": "Direct chat",
     "redactedByBecause": "Redacted by {username} because: \"{reason}\"",
     "@redactedByBecause": {
         "type": "text",

lib/pages/chat/chat.dart

@@ -20,9 +20,11 @@ import 'package:scroll_to_index/scroll_to_index.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 
 import 'package:fluffychat/config/app_config.dart';
+import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/pages/chat/chat_view.dart';
 import 'package:fluffychat/pages/chat/event_info_dialog.dart';
 import 'package:fluffychat/pages/chat/recording_dialog.dart';
+import 'package:fluffychat/pages/chat_details/chat_details.dart';
 import 'package:fluffychat/utils/adaptive_bottom_sheet.dart';
 import 'package:fluffychat/utils/error_reporter.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/event_extension.dart';
@@ -61,10 +63,31 @@ class ChatPage extends StatelessWidget {
         ),
       );
     }
-    return ChatPageWithRoom(
+
+    return Row(
+      children: [
+        Expanded(
+          child: ChatPageWithRoom(
             key: Key('chat_page_$roomId'),
             sideView: sideView,
             room: room,
+          ),
+        ),
+        if (FluffyThemes.isThreeColumnMode(context))
+          Container(
+            width: FluffyThemes.columnWidth,
+            clipBehavior: Clip.hardEdge,
+            decoration: BoxDecoration(
+              border: Border(
+                left: BorderSide(
+                  width: 1,
+                  color: Theme.of(context).dividerColor,
+                ),
+              ),
+            ),
+            child: ChatDetails(roomId: roomId),
+          ),
+      ],
     );
   }
 }

lib/pages/chat/chat_app_bar_title.dart

@@ -4,8 +4,6 @@ import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:go_router/go_router.dart';
 
 import 'package:fluffychat/pages/chat/chat.dart';
-import 'package:fluffychat/pages/user_bottom_sheet/user_bottom_sheet.dart';
-import 'package:fluffychat/utils/adaptive_bottom_sheet.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
 import 'package:fluffychat/widgets/avatar.dart';
 
@@ -19,23 +17,11 @@ class ChatAppBarTitle extends StatelessWidget {
     if (controller.selectedEvents.isNotEmpty) {
       return Text(controller.selectedEvents.length.toString());
     }
-    final directChatMatrixID = room.directChatMatrixID;
     return InkWell(
       hoverColor: Colors.transparent,
       splashColor: Colors.transparent,
       highlightColor: Colors.transparent,
-      onTap: directChatMatrixID != null
+      onTap: controller.isArchived
-          ? () => showAdaptiveBottomSheet(
-                context: context,
-                builder: (c) => UserBottomSheet(
-                  user: room
-                      .unsafeGetUserFromMemoryOrFallback(directChatMatrixID),
-                  outerContext: context,
-                  onMention: () => controller.sendController.text +=
-                      '${room.unsafeGetUserFromMemoryOrFallback(directChatMatrixID).mention} ',
-                ),
-              )
-          : controller.isArchived
           ? null
           : () => context.go(['', 'rooms', room.id, 'details'].join('/')),
       child: Row(

lib/pages/chat/chat_view.dart

@@ -131,7 +131,7 @@ class ChatView extends StatelessWidget {
             tooltip: L10n.of(context)!.placeCall,
           ),
         EncryptionButton(controller.room),
-        ChatSettingsPopupMenu(controller.room, !controller.room.isDirectChat),
+        ChatSettingsPopupMenu(controller.room, true),
       ];
     }
   }

lib/pages/chat_details/chat_details.dart

@@ -318,9 +318,9 @@ class ChatDetailsController extends State<ChatDetails> {
     if ((room.states['im.ponies.room_emotes'] ?? <String, Event>{})
         .keys
         .any((String s) => s.isNotEmpty)) {
-      context.go('/rooms/${room.id}/details/multiple_emotes');
+      context.push('/rooms/${room.id}/details/multiple_emotes');
     } else {
-      context.go('/rooms/${room.id}/details/emotes');
+      context.push('/rooms/${room.id}/details/emotes');
     }
   }
 

lib/pages/chat_details/chat_details_view.dart

@@ -35,6 +35,8 @@ class ChatDetailsView extends StatelessWidget {
       );
     }
 
+    final isEmbedded = GoRouterState.of(context).fullPath == '/rooms/:roomid';
+
     return StreamBuilder(
       stream: room.onUpdate.stream,
       builder: (context, snapshot) {
@@ -49,7 +51,9 @@ class ChatDetailsView extends StatelessWidget {
           MatrixLocals(L10n.of(context)!),
         );
         return Scaffold(
-          appBar: AppBar(
+          appBar: isEmbedded
+              ? null
+              : AppBar(
                   leading: const Center(child: BackButton()),
                   elevation: Theme.of(context).appBarTheme.elevation,
                   actions: <Widget>[
@@ -65,7 +69,8 @@ class ChatDetailsView extends StatelessWidget {
                     ChatSettingsPopupMenu(room, false)
                   ],
                   title: Text(L10n.of(context)!.chatDetails),
-            backgroundColor: Theme.of(context).appBarTheme.backgroundColor,
+                  backgroundColor:
+                      Theme.of(context).appBarTheme.backgroundColor,
                 ),
           body: MaxWidthBody(
             child: ListView.builder(
@@ -99,7 +104,9 @@ class ChatDetailsView extends StatelessWidget {
                                       ),
                                     ),
                                     child: Hero(
-                                      tag: 'content_banner',
+                                      tag: isEmbedded
+                                          ? 'embedded_content_banner'
+                                          : 'content_banner',
                                       child: Avatar(
                                         mxContent: room.avatar,
                                         name: displayname,
@@ -108,7 +115,8 @@ class ChatDetailsView extends StatelessWidget {
                                       ),
                                     ),
                                   ),
-                                  if (room.canChangeStateEvent(
+                                  if (!room.isDirectChat &&
+                                      room.canChangeStateEvent(
                                         EventTypes.RoomAvatar,
                                       ))
                                     Positioned(
@@ -131,7 +139,9 @@ class ChatDetailsView extends StatelessWidget {
                                 crossAxisAlignment: CrossAxisAlignment.start,
                                 children: [
                                   TextButton.icon(
-                                    onPressed: () => room.canChangeStateEvent(
+                                    onPressed: () => room.isDirectChat
+                                        ? null
+                                        : room.canChangeStateEvent(
                                             EventTypes.RoomName,
                                           )
                                             ? controller.setDisplaynameAction()
@@ -141,7 +151,9 @@ class ChatDetailsView extends StatelessWidget {
                                                 copyOnly: true,
                                               ),
                                     icon: Icon(
-                                      room.canChangeStateEvent(
+                                      room.isDirectChat
+                                          ? Icons.chat_bubble_outline
+                                          : room.canChangeStateEvent(
                                               EventTypes.RoomName,
                                             )
                                               ? Icons.edit_outlined
@@ -154,14 +166,18 @@ class ChatDetailsView extends StatelessWidget {
                                           .onBackground,
                                     ),
                                     label: Text(
-                                      displayname,
+                                      room.isDirectChat
+                                          ? L10n.of(context)!.directChat
+                                          : displayname,
                                       maxLines: 1,
                                       overflow: TextOverflow.ellipsis,
                                       //  style: const TextStyle(fontSize: 18),
                                     ),
                                   ),
                                   TextButton.icon(
-                                    onPressed: () => context.go(
+                                    onPressed: () => room.isDirectChat
+                                        ? null
+                                        : context.push(
                                             '/rooms/${controller.roomId}/details/members',
                                           ),
                                     icon: const Icon(
@@ -272,6 +288,7 @@ class ChatDetailsView extends StatelessWidget {
                           onTap: controller.goToEmoteSettings,
                           trailing: const Icon(Icons.chevron_right_outlined),
                         ),
+                        if (!room.isDirectChat)
                           ListTile(
                             leading: CircleAvatar(
                               backgroundColor:
@@ -291,6 +308,7 @@ class ChatDetailsView extends StatelessWidget {
                             ),
                             onTap: controller.setJoinRules,
                           ),
+                        if (!room.isDirectChat)
                           ListTile(
                             leading: CircleAvatar(
                               backgroundColor:
@@ -331,6 +349,7 @@ class ChatDetailsView extends StatelessWidget {
                             ),
                             onTap: controller.setGuestAccess,
                           ),
+                        if (!room.isDirectChat)
                           ListTile(
                             title: Text(L10n.of(context)!.editChatPermissions),
                             subtitle: Text(
@@ -346,7 +365,7 @@ class ChatDetailsView extends StatelessWidget {
                             ),
                             trailing: const Icon(Icons.chevron_right_outlined),
                             onTap: () => context
-                              .go('/rooms/${room.id}/details/permissions'),
+                                .push('/rooms/${room.id}/details/permissions'),
                           ),
                         Divider(
                           height: 1,
@@ -363,7 +382,7 @@ class ChatDetailsView extends StatelessWidget {
                             ),
                           ),
                         ),
-                        if (room.canInvite)
+                        if (!room.isDirectChat && room.canInvite)
                           ListTile(
                             title: Text(L10n.of(context)!.inviteContact),
                             leading: CircleAvatar(
@@ -393,7 +412,7 @@ class ChatDetailsView extends StatelessWidget {
                               color: Colors.grey,
                             ),
                           ),
-                          onTap: () => context.go(
+                          onTap: () => context.push(
                             '/rooms/${controller.roomId!}/details/members',
                           ),
                           trailing: const Icon(Icons.chevron_right_outlined),

lib/pages/chat_encryption_settings/chat_encryption_settings_view.dart

@@ -9,6 +9,7 @@ import 'package:url_launcher/url_launcher_string.dart';
 import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/pages/chat_encryption_settings/chat_encryption_settings.dart';
 import 'package:fluffychat/utils/beautify_string_extension.dart';
+import 'package:fluffychat/widgets/layouts/max_width_body.dart';
 
 class ChatEncryptionSettingsView extends StatelessWidget {
   final ChatEncryptionSettingsController controller;
@@ -38,13 +39,16 @@ class ChatEncryptionSettingsView extends StatelessWidget {
             ),
           ],
         ),
-        body: ListView(
+        body: MaxWidthBody(
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
             children: [
               SwitchListTile(
                 secondary: CircleAvatar(
                   foregroundColor:
                       Theme.of(context).colorScheme.onPrimaryContainer,
-                backgroundColor: Theme.of(context).colorScheme.primaryContainer,
+                  backgroundColor:
+                      Theme.of(context).colorScheme.primaryContainer,
                   child: const Icon(Icons.lock_outlined),
                 ),
                 title: Text(L10n.of(context)!.encryptThisChat),
@@ -81,7 +85,8 @@ class ChatEncryptionSettingsView extends StatelessWidget {
                 ),
                 StreamBuilder(
                   stream: room.onUpdate.stream,
-                builder: (context, snapshot) => FutureBuilder<List<DeviceKeys>>(
+                  builder: (context, snapshot) =>
+                      FutureBuilder<List<DeviceKeys>>(
                     future: room.getUserDeviceKeys(),
                     builder: (BuildContext context, snapshot) {
                       if (snapshot.hasError) {
@@ -154,8 +159,9 @@ class ChatEncryptionSettingsView extends StatelessWidget {
                                       maxLines: 1,
                                       overflow: TextOverflow.ellipsis,
                                       style: TextStyle(
-                                      color:
+                                        color: Theme.of(context)
-                                          Theme.of(context).colorScheme.primary,
+                                            .colorScheme
+                                            .primary,
                                         fontSize: 12,
                                         fontStyle: FontStyle.italic,
                                       ),
@@ -193,6 +199,7 @@ class ChatEncryptionSettingsView extends StatelessWidget {
             ],
           ),
         ),
+      ),
     );
   }
 }