Skip to content

ui: migrate dashboard shell and account workflows to shared primitives #499

@icebear0828

Description

@icebear0828

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

  • 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions