Playground: Improved sidebar search params suspense fallback, Fix ConnectEmbed width on mobile #7784
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Contributor
WalkthroughThe changes update several UI components in the playground web app to improve layout and styling, particularly for embedded wallet connect components and sidebar navigation. The sidebar system is refactored to pass the current path explicitly via props rather than through an internal hook, centralizing path resolution logic using a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant FullPathSuspense
participant WithFullPath
participant useFullPath
participant SidebarComponent
User->>FullPathSuspense: Render component with render callback
FullPathSuspense->>WithFullPath: Render inside Suspense boundary
WithFullPath->>useFullPath: Get full path (pathname + search)
useFullPath-->>WithFullPath: Return fullPath
WithFullPath->>SidebarComponent: Call render(fullPath)
SidebarComponent-->>User: Rendered sidebar/navigation with fullPath
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (7)
🚧 Files skipped from review as they are similar to previous changes (6)
🧰 Additional context used📓 Path-based instructions (3)**/*.{ts,tsx}📄 CodeRabbit Inference Engine (CLAUDE.md)
Files:
**/*.{ts,tsx,js,jsx}📄 CodeRabbit Inference Engine (CLAUDE.md)
Files:
apps/{dashboard,playground-web}/**/*.{ts,tsx}📄 CodeRabbit Inference Engine (CLAUDE.md)
Files:
🧠 Learnings (15)📓 Common learnings📚 Learning: surface breaking changes prominently in pr descriptions...Applied to files:
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : spacing utilities (`px-*`, `py-*`, `gap-*`) are preferred over...Applied to files:
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : use the `container` class with a `max-w-7xl` cap for page widt...Applied to files:
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{tsx} : expose `classname` prop on root element of c...Applied to files:
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use tailwind css only – no inline styles ...Applied to files:
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : stick to design-tokens: background (`bg-card`), borders (`bord...Applied to files:
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : add `classname` to the root element of every component for ext...Applied to files:
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : layouts should reuse `sidebarlayout` / `fullwidthsidebarlayout...Applied to files:
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use design system tokens (e.g., `bg-card`...Applied to files:
📚 Learning: applies to dashboard/**/layout.tsx : building layout shells (`layout.tsx`) and top-level pages that ...Applied to files:
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : for notices & skeletons rely on `announcementbanner`, `generic...Applied to files:
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : responsive helpers follow mobile-first (`max-sm`, `md`, `lg`, ...Applied to files:
📚 Learning: the spinner component imported from "@/components/ui/spinner/spinner" in the dashboard accepts a cla...Applied to files:
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : accept a typed `props` object and export a named function (`ex...Applied to files:
⏰ 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). (7)
🔇 Additional comments (2)
✨ Finishing Touches
🧪 Generate unit tests
🪧 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 (
|
github-actions
bot
added
Dashboard
Member
Author
How to use the Graphite Merge QueueAdd either label to this PR to merge it via 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. |
MananTank
changed the title
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7784 +/- ##
=======================================
Coverage 56.34% 56.34%
=======================================
Files 905 905
Lines 58788 58788
Branches 4142 4142
=======================================
Hits 33122 33122
Misses 25561 25561
Partials 105 105
🚀 New features to boost your workflow:
|
joaquim-verges
approved these changes
Aug 2, 2025
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/playground-web/src/components/blocks/full-path-suspence.tsx (1)
1-24: Consider fixing the filename typo.The filename contains a typo: "suspence" should be "suspense". Consider renaming the file to
full-path-suspense.tsxfor correct spelling.apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx (1)
34-34: Fix typo in import pathThe import path contains a typo: "suspence" should be "suspense".
-import { FullPathSuspense } from "./full-path-suspence"; +import { FullPathSuspense } from "./full-path-suspense";Note: You'll also need to rename the actual file from
full-path-suspence.tsxtofull-path-suspense.tsx.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
apps/dashboard/src/@/components/ui/NavLink.tsx(1 hunks)apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx(2 hunks)apps/playground-web/src/app/wallets/sign-in/embed/page.tsx(1 hunks)apps/playground-web/src/components/blocks/APIHeader.tsx(1 hunks)apps/playground-web/src/components/blocks/full-path-suspence.tsx(1 hunks)apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx(15 hunks)apps/playground-web/src/components/styled-connect-embed.tsx(1 hunks)apps/playground-web/src/components/ui/NavLink.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Files:
apps/playground-web/src/components/styled-connect-embed.tsxapps/playground-web/src/app/wallets/sign-in/embed/page.tsxapps/playground-web/src/app/wallets/sign-in/button/RightSection.tsxapps/playground-web/src/components/blocks/APIHeader.tsxapps/playground-web/src/components/blocks/full-path-suspence.tsxapps/dashboard/src/@/components/ui/NavLink.tsxapps/playground-web/src/components/ui/NavLink.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/playground-web/src/components/styled-connect-embed.tsxapps/playground-web/src/app/wallets/sign-in/embed/page.tsxapps/playground-web/src/app/wallets/sign-in/button/RightSection.tsxapps/playground-web/src/components/blocks/APIHeader.tsxapps/playground-web/src/components/blocks/full-path-suspence.tsxapps/dashboard/src/@/components/ui/NavLink.tsxapps/playground-web/src/components/ui/NavLink.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/playground-web/src/components/styled-connect-embed.tsxapps/playground-web/src/app/wallets/sign-in/embed/page.tsxapps/playground-web/src/app/wallets/sign-in/button/RightSection.tsxapps/playground-web/src/components/blocks/APIHeader.tsxapps/playground-web/src/components/blocks/full-path-suspence.tsxapps/dashboard/src/@/components/ui/NavLink.tsxapps/playground-web/src/components/ui/NavLink.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
🧠 Learnings (49)
📓 Common learnings
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Surface breaking changes prominently in PR descriptions
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Layouts should reuse `SidebarLayout` / `FullWidthSidebarLayout` (`@/components/blocks/SidebarLayout`).
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx} : Expose `className` prop on root element of components for overrides
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Wrap client-side data fetching calls in React Query (`@tanstack/react-query`)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use descriptive, stable `queryKeys` for React Query cache hits
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/layout.tsx : Building layout shells (`layout.tsx`) and top-level pages that mainly assemble data.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{ts,tsx} : Redirect logic using `redirect()` from `next/navigation`.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Keep components pure; fetch data outside (server component or hook) and pass it down via props.
Learnt from: jnsdls
PR: thirdweb-dev/js#7365
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx:16-17
Timestamp: 2025-06-18T04:27:16.172Z
Learning: Next.js Link component supports external URLs without throwing errors. When used with absolute URLs (like https://...), it behaves like a regular anchor tag without client-side routing, but does not cause runtime crashes or errors as previously believed.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Pages requiring fast transitions where data is prefetched on the client.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Local state or effects live inside; data fetching happens in hooks.
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/shared-settings-page.tsx:29-39
Timestamp: 2025-05-27T20:10:47.245Z
Learning: MananTank prefers adding error handling (try-catch) directly inside utility functions like `shouldRenderNewPublicPage` rather than requiring callers to wrap the function calls in try-catch blocks. This centralizes error handling and benefits all callers automatically.
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : use the `container` class with a `max-w-7xl` cap for page widt...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Use the `container` class with a `max-w-7xl` cap for page width consistency.
Applied to files:
apps/playground-web/src/components/styled-connect-embed.tsxapps/playground-web/src/app/wallets/sign-in/embed/page.tsxapps/playground-web/src/app/wallets/sign-in/button/RightSection.tsxapps/playground-web/src/components/blocks/APIHeader.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use tailwind css only – no inline styles ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use Tailwind CSS only – no inline styles or CSS modules
Applied to files:
apps/playground-web/src/components/styled-connect-embed.tsxapps/playground-web/src/app/wallets/sign-in/embed/page.tsxapps/playground-web/src/app/wallets/sign-in/button/RightSection.tsxapps/playground-web/src/components/blocks/APIHeader.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{tsx} : expose `classname` prop on root element of c...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx} : Expose `className` prop on root element of components for overrides
Applied to files:
apps/playground-web/src/components/styled-connect-embed.tsxapps/playground-web/src/app/wallets/sign-in/embed/page.tsxapps/playground-web/src/app/wallets/sign-in/button/RightSection.tsxapps/playground-web/src/components/blocks/APIHeader.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : add `classname` to the root element of every component for ext...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Add `className` to the root element of every component for external overrides.
Applied to files:
apps/playground-web/src/components/styled-connect-embed.tsxapps/playground-web/src/app/wallets/sign-in/button/RightSection.tsxapps/playground-web/src/components/blocks/APIHeader.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : responsive helpers follow mobile-first (`max-sm`, `md`, `lg`, ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Responsive helpers follow mobile-first (`max-sm`, `md`, `lg`, `xl`).
Applied to files:
apps/playground-web/src/components/styled-connect-embed.tsxapps/playground-web/src/components/blocks/APIHeader.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use `cn()` from `@/lib/utils` for conditi...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use `cn()` from `@/lib/utils` for conditional class logic
Applied to files:
apps/playground-web/src/components/styled-connect-embed.tsxapps/playground-web/src/app/wallets/sign-in/button/RightSection.tsxapps/dashboard/src/@/components/ui/NavLink.tsxapps/playground-web/src/components/ui/NavLink.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : tailwind css is the styling system – avoid inline styles or cs...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Tailwind CSS is the styling system – avoid inline styles or CSS modules.
Applied to files:
apps/playground-web/src/components/styled-connect-embed.tsxapps/playground-web/src/app/wallets/sign-in/embed/page.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : combine class names via `cn`, expose `classname` prop if usefu...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Combine class names via `cn`, expose `className` prop if useful.
Applied to files:
apps/playground-web/src/components/styled-connect-embed.tsxapps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : merge class names with `cn` from `@/lib/utils` to keep conditi...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Merge class names with `cn` from `@/lib/utils` to keep conditional logic readable.
Applied to files:
apps/playground-web/src/components/styled-connect-embed.tsxapps/playground-web/src/app/wallets/sign-in/button/RightSection.tsxapps/dashboard/src/@/components/ui/NavLink.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : spacing utilities (`px-*`, `py-*`, `gap-*`) are preferred over...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Spacing utilities (`px-*`, `py-*`, `gap-*`) are preferred over custom margins.
Applied to files:
apps/playground-web/src/components/styled-connect-embed.tsxapps/playground-web/src/components/blocks/APIHeader.tsx
📚 Learning: the modulecarduiprops interface already includes a client prop of type thirdwebclient, so when compo...
Learnt from: MananTank
PR: thirdweb-dev/js#7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Applied to files:
apps/playground-web/src/components/styled-connect-embed.tsxapps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx
📚 Learning: applies to dashboard/**/*client.tsx : interactive ui that relies on hooks (`usestate`, `useeffect`, ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/playground-web/src/components/styled-connect-embed.tsxapps/playground-web/src/app/wallets/sign-in/embed/page.tsxapps/playground-web/src/app/wallets/sign-in/button/RightSection.tsxapps/playground-web/src/components/blocks/full-path-suspence.tsxapps/dashboard/src/@/components/ui/NavLink.tsxapps/playground-web/src/components/ui/NavLink.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: applies to dashboard/**/*client.tsx : anything that consumes hooks from `@tanstack/react-query` or t...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
Applied to files:
apps/playground-web/src/components/styled-connect-embed.tsxapps/playground-web/src/app/wallets/sign-in/embed/page.tsxapps/playground-web/src/app/wallets/sign-in/button/RightSection.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: applies to dashboard/**/*client.tsx : create light wrappers (e.g. `fetchjson`) that automatically at...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Create light wrappers (e.g. `fetchJson`) that automatically attach the JWT from cookies/session when calling internal API routes.
Applied to files:
apps/playground-web/src/components/styled-connect-embed.tsx
📚 Learning: applies to dashboard/**/*client.tsx : when you need access to browser apis (localstorage, window, in...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : When you need access to browser APIs (localStorage, window, IntersectionObserver etc.).
Applied to files:
apps/playground-web/src/components/styled-connect-embed.tsxapps/playground-web/src/components/ui/NavLink.tsx
📚 Learning: applies to packages/thirdweb/src/wallets/** : support for in-app wallets (social/email login)...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to packages/thirdweb/src/wallets/** : Support for in-app wallets (social/email login)
Applied to files:
apps/playground-web/src/components/styled-connect-embed.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : accept a typed `props` object and export a named function (`ex...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Accept a typed `props` object and export a named function (`export function MyComponent()`).
Applied to files:
apps/playground-web/src/components/styled-connect-embed.tsxapps/playground-web/src/app/wallets/sign-in/embed/page.tsxapps/playground-web/src/components/blocks/APIHeader.tsxapps/playground-web/src/components/blocks/full-path-suspence.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : prefer composable primitives over custom markup: `button`, `in...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
apps/playground-web/src/app/wallets/sign-in/embed/page.tsxapps/playground-web/src/app/wallets/sign-in/button/RightSection.tsxapps/dashboard/src/@/components/ui/NavLink.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : import ui primitives from `@/components/u...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Applied to files:
apps/playground-web/src/app/wallets/sign-in/embed/page.tsxapps/playground-web/src/app/wallets/sign-in/button/RightSection.tsxapps/dashboard/src/@/components/ui/NavLink.tsxapps/playground-web/src/components/ui/NavLink.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: applies to dashboard/**/layout.tsx : building layout shells (`layout.tsx`) and top-level pages that ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/layout.tsx : Building layout shells (`layout.tsx`) and top-level pages that mainly assemble data.
Applied to files:
apps/playground-web/src/app/wallets/sign-in/embed/page.tsxapps/playground-web/src/components/blocks/APIHeader.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: in apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-n...
Learnt from: MananTank
PR: thirdweb-dev/js#7315
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx:153-226
Timestamp: 2025-06-10T00:50:20.795Z
Learning: In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx, the updateStatus function correctly expects a complete MultiStepState["status"] object. For pending states, { type: "pending" } is the entire status object. For error states, { type: "error", message: React.ReactNode } is the entire status object. The current code incorrectly spreads the entire step object instead of passing just the status object.
Applied to files:
apps/playground-web/src/app/wallets/sign-in/embed/page.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : reuse core ui primitives; avoid re-implementing buttons, cards...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Applied to files:
apps/playground-web/src/app/wallets/sign-in/embed/page.tsx
📚 Learning: in the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractad...
Learnt from: jnsdls
PR: thirdweb-dev/js#7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.
Applied to files:
apps/playground-web/src/app/wallets/sign-in/embed/page.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : icons come from `lucide-react` or the project-specific `…/icon...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
Applied to files:
apps/playground-web/src/app/wallets/sign-in/embed/page.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : keep components pure; fetch data outside (server component or ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Keep components pure; fetch data outside (server component or hook) and pass it down via props.
Applied to files:
apps/playground-web/src/app/wallets/sign-in/embed/page.tsx
📚 Learning: applies to dashboard/**/*client.tsx : pages requiring fast transitions where data is prefetched on t...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Pages requiring fast transitions where data is prefetched on the client.
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsxapps/playground-web/src/components/blocks/full-path-suspence.tsxapps/dashboard/src/@/components/ui/NavLink.tsxapps/playground-web/src/components/ui/NavLink.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : client components (browser): begin files ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Client Components (browser): Begin files with `'use client';`
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx
📚 Learning: applies to dashboard/**/*client.tsx : components that listen to user events, animations or live upda...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Components that listen to user events, animations or live updates.
Applied to files:
apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx
📚 Learning: surface breaking changes prominently in pr descriptions...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Surface breaking changes prominently in PR descriptions
Applied to files:
apps/playground-web/src/components/blocks/APIHeader.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : stick to design-tokens: background (`bg-card`), borders (`bord...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Stick to design-tokens: background (`bg-card`), borders (`border-border`), muted text (`text-muted-foreground`) etc.
Applied to files:
apps/playground-web/src/components/blocks/APIHeader.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use design system tokens (e.g., `bg-card`...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Applied to files:
apps/playground-web/src/components/blocks/APIHeader.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : for notices & skeletons rely on `announcementbanner`, `generic...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : For notices & skeletons rely on `AnnouncementBanner`, `GenericLoadingPage`, `EmptyStateCard`.
Applied to files:
apps/playground-web/src/components/blocks/APIHeader.tsxapps/playground-web/src/components/blocks/full-path-suspence.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: the spinner component imported from "@/components/ui/spinner/spinner" in the dashboard accepts a cla...
Learnt from: MananTank
PR: thirdweb-dev/js#7505
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/webhook-metrics.tsx:40-40
Timestamp: 2025-07-02T20:04:53.982Z
Learning: The Spinner component imported from "@/components/ui/Spinner/Spinner" in the dashboard accepts a className prop, not a size prop. The correct usage is <Spinner className="size-4" />, not <Spinner size="sm" />. The component defaults to "size-4" if no className is provided.
Applied to files:
apps/playground-web/src/components/blocks/APIHeader.tsx
📚 Learning: in next.js server components, the `params` object can sometimes be a promise that needs to be awaite...
Learnt from: jnsdls
PR: thirdweb-dev/js#6929
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx:14-19
Timestamp: 2025-05-21T05:17:31.283Z
Learning: In Next.js server components, the `params` object can sometimes be a Promise that needs to be awaited, despite type annotations suggesting otherwise. In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx, it's necessary to await the params object before accessing its properties.
Applied to files:
apps/playground-web/src/components/blocks/full-path-suspence.tsxapps/playground-web/src/components/ui/NavLink.tsx
📚 Learning: in next.js 14+, the `params` object in page components is always a promise that needs to be awaited,...
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/page.tsx:2-10
Timestamp: 2025-05-26T16:28:10.079Z
Learning: In Next.js 14+, the `params` object in page components is always a Promise that needs to be awaited, so the correct typing is `params: Promise<ParamsType>` rather than `params: ParamsType`.
Applied to files:
apps/playground-web/src/components/blocks/full-path-suspence.tsxapps/playground-web/src/components/ui/NavLink.tsx
📚 Learning: applies to **/*.{ts,tsx,js,jsx} : load heavy dependencies inside async paths to keep initial bundle ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Applied to files:
apps/playground-web/src/components/blocks/full-path-suspence.tsx
📚 Learning: applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : use `navlink` for internal navigation wit...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Applied to files:
apps/playground-web/src/components/blocks/full-path-suspence.tsxapps/dashboard/src/@/components/ui/NavLink.tsxapps/playground-web/src/components/ui/NavLink.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: applies to src/exports/react.native.ts : react native specific exports are in `src/exports/react.nat...
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to src/exports/react.native.ts : React Native specific exports are in `src/exports/react.native.ts`
Applied to files:
apps/playground-web/src/components/blocks/full-path-suspence.tsx
📚 Learning: next.js link component supports external urls without throwing errors. when used with absolute urls ...
Learnt from: jnsdls
PR: thirdweb-dev/js#7365
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx:16-17
Timestamp: 2025-06-18T04:27:16.172Z
Learning: Next.js Link component supports external URLs without throwing errors. When used with absolute URLs (like https://...), it behaves like a regular anchor tag without client-side routing, but does not cause runtime crashes or errors as previously believed.
Applied to files:
apps/playground-web/src/components/blocks/full-path-suspence.tsxapps/dashboard/src/@/components/ui/NavLink.tsxapps/playground-web/src/components/ui/NavLink.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: applies to dashboard/**/*.{ts,tsx} : redirect logic using `redirect()` from `next/navigation`....
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{ts,tsx} : Redirect logic using `redirect()` from `next/navigation`.
Applied to files:
apps/playground-web/src/components/blocks/full-path-suspence.tsxapps/dashboard/src/@/components/ui/NavLink.tsxapps/playground-web/src/components/ui/NavLink.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : use `navlink` (`@/components/ui/navlink`) for internal navigat...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
Applied to files:
apps/playground-web/src/components/blocks/full-path-suspence.tsxapps/dashboard/src/@/components/ui/NavLink.tsxapps/playground-web/src/components/ui/NavLink.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: in react image components, conditional rendering of the entire image container (e.g., `{props.image ...
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx:26-43
Timestamp: 2025-05-29T10:49:52.981Z
Learning: In React image components, conditional rendering of the entire image container (e.g., `{props.image && <Img />}`) serves a different purpose than fallback handling. The conditional prevents rendering any image UI when no image metadata exists, while the fallback prop handles cases where image metadata exists but the image fails to load. This pattern is intentional to distinguish between "no image intended" vs "image intended but failed to load".
Applied to files:
apps/playground-web/src/components/blocks/full-path-suspence.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : always import from the central ui library under `@/components/...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Always import from the central UI library under `@/components/ui/*` – e.g. `import { Button } from "@/components/ui/button"`.
Applied to files:
apps/dashboard/src/@/components/ui/NavLink.tsx
📚 Learning: applies to dashboard/**/components/*.client.tsx : client components must start with `'use client';` ...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/components/*.client.tsx : Client components must start with `'use client';` before imports.
Applied to files:
apps/dashboard/src/@/components/ui/NavLink.tsxapps/playground-web/src/components/ui/NavLink.tsx
📚 Learning: next.js link component fully supports both internal and external urls and works appropriately with a...
Learnt from: jnsdls
PR: thirdweb-dev/js#7365
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx:16-17
Timestamp: 2025-06-18T04:30:04.326Z
Learning: Next.js Link component fully supports both internal and external URLs and works appropriately with all standard anchor attributes including target="_blank", rel="noopener noreferrer", etc. Using Link for external URLs is completely appropriate and recommended.
Applied to files:
apps/dashboard/src/@/components/ui/NavLink.tsxapps/playground-web/src/components/ui/NavLink.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: configuration files that import and reference react components (like icon components from lucide-rea...
Learnt from: MananTank
PR: thirdweb-dev/js#7768
File: apps/playground-web/src/app/navLinks.ts:1-1
Timestamp: 2025-07-31T16:17:42.753Z
Learning: Configuration files that import and reference React components (like icon components from lucide-react) need the "use client" directive, even if they primarily export static data, because the referenced components need to be executed in a client context when used by other client components.
Applied to files:
apps/playground-web/src/components/ui/NavLink.tsxapps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: applies to dashboard/**/*.{tsx,jsx} : layouts should reuse `sidebarlayout` / `fullwidthsidebarlayout...
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Layouts should reuse `SidebarLayout` / `FullWidthSidebarLayout` (`@/components/blocks/SidebarLayout`).
Applied to files:
apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
📚 Learning: in the thirdweb-dev/js repository, lucide-react icons must be imported with the "icon" suffix (e.g.,...
Learnt from: saminacodes
PR: thirdweb-dev/js#7543
File: apps/portal/src/app/pay/page.mdx:4-4
Timestamp: 2025-07-07T21:21:47.488Z
Learning: In the thirdweb-dev/js repository, lucide-react icons must be imported with the "Icon" suffix (e.g., ExternalLinkIcon, RocketIcon) as required by the new linting rule, contrary to the typical lucide-react convention of importing without the suffix.
Applied to files:
apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx
⏰ 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). (7)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (16)
apps/playground-web/src/components/styled-connect-embed.tsx (1)
52-52: LGTM! Consistent width constraint implementation.The addition of
!max-w-fullensures the ConnectEmbed component can expand to full available width, overriding any existing max-width constraints. This aligns with the coordinated styling changes across the playground-web app for consistent layout behavior.apps/playground-web/src/components/blocks/APIHeader.tsx (2)
29-29: LGTM! Enhanced visual hierarchy.Increasing the margin from
mb-0.5tomb-1and upgrading font weight fromfont-semiboldtofont-boldimproves the visual emphasis and spacing of the header title.
32-32: LGTM! Improved text readability.Adding
text-balanceensures better text wrapping, and increasing max-width frommax-w-4xltomax-w-5xlallows for better content flow in the description text.apps/playground-web/src/components/blocks/full-path-suspence.tsx (2)
5-15: LGTM! Well-designed suspense abstraction.The
FullPathSuspensecomponent provides a clean abstraction for handling full path resolution with proper fallback behavior. The render prop pattern allows flexible usage while centralizing the suspense logic.
17-23: LGTM! Clean separation of concerns.The internal
WithFullPathcomponent properly separates the suspense-triggering logic from the main component, following React patterns correctly.apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx (2)
188-188: LGTM! Improved container overflow control.Adding
overflow-hiddento the container div prevents content from spilling outside the bounds, improving layout control and responsive behavior.
200-200: LGTM! Consistent width constraint pattern.Adding
!max-w-fullto the ConnectEmbed className ensures full width utilization and maintains consistency with similar changes across the codebase.apps/playground-web/src/app/wallets/sign-in/embed/page.tsx (1)
54-58: LGTM! Consistent layout control implementation.Wrapping the
StyledConnectEmbedin a div withoverflow-hidden max-w-full px-3classes provides better layout control within the preview, adding overflow containment, width constraints, and appropriate horizontal padding. This follows the consistent pattern established across other similar components in the codebase.apps/dashboard/src/@/components/ui/NavLink.tsx (1)
17-24: LGTM! Clean implementation of externalized path handlingThe active state logic correctly uses the provided
fullPathprop while maintaining support for customisActivefunctions and exact matching. This aligns well with the broader refactoring pattern of externalizing path handling.apps/playground-web/src/components/ui/NavLink.tsx (3)
17-24: Excellent Suspense implementation with synchronous fallbackGreat approach using
usePathnamefor immediate rendering in the Suspense fallback. This prevents layout shifts and provides instant feedback while the full path (with search params) loads asynchronously.
26-29: Clean separation of async logic from UIGood pattern separating the async path resolution from the UI component. This makes the code more testable and maintainable.
31-51: Well-designed UI component for reuse in both sync and async contextsThe
NavLinkUIcomponent elegantly handles rendering with a providedfullPath, making it reusable for both the synchronous Suspense fallback and the async resolved state. The active state logic is correctly implemented.apps/playground-web/src/components/blocks/full-width-sidebar-layout.tsx (4)
69-79: Excellent architectural pattern maintaining backward compatibilityGreat design using
Omit<FullWidthSidebarLayoutProps, "fullPath">to maintain the existing public API while internally handling the full path viaFullPathSuspense. This prevents breaking changes for consumers.
117-120: Consistent fullPath prop threading throughout component treeThe
fullPathprop is systematically passed to all components that need it for active state determination. This explicit data flow improves code clarity and debugging.Also applies to: 125-128, 152-152
190-247: Excellent hook refactoring for testability and reusabilityConverting these hooks to accept
fullPathas a parameter instead of using internal hooks makes them pure functions. This improves testability, reusability, and makes the data dependencies explicit.
274-277: Proper integration with refactored hooks and nested componentsThe
RenderSidebarSubmenucomponent correctly uses the refactoreduseIsSubnavActivehook and properly passesfullPathto all nested components, maintaining the consistent pattern.Also applies to: 346-346, 358-358
Contributor
size-limit report 📦
|
MananTank
force-pushed
the
08-03-playground_improve_sidebar_search_params_suspense_fallback
branch
from
9bfdb62 to
b73f0ef
Compare
MananTank
force-pushed
the
08-03-playground_improve_sidebar_search_params_suspense_fallback
branch
from
b73f0ef to
2d346b0
Compare
MananTank
force-pushed
the
08-03-playground_improve_sidebar_search_params_suspense_fallback
branch
from
2d346b0 to
27f90e9
Compare
Contributor
Merge activity
|
…nectEmbed width on mobile (#7784) <!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on enhancing layout responsiveness and improving the rendering of sidebar components by integrating full path management, along with some styling adjustments. ### Detailed summary - Added `className="!max-w-full"` to various components for responsive design. - Wrapped `StyledConnectEmbed` in a div with overflow and padding. - Changed heading and paragraph styles in `APIHeader`. - Introduced `FullPathSuspense` for managing full path rendering. - Modified `NavLink` to accept `fullPath` prop. - Updated sidebar components to use `fullPath` for link matching. - Removed unnecessary `Suspense` wrappers from sidebar rendering functions. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Introduced a component that enables rendering content based on the full current URL path, including query parameters. * **Refactor** * Updated sidebar and navigation components to receive the current path as a prop, simplifying active link determination and layout logic. * Consolidated suspense handling for sidebar components to a single top-level boundary. * **Style** * Improved visual layout and spacing for embedded components and page headers. * Enhanced responsiveness and maximum width handling for embedded connect components. * **Documentation** * Updated type names and component signatures for improved clarity. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
08-03-playground_improve_sidebar_search_params_suspense_fallback
branch
from
27f90e9 to
57862d0
Compare
graphite-app
bot
deleted the
08-03-playground_improve_sidebar_search_params_suspense_fallback
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR-Codex overview
This PR focuses on improving the layout and functionality of various components in the
playground-webapplication by enhancing styling, modifying props, and implementing new features for better responsiveness and usability.Detailed summary
className="!max-w-full"toStyledConnectEmbedinstyled-connect-embed.tsx.StyledConnectEmbedin adivwith overflow and padding inpage.tsx.APIHeader.tsx.RightSectionto includeoverflow-hiddenclass.FullPathSuspensecomponent for handling pathname rendering.NavLinkto usefullPathprop instead ofuseFullPath.Suspensewrappers inNavLink.FullWidthSidebarLayoutto useFullPathSuspensefor rendering.fullPathprop to various components includingRenderSidebarMenu.useActiveShadcnSidebarLinkanduseIsSubnavActiveto acceptfullPath.fullPathfor link matching.Summary by CodeRabbit
New Features
Refactor
Style
Documentation