Add section collapse functionality

[jannikbecher]

WIP #1686

screen_recording_livebook_collapse_section.webm

Is this heading in the right direction?
Not sure about the "Expand all" and "Collapse all" buttons..

[github-actions]

Uffizzi Preview deployment-18734 was deleted.

[josevalim]

@jannikbecher this looks like a great starting point. We can tackle the collapse and expand all in another pull request. Two things:

1. UI wise, the starting of each section needs to be aligned with the title. So we want to have the collapse button "outside". Something like this:

2. We can add a note with how many cells were hidden

@jonatanklosko do you think this should be fully handled client side? I guess we can add a class when collapsing and then remove it. We change the content accordingly based on the presence of said class?

[jannikbecher]

@josevalim sorry I'm complete beginner in UI and tailwind...
should I handle the edge case of "1 cell hidden"?

does this look ok?

[jonatanklosko]

@jonatanklosko do you think this should be fully handled client side?

Yeah, one option would be adding a class to section and some conditional rules (as we do in js_interop.css). Should also be doable with JS commands and I don't have a strong preference, but probably less brittle with conditional CSS than updating individual elements.

[jannikbecher]

Ahh I see. I completely misused LiveView functionality here. I will come up with a solution the next days using js_interop.css as @jonatanklosko described :)

[jannikbecher]

Unfortunately I'm really struggling with the alignment. Is it even possible to align it probably when the expand/collapse buttons are defined in section_component.ex?
I removed the collapse/expand all functionality for now. Any preference on how the buttons should look like?

[jannikbecher]

I made some progress regarding the alignment :)

[jonatanklosko]

@jannikbecher awesome! I moved the button closer to the title and made it hidden unless collapsed or hovered :)

collapse_section.mov

[jannikbecher]

This looks so much nicer! Thanks for the patience. I learned so much the last couple of days and it was such a joy :)

[josevalim]

Two minor suggestions for @jonatanklosko to consider and ship it!

Thanks @jannikbecher ❤️