updated Panel implementation

src/myfasthtml/assets/myfasthtml.css

@@ -439,7 +439,7 @@
     flex: 1;
     overflow: auto;
     background-color: var(--color-base-100);
-    padding: 1rem;
+    padding: 0.5rem;
     border-top: 1px solid var(--color-border-primary);
 }
 
@@ -673,6 +673,7 @@
     height: 100%;
     overflow: auto;
     transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
+    padding-top: 25px;
 }
 
 /* Left panel specific */
@@ -683,6 +684,7 @@
 /* Right panel specific */
 .mf-panel-right {
     border-left: 1px solid var(--color-border-primary);
+    padding-left: 0.5rem;
 }
 
 .mf-panel-main {
@@ -700,6 +702,7 @@
     max-width: 0;
     overflow: hidden;
     border: none;
+    padding: 0;
 }
 
 /* No transition during manual resize - common for both panels */
@@ -712,10 +715,10 @@
 .mf-panel-hide-icon,
 .mf-panel-show-icon {
     position: absolute;
-    top: 0.5rem;
+    top: 0;
+    right: 0;
     cursor: pointer;
     z-index: 10;
-    padding: 0.25rem;
     border-radius: 0.25rem;
 }
 
@@ -724,11 +727,6 @@
     background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.05));
 }
 
-/* Hide icon always on the right */
-.mf-panel-hide-icon {
-    right: 0.5rem;
-}
-
 /* Show icon positioning */
 .mf-panel-show-icon-left {
     left: 0.5rem;

src/myfasthtml/controls/InstancesDebugger.py

@@ -13,7 +13,7 @@ class InstancesDebugger(SingleInstance):
     self._command = Command("ShowInstance",
                             "Display selected Instance",
                             self,
-                            self.on_network_event).htmx(target=f"#{self._panel.get_id()}_r")
+                            self.on_network_event).htmx(target=f"#{self._panel.get_ids().right}")
   
   def render(self):
     nodes, edges = self._get_nodes_and_edges()

src/myfasthtml/controls/Panel.py

@@ -13,6 +13,31 @@ from myfasthtml.icons.fluent_p1 import more_horizontal20_regular
 from myfasthtml.icons.fluent_p2 import subtract20_regular
 
 
+class PanelIds:
+  def __init__(self, owner):
+    self._owner = owner
+  
+  @property
+  def main(self):
+    return f"{self._owner.get_id()}_m"
+  
+  @property
+  def right(self):
+    """ Right panel's content"""
+    return f"{self._owner.get_id()}_cr"
+  
+  @property
+  def left(self):
+    """ Left panel's content"""
+    return f"{self._owner.get_id()}_cl"
+  
+  def panel(self, side: Literal["left", "right"]):
+    return f"{self._owner.get_id()}_pl" if side == "left" else f"{self._owner.get_id()}_pr"
+  
+  def content(self, side: Literal["left", "right"]):
+    return self.left if side == "left" else self.right
+
+
 @dataclass
 class PanelConf:
   left: bool = True
@@ -35,7 +60,7 @@ class Commands(BaseCommands):
                    f"Toggle {side} side panel",
                    self._owner,
                    self._owner.toggle_side,
-                   args=[side, visible]).htmx(target=f"#{self._id}_panel_{side}")
+                   args=[side, visible]).htmx(target=f"#{self._owner.get_ids().panel(side)}")
   
   def update_side_width(self, side: Literal["left", "right"]):
     """
@@ -51,7 +76,7 @@ class Commands(BaseCommands):
                    f"Update {side} side panel width",
                    self._owner,
                    self._owner.update_side_width,
-                   args=[side]).htmx(target=f"#{self._id}_panel_{side}")
+                   args=[side]).htmx(target=f"#{self._owner.get_ids().panel(side)}")
 
 
 class Panel(MultipleInstance):
@@ -72,6 +97,10 @@ class Panel(MultipleInstance):
     self._main = None
     self._right = None
     self._left = None
+    self._ids = PanelIds(self)
+  
+  def get_ids(self):
+    return self._ids
   
   def update_side_width(self, side, width):
     if side == "left":
@@ -95,11 +124,11 @@ class Panel(MultipleInstance):
   
   def set_right(self, right):
     self._right = right
-    return Div(self._right, id=f"{self._id}_r")
+    return Div(self._right, id=self._ids.right)
   
   def set_left(self, left):
     self._left = left
-    return Div(self._left, id=f"{self._id}_l")
+    return Div(self._left, id=self._ids.left)
   
   def _mk_panel(self, side: Literal["left", "right"]):
     enabled = self.conf.left if side == "left" else self.conf.right
@@ -125,24 +154,34 @@ class Panel(MultipleInstance):
     panel_cls = f"mf-panel-{side}"
     if not visible:
       panel_cls += " mf-hidden"
-
+    
     # Left panel: content then resizer (resizer on the right)
     # Right panel: resizer then content (resizer on the left)
     if side == "left":
       return Div(
-        Div(hide_icon, content, id=f"{self._id}_content_{side}"),
+        hide_icon,
+        Div(content, id=self._ids.content(side)),
         resizer,
         cls=panel_cls,
-        id=f"{self._id}_panel_{side}"
+        id=self._ids.panel(side)
       )
     else:
       return Div(
         resizer,
-        Div(hide_icon, content, id=f"{self._id}_content_{side}"),
+        hide_icon,
+        Div(content, id=self._ids.content(side)),
         cls=panel_cls,
-        id=f"{self._id}_panel_{side}"
+        id=self._ids.panel(side)
       )
   
+  def _mk_main(self):
+    return Div(
+      self._mk_show_icon("left"),
+      Div(self._main, id=self._ids.main, cls="mf-panel-main"),
+      self._mk_show_icon("right"),
+      cls="mf-panel-main"
+    ),
+  
   def _mk_show_icon(self, side: Literal["left", "right"]):
     """
     Create show icon for a panel side if it's hidden.
@@ -170,12 +209,7 @@ class Panel(MultipleInstance):
   def render(self):
     return Div(
       self._mk_panel("left"),
-      Div(
-        self._mk_show_icon("left"),
-        self._main,
-        self._mk_show_icon("right"),
-        cls="mf-panel-main"
-      ),
+      self._mk_main(),
       self._mk_panel("right"),
       Script(f"initResizer('{self._id}');"),
       cls="mf-panel",