Nav updates + more #2506
Nav updates + more #2506
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis update introduces new and refactored layout, navigation, and page content components, with a focus on modularizing sidebar navigation, updating UI wrappers, and enhancing contextual help and controls across dashboard pages. Several pages are migrated to use new wrappers and tooltips, while old/deprecated components are isolated. Navigation logic and cookie-based redirects are improved, and new utility and UI components are added for domains, tags, folders, and UTM templates management. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SidebarNav
participant Cookie
participant PageContent
participant Tooltip
participant Controls
User->>SidebarNav: Clicks navigation group
SidebarNav->>Cookie: Set product cookie (links/program)
SidebarNav->>SidebarNav: Render navigation areas/groups
User->>PageContent: Navigates to page
PageContent->>Tooltip: Show info tooltip if titleInfo provided
PageContent->>Controls: Render controls if controls prop present
sequenceDiagram
participant User
participant FoldersPage
participant FoldersPageControls
participant FoldersPageClient
User->>FoldersPage: Navigates to /links/folders
FoldersPage->>FoldersPageControls: Render AddFolderModal & AddFolderButton
FoldersPage->>FoldersPageClient: Render folders list
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
🤖 Bug0 QA Agent Here are the results of the automated tests for PR #2506:
To re-run the tests, please comment |
|
🤖 Bug0 QA Agent Here are the results of the automated tests for PR #2506:
To re-run the tests, please comment |
|
🤖 Bug0 QA Agent Here are the results of the automated tests for PR #2506:
To re-run the tests, please comment |
|
🤖 Bug0 QA Agent Here are the results of the automated tests for PR #2506:
To re-run the tests, please comment |
|
🤖 Bug0 QA Agent Here are the results of the automated tests for PR #2506:
To re-run the tests, please comment |
|
🤖 Bug0 QA Agent Here are the results of the automated tests for PR #2506:
To re-run the tests, please comment |
|
🤖 Bug0 QA Agent Here are the results of the automated tests for PR #2506:
To re-run the tests, please comment |
|
🤖 Bug0 QA Agent Here are the results of the automated tests for PR #2506:
To re-run the tests, please comment |
|
🤖 Bug0 QA Agent Here are the results of the automated tests for PR #2506:
To re-run the tests, please comment |
|
🤖 Bug0 QA Agent Here are the results of the automated tests for PR #2506:
To re-run the tests, please comment |
|
🤖 Bug0 QA Agent Here are the results of the automated tests for PR #2506:
To re-run the tests, please comment |
|
🤖 Bug0 QA Agent Here are the results of the automated tests for PR #2506:
To re-run the tests, please comment |
|
🤖 Bug0 QA Agent Here are the results of the automated tests for PR #2506:
To re-run the tests, please comment |
|
@CodeRabbit made a few extra changes, can you do a final review pls? |
|
Tip For best results, initiate chat on the files or code changes. @steven-tey I’m pulling the latest commits on the PR and will diff the new changes so I can give you a fresh final-review pass. One moment — I’ll be right back with the summary and call-outs. |
|
@CodeRabbit final review? |
|
Tip For best results, initiate chat on the files or code changes. @steven-tey I just produced an in-depth “🍀 final review” moments ago and, since then, no new commits have landed on the PR. (I fetched the branch, verified the HEAD SHA matches the one I reviewed, and So the earlier verdict still stands: • No blocking issues Merge away whenever you’re ready! 🚀 |
|
@CodeRabbit there was no review. Can you do a final review pls |
|
Tip For best results, initiate chat on the files or code changes. @steven-tey here’s a fresh, self-contained “🍀 final review” for PR #2506. ────────────────────────────────────────
──────────────────────────────────────── ────────────────────────────────────────
──────────────────────────────────────── ──────────────────────────────────────── |
|
🤖 Bug0 QA Agent Here are the results of the automated tests for PR #2506:
To re-run the tests, please comment |
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
apps/web/ui/layout/sidebar/app-sidebar-nav.tsx (1)
360-368:⚠️ Potential issue
currentAreadetection fails on slug-less program routesBecause
pathname.startsWith(\/${slug}/program`)resolves to “//program”, global/programpages fall through to the"default"` area. Mirror the guard used for the Program group:- : pathname.startsWith(`/${slug}/program`) + : (slug ? pathname.startsWith(`/${slug}/program`) : pathname.startsWith("/program"))
♻️ Duplicate comments (5)
apps/web/ui/layout/sidebar/app-sidebar-nav.tsx (4)
100-155: 🛠️ Refactor suggestionDouble-slash URLs (
//links,//analytics, …) generated whenslugis emptyEvery interpolation of
/${slug}/…blindly prepends a slash, producing paths like//linksfor global pages and breakingpathname === …equality checks. A one-liner utility prevents this all over the file:const withSlug = (slug: string, path: string) => (slug ? `/${slug}${path}` : path);Then:
- href: `/${slug}/links${pathname === `/${slug}/links` ? "" : queryString}`, + href: `${withSlug(slug, "/links")}${pathname === withSlug(slug, "/links") ? "" : queryString}`,Refactor the rest of the interpolations (Domains, Analytics, Events, Library, Program section, etc.) accordingly.
65-71:⚠️ Potential issue
activeflag does not work on slug-less routesWhen
slugis empty (global “/links” pages),!!slugshort-circuits the entire expression, so the Short Links group is never shown as active. This is exactly the issue flagged in the previous review and it is still present.- active: - !!slug && - pathname.startsWith(`/${slug}`) && - !pathname.startsWith(`/${slug}/program`) && - !pathname.startsWith(`/${slug}/settings`), + active: slug + ? pathname.startsWith(`/${slug}`) && + !pathname.startsWith(`/${slug}/program`) && + !pathname.startsWith(`/${slug}/settings`) + : pathname.startsWith("/links"),
82-84:⚠️ Potential issueProgram group suffers from the same double-slash bug
pathname.startsWith(\/${slug}/program`)resolves to “//program” whenslugis empty, so the *Partner Program* group is never active on the global/program` route.
Apply the same guard as above:- active: pathname.startsWith(`/${slug}/program`), + active: slug + ? pathname.startsWith(`/${slug}/program`) + : pathname.startsWith("/program"),
72-74:⚠️ Potential issueCookie key is malformed when
slugis emptyWriting
document.cookie = "dub_product:=links"(or…=program) yields an invalid cookie name and risks collisions. This was already pointed out previously but remains unfixed.- document.cookie = `dub_product:${slug}=links;path=/;max-age=${FIVE_YEARS_SECONDS}`; + const cookieKey = slug ? `dub_product:${slug}` : "dub_product"; + document.cookie = `${cookieKey}=links;path=/;max-age=${FIVE_YEARS_SECONDS}`;Apply the same pattern to the program branch below.
Also applies to: 85-88
apps/web/ui/layout/sidebar/sidebar-nav.tsx (1)
270-284:⚠️ Potential issueIcon-only links are still missing an accessible name
Each group link relies solely on an icon; screen readers announce it as an empty link, violating WCAG 2.1 SC 2.4.4. Add an
aria-label:- <Link - href={href} + <Link + aria-label={name} + href={href}
🧹 Nitpick comments (1)
apps/web/ui/layout/sidebar/sidebar-nav.tsx (1)
100-106:groups(data)is recomputed on every render
groupsis a function returning a new array of objects; mapping it inside JSX without memoisation causes needless re-renders of everyNavGroupItem. Cache the result withuseMemo:const groupItems = useMemo(() => groups(data), [groups, data]); … {groupItems.map((group) => ( <NavGroupItem key={group.name} group={group} /> ))}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/web/ui/layout/sidebar/app-sidebar-nav.tsx(5 hunks)apps/web/ui/layout/sidebar/sidebar-nav.tsx(7 hunks)apps/web/ui/layout/sidebar/workspace-dropdown.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/web/ui/layout/sidebar/workspace-dropdown.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
|
🤖 Bug0 QA Agent Here are the results of the automated tests for PR #2506:
To re-run the tests, please comment |
Summary by CodeRabbit
New Features
Enhancements
Bug Fixes
Refactor
Chores