Improve the page hierarchy display

In the absence of a design, here are a couple of screenshots of competing UI's that could serve as inspiration for how this might look

Very much in favor of this! It makes not only seeing the site hierarchy much easier and quicker, but you can also drag and drop the components in the view in a much more user-friendly manner. It doesn't work that way in Figma though unless you have auto-layout turned on.

Here's WordPress' implementation:

@lauriii I think you meant to surface this at https://contribkanban.com/board/experience_builder? 😅 Adding parent issue to make it so!

#3460586: Provide an "Address formatter" text format that supports Twig without Wysiwyg is in.

#3446722: Introduce an example set of representative SDC components; transition from "component list" to "component tree" is almost done.

Should I close https://git.drupalcode.org/project/experience_builder/-/merge_requests/80 + https://git.drupalcode.org/project/experience_builder/-/merge_requests/91 now that @hooroomoo started https://git.drupalcode.org/project/experience_builder/-/merge_requests/176?

Yeah I think you can close them. Both of them were also made before the new layers menu.

Fixed the hover/select issue where hovering over a parent or child did not apply styling to the individual item. Next will look at fixing the Sortable functionality

Implementation done, will try my hand at adding drag and drop tests next using cypress-real-events library....

#28: 🥳

(Reflecting that in the issue metadata 👍)

See MR description

Manually tested.

The screenshot in #27 is still accurate 👍

Detailed observations, none of which need to be addressed here, only in follow-ups:

1. the slot names are machine names, not human-readable names
2. clicking on a slot name doesn't do anything — I'd expect the entire slot to be outlined?
3. the slot names are bold: why do we want to make them visually stand out compared to components? Especially due to the above point, I'd expect them to have less visual prominence.
4. clicking the slot name doesn't do the same as clicking the disclosure triangle

@balintbrews is awake long before the US, so asking him to review this first 😊

Adding #27 to issue summary and simplifying.

#33, #34 Yup improvements in follow-ups is good.

Just pushed low hanging fruit minor styling change so it looks less chunky and added a @todo in the tests to replace the cy.waits linking to #3470490: Unnecessary wait() use in e2e tests can cause failures and misleading fail output

Updated the gif in the IS to the updated one

That means #3470594: Refine dragging behavior and design in Layers menu is now unblocked 👍

(And I'm hopeful that #3470625-5: Dragging sections in the Layers sidebar throws error can now be tested & closed.)

Wow! This is great 😍 Works so well!