chore: fix active active page in router #2762

NathanFlurry · 2025-07-16T03:23:27Z

Changes

Summary by CodeRabbit

New Features
- Improved consistency in detecting active navigation links and sidebar items by normalizing URL paths, ensuring more reliable highlighting of the current page.
Bug Fixes
- Resolved issues where navigation or sidebar items might not appear active due to minor differences in URL formatting.

vercel · 2025-07-16T03:23:31Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
rivet-site	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 16, 2025 3:29am

coderabbitai · 2025-07-16T03:23:33Z

Walkthrough

A new utility function, normalizePath, is introduced to standardize URL path comparisons throughout navigation components. Existing logic in sidebar, navigation, and link components is updated to use this normalization, ensuring consistent active state detection regardless of path formatting variations. No public API signatures are changed.

Changes

File(s)	Change Summary
site/src/lib/normalizePath.ts	Added new `normalizePath` utility to standardize path formatting with trailing slashes.
site/src/components/ActiveLink.tsx	Updated active link logic to use `normalizePath` for comparisons.
site/src/components/CollapsibleSidebarItem.tsx	Updated sidebar item active state logic to use `normalizePath` for comparisons.
site/src/components/Navigation.jsx	Updated navigation group logic to use `normalizePath` for active link and marker detection.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant NavigationComponent
    participant normalizePath

    User->>NavigationComponent: Navigates to a page
    NavigationComponent->>normalizePath: Normalize current pathname
    NavigationComponent->>normalizePath: Normalize link/page href
    normalizePath-->>NavigationComponent: Normalized paths
    NavigationComponent->>NavigationComponent: Compare normalized paths
    NavigationComponent-->>User: Render active state if match

Poem

A path is a path, or so it once seemed,
But slashes and endings were not what they dreamed.
Now with a normalize, our routes are aligned,
No matter the format, the match you will find.
Hop along, little links, your journey is neat—
With slashes in place, our nav is complete!
🐇✨

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2122969 and 1092015.

📒 Files selected for processing (4)

site/src/components/ActiveLink.tsx (2 hunks)
site/src/components/CollapsibleSidebarItem.tsx (2 hunks)
site/src/components/Navigation.jsx (2 hunks)
site/src/lib/normalizePath.ts (1 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (2)

site/src/components/ActiveLink.tsx (2)

site/src/lib/normalizePath.ts (1)

normalizePath (8-11)

site/src/components/Navigation.jsx (1)

pathname (55-55)

site/src/components/CollapsibleSidebarItem.tsx (1)

site/src/lib/normalizePath.ts (1)

normalizePath (8-11)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: cargo-check-main
GitHub Check: claude-review

🔇 Additional comments (8)

site/src/lib/normalizePath.ts (1)

1-11: LGTM! Well-designed utility function.

The implementation correctly handles path normalization by ensuring trailing slashes while preserving the root path. The JSDoc documentation is clear and the logic is straightforward and efficient.

site/src/components/ActiveLink.tsx (2)

5-5: Good addition of the normalizePath import.

This import enables consistent path comparison throughout the component.

18-18: Excellent fix for active state detection.

Normalizing both the current pathname and the link's href before comparison ensures that paths like "/docs" and "/docs/" are treated as equivalent, fixing the active page detection issue.

site/src/components/CollapsibleSidebarItem.tsx (2)

9-9: Consistent import addition.

Adding the normalizePath import aligns with the pattern across navigation components.

90-90: Proper normalization in active item detection.

Normalizing both page.href and href before comparison ensures consistent active state detection in the sidebar, preventing issues where items with different trailing slash formats aren't properly matched.

site/src/components/Navigation.jsx (3)

13-13: Consistent import pattern maintained.

The normalizePath import follows the established pattern across all navigation-related components.

79-79: Proper normalization for ActiveSectionMarker.

Normalizing both paths ensures the active section marker is displayed correctly regardless of trailing slash differences.

84-84: Consistent active state detection.

Normalizing paths before comparison ensures navigation links are correctly marked as active, completing the fix for the router active page detection issue.

✨ Finishing Touches

📝 Generate Docstrings

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

NathanFlurry · 2025-07-16T03:23:43Z

How to use the Graphite Merge Queue

Add the label merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has enabled the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

claude · 2025-07-16T03:23:43Z

Claude finished @NathanFlurry's task —— View job

Pull Request Review ✅

Todo List:

Read and analyze all changed files
Understand the purpose of the changes
Review code quality and best practices
Check for potential bugs or issues
Evaluate performance considerations
Assess security concerns
Review test coverage
Provide comprehensive feedback

Purpose of Changes:
The PR introduces a normalizePath utility function that ensures consistent path formatting by adding trailing slashes to all paths except the root "/". This fixes issues where paths like "/docs" and "/docs/" were being treated as different, causing problems with active page detection in navigation components.

Review Feedback

✅ Code Quality and Best Practices

Well-structured solution: The normalizePath utility is properly extracted into a separate module for reusability
Consistent usage: Applied correctly across all three navigation components (ActiveLink.tsx, CollapsibleSidebarItem.tsx, Navigation.jsx)
Good documentation: The function includes clear JSDoc comments explaining its purpose and parameters
Type safety: Proper TypeScript typing with clear function signature

⚠️ Potential Issues

Mixed file extensions: Navigation.jsx uses JSX while other components use TSX. Consider converting to TSX for consistency
Path comparison logic: The normalization approach assumes trailing slashes are the desired standard, but this should be documented as a project convention
Edge cases: Consider how this handles query parameters and fragments (e.g., /docs?tab=api#section)

✅ Performance Considerations

Minimal impact: The normalizePath function is very lightweight with simple string operations
Efficient implementation: Uses endsWith() and template literals, which are performant
No unnecessary re-renders: Applied at the right level in components without causing cascading updates

✅ Security Concerns

No security risks: Simple string manipulation without any user input sanitization concerns
XSS safe: No dynamic HTML generation or unsafe string interpolation

⚠️ Test Coverage

Missing tests: No test file found for the new normalizePath function
Recommendation: Add unit tests covering:
- Root path handling: normalizePath("/") → "/"
- Path without trailing slash: normalizePath("/docs") → "/docs/"
- Path with trailing slash: normalizePath("/docs/") → "/docs/"
- Edge cases: empty strings, paths with query params

🔧 Suggested Improvements

Add unit tests for normalizePath function
Convert Navigation.jsx to Navigation.tsx for consistency
Consider edge case handling for query parameters and fragments
Document the trailing slash convention in project documentation

Overall Assessment

This is a clean, focused fix that addresses the active page detection issue effectively. The solution is well-implemented with proper separation of concerns. The main areas for improvement are adding test coverage and handling edge cases.

Recommendation: ✅ Approve with minor suggestions

cloudflare-workers-and-pages · 2025-07-16T03:25:04Z

Deploying rivet-studio with Cloudflare Pages

Latest commit:	`1092015`
Status:	🚫 Build failed.

View logs

cloudflare-workers-and-pages · 2025-07-16T03:25:06Z

Deploying rivet-hub with Cloudflare Pages

Latest commit:	`1092015`
Status:	🚫 Build failed.

View logs

cloudflare-workers-and-pages · 2025-07-16T03:25:20Z

Deploying rivet with Cloudflare Pages

Latest commit:	`1092015`
Status:	🚫 Build failed.

View logs

graphite-app · 2025-07-16T05:15:57Z

Merge activity

Jul 16, 5:15 AM UTC: NathanFlurry added this pull request to the Graphite merge queue.
Jul 16, 5:17 AM UTC: CI is running for this pull request on a draft pull request (#2765) due to your merge queue CI optimization settings.
Jul 16, 5:17 AM UTC: Merged by the Graphite merge queue via draft PR: #2765.

## Changes   ## Summary by CodeRabbit * **New Features** * Improved consistency in detecting active navigation links and sidebar items by normalizing URL paths, ensuring more reliable highlighting of the current page. * **Bug Fixes** * Resolved issues where navigation or sidebar items might not appear active due to minor differences in URL formatting.

chore: fix active active page in router

1092015

NathanFlurry mentioned this pull request Jul 16, 2025

chore: add copy as markdown, preserve sidebar dropdown state, landing page tweaks #2763

Closed

coderabbitai bot approved these changes Jul 16, 2025

View reviewed changes

vercel bot deployed to Preview July 16, 2025 03:29 View deployment

NathanFlurry mentioned this pull request Jul 16, 2025

chore: add typesense search #2764

Closed

graphite-app bot closed this Jul 16, 2025

graphite-app bot deleted the 07-15-chore_fix_active_active_page_in_router branch July 16, 2025 05:17

github-actions bot mentioned this pull request Jul 16, 2025

chore(main): release 25.6.0 #2746

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: fix active active page in router #2762

chore: fix active active page in router #2762

Uh oh!

NathanFlurry commented Jul 16, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Jul 16, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Jul 16, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

NathanFlurry commented Jul 16, 2025 •

edited

Loading

Uh oh!

claude bot commented Jul 16, 2025 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages bot commented Jul 16, 2025

Uh oh!

cloudflare-workers-and-pages bot commented Jul 16, 2025

Uh oh!

cloudflare-workers-and-pages bot commented Jul 16, 2025

Uh oh!

graphite-app bot commented Jul 16, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

chore: fix active active page in router #2762

chore: fix active active page in router #2762

Uh oh!

Conversation

NathanFlurry commented Jul 16, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Summary by CodeRabbit

Uh oh!

vercel bot commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

NathanFlurry commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

claude bot commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Review ✅

Review Feedback

✅ Code Quality and Best Practices

⚠️ Potential Issues

✅ Performance Considerations

✅ Security Concerns

⚠️ Test Coverage

🔧 Suggested Improvements

Overall Assessment

Uh oh!

cloudflare-workers-and-pages bot commented Jul 16, 2025

Deploying rivet-studio with Cloudflare Pages

Uh oh!

cloudflare-workers-and-pages bot commented Jul 16, 2025

Deploying rivet-hub with Cloudflare Pages

Uh oh!

cloudflare-workers-and-pages bot commented Jul 16, 2025

Deploying rivet with Cloudflare Pages

Uh oh!

graphite-app bot commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

NathanFlurry commented Jul 16, 2025 •

edited by coderabbitai bot

Loading

vercel bot commented Jul 16, 2025 •

edited

Loading

coderabbitai bot commented Jul 16, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

NathanFlurry commented Jul 16, 2025 •

edited

Loading

claude bot commented Jul 16, 2025 •

edited

Loading

graphite-app bot commented Jul 16, 2025 •

edited

Loading