Conversation
Signed-off-by: prxt6529 <prxt@6529.io>
Signed-off-by: prxt6529 <prxt@6529.io>
WalkthroughAdds TDH main and historic-boosts pages and a Definitions page (server wrappers + client components), removes the legacy Metrics client page and its E2E test, updates navigation/links and breadcrumbs to surface TDH and Definitions, extends TDH types/UI with SZN12 and TDH v1.4 references, and adjusts minor styles. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Nav as Sidebar/Header
participant Router as Next.js Router
participant Server as server (page.tsx)
participant Client as client (page.client.tsx)
User->>Nav: Click "TDH" or "Definitions"
Nav->>Router: navigate("/network/tdh" or "/network/definitions")
Router->>Server: request server page
Server->>Client: render server wrapper -> mount client component
Client-->>User: set title and render content (TDH v1.4 / SZN12 or Definitions)
note right of Client: Client uses useSetTitle / TitleContext and renders nav links
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
app/network/definitions/page.tsx (1)
7-7: Consider migrating to TailwindCSS classes.The component uses
styles.mainfrom an SCSS module, but the coding guidelines specify using TailwindCSS for styling in.tsxfiles. If this pattern is being phased out, consider replacing it with equivalent Tailwind utility classes.Apply this diff to use TailwindCSS:
-import styles from "@/styles/Home.module.scss"; + + <main className="tw-flex tw-min-h-screen tw-flex-col tw-items-center"> - <main className={styles.main}> <DefinitionsClient /> </main>Note: Adjust Tailwind classes to match the actual styles defined in
Home.module.scss.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (18)
app/network/definitions/page.client.tsx(1 hunks)app/network/definitions/page.tsx(1 hunks)app/network/metrics/page.client.tsx(0 hunks)app/network/stats/page.tsx(1 hunks)app/network/tdh/historic-boosts/page.client.tsx(1 hunks)app/network/tdh/historic-boosts/page.tsx(1 hunks)app/network/tdh/page.client.tsx(1 hunks)app/network/tdh/page.tsx(1 hunks)components/about/AboutMinting.tsx(1 hunks)components/brain/my-stream/MyStreamWaveFAQ.tsx(1 hunks)components/header/AppSidebar.tsx(1 hunks)components/header/Header.module.scss(1 hunks)components/header/HeaderMobileMenu.tsx(1 hunks)components/header/HeaderNavConfig.ts(1 hunks)components/user/stats/UserPageStatsBoostBreakdown.tsx(2 hunks)entities/ITDH.ts(1 hunks)hooks/useBreadcrumbs.ts(2 hunks)styles/Home.module.scss(0 hunks)
💤 Files with no reviewable changes (2)
- styles/Home.module.scss
- app/network/metrics/page.client.tsx
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Do not include any comments in the code
Use react-query for data fetching
Always add readonly before propsFollow existing code style and naming conventions
Files:
app/network/tdh/historic-boosts/page.tsxcomponents/header/AppSidebar.tsxcomponents/header/HeaderMobileMenu.tsxapp/network/definitions/page.client.tsxcomponents/about/AboutMinting.tsxapp/network/tdh/page.client.tsxcomponents/brain/my-stream/MyStreamWaveFAQ.tsxcomponents/header/HeaderNavConfig.tsentities/ITDH.tsapp/network/tdh/page.tsxhooks/useBreadcrumbs.tscomponents/user/stats/UserPageStatsBoostBreakdown.tsxapp/network/tdh/historic-boosts/page.client.tsxapp/network/definitions/page.tsxapp/network/stats/page.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursorrules)
**/*.tsx: Use FontAwesome for icons
Use TailwindCSS for stylingUse React functional components with hooks for UI components
Files:
app/network/tdh/historic-boosts/page.tsxcomponents/header/AppSidebar.tsxcomponents/header/HeaderMobileMenu.tsxapp/network/definitions/page.client.tsxcomponents/about/AboutMinting.tsxapp/network/tdh/page.client.tsxcomponents/brain/my-stream/MyStreamWaveFAQ.tsxapp/network/tdh/page.tsxcomponents/user/stats/UserPageStatsBoostBreakdown.tsxapp/network/tdh/historic-boosts/page.client.tsxapp/network/definitions/page.tsxapp/network/stats/page.tsx
{app,pages}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use NextJS features that match the current version
Files:
app/network/tdh/historic-boosts/page.tsxapp/network/definitions/page.client.tsxapp/network/tdh/page.client.tsxapp/network/tdh/page.tsxapp/network/tdh/historic-boosts/page.client.tsxapp/network/definitions/page.tsxapp/network/stats/page.tsx
app/**
📄 CodeRabbit inference engine (AGENTS.md)
All new Next.js pages must be created under the
app/directory
Files:
app/network/tdh/historic-boosts/page.tsxapp/network/definitions/page.client.tsxapp/network/tdh/page.client.tsxapp/network/tdh/page.tsxapp/network/tdh/historic-boosts/page.client.tsxapp/network/definitions/page.tsxapp/network/stats/page.tsx
app/**/{page,layout}.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Routes in
app/should export agenerateMetadatafunction usinggetAppMetadata
Files:
app/network/tdh/historic-boosts/page.tsxapp/network/tdh/page.tsxapp/network/definitions/page.tsxapp/network/stats/page.tsx
🧠 Learnings (1)
📚 Learning: 2025-10-07T14:38:41.234Z
Learnt from: CR
PR: 6529-Collections/6529seize-frontend#0
File: AGENTS.md:0-0
Timestamp: 2025-10-07T14:38:41.234Z
Learning: Applies to app/**/{page,layout}.tsx : Routes in `app/` should export a `generateMetadata` function using `getAppMetadata`
Applied to files:
app/network/tdh/historic-boosts/page.tsx
🧬 Code graph analysis (7)
app/network/tdh/historic-boosts/page.tsx (2)
app/network/tdh/historic-boosts/page.client.tsx (1)
TDHHistoricBoostsPage(7-308)components/providers/metadata.ts (1)
getAppMetadata(41-72)
components/header/HeaderMobileMenu.tsx (1)
components/header/HeaderMobileUtils.tsx (3)
printMobileRow(25-35)printMobileHr(5-13)printMobileSubheader(15-23)
app/network/definitions/page.client.tsx (1)
contexts/TitleContext.tsx (1)
useSetTitle(197-205)
app/network/tdh/page.client.tsx (1)
contexts/TitleContext.tsx (1)
useSetTitle(197-205)
app/network/tdh/page.tsx (2)
app/network/tdh/page.client.tsx (1)
TDHMainPage(7-249)components/providers/metadata.ts (1)
getAppMetadata(41-72)
app/network/tdh/historic-boosts/page.client.tsx (1)
contexts/TitleContext.tsx (1)
useSetTitle(197-205)
app/network/definitions/page.tsx (2)
app/network/definitions/page.client.tsx (1)
DefinitionsClient(7-118)components/providers/metadata.ts (1)
getAppMetadata(41-72)
⏰ 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). (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (20)
app/network/stats/page.tsx (2)
3-4: LGTM: Alphabetical import ordering improves consistency.The imports are now alphabetically ordered, which is a common convention that improves code readability and maintainability.
8-8: Verify styling after removingtdhMainclass.The removal of
styles.tdhMainaligns with the broader refactoring mentioned in the PR context. However, ensure that the page layout and styling remain correct without this class.Visually inspect the Stats page at
/network/statsto confirm:
- Layout spacing and positioning are preserved
- No visual regressions compared to the previous styling
entities/ITDH.ts (1)
27-27: LGTM!The addition of
memes_szn12extends the existing seasonal meme breakdown sequence consistently.components/user/stats/UserPageStatsBoostBreakdown.tsx (4)
80-80: LGTM!The SZN12 row addition correctly follows the established pattern for seasonal meme breakdowns and uses the newly defined
memes_szn12type field.
129-131: LGTM!The TDH version link and text correctly point to the existing id="tdh-1-4" anchor in app/network/tdh/page.client.tsx.
80-80: LGTM! SZN12 meme row follows established pattern.The addition of the SZN12 row is consistent with the existing season rows (SZN1-SZN11) and correctly uses optional chaining to safely access the
memes_szn12property.
129-131: Approve: TDH v1.4 link anchor confirmed. The target route/network/tdh#tdh-1-4containsid="tdh-1-4".components/brain/my-stream/MyStreamWaveFAQ.tsx (1)
440-440: Inconsistency: AI summary mentions two Link updates, but only one change is visible.The AI summary states "Updated two Link hrefs to point to https://6529.io/network/tdh", but only line 440 is marked as changed in the provided code. Please verify if another Link change exists elsewhere in the file or if the summary is inaccurate.
hooks/useBreadcrumbs.ts (2)
3-3: LGTM!The import consolidation is clean and follows standard import ordering practices.
143-144: Verify that/network/tdh/historyrenders a single “TDH History” breadcrumb. Confirm that the normalization in useBreadcrumbs.ts (lines 143–144) produces one crumb labeled “TDH History” rather than two separate “TDH” → “History” items.components/header/HeaderNavConfig.ts (1)
60-60: LGTM!The navigation configuration updates correctly add the new TDH menu item and update the Definitions link path, aligning with the broader navigation restructuring in this PR.
Also applies to: 66-66
components/about/AboutMinting.tsx (1)
540-546: LGTM!The updates correctly rename "Network Metrics" to "Network Definitions" and update both the navigation path and displayed URL consistently.
components/header/Header.module.scss (1)
375-376: LGTM!The change from uniform padding to explicit vertical padding is appropriate for fine-tuning the nested menu layout while preserving horizontal padding behavior.
app/network/tdh/historic-boosts/page.tsx (1)
1-18: LGTM!The page component correctly follows Next.js App Router conventions, exports
generateMetadatausinggetAppMetadata, and properly renders the client component. As per coding guidelines.app/network/tdh/historic-boosts/page.client.tsx (1)
1-308: LGTM!The client component correctly uses the
"use client"directive, implements a functional component with hooks, and uses TailwindCSS for styling as required. The static content is well-organized with collapsible sections for historic TDH versions.components/header/AppSidebar.tsx (1)
82-84: LGTM!The sidebar menu updates correctly add the TDH navigation item and update the Definitions path, maintaining consistency with the navigation structure changes throughout the PR.
app/network/tdh/page.tsx (1)
1-18: LGTM!The page component follows Next.js App Router conventions correctly, exports
generateMetadatausinggetAppMetadata, and properly renders the TDHMainPage client component. As per coding guidelines.components/header/HeaderMobileMenu.tsx (1)
218-218: LGTM!The mobile menu updates correctly add the TDH navigation entry and update the Definitions path, maintaining consistency with the desktop navigation changes.
Also applies to: 221-221
app/network/tdh/page.client.tsx (1)
1-249: LGTM! Well-structured informational page.The component follows Next.js 15 client component patterns correctly, uses TailwindCSS appropriately, and provides clear, well-organized content about TDH calculations and boosts. The layout with Bootstrap Container/Row/Col and cross-links to related pages enhances navigation.
app/network/definitions/page.client.tsx (1)
1-118: LGTM! Clear and well-organized definitions page.The component correctly implements a client-side page following Next.js 15 patterns, uses TailwindCSS consistently, and provides clear metric definitions with appropriate navigation links. The structure with Bootstrap layout components and responsive flexbox navigation enhances usability.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
app/network/tdh/page.client.tsx (1)
203-241: Consider extracting common Link button styling.The button styling for navigation Links is duplicated across multiple locations (lines 204-213 and 225-241). This reduces maintainability if the styling needs to change.
Consider extracting the common className into a constant:
+const BUTTON_LINK_CLASSES = "tw-inline-block tw-rounded-md tw-bg-[#eee] tw-text-black tw-font-medium tw-border-solid tw-border-[#555] hover:tw-bg-[#ddd] hover:tw-text-black tw-px-4 tw-py-2 tw-no-underline"; + export default function TDHMainPage() { useSetTitle("TDH | Network"); return (Then use it in the Link components:
<Link href="/network/tdh/historic-boosts" - className="tw-inline-block tw-rounded-md tw-bg-[#eee] tw-text-black tw-font-medium tw-border-solid tw-border-[#555] hover:tw-bg-[#ddd] hover:tw-text-black tw-px-4 tw-py-2 tw-no-underline"> + className={BUTTON_LINK_CLASSES}> View Historic Boosts </Link>app/network/definitions/page.client.tsx (1)
100-109: Consider extracting the Link button className.The navigation Link styling is repeated across all mapped links and is similar to button styling in the TDH page file. Extracting this to a shared constant or utility would improve maintainability across both files.
Example refactor:
+const NAV_BUTTON_CLASSES = "tw-flex-1 tw-min-w-[150px] tw-text-center tw-inline-block tw-rounded-md tw-bg-[#eee] tw-text-black tw-font-medium tw-border tw-border-[#555] hover:tw-bg-[#ddd] hover:tw-text-black tw-px-4 tw-py-2 tw-no-underline"; + const NAV_LINKS = [ { href: "/network/tdh", label: "TDH" },Then use it:
<Link key={href} href={href} - className="tw-flex-1 tw-min-w-[150px] tw-text-center tw-inline-block tw-rounded-md tw-bg-[#eee] tw-text-black tw-font-medium tw-border tw-border-[#555] hover:tw-bg-[#ddd] hover:tw-text-black tw-px-4 tw-py-2 tw-no-underline"> + className={NAV_BUTTON_CLASSES}> {label} </Link>Alternatively, consider creating a shared utility file for common button styles used across multiple network pages.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
app/network/definitions/page.client.tsx(1 hunks)app/network/tdh/historic-boosts/page.client.tsx(1 hunks)app/network/tdh/page.client.tsx(1 hunks)tests/pages/network-metrics.spec.ts(0 hunks)
💤 Files with no reviewable changes (1)
- tests/pages/network-metrics.spec.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- app/network/tdh/historic-boosts/page.client.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Do not include any comments in the code
Use react-query for data fetching
Always add readonly before propsFollow existing code style and naming conventions
Files:
app/network/tdh/page.client.tsxapp/network/definitions/page.client.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursorrules)
**/*.tsx: Use FontAwesome for icons
Use TailwindCSS for stylingUse React functional components with hooks for UI components
Files:
app/network/tdh/page.client.tsxapp/network/definitions/page.client.tsx
{app,pages}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use NextJS features that match the current version
Files:
app/network/tdh/page.client.tsxapp/network/definitions/page.client.tsx
app/**
📄 CodeRabbit inference engine (AGENTS.md)
All new Next.js pages must be created under the
app/directory
Files:
app/network/tdh/page.client.tsxapp/network/definitions/page.client.tsx
🧬 Code graph analysis (2)
app/network/tdh/page.client.tsx (1)
contexts/TitleContext.tsx (1)
useSetTitle(197-205)
app/network/definitions/page.client.tsx (1)
contexts/TitleContext.tsx (1)
useSetTitle(197-205)
⏰ 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). (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (5)
app/network/tdh/page.client.tsx (3)
1-9: LGTM!The imports and component setup follow Next.js and React best practices. The use of the
useSetTitlehook is correct for setting the page title.
32-39: Past issue resolved.The duplicate content mentioned in the previous review has been removed. The code now correctly shows only the bulleted list without any trailing duplicate text.
49-202: LGTM!The TDH 1.4 boost explanation section is well-structured with clear examples and proper formatting. The mathematical formulas use appropriate HTML elements (superscript) for readability.
app/network/definitions/page.client.tsx (2)
1-13: LGTM!Good use of const assertion on
NAV_LINKSfor type safety. The imports and constant declaration follow best practices.
15-98: LGTM!The definitions are clearly structured and well-formatted. The inline TDH link uses appropriate styling that differs from the navigation buttons, which is correct for inline text links.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
__tests__/app/networkPages.test.tsx (2)
33-39: Consider using the existingrenderWithAuthutility.A
renderWithAuthhelper already exists in__tests__/utils/testContexts.tsxwith support for customizableauthValue. Using the shared utility reduces duplication and provides more flexibility for future test variations.Apply this diff to use the existing utility:
+import { renderWithAuth } from "@/utils/testContexts"; + -function renderWithAuth(component: React.ReactElement) { - return render( - <AuthContext.Provider value={mockAuthContext}> - {component} - </AuthContext.Provider> - ); -}If the existing utility requires adjustments to
mockAuthContext, pass it as the second parameter:renderWithAuth(<TDHPage />, mockAuthContext);
14-58: Consider removing inline comments.Per coding guidelines for
**/*.{ts,tsx}files, comments should not be included in the code. While comments in test files can improve readability, consider whether the test structure and naming alone can convey intent.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
__tests__/app/networkPages.test.tsx(3 hunks)app/network/definitions/page.client.tsx(1 hunks)app/network/tdh/page.client.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- app/network/tdh/page.client.tsx
- app/network/definitions/page.client.tsx
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Do not include any comments in the code
Use react-query for data fetching
Always add readonly before propsFollow existing code style and naming conventions
Files:
__tests__/app/networkPages.test.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursorrules)
**/*.tsx: Use FontAwesome for icons
Use TailwindCSS for stylingUse React functional components with hooks for UI components
Files:
__tests__/app/networkPages.test.tsx
__tests__/**
📄 CodeRabbit inference engine (tests/AGENTS.md)
Place Jest test suites under the
__tests__directory mirroring source folders (e.g., components, contexts, hooks, utils)
Files:
__tests__/app/networkPages.test.tsx
{**/__tests__/**,**/*.test.{ts,tsx}}
📄 CodeRabbit inference engine (AGENTS.md)
{**/__tests__/**,**/*.test.{ts,tsx}}: If coverage on a modified file is below 80%, add meaningful tests to raise it to at least 80%
Mock external dependencies and APIs in tests
Files:
__tests__/app/networkPages.test.tsx
**/__tests__/**
📄 CodeRabbit inference engine (AGENTS.md)
Place tests in
__tests__/directories when organizing standalone test suites
Files:
__tests__/app/networkPages.test.tsx
**/*.test.tsx
📄 CodeRabbit inference engine (AGENTS.md)
When co-locating tests with components, name them
ComponentName.test.tsx
Files:
__tests__/app/networkPages.test.tsx
🧬 Code graph analysis (1)
__tests__/app/networkPages.test.tsx (1)
__tests__/utils/testContexts.tsx (1)
renderWithAuth(41-50)
⏰ 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). (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (2)
__tests__/app/networkPages.test.tsx (2)
70-92: LGTM! Test coverage for TDH and Definitions pages looks solid.The test cases appropriately verify:
- Page rendering with correct headings
- Presence of key content elements (TDH calculation details, definitions)
- Alignment with the new TDH and Definitions pages that replaced Community Metrics
100-110: LGTM! Metadata generation tests are correct.The metadata tests properly verify title and description for both TDH and Definitions pages, replacing the old Metrics metadata tests.
Signed-off-by: prxt6529 <prxt@6529.io>
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
app/network/tdh/page.client.tsx (1)
7-8: Consider extracting shared button styles to a centralized location.The
BUTTON_LINK_CLASSESconstant is defined similarly in both this file andapp/network/definitions/page.client.tsxwith slight variations. This duplication makes it harder to maintain consistent styling across pages.Consider moving these styles to a shared constants file or creating a reusable component.
For example, create a new file
components/ui/ButtonLink.tsx:import Link from "next/link"; const BUTTON_LINK_CLASSES = "tw-inline-block tw-rounded-md tw-bg-[#eee] tw-text-black tw-font-medium tw-border tw-border-[#555] hover:tw-bg-[#ddd] hover:tw-text-black tw-px-4 tw-py-2 tw-no-underline"; interface ButtonLinkProps { readonly href: string; readonly children: React.ReactNode; readonly className?: string; } export default function ButtonLink({ href, children, className = "" }: ButtonLinkProps) { return ( <Link href={href} className={`${BUTTON_LINK_CLASSES} ${className}`}> {children} </Link> ); }Then use it in both files:
-import Link from "next/link"; +import ButtonLink from "@/components/ui/ButtonLink"; - -const BUTTON_LINK_CLASSES = - "tw-inline-block tw-rounded-md tw-bg-[#eee] tw-text-black tw-font-medium tw-border-solid tw-border-[#555] hover:tw-bg-[#ddd] hover:tw-text-black tw-px-4 tw-py-2 tw-no-underline";And update usages:
- <Link - href="/network/tdh/historic-boosts" - className={BUTTON_LINK_CLASSES}> + <ButtonLink href="/network/tdh/historic-boosts"> View Historic Boosts - </Link> + </ButtonLink>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
app/network/definitions/page.client.tsx(1 hunks)app/network/tdh/historic-boosts/page.client.tsx(1 hunks)app/network/tdh/page.client.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- app/network/tdh/historic-boosts/page.client.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Do not include any comments in the code
Use react-query for data fetching
Always add readonly before propsFollow existing code style and naming conventions
Files:
app/network/tdh/page.client.tsxapp/network/definitions/page.client.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursorrules)
**/*.tsx: Use FontAwesome for icons
Use TailwindCSS for stylingUse React functional components with hooks for UI components
Files:
app/network/tdh/page.client.tsxapp/network/definitions/page.client.tsx
{app,pages}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use NextJS features that match the current version
Files:
app/network/tdh/page.client.tsxapp/network/definitions/page.client.tsx
app/**
📄 CodeRabbit inference engine (AGENTS.md)
All new Next.js pages must be created under the
app/directory
Files:
app/network/tdh/page.client.tsxapp/network/definitions/page.client.tsx
🧬 Code graph analysis (2)
app/network/tdh/page.client.tsx (1)
contexts/TitleContext.tsx (1)
useSetTitle(197-205)
app/network/definitions/page.client.tsx (1)
contexts/TitleContext.tsx (1)
useSetTitle(197-205)
⏰ 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). (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (3)
app/network/tdh/page.client.tsx (1)
1-244: Overall structure looks good.The component is well-organized with clear sections explaining TDH calculations, categories, and cross-links. The use of semantic HTML, TailwindCSS, and Next.js patterns aligns with the coding guidelines.
app/network/definitions/page.client.tsx (2)
7-12: Good use of a navigation links array.The
NAV_LINKSarray withas constis a clean pattern that centralizes the navigation structure and makes it easy to maintain. This approach is preferable to hardcoding links throughout the component.
93-96: Inline link styling is appropriate for this context.The TDH link here uses different padding (
tw-px-1 tw-py-0.5) compared to the button links, which is appropriate for an inline link within a paragraph. This is not duplication but rather context-appropriate styling.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
app/network/tdh/historic-boosts/page.client.tsx (1)
26-26: Consider removing theas anytype assertion.The
as anybypasses TypeScript's type checking. You can achieve the same result more safely using React.ElementType or conditional JSX.Option 1: Use conditional JSX (clearest approach):
- const Heading = (props.headingVariant === "h3" ? "h3" : "p") as any; - const headingClass = - props.headingVariant === "h3" - ? "tw-mt-3 tw-font-medium" - : "tw-font-medium tw-text-lg tw-mb-2"; - - return ( - <> - <Heading className={headingClass}>Category A</Heading> + const headingClass = + props.headingVariant === "h3" + ? "tw-mt-3 tw-font-medium" + : "tw-font-medium tw-text-lg tw-mb-2"; + + return ( + <> + {props.headingVariant === "h3" ? ( + <h3 className={headingClass}>Category A</h3> + ) : ( + <p className={headingClass}>Category A</p> + )}Option 2: Use React.ElementType (if you prefer the variable approach):
- const Heading = (props.headingVariant === "h3" ? "h3" : "p") as any; + const Heading: React.ElementType = props.headingVariant === "h3" ? "h3" : "p";
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
app/network/definitions/page.client.tsx(1 hunks)app/network/definitions/page.tsx(1 hunks)app/network/tdh/historic-boosts/page.client.tsx(1 hunks)app/network/tdh/historic-boosts/page.tsx(1 hunks)app/network/tdh/page.client.tsx(1 hunks)app/network/tdh/page.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- app/network/definitions/page.client.tsx
- app/network/tdh/page.client.tsx
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Do not include any comments in the code
Use react-query for data fetching
Always add readonly before propsFollow existing code style and naming conventions
Files:
app/network/tdh/historic-boosts/page.tsxapp/network/tdh/historic-boosts/page.client.tsxapp/network/definitions/page.tsxapp/network/tdh/page.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursorrules)
**/*.tsx: Use FontAwesome for icons
Use TailwindCSS for stylingUse React functional components with hooks for UI components
Files:
app/network/tdh/historic-boosts/page.tsxapp/network/tdh/historic-boosts/page.client.tsxapp/network/definitions/page.tsxapp/network/tdh/page.tsx
{app,pages}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use NextJS features that match the current version
Files:
app/network/tdh/historic-boosts/page.tsxapp/network/tdh/historic-boosts/page.client.tsxapp/network/definitions/page.tsxapp/network/tdh/page.tsx
app/**
📄 CodeRabbit inference engine (AGENTS.md)
All new Next.js pages must be created under the
app/directory
Files:
app/network/tdh/historic-boosts/page.tsxapp/network/tdh/historic-boosts/page.client.tsxapp/network/definitions/page.tsxapp/network/tdh/page.tsx
app/**/{page,layout}.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Routes in
app/should export agenerateMetadatafunction usinggetAppMetadata
Files:
app/network/tdh/historic-boosts/page.tsxapp/network/definitions/page.tsxapp/network/tdh/page.tsx
🧠 Learnings (1)
📚 Learning: 2025-10-07T14:38:41.234Z
Learnt from: CR
PR: 6529-Collections/6529seize-frontend#0
File: AGENTS.md:0-0
Timestamp: 2025-10-07T14:38:41.234Z
Learning: Applies to app/**/{page,layout}.tsx : Routes in `app/` should export a `generateMetadata` function using `getAppMetadata`
Applied to files:
app/network/tdh/historic-boosts/page.tsxapp/network/tdh/page.tsx
🧬 Code graph analysis (4)
app/network/tdh/historic-boosts/page.tsx (2)
app/network/tdh/historic-boosts/page.client.tsx (1)
TDHHistoricBoostsPage(128-195)components/providers/metadata.ts (1)
getAppMetadata(41-72)
app/network/tdh/historic-boosts/page.client.tsx (1)
contexts/TitleContext.tsx (1)
useSetTitle(197-205)
app/network/definitions/page.tsx (2)
app/network/definitions/page.client.tsx (1)
DefinitionsClient(17-113)components/providers/metadata.ts (1)
getAppMetadata(41-72)
app/network/tdh/page.tsx (5)
app/network/tdh/page.client.tsx (1)
TDHMainPage(10-244)app/network/definitions/page.tsx (1)
generateMetadata(8-13)app/network/tdh/historic-boosts/page.tsx (1)
generateMetadata(8-13)app/network/stats/page.tsx (1)
generateMetadata(26-31)components/providers/metadata.ts (1)
getAppMetadata(41-72)
⏰ 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). (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (5)
app/network/tdh/page.tsx (1)
1-13: LGTM!The page follows Next.js App Router patterns correctly and adheres to all coding guidelines. The implementation is consistent with other network pages (definitions, historic-boosts, stats) and properly exports
generateMetadatausinggetAppMetadata.app/network/definitions/page.tsx (1)
1-13: LGTM!The implementation follows the same clean pattern as other network pages. All coding guidelines are met, and the metadata generation is properly configured.
app/network/tdh/historic-boosts/page.tsx (1)
1-13: LGTM!Consistent with the other network page implementations. The page correctly separates server and client components and properly exports metadata using
getAppMetadata.app/network/tdh/historic-boosts/page.client.tsx (2)
1-25: LGTM!The component structure is well-organized with proper use of client directive, imports, and the
Readonlyutility for props. The separation into smaller presentational components enhances readability.
27-195: LGTM!The rest of the implementation is clean and well-structured. The reusable category components, navigation links, and main page layout all follow React and Next.js best practices. The use of Tailwind classes is consistent, and the component properly manages page title via
useSetTitle.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
app/network/tdh/historic-boosts/page.client.tsx (2)
26-26: Replaceas anywith type-safe element selection.The
as anycast bypasses TypeScript's type checking. UseReact.createElementor a discriminated union for better type safety.Apply this diff:
- const Heading = (props.headingVariant === "h3" ? "h3" : "p") as any; + const Heading = props.headingVariant === "h3" ? "h3" : "p"; const headingClass = props.headingVariant === "h3" ? "tw-mt-3 tw-font-medium" : "tw-font-medium tw-text-lg tw-mb-2"; return ( <> - <Heading className={headingClass}>Category A</Heading> + {React.createElement(Heading, { className: headingClass }, "Category A")}
182-189: Extract shared button link styling to reduce duplication.The button link className at line 186 is duplicated (with variations) across multiple TDH/Network pages. This creates maintenance burden and risks styling inconsistency.
Consider one of these approaches:
- Extract to a shared constant in a common file (e.g.,
components/network/constants.ts):export const BUTTON_LINK_CLASSES = "tw-flex-1 tw-min-w-[150px] tw-text-center tw-inline-block tw-rounded-md tw-bg-[#eee] tw-text-black tw-font-medium tw-border-solid tw-border-[#222] hover:tw-bg-[#ddd] hover:tw-text-black tw-px-4 tw-py-2 tw-no-underline";
- Create a reusable
<ButtonLink>component:function ButtonLink({ href, children }: { href: string; children: ReactNode }) { return ( <Link href={href} className="tw-flex-1 tw-min-w-[150px] tw-text-center tw-inline-block tw-rounded-md tw-bg-[#eee] tw-text-black tw-font-medium tw-border-solid tw-border-[#222] hover:tw-bg-[#ddd] hover:tw-text-black tw-px-4 tw-py-2 tw-no-underline"> {children} </Link> ); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
app/network/definitions/page.client.tsx(1 hunks)app/network/tdh/historic-boosts/page.client.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Do not include any comments in the code
Use react-query for data fetching
Always add readonly before propsFollow existing code style and naming conventions
Files:
app/network/definitions/page.client.tsxapp/network/tdh/historic-boosts/page.client.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursorrules)
**/*.tsx: Use FontAwesome for icons
Use TailwindCSS for stylingUse React functional components with hooks for UI components
Files:
app/network/definitions/page.client.tsxapp/network/tdh/historic-boosts/page.client.tsx
{app,pages}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use NextJS features that match the current version
Files:
app/network/definitions/page.client.tsxapp/network/tdh/historic-boosts/page.client.tsx
app/**
📄 CodeRabbit inference engine (AGENTS.md)
All new Next.js pages must be created under the
app/directory
Files:
app/network/definitions/page.client.tsxapp/network/tdh/historic-boosts/page.client.tsx
🧬 Code graph analysis (2)
app/network/definitions/page.client.tsx (1)
contexts/TitleContext.tsx (1)
useSetTitle(197-205)
app/network/tdh/historic-boosts/page.client.tsx (1)
contexts/TitleContext.tsx (1)
useSetTitle(197-205)
⏰ 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). (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (2)
app/network/tdh/historic-boosts/page.client.tsx (1)
8-17: LGTM!Clean presentational component with proper typing and appropriate use of details/summary elements.
app/network/definitions/page.client.tsx (1)
17-113: LGTM!Clean page component with well-structured content and appropriate title setting. The definitions are clearly formatted and the navigation structure is consistent with other Network pages.
|
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
app/network/definitions/page.client.tsx (1)
14-15: Consider extracting layout-specific classes and addressing code duplication.The
BUTTON_LINK_CLASSESconstant contains layout-specific classes (tw-flex-1,tw-min-w-[150px],tw-text-center) that reduce its reusability in different contexts (e.g., the inline link at lines 93-97). Additionally, this constant appears to be duplicated across multiple files (e.g.,app/network/tdh/page.client.tsx), violating the DRY principle.Consider these improvements:
- Extract base button styling to a shared constant or component
- Apply layout-specific classes directly where needed rather than in the base constant
- Create variants for different button sizes/contexts
Example refactor:
const BASE_BUTTON_LINK_CLASSES = "tw-inline-block tw-rounded-md tw-bg-[#eee] tw-text-black tw-font-medium hover:tw-bg-[#ddd] hover:tw-text-black tw-border tw-border-solid tw-border-[#222] tw-no-underline"; const NAV_BUTTON_CLASSES = `${BASE_BUTTON_LINK_CLASSES} tw-flex-1 tw-min-w-[150px] tw-text-center tw-px-4 tw-py-2 tw-w-full sm:tw-w-auto sm:tw-whitespace-nowrap`; const INLINE_BUTTON_CLASSES = `${BASE_BUTTON_LINK_CLASSES} tw-px-1 tw-py-0.5 tw-text-md`;Then extract the base constant to a shared utilities file to eliminate duplication across pages.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
app/network/definitions/page.client.tsx(1 hunks)app/network/tdh/historic-boosts/page.client.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- app/network/tdh/historic-boosts/page.client.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Do not include any comments in the code
Use react-query for data fetching
Always add readonly before propsFollow existing code style and naming conventions
Files:
app/network/definitions/page.client.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursorrules)
**/*.tsx: Use FontAwesome for icons
Use TailwindCSS for stylingUse React functional components with hooks for UI components
Files:
app/network/definitions/page.client.tsx
{app,pages}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use NextJS features that match the current version
Files:
app/network/definitions/page.client.tsx
app/**
📄 CodeRabbit inference engine (AGENTS.md)
All new Next.js pages must be created under the
app/directory
Files:
app/network/definitions/page.client.tsx
🧬 Code graph analysis (1)
app/network/definitions/page.client.tsx (1)
contexts/TitleContext.tsx (1)
useSetTitle(197-205)
⏰ 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). (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (3)
app/network/definitions/page.client.tsx (3)
1-5: LGTM!The imports are appropriate for a client-side Next.js component. The "use client" directive is correctly placed, and all necessary dependencies are imported.
7-12: LGTM!The navigation links are well-defined with proper TypeScript typing using
as const.
17-113: Component structure and logic look good.The
DefinitionsClientcomponent is well-structured with proper use of hooks, semantic HTML, and responsive design patterns. The content clearly defines the various metrics, and the navigation section provides good user experience.
2 participants
Summary by CodeRabbit
New Features
Changes
Style
Tests