I can show and hide the columns comanger

src/myfasthtml/controls/Panel.py

@@ -1,5 +1,5 @@
 from dataclasses import dataclass
-from typing import Literal
+from typing import Literal, Optional
 
 from fasthtml.components import Div
 from fasthtml.xtend import Script
@@ -42,6 +42,12 @@ class PanelIds:
 class PanelConf:
   left: bool = False
   right: bool = True
+  left_title: str = "Left"
+  right_title: str = "Right"
+  show_left_title: bool = True
+  show_right_title: bool = True
+  show_display_left: bool = True
+  show_display_right: bool = True
 
 
 class PanelState(DbObject):
@@ -55,12 +61,19 @@ class PanelState(DbObject):
 
 
 class Commands(BaseCommands):
-  def toggle_side(self, side: Literal["left", "right"], visible: bool = None):
+  def set_side_visible(self, side: Literal["left", "right"], visible: bool = None):
+    return Command("TogglePanelSide",
+                   f"Toggle {side} side panel",
+                   self._owner,
+                   self._owner.set_side_visible,
+                   args=[side, visible]).htmx(target=f"#{self._owner.get_ids().panel(side)}")
+  
+  def toggle_side(self, side: Literal["left", "right"]):
     return Command("TogglePanelSide",
                    f"Toggle {side} side panel",
                    self._owner,
                    self._owner.toggle_side,
-                   args=[side, visible]).htmx(target=f"#{self._owner.get_ids().panel(side)}")
+                   args=[side]).htmx(target=f"#{self._owner.get_ids().panel(side)}")
   
   def update_side_width(self, side: Literal["left", "right"]):
     """
@@ -89,7 +102,7 @@ class Panel(MultipleInstance):
   the panel with appropriate HTML elements and JavaScript for interactivity.
   """
   
-  def __init__(self, parent, conf=None, _id=None):
+  def __init__(self, parent, conf: Optional[PanelConf] = None, _id=None):
     super().__init__(parent, _id=_id)
     self.conf = conf or PanelConf()
     self.commands = Commands(self)
@@ -110,7 +123,7 @@ class Panel(MultipleInstance):
     
     return self._mk_panel(side)
   
-  def toggle_side(self, side, visible):
+  def set_side_visible(self, side, visible):
     if side == "left":
       self._state.left_visible = visible
     else:
@@ -118,6 +131,10 @@ class Panel(MultipleInstance):
     
     return self._mk_panel(side), self._mk_show_icon(side)
   
+  def toggle_side(self, side):
+    current_visible = self._state.left_visible if side == "left" else self._state.right_visible
+    return self.set_side_visible(side, not current_visible)
+  
   def set_main(self, main):
     self._main = main
     return self
@@ -134,45 +151,75 @@ class Panel(MultipleInstance):
     enabled = self.conf.left if side == "left" else self.conf.right
     if not enabled:
       return None
-    
+
     visible = self._state.left_visible if side == "left" else self._state.right_visible
     content = self._right if side == "right" else self._left
-    
+    show_title = self.conf.show_left_title if side == "left" else self.conf.show_right_title
+    title = self.conf.left_title if side == "left" else self.conf.right_title
+
     resizer = Div(
       cls=f"mf-resizer mf-resizer-{side}",
       data_command_id=self.commands.update_side_width(side).id,
       data_side=side
     )
-    
+
     hide_icon = mk.icon(
       subtract20_regular,
       size=20,
-      command=self.commands.toggle_side(side, False),
+      command=self.commands.set_side_visible(side, False),
       cls="mf-panel-hide-icon"
     )
-    
+
     panel_cls = f"mf-panel-{side}"
     if not visible:
       panel_cls += " mf-hidden"
-    
+    if show_title:
+      panel_cls += " mf-panel-with-title"
+
     # Left panel: content then resizer (resizer on the right)
     # Right panel: resizer then content (resizer on the left)
-    if side == "left":
-      return Div(
+    if show_title:
+      header = Div(
+        Div(title),
         hide_icon,
-        Div(content, id=self._ids.content(side)),
-        resizer,
-        cls=panel_cls,
-        id=self._ids.panel(side)
+        cls="mf-panel-header"
       )
+      body = Div(
+        header,
+        Div(content, id=self._ids.content(side), cls="mf-panel-content"),
+        cls="mf-panel-body"
+      )
+      if side == "left":
+        return Div(
+          body,
+          resizer,
+          cls=panel_cls,
+          id=self._ids.panel(side)
+        )
+      else:
+        return Div(
+          resizer,
+          body,
+          cls=panel_cls,
+          id=self._ids.panel(side)
+        )
     else:
-      return Div(
-        resizer,
-        hide_icon,
-        Div(content, id=self._ids.content(side)),
-        cls=panel_cls,
-        id=self._ids.panel(side)
-      )
+      if side == "left":
+        return Div(
+          hide_icon,
+          Div(content, id=self._ids.content(side)),
+          resizer,
+          cls=panel_cls,
+          id=self._ids.panel(side)
+        )
+      else:
+        return Div(
+          resizer,
+          hide_icon,
+          Div(content, id=self._ids.content(side)),
+          cls=panel_cls,
+          id=self._ids.panel(side)
+        )
   
   def _mk_main(self):
     return Div(
@@ -195,13 +242,17 @@ class Panel(MultipleInstance):
     enabled = self.conf.left if side == "left" else self.conf.right
     if not enabled:
       return None
-    
+
+    show_display = self.conf.show_display_left if side == "left" else self.conf.show_display_right
+    if not show_display:
+      return None
+
     is_visible = self._state.left_visible if side == "left" else self._state.right_visible
     icon_cls = "hidden" if is_visible else f"mf-panel-show-icon mf-panel-show-icon-{side}"
-    
+
     return mk.icon(
       more_horizontal20_regular,
-      command=self.commands.toggle_side(side, True),
+      command=self.commands.set_side_visible(side, True),
       cls=icon_cls,
       id=f"{self._id}_show_{side}"
     )