🍕 feat(panel): copy-to-clipboard buttons next to page + component URIs#9
Merged
Conversation
The page URI and component URI lines were read-only text — to copy them you had to either select-with-mouse or dive into the "Copy as…" menu. Adds a small copy-icon button anchored on the right of each URI row so the most common action is one click away. Behavior - Page section: button copies `page.pageUri` (the value already shown). - Component section: the displayed text stays as the short instance id (e.g. "stories-readers-like") for at-a-glance recognition, but the copy action yields the *full* component URI — what you actually paste into Clay tooling. The full URI surfaces in the button's tooltip on hover so it's still discoverable without copying. UX details - Button is muted at rest (opacity 0.55) so it doesn't compete with the URI text; brightens to full opacity on row-hover or keyboard focus. Standard discoverable-but-quiet affordance pattern. - Reuses the existing .cs-icon-btn + Icon "copy" + copyToClipboard + pushToast plumbing — no new visual vocabulary introduced. - Toast on success/failure matches the existing "Copy as → URI" path. A new tiny CopyableUri component centralizes the row layout + copy/toast logic so the same affordance can be reused on other URI-like fields (canonical in the SEO tab, share links, etc.) without duplication. 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
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.
Why
The page URI and component URI lines on the Inspect tab were read-only text. To copy them you had to either select-with-mouse or dive into the Copy as… disclosure. This puts the most common URI action one click away on the same row.
What
A small copy-icon button anchored on the right of each URI row.
The asymmetry on the component row is deliberate: the short instance id (`stories-readers-like`) is what you scan for at a glance, but the full URI is what you paste into Clay tooling, fetch URLs, etc. The full URI surfaces in the button's hover tooltip so it's still discoverable without having to copy.
UX details
Test plan
Files
Note on the broader UI cleanup
This PR is focused on the copy buttons only. The other UI consistency observations from the discussion (button-style standardization, button-row grouping, header decluttering, JSON wrap behavior, focus-visible polish) deserve their own scoped PR and aren't bundled here.
Made with Cursor