fix: refine coding project landing actions

This commit is contained in:
inman
2026-09-06 15:45:22 +08:00
parent de8ce283dd
commit faf751be5e
10 changed files with 307 additions and 117 deletions

View File

@@ -1,47 +1,52 @@
**Comparison Target**
- Source visual truth: `/var/folders/m7/x9ry3xgx4x50fxb20_0108tr0000gn/T/codex-clipboard-58e2cc35-7a17-4951-8bbc-53fee12d5246.png`
- Implementation screenshot: `/Users/inmanx/.codex/visualizations/2026/09/06/01a0756a-b6f5-7892-a11c-1c1608ebe592/makelore-coding-default.png`
- Combined comparison: `/Users/inmanx/.codex/visualizations/2026/09/06/01a0756a-b6f5-7892-a11c-1c1608ebe592/codex-reference-vs-makelore.png`
- State: reference start screen and Makelore Code with no active local project.
- Viewport: implementation CSS viewport 1280 x 800 at device scale factor 1. The source is 908 x 835 pixels with unknown capture density. For full-view comparison, the source was aspect-fit onto a 1280 x 800 white canvas and the implementation was kept at its native 1280 x 800 size; both canvases were then placed side by side.
- Source visual truth: `/var/folders/m7/x9ry3xgx4x50fxb20_0108tr0000gn/T/codex-clipboard-58e2cc35-7a17-4951-8bbc-53fee12d5246.png`, superseded at the lower action area by the user's explicit follow-up: use a standalone `新增项目` CTA and horizontally arranged existing-project cards, not a conversation box.
- Implementation screenshot: `/Users/inmanx/.codex/visualizations/2026/09/06/01a0756a-b6f5-7892-a11c-1c1608ebe592/makelore-coding-default-v2.png`
- Full-view comparison: `/Users/inmanx/.codex/visualizations/2026/09/06/01a0756a-b6f5-7892-a11c-1c1608ebe592/codex-reference-vs-makelore-v2.png`
- Focused lower-region comparison: `/Users/inmanx/.codex/visualizations/2026/09/06/01a0756a-b6f5-7892-a11c-1c1608ebe592/codex-reference-vs-makelore-v2-bottom.png`
- State: Codex reference start screen and Makelore Code with two remembered local projects but no active project.
- Viewport: implementation CSS viewport 1280 x 800 at device scale factor 1. The source is 908 x 835 pixels with unknown capture density. For full-view comparison, the source was aspect-fit onto a 1280 x 800 white canvas and the implementation remained at its native 1280 x 800 size. The focused comparison uses a 400-pixel-tall lower crop from each normalized content region.
**Findings**
- No actionable P0, P1, or P2 differences remain.
- Fonts and typography: both screens use a restrained system sans-serif hierarchy. The Makelore prompt has the same single-line, medium-weight emphasis and remains comfortably readable without wrapping at the verified viewport.
- Spacing and layout rhythm: the M mark and guide sentence form one centered hero group, while the project starter stays anchored near the bottom with proportions close to the reference composer. The persistent Makelore sidebar is an intentional product-shell constraint rather than design drift.
- Colors and visual tokens: the implementation keeps Makelore's existing light background, muted neutral surfaces, dark foreground, and subtle elevation. It does not introduce a conflicting theme or decorative palette.
- Image quality and asset fidelity: the hero uses the repository's existing vector Makelore M asset, with no placeholder, CSS drawing, or reconstructed logo.
- Copy and content: the guide sentence is adapted to Makelore, and the bottom surface explains the required no-project action while preserving the reference's prompt-first reading order.
- No actionable P0, P1, or P2 differences remain after applying the user's correction.
- Fonts and typography: the M hero keeps the reference's restrained system-sans hierarchy and single-line display copy. The CTA, section label, project names, and recency metadata form a clear descending hierarchy without crowding or truncation at the verified viewport.
- Spacing and layout rhythm: the hero retains generous white space. The standalone CTA is visually separated from the existing-project row, and fixed-width cards create a true horizontal browsing pattern without increasing page height as the catalog grows.
- Colors and visual tokens: the CTA uses the existing Makelore brand orange and the cards use existing neutral surface tokens, preserving the single light product system and one-accent discipline.
- Image quality and asset fidelity: the hero uses the repository's existing vector Makelore M asset. Project cards use the product's installed icon library; no placeholder image, CSS drawing, or reconstructed logo is present.
- Copy and content: `新增项目`, `已有项目`, and `选择一个项目继续` state the two available paths directly. Project cards use real project names and last-opened timestamps from the local catalog.
- Interaction and accessibility: the CTA opens the existing creation dialog; each card has a project-specific accessible name, keyboard focus treatment, pressed feedback, horizontal overflow, and routes through the Sidebar's existing validated project-entry behavior.
**Open Questions**
- None. The source does not include Makelore's persistent sidebar or its required project-selection state; those differences are intentional and necessary.
- None. The source screenshot's composer remains useful only for overall composition; the user's later instruction is authoritative for the lower interaction model.
**Full-view Comparison Evidence**
- The combined comparison shows matching visual priority: small centered mark, large central guide copy, substantial white space, and a low, wide action surface.
- The implementation preserves the reference's quiet density while making the unavailable-chat state actionable through the existing project creation flow.
- The combined view preserves the reference's primary visual order: small centered mark, large guide sentence, ample whitespace, then the entry action area.
- The Makelore-specific CTA and project cards occupy the same quiet lower zone without resembling an editable conversation surface.
**Focused Region Comparison Evidence**
- A separate crop was not needed: at native 1x capture, the M mark, guide sentence, starter metadata, CTA copy, icons, radii, and shadows are all legible in the full-view evidence.
- The focused comparison confirms that the earlier composer-shaped block is gone. The orange CTA is isolated and unmistakably actionable, while the two project cards align on one horizontal baseline with consistent icon, title, date, radius, and elevation treatment.
**Comparison History**
- Pass 1: no actionable P0/P1/P2 findings. No visual fixes were required after the combined comparison.
- Pass 1: the user identified a P1 interaction-model mismatch: the lower surface looked like a default conversation box and omitted horizontally arranged existing projects.
- Fix: replaced the composer-shaped starter with a standalone `新增项目` CTA; added a horizontal, overflow-safe row backed by the real project catalog; connected card clicks to the existing Sidebar entry path; added unit and Electron coverage.
- Pass 2: the revised full-view and focused comparisons show the corrected CTA/card hierarchy with no remaining actionable P0/P1/P2 findings.
**Implementation Checklist**
- [x] Replace the old project-configuration default with the Code conversation entry.
- [x] Use the real Makelore M asset in the centered hero.
- [x] Add a large guide sentence and bottom project starter.
- [x] Connect the starter controls to the existing project dialog and settings route.
- [x] Verify the Electron entry interaction and capture the no-project state.
- [x] Keep the Makelore M mark and large centered guide sentence.
- [x] Remove the composer-shaped no-project starter.
- [x] Add one standalone `新增项目` primary CTA.
- [x] Render real existing projects as horizontal cards.
- [x] Reuse the existing creation and validated project-entry flows.
- [x] Verify both the empty catalog and remembered-project states in Electron.
**Follow-up Polish**
- P3: after the concurrent project-dialog simplification lands, recheck the starter's secondary label so it reflects the final project/settings terminology exactly.
- None required for this correction.
final result: passed