# Popup Update Panel Design

## Goal

Redesign the extension popup so it feels like a compact internal tool instead of a stretched document. The new popup should prioritize readability, clear grouping, and obvious update actions while keeping the interaction model unchanged.

## Confirmed Direction

- Visual style: enterprise tool
- Primary problem to solve: information feels crowded and hard to read
- Layout freedom: use whatever structure best improves clarity

## Scope

This change only redesigns the popup presentation layer:

- improve popup layout
- improve spacing and typography
- improve button hierarchy
- improve update-status presentation

This change does not alter:

- auth flow
- update-check logic
- download behavior
- background message behavior

## Layout

Use a grouped card layout instead of one long text column.

Recommended structure:

1. Header
   - compact product title on one line
2. Account card
   - login state
   - current user name
3. Update card
   - current version
   - latest version or current status
   - release notes
   - primary and secondary action buttons
   - short follow-up instruction text
4. Footer action
   - low-emphasis sign-out button

## Visual Rules

- Increase popup width to a more usable fixed tool width.
- Use a soft neutral page background with white content cards.
- Reduce title size significantly from the current oversized stacked text.
- Use a clear type scale:
  - product title: medium emphasis
  - section title: medium emphasis
  - status/version rows: normal emphasis
  - helper text: smaller and lighter
- Keep the palette restrained and neutral.
- Make `下载更新包` the primary button.
- Make `下载使用说明` a secondary button.
- Make `退出登录` a tertiary or low-emphasis button.

## Update State Presentation

- `checking`: show a compact in-progress line inside the update card.
- `latest`: show a simple success-style status without action buttons.
- `available`: show a clear “发现新版本” status block with versions and actions.
- `error`: show a readable warning block instead of generic broken-looking text flow.

## Content Rules

- Keep product name to one visual line or two short lines max.
- Avoid large paragraphs in the popup.
- Release notes should stay as a compact bullet list.
- The post-download instruction should be one concise sentence.
- Version labels should align consistently so the user can compare current/latest quickly.

## Implementation Notes

- Keep the existing popup DOM entrypoints and rendering flow.
- Focus changes in `src/popup/view.ts` first.
- Only adjust popup controller code if needed to support cleaner status rendering.
- Prefer CSS embedded in the popup HTML/view flow only as needed; do not expand scope into unrelated refactors.

## Testing

Add or update popup rendering tests for:

- logged-in layout still renders correctly
- available update state still shows current/latest versions
- update action buttons still exist
- latest/error states still render expected text

## Out of Scope

- new popup features
- star chart page banners
- animation-heavy UI
- branding-heavy marketing visuals