feat(home): rank the two entries by interaction shape and float the header - #104
Merged
Merged
Conversation
The canvas entry has to settle which project the character belongs to before a workflow run exists, so a single destination is not enough for that card. Add an optional actions prop. When it is present the card renders as a section instead of a link, and the action row swaps to those links on hover or keyboard focus. Cards without actions keep the previous single-link shape, and the split links stay reachable by keyboard because they are dimmed rather than unmounted.
The two cards contrasted having a project against not having one, while the product tells them apart by control granularity, so nothing on the second card mentioned the canvas it leads to. Rename the second entry to the workflow canvas, rewrite both descriptions and the section note, and hang the new-project and existing-project links off its action row. The starting point section now states how each path works instead of where the user comes from.
The home test asserted the old card titles and the second cards href, both of which the rename removed. Assert the two new titles and the two secondary links, and drop the href check on the second card since it is no longer a link. The suite pins the entry naming and the split destinations.
The shell ships a plain in-flow nav bar, while the 07-31 design keeps a floating one that leaves the full-bleed screens untouched. Add AppHeader, fixed above the content, with a brand plate that names the current workspace and three links that highlight by pathname. The Playtest item from the design is left out because the preview route needs a character and an outfit id, so the header has no constant address for it.
The header decides its highlight from the pathname and drops one item from the reference design, neither of which was pinned by a test. Assert that the editor route highlights the creation entry, that the home route highlights only itself, and that no Playtest link is rendered. A later attempt to restore the Playtest entry has to update the test on purpose.
The root route stayed outside the shell so the first screen could run full bleed, which left the home page without any way to reach projects and the asset library. Replace the nav bar with AppHeader and move the root route inside AppShellRoute. Home keeps its full-bleed composition because the header floats above the content instead of taking layout height.
The header no longer occupies layout height, so content pages started under it. Raise the top padding of the container to six rem and keep the other three sides at two. Content pages clear the bar with room to spare, and the note records that the value tracks the header size.
The layering note stated that the root route stays outside the shell, which stopped being true once the header started floating. Record that every route now sits inside the shell, why the first screen survives it, and that the header reads the pathname only to highlight the current item. The document matches the route table again.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![fennoai[bot]](https://avatars.githubusercontent.com/in/1924301?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
I found one issue in the changed home card interaction.
Verification note: I could not run the frontend tests/typecheck in this checkout because frontend/node_modules is missing; npm test and npm run typecheck resolved to non-executable shims instead.
Tailwind v4 wraps hover variants in @media (hover: hover), so the reveal that exposes the two secondary entries never fires on a touchscreen, and the section wrapper is neither focusable nor clickable. Show both action links persistently under any-pointer: coarse and hide the collapsed label row there, keeping the hover and focus-within reveal for fine pointers. The workflow-canvas card is now tappable on phones and on hybrid devices whose primary pointer reports fine.
nighca
approved these changes
Aug 4, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
把首页的两个入口按交互形态重排，并让 07-31 定稿的悬浮顶栏进入外壳、覆盖包括首页在内的全部路由。
Closes #98
Why
首页「选择一个起点」原来摆的是「快速开始」与「从项目开始」。这组对立的是有没有项目，而 #37 §3.8 定的两个入口是 Quick Start 与画布，差别在控制粒度——一句话交给系统连续跑完，还是在画布上逐个节点决定。卡二从眉标到按钮没有一处提到画布或节点，用户点之前不知道它通向工作流编辑器。
同时根路由留在外壳之外，首页没有顶栏。资产库挂在项目下（
/projects/:projectId/assets），首页因此没有任何通往已有项目与资产库的入口，而 08-03 导师会刚把「改已有角色」的入口定在资产库。#91 当时把根路由排除在外，是因为外壳那条 nav 在文档流里占一行高度，会把满幅首屏顶下去；换成悬浮顶栏后这个理由不再成立。Change Description
app/layout/app-header.tsx（111 行）与其测试（35 行），外壳的 nav 换成它，根路由移入AppShellRoute。shared/ui/page-container.tsx顶部留白由py-8改为pb-8 pt-24，为悬浮顶栏让位。frontend-architecture-v3.md第 2 节：「根路由留在外面」在本 PR 后不再成立。Implementation Approach
HomeChoiceCard的可选actions，给出时卡片由Link降级为section——链接不能嵌套链接。两个按钮用透明度与pointer-events切换、配group-focus-within，不用display:none，否则隐藏的链接无法聚焦，键盘用户够不到。触屏另给一条基线：Tailwind v4 把hover:包在@media (hover: hover)里，只留 hover 展开的话这两个入口在手机上永远触发不到，所以any-pointer: coarse下折叠行hidden、按钮行static / opacity-100 / pointer-events-auto。用any-pointer而非pointer，是因为触屏笔记本与配鼠标的 iPad 主指针报 fine，只判主指针那类设备用手指仍然点不动。Windup-Frontend-Complete-2026-07-31的app-header.tsx，fixed top-3.5 z-50加pointer-events-none，不占布局高度，首屏满幅构图因此不变。AppShell里按 pathname 给不同页面配不同容器的分支：架构文档写明外壳不读 pathname、不统一夹居中容器。本 PR 的外壳仍只渲染顶栏与w-full的main，避让交给PageContainer。顶栏内部读 pathname 只为高亮当前项，与「外壳不判断自己该不该出现」是两件事。/playtest/:characterId/:outfitId，没有角色与造型就构造不出恒定地址，链接会落进 404。理由写在组件顶部注释里，测试也断言了它不存在。Screenshots
Before — 两张卡按有没有项目对立，首页无顶栏：
After — 按交互形态命名，顶栏悬浮在上，首屏构图不变：
After（悬停卡二） — 动作条换成两个按钮：
Before / After（内容页
/projects） — 占位的 nav 换成悬浮顶栏，正文不被遮挡：可交互预览：https://windup-git-fork-huyanxius-refactor-hom-4af7a2-huyan-s-projects1.vercel.app
Testing
本地执行了 CI 工作流中的全部步骤：
npm run format:check— 通过（44 个文件）npm run lint— 通过，无告警npm run typecheck— 通过npm run test— 通过（3 个文件 / 4 个用例，新增 2 个）npm run build— 通过（244.65 kB，186ms）浏览器手工核对：首页与
/projects均带悬浮顶栏且高亮正确；首屏不被顶栏下推；/projects正文不被遮挡；卡二悬停后出现两个按钮，Tab 也能走到。Follow-ups
/projects占位页。建项目、建 workflow run、再跳/workflow-editor/:runId依赖后端接口对齐，另开 Issue。PageContainer的pt-24与顶栏尺寸是手工对齐的两个数，改顶栏高度时要一起改，目前靠注释约束。Related