QF-2751: Show the settings/preferences icon on the surah header #2554
Conversation
…ngsDrawer - Removed SettingsDrawer from NavbarBody and added SettingsButton to ContextMenu for better accessibility. - Introduced a new SettingsButton component to handle opening the SettingsDrawer. - Updated ContextMenu layout to accommodate the new SettingsButton while maintaining responsiveness.
- Adjusted padding values for better alignment in the ContextMenu. - Added new styles for reading preferences and chapter navigation components. - Enhanced responsiveness for chapter navigation and settings display on mobile devices.
- Integrated event logging to track when the settings drawer is opened. - Created integration tests to verify the visibility and functionality of the settings drawer on both desktop and mobile views.
WalkthroughSettings drawer toggle removed from Navbar and moved into the QuranReader ContextMenu. A new SettingsButton component and icon styles were added; ContextMenu markup and styles were updated to place the button(s) and render the SettingsDrawer. Playwright tests for desktop and mobile were added. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ContextMenu as ContextMenu UI
participant Store as Redux Store
participant SettingsDrawer as SettingsDrawer
Note over ContextMenu: SettingsButton(s) placed next to nav & switcher
User->>ContextMenu: Click SettingsButton
ContextMenu->>Store: dispatch(setIsSettingsDrawerOpen(true))
Store-->>ContextMenu: state update (drawer open)
ContextMenu->>SettingsDrawer: render / set visible
SettingsDrawer->>User: visible drawer UI
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ 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 |
- Changed comment to specify that the SettingsDrawer component is being rendered in the ContextMenu.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (6)
src/components/Navbar/NavbarBody/index.tsx(0 hunks)src/components/QuranReader/ContextMenu/components/SettingsButton.module.scss(1 hunks)src/components/QuranReader/ContextMenu/components/SettingsButton.tsx(1 hunks)src/components/QuranReader/ContextMenu/index.tsx(5 hunks)src/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss(7 hunks)tests/integration/quran-reader/settings-gear.spec.ts(1 hunks)
💤 Files with no reviewable changes (1)
- src/components/Navbar/NavbarBody/index.tsx
🧰 Additional context used
📓 Path-based instructions (15)
**/*.*
📄 CodeRabbit inference engine (.cursor/rules/bug-handling-with-todo-comments.mdc)
If you encounter a bug in existing code, or the instructions lead to suboptimal or buggy code, add comments starting with "TODO:" outlining the problems.
**/*.*: Utilize Early Returns: Use early returns to avoid nested conditions and improve readability.
Conditional Classes: Prefer conditional classes over ternary operators for class attributes.
**/*.*: Use comments sparingly, and when you do, make them meaningful.
Don't comment on obvious things. Excessive or unclear comments can clutter the codebase and become outdated.
Use comments to convey the 'why' behind specific actions or explain unusual behavior and potential pitfalls.
Provide meaningful information about the function's behavior and explain unusual behavior and potential pitfalls.
**/*.*: Write short functions that only do one thing.
Follow the single responsibility principle (SRP), which means that a function should have one purpose and perform it effectively.
If a function becomes too long or complex, consider breaking it into smaller, more manageable functions.Order functions with those that are composing other functions appearing earlier in the file. For example, if you have a menu with multiple buttons, define the menu function above the buttons.
**/*.*: Always add helpful comments to the code explaining what you are doing.
Never delete old comments, unless they are no longer relevant because the code has been rewritten or deleted.
**/*.*: Choose names for variables, functions, and classes that reflect their purpose and behavior.
A name should tell you why it exists, what it does, and how it is used. If a name requires a comment, then the name does not reveal its intent.
Use specific names that provide a clearer understanding of what the variables represent and how they are used.
Files:
src/components/QuranReader/ContextMenu/components/SettingsButton.module.scsssrc/components/QuranReader/ContextMenu/components/SettingsButton.tsxsrc/components/QuranReader/ContextMenu/index.tsxtests/integration/quran-reader/settings-gear.spec.tssrc/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss
src/**/*.module.scss
📄 CodeRabbit inference engine (CLAUDE.md)
Use SCSS Modules for component-specific styling
Files:
src/components/QuranReader/ContextMenu/components/SettingsButton.module.scsssrc/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss
**/*.{ts,tsx,js,jsx,scss}
📄 CodeRabbit inference engine (AGENTS.md)
Use Prettier formatting: single quotes, 2-space indentation, 100-character line width, and trailing commas
Files:
src/components/QuranReader/ContextMenu/components/SettingsButton.module.scsssrc/components/QuranReader/ContextMenu/components/SettingsButton.tsxsrc/components/QuranReader/ContextMenu/index.tsxtests/integration/quran-reader/settings-gear.spec.tssrc/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss
**/*.module.scss
📄 CodeRabbit inference engine (AGENTS.md)
Use SCSS modules for component styling
Files:
src/components/QuranReader/ContextMenu/components/SettingsButton.module.scsssrc/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/next-js-conventions.mdc)
**/*.{js,jsx,ts,tsx}: Rely on Next.js Pages Router for state changes.
Minimize 'use client' usage: Prefer server components and Next.js SSR features.
Minimize 'use client' usage: Use 'use client' only for Web API access in small components.
Minimize 'use client' usage: Avoid using 'use client' for data fetching or state management.
**/*.{js,jsx,ts,tsx}: Optimize Web Vitals (LCP, CLS, FID)
Use dynamic loading for non-critical components using @src/components/dls/Spinner/Spinner.tsx
Files:
src/components/QuranReader/ContextMenu/components/SettingsButton.tsxsrc/components/QuranReader/ContextMenu/index.tsxtests/integration/quran-reader/settings-gear.spec.ts
src/components/**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react-functional-components.mdc)
src/components/**/*.tsx: Always use React functional components with hooks.
Use React.FC for functional components with props.
Files:
src/components/QuranReader/ContextMenu/components/SettingsButton.tsxsrc/components/QuranReader/ContextMenu/index.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.{tsx,jsx}: Use functional components over class components
Keep components small and focused
Extract reusable logic into custom hooks
Use composition over inheritance
Split large components into smaller, focused ones
Follow the Rules of Hooks
Use custom hooks for reusable logic
Use appropriate dependency arrays in useEffect
Implement cleanup in useEffect when needed
Avoid nested hooks
Use useState for local component state
Avoid prop drilling through proper state management
Implement proper memoization (useMemo, useCallback)
Use React.memo for expensive components
Avoid unnecessary re-renders
Implement proper lazy loading
Use proper key props in lists
Profile and optimize render performance
Show appropriate loading and error states
Handle async errors properly
Show user-friendly error messages
Implement proper fallback UI
Log errors appropriately
Handle edge cases gracefully
Use semantic HTML elements
Implement proper ARIA attributes
Ensure keyboard navigation
Handle focus management
Provide proper alt text for images
Use proper imports/exports
Document complex component logic
Files:
src/components/QuranReader/ContextMenu/components/SettingsButton.tsxsrc/components/QuranReader/ContextMenu/index.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
Implement proper prop types with TypeScript
**/*.tsx: Prefix interfaces for React props with 'Props' (e.g., ButtonProps)
Implement proper error boundariesReact: use functional components only; extract reusable logic into custom hooks; apply proper memoization (React.memo/useMemo/useCallback)
Files:
src/components/QuranReader/ContextMenu/components/SettingsButton.tsxsrc/components/QuranReader/ContextMenu/index.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
Use xstate for complex state logic
**/*.{ts,tsx}: TypeScript: prefer interfaces over type aliases for object shapes; avoid any; add explicit return types for public functions
Error handling: define and use custom error types; use async/await correctly; show user-friendly error messages
Use Redux Toolkit for state management and XState for complex state machines
Implement i18n with next-translate in components and utilities
Files:
src/components/QuranReader/ContextMenu/components/SettingsButton.tsxsrc/components/QuranReader/ContextMenu/index.tsxtests/integration/quran-reader/settings-gear.spec.ts
**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
**/*.{ts,tsx,d.ts}: Prefer interfaces over types for object definitions
Use type for unions, intersections, and mapped types
Avoid usingany, preferunknownfor unknown types
Leverage TypeScript's built-in utility types
Use generics for reusable type patterns
Use PascalCase for type names and interfaces
Use camelCase for variables and functions
Use UPPER_CASE for constants
Use descriptive names with auxiliary verbs (e.g., isLoading, hasError)
Use explicit return types for public functions
Use arrow functions for callbacks and methods
Implement proper error handling with custom error types
Use function overloads for complex type scenarios
Prefer async/await over Promises
Use readonly for immutable properties
Leverage discriminated unions for type safety
Use type guards for runtime type checking
Implement proper null checking
Avoid type assertions unless necessary
Create custom error types for domain-specific errors
Use Result types for operations that can fail
Use try-catch blocks with typed catch clauses
Handle Promise rejections properly
Files:
src/components/QuranReader/ContextMenu/components/SettingsButton.tsxsrc/components/QuranReader/ContextMenu/index.tsxtests/integration/quran-reader/settings-gear.spec.ts
{src,types}/**/*.ts?(x)
📄 CodeRabbit inference engine (CLAUDE.md)
Use TypeScript throughout the codebase with strict configuration
Files:
src/components/QuranReader/ContextMenu/components/SettingsButton.tsxsrc/components/QuranReader/ContextMenu/index.tsx
src/**/*.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Prefer React functional components for UI implementation
Files:
src/components/QuranReader/ContextMenu/components/SettingsButton.tsxsrc/components/QuranReader/ContextMenu/index.tsx
{src,types}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use path aliases @/ for src and @/dls/* for design system imports
Files:
src/components/QuranReader/ContextMenu/components/SettingsButton.tsxsrc/components/QuranReader/ContextMenu/index.tsx
src/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Organize React components by feature and place DLS components under src/components/dls
Files:
src/components/QuranReader/ContextMenu/components/SettingsButton.tsxsrc/components/QuranReader/ContextMenu/index.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js,jsx}: Order imports: React first, then external, then internal; alphabetize within groups with blank lines between groups
Naming: camelCase for variables/functions; PascalCase for types, interfaces, and React components; UPPER_CASE for constants
Functions should be <= 30 lines, prefer early returns, single responsibility, and descriptive names
Files:
src/components/QuranReader/ContextMenu/components/SettingsButton.tsxsrc/components/QuranReader/ContextMenu/index.tsxtests/integration/quran-reader/settings-gear.spec.ts
🧬 Code graph analysis (2)
src/components/QuranReader/ContextMenu/components/SettingsButton.tsx (1)
src/utils/eventLogger.ts (1)
logEvent(25-37)
src/components/QuranReader/ContextMenu/index.tsx (2)
src/utils/responsive.ts (1)
isMobile(5-8)src/utils/verse.ts (1)
getChapterNumberFromKey(44-45)
🔇 Additional comments (7)
src/components/QuranReader/ContextMenu/components/SettingsButton.module.scss (1)
1-4: LGTM!The styling is minimal, appropriate, and correctly uses CSS variables for theming consistency.
src/components/QuranReader/ContextMenu/components/SettingsButton.tsx (1)
26-38: LGTM!The component structure is clean, uses proper TypeScript typing, follows React functional component patterns, and implements appropriate accessibility attributes.
tests/integration/quran-reader/settings-gear.spec.ts (1)
3-37: Good test coverage for the feature.The tests appropriately cover:
- Desktop drawer opening behavior
- Mobile drawer opening before scroll (navbar visible)
- Drawer closing functionality
- Mobile drawer opening after scroll (navbar hidden)
This validates the settings gear works in both navbar and context menu locations.
src/components/QuranReader/ContextMenu/index.tsx (2)
132-134: Verify the conditional rendering logic is correct.The second SettingsButton renders when
(!isMobileView || !showNavbar)is true. Let's verify this produces the intended behavior:
- Desktop (isMobileView=false):
!false || !showNavbar=true || X→ always renders- Mobile + navbar visible (isMobileView=true, showNavbar=true):
!true || !true=false || false→ never renders ✓- Mobile + navbar hidden (isMobileView=true, showNavbar=false):
!true || !false=false || true→ renders ✓This logic seems correct but would benefit from a clarifying comment.
Add a comment explaining the visibility logic:
+ {/* Desktop: always show. Mobile: show only when navbar is hidden */} {(!isMobileView || !showNavbar) && ( <SettingsButton className={styles.settingsNextToSwitcher} /> )}
148-149: Good practice mounting the drawer at this level.The comment clearly explains that the SettingsDrawer was moved from Navbar to ContextMenu, and keeping it mounted here ensures it's available when triggered by either SettingsButton instance.
src/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss (2)
131-141: Good responsive strategy for settings button placement.The CSS effectively handles the dual-button placement:
.settingsNextToChapter: Visible on mobile, hidden on tablet+ (line 135).settingsNextToSwitcher: Always visible (line 140)This complements the conditional rendering logic in the component, though as noted in the ContextMenu/index.tsx review, consolidating this approach would improve maintainability.
104-108: LGTM: Well-structured layout containers.The new wrapper classes (
.readingPreferenceContainer,.chapterNavigationRow,.chapterNavigationWrapper) provide clear semantic structure and proper flexbox layout for the settings button integration.Also applies to: 110-123
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
src/components/QuranReader/ContextMenu/index.tsx (1)
90-99: Dual SettingsButton rendering creates maintenance complexity.A previous review comment comprehensively flagged the dual
SettingsButtonrendering strategy (one here at line 98, another at lines 132-134) as confusing due to the mix of conditional rendering and CSS-based hiding. The concerns raised in that comment remain valid and should be addressed.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
src/components/QuranReader/ContextMenu/index.tsx(5 hunks)
🧰 Additional context used
📓 Path-based instructions (13)
**/*.*
📄 CodeRabbit inference engine (.cursor/rules/bug-handling-with-todo-comments.mdc)
If you encounter a bug in existing code, or the instructions lead to suboptimal or buggy code, add comments starting with "TODO:" outlining the problems.
**/*.*: Utilize Early Returns: Use early returns to avoid nested conditions and improve readability.
Conditional Classes: Prefer conditional classes over ternary operators for class attributes.
**/*.*: Use comments sparingly, and when you do, make them meaningful.
Don't comment on obvious things. Excessive or unclear comments can clutter the codebase and become outdated.
Use comments to convey the 'why' behind specific actions or explain unusual behavior and potential pitfalls.
Provide meaningful information about the function's behavior and explain unusual behavior and potential pitfalls.
**/*.*: Write short functions that only do one thing.
Follow the single responsibility principle (SRP), which means that a function should have one purpose and perform it effectively.
If a function becomes too long or complex, consider breaking it into smaller, more manageable functions.Order functions with those that are composing other functions appearing earlier in the file. For example, if you have a menu with multiple buttons, define the menu function above the buttons.
**/*.*: Always add helpful comments to the code explaining what you are doing.
Never delete old comments, unless they are no longer relevant because the code has been rewritten or deleted.
**/*.*: Choose names for variables, functions, and classes that reflect their purpose and behavior.
A name should tell you why it exists, what it does, and how it is used. If a name requires a comment, then the name does not reveal its intent.
Use specific names that provide a clearer understanding of what the variables represent and how they are used.
Files:
src/components/QuranReader/ContextMenu/index.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/next-js-conventions.mdc)
**/*.{js,jsx,ts,tsx}: Rely on Next.js Pages Router for state changes.
Minimize 'use client' usage: Prefer server components and Next.js SSR features.
Minimize 'use client' usage: Use 'use client' only for Web API access in small components.
Minimize 'use client' usage: Avoid using 'use client' for data fetching or state management.
**/*.{js,jsx,ts,tsx}: Optimize Web Vitals (LCP, CLS, FID)
Use dynamic loading for non-critical components using @src/components/dls/Spinner/Spinner.tsx
Files:
src/components/QuranReader/ContextMenu/index.tsx
src/components/**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react-functional-components.mdc)
src/components/**/*.tsx: Always use React functional components with hooks.
Use React.FC for functional components with props.
Files:
src/components/QuranReader/ContextMenu/index.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.{tsx,jsx}: Use functional components over class components
Keep components small and focused
Extract reusable logic into custom hooks
Use composition over inheritance
Split large components into smaller, focused ones
Follow the Rules of Hooks
Use custom hooks for reusable logic
Use appropriate dependency arrays in useEffect
Implement cleanup in useEffect when needed
Avoid nested hooks
Use useState for local component state
Avoid prop drilling through proper state management
Implement proper memoization (useMemo, useCallback)
Use React.memo for expensive components
Avoid unnecessary re-renders
Implement proper lazy loading
Use proper key props in lists
Profile and optimize render performance
Show appropriate loading and error states
Handle async errors properly
Show user-friendly error messages
Implement proper fallback UI
Log errors appropriately
Handle edge cases gracefully
Use semantic HTML elements
Implement proper ARIA attributes
Ensure keyboard navigation
Handle focus management
Provide proper alt text for images
Use proper imports/exports
Document complex component logic
Files:
src/components/QuranReader/ContextMenu/index.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
Implement proper prop types with TypeScript
**/*.tsx: Prefix interfaces for React props with 'Props' (e.g., ButtonProps)
Implement proper error boundariesReact: use functional components only; extract reusable logic into custom hooks; apply proper memoization (React.memo/useMemo/useCallback)
Files:
src/components/QuranReader/ContextMenu/index.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
Use xstate for complex state logic
**/*.{ts,tsx}: TypeScript: prefer interfaces over type aliases for object shapes; avoid any; add explicit return types for public functions
Error handling: define and use custom error types; use async/await correctly; show user-friendly error messages
Use Redux Toolkit for state management and XState for complex state machines
Implement i18n with next-translate in components and utilities
Files:
src/components/QuranReader/ContextMenu/index.tsx
**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
**/*.{ts,tsx,d.ts}: Prefer interfaces over types for object definitions
Use type for unions, intersections, and mapped types
Avoid usingany, preferunknownfor unknown types
Leverage TypeScript's built-in utility types
Use generics for reusable type patterns
Use PascalCase for type names and interfaces
Use camelCase for variables and functions
Use UPPER_CASE for constants
Use descriptive names with auxiliary verbs (e.g., isLoading, hasError)
Use explicit return types for public functions
Use arrow functions for callbacks and methods
Implement proper error handling with custom error types
Use function overloads for complex type scenarios
Prefer async/await over Promises
Use readonly for immutable properties
Leverage discriminated unions for type safety
Use type guards for runtime type checking
Implement proper null checking
Avoid type assertions unless necessary
Create custom error types for domain-specific errors
Use Result types for operations that can fail
Use try-catch blocks with typed catch clauses
Handle Promise rejections properly
Files:
src/components/QuranReader/ContextMenu/index.tsx
{src,types}/**/*.ts?(x)
📄 CodeRabbit inference engine (CLAUDE.md)
Use TypeScript throughout the codebase with strict configuration
Files:
src/components/QuranReader/ContextMenu/index.tsx
src/**/*.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Prefer React functional components for UI implementation
Files:
src/components/QuranReader/ContextMenu/index.tsx
{src,types}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use path aliases @/ for src and @/dls/* for design system imports
Files:
src/components/QuranReader/ContextMenu/index.tsx
src/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Organize React components by feature and place DLS components under src/components/dls
Files:
src/components/QuranReader/ContextMenu/index.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js,jsx}: Order imports: React first, then external, then internal; alphabetize within groups with blank lines between groups
Naming: camelCase for variables/functions; PascalCase for types, interfaces, and React components; UPPER_CASE for constants
Functions should be <= 30 lines, prefer early returns, single responsibility, and descriptive names
Files:
src/components/QuranReader/ContextMenu/index.tsx
**/*.{ts,tsx,js,jsx,scss}
📄 CodeRabbit inference engine (AGENTS.md)
Use Prettier formatting: single quotes, 2-space indentation, 100-character line width, and trailing commas
Files:
src/components/QuranReader/ContextMenu/index.tsx
🧬 Code graph analysis (1)
src/components/QuranReader/ContextMenu/index.tsx (2)
src/utils/responsive.ts (1)
isMobile(5-8)src/utils/verse.ts (1)
getChapterNumberFromKey(44-45)
yousefdergham
changed the title
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (3)
src/components/QuranReader/ContextMenu/components/SettingsButton.tsx (1)
21-24: Previous issue resolved.The code now correctly uses the Redux Toolkit action creator directly (
dispatch(setIsSettingsDrawerOpen(true))), addressing the previous review comment.src/components/QuranReader/ContextMenu/index.tsx (2)
90-99: Dual SettingsButton rendering strategy remains unclear.This is the first of two SettingsButton instances (second at lines 132-134). The previous review comment about consolidating these remains valid: the code mixes conditional rendering with CSS-based hiding (the
.settingsNextToChapterclass hides this button on desktop per past review context).This creates confusion about button placement:
- Line 98: Renders when
showNavbaris true (but hidden on desktop via CSS)- Lines 132-134: Renders when
(!isMobileView || !showNavbar)Consolidate into a single SettingsButton with clear placement logic:
{/* Settings button placement: - Mobile + navbar visible: next to chapter navigation - Mobile + navbar hidden: next to reading preference switcher - Desktop: next to reading preference switcher only */} {isMobileView && showNavbar ? ( <SettingsButton className={styles.settingsNextToChapter} /> ) : ( // Render in reading preference section (lines 132-134) )}Then move the else branch to lines 132-134, eliminating duplicate rendering and CSS-based hiding.
18-18: SettingsDrawer should be relocated to a shared location.The
SettingsDrawercomponent is imported from theNavbarfolder but is now used in theQuranReadercontext. Since this PR moves settings functionality from the navbar to the surah header, the component should be relocated to a shared directory.Move
SettingsDrawerto a shared location (e.g.,src/components/Shared/SettingsDrawerorsrc/components/Common/SettingsDrawer), update its export path, then update imports in this file and any remaining Navbar references.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/components/QuranReader/ContextMenu/components/SettingsButton.tsx(1 hunks)src/components/QuranReader/ContextMenu/index.tsx(6 hunks)
🧰 Additional context used
📓 Path-based instructions (13)
**/*.*
📄 CodeRabbit inference engine (.cursor/rules/bug-handling-with-todo-comments.mdc)
If you encounter a bug in existing code, or the instructions lead to suboptimal or buggy code, add comments starting with "TODO:" outlining the problems.
**/*.*: Utilize Early Returns: Use early returns to avoid nested conditions and improve readability.
Conditional Classes: Prefer conditional classes over ternary operators for class attributes.
**/*.*: Use comments sparingly, and when you do, make them meaningful.
Don't comment on obvious things. Excessive or unclear comments can clutter the codebase and become outdated.
Use comments to convey the 'why' behind specific actions or explain unusual behavior and potential pitfalls.
Provide meaningful information about the function's behavior and explain unusual behavior and potential pitfalls.
**/*.*: Write short functions that only do one thing.
Follow the single responsibility principle (SRP), which means that a function should have one purpose and perform it effectively.
If a function becomes too long or complex, consider breaking it into smaller, more manageable functions.Order functions with those that are composing other functions appearing earlier in the file. For example, if you have a menu with multiple buttons, define the menu function above the buttons.
**/*.*: Always add helpful comments to the code explaining what you are doing.
Never delete old comments, unless they are no longer relevant because the code has been rewritten or deleted.
**/*.*: Choose names for variables, functions, and classes that reflect their purpose and behavior.
A name should tell you why it exists, what it does, and how it is used. If a name requires a comment, then the name does not reveal its intent.
Use specific names that provide a clearer understanding of what the variables represent and how they are used.
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/QuranReader/ContextMenu/components/SettingsButton.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/next-js-conventions.mdc)
**/*.{js,jsx,ts,tsx}: Rely on Next.js Pages Router for state changes.
Minimize 'use client' usage: Prefer server components and Next.js SSR features.
Minimize 'use client' usage: Use 'use client' only for Web API access in small components.
Minimize 'use client' usage: Avoid using 'use client' for data fetching or state management.
**/*.{js,jsx,ts,tsx}: Optimize Web Vitals (LCP, CLS, FID)
Use dynamic loading for non-critical components using @src/components/dls/Spinner/Spinner.tsx
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/QuranReader/ContextMenu/components/SettingsButton.tsx
src/components/**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react-functional-components.mdc)
src/components/**/*.tsx: Always use React functional components with hooks.
Use React.FC for functional components with props.
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/QuranReader/ContextMenu/components/SettingsButton.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.{tsx,jsx}: Use functional components over class components
Keep components small and focused
Extract reusable logic into custom hooks
Use composition over inheritance
Split large components into smaller, focused ones
Follow the Rules of Hooks
Use custom hooks for reusable logic
Use appropriate dependency arrays in useEffect
Implement cleanup in useEffect when needed
Avoid nested hooks
Use useState for local component state
Avoid prop drilling through proper state management
Implement proper memoization (useMemo, useCallback)
Use React.memo for expensive components
Avoid unnecessary re-renders
Implement proper lazy loading
Use proper key props in lists
Profile and optimize render performance
Show appropriate loading and error states
Handle async errors properly
Show user-friendly error messages
Implement proper fallback UI
Log errors appropriately
Handle edge cases gracefully
Use semantic HTML elements
Implement proper ARIA attributes
Ensure keyboard navigation
Handle focus management
Provide proper alt text for images
Use proper imports/exports
Document complex component logic
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/QuranReader/ContextMenu/components/SettingsButton.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
Implement proper prop types with TypeScript
**/*.tsx: Prefix interfaces for React props with 'Props' (e.g., ButtonProps)
Implement proper error boundariesReact: use functional components only; extract reusable logic into custom hooks; apply proper memoization (React.memo/useMemo/useCallback)
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/QuranReader/ContextMenu/components/SettingsButton.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
Use xstate for complex state logic
**/*.{ts,tsx}: TypeScript: prefer interfaces over type aliases for object shapes; avoid any; add explicit return types for public functions
Error handling: define and use custom error types; use async/await correctly; show user-friendly error messages
Use Redux Toolkit for state management and XState for complex state machines
Implement i18n with next-translate in components and utilities
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/QuranReader/ContextMenu/components/SettingsButton.tsx
**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
**/*.{ts,tsx,d.ts}: Prefer interfaces over types for object definitions
Use type for unions, intersections, and mapped types
Avoid usingany, preferunknownfor unknown types
Leverage TypeScript's built-in utility types
Use generics for reusable type patterns
Use PascalCase for type names and interfaces
Use camelCase for variables and functions
Use UPPER_CASE for constants
Use descriptive names with auxiliary verbs (e.g., isLoading, hasError)
Use explicit return types for public functions
Use arrow functions for callbacks and methods
Implement proper error handling with custom error types
Use function overloads for complex type scenarios
Prefer async/await over Promises
Use readonly for immutable properties
Leverage discriminated unions for type safety
Use type guards for runtime type checking
Implement proper null checking
Avoid type assertions unless necessary
Create custom error types for domain-specific errors
Use Result types for operations that can fail
Use try-catch blocks with typed catch clauses
Handle Promise rejections properly
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/QuranReader/ContextMenu/components/SettingsButton.tsx
{src,types}/**/*.ts?(x)
📄 CodeRabbit inference engine (CLAUDE.md)
Use TypeScript throughout the codebase with strict configuration
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/QuranReader/ContextMenu/components/SettingsButton.tsx
src/**/*.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Prefer React functional components for UI implementation
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/QuranReader/ContextMenu/components/SettingsButton.tsx
{src,types}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use path aliases @/ for src and @/dls/* for design system imports
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/QuranReader/ContextMenu/components/SettingsButton.tsx
src/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Organize React components by feature and place DLS components under src/components/dls
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/QuranReader/ContextMenu/components/SettingsButton.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js,jsx}: Order imports: React first, then external, then internal; alphabetize within groups with blank lines between groups
Naming: camelCase for variables/functions; PascalCase for types, interfaces, and React components; UPPER_CASE for constants
Functions should be <= 30 lines, prefer early returns, single responsibility, and descriptive names
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/QuranReader/ContextMenu/components/SettingsButton.tsx
**/*.{ts,tsx,js,jsx,scss}
📄 CodeRabbit inference engine (AGENTS.md)
Use Prettier formatting: single quotes, 2-space indentation, 100-character line width, and trailing commas
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/QuranReader/ContextMenu/components/SettingsButton.tsx
🧠 Learnings (3)
📚 Learning: 2025-10-22T20:33:55.176Z
Learnt from: yousefdergham
PR: quran/quran.com-frontend-next#2547
File: src/components/Course/CourseDetails/Tabs/Syllabus/index.tsx:44-49
Timestamp: 2025-10-22T20:33:55.176Z
Learning: Preference: In quran.com-frontend-next, keep concise “why” comments for analytics/UX decision points (e.g., guest vs enrolled click handlers) but avoid verbose JSDoc that repeats params/types. Convert multi-line JSDoc to brief inline rationale comments, especially in src/components/Course/CourseDetails/Tabs/Syllabus/index.tsx and similar analytics handlers.
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-08-01T08:50:54.518Z
Learnt from: CR
PR: quran/quran.com-frontend-next#0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-08-01T08:50:54.518Z
Learning: Applies to **/*.{tsx,jsx} : Use React.memo for expensive components
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-10-07T08:38:28.343Z
Learnt from: CR
PR: quran/quran.com-frontend-next#0
File: AGENTS.md:0-0
Timestamp: 2025-10-07T08:38:28.343Z
Learning: Applies to **/*.tsx : React: use functional components only; extract reusable logic into custom hooks; apply proper memoization (React.memo/useMemo/useCallback)
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
🧬 Code graph analysis (2)
src/components/QuranReader/ContextMenu/index.tsx (2)
src/utils/responsive.ts (1)
isMobile(5-8)src/utils/verse.ts (1)
getChapterNumberFromKey(44-45)
src/components/QuranReader/ContextMenu/components/SettingsButton.tsx (1)
src/utils/eventLogger.ts (1)
logEvent(25-37)
🔇 Additional comments (1)
src/components/QuranReader/ContextMenu/index.tsx (1)
53-53: Consider responsive behavior on window resize.The
isMobileViewis memoized with an empty dependency array, meaning it computes only once on mount. If users resize their browser window, the mobile/desktop state won't update, potentially causing layout issues.If responsive behavior on resize is needed, implement a resize listener with debouncing:
const [isMobileView, setIsMobileView] = React.useState(() => isMobile()); React.useEffect(() => { let timeoutId: NodeJS.Timeout; const handleResize = () => { clearTimeout(timeoutId); timeoutId = setTimeout(() => { setIsMobileView(isMobile()); }, 150); }; window.addEventListener('resize', handleResize); return () => { clearTimeout(timeoutId); window.removeEventListener('resize', handleResize); }; }, []);Otherwise, confirm that static mobile detection on mount is acceptable for this component.
src/components/QuranReader/ContextMenu/components/SettingsButton.tsx
Outdated
Show resolved
Hide resolved
…Button props interface
src/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss
Outdated
Show resolved
Hide resolved
src/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
src/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss (1)
131-135: Document the 90vw width constraint.Line 133 contains a magic number that needs explaining. Based on the PR context (settings button addition), this likely compensates for navbar spacing, but it should be documented inline for future maintainers.
Add a clarifying comment:
.visibleContainer .chapterNavigationWrapper { @include breakpoints.smallerThanTablet { + // Constrain to 90vw to accommodate settings button spacing on mobile width: 90vw; } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
src/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss(7 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.*
📄 CodeRabbit inference engine (.cursor/rules/bug-handling-with-todo-comments.mdc)
If you encounter a bug in existing code, or the instructions lead to suboptimal or buggy code, add comments starting with "TODO:" outlining the problems.
**/*.*: Utilize Early Returns: Use early returns to avoid nested conditions and improve readability.
Conditional Classes: Prefer conditional classes over ternary operators for class attributes.
**/*.*: Use comments sparingly, and when you do, make them meaningful.
Don't comment on obvious things. Excessive or unclear comments can clutter the codebase and become outdated.
Use comments to convey the 'why' behind specific actions or explain unusual behavior and potential pitfalls.
Provide meaningful information about the function's behavior and explain unusual behavior and potential pitfalls.
**/*.*: Write short functions that only do one thing.
Follow the single responsibility principle (SRP), which means that a function should have one purpose and perform it effectively.
If a function becomes too long or complex, consider breaking it into smaller, more manageable functions.Order functions with those that are composing other functions appearing earlier in the file. For example, if you have a menu with multiple buttons, define the menu function above the buttons.
**/*.*: Always add helpful comments to the code explaining what you are doing.
Never delete old comments, unless they are no longer relevant because the code has been rewritten or deleted.
**/*.*: Choose names for variables, functions, and classes that reflect their purpose and behavior.
A name should tell you why it exists, what it does, and how it is used. If a name requires a comment, then the name does not reveal its intent.
Use specific names that provide a clearer understanding of what the variables represent and how they are used.
Files:
src/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss
src/**/*.module.scss
📄 CodeRabbit inference engine (CLAUDE.md)
Use SCSS Modules for component-specific styling
Files:
src/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss
**/*.{ts,tsx,js,jsx,scss}
📄 CodeRabbit inference engine (AGENTS.md)
Use Prettier formatting: single quotes, 2-space indentation, 100-character line width, and trailing commas
Files:
src/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss
**/*.module.scss
📄 CodeRabbit inference engine (AGENTS.md)
Use SCSS modules for component styling
Files:
src/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss
🧠 Learnings (5)
📚 Learning: 2025-07-31T15:31:22.667Z
Learnt from: AhmedCodeGuy
Repo: quran/quran.com-frontend-next PR: 2477
File: src/components/QuranReader/TranslationView/TranslationViewCell.module.scss:204-207
Timestamp: 2025-07-31T15:31:22.667Z
Learning: AhmedCodeGuy suggested that the Separator component should be refactored in the future to avoid needing !important declarations for width overrides in contexts like .verseSeparator in TranslationViewCell.module.scss.
Applied to files:
src/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss
📚 Learning: 2025-07-31T15:27:27.014Z
Learnt from: AhmedCodeGuy
Repo: quran/quran.com-frontend-next PR: 2477
File: src/components/QuranReader/TranslationView/TranslationViewCell.module.scss:204-207
Timestamp: 2025-07-31T15:27:27.014Z
Learning: The Separator component has base width styles that need to be overridden with !important when used in specific contexts like .verseSeparator in TranslationViewCell.module.scss.
Applied to files:
src/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss
📚 Learning: 2025-10-28T09:59:48.894Z
Learnt from: afifvdin
Repo: quran/quran.com-frontend-next PR: 2557
File: src/components/QuranReader/ReflectionView/ReflectionBodyContainer/ReflectionBody/index.tsx:88-0
Timestamp: 2025-10-28T09:59:48.894Z
Learning: In src/components/QuranReader/ReflectionView/ReflectionBodyContainer/ReflectionBody/index.tsx, the empty `<div className={styles.separatorContainer} />` rendered when `isModal` is true is required for maintaining consistent spacing in modal view and should not be removed.
Applied to files:
src/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss
📚 Learning: 2025-10-12T20:12:36.619Z
Learnt from: yousefdergham
Repo: quran/quran.com-frontend-next PR: 2528
File: src/components/HomePage/ExploreTopicsSection/ExploreTopicsSection.module.scss:40-47
Timestamp: 2025-10-12T20:12:36.619Z
Learning: In `src/components/HomePage/ExploreTopicsSection/ExploreTopicsSection.module.scss`, the `.container` uses `overflow-x: scroll` intentionally. This section is designed as a horizontal carousel that always overflows (even at 700px width), and more topics will be added in the future. The scrollbar-hiding CSS provides the desired UX while maintaining consistent layout behavior.
Applied to files:
src/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss
📚 Learning: 2025-10-22T20:33:55.176Z
Learnt from: yousefdergham
Repo: quran/quran.com-frontend-next PR: 2547
File: src/components/Course/CourseDetails/Tabs/Syllabus/index.tsx:44-49
Timestamp: 2025-10-22T20:33:55.176Z
Learning: Preference: In quran.com-frontend-next, keep concise “why” comments for analytics/UX decision points (e.g., guest vs enrolled click handlers) but avoid verbose JSDoc that repeats params/types. Convert multi-line JSDoc to brief inline rationale comments, especially in src/components/Course/CourseDetails/Tabs/Syllabus/index.tsx and similar analytics handlers.
Applied to files:
src/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/components/Navbar/NavbarBody/index.tsx(2 hunks)src/components/QuranReader/ContextMenu/index.tsx(5 hunks)
🧰 Additional context used
📓 Path-based instructions (13)
**/*.*
📄 CodeRabbit inference engine (.cursor/rules/bug-handling-with-todo-comments.mdc)
If you encounter a bug in existing code, or the instructions lead to suboptimal or buggy code, add comments starting with "TODO:" outlining the problems.
**/*.*: Utilize Early Returns: Use early returns to avoid nested conditions and improve readability.
Conditional Classes: Prefer conditional classes over ternary operators for class attributes.
**/*.*: Use comments sparingly, and when you do, make them meaningful.
Don't comment on obvious things. Excessive or unclear comments can clutter the codebase and become outdated.
Use comments to convey the 'why' behind specific actions or explain unusual behavior and potential pitfalls.
Provide meaningful information about the function's behavior and explain unusual behavior and potential pitfalls.
**/*.*: Write short functions that only do one thing.
Follow the single responsibility principle (SRP), which means that a function should have one purpose and perform it effectively.
If a function becomes too long or complex, consider breaking it into smaller, more manageable functions.Order functions with those that are composing other functions appearing earlier in the file. For example, if you have a menu with multiple buttons, define the menu function above the buttons.
**/*.*: Always add helpful comments to the code explaining what you are doing.
Never delete old comments, unless they are no longer relevant because the code has been rewritten or deleted.
**/*.*: Choose names for variables, functions, and classes that reflect their purpose and behavior.
A name should tell you why it exists, what it does, and how it is used. If a name requires a comment, then the name does not reveal its intent.
Use specific names that provide a clearer understanding of what the variables represent and how they are used.
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/Navbar/NavbarBody/index.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/next-js-conventions.mdc)
**/*.{js,jsx,ts,tsx}: Rely on Next.js Pages Router for state changes.
Minimize 'use client' usage: Prefer server components and Next.js SSR features.
Minimize 'use client' usage: Use 'use client' only for Web API access in small components.
Minimize 'use client' usage: Avoid using 'use client' for data fetching or state management.
**/*.{js,jsx,ts,tsx}: Optimize Web Vitals (LCP, CLS, FID)
Use dynamic loading for non-critical components using @src/components/dls/Spinner/Spinner.tsx
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/Navbar/NavbarBody/index.tsx
src/components/**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react-functional-components.mdc)
src/components/**/*.tsx: Always use React functional components with hooks.
Use React.FC for functional components with props.
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/Navbar/NavbarBody/index.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.{tsx,jsx}: Use functional components over class components
Keep components small and focused
Extract reusable logic into custom hooks
Use composition over inheritance
Split large components into smaller, focused ones
Follow the Rules of Hooks
Use custom hooks for reusable logic
Use appropriate dependency arrays in useEffect
Implement cleanup in useEffect when needed
Avoid nested hooks
Use useState for local component state
Avoid prop drilling through proper state management
Implement proper memoization (useMemo, useCallback)
Use React.memo for expensive components
Avoid unnecessary re-renders
Implement proper lazy loading
Use proper key props in lists
Profile and optimize render performance
Show appropriate loading and error states
Handle async errors properly
Show user-friendly error messages
Implement proper fallback UI
Log errors appropriately
Handle edge cases gracefully
Use semantic HTML elements
Implement proper ARIA attributes
Ensure keyboard navigation
Handle focus management
Provide proper alt text for images
Use proper imports/exports
Document complex component logic
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/Navbar/NavbarBody/index.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
Implement proper prop types with TypeScript
**/*.tsx: Prefix interfaces for React props with 'Props' (e.g., ButtonProps)
Implement proper error boundariesReact: use functional components only; extract reusable logic into custom hooks; apply proper memoization (React.memo/useMemo/useCallback)
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/Navbar/NavbarBody/index.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
Use xstate for complex state logic
**/*.{ts,tsx}: TypeScript: prefer interfaces over type aliases for object shapes; avoid any; add explicit return types for public functions
Error handling: define and use custom error types; use async/await correctly; show user-friendly error messages
Use Redux Toolkit for state management and XState for complex state machines
Implement i18n with next-translate in components and utilities
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/Navbar/NavbarBody/index.tsx
**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
**/*.{ts,tsx,d.ts}: Prefer interfaces over types for object definitions
Use type for unions, intersections, and mapped types
Avoid usingany, preferunknownfor unknown types
Leverage TypeScript's built-in utility types
Use generics for reusable type patterns
Use PascalCase for type names and interfaces
Use camelCase for variables and functions
Use UPPER_CASE for constants
Use descriptive names with auxiliary verbs (e.g., isLoading, hasError)
Use explicit return types for public functions
Use arrow functions for callbacks and methods
Implement proper error handling with custom error types
Use function overloads for complex type scenarios
Prefer async/await over Promises
Use readonly for immutable properties
Leverage discriminated unions for type safety
Use type guards for runtime type checking
Implement proper null checking
Avoid type assertions unless necessary
Create custom error types for domain-specific errors
Use Result types for operations that can fail
Use try-catch blocks with typed catch clauses
Handle Promise rejections properly
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/Navbar/NavbarBody/index.tsx
{src,types}/**/*.ts?(x)
📄 CodeRabbit inference engine (CLAUDE.md)
Use TypeScript throughout the codebase with strict configuration
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/Navbar/NavbarBody/index.tsx
src/**/*.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Prefer React functional components for UI implementation
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/Navbar/NavbarBody/index.tsx
{src,types}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use path aliases @/ for src and @/dls/* for design system imports
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/Navbar/NavbarBody/index.tsx
src/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Organize React components by feature and place DLS components under src/components/dls
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/Navbar/NavbarBody/index.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js,jsx}: Order imports: React first, then external, then internal; alphabetize within groups with blank lines between groups
Naming: camelCase for variables/functions; PascalCase for types, interfaces, and React components; UPPER_CASE for constants
Functions should be <= 30 lines, prefer early returns, single responsibility, and descriptive names
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/Navbar/NavbarBody/index.tsx
**/*.{ts,tsx,js,jsx,scss}
📄 CodeRabbit inference engine (AGENTS.md)
Use Prettier formatting: single quotes, 2-space indentation, 100-character line width, and trailing commas
Files:
src/components/QuranReader/ContextMenu/index.tsxsrc/components/Navbar/NavbarBody/index.tsx
🧠 Learnings (21)
📚 Learning: 2025-10-28T09:59:48.894Z
Learnt from: afifvdin
Repo: quran/quran.com-frontend-next PR: 2557
File: src/components/QuranReader/ReflectionView/ReflectionBodyContainer/ReflectionBody/index.tsx:88-0
Timestamp: 2025-10-28T09:59:48.894Z
Learning: In src/components/QuranReader/ReflectionView/ReflectionBodyContainer/ReflectionBody/index.tsx, the empty `<div className={styles.separatorContainer} />` rendered when `isModal` is true is required for maintaining consistent spacing in modal view and should not be removed.
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-10-26T10:22:52.381Z
Learnt from: afifvdin
Repo: quran/quran.com-frontend-next PR: 2540
File: src/components/QuranReader/TranslationView/TranslationText/TranslationAndReference.tsx:60-60
Timestamp: 2025-10-26T10:22:52.381Z
Learning: In src/components/QuranReader/TranslationView/TranslationText/TranslationAndReference.tsx, verse references displayed alongside chapter names should use English/Western numerals only, not localized numerals, as per design specifications.
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-10-22T20:42:09.214Z
Learnt from: yousefdergham
Repo: quran/quran.com-frontend-next PR: 2547
File: src/pages/learning-plans/[slug]/lessons/[lessonSlugOrId]/index.tsx:35-59
Timestamp: 2025-10-22T20:42:09.214Z
Learning: Preference for quran.com-frontend-next: keep single-use, page-specific components inline. Example: NotEnrolledMessage in src/pages/learning-plans/[slug]/lessons/[lessonSlugOrId]/index.tsx should remain inline; extract only if reused elsewhere.
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-10-22T20:33:55.176Z
Learnt from: yousefdergham
Repo: quran/quran.com-frontend-next PR: 2547
File: src/components/Course/CourseDetails/Tabs/Syllabus/index.tsx:44-49
Timestamp: 2025-10-22T20:33:55.176Z
Learning: Preference: In quran.com-frontend-next, keep concise “why” comments for analytics/UX decision points (e.g., guest vs enrolled click handlers) but avoid verbose JSDoc that repeats params/types. Convert multi-line JSDoc to brief inline rationale comments, especially in src/components/Course/CourseDetails/Tabs/Syllabus/index.tsx and similar analytics handlers.
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-10-07T08:38:28.343Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-10-07T08:38:28.343Z
Learning: Applies to **/*.tsx : React: use functional components only; extract reusable logic into custom hooks; apply proper memoization (React.memo/useMemo/useCallback)
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-11-02T06:23:21.127Z
Learnt from: yousefdergham
Repo: quran/quran.com-frontend-next PR: 2554
File: src/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss:137-147
Timestamp: 2025-11-02T06:23:21.127Z
Learning: In quran.com-frontend-next, at exactly 768px, both tablet (min-width: 768px) and smallerThanTablet (max-width: 768px) breakpoint media queries match. CSS cascade order matters: rules inside smallerThanTablet that come after tablet rules will override. This pattern is intentionally used (e.g., .settingsNextToChapter in src/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss) to ensure elements remain visible at the 768px boundary by having smallerThanTablet re-declare display properties after tablet hides them.
<!-- [add_learning]
In src/components/QuranReader/ContextMenu/styles/ContextMenu.module.scss, the .settingsNextToChapter class uses a smallerThanTablet breakpoint after the tablet breakpoint specifically to handle the edge case at exactly 768px where both media queries match. This prevents the settings button from being hidden at that exact viewport width.
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-08-01T08:50:54.518Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-08-01T08:50:54.518Z
Learning: Applies to **/*.{tsx,jsx} : Implement proper memoization (useMemo, useCallback)
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-08-01T08:50:54.518Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-08-01T08:50:54.518Z
Learning: Applies to **/*.{tsx,jsx} : Use React.memo for expensive components
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-08-01T08:50:54.518Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-08-01T08:50:54.518Z
Learning: Applies to **/*.{tsx,jsx} : Avoid unnecessary re-renders
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-08-01T08:50:54.518Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-08-01T08:50:54.518Z
Learning: Applies to **/*.{tsx,jsx} : Profile and optimize render performance
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-10-18T11:22:53.139Z
Learnt from: jonybekov
Repo: quran/quran.com-frontend-next PR: 2537
File: src/redux/slices/session.ts:36-42
Timestamp: 2025-10-18T11:22:53.139Z
Learning: In Redux selectors, avoid calling functions that read from external state (cookies, localStorage, etc.) like `isLoggedIn()` from utils/auth/login. Instead, use reactive hooks like `useIsLoggedIn` directly in components and keep selectors focused only on Redux state to ensure proper memoization.
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-07-31T15:31:22.667Z
Learnt from: AhmedCodeGuy
Repo: quran/quran.com-frontend-next PR: 2477
File: src/components/QuranReader/TranslationView/TranslationViewCell.module.scss:204-207
Timestamp: 2025-07-31T15:31:22.667Z
Learning: AhmedCodeGuy suggested that the Separator component should be refactored in the future to avoid needing !important declarations for width overrides in contexts like .verseSeparator in TranslationViewCell.module.scss.
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-10-20T15:16:53.776Z
Learnt from: afifvdin
Repo: quran/quran.com-frontend-next PR: 2540
File: src/components/QuranReader/TranslationView/TranslationText/TranslationAndReference.tsx:14-23
Timestamp: 2025-10-20T15:16:53.776Z
Learning: In the quran.com-frontend-next codebase, the `direction` property should be typed as `string` rather than using union types like `'ltr' | 'rtl'` to maintain consistency with the established codebase pattern (e.g., LanguageData interface in src/utils/locale.ts).
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-08-01T08:49:10.050Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/comment-usage.mdc:0-0
Timestamp: 2025-08-01T08:49:10.050Z
Learning: Applies to **/*.* : Don't comment on obvious things. Excessive or unclear comments can clutter the codebase and become outdated.
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-08-01T08:48:40.766Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/clean-code.mdc:0-0
Timestamp: 2025-08-01T08:48:40.766Z
Learning: Use comments to explain why something is done a certain way
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-08-01T08:49:10.050Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/comment-usage.mdc:0-0
Timestamp: 2025-08-01T08:49:10.050Z
Learning: Applies to **/*.* : Use comments to convey the 'why' behind specific actions or explain unusual behavior and potential pitfalls.
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-08-01T08:50:54.518Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-08-01T08:50:54.518Z
Learning: Applies to **/*.{tsx,jsx} : Use functional components over class components
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-08-01T08:50:22.602Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/react-functional-components.mdc:0-0
Timestamp: 2025-08-01T08:50:22.602Z
Learning: Applies to src/components/**/*.tsx : Always use React functional components with hooks.
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-10-07T08:37:58.213Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-10-07T08:37:58.213Z
Learning: Applies to src/**/*.tsx : Prefer React functional components for UI implementation
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-08-01T08:50:54.518Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-08-01T08:50:54.518Z
Learning: Applies to **/*.{test,spec}.{tsx,jsx} : Use React Testing Library
Applied to files:
src/components/QuranReader/ContextMenu/index.tsx
📚 Learning: 2025-08-01T08:51:05.924Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/redux-toolkit-best-practices.mdc:0-0
Timestamp: 2025-08-01T08:51:05.924Z
Learning: Applies to src/redux/**/*.ts : Use Redux hooks (useSelector, useDispatch) in components.
Applied to files:
src/components/Navbar/NavbarBody/index.tsx
🧬 Code graph analysis (1)
src/components/QuranReader/ContextMenu/index.tsx (2)
src/utils/responsive.ts (1)
isMobile(5-8)src/utils/verse.ts (1)
getChapterNumberFromKey(44-45)
Summary
QF-2751
Move the settings gear from the main header to the surah header with no behavioral changes.
Type of change
Test plan
Automated
Checklist
Screenshots or videos
Summary by CodeRabbit
New Features
Removed
Styles
Tests