Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughThis PR introduces mobile-responsive design improvements, refactors sidebar state management using a Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
3 issues found across 12 files
Prompt for AI agents (all 3 issues)
Understand the root cause of the following 3 issues and fix them.
<file name="apps/web/components/PageHeader.tsx">
<violation number="1" location="apps/web/components/PageHeader.tsx:27">
Setting this subheading to `hidden` removes the description for mobile users, so the header loses its descriptive text on small screens. Please keep the description visible below `sm`.</violation>
</file>
<file name="apps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsx">
<violation number="1" location="apps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsx:36">
Adding `hidden sm:block` hides the AvailableActionsPanel for all small-screen users, removing their only view of the available actions list. Please keep it visible on mobile to avoid this regression.</violation>
</file>
<file name="apps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsx">
<violation number="1" location="apps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsx:15">
Routing mobile clicks through setOpenMobile means `state` never receives "chat-sidebar", so components like CrispChat that check `state.includes("chat-sidebar")` never see the chat as open and keep the Crisp widget visible. Please update the handler so `setOpen` still runs when the chat opens on mobile.</violation>
</file>
React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.
| variant="outline" | ||
| onClick={() => setOpen((arr) => [...arr, "chat-sidebar"])} | ||
| onClick={() => { | ||
| const setter = isMobile ? setOpenMobile : setOpen; |
There was a problem hiding this comment.
Routing mobile clicks through setOpenMobile means state never receives "chat-sidebar", so components like CrispChat that check state.includes("chat-sidebar") never see the chat as open and keep the Crisp widget visible. Please update the handler so setOpen still runs when the chat opens on mobile.
Prompt for AI agents
Address the following comment on apps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsx at line 15:
<comment>Routing mobile clicks through setOpenMobile means `state` never receives "chat-sidebar", so components like CrispChat that check `state.includes("chat-sidebar")` never see the chat as open and keep the Crisp widget visible. Please update the handler so `setOpen` still runs when the chat opens on mobile.</comment>
<file context>
@@ -5,13 +5,16 @@ import { useSidebar } from "@/components/ui/sidebar";
variant="outline"
- onClick={() => setOpen((arr) => [...arr, "chat-sidebar"])}
+ onClick={() => {
+ const setter = isMobile ? setOpenMobile : setOpen;
+ setter((arr) => [...arr, "chat-sidebar"]);
+ }}
</file context>
✅ Addressed in c76ec8e
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
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 (1)
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsx (1)
259-272: Fix inconsistency: delayed action options commented in OnboardingCategories.tsx but active in CategoriesSetup.tsx.The delayed actions
move_folder_delayedandlabel_archive_delayedare:
- Commented out in
OnboardingCategories.tsx(lines 259–261, 270–272)- Still active in
CategoriesSetup.tsx(lines 233, 244)- Fully implemented in backend (
rule.ts,rule.validation.ts)Either uncomment these options in
OnboardingCategories.tsxor remove them fromCategoriesSetup.tsxto maintain consistency across the onboarding flow. The current state creates a confusing user experience where the same actions are available in one flow but not the other.
♻️ Duplicate comments (2)
apps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsx (1)
36-36: Mobile users lose access to available actions list.This change hides the AvailableActionsPanel on small screens, removing mobile users' view of the available actions list. This concern has already been raised in a previous review.
apps/web/components/PageHeader.tsx (1)
27-29: Description hidden on mobile removes context for mobile users.The
hidden sm:blockclass onPageSubHeadingmeans mobile users won't see page descriptions at all, even when pages provide meaningful descriptions. This reduces discoverability and context on mobile devices.Consider keeping the description visible on all screen sizes, or use a responsive text size adjustment instead of hiding it entirely.
- <PageSubHeading className="hidden sm:block"> + <PageSubHeading className="text-sm sm:text-base"> {description} </PageSubHeading>
🧹 Nitpick comments (2)
apps/web/app/(app)/[emailAccountId]/usage/page.tsx (1)
58-65: Consider adding a meaningful description for desktop users.While the description is hidden on mobile devices, desktop users would benefit from seeing context. Consider adding a description like:
"View your API usage and unsubscribe credits"instead of an empty string.<PageHeader title={ isOwnAccount ? "Credits and Usage" : `Credits and Usage for ${emailAccount.name || emailAccount.email}` } - description="" + description="View your API usage and unsubscribe credits" />apps/web/app/(app)/license/page.tsx (1)
25-40: Consistent page structure, but consider adding a description.The migration to
PageWrapper/PageHeadermaintains consistency with other pages. However, the emptydescription=""on Line 26 misses an opportunity to provide context for desktop users.Consider adding a meaningful description:
- <PageHeader title="Activate your license" description="" /> + <PageHeader title="Activate your license" description="Enter your license key to activate premium features" />
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
apps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsx(1 hunks)apps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsx(1 hunks)apps/web/app/(app)/[emailAccountId]/assistant/Rules.tsx(4 hunks)apps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsx(2 hunks)apps/web/app/(app)/[emailAccountId]/compose/page.tsx(0 hunks)apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsx(3 hunks)apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsx(1 hunks)apps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsx(1 hunks)apps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsx(2 hunks)apps/web/app/(app)/[emailAccountId]/usage/page.tsx(2 hunks)apps/web/app/(app)/admin/page.tsx(3 hunks)apps/web/app/(app)/license/page.tsx(3 hunks)apps/web/components/NavBottom.tsx(2 hunks)apps/web/components/PageHeader.tsx(2 hunks)apps/web/components/SidebarRight.tsx(1 hunks)version.txt(1 hunks)
💤 Files with no reviewable changes (1)
- apps/web/app/(app)/[emailAccountId]/compose/page.tsx
🧰 Additional context used
📓 Path-based instructions (16)
apps/web/**/*.{ts,tsx}
📄 CodeRabbit inference engine (apps/web/CLAUDE.md)
apps/web/**/*.{ts,tsx}: Use TypeScript with strict null checks
Path aliases: Use@/for imports from project root
Use proper error handling with try/catch blocks
Format code with Prettier
Leverage TypeScript inference for better DX
Files:
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsxapps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsxapps/web/components/SidebarRight.tsxapps/web/app/(app)/admin/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsxapps/web/app/(app)/[emailAccountId]/assistant/Rules.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsxapps/web/components/PageHeader.tsxapps/web/app/(app)/license/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsxapps/web/components/NavBottom.tsx
apps/web/app/**
📄 CodeRabbit inference engine (apps/web/CLAUDE.md)
NextJS app router structure with (app) directory
Files:
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsxapps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsxapps/web/app/(app)/admin/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsxapps/web/app/(app)/[emailAccountId]/assistant/Rules.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsxapps/web/app/(app)/license/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsx
apps/web/**/*.tsx
📄 CodeRabbit inference engine (apps/web/CLAUDE.md)
apps/web/**/*.tsx: Follow tailwindcss patterns with prettier-plugin-tailwindcss
Prefer functional components with hooks
Use shadcn/ui components when available
Ensure responsive design with mobile-first approach
Follow consistent naming conventions (PascalCase for components)
Use LoadingContent component for async data
Useresult?.serverErrorwithtoastErrorandtoastSuccess
UseLoadingContentcomponent to handle loading and error states consistently
Passloading,error, and children props toLoadingContent
Files:
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsxapps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsxapps/web/components/SidebarRight.tsxapps/web/app/(app)/admin/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsxapps/web/app/(app)/[emailAccountId]/assistant/Rules.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsxapps/web/components/PageHeader.tsxapps/web/app/(app)/license/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsxapps/web/components/NavBottom.tsx
!{.cursor/rules/*.mdc}
📄 CodeRabbit inference engine (.cursor/rules/cursor-rules.mdc)
Never place rule files in the project root, in subdirectories outside .cursor/rules, or in any other location
Files:
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsxapps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsxapps/web/components/SidebarRight.tsxapps/web/app/(app)/admin/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsxapps/web/app/(app)/[emailAccountId]/assistant/Rules.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsxapps/web/components/PageHeader.tsxapps/web/app/(app)/license/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsxapps/web/components/NavBottom.tsxversion.txt
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/form-handling.mdc)
**/*.tsx: Use React Hook Form with Zod for validation
Validate form inputs before submission
Show validation errors inline next to form fields
Files:
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsxapps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsxapps/web/components/SidebarRight.tsxapps/web/app/(app)/admin/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsxapps/web/app/(app)/[emailAccountId]/assistant/Rules.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsxapps/web/components/PageHeader.tsxapps/web/app/(app)/license/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsxapps/web/components/NavBottom.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/logging.mdc)
**/*.{ts,tsx}: UsecreateScopedLoggerfor logging in backend TypeScript files
Typically add the logger initialization at the top of the file when usingcreateScopedLogger
Only use.with()on a logger instance within a specific function, not for a global loggerImport Prisma in the project using
import prisma from "@/utils/prisma";
**/*.{ts,tsx}: Don't use TypeScript enums.
Don't use TypeScript const enum.
Don't use the TypeScript directive @ts-ignore.
Don't use primitive type aliases or misleading types.
Don't use empty type parameters in type aliases and interfaces.
Don't use any or unknown as type constraints.
Don't use implicit any type on variable declarations.
Don't let variables evolve into any type through reassignments.
Don't use non-null assertions with the ! postfix operator.
Don't misuse the non-null assertion operator (!) in TypeScript files.
Don't use user-defined types.
Use as const instead of literal types and type annotations.
Use export type for types.
Use import type for types.
Don't declare empty interfaces.
Don't merge interfaces and classes unsafely.
Don't use overload signatures that aren't next to each other.
Use the namespace keyword instead of the module keyword to declare TypeScript namespaces.
Don't use TypeScript namespaces.
Don't export imported variables.
Don't add type annotations to variables, parameters, and class properties that are initialized with literal expressions.
Don't use parameter properties in class constructors.
Use either T[] or Array consistently.
Initialize each enum member value explicitly.
Make sure all enum members are literal values.
Files:
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsxapps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsxapps/web/components/SidebarRight.tsxapps/web/app/(app)/admin/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsxapps/web/app/(app)/[emailAccountId]/assistant/Rules.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsxapps/web/components/PageHeader.tsxapps/web/app/(app)/license/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsxapps/web/components/NavBottom.tsx
apps/web/app/(app)/*/**
📄 CodeRabbit inference engine (.cursor/rules/page-structure.mdc)
Components for the page are either put in page.tsx, or in the apps/web/app/(app)/PAGE_NAME folder
Files:
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsxapps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsxapps/web/app/(app)/admin/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsxapps/web/app/(app)/[emailAccountId]/assistant/Rules.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsxapps/web/app/(app)/license/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsx
apps/web/app/(app)/*/**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/page-structure.mdc)
If you need to use onClick in a component, that component is a client component and file must start with 'use client'
Files:
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsxapps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsxapps/web/app/(app)/admin/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsxapps/web/app/(app)/[emailAccountId]/assistant/Rules.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsxapps/web/app/(app)/license/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsx
apps/web/app/(app)/*/**/**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/page-structure.mdc)
If we're in a deeply nested component we will use swr to fetch via API
Files:
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsxapps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsxapps/web/app/(app)/admin/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsxapps/web/app/(app)/[emailAccountId]/assistant/Rules.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsxapps/web/app/(app)/license/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsx
apps/web/app/**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
Components with
onClickmust be client components withuse clientdirective
Files:
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsxapps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsxapps/web/app/(app)/admin/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsxapps/web/app/(app)/[emailAccountId]/assistant/Rules.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsxapps/web/app/(app)/license/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)
**/*.{js,jsx,ts,tsx}: Don't useelements in Next.js projects.
Don't use elements in Next.js projects.
Don't use namespace imports.
Don't access namespace imports dynamically.
Don't use global eval().
Don't use console.
Don't use debugger.
Don't use var.
Don't use with statements in non-strict contexts.
Don't use the arguments object.
Don't use consecutive spaces in regular expression literals.
Don't use the comma operator.
Don't use unnecessary boolean casts.
Don't use unnecessary callbacks with flatMap.
Use for...of statements instead of Array.forEach.
Don't create classes that only have static members (like a static namespace).
Don't use this and super in static contexts.
Don't use unnecessary catch clauses.
Don't use unnecessary constructors.
Don't use unnecessary continue statements.
Don't export empty modules that don't change anything.
Don't use unnecessary escape sequences in regular expression literals.
Don't use unnecessary labels.
Don't use unnecessary nested block statements.
Don't rename imports, exports, and destructured assignments to the same name.
Don't use unnecessary string or template literal concatenation.
Don't use String.raw in template literals when there are no escape sequences.
Don't use useless case statements in switch statements.
Don't use ternary operators when simpler alternatives exist.
Don't use useless this aliasing.
Don't initialize variables to undefined.
Don't use the void operators (they're not familiar).
Use arrow functions instead of function expressions.
Use Date.now() to get milliseconds since the Unix Epoch.
Use .flatMap() instead of map().flat() when possible.
Use literal property access instead of computed property access.
Don't use parseInt() or Number.parseInt() when binary, octal, or hexadecimal literals work.
Use concise optional chaining instead of chained logical expressions.
Use regular expression literals instead of the RegExp constructor when possible.
Don't use number literal object member names th...
Files:
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsxapps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsxapps/web/components/SidebarRight.tsxapps/web/app/(app)/admin/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsxapps/web/app/(app)/[emailAccountId]/assistant/Rules.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsxapps/web/components/PageHeader.tsxapps/web/app/(app)/license/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsxapps/web/components/NavBottom.tsx
!pages/_document.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)
!pages/_document.{js,jsx,ts,tsx}: Don't import next/document outside of pages/_document.jsx in Next.js projects.
Don't import next/document outside of pages/_document.jsx in Next.js projects.
Files:
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsxapps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsxapps/web/components/SidebarRight.tsxapps/web/app/(app)/admin/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsxapps/web/app/(app)/[emailAccountId]/assistant/Rules.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsxapps/web/components/PageHeader.tsxapps/web/app/(app)/license/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsxapps/web/components/NavBottom.tsxversion.txt
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)
**/*.{jsx,tsx}: Don't destructure props inside JSX components in Solid projects.
Don't use both children and dangerouslySetInnerHTML props on the same element.
Don't use Array index in keys.
Don't assign to React component props.
Don't define React components inside other components.
Don't use event handlers on non-interactive elements.
Don't assign JSX properties multiple times.
Don't add extra closing tags for components without children.
Use <>...</> instead of ....
Don't insert comments as text nodes.
Don't use the return value of React.render.
Make sure all dependencies are correctly specified in React hooks.
Make sure all React hooks are called from the top level of component functions.
Don't use unnecessary fragments.
Don't pass children as props.
Use semantic elements instead of role attributes in JSX.
Files:
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsxapps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsxapps/web/components/SidebarRight.tsxapps/web/app/(app)/admin/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsxapps/web/app/(app)/[emailAccountId]/assistant/Rules.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsxapps/web/components/PageHeader.tsxapps/web/app/(app)/license/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsxapps/web/components/NavBottom.tsx
**/*.{html,jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)
**/*.{html,jsx,tsx}: Don't use or elements.
Don't use accessKey attribute on any HTML element.
Don't set aria-hidden="true" on focusable elements.
Don't add ARIA roles, states, and properties to elements that don't support them.
Only use the scope prop on elements.
Don't assign non-interactive ARIA roles to interactive HTML elements.
Make sure label elements have text content and are associated with an input.
Don't assign interactive ARIA roles to non-interactive HTML elements.
Don't assign tabIndex to non-interactive HTML elements.
Don't use positive integers for tabIndex property.
Don't include "image", "picture", or "photo" in img alt prop.
Don't use explicit role property that's the same as the implicit/default role.
Make static elements with click handlers use a valid role attribute.
Always include a title element for SVG elements.
Give all elements requiring alt text meaningful information for screen readers.
Make sure anchors have content that's accessible to screen readers.
Assign tabIndex to non-interactive HTML elements with aria-activedescendant.
Include all required ARIA attributes for elements with ARIA roles.
Make sure ARIA properties are valid for the element's supported roles.
Always include a type attribute for button elements.
Make elements with interactive roles and handlers focusable.
Give heading elements content that's accessible to screen readers (not hidden with aria-hidden).
Always include a lang attribute on the html element.
Always include a title attribute for iframe elements.
Accompany onClick with at least one of: onKeyUp, onKeyDown, or onKeyPress.
Accompany onMouseOver/onMouseOut with onFocus/onBlur.
Include caption tracks for audio and video elements.
Make sure all anchors are valid and navigable.
Ensure all ARIA properties (aria-*) are valid.
Use valid, non-abstract ARIA roles for elements with ARIA roles.
Use valid ARIA state and property values.
Use valid values for the autocomplete attribute on input eleme...Files:
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsxapps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsxapps/web/components/SidebarRight.tsxapps/web/app/(app)/admin/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsxapps/web/app/(app)/[emailAccountId]/assistant/Rules.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsxapps/web/components/PageHeader.tsxapps/web/app/(app)/license/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsxapps/web/components/NavBottom.tsxapps/web/components/**/*.tsx
📄 CodeRabbit inference engine (apps/web/CLAUDE.md)
Use React Hook Form with Zod validation for form handling
Use the
LoadingContentcomponent to handle loading and error states consistently in data-fetching components.Use PascalCase for components (e.g.
components/Button.tsx)Files:
apps/web/components/SidebarRight.tsxapps/web/components/PageHeader.tsxapps/web/components/NavBottom.tsxapps/web/app/(app)/*/page.tsx
📄 CodeRabbit inference engine (.cursor/rules/page-structure.mdc)
apps/web/app/(app)/*/page.tsx: Create new pages at: apps/web/app/(app)/PAGE_NAME/page.tsx
Pages are Server components so you can load data into them directly
apps/web/app/(app)/*/page.tsx: Create new pages at:apps/web/app/(app)/PAGE_NAME/page.tsx
Pages are Server components for direct data loadingFiles:
apps/web/app/(app)/admin/page.tsxapps/web/app/(app)/license/page.tsx🧠 Learnings (42)
📓 Common learnings
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: apps/web/CLAUDE.md:0-0 Timestamp: 2025-07-18T15:04:30.467Z Learning: Applies to apps/web/**/*.tsx : Ensure responsive design with mobile-first approachLearnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/ui-components.mdc:0-0 Timestamp: 2025-07-19T17:50:22.078Z Learning: Applies to components/**/*.tsx : Implement responsive design with Tailwind CSS using a mobile-first approach📚 Learning: 2025-07-08T13:14:07.449Z
Learnt from: elie222 Repo: elie222/inbox-zero PR: 537 File: apps/web/app/(app)/[emailAccountId]/clean/onboarding/page.tsx:30-34 Timestamp: 2025-07-08T13:14:07.449Z Learning: The clean onboarding page in apps/web/app/(app)/[emailAccountId]/clean/onboarding/page.tsx is intentionally Gmail-specific and should show an error for non-Google email accounts rather than attempting to support multiple providers.Applied to files:
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsxapps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsx📚 Learning: 2025-07-18T15:05:34.899Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/gmail-api.mdc:0-0 Timestamp: 2025-07-18T15:05:34.899Z Learning: Applies to apps/web/utils/gmail/**/*.ts : Keep provider-specific implementation details isolated in the appropriate utils subfolder (e.g., 'apps/web/utils/gmail/')Applied to files:
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsx📚 Learning: 2025-09-17T22:05:28.646Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/llm.mdc:0-0 Timestamp: 2025-09-17T22:05:28.646Z Learning: Applies to apps/web/utils/{ai,llms}/**/*.{ts,tsx} : Keep related AI functions co-located and extract common patterns into utilities; document complex AI logic with clear commentsApplied to files:
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsxapps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsxapps/web/app/(app)/[emailAccountId]/assistant/Rules.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsx📚 Learning: 2025-07-18T15:04:30.467Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: apps/web/CLAUDE.md:0-0 Timestamp: 2025-07-18T15:04:30.467Z Learning: Applies to apps/web/**/*.tsx : Ensure responsive design with mobile-first approachApplied to files:
apps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsxapps/web/components/SidebarRight.tsxapps/web/app/(app)/[emailAccountId]/assistant/Rules.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsxapps/web/components/PageHeader.tsxapps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsx📚 Learning: 2025-07-19T17:50:22.078Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/ui-components.mdc:0-0 Timestamp: 2025-07-19T17:50:22.078Z Learning: Applies to components/**/*.tsx : Implement responsive design with Tailwind CSS using a mobile-first approachApplied to files:
apps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/components/SidebarRight.tsxapps/web/app/(app)/[emailAccountId]/assistant/Rules.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsxapps/web/components/PageHeader.tsxapps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsx📚 Learning: 2025-09-17T22:05:28.646Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/llm.mdc:0-0 Timestamp: 2025-09-17T22:05:28.646Z Learning: Applies to apps/web/utils/ai/**/*.{ts,tsx} : Remove excessive whitespace and truncate long inputs in promptsApplied to files:
apps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsxapps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsxapps/web/components/PageHeader.tsxapps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsx📚 Learning: 2025-09-17T22:05:28.646Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/llm.mdc:0-0 Timestamp: 2025-09-17T22:05:28.646Z Learning: Applies to apps/web/utils/ai/**/*.{ts,tsx} : System prompt should define the LLM's role and task specificationsApplied to files:
apps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsxapps/web/components/PageHeader.tsx📚 Learning: 2025-09-17T22:05:28.646Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/llm.mdc:0-0 Timestamp: 2025-09-17T22:05:28.646Z Learning: Applies to apps/web/utils/ai/**/*.{ts,tsx} : User prompt should contain the actual data and contextApplied to files:
apps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsxapps/web/components/PageHeader.tsx📚 Learning: 2025-09-17T22:05:28.646Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/llm.mdc:0-0 Timestamp: 2025-09-17T22:05:28.646Z Learning: Applies to apps/web/utils/ai/**/*.{ts,tsx} : Keep system prompts and user prompts separateApplied to files:
apps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsx📚 Learning: 2025-09-17T22:05:28.646Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/llm.mdc:0-0 Timestamp: 2025-09-17T22:05:28.646Z Learning: Applies to apps/web/utils/ai/**/*.{ts,tsx} : LLM feature functions should follow the provided TypeScript pattern (separate system/user prompts, use createGenerateObject, Zod schema validation, early validation, return result.object)Applied to files:
apps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsx📚 Learning: 2025-09-17T22:05:28.646Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/llm.mdc:0-0 Timestamp: 2025-09-17T22:05:28.646Z Learning: Applies to apps/web/utils/ai/**/*.{ts,tsx} : Use XML-like tags to structure data in promptsApplied to files:
apps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsxapps/web/components/PageHeader.tsx📚 Learning: 2025-07-20T09:00:16.505Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/project-structure.mdc:0-0 Timestamp: 2025-07-20T09:00:16.505Z Learning: Applies to apps/web/app/(app)/*/ : Components for the page are either in `page.tsx` or in the `apps/web/app/(app)/PAGE_NAME` folderApplied to files:
apps/web/app/(app)/admin/page.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsxapps/web/app/(app)/license/page.tsx📚 Learning: 2025-07-18T15:07:00.269Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/page-structure.mdc:0-0 Timestamp: 2025-07-18T15:07:00.269Z Learning: Applies to apps/web/app/(app)/*/** : Components for the page are either put in page.tsx, or in the apps/web/app/(app)/PAGE_NAME folderApplied to files:
apps/web/app/(app)/admin/page.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsxapps/web/app/(app)/license/page.tsx📚 Learning: 2025-07-20T09:00:16.505Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/project-structure.mdc:0-0 Timestamp: 2025-07-20T09:00:16.505Z Learning: Applies to apps/web/app/(app)/*/page.tsx : Create new pages at: `apps/web/app/(app)/PAGE_NAME/page.tsx`Applied to files:
apps/web/app/(app)/admin/page.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsxapps/web/app/(app)/license/page.tsx📚 Learning: 2025-07-18T15:07:00.269Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/page-structure.mdc:0-0 Timestamp: 2025-07-18T15:07:00.269Z Learning: Applies to apps/web/app/(app)/*/page.tsx : Create new pages at: apps/web/app/(app)/PAGE_NAME/page.tsxApplied to files:
apps/web/app/(app)/admin/page.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsxapps/web/app/(app)/license/page.tsx📚 Learning: 2025-07-20T09:00:16.505Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/project-structure.mdc:0-0 Timestamp: 2025-07-20T09:00:16.505Z Learning: Applies to apps/web/app/(app)/*/page.tsx : Pages are Server components for direct data loadingApplied to files:
apps/web/app/(app)/admin/page.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsx📚 Learning: 2025-07-18T15:07:00.269Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/page-structure.mdc:0-0 Timestamp: 2025-07-18T15:07:00.269Z Learning: Applies to apps/web/app/(app)/*/page.tsx : Pages are Server components so you can load data into them directlyApplied to files:
apps/web/app/(app)/admin/page.tsxapps/web/app/(app)/[emailAccountId]/usage/page.tsx📚 Learning: 2025-07-18T17:27:58.249Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/server-actions.mdc:0-0 Timestamp: 2025-07-18T17:27:58.249Z Learning: Applies to apps/web/utils/actions/*.ts : Use `adminActionClient` for actions restricted to admin users.Applied to files:
apps/web/app/(app)/admin/page.tsx📚 Learning: 2025-07-19T17:50:28.270Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/utilities.mdc:0-0 Timestamp: 2025-07-19T17:50:28.270Z Learning: The `utils` folder also contains core app logic such as Next.js Server Actions and Gmail API requests.Applied to files:
apps/web/app/(app)/admin/page.tsx📚 Learning: 2025-09-20T18:24:34.280Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/testing.mdc:0-0 Timestamp: 2025-09-20T18:24:34.280Z Learning: Applies to **/*.test.{ts,tsx} : Use provided helpers for mocks: import `{ getEmail, getEmailAccount, getRule }` from `@/__tests__/helpers`Applied to files:
apps/web/app/(app)/admin/page.tsx📚 Learning: 2025-07-18T15:04:30.467Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: apps/web/CLAUDE.md:0-0 Timestamp: 2025-07-18T15:04:30.467Z Learning: Applies to apps/web/**/*.tsx : Follow consistent naming conventions (PascalCase for components)Applied to files:
apps/web/app/(app)/[emailAccountId]/assistant/Rules.tsx📚 Learning: 2025-07-20T09:03:06.318Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/ultracite.mdc:0-0 Timestamp: 2025-07-20T09:03:06.318Z Learning: Applies to **/*.{jsx,tsx} : Use semantic elements instead of role attributes in JSX.Applied to files:
apps/web/app/(app)/[emailAccountId]/assistant/Rules.tsx📚 Learning: 2025-07-20T09:00:16.505Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/project-structure.mdc:0-0 Timestamp: 2025-07-20T09:00:16.505Z Learning: Applies to apps/web/app/**/*.tsx : Components with `onClick` must be client components with `use client` directiveApplied to files:
apps/web/app/(app)/[emailAccountId]/assistant/Rules.tsx📚 Learning: 2025-09-17T22:05:28.646Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/llm.mdc:0-0 Timestamp: 2025-09-17T22:05:28.646Z Learning: Applies to apps/web/utils/ai/**/*.{ts,tsx} : Define clear interfaces for complex input/output structures in LLM featuresApplied to files:
apps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsx📚 Learning: 2025-09-17T22:05:28.646Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/llm.mdc:0-0 Timestamp: 2025-09-17T22:05:28.646Z Learning: Applies to apps/web/utils/ai/**/*.{ts,tsx} : Format prompt data consistently across similar functionsApplied to files:
apps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsxapps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsx📚 Learning: 2025-07-20T09:00:16.505Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/project-structure.mdc:0-0 Timestamp: 2025-07-20T09:00:16.505Z Learning: Applies to apps/web/components/**/*.tsx : Use PascalCase for components (e.g. `components/Button.tsx`)Applied to files:
apps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsx📚 Learning: 2025-09-17T22:05:28.646Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/llm.mdc:0-0 Timestamp: 2025-09-17T22:05:28.646Z Learning: Applies to apps/web/utils/usage.ts : Implement usage tracking and monitoring in apps/web/utils/usage.tsApplied to files:
apps/web/app/(app)/[emailAccountId]/usage/page.tsx📚 Learning: 2025-07-18T15:04:30.467Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: apps/web/CLAUDE.md:0-0 Timestamp: 2025-07-18T15:04:30.467Z Learning: Applies to apps/web/app/api/**/route.ts : Use `withEmailAccount` for email-account-level operationsApplied to files:
apps/web/app/(app)/[emailAccountId]/usage/page.tsx📚 Learning: 2025-08-10T22:03:30.507Z
Learnt from: elie222 Repo: elie222/inbox-zero PR: 667 File: apps/web/app/(app)/[emailAccountId]/onboarding/page.tsx:18-25 Timestamp: 2025-08-10T22:03:30.507Z Learning: In Next.js 15, both `params` and `searchParams` passed to page components in the App Router are Promises that need to be awaited. They should be typed as `Promise<{...}>` and accessed using `await` in server components or React's `use()` hook in client components. This is different from Next.js 14 where they were plain objects.Applied to files:
apps/web/app/(app)/[emailAccountId]/usage/page.tsx📚 Learning: 2025-06-05T09:49:12.168Z
Learnt from: elie222 Repo: elie222/inbox-zero PR: 485 File: apps/web/app/(landing)/login/page.tsx:41-43 Timestamp: 2025-06-05T09:49:12.168Z Learning: In Next.js App Router, components that use the `useSearchParams` hook require a Suspense boundary to handle the asynchronous nature of search parameter access. The Suspense wrapper is necessary and should not be removed when a component uses useSearchParams.Applied to files:
apps/web/app/(app)/[emailAccountId]/usage/page.tsx📚 Learning: 2025-07-20T09:00:41.968Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/security-audit.mdc:0-0 Timestamp: 2025-07-20T09:00:41.968Z Learning: Applies to apps/web/app/api/**/*.{ts,js} : All Prisma queries in API routes must include user/account filtering (e.g., emailAccountId or userId in WHERE clauses) to prevent unauthorized data access.Applied to files:
apps/web/app/(app)/[emailAccountId]/usage/page.tsx📚 Learning: 2025-07-20T09:03:06.318Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/ultracite.mdc:0-0 Timestamp: 2025-07-20T09:03:06.318Z Learning: Applies to **/*.{html,jsx,tsx} : Give heading elements content that's accessible to screen readers (not hidden with aria-hidden).Applied to files:
apps/web/components/PageHeader.tsx📚 Learning: 2025-07-18T15:04:30.467Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: apps/web/CLAUDE.md:0-0 Timestamp: 2025-07-18T15:04:30.467Z Learning: Applies to apps/web/components/**/*.tsx : Use React Hook Form with Zod validation for form handlingApplied to files:
apps/web/app/(app)/license/page.tsx📚 Learning: 2025-07-18T15:04:57.115Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/form-handling.mdc:0-0 Timestamp: 2025-07-18T15:04:57.115Z Learning: Applies to **/*.tsx : Validate form inputs before submissionApplied to files:
apps/web/app/(app)/license/page.tsx📚 Learning: 2025-07-19T17:50:22.078Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/ui-components.mdc:0-0 Timestamp: 2025-07-19T17:50:22.078Z Learning: Applies to components/**/*.tsx : Use the `Input` component for text inputs, passing `registerProps` and `error` props for form handlingApplied to files:
apps/web/app/(app)/license/page.tsx📚 Learning: 2025-07-18T15:04:57.115Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/form-handling.mdc:0-0 Timestamp: 2025-07-18T15:04:57.115Z Learning: Applies to **/*.tsx : Use React Hook Form with Zod for validationApplied to files:
apps/web/app/(app)/license/page.tsx📚 Learning: 2025-07-18T15:05:16.146Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/fullstack-workflow.mdc:0-0 Timestamp: 2025-07-18T15:05:16.146Z Learning: Applies to apps/web/components/**/*Form.tsx : Use React Hook Form with Zod resolver for form handling and validation.Applied to files:
apps/web/app/(app)/license/page.tsx📚 Learning: 2025-07-18T15:05:16.146Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/fullstack-workflow.mdc:0-0 Timestamp: 2025-07-18T15:05:16.146Z Learning: Applies to apps/web/components/**/*Form.tsx : Use `result?.serverError` with `toastError` and `toastSuccess` for error and success notifications in form submission handlers.Applied to files:
apps/web/app/(app)/license/page.tsx📚 Learning: 2025-07-20T09:03:06.318Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/ultracite.mdc:0-0 Timestamp: 2025-07-20T09:03:06.318Z Learning: Applies to **/*.{jsx,tsx} : Don't pass children as props.Applied to files:
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsx📚 Learning: 2025-07-20T09:03:06.318Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: .cursor/rules/ultracite.mdc:0-0 Timestamp: 2025-07-20T09:03:06.318Z Learning: Applies to **/*.{jsx,tsx} : Use <>...</> instead of <Fragment>...</Fragment>.Applied to files:
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsx📚 Learning: 2025-07-18T15:04:30.467Z
Learnt from: CR Repo: elie222/inbox-zero PR: 0 File: apps/web/CLAUDE.md:0-0 Timestamp: 2025-07-18T15:04:30.467Z Learning: Applies to apps/web/**/*.tsx : Use shadcn/ui components when availableApplied to files:
apps/web/components/NavBottom.tsx🧬 Code graph analysis (5)
apps/web/app/(app)/admin/page.tsx (2)
apps/web/components/PageWrapper.tsx (1)
PageWrapper(3-20)apps/web/components/PageHeader.tsx (1)
PageHeader(14-36)apps/web/app/(app)/[emailAccountId]/assistant/Rules.tsx (5)
apps/web/components/ExpandableText.tsx (1)
ExpandableText(8-67)apps/web/utils/condition.ts (1)
conditionsToString(158-175)apps/web/utils/action-sort.ts (1)
sortActionsByPriority(40-48)apps/web/utils/action-display.tsx (1)
getActionIcon(86-115)apps/web/components/PlanBadge.tsx (1)
getActionColor(209-232)apps/web/app/(app)/[emailAccountId]/usage/page.tsx (3)
apps/web/components/PageWrapper.tsx (1)
PageWrapper(3-20)apps/web/components/PageHeader.tsx (1)
PageHeader(14-36)apps/web/app/(app)/[emailAccountId]/usage/usage.tsx (1)
Usage(12-49)apps/web/components/PageHeader.tsx (1)
apps/web/components/Typography.tsx (1)
PageSubHeading(123-123)apps/web/app/(app)/license/page.tsx (2)
apps/web/components/PageWrapper.tsx (1)
PageWrapper(3-20)apps/web/components/PageHeader.tsx (1)
PageHeader(14-36)⏰ 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). (3)
- GitHub Check: cubic · AI code reviewer
- GitHub Check: test
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (19)
version.txt (1)
1-1: LGTM - Version bump.Standard patch version increment accompanying the mobile improvements.
apps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsx (1)
47-47: LGTM - Improved alt text accuracy.The alt text now correctly matches the page heading and image content.
apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsx (1)
17-17: LGTM - Mobile-first responsive padding.The responsive padding pattern (p-4 on mobile, sm:p-10 on larger screens) follows the mobile-first approach per coding guidelines.
Based on learnings
apps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsx (1)
178-201: LGTM - Responsive button layout.The responsive layout stacks buttons vertically on mobile (flex-col) and horizontally on larger screens (sm:flex-row). The primary action button uses full width on mobile for better touch targets, switching to auto width on larger screens. This follows the mobile-first approach.
Based on learnings
apps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsx (3)
21-23: LGTM - Concise intro text.The shortened introduction is more direct while maintaining clarity.
26-26: LGTM - Responsive spacing.Mobile-first gap spacing (gap-4 expanding to sm:gap-8) follows responsive design guidelines.
Based on learnings
76-76: LGTM - Responsive typography.Mobile-first font sizing (text-lg expanding to sm:text-xl) improves readability across screen sizes.
Based on learnings
apps/web/components/SidebarRight.tsx (2)
14-15: LGTM - Mobile-aware sidebar state.The sidebar now correctly uses mobile-specific open state (
openMobile) when on mobile devices, enabling proper mobile/desktop state coordination with theuseSidebarhook.
20-22: No z-index conflicts detected.The search found that all overlay components in the codebase—including modals, dialogs, sheets, dropdowns, tooltips, and popovers—consistently use
z-50. The shadcn/ui components (Dialog, AlertDialog, Sheet, Dropdown, Tooltip, Popover, Select, HoverCard) all applyz-50. There are no z-index values higher than 50 in the codebase, so thez-50value on SidebarRight is aligned with the rest of the overlay hierarchy rather than creating conflicts.apps/web/components/NavBottom.tsx (1)
66-70: No issues found — /calendars route exists and is properly referenced.The route is implemented at
apps/web/app/(app)/(redirects)/calendars/page.tsxandapps/web/app/(app)/[emailAccountId]/calendars/page.tsx, confirming the navigation entry is valid.apps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsx (1)
14-19: LGTM! The state management issue has been resolved.The handler now correctly calls
setOpenfor all cases, ensuring that components checkingstate.includes("chat-sidebar")will work properly. The additionalsetOpenMobilecall whenisMobileis true maintains mobile-specific behavior without breaking the shared state.apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsx (1)
221-221: LGTM! Responsive text sizing follows mobile-first approach.The progressive text sizing from
text-smtosm:text-baseimproves readability across viewport sizes.apps/web/app/(app)/[emailAccountId]/assistant/Rules.tsx (4)
66-70: LGTM! Simplified component API.Removing the
sizeprop simplifies the component interface and allows responsive behavior to be determined entirely by CSS breakpoints.
144-150: Responsive table headers implemented effectively.The consistent padding pattern (
px-2 sm:px-4) and progressive disclosure of the Condition column on larger screens (hidden sm:table-cell) follow mobile-first best practices. This trades off some information density on mobile for better layout.Based on learnings
234-268: LGTM! Enhanced condition display with better UX.The differentiated rendering for conversation status rules (with tooltip explanation) versus regular rules (with expandable text) improves user understanding. The
ExpandableTextcomponent from the snippets handles overflow gracefully.
437-450: LGTM! ActionBadges now responsive and space-efficient.The changes improve mobile layout:
min-w-0allows the flex container to shrink properly- Icons hidden on small screens (
hidden sm:block) reduce visual cluttershrink-0on badges prevents unwanted compressionBased on learnings
apps/web/app/(app)/[emailAccountId]/usage/page.tsx (1)
57-69: LGTM! Consistent page structure.The migration to
PageWrapperandPageHeaderaligns with the broader refactoring pattern seen inapps/web/app/(app)/admin/page.tsxandapps/web/app/(app)/license/page.tsx, improving layout consistency across the application.apps/web/components/PageHeader.tsx (1)
26-26: LGTM! Responsive flex layout improves mobile stacking.The responsive flex direction (
flex-col sm:flex-row) and alignment (items-start sm:items-center) ensure proper vertical stacking on mobile with appropriate spacing.Based on learnings
apps/web/app/(app)/admin/page.tsx (1)
33-49: LGTM! Consistent page structure refactoring.The migration to
PageWrapper/PageHeadermaintains consistency with the refactoring pattern across other pages. The adjusted spacing (mt-4 mb-20) provides better vertical rhythm for the admin page content.
There was a problem hiding this comment.
Reviewed changes from recent commits (found 1 issue).
1 issue found across 5 files
Prompt for AI agents (all 1 issues)
Understand the root cause of the following 1 issues and fix them.
<file name="apps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsx">
<violation number="1" location="apps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsx:15">
Unconditionally calling setOpen here means mobile usage permanently flags "chat-sidebar" as open in the desktop state/cookie, so the right sidebar reopens on desktop after mobile users close it. Please only update setOpen when not on mobile.</violation>
</file>
React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.
| variant="outline" | ||
| onClick={() => setOpen((arr) => [...arr, "chat-sidebar"])} | ||
| onClick={() => { | ||
| setOpen((arr) => [...arr, "chat-sidebar"]); |
There was a problem hiding this comment.
Unconditionally calling setOpen here means mobile usage permanently flags "chat-sidebar" as open in the desktop state/cookie, so the right sidebar reopens on desktop after mobile users close it. Please only update setOpen when not on mobile.
Prompt for AI agents
Address the following comment on apps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsx at line 15:
<comment>Unconditionally calling setOpen here means mobile usage permanently flags "chat-sidebar" as open in the desktop state/cookie, so the right sidebar reopens on desktop after mobile users close it. Please only update setOpen when not on mobile.</comment>
<file context>
@@ -12,8 +12,10 @@ export function AIChatButton() {
onClick={() => {
- const setter = isMobile ? setOpenMobile : setOpen;
- setter((arr) => [...arr, "chat-sidebar"]);
+ setOpen((arr) => [...arr, "chat-sidebar"]);
+ if (isMobile) {
+ setOpenMobile((arr) => [...arr, "chat-sidebar"]);
</file context>
1 participant
Summary by CodeRabbit
New Features
Bug Fixes
Improvements
Removed Features
Chores