You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The dashboard shell and account views carry the highest UI reuse pressure: sticky header, top tabs, account cards, account management, import/export toolbar, proxy assignment controls, status badges, toggles, quota bars, and destructive icon actions. These are also the places where contrast, hover, wrapping, and dark-mode consistency matter most.
Migrate Header actions, language/theme controls, update controls, server status pill, and add-account CTA to shared primitives.
Migrate the top tab bar to the shared navigation primitive.
Migrate AccountCard status badge, toggle, icon actions, proxy select, quota bars, and dense metric rows.
Migrate AccountList and AccountManagement toolbars/filters/import-export actions where they share the same control patterns.
Preserve current dense layout and account semantics. Do not swap history/window/summary values for visually convenient alternatives.
Acceptance criteria
Header, tabs, account list/cards, and account management screens visually match DESIGN.md in light and dark modes.
Existing account actions, selection, import/export, refresh, status toggle, label edit, proxy assignment, and quota refresh behavior still work.
Narrow-screen wrapping remains safe; no toolbar/card overflow.
No TypeScript any is introduced.
Verification
Add/update tests for migrated account UI behavior and class/state regressions.
Run npm test.
Run npm run build.
Manually verify the overview and account management tabs at localhost:8080 in light and dark mode.
Notes
This issue should stay focused on shell/account migration. Usage charts, logs, errors, proxy-pool detail screens, and settings panels can be handled separately.
Context
The dashboard shell and account views carry the highest UI reuse pressure: sticky header, top tabs, account cards, account management, import/export toolbar, proxy assignment controls, status badges, toggles, quota bars, and destructive icon actions. These are also the places where contrast, hover, wrapping, and dark-mode consistency matter most.
Depends on #497 and #498.
Scope
Acceptance criteria
DESIGN.mdin light and dark modes.anyis introduced.Verification
npm test.npm run build.localhost:8080in light and dark mode.Notes
This issue should stay focused on shell/account migration. Usage charts, logs, errors, proxy-pool detail screens, and settings panels can be handled separately.