Skip to content

refactor(chat): adopt shared Button in message actions and approvals#361

Merged
furukama merged 3 commits intomainfrom
extract-chat-button-migration
Apr 20, 2026
Merged

refactor(chat): adopt shared Button in message actions and approvals#361
furukama merged 3 commits intomainfrom
extract-chat-button-migration

Conversation

@maxnoller
Copy link
Copy Markdown
Member

Summary

Extracted from #323 as PR E1. Stacked on #358 (base branch: `extract-shared-button-icons`) because it consumes the shared `` component.

  • Replaces raw `
` elements in `MessageBlock` / `EditInline` with `` (variant + size props)
  • Drops CSS that Button now owns: default border/background/cursor/hover for action/branch/approval buttons
  • `.approvalDeny` removed entirely — Deny uses `variant="danger"` directly
  • Mapping:

    • Message actions (copy/edit/regenerate) → `variant="ghost" size="icon"`
    • Branch nav → `variant="ghost" size="icon"`
    • Approval Allow* → `variant="outline" size="sm"` + color-only override via `.approvalAllow`
    • Approval Deny → `variant="danger" size="sm"`
    • Edit Save → default `
    `, Cancel → `variant="ghost"`

    This PR does not add aria-labels — those are in #359 (chat a11y) so they merge cleanly without overlap.

    Review order

    Merge #358 first, then retarget this PR to `main`. Opening as draft until that happens.

    Test plan

    • `vitest run` — 205/205 console tests pass
    • `tsc --noEmit` clean
    • Load a chat session, hover a message — copy/edit/regenerate buttons render with correct ghost styling
    • Approval dialog — Allow row buttons are green outline; Deny is red
    • Edit a message — Save/Cancel render with default/ghost variants

    🤖 Generated with Claude Code

    Replaces hand-styled <button> elements in MessageBlock and EditInline
    with the shared <Button> component (variant + size), and drops the
    CSS rules that are now redundant because Button handles them:
    
    - .actionButton: keep only width/height/border-radius/font-size; drop
      flex, border, background, color, cursor, transition, and :hover.
    - .branchButton: same cleanup; drop :hover and :disabled too.
    - .approvalAllow: keep only the success color tokens that override
      Button's default "outline" variant; drop padding/border/cursor/
      font/hover/disabled.
    - .approvalDeny: removed — use Button variant="danger" directly.
    
    Approval Allow buttons now use variant="outline" size="sm"; Deny uses
    variant="danger" size="sm"; message/branch actions use variant="ghost"
    size="icon"; edit Save/Cancel use the default + ghost variants.
    
    Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
    Base automatically changed from extract-shared-button-icons to main April 18, 2026 21:45
    @maxnoller maxnoller marked this pull request as ready for review April 18, 2026 21:47
    @maxnoller maxnoller requested a review from furukama April 19, 2026 00:50
    @furukama furukama merged commit 4f298f1 into main Apr 20, 2026
    6 checks passed
    @furukama furukama deleted the extract-chat-button-migration branch April 20, 2026 15:03
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

    Labels

    None yet

    Projects

    None yet

    Development

    Successfully merging this pull request may close these issues.

    2 participants