Align Mesh Gradient, Background Snippets & Color Lab editors with SVG-style sidebar

[naymurdev]

Motivation

• Unify editor UX so Mesh Gradient, Background Snippets and Color Lab match the SVG Line Draw tool pattern with a left sidebar that exposes Presets / Settings / Saved controls for faster workflow and parity across tools.

Description

• Added a compact icon-based sidebar and activeSidebarTab state to the Mesh Gradient editor and conditionally render Presets / Settings / Saved panels to mirror the SVG Line Draw layout (file: components/view/mesh-gradient/index.tsx).
• Converted the Background Snippets editor sidebar into a two-column left panel with icon buttons to switch between Presets / Settings / Saved and conditionally show the pattern/gradient/mask controls or the preset gallery (file: components/view/background-snippets/index.tsx).
• Added a small sidebar switch area to the Color Lab page to toggle between Settings, Presets and Saved/history views and wired existing components into those conditional views (file: components/view/colors/index.tsx).
• Imported the required UI pieces (Button, Lucide icons) and kept existing generation/preview/export logic unchanged while only altering layout and conditional rendering.

Testing

• Ran npm run -s lint which reported many repo-wide Biome/formatting diagnostics and did not complete cleanly, so lint did not pass (failures are pre-existing and unrelated to the focused sidebar changes).

---

Codex Task

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: df89820f-062d-4d24-acd7-91fc0bb8130b

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/fix-mesh-gradient-and-color-lab-page-design

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: b96c789ef7

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Close the settings conditional before the next panel

In the Background Snippets editor, this new {activeSidebarTab === "settings" && <div ...> expression is never closed with a } before the following GradientControls <div> sibling, so the TSX is syntactically invalid and this page will fail to compile/render as soon as the file is parsed.

Useful? React with 👍 / 👎.