Feat(sandboxSpace): Improve Playground Layout and Introduce Toggleable Sandbox Component

[ketsebaoteth]

Summary

This pull request improves the playground and adds a sandbox component for faster animation testing.

Changes

1. Playground Layout:

• Changed layout from flex-col to flex for horizontal arrangement.
• The animation link items in the playground were previously flex-columned, and the list was getting long with the addition of more items.
• Now the playground occupies the full page width.
  - Reasoning: To reduce the vertical length of the animation list and enable a more compact, horizontal layout using full-width.

2. Sandbox Component:

• Added a toggleable Sandbox component within components/sandbox/content.vue.
• It's a div where you can quickly put animation code and preview it.
  - Enabled by a toggle button
• ** Reasoning: ** Provides a single, clean file for easy testing of animations, making it easier to quickly see how changes affect animation behaviours in a contained space.

3. Styling:

• Added button styles to tailwind.css.
• Moved gradient style to tailwind.css.
  • ** Reasoning: ** To improve organization and consistency of styles across the project.

Benefits

• Reduces vertical scrolling of the playground and makes better use of horizontal screen space.
• Provides a straightforward place to experiment with animation code. NO NEED TO REFRESH PAGE TO REPLAY!
• Maintains consistent styling by grouping styling components together.

Impact

These changes are non-breaking and aim to improve the development experience.

Testing

These changes were tested and are responsive to different screen sizes.

Next Steps

Future enhancements to the sandbox may include an easy way to add controllers for animation properties (e.g., sliders), with the goal of simplifying the process by something like sandbox.registerProp(myScale) to create interactive sliders directly.

screeshots

Note: I am new to open source contributions. Feedback and advice on best practices are welcome!

[codereviewbot-ai]

Enabling devtools in a production environment can pose security risks by potentially exposing sensitive information. It's recommended to conditionally enable devtools based on the environment. For example:

devtools: { enabled: process.env.NODE_ENV === 'development' }

This ensures that devtools are only enabled in development environments.

[ketsebaoteth]

it appears that the tests were already failing on the main branch before my changes. I'd appreciate it if you could verify this so I can ensure my changes are also passing.