Restyle the toolbar in CR and revision preview links #3631

viktorrenkema · 2025-09-08T14:19:53Z

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 · 2025-09-08T14:19:57Z

RND-7946 Improve look and feel of preview pill

changeset-bot · 2025-09-08T14:19:57Z

⚠️ No Changeset found

Latest commit: dbaaf35

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 · 2025-09-08T14:23:40Z

Summary of the deployments:

Version	URL	Status
Vercel	https://gitbook-v2-d8oslohgp-gitbook.vercel.app	✅
Cloudflare	https://3f377bda-gitbook-open-v2-preview.gitbook.workers.dev	✅

Test content

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

argos-ci · 2025-09-08T14:25:53Z

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

Build	Status	Details	Updated (UTC)
customers-v2 (Inspect)	⚠️ Changes detected (Review)	3 changed	Sep 12, 2025, 8:04 AM
v2-cloudflare (Inspect)	⚠️ Changes detected (Review)	5 changed	Sep 12, 2025, 8:07 AM
v2-vercel (Inspect)	⚠️ Changes detected (Review)	5 changed	Sep 12, 2025, 8:06 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.}

Copilot · 2025-09-12T06:36:53Z

packages/gitbook/src/components/AdminToolbar/useMagnificationEffect.ts

+        const container = containerRef.current;
+        if (!container) return;
+
+        const buttons = Array.from(container.querySelectorAll('#toolbar-button')) as HTMLElement[];


Using ID selectors for querying multiple elements violates HTML standards where IDs should be unique. Consider using a class selector like '.toolbar-button' instead of '#toolbar-button' to avoid potential conflicts and improve maintainability.

Copilot · 2025-09-12T06:36:54Z

packages/gitbook/src/components/AdminToolbar/useMagnificationEffect.ts

+            const buttons = Array.from(
+                container.querySelectorAll('#toolbar-button')
+            ) as HTMLElement[];


Duplicate use of the same problematic ID selector. This query is repeated from line 133, suggesting the need for a consistent approach using class selectors instead.

Copilot · 2025-09-12T06:36:54Z

packages/gitbook/src/components/AdminToolbar/Toolbar.tsx

+                <motion.a
+                    href={href}
+                    onClick={onClick}
+                    id="toolbar-button"


Using the same ID 'toolbar-button' on multiple elements violates HTML standards. IDs must be unique within a document. Use a class name instead, such as 'className="toolbar-button"'.

Copilot · 2025-09-12T06:36:54Z

packages/gitbook/src/components/AdminToolbar/AnimatedLogo.module.css

+@keyframes traceFill {
+  0% {
+    fill: transparent;
+    stroke:#46474c;


The hardcoded color value #46474c is used multiple times without being defined as a CSS custom property. Consider defining it as a variable like '--trace-stroke-color: #46474c;' for better maintainability.

Copilot · 2025-09-12T06:36:54Z

packages/gitbook/src/components/AdminToolbar/AnimatedLogo.module.css

+  }
+  95% {
+    fill: transparent;
+    stroke:#46474c;


The hardcoded color value #46474c is used multiple times without being defined as a CSS custom property. Consider defining it as a variable like '--trace-stroke-color: #46474c;' for better maintainability.

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

conico974 · 2025-09-12T06:44:01Z

packages/gitbook/src/components/AdminToolbar/AdminToolbar.tsx


-    if (!changeRequest) {
-        return null;
+        return <AdminToolbarClient context={serializableContext} />;


This can get very big, we should restrict what gets serialized as much as possible here.
On gitbook it doubles the size of the html and rsc (and we're not even the one with the biggest ones out there)

Thanks for flagging! I reduced it to just the fields we need here, lmk if you feel better about that: dbaaf35

gregberge · 2025-09-12T06:37:25Z

packages/gitbook/src/components/AdminToolbar/AdminToolbarClient.tsx

+function ChangeRequestToolbar(props: AdminToolbarClientProps) {
+    const { context } = props;
+    const { space, changeRequest, site } = context;
+    const reduceMotion = Boolean(useReducedMotion());


I don't think we need that, it can be automatic? https://motion.dev/docs/react-accessibility#automatic

packages/gitbook/src/components/AdminToolbar/AdminToolbarClient.tsx

gregberge · 2025-09-12T06:38:48Z

packages/gitbook/src/components/AdminToolbar/AdminToolbarClient.tsx

+                    changeRequestId={changeRequest.id}
+                    revisionId={changeRequest.revision}
+                    updatedAt={new Date(changeRequest.updatedAt).getTime()}
+                    key="refresh-button"


Why do you need a key?

gregberge · 2025-09-12T06:38:52Z

packages/gitbook/src/components/AdminToolbar/AdminToolbarClient.tsx

+                <ToolbarButton
+                    title="Comment in app"
+                    href={`${changeRequest.urls.app}~/comments`}
+                    key="comment-button"


Why do you need a key?

gregberge · 2025-09-12T06:43:43Z

packages/gitbook/src/components/AdminToolbar/Toolbar.tsx

+    const [minified, setMinified] = React.useState(true);
+    const [showToolbarControls, setShowToolbarControls] = React.useState(false);
+    const [isReady, setIsReady] = React.useState(false);
+    const reduceMotion = Boolean(useReducedMotion());


Same is it really needed with the automatic mode?

gregberge · 2025-09-12T06:45:02Z

packages/gitbook/src/components/AdminToolbar/Toolbar.tsx

+            // Small delay to ensure everything is settled
+            setTimeout(() => {
+                setIsReady(true);
+            }, 100);


This is arbitrary, what do you mean here? It probably depends of your CPU so you are delaying users with good machine and doing it too early for users with bad machines. Not sure that's a good strategy to wait an arbitrary time like this. Bad smell.

Also you need to get the timeout and clear it in the useEffect.

gregberge · 2025-09-12T06:45:51Z

packages/gitbook/src/components/AdminToolbar/Toolbar.tsx

+    // After toolbar appears, wait then show the full content
+    React.useEffect(() => {
+        if (isReady) {
+            setTimeout(() => {


Same here you need to clear the timeout in the cleanup func.

gregberge · 2025-09-12T06:46:58Z

packages/gitbook/src/components/AdminToolbar/Toolbar.tsx

+                    }}
+                >
+                    {/* Logo with stroke segments animation in blue-tints */}
+                    <motion.div key="logo" layout={!reduceMotion}>


packages/gitbook/src/components/AdminToolbar/Toolbar.tsx

viktorrenkema deployed to 2v-preview September 8, 2025 14:19 — with GitHub Actions View deployment

viktorrenkema deployed to 2c-preview September 8, 2025 14:19 — with GitHub Actions View deployment

gregberge requested a review from Copilot September 12, 2025 06:35

Copilot AI reviewed Sep 12, 2025

View reviewed changes

conico974 reviewed Sep 12, 2025

View reviewed changes

gregberge approved these changes Sep 12, 2025

View reviewed changes

viktorrenkema added 2 commits September 12, 2025 09:49

Restyle cr/revision preview toolbar

974b246

Restrict serialized fields

dbaaf35

viktorrenkema force-pushed the viktor/rnd-7946-improve-look-and-feel-of-preview-pill branch from 6ca6239 to dbaaf35 Compare September 12, 2025 07:57

viktorrenkema deployed to 2v-preview September 12, 2025 07:57 — with GitHub Actions View deployment

viktorrenkema deployed to 2c-preview September 12, 2025 07:57 — with GitHub Actions View deployment

Restyle the toolbar in CR and revision preview links #3631

Are you sure you want to change the base?

Restyle the toolbar in CR and revision preview links #3631

Uh oh!

Conversation

viktorrenkema commented Sep 8, 2025

Details

Preview

Uh oh!

linear bot commented Sep 8, 2025

Uh oh!

changeset-bot bot commented Sep 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Sep 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test content

Uh oh!

argos-ci bot commented Sep 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

conico974 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

changeset-bot bot commented Sep 8, 2025 •

edited

Loading

github-actions bot commented Sep 8, 2025 •

edited

Loading

argos-ci bot commented Sep 8, 2025 •

edited

Loading