feat(editor): pin AI/manual input to bottom, scroll context above - #58
Merged
Merged
Conversation
Switching scenes via the bottom prev/next links reset scrollTop to the cached value the browser happened to have — often partway down the previous scene's content, occasionally at 0 if the new content was shorter. Going back to an earlier scene lost any in-progress position; if the author was reading scene 3, jumped to scene 5 to fix a beat, and came back, scene 3 reappeared at the top. A Map<sceneId, scrollTop> on a ref captures the offset on every scroll tick (passive listener, no re-render). When activeSceneId changes, a second effect reads the saved value and sets scrollTop — or 0 if this is the scene's first visit. The browser clamps an oversized saved value automatically when the new scene's content height is smaller. The map lives on a ref scoped to the route instance; a new upload remounts the route, so positions reset without manual cleanup. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Existing layout put 修改指令 directly under the 原文 preview, then let the AI suggestion diff push the input button off-screen on small viewports. After a 5-beat conversation with the model, the author had to scroll back up to type the next instruction — exactly the opposite of the chat-app affordance the input was trying to be. Panel now has three regions: [Header — fixed top] [Scrollable context — 原文 + AI 建议结果] [Pinned input — 指令+chips OR speaker+textarea+save] The AI suggestion result moves into the scrollable region so the diff can grow as long as it needs without pushing the input down; the input stays anchored at the bottom in both AI and manual modes so the hands-to-keyboard distance is constant regardless of how the panel content has grown. Error banner sits in a thin strip between context and input — same rule of thumb as the Vercel/Linear input affordances: error stays adjacent to the action that produced it, not buried in scrollback. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
1 participant
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.
功能描述
`修改指令` 输入框从面板顶部搬到底部，像聊天 app。
之前：`原文` → `修改指令` → 聊出的 `AI 建议` diff 把 `接受/放弃` 按钮挤到屏幕外，作者要往回滚才能再打下一个指令。
实现思路
面板拆三段：
```
[Header — 顶部固定]
[可滚动上下文：原文 + AI 建议结果]
[底部固定：AI 模式=指令+chips / 手动模式=speaker+textarea+保存]
```
`AI 建议` 结果搬进上面可滚动区——diff 想多长就多长，不会挤压底部；底部输入区在 AI/手动两种模式下位置一致，手的移动距离不变。
`error` banner 落在上下文区和输入区之间细条上，紧贴产生它的输入动作——同 Vercel/Linear 输入框的 error 摆位。
测试方式
依赖与复用声明
无新增依赖。复用现有的 Button / Input / Loader2 / ChevronDown 组件 + 项目色 token。
Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com