fix(styles): UI/UX micro-interaction polish

[bilalbayram]

Summary

Comprehensive micro-interaction polish pass across 14 CSS files. Centralizes motion timing/easing into design tokens and adds tactile feedback, entrance animations, and accessibility support.

• Motion design tokens — centralized durations, easings, spinner speed, and active scales in ds-tokens.css
• Button press feedback — :active scale-down + brightness/background responses for primary, ghost, icon buttons
• Modal/popover entrance animations — fade + scale-in for modals, slide-up + fade for popovers
• Settings toggle spring — replaced justify-content swap with translateX + spring easing for smooth knob slide
• Segmented control & input focus transitions — smooth color/background/border transitions
• Spinner speed standardization — all 11 spinners now use var(--ds-spinner-dur) (0.7s) instead of hard-coded 0.8–1s
• Pulse easing fix — calmer breathing animation for thread status dots
• transition: all cleanup — replaced with explicit properties in sidebar, tabbar, compact-tablet, settings
• Popover positioning fix — switched keyframe animation to individual transform properties (translate/scale) so inline boundary-shift transforms still apply
• Global prefers-reduced-motion — single rule in base.css covers all 47+ CSS files using the 0.01ms trick to preserve JS event firing, with spinner whitelist to keep loading indicators functional

Before / After

Send Button Press

Before	After

Segmented Control Switch

Before	After

Settings Toggle Switch

Before	After

Modal Entrance

Before	After

Thread Status Pulse

Before	After

Spinner Speed

Before	After

Popover Entrance

Before	After

Files changed (14)

File	What changed
ds-tokens.css	Added 11 motion tokens
buttons.css	:active press states for all button types
ds-modal.css	Entrance animations + input focus transitions
ds-popover.css	Entrance animation (individual transform props) + item hover transitions
settings.css	Toggle spring, segmented transitions, input focus, transition:all cleanup
sidebar.css	Pulse easing fix, transition:all cleanup, spinner token
messages.css	Spinner → token
diff.css	3 spinners → token
composer.css	Spinner → token
main.css	Spinner → token
home.css	Spinner → token
tabbar.css	transition:all → explicit properties
compact-tablet.css	transition:all → explicit properties
base.css	Global prefers-reduced-motion: reduce rule + spinner whitelist

Test plan

• Click every button type (primary, secondary, ghost, icon) — subtle scale-down on press, smooth bounce-back on release
• Open settings / any modal — fade + scale-in entrance
• Open sort menu, context menus — popover animates in, stays on screen
• Toggle settings switches — knob slides with spring overshoot
• Switch segmented controls — smooth highlight transition
• Click into inputs — border/shadow fades in
• Trigger loading states — all spinners at consistent 0.7s
• Enable macOS Reduce Motion — all animations effectively disabled
• Sidebar collapse/expand, panel resize still work correctly

[xkonjin]

Code Review

Overview

This PR adds comprehensive motion design improvements to the UI, including:

• Design system tokens for consistent animations
• Button micro-interactions (active states, hover effects)
• Modal/popover entrance animations
• Accessibility support for reduced motion preferences
• Segmented control with sliding background

Strengths

1. Design System Tokens: Smart use of CSS custom properties for animation durations and easing curves makes the system maintainable and consistent.

2. Accessibility: The prefers-reduced-motion media query is well-implemented. Preserving functional spinners while disabling decorative animations is the correct approach.

3. Performance: Using CSS transforms and opacity for animations is performant. Avoiding layout-affecting properties (width, height) in transitions is good practice.

Issues & Concerns

1. Magic Numbers in CSS
   Several hardcoded values like 0.01ms, 50ms, calc(50% - 6px), translateX(20px)
   Recommendation: Extract to design system tokens where appropriate for consistency

2. Animation Duration Inconsistency
   Some transitions still use hardcoded values (e.g., 0.15s, 0.2s, 1.2s) instead of the new --ds-dur-* tokens
   See: .tabbar-item, .sidebar-refresh-icon.spinning, .thread-status.processing
   Recommendation: Migrate all animation durations to use design tokens

3. Universal Selector in Reduced Motion
   Using !important with universal selector can cause unexpected behavior
   Recommendation: Consider more targeted selectors or a CSS variable-based approach for reduced motion

4. Segmented Control Animation Timing
   This uses hardcoded 200ms instead of --ds-dur-normal (160ms)
   The easing curve cubic-bezier(0.645, 0.045, 0.355, 1) is not defined in the design tokens
   Recommendation: Use design tokens for consistency

5. Missing Test Coverage
   No tests for the new animation tokens or behavior
   No tests for reduced motion accessibility
   Recommendation: Consider adding visual regression tests or accessibility tests

Security Concerns

None identified.

Potential Bugs

None identified.

Test Coverage

No tests added for UI/animation changes.

Recommendations

1. Complete migration to design system tokens for all animation values
2. Add visual regression tests for critical UI components
3. Consider adding keyboard navigation tests for interactive elements
4. Document the design system tokens in a dedicated style guide

Summary

This is a well-crafted PR that significantly improves the UX with thoughtful motion design. The accessibility consideration is excellent. The main areas for improvement are consistency in using design tokens and adding test coverage.

Overall Assessment: Approve with minor suggestions