Help with LazyList and tree structure (childs)

[Protoxy22]

Hi, I finally started to work on simple world editor.
I have currently made a modular content-pack system based on .json files, it's like a resource pack that can load different type objects such as Props with according models in a asset folder location.

I also use an Entity Component System called Fleks that helps a lot.

But, i'm struggling on making a UI hierarchy system that would list all "Groups" and their hierarchy on the scene
Something like this (Mundus):

Currently I have this, which list all the Groups on the scene:

But I struggle with LazyList and find a way to use itemsIndexed(items) to make a tree structure based on the child groups

Does someone have an idea ?
Thanks

Code:

LazyList(
            containerModifier = { it.background(null) },
            vScrollbarModifier = { it.colors(color = colors.onBackgroundAlpha(0.2f), hoverColor = colors.onBackgroundAlpha(0.4f)) }
        ) {
            var hoveredIndex by remember(-1)
            this.surface
            itemsIndexed(items) { i, item ->
                Text(item.text) {
                    modifier
                        .width(Grow.Std)
                        .height(UiSizes.baseSize * 0.75f)
                        .padding(horizontal = sizes.gap * 1.25f)
                        .textAlignY(AlignmentY.Center)
                        .onEnter { hoveredIndex = i }
                        .onExit { hoveredIndex = -1 }
                        .onClick {
                            if (!item.isTitle) {
                                item.clickFunc(it)
                                //menu.isExpanded = false
                            }
                        }

                    if (item.isTitle) {
                        categoryTitleStyle(item)
                    } else {
                        subEntryStyle(item, hoveredIndex == i)
                    }
                }
            }
        }
            class Item(val id: Int, val text: String, val color: Color, val isTitle: Boolean, val group: ObjectGroup?, val clickFunc: (PointerEvent) -> Unit){}        

class ObjectGroup(val nameGroup: String) : Group(nameGroup) {

    val childsOG: MutableList<ObjectGroup> = mutableListOf()
    var parentOG: ObjectGroup? = null

    var entity: Entity? = null

    fun addChildGroup(child: ObjectGroup) {
        childsOG.add(child)
        this.addNode(child)
        child.parentOG = this
    }
    
    fun generateGroupList(item: ObjectGroup): MutableList<ObjectGroup> {
        val itemList: MutableList<ObjectGroup> = mutableListOf(item)
        for (child in item.childsOG) {
            itemList.addAll(generateGroupList(child))
        }
        return itemList
    }

    fun setEntity(entity: Entity){
        this.entity = entity
    }
}

[fabmax]

To make a tree, you can build a flat list of the currently visible (i.e. expanded) tree items. Whenever you collapse or expand a tree node you simply rebuild this list. The individual items in this list should have a field treeDepth which you can then use to set the margin / indent of the tree item in the lazy list.

There is a (relatively complex) Jetpack Compose example which implements a file tree this way. The file tree code is here. This is obviously Jetpack compose and not kool UI but the concept should work the same.