Use nuqs for rules select

[elie222]

Switch RulesSelect in apps/web to use nuqs query state for ruleId to align rule selection with URL state

Refactors RulesSelect to replace Next.js searchParams/router with nuqs useQueryState(parseAsString.withDefault("all")) for ruleId, updating selection via setRuleId. Adjusts ActionBar layout to stack on small screens with conditional right content. Updates marketing submodule pointer and bumps version.txt to v2.21.1.

📍Where to Start

Start with RulesSelect and its useQueryState adoption in apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx.

---

Macroscope summarized c5d5235.

Summary by CodeRabbit

• Refactor

  • Enhanced rule selection state management to persist selections in URL parameters for improved navigation consistency.

• Chores

  • Version bumped to v2.21.1

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
inbox-zero	Error		Nov 26, 2025 7:02pm

[coderabbitai]

Walkthrough

This PR refactors RulesSelect.tsx to use the useQueryState hook for managing the ruleId parameter instead of direct router and search params navigation, simplifies dropdown handlers to use state setters, updates a submodule reference, and bumps the version to v2.21.1.

Changes

Cohort / File(s)	Summary
State management refactor apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx	Replaces useSearchParams/useRouter with useQueryState hook; introduces ruleId state with default "all"; updates dropdown handlers to call setRuleId instead of router navigation; adjusts label derivation logic to use ruleId state.
Submodule update apps/web/app/(marketing)	Updates subproject commit reference.
Version bump version.txt	Updates version from v2.21.0 to v2.21.1.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• RulesSelect.tsx: Review the state management migration from router/search params to useQueryState to ensure setRuleId calls correctly reflect the intended behavior for "all", "skipped", and specific rule IDs.
• Submodule update: Verify the new submodule commit is intentional and doesn't introduce breaking changes.

Possibly related PRs

• Tool - open rule as dialog #530: Both PRs handle ruleId query state management in RulesSelect, with this PR using useQueryState while the other explores RuleDialog/useDialogState patterns.
• Open rule inline in tab view #455: Related to query-parameter-based navigation and URL-construction patterns for rule selection; aligns with the query-state approach introduced here.
• Replace history select with tabs #565: Modifies the same RulesSelect.tsx file and ruleId query state handling, directly overlapping in scope.

Poem

🐰 Query state hops along, no router delays,
RuleId rules the day in simpler ways,
Version bumps and submodules aligned,
State management magic, elegantly designed! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Use nuqs for rules select' accurately reflects the main change: replacing direct URL navigation with the nuqs (useQueryState) hook for managing the ruleId parameter in the RulesSelect component.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/analytics-fix

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c53a402 and 640eb75.

📒 Files selected for processing (3)

• apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx (2 hunks)
• apps/web/app/(marketing) (1 hunks)
• version.txt (1 hunks)

🧰 Additional context used

📓 Path-based instructions (13)

!(pages/_document).{jsx,tsx}

📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)

Don't use the next/head module in pages/_document.js on Next.js projects

Files:

• apps/web/app/(marketing)
• version.txt
• apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx

apps/web/**/*.{ts,tsx}

📄 CodeRabbit inference engine (apps/web/CLAUDE.md)

apps/web/**/*.{ts,tsx}: Use TypeScript with strict null checks
Use @/ path aliases for imports from project root
Use proper error handling with try/catch blocks
Format code with Prettier
Follow consistent naming conventions using PascalCase for components
Centralize shared types in dedicated type files

Import specific lodash functions rather than entire lodash library to minimize bundle size (e.g., import groupBy from 'lodash/groupBy')

Files:

• apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx

apps/web/app/**/*.{ts,tsx}

📄 CodeRabbit inference engine (apps/web/CLAUDE.md)

Follow NextJS app router structure with (app) directory

Files:

• apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx

apps/web/**/*.tsx

📄 CodeRabbit inference engine (apps/web/CLAUDE.md)

apps/web/**/*.tsx: Follow tailwindcss patterns with prettier-plugin-tailwindcss for class sorting
Prefer functional components with hooks over class components
Use shadcn/ui components when available
Ensure responsive design with mobile-first approach
Use LoadingContent component for async data with loading and error states

Files:

• apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/data-fetching.mdc)

**/*.{ts,tsx}: For API GET requests to server, use the swr package
Use result?.serverError with toastError from @/components/Toast for error handling in async operations

**/*.{ts,tsx}: Use wrapper functions for Gmail message operations (get, list, batch, etc.) from @/utils/gmail/message.ts instead of direct API calls
Use wrapper functions for Gmail thread operations from @/utils/gmail/thread.ts instead of direct API calls
Use wrapper functions for Gmail label operations from @/utils/gmail/label.ts instead of direct API calls

**/*.{ts,tsx}: For early access feature flags, create hooks using the naming convention use[FeatureName]Enabled that return a boolean from useFeatureFlagEnabled("flag-key")
For A/B test variant flags, create hooks using the naming convention use[FeatureName]Variant that define variant types, use useFeatureFlagVariantKey() with type casting, and provide a default "control" fallback
Use kebab-case for PostHog feature flag keys (e.g., inbox-cleaner, pricing-options-2)
Always define types for A/B test variant flags (e.g., type PricingVariant = "control" | "variant-a" | "variant-b") and provide type safety through type casting

**/*.{ts,tsx}: Don't use primitive type aliases or misleading types
Don't use empty type parameters in type aliases and interfaces
Don't use this and super in static contexts
Don't use any or unknown as type constraints
Don't use the TypeScript directive @ts-ignore
Don't use TypeScript enums
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 TypeScript namespaces
Don't use non-null assertions with the ! postfix operator
Don't use parameter properties in class constructors
Don't use user-defined types
Use as const instead of literal types and type annotations
Use either T[] or Array<T> consistently
Initialize each enum member value explicitly
Use export type for types
Use `impo...

Files:

• apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx

apps/web/app/(app)/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/page-structure.mdc)

apps/web/app/(app)/**/*.{ts,tsx}: Components for the page are either put in page.tsx, or in the apps/web/app/(app)/PAGE_NAME folder
If we're in a deeply nested component we will use swr to fetch via API
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]/assistant/RulesSelect.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/prisma-enum-imports.mdc)

Always import Prisma enums from @/generated/prisma/enums instead of @/generated/prisma/client to avoid Next.js bundling errors in client components

Import Prisma using the project's centralized utility: import prisma from '@/utils/prisma'

Files:

• apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx

**/*.{tsx,ts}

📄 CodeRabbit inference engine (.cursor/rules/ui-components.mdc)

**/*.{tsx,ts}: Use Shadcn UI and Tailwind for components and styling
Use next/image package for images
For API GET requests to server, use the swr package with hooks like useSWR to fetch data
For text inputs, use the Input component with registerProps for form integration and error handling

Files:

• apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx

**/*.{tsx,ts,css}

📄 CodeRabbit inference engine (.cursor/rules/ui-components.mdc)

Implement responsive design with Tailwind CSS using a mobile-first approach

Files:

• apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx

**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/ui-components.mdc)

**/*.tsx: Use the LoadingContent component to handle loading states instead of manual loading state management
For text areas, use the Input component with type='text', autosizeTextarea prop set to true, and registerProps for form integration

Files:

• apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)

**/*.{js,jsx,ts,tsx}: 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
Don't use distracting elements like <marquee> or <blink>
Only use the scope prop on <th> 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
Use semantic elements instead of role attributes in JSX
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 AR...

Files:

• apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx

**/*.{jsx,tsx}

📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)

**/*.{jsx,tsx}: Don't use unnecessary fragments
Don't pass children as props
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 forget key props in iterators and collection literals
Don't define React components inside other components
Don't use event handlers on non-interactive elements
Don't assign to React component props
Don't use both children and dangerouslySetInnerHTML props on the same element
Don't use dangerous JSX props
Don't use Array index in keys
Don't insert comments as text nodes
Don't assign JSX properties multiple times
Don't add extra closing tags for components without children
Use <>...</> instead of <Fragment>...</Fragment>
Watch out for possible "wrong" semicolons inside JSX elements
Make sure void (self-closing) elements don't have children
Don't use target="_blank" without rel="noopener"
Don't use <img> elements in Next.js projects
Don't use <head> elements in Next.js projects

Files:

• apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx

**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (.cursor/rules/utilities.mdc)

**/*.{js,ts,jsx,tsx}: Use lodash utilities for common operations (arrays, objects, strings)
Import specific lodash functions to minimize bundle size (e.g., import groupBy from 'lodash/groupBy')

Files:

• apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx

🧠 Learnings (4)

📓 Common learnings

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.

📚 Learning: 2025-11-25T14:42:08.846Z

Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/ultracite.mdc:0-0
Timestamp: 2025-11-25T14:42:08.846Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Use valid ARIA state and property values

Applied to files:

• apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx

📚 Learning: 2025-11-25T14:42:08.846Z

Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/ultracite.mdc:0-0
Timestamp: 2025-11-25T14:42:08.846Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Use semantic elements instead of role attributes in JSX

Applied to files:

• apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx

📚 Learning: 2025-11-25T14:39:23.326Z

Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/security.mdc:0-0
Timestamp: 2025-11-25T14:39:23.326Z
Learning: Applies to app/api/**/*.ts : Use `SafeError` for error responses to prevent information disclosure - provide generic messages (e.g., 'Rule not found' not 'Rule {id} does not exist for user {userId}') without revealing internal IDs or ownership details

Applied to files:

• apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx

🧬 Code graph analysis (1)

apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx (1)

apps/web/hooks/useRules.tsx (1)

• useRules (4-8)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: cubic · AI code reviewer
• GitHub Check: Jit Security

🔇 Additional comments (6)

version.txt (1)

1-1: Version bump is correct.

The version has been appropriately incremented from v2.21.0 to v2.21.1 following semantic versioning for a patch release.

apps/web/app/(marketing) (1)

1-1: ⚠️ Incomplete review: RulesSelect.tsx changes not provided.

The provided file only shows a submodule commit reference update. The actual implementation changes to RulesSelect.tsx (mentioned in the AI summary as using useQueryState for managing the ruleId parameter) are not included in the files provided for review.

To complete the review, please provide the changes to apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx so I can verify:

• Correct usage of the useQueryState hook from the nuqs library
• Proper handling of the ruleId state (defaulting to "all")
• That any components using search params have appropriate Suspense boundaries (per Next.js App Router best practices from the retrieved learnings)
• Version and version.txt updates are consistent

apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx (4)

11-11: LGTM! Clean import for URL state management.

The import of parseAsString and useQueryState from nuqs is appropriate for managing URL query parameters in a more declarative way.

---

21-25: LGTM! Clean and safe label derivation logic.

The getCurrentLabel function correctly derives the label from the ruleId state and handles all edge cases:

• Uses optional chaining for safe navigation
• Provides appropriate fallback to "All rules"
• Covers all three cases: "all", "skipped", and specific rule lookup

---

46-56: LGTM! Clean and simplified dropdown handlers.

The refactored onClick handlers are much cleaner and more declarative than manual URL manipulation. Each handler directly calls setRuleId with the appropriate value, and nuqs handles the URL synchronization automatically.

---

16-19: Based on my verification through web search, I can now provide you with the rewritten review comment.

---

Suspense boundary and "use client" directive are required for useQueryState.

The useQueryState hook from nuqs relies on Next.js' useSearchParams under the hood, which means it inherits the same Suspense requirement in App Router. Any client component using useQueryState must:

1. Have "use client" at the top of the file — This component uses hooks, so it must be a client component.
2. Be wrapped in a <Suspense> boundary — When using useQueryState, the smallest subtree containing this component must be wrapped in <Suspense> to prevent a "Missing Suspense boundary" error or CSR bailout.

Verify that:

• RulesSelect.tsx starts with "use client"
• The parent component wraps <RulesSelect /> in <Suspense><RulesSelect /></Suspense>

Alternatively, if the parent page is already dynamic or passes searchParams from the server, this requirement may be satisfied differently.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[jit-ci]

❌ Jit security check failed to run.

#jit_bypass_commit in this PR to bypass, Jit Admin privileges required.

[cubic-dev-ai]

No issues found across 3 files

[cubic-dev-ai]

No issues found across 4 files

[jit-ci]

❌ Jit security check failed to run.

#jit_bypass_commit in this PR to bypass, Jit Admin privileges required.