[Feature][Medium] Add test suite, improve UX patterns, and enhance asset management

[numbers-official]

Summary

Several improvement opportunities that would enhance code quality, user experience, and maintainability.

Finding 1: No Test Suite

The project has zero test files — no unit tests, integration tests, or e2e tests. The package.json has no test script defined. For a security-sensitive application handling blockchain proofs, this is a significant gap.

Fix: Add Vitest (already compatible with the Vite build setup):

• Unit tests for services (AuthService, UploadService, ApiClient)
• Unit tests for IndexedDB operations (mock with fake-indexeddb)
• Component tests for popup and options UI
• Add "test": "vitest run" to package.json scripts

Finding 2: Replace alert()/confirm() with Inline UI

Files: src/popup/popup.tsx, lines 134, 138, 155, 159, 231

Native alert() and confirm() dialogs block the UI and look unprofessional in an extension popup.

Fix: Create toast/notification components for errors and confirmation modals for destructive actions (logout).

Finding 3: Fake Upload Progress Bar

File: src/services/UploadService.ts, lines 284-297

Progress increments by 10% every 500ms regardless of actual upload progress, misleading users about upload status.

Fix: Use XMLHttpRequest with upload.onprogress events for real progress tracking, or display an indeterminate spinner instead of a fake percentage.

Finding 4: Asset Gallery Limited to 6 Items with No Management

File: src/popup/popup.tsx, lines 538-546

Assets are capped at 6 visible items with no pagination, delete, or bulk operations.

Fix: Add pagination/infinite scroll, individual delete buttons, and a "View All" option.

Finding 5: Extensive Inline Styles

File: src/popup/popup.tsx (multiple locations, esp. SharePromptModal lines 855-1025)

Inline style={{}} objects are overused, preventing CSS pseudo-classes (:hover, :focus) and creating maintenance issues. Mouse event handlers simulate hover effects that CSS handles natively.

Fix: Move inline styles to CSS classes. Use CSS :hover instead of onMouseOver/onMouseOut handlers.

Finding 6: Extensive use of any Types

Files: Multiple files across the codebase

any is used liberally despite strict: true in tsconfig, undermining TypeScript's type safety.

Fix: Replace any with proper types. Define interfaces for message payloads, API responses, and event handlers.

Suggested Approach

1. Set up Vitest with chrome API mocks
2. Start with service layer tests (highest value per effort)
3. Replace native dialogs with custom components
4. Add real progress tracking or honest indeterminate indicator
5. Improve asset gallery with pagination
6. Migrate inline styles to CSS modules or classes

Generated by Health Monitor with Omni