Fix invalid layout on sidepanel desktop (#364)

commetchat · Oct 8, 2024 · f0424a0 · f0424a0
1 parent 7a0c10b
commit f0424a0
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 62 deletions.
diff --git a/commet/lib/ui/organisms/room_side_panel/room_side_panel.dart b/commet/lib/ui/organisms/room_side_panel/room_side_panel.dart
@@ -12,17 +12,19 @@ import 'package:flutter/material.dart';
 import 'package:tiamat/atoms/tile.dart';
 import 'package:tiamat/tiamat.dart' as tiamat;
 
-enum _SidePanelState {
+enum SidePanelState {
   defaultView,
   thread,
   search,
 }
 
 class RoomSidePanel extends StatefulWidget {
-  const RoomSidePanel({required this.state, super.key});
+  const RoomSidePanel({required this.state, this.builder, super.key});
 
   final MainPageState state;
 
+  final Widget Function(SidePanelState state, Widget child)? builder;
+
   @override
   State<RoomSidePanel> createState() => _RoomSidePanelState();
 }
@@ -31,7 +33,7 @@ class _RoomSidePanelState extends State<RoomSidePanel> {
   String? _currentThreadId;
   String? get currentThreadId => _currentThreadId;
 
-  _SidePanelState state = _SidePanelState.defaultView;
+  SidePanelState state = SidePanelState.defaultView;
 
   late List<StreamSubscription> subs;
 
@@ -56,7 +58,7 @@ class _RoomSidePanelState extends State<RoomSidePanel> {
 
   @override
   Widget build(BuildContext context) {
-    bool showBackButton = state == _SidePanelState.thread;
+    bool showBackButton = state == SidePanelState.thread;
 
     Widget result = Stack(
       alignment: Alignment.topRight,
@@ -71,30 +73,36 @@ class _RoomSidePanelState extends State<RoomSidePanel> {
                   icon: Icons.close,
                   radius: 24,
                   onPressed: () => setState(() {
-                        state = _SidePanelState.defaultView;
+                        state = SidePanelState.defaultView;
                       })),
             ),
           ),
       ],
     );
 
-    if (state == _SidePanelState.thread) {
-      result = Flexible(child: result);
-    }
-
-    return Material(
+    result = Material(
       color: Colors.transparent,
       child: result,
     );
+
+    if (widget.builder != null) {
+      result = widget.builder!.call(state, result);
+    }
+
+    // if (state == _SidePanelState.thread) {
+    //   result = Flexible(child: result);
+    // }
+
+    return result;
   }
 
   Widget buildPanelContent(BuildContext context) {
     switch (state) {
-      case _SidePanelState.defaultView:
+      case SidePanelState.defaultView:
         return buildDefaultView();
-      case _SidePanelState.thread:
+      case SidePanelState.thread:
         return buildThread();
-      case _SidePanelState.search:
+      case SidePanelState.search:
         return buildSearch();
     }
   }
@@ -108,14 +116,14 @@ class _RoomSidePanelState extends State<RoomSidePanel> {
 
     setState(() {
       _currentThreadId = threadId;
-      state = _SidePanelState.thread;
+      state = SidePanelState.thread;
     });
   }
 
   void onCloseThreadSignal(void event) {
     setState(() {
       _currentThreadId = null;
-      state = _SidePanelState.defaultView;
+      state = SidePanelState.defaultView;
     });
   }
 
@@ -141,35 +149,33 @@ class _RoomSidePanelState extends State<RoomSidePanel> {
   }
 
   Widget buildThread() {
-    return Flexible(
-      child: Tile(
-        caulkPadLeft: true,
-        caulkClipTopLeft: true,
-        caulkClipBottomLeft: true,
-        caulkPadBottom: true,
-        child: Stack(
-          children: [
-            Chat(
-              widget.state.currentRoom!,
-              threadId: currentThreadId,
-              key: ValueKey(
-                  "room-timeline-key-${widget.state.currentRoom!.localId}_thread_$currentThreadId"),
-            ),
-            ScaledSafeArea(
-              child: Align(
-                alignment: Alignment.topRight,
-                child: Padding(
-                  padding: const EdgeInsets.all(24.0),
-                  child: tiamat.CircleButton(
-                    icon: Icons.close,
-                    radius: 24,
-                    onPressed: () => EventBus.closeThread.add(null),
-                  ),
+    return Tile(
+      caulkPadLeft: true,
+      caulkClipTopLeft: true,
+      caulkClipBottomLeft: true,
+      caulkPadBottom: true,
+      child: Stack(
+        children: [
+          Chat(
+            widget.state.currentRoom!,
+            threadId: currentThreadId,
+            key: ValueKey(
+                "room-timeline-key-${widget.state.currentRoom!.localId}_thread_$currentThreadId"),
+          ),
+          ScaledSafeArea(
+            child: Align(
+              alignment: Alignment.topRight,
+              child: Padding(
+                padding: const EdgeInsets.all(24.0),
+                child: tiamat.CircleButton(
+                  icon: Icons.close,
+                  radius: 24,
+                  onPressed: () => EventBus.closeThread.add(null),
                 ),
               ),
             ),
-          ],
-        ),
+          ),
+        ],
       ),
     );
   }
@@ -184,14 +190,14 @@ class _RoomSidePanelState extends State<RoomSidePanel> {
             EventBus.focusTimeline.add(null);
           },
           close: () => setState(() {
-            state = _SidePanelState.defaultView;
+            state = SidePanelState.defaultView;
           }),
         ));
   }
 
   void onStartSearch(void event) {
     setState(() {
-      state = _SidePanelState.search;
+      state = SidePanelState.search;
     });
   }
 }
diff --git a/commet/lib/ui/pages/main/main_page_view_desktop.dart b/commet/lib/ui/pages/main/main_page_view_desktop.dart
@@ -212,10 +212,11 @@ class MainPageViewDesktop extends StatelessWidget {
             ),
           ),
           Expanded(
-            child: Row(
+            child: Flex(
+              direction: Axis.horizontal,
               mainAxisSize: MainAxisSize.max,
               children: [
-                Flexible(
+                Expanded(
                   child: Tile(
                     caulkPadLeft: true,
                     caulkClipTopLeft: true,
@@ -232,17 +233,25 @@ class MainPageViewDesktop extends StatelessWidget {
                     ),
                   ),
                 ),
-                Tile.surfaceContainer(
-                  caulkPadLeft: true,
-                  caulkPadBottom: true,
-                  caulkClipBottomLeft: true,
-                  caulkClipTopLeft: true,
-                  child: RoomSidePanel(
+                RoomSidePanel(
                     key: ValueKey(
                         "room-sidepanel-key-${state.currentRoom!.localId}"),
                     state: state,
-                  ),
-                )
+                    builder: (state, child) {
+                      Widget result = Tile.surfaceContainer(
+                        caulkPadLeft: true,
+                        caulkPadBottom: true,
+                        caulkClipBottomLeft: true,
+                        caulkClipTopLeft: true,
+                        child: child,
+                      );
+
+                      if (state == SidePanelState.thread) {
+                        result = Flexible(child: result);
+                      }
+
+                      return result;
+                    })
               ],
             ),
           ),

diff --git a/commet/lib/ui/pages/main/main_page_view_mobile.dart b/commet/lib/ui/pages/main/main_page_view_mobile.dart
@@ -111,15 +111,23 @@ class _MainPageViewMobileState extends State<MainPageViewMobile> {
   Widget? rightPanel(BuildContext context) {
     if (widget.state.currentRoom != null) {
       return Tile.surfaceContainer(
-          caulkPadLeft: true,
-          caulkClipTopLeft: true,
-          caulkClipBottomLeft: true,
-          child: ScaledSafeArea(
-              bottom: false,
-              child: RoomSidePanel(
-                  key: ValueKey(
-                      "room-side-panel-${widget.state.currentRoom!.localId}"),
-                  state: widget.state)));
+        caulkPadLeft: true,
+        caulkClipTopLeft: true,
+        caulkClipBottomLeft: true,
+        child: ScaledSafeArea(
+          bottom: false,
+          child: Column(
+            children: [
+              Expanded(
+                child: RoomSidePanel(
+                    key: ValueKey(
+                        "room-side-panel-${widget.state.currentRoom!.localId}"),
+                    state: widget.state),
+              )
+            ],
+          ),
+        ),
+      );
     }
 
     return null;