Add group permalink feature with copy-to-clipboard support#5
Merged
Conversation
Each group's summary header gains a copy-link button (GroupPermalink)
that copies /#<slug> to the clipboard, mirrors the fragment into the
address bar, and flashes a checkmark as confirmation; preventDefault
keeps the click from toggling the disclosure. The section now carries
id={slug} so the fragment scrolls natively even without JavaScript,
and GroupNav's new hash-jump effect (jumpToLocationHash) expands the
target group's disclosure on load and on hashchange via the existing
jumpToGroup path, so the group's charts hydrate and scroll into view.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PhSqCumFaHEizXJYxRcohi
Signed-off-by: Claude <noreply@anthropic.com>
connortsui20
force-pushed
the
claude/benchmark-group-links-5edmyx
branch
from
48a2084 to
6b49451
Compare
|
Vercel preview for |
Group permalinks now use a human-readable anchor slugified from the group's display name (TPC-H (NVMe) (SF=1) -> #tpc-h-nvme-sf-1) instead of the opaque <prefix>.<base64-json> API slug, which only exists to be machine-decoded by /api/group/[slug] and made for unreadable URLs. The new lib/anchor.ts derives anchors and de-duplicates collisions with numeric suffixes; page.tsx assigns them in render order; the section id, GroupPermalink, and jumpToLocationHash all consume the anchor, with a legacy fallback that still resolves old slug-carrying fragments via the data-group-slug match. A guard keeps fragments naming other element ids (e.g. #group-nav-panel) from being treated as groups. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PhSqCumFaHEizXJYxRcohi Signed-off-by: Claude <noreply@anthropic.com>
Clicking a group in the bottom-left jump menu already expanded and scrolled to the section via jumpToGroup; now it also writes the group's readable anchor into the address bar (replaceState, so no hashchange fires and the hash-jump effect cannot double-scroll), so a menu jump leaves the same shareable URL the header copy-link button produces. The URL is only touched when the jump actually finds its section. GroupNavItem gains the anchor field, threaded from the page's existing groupAnchors pass. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PhSqCumFaHEizXJYxRcohi Signed-off-by: Claude <noreply@anthropic.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
2 participants
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.
Summary
Adds a shareable permalink feature for groups on the landing page. Users can click a copy-link button next to each group's chart count to copy a URL fragment (
/#<slug>) to the clipboard. The fragment enables direct linking to specific groups, with automatic expansion and scrolling on page load.Key Changes
New
GroupPermalinkcomponent (web/components/GroupPermalink.tsx):history.replaceStateto mirror the fragment in the address bar (fallback for environments without Clipboard API)<details>toggle when clicked viapreventDefaultgroupPermalinkUrl()utility for URL construction with percent-encodingEnhanced
GroupNavcomponent (web/components/GroupNav.tsx):jumpToLocationHash()function that expands and scrolls to groups referenced by URL fragmentshashchangeevents to support back/forward navigation and in-page anchor clicksGroupPermalinkUpdated
GroupSectioncomponent (web/components/GroupSection.tsx):id={group.slug}to section element to create stable URL anchorsGroupPermalinkbutton into the group summary headerStyling (
web/app/globals.css):.group-permalinkbutton styles with hover/focus states.visually-hiddenutility class for screen-reader-only status announcementsComprehensive test coverage:
GroupPermalink.test.tsx: URL generation, markup, and click behaviorGroupNav.test.tsx: Hash-jump functionality with encoding/decodingGroupSection.test.tsx: Integration of permalink buttonImplementation Details
jumpToLocationHash()opens the<details>disclosure that the browser cannot do automaticallyreplaceState)https://claude.ai/code/session_01PhSqCumFaHEizXJYxRcohi