star-chart-search-enhancer/docs/superpowers/specs/2026-05-25-popup-update-panel-design.md

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