1d427f4cf5
Some checks failed
Release Binaries / release (push) Has been cancelled
Features: - Binary-Free Mode: No OpenCode binary required - NomadArch Native mode with free Zen models - Native session management - Provider routing (Zen, Qwen, Z.AI) - Fixed MCP connection with explicit connectAll() - Updated installers and launchers for all platforms - UI binary selector with Native option Free Models Available: - GPT-5 Nano (400K context) - Grok Code Fast 1 (256K context) - GLM-4.7 (205K context) - Doubao Seed Code (256K context) - Big Pickle (200K context)
1.7 KiB
1.7 KiB
Task 045 - Message Item Tailwind Refactor
Goal
Refactor MessageItem to rely on Tailwind utilities and the new token variables instead of bespoke global CSS.
Prerequisites
- Task 043 complete (color tokens available).
- Task 044 complete (typography baseline available).
Acceptance Criteria
src/components/message-item.tsxuses Tailwind utility classes (with CSS variable references where needed) for layout, colors, and typography.- Legacy
.message-item*styles are removed fromsrc/index.css. - Visual parity in light and dark modes is maintained for queued, sending, error, and generating states.
Steps
- Replace
class="message-item ..."and nested class usage with Tailwind class lists that reference tokens (e.g.,bg-[var(--surface-elevated)],text-[var(--text-secondary)]). - Create any small reusable utility classes (e.g.,
.chip,.card) in a newsrc/styles/components.cssif repeated patterns arise; keep them token-based. - Delete the now-unused
.message-itemblock fromsrc/index.css. - Verify conditional states (queued badge, sending indicator, error block) still render with correct colors/typography.
Testing Checklist
- Run
npm run devand load a session with mixed message states. - Toggle between light/dark themes to confirm token usage.
- Use dev tools to ensure no stale
.message-itemselectors remain in the DOM.
Dependencies
- Depends on Tasks 043 and 044.
- Blocks future component refactor tasks (046+).
Estimated Time
0.75 hours
Notes
- Capture before/after screenshots (light + dark, streamed message) for review.
- Mention any new utility classes in the PR description so reviewers know where to look.