Skip to content

🍕 feat(copy): inline 'Copied' feedback + always-https URLs#12

Merged
jjpaulino merged 1 commit into
masterfrom
feat/copy-feedback-and-protocol
May 13, 2026
Merged

🍕 feat(copy): inline 'Copied' feedback + always-https URLs#12
jjpaulino merged 1 commit into
masterfrom
feat/copy-feedback-and-protocol

Conversation

@jjpaulino
Copy link
Copy Markdown
Member

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.

```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`:

  • Prepends `https://` when no scheme is present.
  • Preserves an existing `http://` to avoid silently upgrading `http://localhost:3001\` dev servers.
  • Collapses leading `//` for protocol-relative inputs.
  • Returns empty string for nullish / whitespace-only input.

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

Surface Inline feedback Protocol normalization
CopyableUri (Page URI / Component URI rows) icon swap + green tint yes
ComponentDetails Copy as… row per-button keyed URI button: yes; cURL/fetch/CSS already used `buildUrl`
JsonPreview header copy icon swap n/a (copies JSON)
SeoTab JSON-LD card copy per-card icon swap n/a (copies JSON)
ExportMenu inline + menu held 900ms before auto-close n/a
ShareMenu (main + cross-env) per-button keyed; menu held 900ms n/a (uses `buildShareLink` over `location.href`)
Keyboard shortcuts yp / yc n/a (toast only) yes

Tests

6 new `ensureProtocol()` cases covering:

  • Bare URI → prepends `https://`
  • Existing `https://` preserved
  • Existing `http://` preserved (no silent upgrade)
  • Protocol-relative `//host` → `https://host\`
  • Nullish / whitespace input → empty string
  • Surrounding whitespace trimmed

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.

Test plan

  • `npm run validate` (typecheck + lint + format + 119 tests)
  • `npm run build` clean
  • Click Copy URI on a component → button icon flips to a green checkmark, toast says "Component URI copied", paste reveals `https://...` (not bare host)
  • Same for the Page URI row
  • Copy as → cURL / fetch / CSS / URI — only the clicked button flashes "Copied"
  • Export menu → click Copy as JSON → item turns green and reads "Copied" for ~900ms, then menu collapses
  • Share menu (with site-host mappings configured) → cross-env item shows "Copied" before menu collapses; main Share button shows inline "Copied" too
  • JSON tab header copy icon → swaps to checkmark
  • SEO tab → expand a JSON-LD card → copy icon → swaps to checkmark; card stays open
  • Press yp / yc → clipboard payload starts with `https://`

Made with Cursor

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>
@jjpaulino jjpaulino merged commit 2d05f9b into master May 13, 2026
1 check passed
@jjpaulino jjpaulino deleted the feat/copy-feedback-and-protocol branch May 13, 2026 23:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant