Skip to content

[Feature] Home visual polish to match mockup #181

@Astro-Han

Description

@Astro-Han

Context

#151 home redesign shipped in #180 covers layout, Skill card icons, composer chrome slimming, and the Skill starter reshape. Several visual details still diverge from the #151 mockup and are intentionally out of scope for #180 to keep the PR reviewable.

Mockup reference: https://github.com/user-attachments/assets/ebf59723-1642-4990-8367-4439005598ab (and the iterated ChatGPT mockups shared during #180 review).

Gaps

  • Composer Send button: mockup uses an orange-filled circle (brand color). Current build uses the default grey-ish IconButton variant="primary". Touches packages/app/src/components/prompt-input.tsx Send region; likely needs a brand variant on @opencode-ai/ui/icon-button or a local wrapper.
  • Composer model chip: mockup shows Kimi K2.6 as plain text + chevron with no provider icon. Current build prepends the Big Pickle green "Z" provider icon via ProviderIcon. Decide whether to drop the provider icon in home mode only or also in session.
  • Composer variant chip: mockup uses short label (one character). Current uses 默认 (two chars). Update session.new.* or common.default i18n, or switch variant default label rule when homeMode.
  • Composer interior spacing: extra py- inside the bottom bar so chips feel less crowded next to Send.
  • WorkspaceChip dropdown: current popover (工作目录 list + 添加工作目录) feels boxy; mockup has no reference so needs a separate design pass. Touches packages/app/src/components/prompt-input/workspace-chip.tsx.
  • Sidebar icon set: the five nav entries (新建对话 / 搜索 / 插件 / 远程控制 / 自动任务) should use a visually unified icon family. Current icons come from packages/ui/src/components/icon.tsx but have mixed stroke weights. Either pick a consistent subset or add locally tuned SVGs for sidebar-specific entries.

Out of scope

Suggested slicing

Open follow-up PRs in this order so each slice has a clear diff:

  1. Send brand button + model/variant chip copy + inner spacing (single prompt-input.tsx change)
  2. WorkspaceChip dropdown polish (single file + workspace-chip-helpers.ts if needed)
  3. Sidebar icon set alignment (packages/app/src/pages/layout/pawwork-sidebar.tsx + any new local SVGs)

Refs

Metadata

Metadata

Assignees

No one assigned

    Labels

    P1High priorityenhancementNew feature or requestuiDesign system and user interface

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions