### 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>
### What this PR does
Before this PR:
- Provider/model icons were scattered image imports (PNG/WebP) with no
unified API
- Avatar primitive was based on HeroUI with hardcoded `shadow-lg` and
`border-[0.5px]`
- Full-bleed and padded avatar variants used different rendering
approaches
- Multiple files duplicated IIFE patterns for rendering CompoundIcon vs
string logos
- No type-safe icon catalogs
After this PR:
- **Compound Icon API**: Each icon exposes `.Color`, `.Mono`, and
`.Avatar` sub-components via a unified `CompoundIcon` interface
- **Auto-generated catalogs**: `PROVIDER_ICON_CATALOG` and
`MODEL_ICON_CATALOG` with `resolveProviderIcon` / `resolveModelIcon`
helpers
- **SVG pipeline**: Codegen processes SVGs → generates Color/Mono/Avatar
components
- **Avatar migrated to shadcn/radix**: Replaced HeroUI Avatar with
`Avatar` + `AvatarFallback` pattern, removed hardcoded shadow/border
- **EmojiAvatar moved**: From `primitives/Avatar/` to
`composites/EmojiAvatar/`
- **LogoAvatar component**: Reusable component replacing repeated IIFE
patterns across 5+ files
- **getMCPProviderLogo helper**: Centralized MCP provider icon mapping
- 80+ monochrome icon components, stroke attribute support, deprecated
logos cleanup
<img width="714" height="820" alt="image"
src="https://github.com/user-attachments/assets/a3f14348-5781-494a-8c3b-1f40391e2ec0"
/>
<img width="1008" height="593" alt="image"
src="https://github.com/user-attachments/assets/8ba7fa42-fa33-4e49-ba76-647ba1438e0c"
/>
### Why we need it and why it was done in this way
The v2 refactoring requires moving away from HeroUI toward shadcn/radix
primitives, and needs a scalable, type-safe icon system to replace
scattered image imports. The compound icon pattern (`Icon.Color`,
`Icon.Mono`, `Icon.Avatar`) provides a consistent API while enabling
tree-shaking. The Avatar primitive now uses radix-based `Avatar` +
`AvatarFallback`, aligning with the project's shadcn migration.
The following tradeoffs were made:
- Each icon is a separate TSX file for tree-shaking and lazy loading
support
- Avatar components use `AvatarFallback` to render icons — no image
loading overhead
The following alternatives were considered:
- Runtime SVG color manipulation — rejected for better performance and
consistency
- Keeping HeroUI Avatar — rejected as it conflicts with v2 shadcn
migration goals
### Breaking changes
- Avatar primitive API changed: `HeroUI Avatar` → shadcn `Avatar` +
`AvatarFallback` + `AvatarImage`
- `EmojiAvatar` moved from `primitives/Avatar` to
`composites/EmojiAvatar`
- `shadow-lg` and `border-[0.5px]` removed from generated avatars — now
opt-in via `className`
### Special notes for your reviewer
- ~214 files changed, but the bulk are auto-generated avatar/icon
components under `packages/ui/src/components/icons/`
- Key files to review:
- `packages/ui/src/components/primitives/avatar.tsx` — new shadcn Avatar
primitive
- `packages/ui/scripts/codegen.ts` — avatar generation using
AvatarFallback
- `src/renderer/src/components/Icons/LogoAvatar.tsx` — reusable logo
renderer
- Renderer files using the new Avatar API (Sidebar, UserPopup,
ModelAvatar, etc.)
### 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)
- [ ] Upgrade: Impact of this change on upgrade flows was considered and
addressed if required
- [ ] Documentation: N/A - internal component changes
### Release note
```release-note
NONE
```
🤖 Generated with [Claude Code](https://claude.com/claude-code)
---------
Signed-off-by: suyao <sy20010504@gmail.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: icarus <eurfelux@gmail.com>
- Introduced multiple new SVG icons including AddCategory, AiChat, Aicon27, AiEssentialsIconSet, AiPrompt, Brain, BrainCircuit, BrainCog, CodeAi, Emoji, Group, MessageAi1, MessageBalloonAi1, and Vector.
- Updated the icons index file to include the new icons for easier access.
- Enhanced the icons component structure for better maintainability.
- Deleted the DmxapiToImg SVG file and its corresponding React component to streamline the icon library.
- Updated index.ts and Logos.stories.tsx to remove references to DmxapiToImg, ensuring consistency across the codebase.
- Deleted the DmxapiLogo SVG file from the icons directory.
- Updated the icon export list to reflect the removal of DmxapiLogo, reducing the total icon count from 81 to 80.
- Adjusted related stories to exclude DmxapiLogo from the showcased icons.
- Removed the ICON_IMPLEMENTATION_GUIDE.md file and several unused SVG icons from the `icons/` directory.
- Added new SVG icons to enhance the icon library, including various brand logos.
- Updated package.json to reflect the new version of the `tsx` dependency.
- Introduced a script for generating icons and improved the structure of the icons module for better organization and accessibility.
- Updated the stories for icons to showcase the new additions and ensure proper documentation.
- Created ICON_IMPLEMENTATION_GUIDE.md to document icon usage and common issues.
- Added multiple new SVG icons to the `icons/` directory, enhancing the icon library.
- Updated tailwind.css for improved styling consistency across components.
