Adding splitter between designer and properties

src/components/workflows/components/WorkflowDesigner.py

@@ -108,11 +108,17 @@ class WorkflowDesigner(BaseComponent):
     
     return self.refresh()
   
+  def set_designer_height(self, height):
+    self._state.designer_height = height
+    self._db.save_state(self._key, self._state)
+    return self.__ft__() # refresh the whole component
+  
   def __ft__(self):
     return Div(
       H1(f"{self._designer_settings.workflow_name}", cls="text-xl font-bold"),
       P("Drag components from the toolbox to the canvas to create your workflow.", cls="text-sm mb-6"),
       self._mk_designer(),
+      Div(cls="wkf-splitter", id=f"s_{self._id}"),
       self._mk_properties(),
       Script(f"bindWorkflowDesigner('{self._id}');"),
       **apply_boundaries(self._boundaries),
@@ -205,14 +211,12 @@ class WorkflowDesigner(BaseComponent):
       
       # Render components
       *[self._mk_workflow_component(comp) for comp in self._state.components.values()],
-      
-      cls="wkf-canvas bg-base-100 rounded-lg border relative",
     ),
   
   def _mk_canvas(self, oob=False):
     return Div(
       self._mk_elements(),
-      cls="flex-1",
+      cls="wkf-canvas flex-1 rounded-lg border flex-1",
       id=f"c_{self._id}",
       hx_swap_oob='true' if oob else None,
     ),
@@ -222,9 +226,9 @@ class WorkflowDesigner(BaseComponent):
       Div(
         *[self._mk_toolbox_item(comp_type, info)
           for comp_type, info in COMPONENT_TYPES.items()],
-        cls="space-y-1"
+        # cls="space-y-1"
       ),
-      cls="w-32 p-2 bg-base-100 rounded-lg border"
+      cls="wkf-toolbox"
     )
   
   def _mk_designer(self):
@@ -232,9 +236,9 @@ class WorkflowDesigner(BaseComponent):
       self._mk_toolbox(),  # (Left side)
       self._mk_canvas(),  # (Right side)
       
-      cls="flex gap-4",
+      cls="wkf-designer flex gap-4",
       id=f"d_{self._id}",
-      style=f"max-height:{self._state.designer_height}px;"
+      style=f"height:{self._state.designer_height}px;"
     )
   
   def _mk_properties(self):
@@ -248,10 +252,11 @@ class WorkflowDesigner(BaseComponent):
         ),
       ),
       
-      cls="p-2 bg-base-100 rounded-lg border mt-4",
-      style=f"max-height:{self._get_properties_height()}px;",
+      cls="p-2 bg-base-100 rounded-lg border",
+      style=f"height:{self._get_properties_height()}px;",
       id=f"p_{self._id}",
     )
   
   def _get_properties_height(self):
-    return self._boundaries["height"] - self._state.designer_height
+    print(f"height: {self._boundaries['height']}")
+    return self._boundaries["height"] - self._state.designer_height - 86