Fix: mobileview: cant switch tab between code and preview tab

[lakshay-jainn]

Fixes #3228

Problem:

Currently, the p5.js web editor on mobile devices disables switching between the "Code" and "Preview" tabs while a project is running. This significantly hinders the mobile development experience, making it difficult to debug, iterate, and learn, as users cannot simultaneously view their code and its output. While this functionality exists on desktop, its absence on mobile creates an inconsistent and less effective user experience. This issue is particularly impactful for users who primarily or exclusively use mobile devices for development.

Solution:
I have introduced a toggle button on the mobile view of the p5.js web editor.
Allowing users to switch between the "Code" and "Preview" views even while a sketch is running.
And i have also made sure that the "Code" tab switches to "Output" tab when running the Code (As it was previously).

Implementation of Solution:

1. A new React component, ShowOutputButton, is created. This button manages the toggling logic and displays either "Show Code" or "Show Output" depending on the current view.

2. The showOutput state variable, managed using useState, tracks the active view (either code or preview).

3. A useEffect hook synchronizes the showOutput state with the ide.isPlaying state. When the sketch starts (ide.isPlaying is true), the view defaults to "Output" (showOutput is true). When the sketch stops (ide.isPlaying is false), the view defaults to "Code" (showOutput is false). This ensures a sensible default view when starting and stopping sketches.

4. The ShowOutputButton component is integrated into the UI.

5. The PreviewWrapper and EditorSidebarWrapper components are conditionally rendered based on the showOutput state. This ensures that only the selected view (Code or Preview) is displayed at a time.

Here is a video of the working of the button:
https://github.com/user-attachments/assets/f8262fea-6a84-4f09-94fe-bb2dc68637f8

I have verified that this pull request:

• [ ✓ ] has no linting errors (npm run lint)
• [ ✓ ] has no test errors (npm run test)
• [ ✓ ] is from a uniquely-named feature branch and is up to date with the develop branch.
• [ ✓ ] is descriptively named and links to an issue number, i.e. Fixes #123