Portal: UI tweaks 2 #8127
Portal: UI tweaks 2 #8127
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughSwapped site fonts to Geist and added font/tailwind vars; broad UI restyling across header, document pages, search, sidebar, and other components; inlined an ArticleIconCard; added header mobile menu/backdrop. No API or data-flow logic changes. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Header
participant Backdrop
User->>Header: tap burger button
Header->>Header: set menuOpen = true
Header->>Backdrop: render backdrop (semi-opaque + blur)
Note right of Backdrop #eef6ff: visual overlay displayed
User->>Backdrop: tap backdrop
Backdrop->>Header: set menuOpen = false
Header->>Backdrop: hide backdrop
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Pre-merge checks and finishing touches❌ Failed checks (2 warnings, 1 inconclusive)
✨ Finishing touches
🧪 Generate unit tests
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro Disabled knowledge base sources:
⛔ Files ignored due to path filters (1)
📒 Files selected for processing (29)
💤 Files with no reviewable changes (1)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (13)
🧰 Additional context used📓 Path-based instructions (2)**/*.{ts,tsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
🧠 Learnings (13)📚 Learning: 2025-05-29T00:46:09.063ZApplied to files:
📚 Learning: 2025-07-18T19:20:32.530ZApplied to files:
📚 Learning: 2025-06-18T04:30:04.326ZApplied to files:
📚 Learning: 2025-06-18T04:27:16.172ZApplied to files:
📚 Learning: 2025-07-18T19:20:32.530ZApplied to files:
📚 Learning: 2025-07-18T19:20:32.530ZApplied to files:
📚 Learning: 2025-07-07T21:21:47.488ZApplied to files:
📚 Learning: 2025-07-18T19:19:55.613ZApplied to files:
📚 Learning: 2025-08-29T15:37:38.513ZApplied to files:
📚 Learning: 2025-07-18T19:20:32.530ZApplied to files:
📚 Learning: 2025-07-31T16:17:42.753ZApplied to files:
📚 Learning: 2025-07-18T19:20:32.530ZApplied to files:
📚 Learning: 2025-08-29T23:44:47.512ZApplied to files:
🧬 Code graph analysis (6)apps/portal/src/app/references/components/TDoc/PageLayout.tsx (1)
apps/portal/src/app/Header.tsx (3)
apps/portal/src/components/others/PlatformSelector.tsx (1)
apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx (1)
apps/portal/src/app/layout.tsx (1)
apps/portal/src/components/Document/PageFooter.tsx (1)
⏰ 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). (4)
🔇 Additional comments (15)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
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. |
github-actions
bot
added
Portal
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/portal/src/app/layout.tsx (1)
3-27: Instantiate the Geist fonts before using their CSS variables.Right now
GeistMono/GeistSansare still the loader functions, soGeistMono.variable/GeistSans.variableevaluate toundefined. That means we never register the--font-geist-*custom properties your Tailwind config points at, and the body keeps falling back to the default sans stack. Please instantiate the fonts (and assign thevariableoption) before wiring them intocn(...).-import { GeistMono } from "geist/font/mono"; -import { GeistSans } from "geist/font/sans"; +import { GeistMono } from "geist/font/mono"; +import { GeistSans } from "geist/font/sans"; … -export default function RootLayout({ +const geistMono = GeistMono({ + subsets: ["latin"], + variable: "--font-geist-mono", +}); + +const geistSans = GeistSans({ + subsets: ["latin"], + variable: "--font-geist-sans", +}); + +export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en" suppressHydrationWarning> <body - className={cn(GeistMono.variable, GeistSans.variable, "font-sans")} + className={cn(geistMono.variable, geistSans.variable, "font-sans")} suppressHydrationWarning >apps/portal/src/components/others/Sidebar.tsx (1)
106-115: Prevent reverse‑tabnabbing on external links.External links opened with target="_blank" lack rel="noopener noreferrer".
- target={link.href.startsWith("http") ? "_blank" : undefined} + target={link.href.startsWith("http") ? "_blank" : undefined} + rel={link.href.startsWith("http") ? "noopener noreferrer" : undefined}Apply the same change to the other Link variant below.
Also applies to: 124-133
🧹 Nitpick comments (5)
apps/portal/src/components/Document/NextPageButton.tsx (1)
10-10: Trim leading whitespace inside the spanThe literal space before
{props.name}renders as a leading space in the label. Since the flex container already appliesgap-2, this extra whitespace is redundant—please drop it to keep the text tidy.- <span> {props.name}</span> + <span>{props.name}</span>apps/portal/src/app/references/components/TDoc/PageLayout.tsx (1)
338-369: Avoid duplicatingArticleIconCard.We now have two components with the same name but diverging props/styles (
@/components/Document/Cards/ArticleCardand this local copy). That duplication will drift quickly and complicate future tweaks. Please reuse the shared component (overriding viaclassNameas needed) or rename this local variant to make the distinction explicit.apps/portal/src/components/others/Sidebar.tsx (3)
229-240: Use tokenized border color and stable list keys (avoid index).
- Add border-border for consistent theming.
- Replace array index keys to prevent reconciliation issues on reorders.
- <div className="pl-4 py-1"> - <ul className="flex flex-col border-l pl-2 gap-1"> - {links.map((link, i) => { + <div className="pl-4 py-1"> + <ul className="flex flex-col border-l border-border pl-2 gap-1"> + {links.map((link) => { return ( // biome-ignore lint/suspicious/noArrayIndexKey: TODO - fix this - <li key={i}> + <li key={getSidebarKey(link)}> <SidebarItem link={link} onLinkClick={props.onLinkClick} /> </li> ); })} </ul> </div>Add this helper near other utils:
function getSidebarKey(link: SidebarLink): string { if ("separator" in link) return "sep"; if ("links" in link) return `group:${link.name}`; return `link:${link.href ?? link.name}`; }
252-252: Tokenize border color on the trigger Button.Add border-border to align with theme borders.
- <Button className="w-full justify-between border bg-card py-3 h-auto rounded-xl text-left text-foreground hover:bg-card xl:hidden"> + <Button className="w-full justify-between border border-border bg-card py-3 h-auto rounded-xl text-left text-foreground hover:bg-card xl:hidden">
264-264: Tokenize dropdown container border color.Add border-border for consistent visuals.
- <div className="max-h-[70vh] w-[calc(100vw-32px)] overflow-y-auto rounded-xl border bg-card px-2"> + <div className="max-h-[70vh] w-[calc(100vw-32px)] overflow-y-auto rounded-xl border border-border bg-card px-2">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (29)
apps/portal/package.json(1 hunks)apps/portal/src/app/Header.tsx(2 hunks)apps/portal/src/app/globals.css(1 hunks)apps/portal/src/app/layout.tsx(2 hunks)apps/portal/src/app/references/components/TDoc/PageLayout.tsx(2 hunks)apps/portal/src/app/vault/page.mdx(1 hunks)apps/portal/src/components/AI/chat-button.tsx(2 hunks)apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx(0 hunks)apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx(4 hunks)apps/portal/src/components/Document/Cards/ArticleCard.tsx(1 hunks)apps/portal/src/components/Document/Code.tsx(1 hunks)apps/portal/src/components/Document/EditPage.tsx(1 hunks)apps/portal/src/components/Document/FeatureCard.tsx(1 hunks)apps/portal/src/components/Document/Heading.tsx(4 hunks)apps/portal/src/components/Document/InlineCode.tsx(1 hunks)apps/portal/src/components/Document/NextPageButton.tsx(1 hunks)apps/portal/src/components/Document/PageFooter.tsx(2 hunks)apps/portal/src/components/Document/Paragraph.tsx(1 hunks)apps/portal/src/components/Document/Steps/Steps.module.css(1 hunks)apps/portal/src/components/Document/Steps/Steps.tsx(1 hunks)apps/portal/src/components/Layouts/DocLayout.tsx(1 hunks)apps/portal/src/components/others/DocSearch.tsx(10 hunks)apps/portal/src/components/others/Feedback.tsx(1 hunks)apps/portal/src/components/others/PlatformSelector.tsx(2 hunks)apps/portal/src/components/others/Sidebar.tsx(3 hunks)apps/portal/src/components/others/Subscribe.tsx(1 hunks)apps/portal/src/components/ui/Anchor.tsx(2 hunks)apps/portal/tailwind.config.ts(1 hunks)packages/ui/src/global.css(1 hunks)
💤 Files with no reviewable changes (1)
- apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx
🧰 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
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/portal/src/components/Document/Steps/Steps.tsxapps/portal/src/app/layout.tsxapps/portal/src/components/Document/EditPage.tsxapps/portal/src/components/Layouts/DocLayout.tsxapps/portal/src/components/Document/Code.tsxapps/portal/src/components/others/Sidebar.tsxapps/portal/src/components/others/Subscribe.tsxapps/portal/src/components/Document/Cards/ArticleCard.tsxapps/portal/src/components/others/DocSearch.tsxapps/portal/src/components/AI/chat-button.tsxapps/portal/src/components/Document/Paragraph.tsxapps/portal/src/components/Document/InlineCode.tsxapps/portal/src/components/Document/PageFooter.tsxapps/portal/src/app/references/components/TDoc/PageLayout.tsxapps/portal/src/components/Document/FeatureCard.tsxapps/portal/src/app/Header.tsxapps/portal/src/components/Document/NextPageButton.tsxapps/portal/src/components/Document/Heading.tsxapps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsxapps/portal/src/components/others/PlatformSelector.tsxapps/portal/src/components/others/Feedback.tsxapps/portal/src/components/ui/Anchor.tsxapps/portal/tailwind.config.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/portal/src/components/Document/Steps/Steps.tsxapps/portal/src/app/layout.tsxapps/portal/src/components/Document/EditPage.tsxapps/portal/src/components/Layouts/DocLayout.tsxapps/portal/src/components/Document/Code.tsxapps/portal/src/components/others/Sidebar.tsxapps/portal/src/components/others/Subscribe.tsxapps/portal/src/components/Document/Cards/ArticleCard.tsxapps/portal/src/components/others/DocSearch.tsxapps/portal/src/components/AI/chat-button.tsxapps/portal/src/components/Document/Paragraph.tsxapps/portal/src/components/Document/InlineCode.tsxapps/portal/src/components/Document/PageFooter.tsxapps/portal/src/app/references/components/TDoc/PageLayout.tsxapps/portal/src/components/Document/FeatureCard.tsxapps/portal/src/app/Header.tsxapps/portal/src/components/Document/NextPageButton.tsxapps/portal/src/components/Document/Heading.tsxapps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsxapps/portal/src/components/others/PlatformSelector.tsxapps/portal/src/components/others/Feedback.tsxapps/portal/src/components/ui/Anchor.tsxapps/portal/tailwind.config.ts
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Track bundle budgets via
package.json#size-limit
Files:
apps/portal/package.json
🧠 Learnings (17)
📚 Learning: 2025-07-18T19:20:32.530Z
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/portal/src/components/Layouts/DocLayout.tsxapps/portal/src/components/others/Sidebar.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
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/portal/src/components/Layouts/DocLayout.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Applied to files:
apps/portal/src/components/Layouts/DocLayout.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
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/portal/src/components/Layouts/DocLayout.tsxapps/portal/src/app/references/components/TDoc/PageLayout.tsx
📚 Learning: 2025-06-18T04:30:04.326Z
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/portal/src/components/Document/Cards/ArticleCard.tsxapps/portal/src/components/others/DocSearch.tsxapps/portal/src/components/ui/Anchor.tsx
📚 Learning: 2025-06-18T04:27:16.172Z
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/portal/src/components/Document/Cards/ArticleCard.tsxapps/portal/src/components/others/DocSearch.tsxapps/portal/src/components/ui/Anchor.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
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/portal/src/components/others/DocSearch.tsxapps/portal/src/components/ui/Anchor.tsx
📚 Learning: 2025-07-31T16:17:42.753Z
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/portal/src/components/AI/chat-button.tsxapps/portal/src/components/ui/Anchor.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
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/portal/src/components/AI/chat-button.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
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/portal/src/components/AI/chat-button.tsx
📚 Learning: 2025-07-07T21:21:47.488Z
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/portal/src/components/AI/chat-button.tsxapps/portal/src/components/Document/NextPageButton.tsxapps/portal/src/components/ui/Anchor.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
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/portal/src/components/Document/Paragraph.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
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/portal/src/components/Document/InlineCode.tsx
📚 Learning: 2025-08-29T23:44:47.512Z
Learnt from: MananTank
PR: thirdweb-dev/js#7951
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx:38-38
Timestamp: 2025-08-29T23:44:47.512Z
Learning: The ContractPageLayout component in apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx is not the root layout - it's nested within the dashboard layout which already handles footer positioning with min-h-dvh and AppFooter placement. The ContractPageLayout needs flex flex-col grow to properly participate in the parent's flex layout.
Applied to files:
apps/portal/src/components/Document/PageFooter.tsxapps/portal/src/components/others/Feedback.tsx
📚 Learning: 2025-05-29T00:46:09.063Z
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/portal/src/app/vault/page.mdx
📚 Learning: 2025-07-18T19:19:55.613Z
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/portal/src/components/ui/Anchor.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Use `NavLink` for internal navigation to get active state handling
Applied to files:
apps/portal/src/components/ui/Anchor.tsx
🧬 Code graph analysis (7)
apps/portal/src/app/layout.tsx (1)
packages/ui/src/lib/utils.ts (1)
cn(4-6)
apps/portal/src/components/others/DocSearch.tsx (1)
apps/playground-web/src/components/ui/dialog.tsx (1)
DialogContent(117-117)
apps/portal/src/components/Document/PageFooter.tsx (2)
apps/portal/src/components/Document/AutoNextPageButton.tsx (1)
AutoNextPageButton(8-27)apps/portal/src/components/Document/DocLink.tsx (1)
DocLink(4-27)
apps/portal/src/app/references/components/TDoc/PageLayout.tsx (1)
apps/portal/src/components/Document/Cards/ArticleCard.tsx (1)
ArticleIconCard(31-70)
apps/portal/src/app/Header.tsx (3)
packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Link(46-64)apps/portal/src/components/others/DocSearch.tsx (1)
DocSearch(313-389)apps/portal/src/components/AI/chat-button.tsx (1)
ChatButton(13-80)
apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx (1)
apps/playground-web/src/components/ui/select.tsx (3)
SelectTrigger(155-155)SelectValue(154-154)SelectContent(156-156)
apps/portal/src/components/others/PlatformSelector.tsx (1)
packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Link(46-64)
⏰ 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). (8)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Unit Tests
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (24)
apps/portal/src/app/vault/page.mdx (1)
21-48: Vertical stack matches updated spacing systemSwitching the feature list to
space-y-4keeps the new vertical rhythm consistent with the rest of the portal refresh. Looks solid.apps/portal/src/components/others/Subscribe.tsx (1)
38-38: Typography tweak looks goodThe muted foreground class aligns the helper copy with the updated palette while keeping layout intact. No issues spotted.
apps/portal/src/components/Document/InlineCode.tsx (1)
7-7: Background-opacity adjustment looks goodThe lighter muted tone keeps inline code readable while better matching the updated Portal styling sweep.
apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx (1)
76-184: Refined header and dropdown styling look solidThe updated spacing plus the
rounded-full/rounded-xltreatments are consistent with the broader visual refresh. No functional concerns here.apps/portal/src/components/Document/Steps/Steps.tsx (1)
8-8: Dashed rail update looks consistentThe dashed style aligns with the refreshed step indicator treatment and keeps the layout clean.
apps/portal/src/components/Document/Steps/Steps.module.css (1)
3-3: Token swap on the step badge reads wellThe new utility mix keeps the badge aligned with the design system while adding the subtle border.
apps/portal/src/components/others/DocSearch.tsx (4)
149-197: Tag pill polish looks greatThe tighter spacing plus the muted translucent background/border combo give the tag row a cleaner read without sacrificing clarity. Nice touch anchoring the selected state with
border-foreground.
202-258: Appreciate the tightened result stackSwitching to
gap-1, the dashed section border, and the slimmer padding sharpen the visual hierarchy and make scanning nested hits much easier. Solid refinement.
379-385: Modal framing update LGTMAdding
rounded-xland keeping the surface onbg-backgroundaligns this dialog with the rest of the portal polish—ready to ship.
454-495: Search result item styling feels cohesiveThe smaller icon, consistent text sizing, and subtle accent hover state tie these cards together nicely. The tag badges with
border-border/50are a thoughtful detail.apps/portal/src/components/Document/Code.tsx (1)
67-72: Dark-mode code background aligns with the new palette.
dark:bg-backgroundkeeps parity with the updated theme variables while preserving the existing light-mode styling. Looks good.apps/portal/src/components/Document/FeatureCard.tsx (1)
12-12: Rounded-xl matches the refreshed card geometry.The bump to
rounded-xlbrings this card in line with the other document surfaces introduced in the PR.apps/portal/src/components/ui/Anchor.tsx (1)
3-29: Anchor hash icon swap is solid.Using
HashIconclarifies the in-page link affordance and stays consistent with the lucide naming convention we enforce.apps/portal/src/components/Document/Paragraph.tsx (1)
8-8: Extra bottom spacing reads well.
mb-5gives paragraphs a bit more breathing room without affecting the component’s responsibility. All good.apps/portal/src/components/AI/chat-button.tsx (1)
3-31: Brain icon fits the AI chat affordance.The icon swap is clear, keeps the suffix convention, and doesn’t alter the interaction logic. Looks great.
apps/portal/src/components/Document/Heading.tsx (1)
17-75: Typography scale adjustment LGTM.The updated weights and sizes line up with the new Geist scale and keep the heading hierarchy clear.
packages/ui/src/global.css (1)
160-165: Text rendering tweaks look good.The additional font smoothing settings should produce crisper body copy with the new font stack.
apps/portal/src/components/others/PlatformSelector.tsx (1)
21-59: Styling refinements LGTM.The trigger/content adjustments keep the selector compact and consistent with the refreshed header.
apps/portal/src/components/others/Feedback.tsx (1)
23-75: Feedback banner update LGTM.Layout and spacing changes stay aligned with the new portal styling without touching logic.
apps/portal/src/components/Document/Cards/ArticleCard.tsx (1)
43-68: Icon card refresh LGTM.The richer affordance (rounded icon pill + tighter typography track) reads well with the Geist update.
apps/portal/src/app/Header.tsx (1)
216-429: Header restructure LGTM.The new two-row layout and control clustering behave well across breakpoints.
apps/portal/src/components/Layouts/DocLayout.tsx (1)
52-54: Add tokenized border color
Replaceborder-bwithborder-b border-borderto use the design-system token.z-stickyMobileSidebaris already defined (500) in the Tailwind config.⛔ Skipped due to learnings
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.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`)Learnt from: CR PR: thirdweb-dev/js#0 File: AGENTS.md:0-0 Timestamp: 2025-08-29T15:37:38.513Z Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)apps/portal/package.json (1)
20-20: Geist runtime dependency addition looks good.Aligns with the new font usage introduced elsewhere in the portal.
apps/portal/src/app/globals.css (1)
1-3: Ligature enablement fits the updated typography.No issues spotted with enabling standard ligatures globally.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8127 +/- ##
==========================================
- Coverage 56.28% 56.27% -0.01%
==========================================
Files 906 906
Lines 59193 59193
Branches 4173 4174 +1
==========================================
- Hits 33316 33311 -5
- Misses 25772 25777 +5
Partials 105 105
🚀 New features to boost your workflow:
|
MananTank
force-pushed
the
09-25-portal_ui_tweaks
branch
from
1880b3f to
e8ae37d
Compare
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. |
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/portal/src/components/Document/Code.tsx (1)
67-81: Revert the dark-mode background override
ScrollShadowkeeps usinghsl(var(--card))for its fades, so switching the<code>background tovar(--background)only in dark mode makes the shadow gradient sit on a different color than the block itself. The mismatch is noticeable in the current dark theme. Please keep the card background (or update both background and shadow together) to avoid the regression.- "relative block whitespace-pre rounded-lg border bg-card dark:bg-background font-mono text-sm leading-relaxed", + "relative block whitespace-pre rounded-lg border bg-card font-mono text-sm leading-relaxed",
🧹 Nitpick comments (9)
apps/portal/src/components/others/Feedback.tsx (1)
23-23: Restore mobile-friendly column layout for the feedback promptDropping the
flex-col/md:flex-rowsplit forces the prompt text and button group to share a single row at all breakpoints. On narrow viewports (e.g., ~320 px wide phones or tighter doc content panes), the two outline buttons keep theirwhitespace-nowrapfootprint, so the parent can’t shrink enough to accommodate the copy without severe wrapping or horizontal overflow. Restoring the previous responsive stack keeps the mobile layout readable while preserving the horizontal alignment onmd+.- <div className="md:h-16 flex items-center gap-4"> + <div className="flex flex-col gap-2 md:h-16 md:flex-row md:items-center md:gap-4">apps/portal/src/components/AI/chat-button.tsx (1)
13-20: Add explicit return types and basic dialog a11y attributes
- Add return types per TS guidelines.
- Add aria-haspopup/expanded/controls on the trigger and an id on the sheet container for better a11y.
-export function ChatButton() { +export function ChatButton(): JSX.Element { @@ - <Button + <Button + aria-controls="chat-modal" + aria-expanded={isOpen} + aria-haspopup="dialog" className="gap-2 rounded-full bg-background" onClick={() => { setIsOpen(true); setHasBeenOpened(true); }} variant="outline" > @@ - <div + <div + id="chat-modal" className={cn( "slide-in-from-bottom-20 zoom-in-95 fade-in-0 fixed bottom-0 left-0 z-modal flex h-[80vh] w-[100vw] animate-in flex-col overflow-hidden rounded-t-2xl border bg-background shadow-2xl duration-200 lg:right-6 lg:bottom-6 lg:left-auto lg:h-[80vh] lg:max-w-xl lg:rounded-xl", !isOpen && "hidden", )} > @@ -function ChatLoading() { +function ChatLoading(): JSX.Element {Also applies to: 25-33, 35-41, 70-76, 82-89
apps/portal/src/components/Document/Heading.tsx (1)
4-12: Add explicit return type to match TS guidelinesKeeps component signatures consistent.
-export function Heading(props: { +export function Heading(props: { children: React.ReactNode; anchorId: string; level: number; className?: string; anchorClassName?: string; noIndex?: boolean; -}) { +}): JSX.Element {apps/portal/src/components/others/PlatformSelector.tsx (2)
21-29: UseasChildand a semantic trigger element for focus/a11yLet the trigger be the actual focusable element so Radix can manage aria-expanded/aria-controls and focus rings. Styling the inner div leaves focus styles invisible.
- <DropdownMenuTrigger> - <div className="flex gap-2 font-medium text-sm text-foreground hover:bg-accent justify-between items-center py-1.5 px-2.5 rounded-lg"> + <DropdownMenuTrigger asChild> + <button + type="button" + className="flex gap-2 font-medium text-sm text-foreground hover:bg-accent justify-between items-center py-1.5 px-2.5 rounded-lg" + > <div className="flex gap-2 items-center"> <platform.icon className="size-4 text-foreground" /> {platform.name} </div> <ChevronDownIcon className="w-4 text-muted-foreground opacity-70" /> - </div> + </button> </DropdownMenuTrigger>
37-55: Avoid nested interactive elements insideDropdownMenuItemMake
Linkthe direct child ofDropdownMenuItem asChildfor correct roles, focus, and click handling.- <DropdownMenuItem asChild key={platform.name}> - <div - className={clsx( - "relative flex cursor-pointer font-medium text-foreground text-lg", - "hover:bg-accent", - props.selected === platform.name && - "bg-muted text-foreground", - )} - > - <div className="flex gap-2"> - <platform.icon className="size-4 text-foreground" /> - <Link - className="before:absolute before:inset-0 text-sm" - href={platform.href} - > - {platform.name} - </Link> - </div> - </div> - </DropdownMenuItem> + <DropdownMenuItem asChild key={platform.name}> + <Link + className={clsx( + "relative flex cursor-pointer items-center gap-2 font-medium text-foreground text-sm !rounded-lg px-2 py-1.5", + "hover:bg-accent", + props.selected === platform.name && "bg-muted text-foreground", + "before:absolute before:inset-0", + )} + href={platform.href} + prefetch={false} + > + <platform.icon className="size-4 text-foreground" /> + <span>{platform.name}</span> + </Link> + </DropdownMenuItem>Also applies to: 46-55
apps/portal/src/components/others/DocSearch.tsx (1)
454-457: Avoid prefetching many result linksSearch results can be numerous; disable Next.js prefetch to reduce network noise.
- <Link + <Link className="flex gap-3 rounded-lg px-3 py-2.5 text-muted-foreground transition-colors hover:bg-accent/50" href={props.href} + prefetch={false} onClick={props.onClick} >apps/portal/src/app/Header.tsx (3)
257-268: Add menu a11y attributes and link to panelExpose expanded state and control relationship.
- <Button + <Button className="p-2" onClick={() => setShowBurgerMenu(!showBurgerMenu)} variant="ghost" + aria-haspopup="menu" + aria-expanded={showBurgerMenu} + aria-controls="mobile-menu" > <MenuIcon className="size-7" /> </Button>- <div className="fixed inset-0 top-sticky-top-height z-50 overflow-auto bg-card p-6 xl:hidden"> + <div + id="mobile-menu" + className="fixed inset-0 top-sticky-top-height z-50 overflow-auto bg-card p-6 xl:hidden" + >Also applies to: 342-345
457-481: Make dropdown items direct Links; add rel for external targetsAvoid nested interactive elements and add rel for security.
- <DropdownMenuItem asChild key={info.name}> - <div - className={clsx( - "relative flex cursor-pointer gap-3 font-medium text-foreground !rounded-lg px-3 py-2", - "hover:bg-accent", - )} - > - {info.icon && ( - <info.icon className="size-5 text-muted-foreground" /> - )} - <Link - className="before:absolute before:inset-0" - href={info.href} - prefetch={false} - target={info.href.startsWith("http") ? "_blank" : ""} - > - {info.name} - </Link> - </div> - </DropdownMenuItem> + <DropdownMenuItem asChild key={info.name}> + <Link + className={clsx( + "relative flex items-center gap-3 font-medium text-foreground !rounded-lg px-3 py-2", + "hover:bg-accent", + "before:absolute before:inset-0", + )} + href={info.href} + prefetch={false} + target={info.href.startsWith("http") ? "_blank" : undefined} + rel={info.href.startsWith("http") ? "noopener noreferrer" : undefined} + > + {info.icon && ( + <info.icon className="size-5 text-muted-foreground" /> + )} + {info.name} + </Link> + </DropdownMenuItem>
527-539: Add rel and consider disabling prefetch for generic nav linksSafer external links; optional prefetch reduction for header links.
<Link className={clsx( @@ )} href={props.href} + prefetch={false} onClick={props.onClick} - target={props.href.startsWith("http") ? "_blank" : ""} + target={props.href.startsWith("http") ? "_blank" : undefined} + rel={props.href.startsWith("http") ? "noopener noreferrer" : undefined} >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (29)
apps/portal/package.json(1 hunks)apps/portal/src/app/Header.tsx(2 hunks)apps/portal/src/app/globals.css(1 hunks)apps/portal/src/app/layout.tsx(2 hunks)apps/portal/src/app/references/components/TDoc/PageLayout.tsx(2 hunks)apps/portal/src/app/vault/page.mdx(1 hunks)apps/portal/src/components/AI/chat-button.tsx(2 hunks)apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx(0 hunks)apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx(4 hunks)apps/portal/src/components/Document/Cards/ArticleCard.tsx(1 hunks)apps/portal/src/components/Document/Code.tsx(1 hunks)apps/portal/src/components/Document/EditPage.tsx(1 hunks)apps/portal/src/components/Document/FeatureCard.tsx(1 hunks)apps/portal/src/components/Document/Heading.tsx(4 hunks)apps/portal/src/components/Document/InlineCode.tsx(1 hunks)apps/portal/src/components/Document/NextPageButton.tsx(1 hunks)apps/portal/src/components/Document/PageFooter.tsx(1 hunks)apps/portal/src/components/Document/Paragraph.tsx(1 hunks)apps/portal/src/components/Document/Steps/Steps.module.css(1 hunks)apps/portal/src/components/Document/Steps/Steps.tsx(1 hunks)apps/portal/src/components/Layouts/DocLayout.tsx(1 hunks)apps/portal/src/components/others/DocSearch.tsx(10 hunks)apps/portal/src/components/others/Feedback.tsx(1 hunks)apps/portal/src/components/others/PlatformSelector.tsx(2 hunks)apps/portal/src/components/others/Sidebar.tsx(3 hunks)apps/portal/src/components/others/Subscribe.tsx(1 hunks)apps/portal/src/components/ui/Anchor.tsx(2 hunks)apps/portal/tailwind.config.ts(1 hunks)packages/ui/src/global.css(1 hunks)
💤 Files with no reviewable changes (1)
- apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx
✅ Files skipped from review due to trivial changes (1)
- apps/portal/src/components/others/Sidebar.tsx
🚧 Files skipped from review as they are similar to previous changes (11)
- apps/portal/src/app/vault/page.mdx
- apps/portal/src/components/Layouts/DocLayout.tsx
- apps/portal/src/components/Document/Paragraph.tsx
- apps/portal/src/components/Document/EditPage.tsx
- apps/portal/src/components/Document/Steps/Steps.tsx
- packages/ui/src/global.css
- apps/portal/src/app/globals.css
- apps/portal/src/components/Document/InlineCode.tsx
- apps/portal/src/components/Document/Steps/Steps.module.css
- apps/portal/tailwind.config.ts
- apps/portal/package.json
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{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
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/portal/src/components/Document/NextPageButton.tsxapps/portal/src/components/Document/FeatureCard.tsxapps/portal/src/app/layout.tsxapps/portal/src/app/Header.tsxapps/portal/src/components/AI/chat-button.tsxapps/portal/src/components/Document/PageFooter.tsxapps/portal/src/app/references/components/TDoc/PageLayout.tsxapps/portal/src/components/others/DocSearch.tsxapps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsxapps/portal/src/components/others/Subscribe.tsxapps/portal/src/components/others/Feedback.tsxapps/portal/src/components/Document/Cards/ArticleCard.tsxapps/portal/src/components/others/PlatformSelector.tsxapps/portal/src/components/ui/Anchor.tsxapps/portal/src/components/Document/Code.tsxapps/portal/src/components/Document/Heading.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/portal/src/components/Document/NextPageButton.tsxapps/portal/src/components/Document/FeatureCard.tsxapps/portal/src/app/layout.tsxapps/portal/src/app/Header.tsxapps/portal/src/components/AI/chat-button.tsxapps/portal/src/components/Document/PageFooter.tsxapps/portal/src/app/references/components/TDoc/PageLayout.tsxapps/portal/src/components/others/DocSearch.tsxapps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsxapps/portal/src/components/others/Subscribe.tsxapps/portal/src/components/others/Feedback.tsxapps/portal/src/components/Document/Cards/ArticleCard.tsxapps/portal/src/components/others/PlatformSelector.tsxapps/portal/src/components/ui/Anchor.tsxapps/portal/src/components/Document/Code.tsxapps/portal/src/components/Document/Heading.tsx
🧠 Learnings (10)
📚 Learning: 2025-07-07T21:21:47.488Z
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/portal/src/components/Document/NextPageButton.tsxapps/portal/src/components/AI/chat-button.tsxapps/portal/src/components/ui/Anchor.tsx
📚 Learning: 2025-07-31T16:17:42.753Z
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/portal/src/components/AI/chat-button.tsxapps/portal/src/components/ui/Anchor.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
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/portal/src/components/AI/chat-button.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
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/portal/src/components/AI/chat-button.tsx
📚 Learning: 2025-08-29T23:44:47.512Z
Learnt from: MananTank
PR: thirdweb-dev/js#7951
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx:38-38
Timestamp: 2025-08-29T23:44:47.512Z
Learning: The ContractPageLayout component in apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx is not the root layout - it's nested within the dashboard layout which already handles footer positioning with min-h-dvh and AppFooter placement. The ContractPageLayout needs flex flex-col grow to properly participate in the parent's flex layout.
Applied to files:
apps/portal/src/components/Document/PageFooter.tsxapps/portal/src/components/others/Feedback.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
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/portal/src/app/references/components/TDoc/PageLayout.tsx
📚 Learning: 2025-06-18T04:30:04.326Z
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/portal/src/components/others/DocSearch.tsxapps/portal/src/components/Document/Cards/ArticleCard.tsxapps/portal/src/components/ui/Anchor.tsx
📚 Learning: 2025-06-18T04:27:16.172Z
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/portal/src/components/others/DocSearch.tsxapps/portal/src/components/Document/Cards/ArticleCard.tsxapps/portal/src/components/ui/Anchor.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
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/portal/src/components/others/DocSearch.tsxapps/portal/src/components/ui/Anchor.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Use `NavLink` for internal navigation to get active state handling
Applied to files:
apps/portal/src/components/ui/Anchor.tsx
🧬 Code graph analysis (6)
apps/portal/src/app/layout.tsx (1)
packages/ui/src/lib/utils.ts (1)
cn(4-6)
apps/portal/src/app/Header.tsx (3)
packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Link(46-64)apps/portal/src/components/others/DocSearch.tsx (1)
DocSearch(313-389)apps/portal/src/components/AI/chat-button.tsx (1)
ChatButton(13-80)
apps/portal/src/components/Document/PageFooter.tsx (1)
apps/portal/src/components/Document/AutoNextPageButton.tsx (1)
AutoNextPageButton(8-27)
apps/portal/src/app/references/components/TDoc/PageLayout.tsx (1)
apps/portal/src/components/Document/Cards/ArticleCard.tsx (1)
ArticleIconCard(31-70)
apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx (1)
apps/playground-web/src/components/ui/select.tsx (3)
SelectTrigger(155-155)SelectValue(154-154)SelectContent(156-156)
apps/portal/src/components/others/PlatformSelector.tsx (1)
packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Link(46-64)
⏰ 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: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (13)
apps/portal/src/components/others/Subscribe.tsx (1)
38-38: Keep the muted helper text tweak.Switching this helper copy to
text-muted-foreground(and dropping the medium weight) keeps it aligned with the subtler supporting text style used elsewhere in the PR. Looks good.apps/portal/src/components/ui/Anchor.tsx (1)
3-28: Icon swap aligns with anchor affordance.Switching to
HashIconmakes the self-link affordance clearer for headings while keeping the hover reveal and spacing intact. Looks good.apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx (1)
76-76: Consistent design token refresh looks solidThe upgraded spacing plus the rounded
bg-cardtriggers /rounded-xlcontent align cleanly with the refreshed Portal palette and match the other select instances I spot-checked. Looks good to merge.Also applies to: 112-118, 147-151, 172-176
apps/portal/src/components/Document/FeatureCard.tsx (1)
12-12: Rounded-xl update looks good.The larger radius aligns with the new card styling direction.
apps/portal/src/components/Document/Cards/ArticleCard.tsx (1)
43-67: Icon card spacing refinements LGTM.The new layout brings the icon treatment and typography in line with the refreshed design system without changing behavior.
apps/portal/src/components/Document/NextPageButton.tsx (1)
8-11: Chevron-only layout works well.The simplified link styling and ChevronRightIcon usage match the rest of the refreshed navigation affordances.
apps/portal/src/components/AI/chat-button.tsx (1)
30-31: Icon swap to BrainIcon looks goodMatches the repo’s “Icon”-suffix convention and keeps tree-shaking intact.
apps/portal/src/components/Document/Heading.tsx (1)
17-18: Typography updates look consistentHeading weight/size tweaks are coherent with the new design system.
Also applies to: 36-37, 55-56, 74-75
apps/portal/src/app/references/components/TDoc/PageLayout.tsx (2)
330-333: Heading style tweak LGTMThe stronger section heading fits the updated typography.
338-370: Add rel="noopener noreferrer" to external links and reuse shared ArticleIconCard
- Security: add
rel={isExternal ? "noopener noreferrer" : undefined}whenever you usetarget="_blank"to prevent reverse tabnabbing.- DRY: remove this local
ArticleIconCardand import the shared one fromcomponents/Document/Cards/ArticleCard.tsx.- target={isExternal ? "_blank" : undefined} + target={isExternal ? "_blank" : undefined} + rel={isExternal ? "noopener noreferrer" : undefined}⛔ Skipped due to learnings
Learnt from: MananTank PR: thirdweb-dev/js#7812 File: apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx:48-60 Timestamp: 2025-08-07T20:43:21.864Z Learning: In the TokenBanner component at apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx, the Link components use target="_blank" with internal application routes (starting with "/") to open pages in new tabs within the same application. These internal links do not require rel="noopener noreferrer" security attributes, which are only needed for external URLs.Learnt from: MananTank PR: thirdweb-dev/js#7984 File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/FeatureCard.client.tsx:93-99 Timestamp: 2025-09-05T19:45:22.949Z Learning: In the thirdweb dashboard project, rel="noopener noreferrer" attributes are not required for external links with target="_blank" in Link components, as confirmed by MananTank.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.apps/portal/src/components/others/DocSearch.tsx (1)
149-154: Styling/spacing tightening LGTMConsistent with the broader UI pass; no functional changes observed.
Also applies to: 202-205, 224-252, 279-281, 379-385, 454-495
apps/portal/src/app/Header.tsx (1)
216-231: Header top-row restructure LGTMClearer layout with brand, controls split for xl vs mobile; matches the new design tokens.
apps/portal/src/app/layout.tsx (1)
3-4: Approve Geist font wiring Tailwind config (apps/portal/tailwind.config.ts lines 18–19) correctly maps font-sans to var(--font-geist-sans) and font-mono to var(--font-geist-mono).
MananTank
force-pushed
the
09-25-portal_ui_tweaks
branch
from
e8ae37d to
76b94eb
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
apps/portal/src/app/Header.tsx (2)
474-478: Harden external dropdown linksThese dropdown items also open new tabs without
rel="noopener noreferrer". Add the rel attribute when we detect an external URL.Apply this diff to fix it:
<Link className="before:absolute before:inset-0" href={info.href} prefetch={false} - target={info.href.startsWith("http") ? "_blank" : ""} + rel={ + info.href.startsWith("http") ? "noreferrer noopener" : undefined + } + target={info.href.startsWith("http") ? "_blank" : undefined} >
536-539: Secure externalNavLinktargets
NavLinkopens externals in a new tab but doesn’t setrel="noopener noreferrer". Please add it whenhrefis off-site.Apply this diff to fix it:
href={props.href} onClick={props.onClick} - target={props.href.startsWith("http") ? "_blank" : ""} + rel={props.href.startsWith("http") ? "noreferrer noopener" : undefined} + target={props.href.startsWith("http") ? "_blank" : undefined}apps/portal/src/components/others/PlatformSelector.tsx (1)
37-55: Avoid nested interactive elements in menu items; make Link the direct child of DropdownMenuItem.Current structure nests a Next.js Link inside a clickable div (and uses a ::before overlay). This hurts accessibility (interactive-in-interactive) and can break keyboard highlight/selection. Use asChild with Link as the immediate child and style via data-[highlighted].
Apply this diff:
- {connectLinks.map((platform) => { + {connectLinks.map((platform) => { return ( - <DropdownMenuItem asChild key={platform.name}> - <div - className={clsx( - "relative flex cursor-pointer font-medium text-foreground text-lg", - "hover:bg-accent", - props.selected === platform.name && - "bg-muted text-foreground", - )} - > - <div className="flex gap-2"> - <platform.icon className="size-4 text-foreground" /> - <Link - className="before:absolute before:inset-0 text-sm" - href={platform.href} - > - {platform.name} - </Link> - </div> - </div> - </DropdownMenuItem> + <DropdownMenuItem asChild key={platform.name}> + <Link + href={platform.href} + className={clsx( + "relative flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium text-foreground outline-none", + "hover:bg-accent focus:bg-accent data-[highlighted]:bg-accent", + props.selected === platform.name && "bg-muted text-foreground", + )} + > + <platform.icon className="size-4 text-foreground" /> + {platform.name} + </Link> + </DropdownMenuItem> ); })}
🧹 Nitpick comments (3)
apps/portal/src/app/references/components/TDoc/PageLayout.tsx (1)
338-369: Avoid re‑implementingArticleIconCardlocallyWe now have two nearly identical
ArticleIconCardimplementations (here and inapps/portal/src/components/Document/Cards/ArticleCard.tsx). Any future tweak (padding, icon wrapper, aria attributes, etc.) will have to be applied in both spots, which is a maintenance trap. Can we pull this variant back into the shared component—perhaps via avariant="compact"prop or a small wrapper—or otherwise share the markup so we only have one source of truth?apps/portal/src/components/Document/NextPageButton.tsx (1)
10-11: Drop the leading whitespace before the label
<span> {props.name}</span>renders an extra space before the text. Tighten it up so the typography stays crisp.Apply this diff to fix it:
- <span> {props.name}</span> + <span>{props.name}</span>apps/portal/src/components/others/PlatformSelector.tsx (1)
16-16: Add an explicit return type to comply with TS guidelines.Declare the component’s return type explicitly.
Apply this diff:
-export function PlatformSelector(props: { selected: Platform }) { +export function PlatformSelector(props: { selected: Platform }): JSX.Element {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (29)
apps/portal/package.json(1 hunks)apps/portal/src/app/Header.tsx(2 hunks)apps/portal/src/app/globals.css(1 hunks)apps/portal/src/app/layout.tsx(2 hunks)apps/portal/src/app/references/components/TDoc/PageLayout.tsx(2 hunks)apps/portal/src/app/vault/page.mdx(1 hunks)apps/portal/src/components/AI/chat-button.tsx(2 hunks)apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx(0 hunks)apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx(4 hunks)apps/portal/src/components/Document/Cards/ArticleCard.tsx(1 hunks)apps/portal/src/components/Document/Code.tsx(1 hunks)apps/portal/src/components/Document/EditPage.tsx(1 hunks)apps/portal/src/components/Document/FeatureCard.tsx(1 hunks)apps/portal/src/components/Document/Heading.tsx(4 hunks)apps/portal/src/components/Document/InlineCode.tsx(1 hunks)apps/portal/src/components/Document/NextPageButton.tsx(1 hunks)apps/portal/src/components/Document/PageFooter.tsx(1 hunks)apps/portal/src/components/Document/Paragraph.tsx(1 hunks)apps/portal/src/components/Document/Steps/Steps.module.css(1 hunks)apps/portal/src/components/Document/Steps/Steps.tsx(1 hunks)apps/portal/src/components/Layouts/DocLayout.tsx(1 hunks)apps/portal/src/components/others/DocSearch.tsx(10 hunks)apps/portal/src/components/others/Feedback.tsx(1 hunks)apps/portal/src/components/others/PlatformSelector.tsx(2 hunks)apps/portal/src/components/others/Sidebar.tsx(3 hunks)apps/portal/src/components/others/Subscribe.tsx(1 hunks)apps/portal/src/components/ui/Anchor.tsx(2 hunks)apps/portal/tailwind.config.ts(1 hunks)packages/ui/src/global.css(1 hunks)
💤 Files with no reviewable changes (1)
- apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx
✅ Files skipped from review due to trivial changes (1)
- apps/portal/src/components/others/Subscribe.tsx
🚧 Files skipped from review as they are similar to previous changes (17)
- apps/portal/src/components/others/Sidebar.tsx
- apps/portal/src/components/Document/InlineCode.tsx
- apps/portal/src/components/others/DocSearch.tsx
- apps/portal/src/components/Document/Paragraph.tsx
- packages/ui/src/global.css
- apps/portal/tailwind.config.ts
- apps/portal/src/components/Document/Heading.tsx
- apps/portal/src/components/Document/Steps/Steps.tsx
- apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx
- apps/portal/src/components/Document/FeatureCard.tsx
- apps/portal/src/components/Document/EditPage.tsx
- apps/portal/src/components/Document/Code.tsx
- apps/portal/src/components/Layouts/DocLayout.tsx
- apps/portal/src/components/others/Feedback.tsx
- apps/portal/src/components/Document/Steps/Steps.module.css
- apps/portal/package.json
- apps/portal/src/components/Document/PageFooter.tsx
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{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
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/portal/src/components/Document/NextPageButton.tsxapps/portal/src/components/Document/Cards/ArticleCard.tsxapps/portal/src/components/others/PlatformSelector.tsxapps/portal/src/app/layout.tsxapps/portal/src/app/Header.tsxapps/portal/src/components/AI/chat-button.tsxapps/portal/src/components/ui/Anchor.tsxapps/portal/src/app/references/components/TDoc/PageLayout.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/portal/src/components/Document/NextPageButton.tsxapps/portal/src/components/Document/Cards/ArticleCard.tsxapps/portal/src/components/others/PlatformSelector.tsxapps/portal/src/app/layout.tsxapps/portal/src/app/Header.tsxapps/portal/src/components/AI/chat-button.tsxapps/portal/src/components/ui/Anchor.tsxapps/portal/src/app/references/components/TDoc/PageLayout.tsx
🧠 Learnings (11)
📚 Learning: 2025-07-07T21:21:47.488Z
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/portal/src/components/Document/NextPageButton.tsxapps/portal/src/components/AI/chat-button.tsxapps/portal/src/components/ui/Anchor.tsx
📚 Learning: 2025-06-18T04:30:04.326Z
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/portal/src/components/Document/Cards/ArticleCard.tsxapps/portal/src/components/ui/Anchor.tsx
📚 Learning: 2025-06-18T04:27:16.172Z
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/portal/src/components/Document/Cards/ArticleCard.tsxapps/portal/src/components/ui/Anchor.tsx
📚 Learning: 2025-07-31T16:17:42.753Z
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/portal/src/components/AI/chat-button.tsxapps/portal/src/components/ui/Anchor.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
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/portal/src/components/AI/chat-button.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
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/portal/src/components/AI/chat-button.tsxapps/portal/src/components/ui/Anchor.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
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/portal/src/components/ui/Anchor.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
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/portal/src/components/ui/Anchor.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Use `NavLink` for internal navigation to get active state handling
Applied to files:
apps/portal/src/components/ui/Anchor.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
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/portal/src/app/references/components/TDoc/PageLayout.tsx
📚 Learning: 2025-05-29T00:46:09.063Z
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/portal/src/app/vault/page.mdx
🧬 Code graph analysis (4)
apps/portal/src/components/others/PlatformSelector.tsx (1)
packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Link(46-64)
apps/portal/src/app/layout.tsx (1)
packages/ui/src/lib/utils.ts (1)
cn(4-6)
apps/portal/src/app/Header.tsx (3)
packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Link(46-64)apps/portal/src/components/others/DocSearch.tsx (1)
DocSearch(313-389)apps/portal/src/components/AI/chat-button.tsx (1)
ChatButton(13-80)
apps/portal/src/app/references/components/TDoc/PageLayout.tsx (1)
apps/portal/src/components/Document/Cards/ArticleCard.tsx (1)
ArticleIconCard(31-70)
⏰ 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). (8)
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (9)
apps/portal/src/app/vault/page.mdx (1)
22-23: Vertical stack aligns with new spacing systemSwitching from the responsive grid to a stacked layout with
space-y-4matches the updated spacing approach in this PR and keeps the cards evenly separated.apps/portal/src/components/Document/Cards/ArticleCard.tsx (1)
43-66: Icon badge refresh aligns with the new card specThe rounded pill around the icon plus the tightened typography/spacing reads much closer to the updated design tokens—looks good.
apps/portal/src/app/references/components/TDoc/PageLayout.tsx (1)
330-332: Detail heading weight is a nice hierarchy bumpThe added
font-mediumgives those subgroup summaries a clearer visual step—good call.apps/portal/src/components/ui/Anchor.tsx (1)
28-29: Icon swap LGTMThe hash glyph lines up nicely with the heading anchor affordance; no issues spotted.
apps/portal/src/components/AI/chat-button.tsx (1)
30-31: New icon choice looks goodThe BrainIcon reads immediately as “Ask AI” and plugs straight into the existing layout. No concerns.
apps/portal/src/app/globals.css (1)
1-3: Ligatures tweak LGTMEnabling
ligaglobally meshes well with the new Geist typography—no concerns.apps/portal/src/app/Header.tsx (1)
236-242: Addrelwhen opening external links in a new tabLinking to GitHub with
target="_blank"but norel="noopener noreferrer"exposes us to reverse-tabnabbing. Please include the rel attributes.Apply this diff to fix it:
<Link className="text-foreground" href="https://github.com/thirdweb-dev" - target="_blank" + rel="noreferrer noopener" + target="_blank" >⛔ Skipped due to learnings
Learnt from: MananTank PR: thirdweb-dev/js#7984 File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/FeatureCard.client.tsx:93-99 Timestamp: 2025-09-05T19:45:22.949Z Learning: In the thirdweb dashboard project, rel="noopener noreferrer" attributes are not required for external links with target="_blank" in Link components, as confirmed by MananTank.Learnt from: MananTank PR: thirdweb-dev/js#7812 File: apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx:48-60 Timestamp: 2025-08-07T20:43:21.864Z Learning: In the TokenBanner component at apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx, the Link components use target="_blank" with internal application routes (starting with "/") to open pages in new tabs within the same application. These internal links do not require rel="noopener noreferrer" security attributes, which are only needed for external 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: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.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.apps/portal/src/app/layout.tsx (1)
3-4: Geist font integration looks correctImporting the pre-configured Geist font exports and wiring their variable classes into the body ensures Tailwind’s
font-sans/font-monomappings resolve properly. No issues spotted.Also applies to: 26-26
apps/portal/src/components/others/PlatformSelector.tsx (1)
31-34: LGTM: Content sizing/offsets look good.min-w and sideOffset align with the updated compact UI.
Merge activity
|
<!--
## 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 introduces several enhancements and styling updates across various components in the application, including adjustments to CSS, layout changes, and the addition of a new package, `geist`. It aims to improve the overall appearance and functionality of the portal.
### Detailed summary
- Added `font-feature-settings` to `globals.css`.
- Updated `text-rendering`, `-webkit-font-smoothing`, and `text-size-adjust` in `global.css`.
- Included `geist` package in `package.json`.
- Modified layout and spacing in `vault/page.mdx`.
- Adjusted classes for `ApiEndpoint.tsx`, `Paragraph.tsx`, and `InlineCode.tsx`.
- Changed text color in `Subscribe.tsx`.
- Revised spacing and border styles in various components.
- Updated icons in `Anchor.tsx` and `ChatButton.tsx`.
- Enhanced styling of buttons and links across multiple components.
- Improved overall layout structure in `Header.tsx` and sidebar components.
- Refined search modal styles and item presentation in `DocSearch.tsx`.
> ✨ 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
- Style
- Switched site typography to Geist, enabled ligatures and improved text rendering.
- Redesigned header with central branding, consolidated controls, mobile menu and subtle backdrop.
- Refreshed visuals across search, footer, sidebar, platform selector, steps, cards, code/inline code, and mobile sidebar.
- Updated icons (chat, next-page, anchors), spacing/typography tweaks; vault features now stack vertically.
- Refactor
- Localized an article card component and reorganized footer/next-page flows; Edit link now wrapped in a button.
- Chores
- Added Geist dependency and extended Tailwind font settings; global font/rendering tweaks.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
09-25-portal_ui_tweaks
branch
from
76b94eb to
10fb338
Compare
vercel
bot
temporarily deployed
to
Production – thirdweb_playground
PR-Codex overview
This PR focuses on enhancing the styling and structure of the application, updating CSS properties, improving component layouts, and optimizing imports. It also includes updates to package dependencies.
Detailed summary
font-feature-settingsinglobals.css.text-rendering,-webkit-font-smoothing, andtext-size-adjustinglobal.css.page.mdx.Document/Paragraphcomponent.InlineCodecomponent.Subscribecomponent.tailwind.config.tswith new font families.AnchorandChatButtoncomponents.NextPageButtonandPageFooter.EditPagecomponent to use aButton.Headingcomponents.DocSidebarMobilefor improved layout.RequestExamplecomponent.SearchModalContentfor better spacing and layout.Headercomponent structure and styling.geistdependency inpackage.json.Summary by CodeRabbit
Style
Refactor
Chores