[FEATURE] Add Stretchable Sidebar to Playground

[GUNGODD]

Why do we need this improvement?

We need this improvement to enhance the user experience and usability of the Playground section in our project. Currently, users have the option to hide the entire sidebar, but they cannot resize or stretch the sidebar to view the full code content. This limitation can be frustrating for users, especially when they need to view longer sections of code without excessive scrolling.

By adding a stretchable sidebar feature, users would have the flexibility to expand the width of the sidebar horizontally, allowing them to view the entire code content comfortably. This enhancement would improve the overall usability of the Playground section and make it more intuitive and user-friendly.

this improvement is necessary to provide a smoother and more efficient experience for users interacting with the Playground section, ultimately enhancing their ability to navigate and interact with the code effectively.

How will this change help?

This change will help improve the usability and functionality of the Playground section in our project in several ways:

1. Enhanced Viewing Experience: The addition of a stretchable sidebar will allow users to expand the width of the sidebar horizontally, enabling them to view the entire code content without having to scroll excessively. This will enhance the overall viewing experience and make it easier for users to navigate and understand the code.

2. Increased Efficiency: With the ability to stretch the sidebar, users can quickly access and review longer sections of code without the need for repetitive scrolling. This will save time and effort for users, increasing their efficiency when interacting with the Playground section.

3. Improved Accessibility: The stretchable sidebar feature will make the code content more accessible to users with varying screen sizes and resolutions. Users will be able to adjust the width of the sidebar according to their preferences and viewing devices, ensuring optimal readability and usability for all users.

4. Better Code Analysis: By providing users with a clear and unobstructed view of the entire code content, the stretchable sidebar will facilitate better code analysis and comprehension. Users will be able to focus on understanding the code logic and structure without distractions or limitations imposed by the interface.

this change will significantly enhance the usability, efficiency, and accessibility of the Playground section, ultimately improving the overall user experience and satisfaction with our project.

Screenshots

How could it be implemented/designed?

1. User Interface Design:

   • Add a draggable handle or separator between the sidebar and the main content area.
   • When users hover over the handle, display a cursor indicating that the handle is draggable.
   • Implement visual feedback, such as a change in cursor appearance or highlighting, to indicate the dragging action.

2. Resize Functionality:

   • Allow users to click and drag the handle horizontally to resize the width of the sidebar.
   • Implement logic to dynamically adjust the width of the sidebar and the content area as the handle is dragged.

3. Constraints and Limits:

   • Set minimum and maximum widths for the sidebar to prevent it from becoming too narrow or too wide, ensuring a usable and aesthetically pleasing layout.
   • Consider responsive design principles to accommodate different screen sizes and resolutions.

4. Persistence:

   • Save the user's preferred sidebar width in local storage or as part of their user settings, so that it persists across sessions.
   • Ensure that the selected sidebar width is maintained when navigating between pages or refreshing the browser.

5. Accessibility Considerations:

   • Ensure that the stretchable sidebar feature is accessible to users with disabilities by providing keyboard navigation options and ensuring compatibility with screen readers.
   • Implement appropriate aria roles and attributes to convey the purpose and state of the stretchable sidebar to assistive technologies.

6. Testing and Iteration:

   • Conduct usability testing with a diverse group of users to gather feedback on the implementation and design of the stretchable sidebar feature.
   • Iterate on the design based on user feedback and make necessary adjustments to improve usability and user satisfaction.

the stretchable sidebar feature can be implemented and designed to provide users with a flexible and intuitive way to resize the sidebar according to their preferences, enhancing the overall user experience of the Playground section in our project.

🚧 Breaking changes

Yes

👀 Have you checked for similar open issues?

• I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to work on this issue?

No, someone else can work on it.

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[jonaslagoni]

cc @devilkiller-ag

[devilkiller-ag]

Hi @GUNGODD, thanks for your suggestion! I think it would be better if we make the interface between the input and output editor stretchable instead of the option and navigation sidebar as:

1. Decreasing the sidebar's width will make it hard to fit dropdowns and checkboxes in the same row.
2. Increasing the sidebar width won't help solve our issue of less editor width.

However, we need to keep in mind that the editor is only for trying and playing with modelina.

@jonaslagoni what's your view on this?

[GUNGODD]

I completely understand your point about the limitations of adjusting the sidebar width and the importance of maintaining a functional editor space.

After considering your input, making the interface between the input and output editor stretchable could offer a more versatile solution. By allowing users to adjust this area, we can provide flexibility without compromising the usability of dropdowns and checkboxes in the sidebar.

It's crucial to maintain a balance between editor space and sidebar functionality, especially considering that our editor primarily serves as a tool for experimenting with Modelina.

I'll proceed with exploring the implementation of a stretchable interface between the input and output editor. If you have any other suggestions or considerations, please feel free to share them with me.

[devilkiller-ag]

@GUNGODD We can use an existing implementation of Split Pane from AsyncAPI Studio. But as far as I remember it is adopted from another open-source repository by Jeremy Grieshop and uses many outdated dependencies.

There is another option (better from my pov), we can use a Resizable Component from ShadCN UI. ShadCN UI components are highly customizable and open-source. Instead of adding as a dependency, ShadCN components can be used by just copy-paste or installing (which does the same thing).

cc: @jonaslagoni

[jonaslagoni]

Sounds like you folks are on this ✌️ Go crazy 🔥

[AKACHI-4]

Hey @GUNGODD, how's it going? Can I join and offer some help or submit a PR with a fix?

[devilkiller-ag]

Hi @AKACHI-4, You can work on this issue ✨

[AKACHI-4]

Thanks @devilkiller-ag would raise PR ASAP.

[GUNGODD]

@AKACHI-4, sorry I have been offline due to midterms. I would like to work on this too. Please make sure to share your work progress with me.

[AKACHI-4]

Hey @GUNGODD, I raised a PR, kindly check, that will surely help you out.

[GUNGODD]

gotcha ..

[ibishal]

Hey @devilkiller-ag we need to add arroe icon right (wrt #1908 )

[devilkiller-ag]

Hey @devilkiller-ag we need to add arroe icon right (wrt #1908 )

Hi @ibishal, No, we need to add a stretchable bar between the input and output editor. For this you can use the ShadCN Resizable Component as I explained in my previous comment. You will need to put the input and output editor inside this compnent.

I will suggest you to go through all previous comments and the PR #1908 to understand this issue more clearly.

[ibishal]

Hey @devilkiller-ag we need to add arroe icon right (wrt #1908 )

I was talking about this comment

[devilkiller-ag]

I was talking about this comment

With respect to that comment yes, it should look like the image I shared in that comment.

[ibishal]

working on this @devilkiller-ag

[devilkiller-ag]

Any updates on this @ibishal?

[devilkiller-ag]

I am assigning this issue to another contributor since we have no update from @ibishal and @AKACHI-4.

@jerensl Would you like to work on this issue?

[jerensl]

@jerensl Would you like to work on this issue?

Sure, I will start to work on this next week

[devilkiller-ag]

@jerensl Would you like to work on this issue?

Sure, I will start to work on this next week

Okay great!

[asyncapi-bot]

🎉 This issue has been resolved in version 3.8.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀