chore: add resizable property in playground

[AKACHI-4]

Description

• used react-resizable-panels to implement resizing into the editor and output components

File Changed

• Content.tsx

Related issue(s)
Fixes #1846

Additionals

[github-actions]

Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide 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.

[netlify]

✅ Deploy Preview for modelina ready!

Name	Link
🔨 Latest commit	92dd00d
🔍 Latest deploy log	https://app.netlify.com/sites/modelina/deploys/660300c3b56a210008d6f37a
😎 Deploy Preview	https://deploy-preview-1908--modelina.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[coveralls]

Pull Request Test Coverage Report for Build 8440033043

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 92.303%

---

Totals
Change from base Build 8323576283:	0.0%
Covered Lines:	5994
Relevant Lines:	6325

---

💛 - Coveralls

[devilkiller-ag]

Hi @AKACHI-4, There are few things we need to fix:

• Can you please add a bar between the editors indicating that it can be resizeable? Something similar to this:
  

• Collapsing the left (input) editor should not collapse the general options.

• Right editor along with output navigator is not being collapsed fully. Kindly fix this.

[jonaslagoni]

@devilkiller-ag do you have time to take a look?

[devilkiller-ag]

@devilkiller-ag do you have time to take a look?

Hi @jonaslagoni, I think I gave my review earlier on this 🤔

[devilkiller-ag]

Gave my review here: #1908 (comment)

[AKACHI-4]

Hey @devilkiller-ag, Surely look but first I have some thoughts

• Can you please add a bar between the editors indicating that it can be resizable?

yea, sure. should it be more stylish as you suggested ?

• Collapsing the left (input) editor should not collapse the general options.

yeah, got that. It should apply the same for the right panel as well.

• Right editor along with output navigator is not being collapsed fully. Kindly fix this.

actually, I intentionally did that because when I completely collapse the right panel, there's no way I'll be able to use the resizable bar again since it will be hidden inside the overflow-y.

Possible fixes :

• use low-opacity scrollbar for that.
• use w-5 for the bar, but that might look too wide.

some observation : I checked vs-code, and its a fix there too. This means that in the 2-panel view, if we collapse right one, there's no way to get it back.

[AKACHI-4]

kindly suggest some more improvement i can perform on pr.

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[devilkiller-ag]

should it be more stylish as you suggested ?
Yeah. I think it would be nice if we also add a button with an arrow icon at the center of the bar which can:

• Reset the view.
• The arrow icon should be towards right, when the output editor is taking the majority of view.
• The arrow icon should be towards left, when the input editor is taking the majority of view.

It should apply the same for the right panel as well.

No, Because the output navigator is the part of output itself. There is no sense to change output files if you can't view them in the extreme case (when the output view is not visible).

[devilkiller-ag]

Any update on this @AKACHI-4?

[AKACHI-4]

Hey @devilkiller-ag I will PR next week due to exam this week. tho

[devilkiller-ag]

Hi @AKACHI-4, did you had a chance to look up on this work?

[AKACHI-4]

Yeah @devilkiller-ag I did changes locally, but sort of incomplete what left is the arrow sign which changes direction on majority width.

Will do a raw commit by this evening.

[devilkiller-ag]

Hi @AKACHI-4 any updates on this? Feel free to ask if you are facing any issues.

[devilkiller-ag]

Hi @jonaslagoni, I am closing this PR since we have no updates from @AKACHI-4. I will share this issue with the community. If no one grabs it, then if time allows I will work on it.