jd 92ebb8b1c6 refactor(code): redesign Code Tools page with tool grid and drawer UI (#14315) ...

### What this PR does

Before this PR:

- Code Tools page rendered all CLI tools in a single static form,
without icon branding, search, or empty-state handling.
- There was no reusable empty-state / side-panel / icon-select primitive
in `@cherrystudio/ui`.

After this PR:

- Code Tools page is redesigned as a searchable tool grid (`ToolGrid`)
that opens a per-tool configuration drawer (`CodeToolDrawer`); each CLI
shows its own icon via `CliIconBadge`.
- Adds new `@cherrystudio/ui` composites: `EmptyState`, `PageSidePanel`,
`SelectDropdown`.
- Adds brand SVG icons for Claude Code, Qwen Code, Gemini CLI, OpenAI
Codex, iFlow CLI, GitHub Copilot CLI, Kimi CLI, OpenCode.
- Adds i18n strings for search, empty states, field hints, and the
"Official" tag across all locales.

Fixes #

### Why we need it and why it was done in this way

The following tradeoffs were made:

- A grid + drawer layout scales better as more CLI tools are added and
gives each tool a clear identity, at the cost of one extra click to
reach configuration.
- Shared primitives (`EmptyState`, `PageSidePanel`, `SelectDropdown`)
were lifted into `@cherrystudio/ui` so other v2 pages can reuse them,
rather than living locally inside the Code Tools page.

The following alternatives were considered:

- Keeping the single-form layout and only adding icons — rejected
because it does not solve discoverability or empty-state UX.
- Placing the new composites under the Code Tools page only — rejected
to avoid duplication in upcoming v2 pages.

Links to places where the discussion took place:

N/A

### Breaking changes

None.

### Special notes for your reviewer

- This PR only touches the v2 Code Tools page and adds new
`@cherrystudio/ui` composites; no existing components are modified
behaviorally.
- Translated locale files are mechanical additions of the new keys;
please spot-check `en-us.json` / `zh-cn.json` for wording.

### Checklist

- [x] PR: The PR description is expressive enough and will help future
contributors
- [x] Code: Write code that humans can understand and Keep it simple
- [x] Refactor: You have left the code cleaner than you found it (Boy
Scout Rule)
- [x] Upgrade: Impact of this change on upgrade flows was considered and
addressed if required
- [x] Documentation: A user-guide update was considered and is present
(link) or not required.
- [x] Self-review: I have reviewed my own code before requesting review
from others

### Release note

```release-note
Redesign the Code Tools page with a searchable tool grid and per-tool configuration drawer, with brand icons for each supported CLI.
```

---------

Signed-off-by: jdzhang <625013594@qq.com>
Signed-off-by: zhangjiadi225 <625013594@qq.com>
Co-authored-by: SuYao <sy20010504@gmail.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: MyPrototypeWhat <daoquqiexing@gmail.com>

2026-04-21 11:39:15 +08:00

428 B

Raw Permalink Blame History