feat: Show/hide third column in chat view

lib/config/setting_keys.dart

@@ -28,4 +28,6 @@ abstract class SettingKeys {
   static const String sendOnEnter = 'chat.fluffy.send_on_enter';
   static const String experimentalVoip = 'chat.fluffy.experimental_voip';
   static const String showPresences = 'chat.fluffy.show_presences';
+  static const String displayChatDetailsColumn =
+      'chat.fluffy.display_chat_details_column';
 }

lib/pages/chat/chat.dart

@@ -22,6 +22,7 @@ import 'package:shared_preferences/shared_preferences.dart';
 import 'package:universal_html/html.dart' as html;
 
 import 'package:fluffychat/config/app_config.dart';
+import 'package:fluffychat/config/setting_keys.dart';
 import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/pages/chat/chat_view.dart';
 import 'package:fluffychat/pages/chat/event_info_dialog.dart';
@@ -65,31 +66,10 @@ class ChatPage extends StatelessWidget {
       );
     }
 
-    return Row(
+    return ChatPageWithRoom(
-      children: [
+      key: Key('chat_page_$roomId'),
-        Expanded(
+      room: room,
-          child: ChatPageWithRoom(
+      shareText: shareText,
-            key: Key('chat_page_$roomId'),
-            room: room,
-            shareText: shareText,
-          ),
-        ),
-        if (FluffyThemes.isThreeColumnMode(context) &&
-            room.membership == Membership.join)
-          Container(
-            width: FluffyThemes.columnWidth,
-            clipBehavior: Clip.hardEdge,
-            decoration: BoxDecoration(
-              border: Border(
-                left: BorderSide(
-                  width: 1,
-                  color: Theme.of(context).dividerColor,
-                ),
-              ),
-            ),
-            child: ChatDetails(roomId: roomId),
-          ),
-      ],
     );
   }
 }
@@ -279,6 +259,10 @@ class ChatController extends State<ChatPageWithRoom>
     inputFocus.addListener(_inputFocusListener);
     _loadDraft();
     super.initState();
+    _displayChatDetailsColumn = ValueNotifier(
+      Matrix.of(context).store.getBool(SettingKeys.displayChatDetailsColumn) ??
+          false,
+    );
     sendingClient = Matrix.of(context).client;
     WidgetsBinding.instance.addObserver(this);
     _tryLoadTimeline();
@@ -1317,8 +1301,60 @@ class ChatController extends State<ChatPageWithRoom>
         editEvent = null;
       });
 
+  late final ValueNotifier<bool> _displayChatDetailsColumn;
+
+  void toggleDisplayChatDetailsColumn() async {
+    await Matrix.of(context).store.setBool(
+          SettingKeys.displayChatDetailsColumn,
+          !_displayChatDetailsColumn.value,
+        );
+    _displayChatDetailsColumn.value = !_displayChatDetailsColumn.value;
+  }
+
   @override
-  Widget build(BuildContext context) => ChatView(this);
+  Widget build(BuildContext context) => Row(
+        children: [
+          Expanded(
+            child: ChatView(this),
+          ),
+          AnimatedSize(
+            duration: FluffyThemes.animationDuration,
+            curve: FluffyThemes.animationCurve,
+            child: ValueListenableBuilder(
+              valueListenable: _displayChatDetailsColumn,
+              builder: (context, displayChatDetailsColumn, _) {
+                if (!FluffyThemes.isThreeColumnMode(context) ||
+                    room.membership != Membership.join ||
+                    !displayChatDetailsColumn) {
+                  return const SizedBox(
+                    height: double.infinity,
+                    width: 0,
+                  );
+                }
+                return Container(
+                  width: FluffyThemes.columnWidth,
+                  clipBehavior: Clip.hardEdge,
+                  decoration: BoxDecoration(
+                    border: Border(
+                      left: BorderSide(
+                        width: 1,
+                        color: Theme.of(context).dividerColor,
+                      ),
+                    ),
+                  ),
+                  child: ChatDetails(
+                    roomId: roomId,
+                    embeddedCloseButton: IconButton(
+                      icon: const Icon(Icons.close),
+                      onPressed: toggleDisplayChatDetailsColumn,
+                    ),
+                  ),
+                );
+              },
+            ),
+          ),
+        ],
+      );
 }
 
 enum EmojiPickerType { reaction, keyboard }

lib/pages/chat/chat_app_bar_title.dart

@@ -26,7 +26,9 @@ class ChatAppBarTitle extends StatelessWidget {
       highlightColor: Colors.transparent,
       onTap: controller.isArchived
           ? null
-          : () => context.go('/rooms/${room.id}/details'),
+          : () => FluffyThemes.isThreeColumnMode(context)
+              ? controller.toggleDisplayChatDetailsColumn()
+              : context.go('/rooms/${room.id}/details'),
       child: Row(
         children: [
           Hero(

lib/pages/chat_details/chat_details.dart

@@ -22,10 +22,12 @@ enum AliasActions { copy, delete, setCanonical }
 
 class ChatDetails extends StatefulWidget {
   final String roomId;
+  final Widget? embeddedCloseButton;
 
   const ChatDetails({
     super.key,
     required this.roomId,
+    this.embeddedCloseButton,
   });
 
   @override

lib/pages/chat_details/chat_details_view.dart

@@ -35,8 +35,6 @@ class ChatDetailsView extends StatelessWidget {
       );
     }
 
-    final isEmbedded = GoRouterState.of(context).fullPath == '/rooms/:roomid';
-
     return StreamBuilder(
       stream: room.onUpdate.stream,
       builder: (context, snapshot) {
@@ -51,29 +49,28 @@ class ChatDetailsView extends StatelessWidget {
           MatrixLocals(L10n.of(context)!),
         );
         return Scaffold(
-          appBar: isEmbedded
+          appBar: AppBar(
-              ? null
+            leading: controller.widget.embeddedCloseButton ??
-              : AppBar(
+                const Center(child: BackButton()),
-                  leading: const Center(child: BackButton()),
+            elevation: Theme.of(context).appBarTheme.elevation,
-                  elevation: Theme.of(context).appBarTheme.elevation,
+            actions: <Widget>[
-                  actions: <Widget>[
+              if (room.canonicalAlias.isNotEmpty)
-                    if (room.canonicalAlias.isNotEmpty)
+                IconButton(
-                      IconButton(
+                  tooltip: L10n.of(context)!.share,
-                        tooltip: L10n.of(context)!.share,
+                  icon: Icon(Icons.adaptive.share_outlined),
-                        icon: Icon(Icons.adaptive.share_outlined),
+                  onPressed: () => FluffyShare.share(
-                        onPressed: () => FluffyShare.share(
+                    L10n.of(context)!.youInvitedToBy(
-                          L10n.of(context)!.youInvitedToBy(
+                      AppConfig.inviteLinkPrefix + room.canonicalAlias,
-                            AppConfig.inviteLinkPrefix + room.canonicalAlias,
+                    ),
-                          ),
+                    context,
-                          context,
+                  ),
-                        ),
-                      ),
-                    ChatSettingsPopupMenu(room, false),
-                  ],
-                  title: Text(L10n.of(context)!.chatDetails),
-                  backgroundColor:
-                      Theme.of(context).appBarTheme.backgroundColor,
                 ),
+              if (controller.widget.embeddedCloseButton == null)
+                ChatSettingsPopupMenu(room, false),
+            ],
+            title: Text(L10n.of(context)!.chatDetails),
+            backgroundColor: Theme.of(context).appBarTheme.backgroundColor,
+          ),
           body: MaxWidthBody(
             child: ListView.builder(
               physics: const NeverScrollableScrollPhysics(),
@@ -106,7 +103,9 @@ class ChatDetailsView extends StatelessWidget {
                                       ),
                                     ),
                                     child: Hero(
-                                      tag: isEmbedded
+                                      tag: controller
+                                                  .widget.embeddedCloseButton !=
+                                              null
                                           ? 'embedded_content_banner'
                                           : 'content_banner',
                                       child: Avatar(