feat: add toggle button to show/hide Monaco editor (#206)

[Pranav-0440]

Summary

This PR implements a toggle button to show/hide the Monaco JSON editor as requested in #206.

Changes

• Added a toggle button in the header (next to Settings)
• Conditionally render the Monaco editor and resize bar
• Automatically expand TDViewer to full width when editor is hidden
• Removed the previous floating toggle button
• Kept layout responsive and consistent with existing design

Behavior

• Clicking "Hide Code" hides the Monaco editor and expands the left view
• Clicking "Show Code" restores the editor and split layout
• No impact on undo/redo, validation, or existing functionality

Screenshots

Editor Visible :

Editor Hidden :

Testing

• Verified layout responsiveness
• Verified no console errors
• Verified undo/redo still works
• Verified build succeeds (npm run build)

[netlify]

✅ Deploy Preview for editdor ready!

Name	Link
🔨 Latest commit	4e74c9a
🔍 Latest deploy log	https://app.netlify.com/projects/editdor/deploys/69a1df3e91c5f60008795d89
😎 Deploy Preview	https://deploy-preview-209--editdor.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 project configuration.

[Copilot]

Pull request overview

This PR adds a toggle button in the application header to show/hide the Monaco JSON editor, replacing the previous floating button implementation.

Changes:

• Added a toggle button with Eye/EyeOff icons in the header next to Settings
• Modified the layout to conditionally render the Monaco editor and resize bar based on visibility state
• Changed the default editor visibility from hidden to visible

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
src/components/App/AppHeader.tsx	Added Eye/EyeOff icons import, updated component props to accept toggle handler and visibility state, added toggle button in header
src/App.tsx	Changed default editor visibility to true, removed floating toggle button and related imports, updated layout to conditionally render editor and resize bar, passed toggle props to AppHeader

[Pranav-0440]

Hi @TejInaco,
I’ve opened a PR for this issue. Please let me know if any changes are needed.
Thank you!

[egekorkan]

@TejInaco the changes look and work good. Let me know what you think

[TejInaco]

Tested the changes: After you clicked on hide, and click again, and the Json Editor appears, the functionality of move the vertical bar, the one that splits the two views, disappears, it remains fixed and the user is no long able to move it in order to increase or decrease the views. @Pranav-0440 see if you can understand why.

[Pranav-0440]

Hi @TejInaco,

Thank you for testing and pointing this out.
You were right the resize functionality was breaking because the Bar and Section components were being conditionally unmounted when hiding the editor, which caused the @column-resizer/react container to lose its internal state.

I’ve updated the implementation to keep the resizer structure mounted and only toggle its visibility and width instead. The vertical resize functionality now works correctly after hiding and showing the editor.
Please let me know if everything looks good now.