Update the tutorial - #34
Conversation
WalkthroughReplaces an in-file ScrollShadow with a shared component, extends useScrollShadow API, adds TutorialTableOfContents and refactors TutorialWindow (scroll/resize/shadows/close/persistence), swaps syntax-highlighting to Shiki, removes ClearHighlightsButton exports, updates MDX imports and code-block languages, and adjusts styles and fonts. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant TOC as TutorialTableOfContents
participant Window as TutorialWindow / FloatingWindow
participant Content as StepRenderer
participant Hook as useScrollShadow
participant Shadow as ScrollShadow
participant Store as TutorialDataHandlers
Note over User,TOC: User selects tutorial entry
User->>TOC: click item
TOC->>Window: onStepChange(stepTitle)
Window->>Window: set activeStep & restore scroll position
Window->>Content: render step content inside ScrollArea
Content->>Hook: init with content ref (deps include activeStep)
Hook->>Shadow: compute top/bottom visibility
Shadow->>User: render shadows (visible/hidden)
User->>Content: scroll
Hook->>Shadow: update visibility on scroll
Note over User,Window: resize interaction
User->>Window: drag resize handle
Window->>Window: apply live constrained DOM size
Window->>Store: persist windowSize (debounced)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (3)src/**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{tsx,ts}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (2)📚 Learning: 2025-12-24T15:25:07.106ZApplied to files:
📚 Learning: 2025-12-28T23:34:13.416ZApplied to files:
🧬 Code graph analysis (1)src/utils/highlight-collection-related-info.tsx (2)
⏰ 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)
🔇 Additional comments (4)
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: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/utils/highlight-collection-related-info.tsx (1)
36-47: Reconsideraria-hidden="true"on the wrapper containing children.Setting
aria-hidden="true"hides the entire subtree from assistive technologies (screen readers). Ifchildrencontains meaningful content that users need to access, this will create an accessibility barrier.Consider whether this attribute is intentional. If the highlight wrapper is purely decorative, it might be better to apply
aria-hiddenonly to the visual highlight effect rather than the content itself, or remove it entirely if the children should remain accessible.🔎 Proposed fix if children should remain accessible
return ( <div - aria-hidden="true" className={cn( "outline outline-offset-4 transition-all ease-in-out rounded-sm", isHighlighted ? "outline-destructive bg-destructive/10 duration-300" : "outline-destructive/0 bg-destructive/0 duration-1000", )} > {children} </div> );src/components/tutorial/TutorialWindow.tsx (1)
122-124: Remove commented-out code.Lines 122-124 contain commented-out code that should be removed to maintain code cleanliness.
🔎 Proposed fix
updateWindowSizeLimits(); if (typeof window !== "undefined") { - // getTutorialDataHandlers().then(({ tutorialData }) => { - // setWindowSize(tutorialData.windowSize); - // }); window.addEventListener("resize", updateWindowSizeLimits); return () => {
🧹 Nitpick comments (2)
src/components/ToggleFloatingWindowButton.tsx (1)
18-20: Add an empty dependency array to theuseEffect.The effect is intended to run once on mount to set
mountedtotrue, but without a dependency array, it runs on every render. WhilesetMounted(true)is idempotent and won't cause re-renders after the first call, adding an empty dependency array makes the intent explicit and avoids unnecessary function calls.🔎 Proposed fix
useEffect(() => { setMounted(true); - }); + }, []);src/hooks/use-scroll-shadow.ts (1)
3-7: Consider usingtypeinstead ofinterfacefor consistency.Per coding guidelines,
typeis preferred overinterfacefor type definitions in TypeScript files.🔎 Proposed change
-export interface UseScrollShadowReturn { +export type UseScrollShadowReturn = { scrollRef: React.RefObject<HTMLDivElement | null>; canScrollUp: boolean; canScrollDown: boolean; -} +};
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
src/components/TodoBoards.tsxsrc/components/ToggleFloatingWindowButton.tsxsrc/components/tutorial/TutorialTableOfContents.tsxsrc/components/tutorial/TutorialWindow.tsxsrc/components/tutorial/index.tsxsrc/components/ui/scroll-shadow.tsxsrc/components/ui/sidebar.tsxsrc/hooks/use-scroll-shadow.tssrc/routes/__root.tsxsrc/utils/highlight-collection-related-info.tsx
🧰 Additional context used
📓 Path-based instructions (3)
src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Always ensure no formatting/linting issues exist in code - use
pnpm check --fixto automatically fix issues
Files:
src/components/ToggleFloatingWindowButton.tsxsrc/components/ui/sidebar.tsxsrc/components/tutorial/TutorialTableOfContents.tsxsrc/components/ui/scroll-shadow.tsxsrc/utils/highlight-collection-related-info.tsxsrc/hooks/use-scroll-shadow.tssrc/routes/__root.tsxsrc/components/TodoBoards.tsxsrc/components/tutorial/TutorialWindow.tsxsrc/components/tutorial/index.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer functions over arrow functions for React components
Files:
src/components/ToggleFloatingWindowButton.tsxsrc/components/ui/sidebar.tsxsrc/components/tutorial/TutorialTableOfContents.tsxsrc/components/ui/scroll-shadow.tsxsrc/utils/highlight-collection-related-info.tsxsrc/hooks/use-scroll-shadow.tssrc/routes/__root.tsxsrc/components/TodoBoards.tsxsrc/components/tutorial/TutorialWindow.tsxsrc/components/tutorial/index.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer
typeoverinterfacefor type definitions
Files:
src/components/ToggleFloatingWindowButton.tsxsrc/components/ui/sidebar.tsxsrc/components/tutorial/TutorialTableOfContents.tsxsrc/components/ui/scroll-shadow.tsxsrc/utils/highlight-collection-related-info.tsxsrc/hooks/use-scroll-shadow.tssrc/routes/__root.tsxsrc/components/TodoBoards.tsxsrc/components/tutorial/TutorialWindow.tsxsrc/components/tutorial/index.tsx
🧠 Learnings (3)
📚 Learning: 2025-12-24T15:25:07.106Z
Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 22
File: src/components/TodoBoards.tsx:63-81
Timestamp: 2025-12-24T15:25:07.106Z
Learning: In Tailwind CSS v4, prefer canonical classes using bg-linear-to-* (e.g., bg-linear-to-b, bg-linear-to-t, bg-linear-to-r) over the older bg-gradient-to-* syntax. This aligns with Tailwind LSP's suggestCanonicalClasses rule. Apply across TSX files (e.g., src/components/*.tsx); replace occurrences of bg-gradient-to-* with the corresponding bg-linear-to-* equivalents and verify gradients visually.
Applied to files:
src/components/ToggleFloatingWindowButton.tsxsrc/components/ui/sidebar.tsxsrc/components/tutorial/TutorialTableOfContents.tsxsrc/components/ui/scroll-shadow.tsxsrc/utils/highlight-collection-related-info.tsxsrc/routes/__root.tsxsrc/components/TodoBoards.tsxsrc/components/tutorial/TutorialWindow.tsxsrc/components/tutorial/index.tsx
📚 Learning: 2025-12-28T23:34:13.416Z
Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 32
File: src/components/HomeIntro.tsx:16-25
Timestamp: 2025-12-28T23:34:13.416Z
Learning: In Motion (motion/react), when configuring variant transitions, use delayChildren: stagger(x) to create per-child delays (e.g., delayChildren: stagger(0.2)). This is different from the older API that used a separate staggerChildren property. Apply this guidance to TSX files that declare motion variants (e.g., in src/components/**/*.tsx) and verify that stagger is imported from framer-motion. Ensure transitions reflect the intended stagger timing and that no conflicting delay values override the staggered effect.
Applied to files:
src/components/ToggleFloatingWindowButton.tsxsrc/components/ui/sidebar.tsxsrc/components/tutorial/TutorialTableOfContents.tsxsrc/components/ui/scroll-shadow.tsxsrc/utils/highlight-collection-related-info.tsxsrc/routes/__root.tsxsrc/components/TodoBoards.tsxsrc/components/tutorial/TutorialWindow.tsxsrc/components/tutorial/index.tsx
📚 Learning: 2025-12-29T13:20:08.377Z
Learnt from: CR
Repo: fulopkovacs/trytanstackdb.com PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-29T13:20:08.377Z
Learning: Applies to src/route/__root.tsx : The root route is located at `src/route/__root.tsx` in this TanStack Start project
Applied to files:
src/utils/highlight-collection-related-info.tsxsrc/routes/__root.tsx
🧬 Code graph analysis (6)
src/components/ToggleFloatingWindowButton.tsx (2)
src/components/ui/button.tsx (1)
Button(42-61)src/components/ui/switch.tsx (1)
Switch(6-27)
src/components/tutorial/TutorialTableOfContents.tsx (2)
src/data/tutorial.ts (2)
tutorialArticles(43-48)deepDiveArticles(64-64)src/components/ui/sidebar.tsx (8)
SidebarGroup(699-699)SidebarGroupLabel(702-702)SidebarGroupContent(701-701)SidebarMenu(706-706)SidebarMenuItem(710-710)SidebarMenuSub(712-712)SidebarMenuSubItem(714-714)SidebarMenuSubButton(713-713)
src/components/ui/scroll-shadow.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/utils/highlight-collection-related-info.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/components/tutorial/TutorialWindow.tsx (6)
src/utils/getTutorialDataHandlers.ts (1)
TutorialData(6-14)src/hooks/use-scroll-shadow.ts (1)
useScrollShadow(17-84)src/lib/utils.ts (1)
cn(4-6)src/components/tutorial/TutorialTableOfContents.tsx (1)
TutorialTableOfContents(31-76)src/components/ui/scroll-shadow.tsx (1)
ScrollShadow(3-24)src/data/tutorial.ts (1)
steps(66-66)
src/components/tutorial/index.tsx (1)
src/components/ui/button.tsx (1)
Button(63-63)
🪛 GitHub Actions: CI/CD
src/components/tutorial/TutorialTableOfContents.tsx
[error] 13-13: TS6133: 'Button' is declared but its value is never read.
🪛 GitHub Check: CI
src/components/tutorial/TutorialTableOfContents.tsx
[failure] 13-13:
'Button' is declared but its value is never read.
🔇 Additional comments (20)
src/components/ui/sidebar.tsx (1)
683-683: LGTM!Adding
transition-colorstoSidebarMenuSubButtonenables smooth color transitions on hover and active states, improving the visual feedback consistency with other sidebar components.src/routes/__root.tsx (1)
207-207: LGTM!Using the
!importantmodifier (overflow-hidden!) ensures the root HTML element's overflow styling takes precedence over any conflicting styles, which is appropriate given the new scroll shadow features being added throughout the tutorial components.src/components/ToggleFloatingWindowButton.tsx (1)
38-38: LGTM!The styling change from hardcoded orange (
bg-orange-500) to the theme-awarebg-primarywithhover:brightness-90andtransition-allimproves consistency with the design system and supports dark mode.src/utils/highlight-collection-related-info.tsx (1)
21-33: LGTM on the auto-clear highlight behavior.The effect correctly manages a timeout to auto-remove the highlight parameter after 1 second, with proper cleanup via
clearTimeout. Usingreplace: truein the navigation prevents polluting the browser history.src/components/tutorial/index.tsx (1)
77-89: LGTM!The refactored
HighLightComponentis cleaner with theButtonwrapper providing consistent styling. Usingreplace={true}on theLinkprevents polluting browser history when highlighting elements.src/components/tutorial/TutorialTableOfContents.tsx (1)
31-76: LGTM on the component structure!The
TutorialTableOfContentscomponent is well-structured with:
- Proper use of
typefor props definition (per coding guidelines)- Function declaration syntax for the component
- Clean mapping over sections and articles
- Proper external link handling with
rel="noreferrer"src/hooks/use-scroll-shadow.ts (2)
17-22: LGTM on the extended hook API!The optional
externalRefanddepsparameters provide flexibility for external control while maintaining backward compatibility. The internal ref fallback ensures the hook works without any arguments.
26-44: Good documentation for the lint suppression.The comment clearly explains why
scrollRef.currentis intentionally excluded from dependencies—refs don't trigger re-renders, and thedepsparameter provides an explicit recalculation mechanism for consumers who need it.src/components/TodoBoards.tsx (3)
52-52: LGTM!Good refactor to use the centralized
ScrollShadowcomponent from./ui/scroll-shadowinstead of a local implementation. This improves code reuse and maintainability across the application.
265-265: LGTM!The
ScrollShadowcomponent is properly integrated with theuseScrollShadowhook, usingcanScrollUpto control visibility at the top of the scrollable container.
306-306: LGTM!Consistent usage of
ScrollShadowat the bottom position, properly wired tocanScrollDownfor visibility control.src/components/ui/scroll-shadow.tsx (1)
1-24: LGTM! Clean implementation with proper Tailwind v4 syntax.The component correctly uses
bg-linear-to-*gradient classes as per Tailwind v4 conventions, and the conditional rendering logic is sound. The opacity transition provides smooth visual feedback.Based on learnings, the canonical
bg-linear-to-*classes are preferred over olderbg-gradient-to-*syntax.src/components/tutorial/TutorialWindow.tsx (8)
1-17: LGTM! Import additions support the new scroll shadow and table of contents features.All new imports are utilized in the refactored component structure.
19-35: LGTM! Clean header with proper gradient syntax and accessible close button.The component uses Tailwind v4 canonical gradient classes (
bg-linear-to-r) and provides clear window controls.Based on learnings,
bg-linear-to-*is preferred over olderbg-gradient-to-*syntax.
50-55: LGTM! Proper integration of scroll shadow hook with external ref.The
useScrollShadowhook is correctly wired with an external ref and theactiveStepdependency ensures shadow visibility updates when content changes.
57-121: LGTM! Well-implemented responsive window sizing with proper constraints.The dynamic limit calculation based on viewport size and debounced persistence provide a good UX. The use of functional state updates (lines 105-114) correctly ensures the latest state is used during window resizing.
Also applies to: 125-164
166-192: LGTM! Clean step navigation with proper state management.The function correctly clears highlights, persists the step change, and updates local state. The use of
useCallbackwith appropriate dependencies is correct.
220-336: LGTM! Sophisticated resize implementation with good UX considerations.The direct DOM manipulation during resize (lines 267-268) followed by React state sync (line 276) is an appropriate pattern for performance. The expanded hit areas and hover feedback on resize handles provide excellent usability.
338-414: LGTM! Well-structured layout with scroll shadows and dynamic content.The integration of
ScrollShadowcomponents with the scrollable content area provides clear visual feedback. The dynamic rendering of tutorial steps with optional "Next" navigation is clean and maintainable.
417-509: LGTM! Smooth animations and proper route invalidation.The motion animation with blur effects (lines 473-490) provides polished visual transitions. The router invalidation (lines 450-452) correctly ensures the loader data refreshes after window state changes, which is essential for persisting window size.
🚀 Preview DeploymentStatus: ✅ Ready! Preview URL: Open Preview Commit: Built and deployed successfully |
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/data/tutorial/collections-intro.mdx (1)
56-56: Emptyhrefattribute creates unclear UX.The link with
<a href="">click here</a>has an empty href, which causes a page reload but isn't semantically clear. Consider either removing the link markup (leaving just "reload the page") or making the instruction more explicit.🔎 Suggested fix
Option 1: Remove the link since the instruction is already clear:
- 2. reload the page (<a href="">click here</a>) + 2. reload the pageOption 2: Keep the link but use standard reload pattern:
- 2. reload the page (<a href="">click here</a>) + 2. reload the page (press F5 or Ctrl/Cmd+R)src/components/tutorial/TutorialWindow.tsx (1)
122-124: Remove commented dead code.The commented code at lines 122-124 should be removed to keep the codebase clean.
🔎 Proposed fix
updateWindowSizeLimits(); if (typeof window !== "undefined") { - // getTutorialDataHandlers().then(({ tutorialData }) => { - // setWindowSize(tutorialData.windowSize); - // }); window.addEventListener("resize", updateWindowSizeLimits);
🧹 Nitpick comments (3)
src/data/tutorial/collections-intro.mdx (1)
63-63: Grammar: missing verb in sentence.The sentence "Live queries updated incrementally" is missing the auxiliary verb "are" or needs a verb form change.
🔎 Suggested fix
-2. Live queries updated incrementally, (they use <a href="https://github.com/electric-sql/d2ts" target="_blank">`d2ts`</a>, a differential dataflow library) +2. Live queries are updated incrementally (they use <a href="https://github.com/electric-sql/d2ts" target="_blank">`d2ts`</a>, a differential dataflow library)Note: Also removed the comma before the opening parenthesis for correct punctuation.
src/components/tutorial/TutorialWindow.tsx (2)
195-202: Verify smooth scroll restoration without flicker.The scroll restoration logic (lines 195-202) combined with the
key={activeStep}on the scroll container (line 372) might cause a brief flicker where content appears at the top before scrolling to the saved position. WhenactiveStepchanges:
- The scroll container remounts (due to the key)
- Scroll position resets to 0
- The useEffect runs (depending on when
tutorialDatareference updates)- Scroll position is restored
Ensure this doesn't create a visible flash of content at the top position.
Additionally, line 199 uses
parseInt(saved.toString(), 10)whensavedshould already be a number according to theTutorialDatatype. This might be defensive programming for legacy localStorage data, but consider simplifying to justscrollRef.current.scrollTop = savedif legacy data isn't a concern.
379-403: Consider performance implications of rendering all steps.The current implementation maps over all
stepsand renders aTabsContentcomponent for each one (lines 379-403). While Radix UI'sTabsContenthides inactive content visually, all step components are still rendered to the DOM, which could impact performance if:
- There are many tutorial steps
- Step content is complex or heavy (e.g., code examples, images)
- Users are on lower-end devices
Consider implementing lazy loading or conditional rendering to only render the active step's content, especially as the tutorial grows.
Example approach:
<TabsContent value={activeStep} className="w-full overflow-x-hidden pb-3"> {activeStep && (() => { const step = steps.find(s => s.title === activeStep); return step ? ( <div className="fade-in animate-in prose dark:prose-invert prose-md prose-neutral prose-base rounded-lg"> <step.file /> {step.nextStepName && ( <div className="mt-4"> <button type="button" onClick={() => handleStepChange(step.nextStepName!)} className="text-primary underline hover:brightness-75 transition-colors cursor-pointer" > Next: {step.nextStepName} </button> </div> )} </div> ) : null; })()} </TabsContent>
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
package.jsonsrc/components/tutorial/TutorialWindow.tsxsrc/data/tutorial/collections-intro.mdxsrc/routes/__root.tsxsrc/styles.cssvite.config.ts
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer functions over arrow functions for React components
Files:
vite.config.tssrc/components/tutorial/TutorialWindow.tsxsrc/routes/__root.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer
typeoverinterfacefor type definitions
Files:
vite.config.tssrc/components/tutorial/TutorialWindow.tsxsrc/routes/__root.tsx
src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Always ensure no formatting/linting issues exist in code - use
pnpm check --fixto automatically fix issues
Files:
src/components/tutorial/TutorialWindow.tsxsrc/routes/__root.tsx
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
**/package.json: Always usepnpm installinstead ofnpm installfor installing dependencies
Always usepnpm add <package>instead ofnpm install <package>for adding packages
Always usepnpm add -D <package>instead ofnpm install --save-dev <package>for adding dev dependencies
Always usepnpm remove <package>instead ofnpm uninstall <package>for removing packages
Always usepnpm run <script>instead ofnpm run <script>for running scripts
Always usepnpm dlx <command>instead ofnpx <command>
Always usepnpm create <template>instead ofnpm create <template>
Files:
package.json
package.json
📄 CodeRabbit inference engine (AGENTS.md)
package.json: Usepnpm devfor starting the development server
Usepnpm buildfor production build
Usepnpm run testfor running tests
Usepnpm lintfor linting
Usepnpm typecheckfor type checking
Usepnpm formatfor code formatting
Usepnpm db.generateto generate database migrations
Usepnpm db.local.migrateto apply local migrations
Usepnpm db.prod.migrateto apply production migrations
Files:
package.json
🧠 Learnings (3)
📚 Learning: 2025-12-24T15:25:07.106Z
Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 22
File: src/components/TodoBoards.tsx:63-81
Timestamp: 2025-12-24T15:25:07.106Z
Learning: In Tailwind CSS v4, prefer canonical classes using bg-linear-to-* (e.g., bg-linear-to-b, bg-linear-to-t, bg-linear-to-r) over the older bg-gradient-to-* syntax. This aligns with Tailwind LSP's suggestCanonicalClasses rule. Apply across TSX files (e.g., src/components/*.tsx); replace occurrences of bg-gradient-to-* with the corresponding bg-linear-to-* equivalents and verify gradients visually.
Applied to files:
src/components/tutorial/TutorialWindow.tsxsrc/routes/__root.tsx
📚 Learning: 2025-12-28T23:34:13.416Z
Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 32
File: src/components/HomeIntro.tsx:16-25
Timestamp: 2025-12-28T23:34:13.416Z
Learning: In Motion (motion/react), when configuring variant transitions, use delayChildren: stagger(x) to create per-child delays (e.g., delayChildren: stagger(0.2)). This is different from the older API that used a separate staggerChildren property. Apply this guidance to TSX files that declare motion variants (e.g., in src/components/**/*.tsx) and verify that stagger is imported from framer-motion. Ensure transitions reflect the intended stagger timing and that no conflicting delay values override the staggered effect.
Applied to files:
src/components/tutorial/TutorialWindow.tsxsrc/routes/__root.tsx
📚 Learning: 2025-12-29T13:20:08.377Z
Learnt from: CR
Repo: fulopkovacs/trytanstackdb.com PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-29T13:20:08.377Z
Learning: Applies to src/route/__root.tsx : The root route is located at `src/route/__root.tsx` in this TanStack Start project
Applied to files:
src/data/tutorial/collections-intro.mdxsrc/routes/__root.tsx
🧬 Code graph analysis (1)
src/components/tutorial/TutorialWindow.tsx (6)
src/utils/getTutorialDataHandlers.ts (1)
TutorialData(6-14)src/hooks/use-scroll-shadow.ts (1)
useScrollShadow(17-84)src/lib/utils.ts (1)
cn(4-6)src/components/tutorial/TutorialTableOfContents.tsx (1)
TutorialTableOfContents(30-75)src/components/ui/scroll-shadow.tsx (1)
ScrollShadow(3-24)src/data/tutorial.ts (1)
steps(66-66)
🔇 Additional comments (16)
src/data/tutorial/collections-intro.mdx (1)
18-18: LGTM! Correct language identifiers for JSX content.Changing the code fence language from
tstotsxis appropriate since both blocks contain JSX syntax. This ensures proper syntax highlighting in documentation viewers that support Shiki or similar highlighters.Also applies to: 31-31
vite.config.ts (2)
3-3: LGTM - Syntax highlighting migration to Shiki.The import of
rehypeShikialigns with the migration from Prism to Shiki for better syntax highlighting capabilities.
30-54: LGTM - Well-configured Shiki setup with custom transformer.The configuration properly sets up dual-theme support and adds a custom transformer to inject
data-languageattributes for styling purposes. The type assertion in the transformer (lines 43-45) is a reasonable approach to access MDX plugin context.src/styles.css (3)
14-17: LGTM - Consistent font variable usage.The code styling now uses the
--font-monoCSS variable, which provides consistency with the font definition at line 178.
19-52: LGTM - Comprehensive Shiki code block styling.The styling provides:
- Clean code block presentation with borders and padding
- Language badge in top-right corner
- Dual-theme support with proper CSS variable mapping
The
!importantdeclarations (lines 44-45, 50-51) are necessary to override Shiki's inline styles and are appropriate here.
178-178: LGTM - Font updated to JetBrains Mono.This change aligns with the font link update in
src/routes/__root.tsx(line 59) and the PR objective to improve legibility and size parity with Space Grotesk.src/routes/__root.tsx (3)
8-8: LGTM - Import added for existing usage.The
ScriptOnceimport was missing but was already being used at line 201. This corrects the import statement.
59-59: LGTM - Font updated to JetBrains Mono with display=swap.This change aligns with:
- The CSS variable update in
src/styles.css(line 178)- PR objectives to improve legibility and size parity
The
display=swapparameter ensures text remains visible during font loading.
206-206: LGTM - Correct Tailwind v4 important modifier syntax.The
!suffix onoverflow-hidden!follows Tailwind v4's breaking change where the important modifier now comes at the end of the utility name instead of at the beginning.Based on learnings: This aligns with Tailwind v4 syntax requirements.
package.json (1)
42-42: Version @shikijs/rehype@3.20.0 is stable and has no known security vulnerabilities.The latest version matches the pinned version in package.json, and no security advisories were found.
src/components/tutorial/TutorialWindow.tsx (6)
1-17: LGTM!The import changes cleanly reflect the new architecture with scroll shadows, table of contents navigation, and streamlined tab usage.
19-35: LGTM!The header component is well-structured with proper Tailwind v4 gradient syntax (
bg-linear-to-r), clean close button integration, and follows the coding guideline of using function declarations.
266-268: Verify direct DOM manipulation doesn't cause React state inconsistencies.The code bypasses React's rendering by directly manipulating the DOM during resize for performance (lines 266-268), then syncs the final size back to React state on mouseup (lines 273-276). While this is a valid optimization technique, ensure it doesn't cause any hydration mismatches, visual glitches, or state synchronization issues, especially when combined with the CSS containment on line 376.
53-55: LGTM!The scroll shadow hook integration is correctly wired with the
scrollRefand includesactiveStepas a dependency to recalculate shadows when content changes.
365-409: LGTM!The
ScrollShadowcomponents are properly positioned at top and bottom with correct visibility bindings and matchingfromColor="from-card"to blend seamlessly with the card background.
417-509: LGTM!The
TutorialWindowcomponent is well-structured with proper state management, router integration, and smooth animations. ThetoggleWindowcallback is correctly threaded through to theFloatingWindowcomponent.
…is more similar to Space Grotesk)
efc08e3 to
8e4931b
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
src/utils/highlight-collection-related-info.tsx (2)
38-44: Clean transition logic with minor cleanup needed.The styling implementation creates a smooth highlight-to-normal transition with appropriate durations (300ms for highlighting, 1000ms for fade-out). The use of
outline-destructive/0for the unhighlighted state is a good pattern for smooth transitions.Consider removing the commented-out code on line 43 to keep the codebase clean.
🔎 Cleanup: Remove commented code
isHighlighted ? "outline-destructive bg-destructive/10 duration-300" : "outline-destructive/0 bg-destructive/0 duration-1000", - // "outline-destructive bg-destructive/10 outline rounded-sm outline-offset-4", )}
9-9: Remove commented-outasChildprop.The
asChildprop is commented out in both the destructuring (line 9) and type definition (line 13). If this feature isn't planned for the near term, removing these comments would improve code clarity.🔎 Cleanup: Remove commented prop
export function HighlightWrapper({ highlightId, children, - // asChild, }: { highlightId: Exclude<HighlightParam, undefined>; children: ReactNode; - // asChild?: boolean; }) {Also applies to: 13-13
src/components/tutorial/index.tsx (1)
85-88: Button component appears incomplete.The Button component at line 85 has an empty
className=""prop and directly wraps the SearchIcon without any text or accessible label. Consider:
- Removing the empty className or adding meaningful styles
- Adding an
aria-labelto the Button for accessibility- Ensuring the Button variant/size is appropriate for this use case
🔎 Proposed improvements
- <Button className=""> + <Button aria-label={`Highlight ${children || newHighLightGroupId}`}> <SearchIcon /> {children} </Button>
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (15)
package.jsonsrc/components/TodoBoards.tsxsrc/components/ToggleFloatingWindowButton.tsxsrc/components/tutorial/TutorialTableOfContents.tsxsrc/components/tutorial/TutorialWindow.tsxsrc/components/tutorial/index.tsxsrc/components/ui/scroll-shadow.tsxsrc/components/ui/sidebar.tsxsrc/data/tutorial/collections-intro.mdxsrc/hooks/use-scroll-shadow.tssrc/routes/__root.tsxsrc/styles.csssrc/utils/getTutorialDataHandlers.tssrc/utils/highlight-collection-related-info.tsxvite.config.ts
✅ Files skipped from review due to trivial changes (1)
- src/utils/getTutorialDataHandlers.ts
🚧 Files skipped from review as they are similar to previous changes (7)
- src/styles.css
- src/components/TodoBoards.tsx
- vite.config.ts
- src/routes/__root.tsx
- src/components/ui/scroll-shadow.tsx
- src/components/tutorial/TutorialTableOfContents.tsx
- src/components/ToggleFloatingWindowButton.tsx
🧰 Additional context used
📓 Path-based instructions (5)
src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Always ensure no formatting/linting issues exist in code - use
pnpm check --fixto automatically fix issues
Files:
src/hooks/use-scroll-shadow.tssrc/components/tutorial/TutorialWindow.tsxsrc/components/tutorial/index.tsxsrc/utils/highlight-collection-related-info.tsxsrc/components/ui/sidebar.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer functions over arrow functions for React components
Files:
src/hooks/use-scroll-shadow.tssrc/components/tutorial/TutorialWindow.tsxsrc/components/tutorial/index.tsxsrc/utils/highlight-collection-related-info.tsxsrc/components/ui/sidebar.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer
typeoverinterfacefor type definitions
Files:
src/hooks/use-scroll-shadow.tssrc/components/tutorial/TutorialWindow.tsxsrc/components/tutorial/index.tsxsrc/utils/highlight-collection-related-info.tsxsrc/components/ui/sidebar.tsx
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
**/package.json: Always usepnpm installinstead ofnpm installfor installing dependencies
Always usepnpm add <package>instead ofnpm install <package>for adding packages
Always usepnpm add -D <package>instead ofnpm install --save-dev <package>for adding dev dependencies
Always usepnpm remove <package>instead ofnpm uninstall <package>for removing packages
Always usepnpm run <script>instead ofnpm run <script>for running scripts
Always usepnpm dlx <command>instead ofnpx <command>
Always usepnpm create <template>instead ofnpm create <template>
Files:
package.json
package.json
📄 CodeRabbit inference engine (AGENTS.md)
package.json: Usepnpm devfor starting the development server
Usepnpm buildfor production build
Usepnpm run testfor running tests
Usepnpm lintfor linting
Usepnpm typecheckfor type checking
Usepnpm formatfor code formatting
Usepnpm db.generateto generate database migrations
Usepnpm db.local.migrateto apply local migrations
Usepnpm db.prod.migrateto apply production migrations
Files:
package.json
🧠 Learnings (3)
📚 Learning: 2025-12-29T13:20:08.377Z
Learnt from: CR
Repo: fulopkovacs/trytanstackdb.com PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-29T13:20:08.377Z
Learning: Applies to src/route/__root.tsx : The root route is located at `src/route/__root.tsx` in this TanStack Start project
Applied to files:
src/data/tutorial/collections-intro.mdxsrc/components/tutorial/TutorialWindow.tsxsrc/utils/highlight-collection-related-info.tsx
📚 Learning: 2025-12-24T15:25:07.106Z
Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 22
File: src/components/TodoBoards.tsx:63-81
Timestamp: 2025-12-24T15:25:07.106Z
Learning: In Tailwind CSS v4, prefer canonical classes using bg-linear-to-* (e.g., bg-linear-to-b, bg-linear-to-t, bg-linear-to-r) over the older bg-gradient-to-* syntax. This aligns with Tailwind LSP's suggestCanonicalClasses rule. Apply across TSX files (e.g., src/components/*.tsx); replace occurrences of bg-gradient-to-* with the corresponding bg-linear-to-* equivalents and verify gradients visually.
Applied to files:
src/components/tutorial/TutorialWindow.tsxsrc/components/tutorial/index.tsxsrc/utils/highlight-collection-related-info.tsxsrc/components/ui/sidebar.tsx
📚 Learning: 2025-12-28T23:34:13.416Z
Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 32
File: src/components/HomeIntro.tsx:16-25
Timestamp: 2025-12-28T23:34:13.416Z
Learning: In Motion (motion/react), when configuring variant transitions, use delayChildren: stagger(x) to create per-child delays (e.g., delayChildren: stagger(0.2)). This is different from the older API that used a separate staggerChildren property. Apply this guidance to TSX files that declare motion variants (e.g., in src/components/**/*.tsx) and verify that stagger is imported from framer-motion. Ensure transitions reflect the intended stagger timing and that no conflicting delay values override the staggered effect.
Applied to files:
src/components/tutorial/TutorialWindow.tsxsrc/components/tutorial/index.tsxsrc/utils/highlight-collection-related-info.tsxsrc/components/ui/sidebar.tsx
🧬 Code graph analysis (3)
src/components/tutorial/TutorialWindow.tsx (8)
src/utils/getTutorialDataHandlers.ts (1)
TutorialData(6-14)src/hooks/use-scroll-shadow.ts (1)
useScrollShadow(17-84)src/lib/utils.ts (1)
cn(4-6)src/components/tutorial/TutorialTableOfContents.tsx (1)
TutorialTableOfContents(30-75)src/components/ui/scroll-area.tsx (1)
ScrollArea(62-62)src/components/ui/scroll-shadow.tsx (1)
ScrollShadow(3-24)src/data/tutorial.ts (1)
steps(66-66)src/components/ui/tabs.tsx (1)
TabsContent(64-64)
src/components/tutorial/index.tsx (1)
src/components/ui/button.tsx (1)
Button(63-63)
src/utils/highlight-collection-related-info.tsx (2)
src/lib/utils.ts (1)
cn(4-6)src/components/HomeIntro.tsx (1)
HomeIntro(63-182)
🔇 Additional comments (14)
src/utils/highlight-collection-related-info.tsx (2)
1-2: LGTM: Clean import consolidation.The imports are properly organized with the React Router hooks and React primitives. Using the
typekeyword forReactNodefollows the project's TypeScript guidelines.
16-33: Well-implemented auto-dismiss behavior.The navigation logic correctly:
- Computes
isHighlightedusingstartsWithfor prefix matching- Auto-dismisses the highlight after 1 second using
replace: trueto avoid polluting browser history- Properly cleans up the timeout on unmount or when dependencies change
This aligns well with the PR objective to improve the highlights feature's UX.
package.json (1)
42-42: Prism to Shiki migration is complete and properly implemented.The package version
@shikijs/rehype@^3.20.0is valid and present in dependencies. Old Prism-related packages (prismjs,rehype-prism-plus) have been fully removed from the codebase. The Shiki integration is properly configured invite.config.tswith Material themes and language attribute transformers.src/components/ui/sidebar.tsx (1)
683-683: LGTM!The addition of
transition-colorsenhances the UX by smoothing color transitions on hover and active states, consistent with other sidebar components.src/data/tutorial/collections-intro.mdx (2)
18-18: LGTM!Updating the code fence language from
tstotsxcorrectly reflects that these snippets contain JSX/React code.Also applies to: 31-31
63-63: LGTM!Grammar correction improves readability.
src/hooks/use-scroll-shadow.ts (2)
17-22: LGTM!The enhanced API with
externalRefanddepsparameters provides flexible control while maintaining backward compatibility with sensible defaults.
26-31: Well-documented lint suppressions.The biome-ignore and eslint-disable comments clearly explain why
scrollRef.currentis intentionally excluded from dependencies. Thedepsparameter provides a clean workaround for consumers who need to trigger recalculation.Also applies to: 46-46, 80-81
src/components/tutorial/TutorialWindow.tsx (6)
25-41: LGTM!The new
FloatingWindowHeadercomponent is well-structured and uses the canonical Tailwind v4bg-linear-to-rclass. Based on learnings, this aligns with the project's Tailwind LSP configuration.
197-205: LGTM!Using
useLayoutEffectfor scroll restoration prevents visual flicker by applying the scroll position synchronously before the browser paints. The dependency onactiveStepensures restoration runs whenever the step changes.
59-61: Good use of the enhanced useScrollShadow hook.Passing
activeStepin the deps array ensures scroll shadows recalculate when the tutorial step changes, which is appropriate for content that changes per step.
357-361: Architecture improvement: Dedicated navigation component.The refactor from inline TabsList/TabsTrigger to a dedicated
TutorialTableOfContentscomponent improves modularity and separation of concerns. The ScrollShadow integration enhances the visual feedback for scrollable content.Also applies to: 368-412
444-460: LGTM!The
toggleWindowcallback properly:
- Updates local state
- Invalidates the route to sync loader data
- Persists changes to localStorage
- Uses correct dependency array
382-406: The current pattern is appropriate for the 5 tutorial steps.Radix UI's
Tabskeeps allTabsContentin the DOM but visually hides non-active tabs—they don't mount/unmount on tab changes. With only 5 steps (4 tutorial articles + 1 deep dive), rendering all of them is not a performance concern. There's no evidence of a previous lazy-loading implementation being removed. If the tutorial grows significantly (dozens of steps), consider implementing conditional rendering or lazy loading at that point, but for the current scope this pattern is fine.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
src/utils/highlight-collection-related-info.tsx (1)
37-37: Accessibility concern already flagged.The
aria-hidden="true"attribute on the wrapper div has already been identified in previous reviews as potentially problematic for screen reader accessibility. Please refer to the earlier review comment for detailed guidance.src/components/tutorial/index.tsx (1)
79-79: Navigation consistency concern already flagged.The use of
replace={true}in this Link and its inconsistency with other navigation patterns has already been identified in previous reviews. Please refer to the earlier review comment for guidance.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/components/tutorial/index.tsxsrc/data/tutorial/collections-intro.mdxsrc/data/tutorial/how-do-collections-work.mdxsrc/data/tutorial/optimistic-actions.mdxsrc/data/tutorial/optimistic-updates.mdxsrc/data/tutorial/what-is-next.mdxsrc/utils/highlight-collection-related-info.tsx
💤 Files with no reviewable changes (4)
- src/data/tutorial/how-do-collections-work.mdx
- src/data/tutorial/what-is-next.mdx
- src/data/tutorial/optimistic-actions.mdx
- src/data/tutorial/optimistic-updates.mdx
🧰 Additional context used
📓 Path-based instructions (3)
src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Always ensure no formatting/linting issues exist in code - use
pnpm check --fixto automatically fix issues
Files:
src/utils/highlight-collection-related-info.tsxsrc/components/tutorial/index.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer functions over arrow functions for React components
Files:
src/utils/highlight-collection-related-info.tsxsrc/components/tutorial/index.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer
typeoverinterfacefor type definitions
Files:
src/utils/highlight-collection-related-info.tsxsrc/components/tutorial/index.tsx
🧠 Learnings (3)
📚 Learning: 2025-12-29T13:20:08.377Z
Learnt from: CR
Repo: fulopkovacs/trytanstackdb.com PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-29T13:20:08.377Z
Learning: Applies to src/route/__root.tsx : The root route is located at `src/route/__root.tsx` in this TanStack Start project
Applied to files:
src/data/tutorial/collections-intro.mdxsrc/utils/highlight-collection-related-info.tsx
📚 Learning: 2025-12-24T15:25:07.106Z
Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 22
File: src/components/TodoBoards.tsx:63-81
Timestamp: 2025-12-24T15:25:07.106Z
Learning: In Tailwind CSS v4, prefer canonical classes using bg-linear-to-* (e.g., bg-linear-to-b, bg-linear-to-t, bg-linear-to-r) over the older bg-gradient-to-* syntax. This aligns with Tailwind LSP's suggestCanonicalClasses rule. Apply across TSX files (e.g., src/components/*.tsx); replace occurrences of bg-gradient-to-* with the corresponding bg-linear-to-* equivalents and verify gradients visually.
Applied to files:
src/utils/highlight-collection-related-info.tsxsrc/components/tutorial/index.tsx
📚 Learning: 2025-12-28T23:34:13.416Z
Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 32
File: src/components/HomeIntro.tsx:16-25
Timestamp: 2025-12-28T23:34:13.416Z
Learning: In Motion (motion/react), when configuring variant transitions, use delayChildren: stagger(x) to create per-child delays (e.g., delayChildren: stagger(0.2)). This is different from the older API that used a separate staggerChildren property. Apply this guidance to TSX files that declare motion variants (e.g., in src/components/**/*.tsx) and verify that stagger is imported from framer-motion. Ensure transitions reflect the intended stagger timing and that no conflicting delay values override the staggered effect.
Applied to files:
src/utils/highlight-collection-related-info.tsxsrc/components/tutorial/index.tsx
🧬 Code graph analysis (1)
src/utils/highlight-collection-related-info.tsx (2)
src/lib/utils.ts (1)
cn(4-6)src/components/HomeIntro.tsx (1)
HomeIntro(63-182)
🪛 GitHub Actions: CI/CD
src/components/tutorial/index.tsx
[error] 2-2: TS6133: 'XCircleIcon' is declared but its value is never read. (tsc --noEmit)
🪛 GitHub Check: CI
src/components/tutorial/index.tsx
[failure] 2-2:
'XCircleIcon' is declared but its value is never read.
🔇 Additional comments (3)
src/utils/highlight-collection-related-info.tsx (1)
21-33: Auto-clear highlight logic looks good.The implementation correctly:
- Uses a 1-second timeout before clearing the highlight
- Navigates with
replace: trueto avoid polluting browser history- Properly cleans up the timeout on unmount or when
isHighlightedchangessrc/components/tutorial/index.tsx (1)
85-88: Button integration looks good.The replacement of the previous UI with a Button component wrapping SearchIcon and children provides a clearer, more accessible interaction pattern for highlighting.
src/data/tutorial/collections-intro.mdx (1)
2-2: LGTM! Clean-up changes align with PR objectives.The changes appropriately:
- Remove the now-unused
ClearHighlightsButtonimport, consistent with its removal from the tutorial exports- Update code fence language specifiers from
tstotsxto accurately reflect React/JSX content- Improve grammar with "are updated" instead of "updated"
These are all appropriate polish and maintenance updates.
Also applies to: 18-18, 31-31, 63-63
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/utils/highlight-collection-related-info.tsx (1)
42-42: Remove commented code.Line 42 contains commented-out CSS classes that should be removed for cleaner code maintenance.
🔎 Proposed cleanup
: "bg-red-500/0 outline-red-500/0 dark:outline-destructive/0 dark:bg-destructive/0 duration-1000", - // "outline-destructive bg-destructive/10 outline rounded-sm outline-offset-4", )}
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/tutorial/index.tsxsrc/utils/highlight-collection-related-info.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/tutorial/index.tsx
🧰 Additional context used
📓 Path-based instructions (3)
src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Always ensure no formatting/linting issues exist in code - use
pnpm check --fixto automatically fix issues
Files:
src/utils/highlight-collection-related-info.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer functions over arrow functions for React components
Files:
src/utils/highlight-collection-related-info.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer
typeoverinterfacefor type definitions
Files:
src/utils/highlight-collection-related-info.tsx
🧠 Learnings (3)
📚 Learning: 2025-12-29T13:20:08.377Z
Learnt from: CR
Repo: fulopkovacs/trytanstackdb.com PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-29T13:20:08.377Z
Learning: Applies to src/route/__root.tsx : The root route is located at `src/route/__root.tsx` in this TanStack Start project
Applied to files:
src/utils/highlight-collection-related-info.tsx
📚 Learning: 2025-12-24T15:25:07.106Z
Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 22
File: src/components/TodoBoards.tsx:63-81
Timestamp: 2025-12-24T15:25:07.106Z
Learning: In Tailwind CSS v4, prefer canonical classes using bg-linear-to-* (e.g., bg-linear-to-b, bg-linear-to-t, bg-linear-to-r) over the older bg-gradient-to-* syntax. This aligns with Tailwind LSP's suggestCanonicalClasses rule. Apply across TSX files (e.g., src/components/*.tsx); replace occurrences of bg-gradient-to-* with the corresponding bg-linear-to-* equivalents and verify gradients visually.
Applied to files:
src/utils/highlight-collection-related-info.tsx
📚 Learning: 2025-12-28T23:34:13.416Z
Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 32
File: src/components/HomeIntro.tsx:16-25
Timestamp: 2025-12-28T23:34:13.416Z
Learning: In Motion (motion/react), when configuring variant transitions, use delayChildren: stagger(x) to create per-child delays (e.g., delayChildren: stagger(0.2)). This is different from the older API that used a separate staggerChildren property. Apply this guidance to TSX files that declare motion variants (e.g., in src/components/**/*.tsx) and verify that stagger is imported from framer-motion. Ensure transitions reflect the intended stagger timing and that no conflicting delay values override the staggered effect.
Applied to files:
src/utils/highlight-collection-related-info.tsx
🧬 Code graph analysis (1)
src/utils/highlight-collection-related-info.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
⏰ 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: Deploy Preview
🔇 Additional comments (4)
src/utils/highlight-collection-related-info.tsx (4)
1-2: LGTM: Clean import structure.The imports are well-organized and correctly use the
typekeyword forReactNode, following TypeScript best practices.
21-33: LGTM: Well-implemented auto-clear effect.The effect correctly:
- Cleans up the timeout on unmount or when dependencies change
- Uses
replace: trueto avoid polluting browser history- Properly destructures to remove only the
highlightparam while preserving other search params- Has the correct dependency array
The 1-second timeout is reasonable for tutorial highlighting.
36-46: Previous accessibility issue resolved.The
aria-hidden="true"attribute that was flagged in the previous review has been successfully removed, addressing the accessibility concern. The wrapper now correctly allows assistive technologies to access the highlighted content.
18-19: This prefix-based matching is documented behavior.The naming convention in
src/components/tutorial/index.tsx(lines 8–9) explicitly documents this design: "Naming convention:projecthighlights any ids starting withproject(e.g.,project,project_sidebar)". ThehighlightParamSchemarestricts the highlight param to a controlled enum, preventing arbitrary overlapping prefixes. No changes needed.Likely an incorrect or invalid review comment.
1 participant
The guide was in a rough state. Here are a few essential things that needed to be taken care of:
Summary by CodeRabbit
New Features
New / Updated UI
Behavior Changes
Content & Styling
✏️ Tip: You can customize this high-level summary in your review settings.