🍕 feat(copy): inline 'Copied' feedback + always-https URLs#12
Merged
Conversation
Two related polish items on the panel's copy actions:
1) Every copy button now shows co-located confirmation
- The toast at the bottom of the panel was easy to miss when the
user's eyes were on the button they just clicked. Now the button
itself swaps its icon to a checkmark and tints green for ~1.5s
so confirmation is visible *exactly where the click happened*.
- The toast still fires too — they cover different misses (toast
for keyboard-shortcut copies and now-collapsed menus; inline for
focused button copies).
- Centralized in a new useCopyAction(durationMs?) hook that wraps
copyToClipboard + pushToast + tracks the most-recently-used key
so multi-button consumers (Copy as…, Export, Share menu) can
give per-button feedback.
2) URL-flavored copies always carry a protocol
- The Page URI / Component URI rows + the "Copy as → URI" button +
the yp/yc keyboard shortcuts used to copy bare strings like
`example.com/_components/x/instances/y`, which aren't paste-able
into a browser, curl, or Slack chat.
- New ensureProtocol() helper in clay-uri.ts prepends `https://`
when no scheme is present, preserves an existing http(s):// to
avoid silently upgrading localhost dev servers, and collapses
leading // for protocol-relative inputs.
- The displayed text in the row stays clean (no scheme); only the
clipboard payload is normalized. The CopyableUri tooltip now
surfaces the exact URL form so power users can verify before
pasting.
Surfaces touched
----------------
- CopyableUri (Page / Component URI rows): icon swap, green tint,
copies via ensureProtocol.
- ComponentDetails "Copy as…" row: per-button keyed feedback (URI,
cURL, fetch, CSS) — clicking one only flips that button to "Copied"
for 1.5s; URI button copies via ensureProtocol.
- JsonPreview: header copy icon swaps to checkmark.
- SeoTab JSON-LD cards: per-card copy icon swaps to checkmark; menu
state preserved (block stays open).
- ExportMenu: clicked item shows inline "Copied", menu auto-closes
900ms later so the affordance is visible before collapse.
- ShareMenu: same pattern — main button + per-env menu items both
show inline "Copied", cross-env menu auto-closes after 900ms.
- Keyboard shortcuts (yp / yc): copy via ensureProtocol so they match
what the in-panel buttons write.
Tests
-----
- 6 new ensureProtocol() cases covering bare URI, https://, http://
preservation, protocol-relative //, nullish/whitespace input,
surrounding-whitespace trim.
- 113 → 119 tests passing.
Visual additions
----------------
- New `check` glyph in the Icon set.
- `cs-link-copied`, `cs-icon-btn-copied`, `cs-uri-row-copy-copied`,
`cs-export-item-copied` modifier classes — all use the success
token (`--cs-success`) so they auto-adapt to light/dark themes.
Co-authored-by: Cursor <cursoragent@cursor.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
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.
Two related polish items on the panel's copy actions.
1. Every copy button now shows co-located confirmation
The toast at the bottom of the panel was easy to miss when the user's eyes were on the button they just clicked. Now the button itself swaps its icon to a checkmark and tints green for ~1.5s so confirmation is visible exactly where the click happened.
The toast still fires too — they cover different misses:
Centralized in a new `useCopyAction(durationMs?)` hook that wraps `copyToClipboard` + `pushToast` + tracks the most-recently-used key, so multi-button consumers (Copy as…, Export, Share menu) can give per-button feedback.
```tsx
const { copy, copiedKey } = useCopyAction();
<button
className={`cs-link ${copiedKey === 'curl' ? 'cs-link-copied' : ''}`}
onClick={() => copy(curlText, 'cURL command', 'curl')}
{copiedKey === 'curl' ? <><Icon name="check" /> Copied</> : 'cURL'}
```
2. URL-flavored copies always carry a protocol
The Page URI / Component URI rows + the Copy as → URI button + the yp / yc keyboard shortcuts used to copy bare strings like `example.com/_components/x/instances/y`, which aren't paste-able into a browser, curl, or chat tool.
New `ensureProtocol()` helper in `clay-uri.ts`:
The displayed text in the row stays clean (no scheme); only the clipboard payload is normalized. The `CopyableUri` tooltip now surfaces the exact URL form so power users can verify before pasting.
Surfaces touched
Tests
6 new `ensureProtocol()` cases covering:
113 → 119 tests passing.
Visual additions
Test plan
Made with Cursor