ui: Make side panels to overlay the center panel in autohide layout.

This commit makes the side panels to overlay the body which avoids
squashing and stretching of the message view which improves UX in
autohide mode.

To do this the `show_panel` functions have been updated to use
Overlay.

The focus setting in the `show_panel` functions which could be
avoided at a later point needed a reordering in the SEARCH keypress
which actually makes it the correct order, i.e.,
* first handle autohide
* then handle search

Tests updated.

Author: Rohitth007

tests/ui/test_ui.py

@@ -22,15 +22,14 @@ def mock_external_classes(self, mocker: MockerFixture) -> None:
         self.model = mocker.patch(CONTROLLER + ".model")
         self.write_box = mocker.patch(MODULE + ".WriteBox")
         self.search_box = mocker.patch(MODULE + ".SearchBox")
-
-    @pytest.fixture
-    def view(self, mocker: MockerFixture) -> View:
         mocker.patch(MODULE + ".TabView")
         mocker.patch(MODULE + ".LeftColumnView")
         mocker.patch("zulipterminal.ui_tools.views.urwid.Frame")
         mocker.patch("zulipterminal.ui_tools.views.MessageView")
         mocker.patch(MODULE + ".RightColumnView")
 
+    @pytest.fixture
+    def view(self, mocker: MockerFixture) -> View:
         # View is an urwid.Frame instance, a Box widget.
         mocker.patch(VIEW + ".sizing", return_value=frozenset({"box"}))
 
@@ -235,37 +234,56 @@ def just_set_message_view(self: Any) -> None:
     def test_show_panel_methods(
         self,
         mocker: MockerFixture,
-        view: View,
         visible: bool,
         autohide: bool,
         test_method: str,
     ) -> None:
-        view.body = mocker.Mock()
-        view.body.contents = [view.left_panel, mocker.Mock(), mocker.Mock()]
-        view.controller.autohide = autohide
-
+        self.controller.autohide = autohide
+        view = View(self.controller)
+        view.frame.body = view.body
+        expected_overlay_options = [
+            "",
+            None,
+            "given",
+            0,
+            None,
+            0,
+            0,
+            "top",
+            None,
+            "relative",
+            100,
+            None,
+            0,
+            0,
+        ]
         if test_method == "left_panel":
-            expected_width = LEFT_WIDTH
+            expected_overlay_options[0] = "left"
+            expected_overlay_options[3] = LEFT_WIDTH + 1
             expected_tab = view.left_tab
             expected_panel = view.left_panel
 
             view.show_left_panel(visible=visible)
         else:
-            expected_width = RIGHT_WIDTH
+            expected_overlay_options[0] = "right"
+            expected_overlay_options[3] = RIGHT_WIDTH + 1
             expected_tab = view.right_tab
             expected_panel = view.right_panel
 
             view.show_right_panel(visible=visible)
 
         if autohide:
             if visible:
-                assert (expected_panel, mocker.ANY) in view.body.contents
-                view.body.options.assert_called_once_with("given", expected_width)
+                assert (expected_panel, mocker.ANY) in view.frame.body.top_w.contents
+                assert view.frame.body.bottom_w == view.body
+                assert view.frame.body.contents[1][1] == tuple(expected_overlay_options)
             else:
-                assert (expected_tab, mocker.ANY) in view.body.contents
-                view.body.options.assert_called_once_with("given", TAB_WIDTH)
+                assert (expected_tab, mocker.ANY) in view.frame.body.contents
+                assert view.body.focus_position == 1
         else:
-            view.body.options.assert_not_called()
+            # No change
+            assert view.frame.body.contents[0][0] == view.left_panel
+            assert view.frame.body.contents[2][0] == view.right_panel
 
     def test_keypress_normal_mode_navigation(
         self,

zulipterminal/ui.py

@@ -190,17 +190,43 @@ def show_left_panel(self, *, visible: bool) -> None:
         if not self.controller.autohide:
             return
 
-        width = LEFT_WIDTH if visible else TAB_WIDTH
-        widget = self.left_panel if visible else self.left_tab
-        self.body.contents[0] = (widget, self.body.options("given", width))
+        if visible:
+            self.frame.body = urwid.Overlay(
+                urwid.Columns(
+                    [(LEFT_WIDTH, self.left_panel), (1, urwid.SolidFill("▏"))]
+                ),
+                self.body,
+                align="left",
+                width=LEFT_WIDTH + 1,
+                valign="top",
+                height=("relative", 100),
+            )
+        else:
+            self.frame.body = self.body
+            # FIXME: This can be avoided after fixing the "sacrificing 1st
+            # unread msg" issue and setting focus_column=1 when initializing.
+            self.body.focus_position = 1
 
     def show_right_panel(self, *, visible: bool) -> None:
         if not self.controller.autohide:
             return
 
-        width = RIGHT_WIDTH if visible else TAB_WIDTH
-        widget = self.right_panel if visible else self.right_tab
-        self.body.contents[2] = (widget, self.body.options("given", width))
+        if visible:
+            self.frame.body = urwid.Overlay(
+                urwid.Columns(
+                    [(1, urwid.SolidFill("▕")), (RIGHT_WIDTH, self.right_panel)]
+                ),
+                self.body,
+                align="right",
+                width=RIGHT_WIDTH + 1,
+                valign="top",
+                height=("relative", 100),
+            )
+        else:
+            self.frame.body = self.body
+            # FIXME: This can be avoided after fixing the "sacrificing 1st
+            # unread msg" issue and setting focus_column=1 when initializing.
+            self.body.focus_position = 1
 
     def keypress(self, size: urwid_Box, key: str) -> Optional[str]:
         self.model.new_user_input = True
@@ -227,19 +253,19 @@ def keypress(self, size: urwid_Box, key: str) -> Optional[str]:
             self.mentioned_button.activate(key)
         elif is_command_key("SEARCH_PEOPLE", key):
             # Start User Search if not in editor_mode
-            self.body.focus_position = 2
-            self.users_view.keypress(size, key)
             self.show_left_panel(visible=False)
             self.show_right_panel(visible=True)
+            self.body.focus_position = 2
+            self.users_view.keypress(size, key)
             return key
         elif is_command_key("SEARCH_STREAMS", key) or is_command_key(
             "SEARCH_TOPICS", key
         ):
             # jump stream search
-            self.body.focus_position = 0
-            self.left_panel.keypress(size, key)
             self.show_right_panel(visible=False)
             self.show_left_panel(visible=True)
+            self.body.focus_position = 0
+            self.left_panel.keypress(size, key)
             return key
         elif is_command_key("OPEN_DRAFT", key):
             saved_draft = self.model.session_draft_message()