style: nimbus design polish

[MohamedH1998]

Summary

Bunch of UI tweaks

Screenshots (optional)

Documentation checklist

• Is there a changelog entry (guidelines)? If you don't add one for something awesome and new (however small) — how will our customers find out? Changelogs are automatically posted to RSS feeds, the Discord, and X.
• The change adheres to the documentation style guide.
• If a larger change - such as adding a new page- an issue has been opened in relation to any incorrect or out of date information that this PR fixes.
• Files which have changed name or location have been allocated redirects.

[cloudflare-docs-bot]

Review

⚠️ 1 warning found in commit 6fe8c99.

Code Review

This code review is in beta and may not always be helpful — use your judgment.

Warnings (1)

File

Issue

src/nimbus/components/cf/ResourcesBySelector.tsx line 257

setSearchParams ignores replace option — setSearchParams from ~/util/url only accepts a URLSearchParams argument; the second argument { replace: true } is silently ignored at runtime. As a result, every search keystroke or facet toggle triggers history.pushState and adds a new browser history entry instead of replacing the current one. Fix: Update src/util/url.ts::setSearchParams to accept an options?: { replace?: boolean } argument and route to history.replaceState when replace is true, or remove { replace: true } if push behavior is intentional.

Conventions

Checks PR title, description, and redirect checklist.

_{No convention issues found.}

Style Guide Review

_{No style-guide issues found.}

Redirects

_{No missing redirect entries found.}

Commands

Only codeowners can run commands. Post a comment with the command to trigger it.

Command	Description
/review	Runs a review now. Incremental if a prior review exists, full if not.
/full-review	Re-reviews the entire PR diff from scratch, ignoring incremental history. Useful after a rebase, when you want a fresh review, or if the bot gets out of sync and reports issues that no longer exist.
/ignore-review-limit	Permanently lifts the 2-review automatic limit for this PR. Future pushes will trigger reviews as normal.
/disable-auto-review	Stops automatic reviews from triggering on future pushes to this PR. Codeowners can still run /review or /full-review manually.

[github-actions]

This pull request requires reviews from CODEOWNERS as it changes files that match the following patterns:

Pattern	Owners
*.ts	@cloudflare/content-engineering, @kodster28
package.json	@cloudflare/content-engineering
*	@cloudflare/product-owners
*.astro	@cloudflare/content-engineering, @kodster28

[ask-bonk]

Review: style: nimbus design polish

Summary of Changes

This PR polishes the Nimbus UI with several coordinated changes across 24 files:

1. Navigation strategy shift: Replaces Astro ClientRouter view transitions with native Astro prefetch (prefetchAll: true, defaultStrategy: "hover") across all layouts. Removes all transition:name="nb-content" attributes and the associated view-transition CSS animations.
2. Package bump: Updates nimbus-docs 0.1.21 → 0.1.22 and pulls in @shikijs/* 4.3.0 → 4.3.1.
3. Component polish:
   • CopyPromptButton now accepts configurable variant and size props instead of hardcoded values.
   • DirectoryListing / DirectoryListingItem now honor external_link frontmatter for stub pages.
   • ResourcesBySelector uses history.replaceState for filter updates (avoids polluting back button) and hides the left filter rail on mobile (hidden md:block).
   • TabBar underline variant gets updated background colors (bg-muted/50, bg-card, hover:bg-muted).
   • Hero removes staggered entrance animations; animation.ts is deleted.
4. Agent setup page refactor: Simplifies the hero to use PageHeader with CopyPromptButton and LinkButton, removing the custom two-column layout and embedded <style> block.
5. TOC performance: Refactors SVG path length calculation in toc.client.ts by accumulating segment lengths incrementally instead of repeatedly measuring the full path (reduces DOM measurement complexity).
6. Theme fix: Corrects AnimatedWorkflowDiagram dark mode selectors from :root[data-theme="dark"] to :root[data-mode="dark"] to match the existing Tailwind custom variant and the rest of the codebase.
7. Prose styling: Adds overflow-wrap: normal for inline code inside table cells.
8. Sidebar tweak: Adds pr-1.5 to collapsible sidebar group labels.

Issues Flagged

All of the following are non-blocking, but should be addressed either here or in a fast-follow:

1. Stale comments / orphaned listeners after ClientRouter removal

src/nimbus/scripts/table-scroll.client.ts (line 10) and src/nimbus/scripts/mermaid.client.ts (lines 4–5, 302–303) still reference the "view-transitions ClientRouter" in comments and attach listeners to astro:page-load. Without ClientRouter, this event never fires on prefetch navigations. Because Astro prefetch performs full page loads, the scripts re-run anyway, so behavior is correct — but the comments and listeners are misleading. Consider updating or removing them.

2. Dead code: PromptCopyBlock.astro is now orphaned

The component at src/nimbus/components/agent-setup/PromptCopyBlock.astro was replaced by CopyPromptButton in the agent-setup page and is no longer imported anywhere in the Nimbus tree. It can be deleted in this PR or a follow-up.

3. Inconsistent data-theme vs data-mode in other diagram components

AnimatedWorkflowDiagram was correctly migrated to data-mode, but the following files still use data-theme="dark":

• src/nimbus/components/cf/R2LocalUploadsDiagram.astro
• src/nimbus/components/cf/AutoconfigDiagram.astro
• src/nimbus/components/ai-gateway/code-examples.astro

If the live theme system uses data-mode (as the Tailwind custom variant and globals.css indicate), those components likely have broken dark-mode styling. Worth auditing separately.

4. Lockfile noise from tarball: fields

The pnpm-lock.yaml diff adds tarball: https://registry.npmjs.org/... annotations to several @cloudflare/workerd-* packages without changing their versions. This appears to be unrelated noise from the lockfile regeneration. Consider reverting those lines to keep the diff focused on the actual dependency changes.

5. PR description understates the change

"Bunch of UI tweaks" is accurate but undersells the architectural shift (view transitions → hover prefetch), the external_link behavior change, and the package bump. A short paragraph covering the major themes would help reviewers and future readers.

Verdict

Changes look correct and well-scoped. The prefetch migration is a sensible simplification, and the external_link + mobile filter fixes are welcome UX improvements. Please consider the cleanup items above.

[ask-bonk]

I've completed the review for PR #31891.

What I did

Labels applied: docs engine, engineering (in addition to the existing size/m).

Review posted as a COMMENT review with a detailed summary and flagged issues.

PR Summary

This PR is a well-scoped Nimbus UI polish that:

1. Switches navigation model — removes Astro <ClientRouter> view transitions and replaces them with native prefetch-on-hover (prefetchAll: true).
2. Bumps dependencies — nimbus-docs 0.1.21 → 0.1.22, plus @shikijs/* patch updates.
3. Fixes external_link handling in DirectoryListing components so stub pages link to their real targets.
4. Refactors the Agent Setup page — simplifies the hero to use shared PageHeader / CopyPromptButton / LinkButton components, dropping a lot of custom markup and styles.
5. Improves TOC SVG performance by incrementally measuring path segments instead of repeatedly measuring the full path.
6. Fixes dark mode selectors in AnimatedWorkflowDiagram (data-theme → data-mode to match the rest of the codebase).
7. Various micro-polish: mobile filter rail visibility, TabBar colors, prose table overflow-wrap, collapsible sidebar padding, etc.

Issues flagged (non-blocking)

1. Stale astro:page-load listeners in table-scroll.client.ts and mermaid.client.ts — the comments and event listeners reference the now-removed ClientRouter and will mislead future maintainers.
2. Dead code — src/nimbus/components/agent-setup/PromptCopyBlock.astro is no longer imported anywhere.
3. Inconsistent theme attribute — R2LocalUploadsDiagram, AutoconfigDiagram, and ai-gateway/code-examples.astro still use data-theme="dark", which may be broken since the system uses data-mode.
4. Lockfile noise — unrelated tarball: URL additions in pnpm-lock.yaml for @cloudflare/workerd-* packages.
5. Vague PR description — "Bunch of UI tweaks" understates the architectural shift from view transitions to prefetch.

No blocking issues were found; the diff is clean and the changes are coherent.

github run

[github-actions]

Preview URL: https://6fe8c993.preview.developers.cloudflare.com
Preview Branch URL: https://style-nimbus-design-polish.preview.developers.cloudflare.com