polish(scratchnode): handoff cascade + room-code copy flash#456
polish(scratchnode): handoff cascade + room-code copy flash#456HomenShum wants to merge 1 commit into
Conversation
Additive follow-up to the motion pass (0ec4c9d). Two micro-interactions it did not cover, both on public/proto/home-v5.html and reusing the existing --motion-*/--ease-out tokens: - Room-code chip flashes a green "Copied" confirmation on copy, paired with the existing toast (text + colour, not colour alone). - NodeBench handoff overlay sections cascade up (nbSectionIn) after the panel slides in, with a prefers-reduced-motion guard. Leaves the public/private behaviour contract untouched. Verified: 7/7 e2e (output-contract + live-route-honesty), reduced-motion suppression, no horizontal overflow at 375px. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🤖 Augment PR SummarySummary: This PR adds two micro-interactions to the ScratchNode demo page to make the room feel more polished. Changes:
Technical Notes: Reuses the existing 🤖 Was this summary useful? React with 👍 or 👎 |
![augmentcode[bot]](https://avatars.githubusercontent.com/in/1027498?s=60&v=4){kind=small}
| } | ||
| if (navigator.clipboard) { | ||
| navigator.clipboard.writeText(text).then(function(){ toast('Copied join link', EVENT_ROOM_CODE + ' · paste in any chat.'); }); | ||
| navigator.clipboard.writeText(text).then(function(){ toast('Copied join link', EVENT_ROOM_CODE + ' · paste in any chat.'); flashRoomCode(); }); |
There was a problem hiding this comment.
navigator.clipboard.writeText(...) can reject (permissions/HTTP/non-secure contexts), and this path currently doesn’t surface any fallback toast/error when that happens, so the user may get no confirmation at all. Consider handling the rejection case explicitly so copy failures don’t silently do nothing.
Severity: medium
🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.
| function flashRoomCode() { | ||
| var btn = document.getElementById('sn-room-code-btn'); | ||
| if (!btn || btn.dataset.flashing === '1') return; | ||
| var original = btn.textContent; |
There was a problem hiding this comment.
flashRoomCode() captures original from btn.textContent and restores it later; since the room-code button is also updated programmatically (e.g., after event fetch), a late update during the 1.3s window could be overwritten by the restore and leave a stale code showing. Consider restoring from the canonical room-code state instead of the previous rendered text.
Severity: medium
🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.
2 participants
What
Additive follow-up on top of the shipped motion pass (
0ec4c9d3). Adds the two micro-interactions the prior pass did not cover, onpublic/proto/home-v5.html:✓ Copiedconfirmation (paired with the existing toast — text + colour, not colour alone), then restores the code.nbSectionIn) after the panel slides in, so the "Now in NodeBench" moment feels composed instead of a hard cut.Both reuse the existing
--motion-fast/med/slow+--ease-outtoken system added in0ec4c9d3— no new token system, no overlap with the existingfeedRowIn/answerReveal/laCardIn/snNotePop/composerSheen/privateSealmotion.Why these two only
A parallel pass (
0ec4c9d3) already shipped composer focus glow (--glow-accent/composerSheen), private-mode differentiation + lock pulse (--glow-private/privateSeal), message/answer reveals, Live Assist stagger, and Memory Wall pop. These two were the remaining gaps.Safety
prefers-reduced-motionguard on the cascade.Verification
7/7e2e on chromium:home-v5-output-contract(runs the 13-phase demo + 17 QA invariants + Live Assist counts) and all 6scratchnode-live-route-honestyguarantees (no mock chat on config-fail, composer stays disabled, no local rows on send failure).<script>blocks parse clean.is-copied+✓ Copied+ green; handoff sections →nbSectionInwith staggered delays0.1s / 0.18s / 0.26s; reduced-motion →animationName: none; mobile 375px → no horizontal overflow.🤖 Generated with Claude Code