diff --git a/docs/superpowers/specs/2026-05-25-popup-update-panel-design.md b/docs/superpowers/specs/2026-05-25-popup-update-panel-design.md new file mode 100644 index 0000000..83e9acc --- /dev/null +++ b/docs/superpowers/specs/2026-05-25-popup-update-panel-design.md @@ -0,0 +1,100 @@ +# 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