Refactor popup UI foundation

[hoangsvit]

Motivation

• Provide a small, reusable UI foundation inspired by beUI to modernize the popup visuals (rounded cards, subtle glassmorphism, gradient accents, soft shadows, dark mode) while preserving all existing logic and storage behavior.
• Make the visual primitives available for incremental migration of screens so the redesign can proceed screen-by-screen without touching business logic or background/manifest code.
• Avoid adding heavy runtime dependencies to keep the popup bundle small and fast, preferring a tiny local cn helper and lightweight primitives.

Description

• Added a new UI primitives library under src/components/ui/ including Button, Input, Card, Tabs, ToggleSwitch, Select, Tooltip, Toast, Badge, StatCard, EmptyState, SectionHeader, a cn helper, and an index barrel for easy imports.
• Kept existing popup API stable by re-exporting the new primitives from the original entrypoint files (entrypoints/popup/components/Button.tsx, Input.tsx, Toggle.tsx) so the rest of the codebase and tests keep the same imports while switching to the new visuals.
• Refactored the popup shell/header and surrounding container in entrypoints/popup/App.tsx to use the new Card/Button/Toast primitives and beUI-inspired styling (gradients, rounded-2xl/3xl cards, soft shadow-soft, backdrop blur), while preserving all state, storage calls, account switching logic, alias generation/copy flows, and feature behavior.
• Extended tailwind.config.ts to include ./src/**/*.{tsx,ts} for class scanning and added a boxShadow.soft token used by new components, and kept icons inline to avoid adding additional packages.
• Minor test-driven adjustments to primitive classes to preserve expected test behavior (e.g., disabled opacity and toggle background classes) without changing functional behavior.
• Did not modify storage services, business logic, background scripts, or manifest configuration.

Testing

• Ran yarn compile and the TypeScript build succeeded.
• Ran yarn test and all unit tests passed after minor styling adjustments to primitives (tests green).
• Produced a production build using yarn build and the extension bundle was generated successfully (.output/chrome-mv3 artifacts present).
• Attempted to add external UI packages with yarn add clsx tailwind-merge lucide-react motion but the registry returned 403, so a local cn helper and inline/small svg icons were used as a lightweight workaround to avoid unresolved dependencies and keep the popup size small.

---

Codex Task

[qodo-code-review]

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 →

[deepsource-io]

DeepSource Code Review

We reviewed changes in 4e86bdf...fcf9b88 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 2, 2026 1:57p.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.