Added recursion to Properties.py

src/app.py

@@ -2,6 +2,7 @@ import logging.config
 
 import yaml
 from fasthtml import serve
+from fasthtml.components import Div
 
 from myfasthtml.controls.CommandsDebugger import CommandsDebugger
 from myfasthtml.controls.DataGridsManager import DataGridsManager
@@ -122,8 +123,15 @@ def index(session):
   layout.left_drawer.add(btn_file_upload, "Test")
   layout.left_drawer.add(btn_popup, "Test")
   layout.left_drawer.add(tree_view, "TreeView")
-  layout.left_drawer.add(DataGridsManager(layout, _id="-datagrids"), "Documents")
+  
+  # data grids
+  dgs_manager = DataGridsManager(layout, _id="-datagrids")
+  layout.left_drawer.add_group("Documents", Div("Documents", dgs_manager.mk_main_icons(), cls="mf-layout-group flex gap-3"))
+  layout.left_drawer.add(dgs_manager, "Documents")
   layout.set_main(tabs_manager)
+  
+  
+  # keyboard shortcuts
   keyboard = Keyboard(layout, _id="-keyboard").add("ctrl+o",
                                                    add_tab("File Open", FileUpload(layout, _id="-file_upload")))
   keyboard.add("ctrl+n", add_tab("File Open", FileUpload(layout, _id="-file_upload")))

src/myfasthtml/assets/myfasthtml.css

@@ -697,23 +697,30 @@
 /* ************* Properties Component ************ */
 /* *********************************************** */
 
-/* Properties container */
+/*!* Properties container *!*/
 .mf-properties {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }
 
-/* Group card - using DaisyUI card styling */
+/*!* Group card - using DaisyUI card styling *!*/
 .mf-properties-group-card {
     background-color: var(--color-base-100);
     border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
     border-radius: var(--radius-md);
-    overflow: hidden;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    overflow: auto;
 }
 
-/* Group header - gradient using DaisyUI primary color */
+.mf-properties-group-container {
+    display: inline-block; /* important */
+    min-width: max-content; /* important */
+    width: 100%;
+}
+
+
+/*!* Group header - gradient using DaisyUI primary color *!*/
 .mf-properties-group-header {
     background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in oklab, var(--color-primary) 80%, black) 100%);
     color: var(--color-primary-content);
@@ -722,20 +729,24 @@
     font-size: var(--properties-font-size);
 }
 
-/* Group content area */
+/*!* Group content area *!*/
 .mf-properties-group-content {
     display: flex;
     flex-direction: column;
+    min-width: max-content;
 }
 
-/* Property row */
+/*!* Property row *!*/
 .mf-properties-row {
-    display: flex;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: 6rem 1fr;
+
     align-items: center;
     padding: calc(var(--properties-font-size) * 0.4) calc(var(--properties-font-size) * 0.75);
+
     border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 5%, transparent);
     transition: background-color 0.15s ease;
+
     gap: calc(var(--properties-font-size) * 0.75);
 }
 
@@ -747,20 +758,24 @@
     background-color: color-mix(in oklab, var(--color-base-content) 3%, transparent);
 }
 
-/* Property key - normal font */
+/*!* Property key - normal font *!*/
 .mf-properties-key {
+    align-items: start;
     font-weight: 600;
     color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
     flex: 0 0 40%;
     font-size: var(--properties-font-size);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
-/* Property value - monospace font */
+/*!* Property value - monospace font *!*/
 .mf-properties-value {
     font-family: var(--default-mono-font-family);
     color: var(--color-base-content);
     flex: 1;
-    text-align: right;
+    text-align: left;
     font-size: var(--properties-font-size);
     overflow: hidden;
     text-overflow: ellipsis;

src/myfasthtml/controls/DataGridsManager.py

@@ -43,13 +43,15 @@ class DataGridsManager(MultipleInstance):
     content = df.to_html(index=False)
     self._tabs_manager.switch(tab_id, content)
   
-  def render(self):
+  def mk_main_icons(self):
     return Div(
-      Div(
       mk.icon(folder_open20_regular, tooltip="Upload from source", command=self.commands.upload_from_source()),
       mk.icon(table_add20_regular, tooltip="New grid"),
       cls="flex"
-      ),
+    )
+  
+  def render(self):
+    return Div(
       self.tree,
       id=self._id,
     )

src/myfasthtml/controls/Properties.py

@@ -16,21 +16,38 @@ class Properties(MultipleInstance):
     self.groups = groups
     self.properties_by_group = self._create_properties_by_group()
   
+  def _mk_group_content(self, properties: dict):
+    return Div(
+      *[
+          Div(
+            Div(k, cls="mf-properties-key", data_tooltip=f"{k}"),
+            self._mk_property_value(v),
+            cls="mf-properties-row"
+          )
+          for k, v in properties.items()
+      ],
+      cls="mf-properties-group-content"
+    )
+  
+  def _mk_property_value(self, value):
+    if isinstance(value, dict):
+      return self._mk_group_content(value)
+    
+    if isinstance(value, (list, tuple)):
+      return self._mk_group_content({i: item for i, item in enumerate(value)})
+    
+    return Div(str(value),
+               cls="mf-properties-value",
+               title=str(value))
+  
   def render(self):
     return Div(
       *[
+          Div(
             Div(
               Div(group_name if group_name is not None else "", cls="mf-properties-group-header"),
-            Div(
-              *[
-                  Div(
-                    Div(k, cls="mf-properties-key"),
-                    Div(str(v), cls="mf-properties-value", title=str(v)),
-                    cls="mf-properties-row"
-                  )
-                  for k, v in proxy.as_dict().items()
-              ],
-              cls="mf-properties-group-content"
+              self._mk_group_content(proxy.as_dict()),
+              cls="mf-properties-group-container"
             ),
             cls="mf-properties-group-card"
           )