Merging help-center-task-2 into hel-center-base#49
Merging help-center-task-2 into hel-center-base#49saurabhlambe wants to merge 2 commits intoaravindputrevu:help-center-basefrom
Conversation
- Introduced ThemeContext for managing light/dark themes. - Updated _app.js to wrap the application in ThemeProvider. - Enhanced Home component to include theme toggle button. - Added dark mode styles in Home.module.css and globals.css. - Updated .coderabbit.yaml with review settings and tool integrations.
WalkthroughAdds a CodeRabbit review configuration, implements a ThemeContext with persistent light/dark mode and a UI toggle, applies dark-mode styles and accessibility improvements to search, wraps the app with ThemeProvider, and removes the CLI Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant HomePage
participant ThemeProvider
participant localStorage
participant DocumentBody
Note over ThemeProvider: on mount
ThemeProvider->>localStorage: getItem("theme")
localStorage-->>ThemeProvider: "light" | "dark" | null
ThemeProvider->>DocumentBody: add/remove "dark-mode" (if theme === "dark")
User->>HomePage: click theme toggle
HomePage->>ThemeProvider: toggleTheme()
ThemeProvider->>localStorage: setItem("theme", theme)
ThemeProvider->>DocumentBody: add/remove "dark-mode"
sequenceDiagram
participant Dev
participant CLI_before as CLI (before)
participant CLI_after as CLI (after)
Dev->>CLI_before: help-center build
CLI_before-->>Dev: runs `next build`
Dev->>CLI_after: help-center build
CLI_after-->>Dev: command not available
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: .coderabbit.yaml 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (7)
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (9)
styles/globals.css (1)
7-8: Respect reduced motion preferences to avoid unnecessary animations.Add an override for users who prefer reduced motion so the theme switch doesn’t animate for them.
Apply this diff:
html, body { padding: 0; margin: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; background: #ffffff; color: #111827; transition: background-color 0.3s ease, color 0.3s ease; } + +@media (prefers-reduced-motion: reduce) { + html, body { + transition: none; + } +}context/ThemeContext.js (3)
8-15: Prevent theme flash and honor user OS preference by initializing from storage/media query.Current flow renders 'light' first, then flips to stored theme on mount, causing a visible flash. Initialize in
useStatewith a lazy initializer and remove the first effect.Apply this diff:
-export const ThemeProvider = ({ children }) => { - const [theme, setTheme] = useState('light'); // Default theme - - useEffect(() => { - const storedTheme = localStorage.getItem('theme'); - if (storedTheme) { - setTheme(storedTheme); - } - }, []); +export const ThemeProvider = ({ children }) => { + const [theme, setTheme] = useState(() => { + if (typeof window === 'undefined') return 'light'; + const stored = localStorage.getItem('theme'); + if (stored) return stored; + const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + return prefersDark ? 'dark' : 'light'; + });
3-3: Provide a default context shape to improve DX and avoid undefined access.Supplying a sensible default avoids crashes if a consumer is used outside the provider.
Apply this diff:
-const ThemeContext = createContext(); +const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} });
17-24: Optional: advertise color scheme to the browser for native controls.Setting
<meta name="color-scheme" content="light dark">plus togglingdocument.documentElement.style.colorScheme = theme;helps form controls and scrollbars match the theme.If you want, I can draft an
_document.jssnippet to set the meta tag and a small effect to updatedocument.documentElement.style.colorScheme..coderabbit.yaml (1)
18-18: Fix YAML lint issues: trailing spaces and missing final newline.Clean up trailing spaces on the noted blank lines and ensure the file ends with a newline.
Apply this diff:
- + # Path filters and instructions - + # Auto review settings - + # Code generation settings docstrings: path_instructions: - path: "**/*.js" instructions: | End all docstrings with a notice that says "Auto-generated by CodeRabbit.". Do not omit the closing tags; the docstring must be valid. +Also applies to: 22-22, 28-28, 70-70
styles/Home.module.css (2)
199-258: CSS Modules + global selector interplay: consider explicit :global() for clarity.Selectors like
body.dark-mode .searchcompile tobody.dark-mode .<scoped>, which works. To avoid ambiguity and future refactors, you may wrap the global part explicitly.Example for one block (apply similarly to others if desired):
-body.dark-mode .search { +:global(body.dark-mode) .search { background-color: #2d3748; /* Darker search input background */ border-color: #4a5568; /* Darker border */ color: #e2e8f0; /* Light text for input */ }
205-207: Improve placeholder compatibility for WebKit.Add the WebKit-prefixed placeholder selector to fully cover Safari.
Apply this diff:
body.dark-mode .search::placeholder { color: #a0aec0; /* Lighter placeholder text */ } +body.dark-mode .search::-webkit-input-placeholder { + color: #a0aec0; +}pages/index.js (2)
28-28: Optional: Persist theme and avoid flash-of-incorrect-themeCurrently, theme defaults to 'light' each load. Consider initializing from localStorage or prefers-color-scheme and setting a data-theme class ASAP to avoid a theme flash and hydration mismatch.
I can propose an update to context/ThemeContext.js that reads initial theme from localStorage or matchMedia and syncs document.documentElement.dataset.theme.
54-62: Avoid duplicate accessible names; prefer search landmark on containerThe input has an associated , so aria-label duplicates its name in many ATs. role="searchbox" is ARIA 1.2 and not necessary when you can expose a search landmark on the wrapper.
Apply this diff to the input:
<input id="search-input" type="text" placeholder="Search for articles..." className={styles.search} value={query} onChange={(e) => setQuery(e.target.value)} - aria-label="Search help articles" - role="searchbox" />And consider adding a search landmark to the wrapper (outside the changed range):
<div className={styles.searchWrapper} role="search"> ... </div>Optional: Using type="search" on the input can also improve semantics and native affordances on some platforms.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (7)
.coderabbit.yaml(1 hunks)bin/help-center.js(0 hunks)context/ThemeContext.js(1 hunks)pages/_app.js(1 hunks)pages/index.js(3 hunks)styles/Home.module.css(2 hunks)styles/globals.css(1 hunks)
💤 Files with no reviewable changes (1)
- bin/help-center.js
🧰 Additional context used
🧬 Code Graph Analysis (3)
pages/_app.js (1)
context/ThemeContext.js (2)
ThemeProvider(7-35)ThemeProvider(7-35)
context/ThemeContext.js (1)
pages/index.js (1)
useTheme(28-28)
pages/index.js (1)
context/ThemeContext.js (4)
useTheme(5-5)useTheme(5-5)toggleTheme(26-28)theme(8-8)
🪛 YAMLlint (1.37.1)
.coderabbit.yaml
[error] 18-18: trailing spaces
(trailing-spaces)
[error] 22-22: trailing spaces
(trailing-spaces)
[error] 28-28: trailing spaces
(trailing-spaces)
[error] 70-70: no new line character at the end of file
(new-line-at-end-of-file)
🔇 Additional comments (7)
styles/globals.css (2)
7-14: Smooth theme transitions and base dark-mode styles look good.The transition on background/text and the scoped
body.dark-modeoverrides are clean and unobtrusive.
16-22: WCAG contrast ratios verified and compliant
- Base text (#e2e8f0 on #1a202c): 13.24 :1 (≥ 4.5 :1)
- Link (#63b3ed on #1a202c): 7.15 :1 (≥ 4.5 :1)
- Link hover (#4299e1 on #1a202c): 5.34 :1 (≥ 4.5 :1)
All values exceed the WCAG AA minimums for normal text. No further adjustments needed.
styles/Home.module.css (2)
11-13: Header flex alignment is a nice improvement.This simplifies layout and aligns well with the new theme toggle placement.
183-193: Theme toggle styles look good and are consistent with the header.Readable, accessible hit target, and unobtrusive hover.
pages/_app.js (1)
10-14: Wrapping the app with ThemeProvider is correct and sufficient.This cleanly scopes theme state for the entire app and enables the dark-mode class toggling.
pages/index.js (2)
10-12: Icon imports look good and are tree-shakeableImporting individual icons from the solid set is bundle-friendly. The newly introduced faSun/faMoon are used for theming, and faUser is used in the footer — all good.
45-47: Nice accessibility improvements on the search UIThe visually hidden label correctly provides an accessible name, and aria-hidden on the search icon prevents double announcements. Good additions.
Also applies to: 51-51
| auto_reply: true | ||
| create_issues: true |
There was a problem hiding this comment.
Invalid key under chat: 'create_issues' is not part of the schema.
According to the provided schema, chat only supports art, auto_reply, and integrations (with Jira/Linear). create_issues here will fail validation or be ignored.
Apply this diff to remove the unsupported key:
chat:
auto_reply: true
- create_issues: true📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| auto_reply: true | |
| create_issues: true | |
| chat: | |
| auto_reply: true |
🤖 Prompt for AI Agents
In .coderabbit.yaml around lines 49 to 50 the key "create_issues" is invalid
under chat per the schema; remove the "create_issues: true" line (or, if this
setting is required, migrate its intent into a supported integrations section
such as configuring Jira/Linear under chat.integrations) so that chat only
contains the supported keys (art, auto_reply, integrations).
| import { faTwitter, faLinkedin } from '@fortawesome/free-brands-svg-icons'; | ||
| import { categories, articles } from '../data'; | ||
| import styles from '../styles/Home.module.css'; | ||
| import { useTheme } from '../context/ThemeContext'; // Import useTheme |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Confirm ThemeProvider wraps the app
useTheme will throw if ThemeProvider isn’t present above this page. Please verify that pages/_app.js wraps the app with ThemeProvider from context/ThemeContext.
Run this script to verify provider wiring and the visuallyHidden style presence:
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Searching for ThemeProvider usage..."
rg -n -C3 '\bThemeProvider\b' --glob '!**/node_modules/**'
echo
echo "Checking that pages/_app.js wraps the app with ThemeProvider (if present)..."
rg -n -C3 '\bThemeProvider\b' pages/_app.js 2>/dev/null || true
echo
echo "Verifying visuallyHidden class exists in styles/Home.module.css..."
rg -n '\bvisuallyHidden\b' styles/Home.module.cssLength of output: 2155
ThemeProvider wiring confirmed, but add missing visuallyHidden style
- pages/_app.js correctly wraps
<Component />with<ThemeProvider>, souseThemeis safe to use in pages/index.js. - styles/Home.module.css does not define a
.visuallyHiddenclass—please add it (or import the correct CSS module) so the hidden‐label styling in pages/index.js works as intended.
🤖 Prompt for AI Agents
In pages/index.js around line 17, the component uses a .visuallyHidden class
that doesn’t exist in styles/Home.module.css; open styles/Home.module.css and
add a .visuallyHidden CSS rule to hide content visually but keep it accessible
(use the common screen-reader pattern: position absolute, tiny 1px size, zero
padding, negative margin, overflow hidden, clip/clip-path to a 0 rect,
white-space nowrap, and no border). Alternatively, if the correct CSS module
with that class already exists elsewhere, import that module instead of
styles/Home.module.css so the hidden-label styling is applied.
| <button onClick={toggleTheme} className={styles.themeToggle}> | ||
| <FontAwesomeIcon icon={theme === 'light' ? faMoon : faSun} /> | ||
| </button> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Theme toggle button lacks an accessible name and pressed state
Screen reader users won’t know what this unlabeled icon button does. Add an accessible name and reflect toggle state. Also mark the inner icon as decorative.
Apply this diff:
- <button onClick={toggleTheme} className={styles.themeToggle}>
- <FontAwesomeIcon icon={theme === 'light' ? faMoon : faSun} />
- </button>
+ <button
+ type="button"
+ onClick={toggleTheme}
+ className={styles.themeToggle}
+ aria-label={theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
+ aria-pressed={theme === 'dark'}
+ title={theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
+ >
+ <FontAwesomeIcon icon={theme === 'light' ? faMoon : faSun} aria-hidden="true" />
+ </button>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <button onClick={toggleTheme} className={styles.themeToggle}> | |
| <FontAwesomeIcon icon={theme === 'light' ? faMoon : faSun} /> | |
| </button> | |
| <button | |
| type="button" | |
| onClick={toggleTheme} | |
| className={styles.themeToggle} | |
| aria-label={theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'} | |
| aria-pressed={theme === 'dark'} | |
| title={theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'} | |
| > | |
| <FontAwesomeIcon icon={theme === 'light' ? faMoon : faSun} aria-hidden="true" /> | |
| </button> |
🤖 Prompt for AI Agents
In pages/index.js around lines 37 to 39, the theme toggle button has no
accessible name or pressed state and the icon is not marked decorative; update
the button element to include an accessible name (e.g. aria-label="Toggle
theme"), a pressed state that reflects the current theme (aria-pressed={theme
=== 'dark'}), and add type="button"; mark the inner FontAwesomeIcon as
decorative with aria-hidden="true" so screen readers only get the button
label/state.
CodeRabbit Commands (Invoked using PR/Issue comments)
|
|
@coderabbitai help |
CodeRabbit Commands (Invoked using PR/Issue comments)
|
|
@coderabbitai summary |
✅ Actions performedSummary regeneration triggered. |
|
@CodeRabbit plan |
|
Planning is not enabled for this repository or the repository is not on a Pro plan. |
|
@CodeRabbit config |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain@saurabhlambe: I'll fetch the current CodeRabbit configuration for this repository. 🛠 Debug Information Gathered @saurabhlambe: Here's your current CodeRabbit configuration: Repository Information
Key SettingsGeneral
Reviews
Static Analysis Tools (Enabled)
Chat
Knowledge Base
Code GenerationDocstrings:
Unit Tests:
You can modify these settings by editing the |
2 participants
Summary by CodeRabbit
New Features
Chores