style(word-addin): mirror the web app's composer, toggles, and tab pills

↗ view on GitHub · Amal · 2026-08-04 · 49eebd32

The pane's chrome had drifted into a second visual vocabulary: a flat
shadcn composer with a circular send button, a Radix switch with a black
track, and underline tabs - where the web app uses a liquid-glass
composer with a gradient-black square action button, a hand-rolled
blue-track ToggleSwitch, and glass pill tabs. Same product, two looks.

This restyles the pane to the web's exact class strings:
- ChatInput copies the web composer's glass container and single
  send/stop action button (frontend .../assistant/ChatInput.tsx).
- toggle-switch.tsx and tab-pill-button.tsx are faithful copies of the
  web components (only the cn import path differs), replacing the Radix
  switch - whose dependency is dropped - and the underline tab bar.
- ChatBubble.tsx is deleted: it was imported nowhere and its styling
  contradicted the real UserMessage; left alone it would have fossilized
  into the future shared package as the wrong bubble.
- The Markdown and tokens.css headers no longer claim the web app
  consumes them - it doesn't yet; that claim belongs to the shared
  package extraction, which these copies are staged for.

Behavior is unchanged: aria roles/labels (tab, switch, Send/Stop) are
preserved, so the full e2e suite passes as-is.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Repository open-legal-products/mike
Author Amal <mamalanand3@gmail.com>
Authored
Committed
Parents 6ae25260
Stats 11 files changed , +239 , -212
Part of Add a Word add-in for chat and tracked rewrites

Capture this commit into my fork

Download a Markdown prompt that tells Claude how to port this exact commit into your working tree. Run it via claude -p < capture-commit-49eebd32.md from inside the repo you want the change in.

⬇ Download capture-commit-49eebd32.md