Working and layout's drawers resize

src/myfasthtml/controls/Layout.py

@@ -26,12 +26,31 @@ class LayoutState(DbObject):
     super().__init__(owner.get_session(), owner.get_id())
     with self.initializing():
       self.left_drawer_open: bool = True
-      self.right_drawer_open: bool = False
+      self.right_drawer_open: bool = True
+      self.left_drawer_width: int = 250
+      self.right_drawer_width: int = 250
 
 
 class Commands(BaseCommands):
-  def toggle_left_drawer(self):
-    return Command("ToggleDrawer", "Toggle main layout drawer", self._owner.toggle_drawer, "left")
+  def toggle_drawer(self, side: Literal["left", "right"]):
+    return Command("ToggleDrawer", "Toggle main layout drawer", self._owner.toggle_drawer, side)
+  
+  def update_drawer_width(self, side: Literal["left", "right"]):
+    """
+    Create a command to update drawer width.
+    
+    Args:
+        side: Which drawer to update ("left" or "right")
+    
+    Returns:
+        Command: Command object for updating drawer width
+    """
+    return Command(
+      f"UpdateDrawerWidth_{side}",
+      f"Update {side} drawer width",
+      self._owner.update_drawer_width,
+      side
+    )
 
 
 class Layout(SingleInstance):
@@ -103,7 +122,32 @@ class Layout(SingleInstance):
       return self._mk_left_drawer_icon(), self._mk_left_drawer()
     elif side == "right":
       self._state.right_drawer_open = not self._state.right_drawer_open
-      return self._mk_left_drawer_icon(), self._mk_right_drawer()
+      return self._mk_right_drawer_icon(), self._mk_right_drawer()
+    else:
+      raise ValueError("Invalid drawer side")
+  
+  def update_drawer_width(self, side: Literal["left", "right"], width: int):
+    """
+    Update the width of a drawer.
+    
+    Args:
+        side: Which drawer to update ("left" or "right")
+        width: New width in pixels
+    
+    Returns:
+        Div: Updated drawer component
+    """
+    # Constrain width between min and max values
+    width = max(150, min(600, width))
+    
+    logger.debug(f"Update drawer width: {side=}, {width=}")
+    
+    if side == "left":
+      self._state.left_drawer_width = width
+      return self._mk_left_drawer()
+    elif side == "right":
+      self._state.right_drawer_width = width
+      return self._mk_right_drawer()
     else:
       raise ValueError("Invalid drawer side")
   
@@ -151,12 +195,26 @@ class Layout(SingleInstance):
     Render the left drawer if enabled.
 
     Returns:
-        Div or None: FastHTML Div component for left drawer, or None if disabled
+        Div: FastHTML Div component for left drawer
     """
-    return Div(
+    resizer = Div(
+      cls="mf-layout-resizer mf-layout-resizer-right",
+      data_command_id=self.commands.update_drawer_width("left").id,
+      data_side="left"
+    )
+    
+    # Wrap content in scrollable container
+    content_wrapper = Div(
       *self.left_drawer.get_content(),
+      cls="mf-layout-drawer-content"
+    )
+    
+    return Div(
+      content_wrapper,
+      resizer,
       id=f"{self._id}_ld",
       cls=f"mf-layout-drawer mf-layout-left-drawer {'collapsed' if not self._state.left_drawer_open else ''}",
+      style=f"width: {self._state.left_drawer_width if self._state.left_drawer_open else 0}px;"
     )
   
   def _mk_right_drawer(self):
@@ -164,18 +222,37 @@ class Layout(SingleInstance):
     Render the right drawer if enabled.
 
     Returns:
-        Div or None: FastHTML Div component for right drawer, or None if disabled
+        Div: FastHTML Div component for right drawer
     """
-    return Div(
+    resizer = Div(
+      cls="mf-layout-resizer mf-layout-resizer-left",
+      data_command_id=self.commands.update_drawer_width("right").id,
+      data_side="right"
+    )
+    
+    # Wrap content in scrollable container
+    content_wrapper = Div(
       *self.right_drawer.get_content(),
+      cls="mf-layout-drawer-content"
+    )
+    
+    return Div(
+      resizer,
+      content_wrapper,
       cls=f"mf-layout-drawer mf-layout-right-drawer {'collapsed' if not self._state.right_drawer_open else ''}",
       id=f"{self._id}_rd",
+      style=f"width: {self._state.right_drawer_width if self._state.right_drawer_open else 0}px;"
     )
   
   def _mk_left_drawer_icon(self):
     return mk.icon(right_drawer_icon if self._state.left_drawer_open else left_drawer_icon,
                    id=f"{self._id}_ldi",
-                   command=self.commands.toggle_left_drawer())
+                   command=self.commands.toggle_drawer("left"))
+  
+  def _mk_right_drawer_icon(self):
+    return mk.icon(right_drawer_icon if self._state.left_drawer_open else left_drawer_icon,
+                   id=f"{self._id}_rdi",
+                   command=self.commands.toggle_drawer("right"))
   
   def render(self):
     """
@@ -192,6 +269,7 @@ class Layout(SingleInstance):
       self._mk_main(),
       self._mk_right_drawer(),
       self._mk_footer(),
+      Script(f"initLayoutResizer('{self._id}');"),
       id=self._id,
       cls="mf-layout",
     )
@@ -203,4 +281,4 @@ class Layout(SingleInstance):
     Returns:
         Div: The rendered layout
     """
-    return self.render()
+    return self.render()