Skip to content

Add motion UI component library and refactor popup to use new components#23

Open
hoangsvit wants to merge 21 commits into
devfrom
codex/refactor-popup-ui-using-beui-design-bnuwpe
Open

Add motion UI component library and refactor popup to use new components#23
hoangsvit wants to merge 21 commits into
devfrom
codex/refactor-popup-ui-using-beui-design-bnuwpe

Conversation

@hoangsvit

@hoangsvit hoangsvit commented Jul 2, 2026

Copy link
Copy Markdown
Member

Motivation

  • Modernize and centralize popup UI by extracting reusable, motion-enabled components inspired by beUI Motion for consistent visuals and interactions.
  • Replace large inline JSX in the popup with composable components to improve maintainability and reuse across the codebase.
  • Surface small shared utilities and motion tokens for consistent animations and class merging.

Description

  • Added a new UI component library under src/components/ui (including Button, Input, Select, Tabs, Card, StatCard, Toast, AnimatedToastStack, NumberAnimation, ToggleSwitch, Tooltip, AnimatedBadge, Badge, EmptyState, SectionHeader) and an index export at src/components/ui/index.ts.
  • Introduced alias-specific components PopupHeader and AccountSwitcher under src/components/alias and refactored entrypoints/popup/App.tsx to use these components plus Card and Toast, replacing the previous inline header and account selector markup.
  • Converted small popup-local components to re-export the new UI implementations (entrypoints/popup/components/Button.tsx, Input.tsx, Toggle.tsx) and removed duplicated implementations.
  • Added small shared libs and helpers: src/lib/ease.ts (motion tokens), src/lib/utils.ts (cn combining clsx + tailwind-merge), and src/lib/hooks/use-hover-capable.ts for hover detection, and updated tailwind.config.ts to include src in content and add a soft box-shadow token.
  • Updated package.json dependencies to include clsx, lucide-react, motion, and tailwind-merge required by the new UI layer.

Testing

  • Ran TypeScript compile check with tsc --noEmit to validate typings and the build surface, which completed successfully.
  • Ran the test suite with vitest using vitest run, and all tests passed.

Codex Task

@qodo-code-review

qodo-code-review Bot commented Jul 2, 2026

Copy link
Copy Markdown

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

@eplus-bot eplus-bot self-requested a review July 2, 2026 15:31
@deepsource-autofix
style: format code with Prettier
c68e3de 
This commit fixes the style issues introduced in 69b49b2 according to the output
from Prettier.

Details: #23
@deepsource-io

deepsource-io Bot commented Jul 2, 2026 •
edited
Loading

Copy link
Copy Markdown

DeepSource Code Review

We reviewed changes in 4e86bdf...1831af4 on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade   Security  

Reliability  

Complexity  

Hygiene  

Code Review Summary

Analyzer Status Updated (UTC) Details
JavaScript Jul 3, 2026 3:28a.m. Review ↗

Important

AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.

hoangsvit and others added 19 commits July 3, 2026 08:20
@hoangsvit
fix: reorder dependencies in package.json for clarity
8a96bec
@hoangsvit @claude
feat: integrate beUI motion into remaining UI components
a2431fb 
Add motion animations (hover, entrance effects) to Card, StatCard, EmptyState, and SectionHeader using beUI motion patterns. Respects prefers-reduced-motion for accessibility.

- Card: 1.01x hover scale
- StatCard: 1.02x hover scale with icon pulse
- EmptyState: slide-in entrance with icon hover
- SectionHeader: slide-in entrance with action hover

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
@hoangsvit @claude
refactor: align UI components with beUI design patterns
af65fb8 
Update core components to match beUI's visual design and motion patterns:

**AnimatedToastStack:**
- Add 6 statuses (success, error, warning, info, neutral, loading)
- Change opacity: 95% → 10% tint (semi-transparent instead of opaque)
- Add action button support with callbacks
- Add loading status with spinning icon animation
- Improve styling: border-opacity, padding, font-weight alignment
- Better accessibility with hover states

**AnimatedBadge:**
- Add 6 status types (success, error, warning, info, neutral, loading)
- Add size variants (sm, md) for flexible layouts
- Add loading status with rotating icon
- Add showIcon prop for icon toggle
- Add tabular-nums for numeric alignment
- Update colors to match tinted design tokens

**Button:**
- Replace gradient (from-blue-600 to-violet-600) with solid color (blue-600)
- Adjust border radius: rounded-xl → rounded-lg/rounded-xl
- Maintain accessibility and ripple effects

**Tabs:**
- Increase text size: text-xs → text-sm
- Adjust padding: px-2 py-2 → px-2.5 py-1.5
- Use font-medium instead of font-semibold
- Improve spacing consistency

All changes respect prefers-reduced-motion. Tests pass ✓

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
@hoangsvit @claude
refactor: enhance Select component styling and error handling
1142f71 
Align Select component with beUI design patterns:
- Adjust border radius: rounded-xl → rounded-lg
- Add error state support with visual feedback
- Add animated chevron icon response to error state
- Improve styling consistency with other form inputs
- Better visual hierarchy and accessibility

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
@hoangsvit @claude
refactor: refine component styling for beUI consistency
177ac9b 
Minor style refinements across components:

**Card:**
- Update border color: white/70 → gray-200/80
- Update background: white/80 → white/85
- Align with beUI's color palette

**Input:**
- Change border radius: rounded-xl → rounded-lg
- Improve dark mode ring colors
- Better visual hierarchy

**ToggleSwitch:**
- Remove gradient: from-blue-600 to-violet-600 → solid blue-600
- Match beUI's simpler color approach

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
@hoangsvit @claude
refactor: improve Tooltip styling for beUI consistency
2efd78a 
Update Tooltip component:
- Change border radius: rounded-xl → rounded-lg
- Update font: text-[11px] font-semibold → text-xs font-medium
- Add dark mode background variant

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
@hoangsvit @claude
refactor: standardize border radius and opacity across components
ddd9a6d 
Final styling consistency pass:

**EmptyState:**
- Border radius: rounded-2xl → rounded-xl
- Border opacity: gray-200 → gray-200/80

**StatCard:**
- Border radius: rounded-2xl → rounded-xl
- Background: white/70 → white/85
- Dark mode: bg-gray-800/60 → bg-gray-800/70

Ensures consistent visual language across all UI components aligned with beUI design system.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
@hoangsvit @claude
feat: implement beUI design token system
6fb412d 
Add complete beUI design token system for theme consistency:

**Tailwind Config:**
- Add semantic color tokens (background, foreground, card, primary, destructive, etc.)
- Use CSS custom properties for dynamic theming
- Support light and dark mode variants

**Global Styles:**
- Define CSS variables for light mode (light background, dark foreground)
- Define CSS variables for dark mode (dark background, light foreground)
- All tokens properly scoped with HSL values

**Updated Components:**
- Button: Use primary, destructive, accent, muted tokens
- Card: Use card, border tokens
- Input: Use input, border, ring, destructive tokens
- Select: Use input, border, ring, destructive tokens

Benefits:
✓ Single source of truth for colors (CSS variables)
✓ Easy theme switching (just toggle dark class)
✓ Consistent design system across all components
✓ Future-proof for light/dark mode and custom themes

All tests pass ✓

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
@hoangsvit @claude
refactor: migrate Badge and Toast to beUI design tokens
2a1845a 
Update components to use semantic design tokens:

**AnimatedBadge:**
- Replace hard-coded colors with design tokens
- info: blue-200/80 → border-border bg-primary/10 text-primary
- success: emerald-200/80 → border-border bg-accent/10 text-accent
- danger: red-200/80 → border-border bg-destructive/10 text-destructive
- neutral: gray-200/80 → border-border bg-muted text-muted-foreground

**AnimatedToastStack:**
- Replace all status colors with semantic tokens
- Consistent border and background opacity (30%, 10%)
- Text colors match status semantics

Result: Colors now automatically adapt to theme changes via CSS variables.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
@hoangsvit @claude
refactor: migrate remaining components to beUI design tokens
48dbec3 
Update components and tests to use semantic design tokens:

**Components updated:**
- Tabs: gray-200/80 → border-border, bg-gray-100/80 → bg-muted, blue-700 → primary
- ToggleSwitch: bg-blue-600 → bg-primary, bg-gray-300 → bg-muted
- Tooltip: bg-gray-950 → bg-foreground, text-white → text-background

**Tests updated:**
- Toggle test expectations changed to use new design token classes
- Tests now verify behavior via design tokens instead of hard-coded colors

All components now follow beUI design token system for theme consistency.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
@deepsource-autofix
style: format code with Prettier
07eb3dd 
This commit fixes the style issues introduced in 48dbec3 according to the output
from Prettier.

Details: #23
@hoangsvit @claude
fix: adjust design token values for better beUI appearance
61a2006 
Fine-tune CSS variable values to match beUI visual design:
- Simplify HSL values for clarity
- Update dark mode card background (0 0% 13%)
- Update muted colors for better contrast
- Refine accent color (16 86% 67% - orange tone)
- Adjust border colors for dark mode

Design token system now provides accurate colors without shadcn dependency.
Components use semantic tokens that adapt to light/dark mode automatically.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
@hoangsvit @claude
config: add beUI MCP server for project
fbe568b 
Add project-level Claude configuration with beUI MCP integration.
Enables direct access to beUI components and design tokens.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
@hoangsvit @claude
fix: align Button component with beUI spec
2e73db8 
Fix critical and medium-priority issues to match beUI design patterns:

**Critical Fixes:**
- Fix focus ring: use design tokens (ring-ring/60) instead of hardcoded colors
- Fix focus ring offset: use background token for dark mode consistency

**Spec Alignment:**
- Ghost variant: change from 'text-foreground hover:bg-muted'
  to 'text-muted-foreground hover:text-foreground hover:bg-primary/5'
- Outline variant: change hover from 'hover:bg-muted' to 'hover:bg-primary/5'

All changes use semantic design tokens for better theme consistency.
Tests: 91/91 passing ✓

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
@deepsource-autofix
style: format code with Prettier
dd6b93b 
This commit fixes the style issues introduced in 2e73db8 according to the output
from Prettier.

Details: #23
@hoangsvit @claude
feat: implement beUI Select compound component
ec68ea9 
Replace simple HTML select wrapper with full beUI motion Select component:

**New Select Features:**
- Compound component pattern (Select, SelectTrigger, SelectValue, SelectContent, SelectItem)
- Context-based state management
- Gooey border morphing animation (flat edge faces trigger, rounds when opening)
- Staggered item entrance animations
- Automatic placement detection (top/bottom based on space)
- ResizeObserver for dynamic height animation
- Click-outside and Escape key handling
- Full keyboard accessibility (aria-* attributes)
- Chevron rotation animation
- Reduced motion support

**Updated:**
- src/components/ui/Select.tsx - Full beUI implementation
- src/components/alias/AccountSwitcher.tsx - Uses new compound API
- src/components/ui/index.ts - Export all Select components

**Benefits:**
- 100% beUI compliant
- Smooth entrance/exit animations
- Advanced gooey morphing effect
- Better UX with space detection
- Production-ready component

Tests: 91/91 passing ✓

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
@hoangsvit
Merge branch 'codex/refactor-popup-ui-using-beui-design-bnuwpe' of ht…
cafdfcd 
…tps://github.com/ePlus-DEV/gmail-alias-toolkit into codex/refactor-popup-ui-using-beui-design-bnuwpe
@deepsource-autofix
style: format code with Prettier
06393fd 
This commit fixes the style issues introduced in cafdfcd according to the output
from Prettier.

Details: #23
@hoangsvit
config: add beUI MCP server configuration
1831af4
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@eplus-bot eplus-bot Awaiting requested review from eplus-bot

Assignees

@hoangsvit hoangsvit

Labels

codex

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@hoangsvit