Refactor Dyad card components to use new DyadCardPrimitives (#2482)
## Summary
This PR introduces a new `DyadCardPrimitives` component library and
refactors all Dyad markdown action cards to use these reusable
primitives. This improves consistency, reduces code duplication, and
makes styling changes easier to maintain across the codebase.
## Key Changes
- **New `DyadCardPrimitives.tsx`**: Created a comprehensive library of
reusable card components including:
- `DyadCard`: Main container with accent color support and state
indicators
- `DyadCardHeader`: Header row with icon and flexible content area
- `DyadBadge`: Small pill badges for card type labels
- `DyadExpandIcon`: Animated chevron for expand/collapse
- `DyadStateIndicator`: Spinner/X/checkmark for pending/aborted/finished
states
- `DyadCardContent`: Expandable content area with smooth animations
- `DyadFilePath`, `DyadDescription`, `DyadFinishedIcon`: Additional
utility components
- Support for 11 accent colors (blue, purple, violet, red, amber, green,
emerald, teal, sky, indigo, slate)
- **Refactored components** to use new primitives:
- `DyadAddDependency`: Simplified layout, improved package display
styling
- `DyadAddIntegration`: Consistent card styling for both pending and
completed states
- `DyadCodeSearch`: Cleaner header with state indicator
- `DyadCodeSearchResult`: Standardized file list display
- `DyadCodebaseContext`: Unified expand/collapse behavior
- `DyadDatabaseSchema`: Simplified header structure
- `DyadDelete`: Consistent red accent styling
- `DyadEdit`: Improved state indicators and layout
- `DyadExecuteSql`: Cleaner SQL badge and state handling
- And 19+ additional components
## Implementation Details
- All components now use semantic color tokens (`foreground`,
`muted-foreground`, `background-lightest`, etc.) for better dark mode
support
- Consistent spacing and sizing across all cards (px-3, py-2 for
headers, px-3 pb-3 for content)
- Smooth transitions for expand/collapse animations using `max-h` and
`opacity`
- Left border accent (3px) appears only when card is in pending or
aborted state
- Removed inline icon imports from individual components; now
centralized in primitives
- Improved accessibility with proper semantic HTML and ARIA attributes
https://claude.ai/code/session_01AAvVLShqeRjs42LhUdeK3e
<!-- devin-review-badge-begin -->
---
<a href="https://app.devin.ai/review/dyad-sh/dyad/pull/2482">
<picture>
<source media="(prefers-color-scheme: dark)"
srcset="https://static.devin.ai/assets/gh-open-in-devin-review-dark.svg?v=1">
<img
src="https://static.devin.ai/assets/gh-open-in-devin-review-light.svg?v=1"
alt="Open with Devin">
</picture>
</a>
<!-- devin-review-badge-end -->
<!-- CURSOR_SUMMARY -->
---
> [!NOTE]
> **Medium Risk**
> Large UI refactor across many chat card components and accessibility
attributes; primary risk is visual/interaction regressions and
snapshot/test churn rather than data/security impact.
>
> **Overview**
> **Refactors Dyad chat “action cards” to a shared component library.**
Introduces `DyadCardPrimitives` (e.g., `DyadCard`, `DyadCardHeader`,
`DyadBadge`, `DyadStateIndicator`, `DyadCardContent`) and migrates many
markdown-rendered cards
(edit/write/delete/grep/logs/list-files/code-search, integrations, etc.)
to use these primitives for consistent styling, expand/collapse
behavior, and keyboard/ARIA interaction.
>
> Updates E2E ARIA snapshots to match the new card structure and
accessibility tree, slightly tweaks chat message typography, bumps
`@playwright/test` to `^1.58.2`, and expands `lint-staged` formatting
(`oxfmt`) to include `*.json`.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
e020627fdb8955d948d982cb525c929b0610ee77. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Refactored all Dyad markdown action cards to use new DyadCardPrimitives
for a consistent, accessible card UI with smoother interactions and
easier styling. Adds lazy-mounted content and keyboard-accessible
expand/collapse, reduces duplication, and improves dark mode across 28+
components.
- **New Features**
- Added DyadCardPrimitives: DyadCard, DyadCardHeader, DyadBadge,
DyadExpandIcon, DyadStateIndicator (with finished state),
DyadCardContent, plus helpers (DyadFilePath, DyadDescription,
DyadFinishedIcon).
- 11 accent colors with tinted icon circles and a left accent border
shown for pending/aborted states; showAccent prop for explicit control.
- Smooth expand/collapse using CSS grid with a rotating chevron;
DyadCardContent lazy-mounts heavy children.
- Semantic color tokens for reliable light/dark theming.
- Improved accessibility: role="button", tabIndex, Enter/Space handlers,
and aria-expanded on interactive cards.
- **Refactors**
- Migrated 28+ markdown action cards (e.g., AddDependency, CodeSearch,
Edit, ExecuteSql, Status, WebSearch, Write) to the primitives; unified
headers, badges, spacing, state indicators, and expand/collapse
behavior.
- Fixed regressions: correct state extraction (Delete/Rename/Output),
restored children rendering (Delete/Read/Rename), passed isExpanded to
all interactive cards, click propagation fix in Grep.
- Removed per-component icon imports and ad‑hoc styles; net reduction of
~480 LOC.
<sup>Written for commit e020627fdb8955d948d982cb525c929b0610ee77.
Summary will update on new commits.</sup>
<!-- End of auto-generated description by cubic. -->
---------
Co-authored-by: 
Claude <noreply@anthropic.com>
Claude <noreply@anthropic.com>
正在显示
| ... | ... | @@ -137,7 +137,7 @@ |
| "@electron-forge/plugin-vite": "^7.11.1", | ||
| "@electron-forge/publisher-github": "^7.11.1", | ||
| "@electron/fuses": "^1.8.0", | ||
| "@playwright/test": "^1.52.0", | ||
| "@playwright/test": "^1.58.2", | ||
| "@storybook/addon-essentials": "^8.6.14", | ||
| "@storybook/blocks": "^8.6.14", | ||
| "@storybook/react": "^8.6.15", | ||
| ... | ... |
请
注册
或者
登录
后发表评论