Skip to content

fix(ui): PhoneFrame v2 visual polish#80

Merged
hqhq1025 merged 1 commit intomainfrom
wt/loop-fix-phoneframe-polish
Apr 19, 2026
Merged

fix(ui): PhoneFrame v2 visual polish#80
hqhq1025 merged 1 commit intomainfrom
wt/loop-fix-phoneframe-polish

Conversation

@hqhq1025
Copy link
Copy Markdown
Collaborator

Why

用户反馈 #76 修了 PhoneFrame 尺寸但视觉仍丑:

  • 外壳跟 app cream bg 同色 → 没"phone object"感
  • 黑色 inner bezel 过厚,左右切掉 ~12px artifact 内容
  • Notch 是奶白色凸起 + 切口,不像 iPhone 刘海
  • 点击留评 hint pill 横跨 notch 区,叠加在 frame 上
  • 内屏顶部圆角太大,截掉 artifact 顶部

What

  • 新 token:--color-phone-body(深 space gray)+ --color-phone-island(接近纯黑)+ --border-width-phone-bezel: 3px + --size-preview-mobile-island-{w,h},亮/暗主题各一份
  • PhoneFrame.tsx 重写:单层 deep-gray body(明确不复用 --color-surface)+ 3px 薄 bezel + 居中 Dynamic Island pill 取代 notch;屏幕圆角 = radius-phone − bezel,artifact 边缘不再被切
  • PreviewPane.tsx:mobile viewport 不渲染 click-to-comment hint pill(用户已切到小屏,提示反而挡设备 chrome)
  • 测试更新:assert body 用专属 phone token 而非 surface/background;assert dynamic island token + 稳定 testid 暴露

Tests

  • pnpm typecheck
  • pnpm --filter @open-codesign/desktop exec vitest run → 25 files / 231 tests ✅(含新增 PhoneFrame 5 tests)
  • pnpm exec biome check(变更文件) ✅

Constraints

  • Compatibility ✅(仅渲染层 token + 组件改动)
  • Upgradeability ✅(schema 无关)
  • No bloat ✅(无新依赖;删除未用的 notch tokens)
  • Elegance ✅(单层结构替代双层 cream+black)

…ner bezel

User feedback on #76: sizing was correct but the device still looked melted
into the cream canvas, the bezel was thick enough to clip iframe content,
and the notch read as a bump rather than a real iPhone cut-out.

Changes:
- New tokens (--color-phone-body / --color-phone-island /
  --border-width-phone-bezel / --size-preview-mobile-island-{w,h}),
  light + dark variants
- Single-layer deep space-gray body (no more outer cream + inner black
  double bezel) with a 3px bezel so artifact corners are not eaten
- Centered Dynamic Island pill replaces the notch
- Hide the click-to-comment hint pill in mobile viewport — it was overlapping
  the device chrome and the user has already opted into the small frame
- Test contract updated: asserts body uses dedicated phone token (not
  --color-surface / --color-background) and exposes a stable test id +
  island token names
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Findings

  • No high-confidence issues found on added/modified lines.

Summary

  • Review mode: initial
  • No actionable issues detected in this diff.
  • Residual risks/testing gaps: docs/VISION.md and docs/PRINCIPLES.md are not present in this checkout (Not found in repo/docs), so project-principle alignment could not be fully verified from those docs alone.

Testing

  • Not run (automation)

open-codesign Bot

@hqhq1025 hqhq1025 merged commit 3dbe953 into main Apr 19, 2026
5 of 6 checks passed
@hqhq1025 hqhq1025 deleted the wt/loop-fix-phoneframe-polish branch April 19, 2026 04:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant