Restyle the toolbar in CR and revision preview links

[viktorrenkema]

Details

This PR updates the styles a bit and adds some more functionality to the toolbar displayed on CR and revision preview links.

Will likely be iterated on design-wise, but that can come later. Also, it is not yet draggable, but that is also the intent for a follow-up PR.

Preview

Change-request preview link:

CleanShot.2025-09-08.at.15.25.22.mp4

Revision preview link:

Dark mode:

[linear]

RND-7946 Improve look and feel of preview pill

[changeset-bot]

⚠️ No Changeset found

Latest commit: fd04580

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Summary of the deployments:

Version	URL	Status
Vercel	https://gitbook-v2-f5zrvkmu8-gitbook.vercel.app	✅
Cloudflare	https://afeee630-gitbook-open-v2-preview.gitbook.workers.dev	✅

Test content

Site	2v	2c
GitBook	https://gitbook-v2-f5zrvkmu8-gitbook.vercel.app/url/gitbook.com/docs	https://afeee630-gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs
E2E	https://gitbook-v2-f5zrvkmu8-gitbook.vercel.app/url/gitbook.gitbook.io/test-gitbook-open	https://afeee630-gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.gitbook.io/test-gitbook-open

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
customers-v2 (Inspect)	👍 Changes approved	3 changed	Sep 15, 2025, 6:25 AM
v2-cloudflare (Inspect)	👍 Changes approved	4 changed	Sep 15, 2025, 6:28 AM
v2-vercel (Inspect)	👍 Changes approved	5 changed	Sep 15, 2025, 6:27 AM

[Copilot]

Pull Request Overview

This PR completely overhauls the admin toolbar displayed on change request (CR) and revision preview links with an enhanced visual design, animations, and improved functionality. The toolbar now features an animated GitBook logo, interactive magnification effects, and better responsive behavior.

• Replaces the simple static toolbar with an animated, interactive version featuring a prominently displayed GitBook logo
• Adds comprehensive animation system using framer-motion for smooth transitions, staggered appearances, and hover effects
• Implements a sophisticated magnification effect for toolbar buttons that scales and repositions them based on mouse proximity

Reviewed Changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
DateRelative.tsx	Wraps the time element with a Tooltip component to improve UX
useMagnificationEffect.ts	New custom hook implementing Mac-style dock magnification for toolbar buttons
transitions.ts	Defines animation configurations and timing for toolbar elements
index.ts	Updates exports to include new toolbar components
Toolbar.tsx	Complete rewrite of toolbar components with animations and interactive features
RefreshChangeRequestButton.tsx	Updates button to use new toolbar design system with motion values
AnimatedLogo.tsx	New component for the animated GitBook logo with SVG path animation
AnimatedLogo.module.css	CSS animations for the logo's segmented stroke effect
AdminToolbarClient.tsx	New client component handling toolbar rendering logic
AdminToolbar.tsx	Simplified server component that passes data to client component
package.json	Adds motion library dependency for animations

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[conico974]

It looks very good, but the size of the serialized context is an issue IMO.
I've noticed another issue when I use the system theme (in dark mode), it gets confused :

It might be a linux thing