enhancement: Navigator for the whole structure of UI

[PritamBag]

Is your feature request related to a problem? Please describe.

The current page builder lacks a comprehensive view of the UI structure, which makes it difficult to visualize, navigate, and manage complex page layouts. Developers and designers need a better way to see and interact with the hierarchy of components in a user-friendly manner.

Describe the solution you'd like

A UI Navigator that provides a hierarchical view of all components in the page builder. The navigator should display the component tree, allow users to select components, and enable reordering, and editing components directly from the navigator. Any changes should sync with the page builder in real-time, ensuring seamless navigation and interaction.

Describe alternatives you've considered

• Using a basic list view to show components would lack the hierarchical structure and not provide a visual, tree-like representation of the UI.
• Manually managing the structure via code, but this approach is prone to errors and less intuitive for users.

Additional context

The navigator is an essential tool for managing complex UIs, especially when working with nested components and multiple layers of layout. A tree view would make it easier to visualize the structure and make adjustments quickly. Below are the key requirements:

• Display a tree view of the component hierarchy.
• Enable drag-and-drop functionality for reordering components.
• Ensure real-time sync between the navigator and the main page builder UI.