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.

Author: Rohitth007

zulipterminal/ui.py

@@ -107,8 +107,8 @@ def set_footer_text(
             text = self.get_random_help()
         else:
             text = text_list
-        self._w.footer.set_text(text)
-        self._w.footer.set_attr_map({None: style})
+        self.frame.footer.set_text(text)
+        self.frame.footer.set_attr_map({None: style})
         self.controller.update_screen()
         if duration is not None:
             assert duration > 0
@@ -142,17 +142,19 @@ def main_window(self) -> Any:
         self.right_panel, self.right_tab = self.right_column_view()
         if self.controller.autohide:
             body = [
-                (LEFT_WIDTH, self.left_panel),
+                (TAB_WIDTH, self.left_tab),
                 ("weight", 10, self.center_panel),
                 (TAB_WIDTH, self.right_tab),
             ]
+            focus_column = 1
         else:
             body = [
                 (LEFT_WIDTH, self.left_panel),
                 ("weight", 10, self.center_panel),
                 (RIGHT_WIDTH, self.right_panel),
             ]
-        self.body = urwid.Columns(body, focus_column=0)
+            focus_column = 0
+        self.body = urwid.Columns(body, focus_column=focus_column)
 
         # NOTE: message_view is None, but middle_column_view is called above
         # and sets it.
@@ -177,24 +179,46 @@ def main_window(self) -> Any:
             ]
         )
 
-        w = urwid.Frame(
+        self.frame = urwid.Frame(
             self.body, title_bar, focus_part="body", footer=self.footer_view()
         )
-        return w
+
+        # Show overlayed left panel on startup in autohide mode
+        self.show_left_panel(visible=True)
+
+        return self.frame
 
     def show_left_panel(self, *, visible: bool) -> None:
         if not self.controller.autohide:
             return
-        option = ("given", LEFT_WIDTH) if visible else ("given", TAB_WIDTH)
-        widget = self.left_panel if visible else self.left_tab
-        self.body.contents[0] = (widget, self.body.options(*option))
+
+        if visible:
+            self.frame.body = urwid.Overlay(
+                urwid.Columns([self.left_panel, (1, urwid.SolidFill("▏"))]),
+                self.body,
+                align="left",
+                width=LEFT_WIDTH,
+                valign="top",
+                height=("relative", 100),
+            )
+        else:
+            self.frame.body = self.body
 
     def show_right_panel(self, *, visible: bool) -> None:
         if not self.controller.autohide:
             return
-        option = ("given", RIGHT_WIDTH) if visible else ("given", TAB_WIDTH)
-        widget = self.right_panel if visible else self.right_tab
-        self.body.contents[2] = (widget, self.body.options(*option))
+
+        if visible:
+            self.frame.body = urwid.Overlay(
+                urwid.Columns([(1, urwid.SolidFill("▕")), self.right_panel]),
+                self.body,
+                align="right",
+                width=LEFT_WIDTH,
+                valign="top",
+                height=("relative", 100),
+            )
+        else:
+            self.frame.body = self.body
 
     def keypress(self, size: urwid_Box, key: str) -> Optional[str]:
         self.model.new_user_input = True