### What this PR does
Before this PR:
- The settings page sidebar used local inline className strings, not
shared across the 10+ settings sub-pages.
- `ProviderList` rendered its header with bespoke
`ProviderListHeaderBar` + `ProviderListHeaderTitle` components instead
of a shared `PageHeader`.
- The 10+ settings sub-pages each owned their own header layout.
- The standalone settings window was hard-coded to 220px sidebar width
with no "sized to the main window" rule.
- `t('settings.mcp.title')` referenced a key path that didn't match the
actual entry in i18n locales.
After this PR:
- Settings submenu styling consolidated into four shared tokens in
`src/renderer/src/pages/settings/index.tsx`
(`settingsSubmenuListClassName`, `settingsSubmenuItemClassName`,
`settingsSubmenuItemLabelClassName`,
`settingsSubmenuSectionTitleClassName`).
- `ProviderList` header now composes the shared `PageHeader` + search
field with trailing add button; `ProviderListHeaderBar` and
`ProviderListHeaderTitle` deleted.
- All settings sub-pages migrated to the same `PageHeader + Scrollbar +
MenuList` shape (Channels, Common, Data, FileProcessing, Integration,
MCP, ProviderList, Shortcut, Tasks, WebSearch).
- Standalone settings window is now sized to 80% of the main window with
a hard 760×560 floor, centered on the main window
(`SettingsWindowService`); `--settings-width` for the standalone shell
tightened from 220px to 200px.
- Corrected `t('settings.mcp.title')` →
`t('agent.settings.toolsMcp.mcp.tab')`.
Fixes # N/A
### Why we need it and why it was done in this way
The following tradeoffs were made:
- This PR includes shared UI component additions / updates because the
settings redesign needs a reusable `PageHeader`, a `labelClassName` prop
on `MenuItem`, and a refined compact-menu `Popover` template. Keeping
them together with the settings consumers makes the design change easier
to review end to end.
- The shared component changes are intentionally visual / API-additive
(one new component, one new prop, one tightened default border width,
one new compact-menu sizing template) and do not change behavior
contracts for non-settings callers.
- `MenuItem` default visuals (`text-sm`, `py-1.5`, `font-normal`) match
what `DESIGN.md` already documents; the previous defaults
(`text-[13px]`, `py-1.25`, `font-medium`) had been out of sync with the
spec. This PR brings the implementation back in line with the spec
rather than introducing new defaults.
The following alternatives were considered:
- Keeping the settings styling inside each sub-page was rejected because
the same token strings already appeared at multiple call sites;
extracting them to `settings/index.tsx` removes the duplication.
- Splitting the shared UI updates (`PageHeader`,
`MenuItem.labelClassName`, `Popover` hairline / compact width) into a
separate PR is possible, but keeping them together makes the settings
design change easier to review end to end.
- Extracting a `SidebarHeader / SidebarSection / SidebarSectionTitle /
SidebarMenuItem` family into `@cherrystudio/ui` was deferred because
only ~1.5 pages share the exact "grouped icon-prefixed nav" pattern
today (Settings, partly FilesPage). The `DESIGN.md` Sidebar section is
softened from a "hard rule" to a "target rule" so the spec no longer
contradicts the shipping implementation.
Links to places where the discussion took place: N/A
### Breaking changes
None.
`MenuItem` default visuals change slightly (`font-medium` →
`font-normal`, `py-1.25` → `py-1.5`, `text-[13px]` → `text-sm`). The
previous defaults had been out of sync with what `DESIGN.md` already
documents; this PR brings them back in line with the spec, so call sites
that didn't opt out of the default now render closer to the documented
design.
### Special notes for your reviewer
- Target branch is `v2`.
- New shared UI in `@cherrystudio/ui`:
- `PageHeader` is newly added
(`packages/ui/src/components/composites/PageHeader/`) with its own
stories and tests.
- `MenuItem` gains a `labelClassName` prop so callers can style the
label span directly (e.g. `group-data-[active=true]:font-medium` for
bold-on-active). This removes a previous `[font-weight:inherit]`
CSS-inheritance hack; the existing test was rewritten to validate the
new contract.
- `Popover` default border tightened from 1px to 0.5px hairline,
matching the `DESIGN.md` Popover surface rule.
- Compact menu popovers now use `w-fit min-w-32` instead of a hard-coded
`w-40` so width follows content with a 128px floor (aligned with
`ContextMenu`'s existing `min-w-[8rem]`).
- `DESIGN.md` updates: new "Settings Panel Layout" subsection under
Layout Principles; new "Search field with trailing action" entry under
Inputs; Window Chrome gets a "Settings window sizing" rule; Popover and
compact-menu rules updated; Sidebar section softened to a "target rule".
- `ProcessorAvatar` (`FileProcessingSettings/components/`) switched its
`size` prop from `'sm' | 'lg'` to `size: number` plus an optional
`className`. This is a co-located change driven by the settings menu's
need for a 22px avatar (neither old enum value supported it). The old
`'lg'` (36px) had no remaining callers.
- i18n locales: added `settings.mcp.allServers` and
`settings.mcp.shortTitle`; removed unused
`settings.integrations.groups.notes`. All three master locales (en-us,
zh-cn, zh-tw) and nine translate locales are in sync.
- Targeted verification was run before commit:
- `pnpm build:check` (oxlint + eslint + typecheck + i18n check + format
check + full vitest — 9439 tests across 666 files, all passing).
- Follow-ups (intentionally out of scope):
- Extract `SidebarHeader / SidebarSection / SidebarSectionTitle /
SidebarMenuItem` once a third page (Library or Knowledge) adopts the
same pattern.
- `SettingsWindowService` already gracefully degrades when the main
window is missing; an explicit test for that case can be added.
### Checklist
This checklist is not enforcing, but it's a reminder of items that could
be relevant to every PR.
Approvers are expected to review this list.
- [x] PR: The PR description is expressive enough and will help future
contributors
- [x] Code: [Write code that humans can
understand](https://en.wikiquote.org/wiki/Martin_Fowler#code-for-humans)
and [Keep it simple](https://en.wikipedia.org/wiki/KISS_principle)
- [x] Refactor: You have [left the code cleaner than you found it (Boy
Scout
Rule)](https://learning.oreilly.com/library/view/97-things-every/9780596809515/ch08.html)
- [x] Upgrade: Impact of this change on upgrade flows was considered and
addressed if required
- [x] Documentation: A [user-guide update](https://docs.cherry-ai.com)
was considered and is present (link) or not required. Check this only
when the PR introduces or changes a user-facing feature or behavior.
- [x] Self-review: I have reviewed my own code (e.g., via
[`/gh-pr-review`](/.claude/skills/gh-pr-review/SKILL.md), `gh pr diff`,
or GitHub UI) before requesting review from others
### Release note
```release-note
Refreshes the settings page navigation, unifies the ProviderList header with the shared PageHeader, and refines compact popover menus.
```
---------
Signed-off-by: akazaakari950718-dev <akazaakari950718@gmail.com>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: SuYao <sy20010504@gmail.com>
### What this PR does
**Before this PR:**
- Right-click menus across the renderer were built with antd's
`Dropdown` (`trigger={['contextMenu']}`) plus an ad-hoc bespoke menu
(`src/renderer/src/components/layout/TabContextMenu.tsx`) for the
AppShell tab bar. There was no shared design-system primitive; styling,
sub-menu support, and `asChild` ergonomics were inconsistent.
- The selection-aware copy/quote wrapper lived at
`src/renderer/src/components/ContextMenu/index.tsx` under a generic name
that suggested it was the canonical context menu (it wasn't — it was
specifically for text selection).
**After this PR:**
- New Radix-based `ContextMenu` primitive lives at
`packages/ui/src/components/primitives/context-menu.tsx`, with the
supporting `ContextMenuItemContent` helper, a new `--cs-menu-item-hover`
design token, and a primitive-level unit test
(`packages/ui/src/components/primitives/__tests__/context-menu.test.tsx`).
- 16 renderer call sites migrated to the new primitive (chat tabs,
topics, agent sessions, attachments, notes, mini-apps, image viewer, SVG
renderer, inputbar tools, citations, messages, skills settings,
assistant items, agent items, assistant preset cards, YAML front
matter).
- `TabContextMenu.tsx` deleted; the old selection wrapper renamed to
`SelectionContextMenu.tsx` and its behavior tightened (see Breaking
changes).
- Async `onSelect` handlers now wrap their work in `try/catch + logger +
toast` so user-visible operations like LLM auto-rename,
save-to-knowledge, and export to Notion/Yuque/etc no longer fail
silently.
Fixes #
### Why we need it and why it was done in this way
`@cherrystudio/ui` is now the v2 design-system home; every other
primitive (Tooltip, Combobox, Toast, TreeSelect, …) has moved here.
Right-click menus were the largest remaining surface still bound to
antd's `Dropdown`. Picking Radix as the backend is consistent with the
rest of the primitive library; building our own `ContextMenuItemContent`
helper keeps the call-site noise low for the common `icon + label +
shortcut/submenu chevron` shape.
The following tradeoffs were made:
- The click-triggered "more actions" Dropdowns in `AssistantItem` /
`AgentItem` / `AssistantPresetCard` / `YamlFrontMatterNodeView` still
use `antd Dropdown` for now — `@cherrystudio/ui` ships `ContextMenu` and
`SelectDropdown` but no click-driven `DropdownMenu` yet. Tracked as
#14994. Acceptable as a follow-up because the migration boundary is at
the right-click surface for this PR.
- `KnowledgePage` / `KnowledgeUrls` / `SkillsSettings` were
intentionally left untouched per @kangfenmao to avoid conflicting with
the knowledge-base PR (#14734). They'll be migrated once that lands.
- For the menu focus-state contrast I originally bumped
`--cs-background-subtle`, but the token leaks into ~44 unrelated
consumers. Reverted and replaced with a dedicated `--cs-menu-item-hover`
token.
The following alternatives were considered:
- Pinning down a click-driven antd shim around the new `ContextMenu` to
handle both triggers in a single tree — rejected; it would have meant
inverting the migration goal (less antd, not more).
- Putting all menu hover styling under one bumped subtle background —
rejected after review; the dedicated `--cs-menu-item-hover` token keeps
the change surgical.
Links to places where the discussion took place:
https://github.com/CherryHQ/cherry-studio/pull/12060#pullrequestreview-4260670092
### Breaking changes
Renamed `ContextMenu` (the selection-aware copy/quote wrapper) to
`SelectionContextMenu`. User-visible behavior change: right-clicking
inside chat messages, citations, and agent session messages now always
shows the menu with disabled items when no text is selected (was: menu
suppressed entirely). Once a selection exists the actions behave
identically to v1. Logged in
`v2-refactor-temp/docs/breaking-changes/2026-05-11-message-right-click-menu-discoverable-when-no-selection.md`.
### Special notes for your reviewer
- The reviewer correctly flagged a regression class where the f2d8db5f7
fix landed mid-PR (drag handler/style getting clobbered when `{...rest}`
was spread after them). The new primitive-level test guards that pattern
at the boundary (asChild forwarding of `onClick` / `onPointerDown` +
`onSelect` semantics).
- macOS transparent-window `z-50` behavior on the tab right-click menu —
I tested locally via the dev build; Radix portals to body and the menu
rides above the title-bar drag region. Worth a focused manual
verification on review.
- Knowledge-base files (`KnowledgePage.tsx`, `KnowledgeUrls.tsx`,
`SkillsSettings.tsx`) were reset to `origin/v2` baseline per @kangfenmao
— see commit `68cbb648d`.
### Checklist
- [x] PR: The PR description is expressive enough and will help future
contributors
- [x] Code: [Write code that humans can
understand](https://en.wikiquote.org/wiki/Martin_Fowler#code-for-humans)
and [Keep it simple](https://en.wikipedia.org/wiki/KISS_principle)
- [x] Refactor: You have [left the code cleaner than you found it (Boy
Scout
Rule)](https://learning.oreilly.com/library/view/97-things-every/9780596809515/ch08.html)
- [x] Upgrade: Impact of this change on upgrade flows was considered and
addressed if required
- [x] Documentation: A [user-guide update](https://docs.cherry-ai.com)
was considered and is present (link) or not required. Check this only
when the PR introduces or changes a user-facing feature or behavior.
- [x] Self-review: I have reviewed my own code before requesting review
from others
### Release note
```release-note
NONE
```
---------
Signed-off-by: suyao <sy20010504@gmail.com>
Co-authored-by: MyPrototypeWhat <daoquqiexing@gmail.com>
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
<!-- Template from
https://github.com/kubevirt/kubevirt/blob/main/.github/PULL_REQUEST_TEMPLATE.md?-->
### What this PR does
This PR adds the new v2 **Resource Library** page at `/app/library` as a
unified management entry point for **Assistants, Agents, and Skills**.
The page provides a shared navigation and interaction shell, but
resource data is loaded per active resource tab. Assistants, Agents, and
Skills each keep their own adapter/query path and backend ownership
boundary; there is no aggregated cross-resource list endpoint in this
PR.
**Scope by resource**
- **Assistant** — when the Assistant tab is active, the library uses the
Assistant DataApi list/create/duplicate/update/delete paths. Assistant
reads include embedded `tags` and `modelName`, and Assistant list
supports `search` and `tagIds` filtering.
- **Agent** — when the Agent tab is active, the library uses the Agent
DataApi list/create/update/delete paths and the Agent editor for
configuration. Agent list supports the resource-library search/tag
filter shape through the Agent DataApi.
- **Skill** — when the Skill tab is active, the library uses Skill
list/detail/import/uninstall flows. Filesystem-affecting operations stay
on the existing skill IPC service, while tag binding and list filtering
use the v2 tag/skill API paths.
Before this PR:
- Assistant, Agent, and Skill management lived in separate product
surfaces.
- There was no shared v2 Resource Library entry point for browsing these
resource types through one navigation model.
- Resource search and tag filtering were not exposed through a
tab-scoped Resource Library UI.
- Assistant list reads did not embed tag metadata or model display names
for the library cards.
After this PR:
- `/app/library` provides a shared Resource Library shell with
resource-specific tabs.
- Switching tabs changes which resource adapter/query path is active; no
cross-resource aggregate query is introduced.
- Assistant, Agent, and Skill lists can be searched and filtered by tags
within their active tab.
- Assistant reads embed `tags[]` and `modelName`, and Assistant
create/update accepts optional `tagIds` for tag binding.
- Agent configuration can be created and edited from the library editor
flow.
- Skill detail, import/install, uninstall, file preview, and tag binding
are available from the library page.
- The library keeps the current v2 `useDataApi.refetch` contract as a
revalidation/cache helper; this PR does not turn `refetch` into an
imperative data-read API.
<!-- (optional, in `fixes #<issue number>(, fixes #<issue_number>, ...)`
format, will close the issue(s) when PR gets merged)*: -->
Fixes #
### Why we need it and why it was done in this way
The v2 Resource Library is intended to replace fragmented
resource-management entry points with one consistent place to browse and
manage Assistants, Agents, and Skills while keeping each resource type's
data ownership intact.
The implementation keeps the Resource Library as a shared UI surface
while keeping reads and writes resource-scoped. Switching tabs changes
which resource adapter/query path is active, so each resource type keeps
its own backend contract instead of introducing a new aggregated query
layer.
The following tradeoffs were made:
- **Shared shell, resource-scoped data**: the UI frame is shared, but
Assistant, Agent, and Skill keep separate adapters and backend paths.
- **No aggregate Resource Library endpoint**: the page does not
introduce a cross-resource list API. This avoids a new orchestration
layer and keeps pagination/filtering behavior owned by each resource
service.
- **Tag filtering uses OR semantics**: matching any selected tag is
enough for inclusion. AND semantics can be added later as a separate
query shape if needed.
- **Filesystem work stays outside DataApi**: Skill install/uninstall
still use the skill IPC service because those operations touch local
directories, archives, repositories, and symlinks.
- **`refetch` remains a revalidation trigger**: direct cache control or
imperative reads should continue to use SWR/DataApi `mutate` or explicit
requests rather than relying on `refetch` return values.
The following alternatives were considered:
- A single aggregated `/library/resources` style endpoint — rejected
because it would duplicate resource-specific filtering logic and blur
service ownership.
- Client-only filtering across all resource types — rejected because
search/tag filtering should use the resource service's current query
contract where available.
- Moving Skill install/uninstall into DataApi — rejected because
filesystem mutation is outside the SQLite-backed DataApi boundary.
Links to places where the discussion took place: N/A
### Breaking changes
None.
The API/schema changes are additive:
- Assistant responses include embedded `tags` and `modelName`.
- Assistant create/update accepts optional `tagIds`.
- Resource list paths support tab-scoped search/tag filtering where
applicable.
Existing callers that do not use the new fields or query params should
continue to work.
### Special notes for your reviewer
Base branch is `v2`. This PR is still a draft while review feedback is
being addressed.
Suggested review entry points:
- Renderer library shell:
`src/renderer/src/pages/library/LibraryPage.tsx`
- Resource list/grid: `src/renderer/src/pages/library/list/`
- Assistant adapter/editor:
`src/renderer/src/pages/library/adapters/assistantAdapter.ts`,
`src/renderer/src/pages/library/editor/assistant/`
- Agent adapter/editor:
`src/renderer/src/pages/library/adapters/agentAdapter.ts`,
`src/renderer/src/pages/library/editor/agent/`
- Skill adapter/detail/import:
`src/renderer/src/pages/library/adapters/skillAdapter.ts`,
`src/renderer/src/pages/library/detail/skill/`,
`src/renderer/src/pages/library/list/ImportSkillDialog.tsx`
- Backend services: `AssistantService`, `AgentService`, `TagService`,
and skill service integration paths.
Known follow-ups:
1. Continue UI polish on Resource Library spacing and detail/editor
interactions.
2. Continue component-level i18n cleanup for any remaining literals
found during review.
3. Keep model-picker related v2 LLM migration work separate from this PR
unless required by this library flow.
### Checklist
This checklist is not enforcing, but it's a reminder of items that could
be relevant to every PR.
Approvers are expected to review this list.
- [x] PR: The PR description is expressive enough and will help future
contributors
- [x] Code: [Write code that humans can
understand](https://en.wikiquote.org/wiki/Martin_Fowler#code-for-humans)
and [Keep it simple](https://en.wikipedia.org/wiki/KISS_principle)
- [x] Refactor: You have [left the code cleaner than you found it (Boy
Scout
Rule)](https://learning.oreilly.com/library/view/97-things-every/9780596809515/ch08.html)
- [x] Upgrade: Impact of this change on upgrade flows was considered and
addressed if required
- [x] Documentation: A [user-guide update](https://docs.cherry-ai.com)
was considered and is present (link) or not required. Check this only
when the PR introduces or changes a user-facing feature or behavior.
- [x] Self-review: I have reviewed my own code (e.g., via
[`/gh-pr-review`](/.claude/skills/gh-pr-review/SKILL.md), `gh pr diff`,
or GitHub UI) before requesting review from others
### Release note
<!-- Write your release note:
1. Enter your extended release note in the below block. If the PR
requires additional action from users switching to the new release,
include the string "action required".
2. If no release note is required, just write "NONE".
3. Only include user-facing changes (new features, bug fixes visible to
users, UI changes, behavior changes). For CI, maintenance, internal
refactoring, build tooling, or other non-user-facing work, write "NONE".
-->
```release-note
Add a new v2 Resource Library page under /app/library for managing Assistants, Agents, and Skills through resource-specific tabs, with search, tag filtering, editors/details, assistant import/export, and skill import/uninstall flows.
```
---------
Signed-off-by: jdzhang <625013594@qq.com>
Signed-off-by: suyao <sy20010504@gmail.com>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: suyao <sy20010504@gmail.com>
Co-authored-by: fullex <106392080+0xfullex@users.noreply.github.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>
refactor(settings): add Divider component to @cherrystudio/ui and use it for SettingDivider
- Add Divider component with horizontal/vertical orientation support
- Add Divider.stories.tsx for Storybook documentation
- Migrate SettingDivider to use the new Tailwind-based Divider component
Co-authored-by: MyPrototypeWhat <daoquqiexing@gmail.com>
Cleans up the UI library by removing exports and Storybook stories for composite components that are deprecated, infrequently used, or no longer needed. This reduces maintenance overhead and helps ensure the component library only exposes relevant, reusable elements.
* feat: support accordion
* feat: support circle progress
* feat: support field
* fix: cn usage
---------
Co-authored-by: MyPrototypeWhat <daoquqiexing@gmail.com>
- Introduced a new Badge component with multiple visual style variants: default, secondary, destructive, and outline.
- Added comprehensive Storybook stories to demonstrate the Badge component's usage, including examples with icons and as links.
- Updated the component index to export the new Badge component.
- 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.
* feat(textarea): add Textarea component with variants and Storybook examples
* feat(textarea): enhance Textarea component with context, improved variants, and Storybook examples
* Fine-tuning the style
* fix ci
* feat(textarea): refactor Textarea stories to use custom label and caption components
* feat(textarea): add TextareaContext for managing textarea state
* fix: format
* feat(textarea): refactor TextareaInput to simplify props and remove autoSize handling
* feat(textarea): remove TextareaContext and update stories to reflect new error handling
* refactor(textarea): remove TextareaRoot component
After removing TextareaContext, TextareaRoot became a simple wrapper div
with no functionality beyond applying layout styles. This change:
- Removes TextareaRoot component and its exports
- Updates all Storybook stories to use plain divs with the same styling
- Simplifies the component API while maintaining the same functionality
Addresses reviewer feedback: https://github.com/CherryHQ/cherry-studio/pull/11260#discussion_r2580009134🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
* chore: format
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: MyPrototypeWhat <daoquqiexing@gmail.com>
- Introduced a new ConfirmDialog component for confirmation scenarios, integrating Dialog and Button primitives.
- Added props for customizable titles, descriptions, and button texts, including support for loading states and destructive actions.
- Created Storybook stories demonstrating various use cases, including default, destructive, and custom content scenarios.
- Updated DialogContent styling to use a rounded border and improved shadow effects for better visual appeal.
- Introduced a new Storybook file for the Dialog component, featuring multiple stories that demonstrate various use cases, including default, alert, form, and customizable dialogs.
- Enhanced accessibility and usability by providing examples for different dialog configurations and actions.
- Replace local imports of Input and Switch components with imports from the @cherrystudio/ui package for consistency.
- Minor adjustment to the Switch story to include a button type for the toggle state functionality.
* feat(input): add new input component and update eslint config
Add new custom input component to replace antd and heroui inputs
Update eslint config to enforce using the new input component
* feat(input): refactor input component to support compound pattern
Add new Input component with support for Password and Button variants through compound pattern. Move input implementation to new directory structure and enhance with label and caption support. Remove old input implementation.
* refactor(input): consolidate input components and update exports
Move input component files to lowercase directory and simplify structure
Remove unused button and password input components
Update exports in components index file
* refactor: replace antd Input with @cherrystudio/ui Input across components
* feat(primitives): add textarea component to ui primitives
* feat(primitives): add input-group component with variants and controls
build: update @radix-ui/react-slot dependency to v1.2.4
* refactor(ui): simplify input component and update usage
Remove complex Input component implementation and replace with simpler version
Update components to use new Input and Textarea components from ui package
* feat(ui): add composite input component and utility functions
- Introduce new CompositeInput component with variants and password toggle
- Add utility functions for null/undefined conversion
- Export new components and types from index
- Update input props interface and usage in input-group
* feat(Input): refactor CompositeInput component and add stories
- Refactor CompositeInput component with improved variants and styling
- Add comprehensive Storybook stories for Input, InputGroup and CompositeInput components
- Implement password toggle functionality and button variants
- Include accessibility features and interactive examples
* feat(input): improve disabled state styling and behavior
- Add disabled state variants for input components
- Ensure password toggle button respects disabled state
- Update disabled styling for better visual consistency
- Add storybook examples for disabled password inputs
* feat(input): add validation states and form examples
- Implement validation states for input components
- Add real-time validation examples
- Create form validation demos for different input types
- Update styling for disabled and invalid states
* feat(input): add prefix support for email variant input
Add prefix variants styling and prefix prop to CompositeInput component to support email inputs with fixed prefixes. Update stories to demonstrate various prefix use cases and interactive examples.
* refactor(Input): simplify content rendering logic by removing useMemo hooks
The startContent and endContent memoized values were removed and their logic was inlined directly in the JSX. This makes the code more straightforward and removes unnecessary memoization overhead since the calculations are simple.
* feat(Input): add select variant to CompositeInput component
Add new 'select' variant to CompositeInput component with support for select dropdown groups and items. Includes styling variants, type exports, and comprehensive storybook examples demonstrating various use cases like currency input, URL with protocol, phone with country code, and temperature with unit selectors.
* Revert "refactor: replace antd Input with @cherrystudio/ui Input across components"
This reverts commit f7f689b326.
* fix(CompositeInput): handle missing props gracefully by returning null
Add null checks for email and select variants to prevent rendering issues when required props are missing
* fix(Input): adjust select prefix and trigger styling
Update select prefix variants to remove redundant padding and simplify size variants. Add new selectTriggerVariants for consistent styling across sizes.
* feat(storybook): add playground story for InputGroup component
Add interactive playground story with controls for all InputGroup props including addons, button variants and input types
* style(primitives): remove redundant border radius from input group variants
* style(input): adjust button and label variant styling
Refactor variant classes to use string literals instead of arrays for better readability
* refactor(Input): simplify variant class strings in input component
---------
Co-authored-by: MyPrototypeWhat <daoquqiexing@gmail.com>
Co-authored-by: fullex <106392080+0xfullex@users.noreply.github.com>
* refactor(ui): migrate switch component from heroui to radix-ui
replace heroui switch implementation with radix-ui for better maintainability
update package.json and yarn.lock to include new dependency
* fix(eslint): enable heroui import restriction for deprecated Switch component
* refactor(ui): update Switch component props from isSelected/onValueChange to checked/onCheckedChange
Standardize Switch component props across the codebase to use checked/onCheckedChange instead of isSelected/onValueChange for better consistency with common React patterns. Also updates loading state prop from isLoading to loading and removes size prop where unnecessary.
The changes include:
- Replacing isSelected with checked
- Replacing onValueChange with onCheckedChange
- Updating isLoading to loading
- Removing redundant size props
- Adjusting styling to accommodate new loading state
* refactor(switch): improve switch component styling and structure
- Add default values for loading and disabled props
- Update styling classes and add group cursor pointer
- Restructure loading indicator and thumb positioning
- Wrap DescriptionSwitch children in flex container
* refactor(ui): improve switch component structure and usage
- Restructure DescriptionSwitch to use explicit props instead of children
- Add label, description, and position props for better customization
- Update all switch usages in SettingsTab to use new props format
* refactor(primitives): simplify switch props by omitting children
Remove redundant children prop from CustomSwitchProps since it's already omitted from the parent type
* fix(switch): add useId for label accessibility in DescriptionSwitch
Ensure proper label association with switch input by generating unique ID using React's useId hook
* refactor(settings): remove commented out SettingRowTitleSmall components
* refactor(SettingsTab): add todo comment for memoization optimization
* feat(switch): add size prop to customize switch dimensions
Add sm, md, and lg size options to the Switch component with corresponding styles. This allows for better visual consistency across different UI contexts.
* style(ui): adjust switch component styling and theme colors
update switch component layout and spacing to improve consistency
modify secondary-foreground color variable to use correct semantic token
* feat(switch): add new switch component styles and animations
- Add new switch.css file with gradient and transition styles
- Update switch.tsx component with new styling classes and animations
- Remove loader icon in favor of animated gradient effect
* fix(i18n): Auto update translations for PR #11061
* style(primitives): remove redundant border style from switch component
* refactor(switch): remove switch.css and update switch component styles
Remove deprecated switch.css file and migrate styles to inline tailwind classes. Update disabled state styling to use opacity instead of linear gradient for better consistency.
* refactor(switch): simplify switch thumb implementation
Replace complex div structure with svg for loading state
Adjust disabled opacity and loading state styling
* style(switch): adjust thumb size and positioning for better consistency
* feat(switch): add storybook documentation for switch component
Add comprehensive Storybook documentation for the Switch component, including:
- Basic usage examples
- Different states (checked, disabled, loading)
- Size variations
- DescriptionSwitch variant
- Real-world usage scenarios
- Accessibility examples
- Form integration examples
Also remove redundant box-content class from switch styles
* fix(switch): adjust thumb positioning for md and lg sizes
* style(primitives): improve switch component styling and spacing
- Add padding to the container
- Simplify label height logic
- Update typography classes for better consistency
- Adjust switch container alignment
* feat(switch): add size prop to DescriptionSwitch component
Add support for sm, md, and lg sizes to DescriptionSwitch component with responsive text sizing. Also includes comprehensive Storybook documentation with examples of all sizes and states.
* style(switch): align label text to right when isLeftSide is true
* refactor(stories): clean up DescriptionSwitch stories by removing unused imports and simplifying JSX
* refactor(ui): rename CustomizedSwitch to Switch for consistency
Simplify component naming by removing redundant 'Customized' prefix and aligning with common naming conventions
* refactor(switch): extract switch root styles into cva variants
Improve maintainability by using class-variance-authority to manage switch root styles and variants
* refactor(switch): extract thumb variants into separate cva function
Improve maintainability by moving switch thumb styling logic into a dedicated variants configuration. This makes the component more readable and easier to modify.
* feat(switch): add classNames prop for custom styling
Allow custom class names to be applied to switch root, thumb, and thumbSvg elements for more flexible styling options.
* feat(switch): add loading animation variants for switch thumb
Extract loading animation logic into separate cva variants for better maintainability and reusability
---------
Co-authored-by: GitHub Action <action@github.com>
- 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.
- Introduced a new Tabs component along with TabsList, TabsTrigger, and TabsContent for improved content organization.
- Updated package.json and yarn.lock to include @radix-ui/react-tabs dependency.
- Enhanced index.ts to export the new Tabs components for easier access in the UI library.
- Created stories for the Tabs component in Storybook to demonstrate various usage scenarios.
- Added a new Breadcrumb.stories.tsx file to showcase the Breadcrumb component and its variations.
- Refactored existing stories for Button, Checkbox, Combobox, Kbd, Pagination, RadioGroup, Select, and Spinner components to import directly from @cherrystudio/ui instead of relative paths.
- Enhanced the organization and accessibility of component stories in the Storybook environment.
- Updated the @radix-ui/react-slot dependency in package.json and yarn.lock to version 1.2.4.
- Introduced a new Pagination component with associated subcomponents (PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaginationEllipsis).
- Added stories for the Pagination component to demonstrate various use cases and configurations.
- Removed the InTooltip story from Kbd.stories.tsx to declutter the examples.
- Kept the Tooltip-related imports commented out for potential future use.
- Introduced a new Kbd component to display keyboard shortcuts, supporting both single keys and key combinations.
- Added KbdGroup for grouping multiple Kbd components together.
- Updated package.json to include @radix-ui/react-tooltip version 1.2.8.
- Created stories for Kbd component showcasing various use cases, including integration with Tooltip for enhanced user guidance.
- Deleted the FilePngIcon and FileSvgIcon components from the icons directory due to low usage.
- Removed the ToolsCallingIcon component and its related stories, as it did not meet the UI library extraction criteria.
- Updated the index.ts file to reflect these removals and cleaned up the export list accordingly.
- Ensured that all related story files for the removed icons were also deleted to maintain a clean 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.
- Exported CheckedState type from the checkbox component for better type management.
- Added checkbox and combobox components to the main component index for easier access.
- Updated Storybook examples to utilize the CheckedState type for controlled checkbox states.
- Introduced a new checkbox component utilizing Radix UI, allowing for customizable sizes and states.
- Implemented styles using class-variance-authority for consistent design across different sizes (sm, md, lg).
- Added comprehensive Storybook stories demonstrating various use cases, including default, checked, disabled, and controlled states.
- Updated package.json and yarn.lock to include the new Radix UI checkbox dependency.
- Introduced size variants for RadioGroupItem using class-variance-authority for better customization.
- Updated RadioGroupItem to accept size prop and adjusted styles accordingly.
- Added comprehensive Storybook stories for various use cases, including default, disabled, and size variations, to demonstrate component functionality and usage.
- Updated SettingsTab to utilize the new Select component instead of the deprecated Selector.
- Enhanced Select integration with SelectTrigger, SelectContent, SelectItem, and SelectValue for improved functionality.
- Removed Selector imports and related code to streamline the component structure.
- Adjusted styles and layout for better user experience in the settings interface.
- Added a new Select component based on Radix UI, including SelectTrigger, SelectContent, SelectItem, and SelectValue.
- Implemented support for groups and separators within the Select component.
- Updated package.json to include @radix-ui/react-select as a dependency.
- Removed deprecated Selector and SearchableSelector components to streamline the codebase.
- Added stories for the Select component to showcase various use cases and configurations.
