feat(chat): hide the mobile toolbar while composing; smoother keyboard and jump-to-bottom - #525
Conversation
While the chat composer has focus, Obsidian's formatting toolbar and the spacer core reserves for it are hidden, so the composer sits 6px above the keyboard (tuned live on an iPhone). The chat has its own attach button, and tapping the conversation still dismisses the keyboard. The toolbar returns only once the keyboard has closed (restoring it on blur made the composer jump up 44px first), or at once if focus moves to another editor. Closing now slides the composer down with the keyboard instead of snapping. Co-Authored-By: Claude <noreply@anthropic.com>
|
…views - A flick's momentum kept coasting in the scroller (the floating jump button isn't inside it, so tapping it doesn't stop it) and overwrote every frame of the jump animation, which stopped halfway. On mobile the scroller is set to overflow: hidden for the animation, which ends the momentum. Verified on an iPhone. - The body class that hides Obsidian's toolbar is now shared across chat views: it stays while any of them is composing, so closing an idle view no longer brings the toolbar back under an active one. - A toolbar-band change with the keyboard already up (focus arriving from or leaving for a note) now slides instead of jumping 66px. Co-Authored-By: Claude <noreply@anthropic.com>
| el.style.transition = "none"; | ||
| el.style.transform = `translateY(${offset}px)`; | ||
| // Commit the offset now, in the triggering task, so the slide starts on | ||
| // the same frame as the keyboard. | ||
| void getComputedStyle(el).transform; |
There was a problem hiding this comment.
If focus changes or the keyboard height updates during a composer slide, this code cancels the current transition and immediately applies a new offset for the full layout change. The composer jumps from its current position before sliding again, making rapid transitions look uneven.
Prompt To Fix With AI
This is a comment left during a code review.
Path: src/views/chat/Chat.svelte
Line: 271-275
Comment:
**Composer jumps between slides**
If focus changes or the keyboard height updates during a composer slide, this code cancels the current transition and immediately applies a new offset for the full layout change. The composer jumps from its current position before sliding again, making rapid transitions look uneven.
---
For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.
What
On mobile, while the chat composer has focus, Obsidian's formatting toolbar and the
.mobile-toolbar-spacercore reserves for it are hidden, so the composer sits 6px above the keyboard instead of 72px (52px toolbar + the composer's 20px glow spacer). The toolbar's buttons are note-editing tools; the chat has its own attach button, and tapping the conversation still dismisses the keyboard (the message list takes focus). The band the layout rules reserve for the toolbar is overridden on the composer and chat root only, never the document root, whose variable changes restyle the whole page (#524).On blur the toolbar is restored only once
--keyboard-heightreturns to 0: focus leaves before the keyboard closes, and restoring the band then made the composer jump up 44px before sliding down. If focus moves to another editor (a note), it's restored at once.The keyboard slide from #524 now also runs on close (reverse offset) instead of snapping.
Jump-to-bottom during momentum. Tapping the jump button while the list was still coasting from a flick stopped halfway: the button floats outside the scroller, so tapping it doesn't stop the scroller's momentum, and the momentum overwrote every frame of the jump animation (recorded on-device: distance-to-bottom alternating 1816 → 3739 → 1379 → 3749 …). On mobile the scroller is now
overflow: hiddenfor the animation, which ends the momentum; verified live on the iPhone.How I tested it
Live on Leo's iPhone via the Web Inspector bridge before writing the source: hiding the toolbar alone left the composer clipped (core ends the workspace above the spacer), found
.mobile-toolbar-spacer; confirmed via the focus log that tapping the conversation blurs the composer; fixed the close-time jump by deferring the restore; tuned the gap with Leo (flush was too tight, 6px right). Check, lint, format and 1981 unit tests pass. The built version (and the closing slide) is verified on-device via2.3.0-beta.7.AI assistance: Claude Code wrote the change from Leo's request to hide the toolbar under the chat input, iterating on it live on his iPhone; Leo tunes and tests it on-device.
Checklist
bun run check,bun run format,bun run lint, andbun run testpass locallymanifest.json: I noted that the docs site needs updating (see "Documentation" in CONTRIBUTING.md)