Wave expandable button

[ragnep]

Summary by CodeRabbit

• New Features
  • Added an expand button to the collapsed left sidebar, enabling users to quickly restore the sidebar to full width with a single click.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

The WebLeftSidebar component now includes a sticky collapse/expand button that appears when the sidebar is in a collapsed state. The button uses a ChevronDoubleRightIcon and invokes closeRightSidebar on click, without affecting existing content rendering logic.

Changes

Cohort / File(s)	Summary
Left Sidebar UI Enhancement components/brain/left-sidebar/web/WebLeftSidebar.tsx	Added imports for useSidebarState and ChevronDoubleRightIcon. Introduced sticky collapse control button that renders conditionally when sidebar is collapsed; button triggers closeRightSidebar with proper accessibility attributes (aria-label, title). Existing content switching between Waves and Direct Messages remains unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• simo6529

Poem

🐰 A sidebar so neat, now expandable wide,
With a button to click, watch the panel collide!
ChevronDoubleRight points the way,
Collapse and expand—hip-hip-hooray! 🎉

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Wave expandable button' is partially related to the changeset. It mentions a button feature being added, but doesn't capture the main change: adding an expand/close control to the left sidebar when collapsed.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In @components/brain/left-sidebar/web/WebLeftSidebar.tsx:
- Around line 7-8: The component imports ChevronDoubleRightIcon from Heroicons
which violates the FontAwesome-only icon guideline; replace that import and
usages with the FontAwesome equivalent (e.g., FaAngleDoubleRight) from the
project's FontAwesome React package (or react-icons/fa if project uses
react-icons). Locate the import for ChevronDoubleRightIcon and swap it for the
FontAwesome icon import, then update all JSX references of
ChevronDoubleRightIcon in WebLeftSidebar (the button/icon render) to use the new
FaAngleDoubleRight symbol so the component conforms to the icon guideline.

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6eca140 and 6a94faa.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (1)

• components/brain/left-sidebar/web/WebLeftSidebar.tsx

🧰 Additional context used

📓 Path-based instructions (7)

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

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx,js,jsx}: Do not include any comments in the code; it should be self-explanatory
Write correct, up-to-date, bug-free, fully componentized, secure, and efficient code
Include all required imports and ensure proper naming of key components
Use NextJS features that match the current version

**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects. If the Effect's only job is to derive or sync internal state, calculate during render or use useMemo instead.
Use useEffectEvent for non-reactive logic inside Effects to read the latest props/state without turning them into dependencies or causing unnecessary re-runs.
Use explicit caching with "use cache" directive at the top of Server Components, routes, or functions. Configure cacheComponents: true in next.config.ts as needed.

**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects; if the Effect only derives state, compute during render instead
Use useEffectEvent when listening to external events but needing the latest props/state without re-running the Effect
Move data fetching from client Effects to Server Components; mutations go through Server Actions ('use server')

Files:

• components/brain/left-sidebar/web/WebLeftSidebar.tsx

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{tsx,jsx}: Use FontAwesome for icons in React components
Use TailwindCSS for styling in React components
Use react-query for data fetching
Always add readonly before props in React components

**/*.{tsx,jsx}: Use internal links via <Link> component from Next.js instead of <a> tags
Replace <img> elements with <Image /> from next/image

Files:

• components/brain/left-sidebar/web/WebLeftSidebar.tsx

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

📄 CodeRabbit inference engine (GEMINI.md)

Run npm run lint to ensure code satisfies ESLint (Next's Core Web Vitals + React Hooks). Code must pass linting before completing any task.

**/*.{js,ts,jsx,tsx}: Code must satisfy ESLint with Next's Core Web Vitals and React Hooks rules by running npm run lint
Do not add eslint-disable comments unless explicitly instructed; prefer refactors aligned with React 19.2, React Compiler, and Next.js 16 conventions

Files:

• components/brain/left-sidebar/web/WebLeftSidebar.tsx

**/*.{jsx,tsx}

📄 CodeRabbit inference engine (GEMINI.md)

**/*.{jsx,tsx}: Replace <img> elements with <Image /> from next/image to comply with Next.js ESLint rule @next/next/no-img-element.
Use <Link href="/path"> from Next.js for internal navigation instead of raw <a> tags to comply with @next/next/no-html-link-for-pages.

Files:

• components/brain/left-sidebar/web/WebLeftSidebar.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (GEMINI.md)

Use TypeScript with React functional components and hooks. Follow existing code style and naming conventions.

Files:

• components/brain/left-sidebar/web/WebLeftSidebar.tsx

**/*.{tsx,ts}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript with React functional components and hooks

Files:

• components/brain/left-sidebar/web/WebLeftSidebar.tsx

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

📄 CodeRabbit inference engine (AGENTS.md)

Prefer direct named imports from React (useMemo, useRef, FC) over React. namespace usage

Files:

• components/brain/left-sidebar/web/WebLeftSidebar.tsx

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

• GitHub Check: Analyze (javascript-typescript)

🔇 Additional comments (2)

components/brain/left-sidebar/web/WebLeftSidebar.tsx (2)

50-66: Button implementation structure looks good.

The expand button implementation follows good practices:

• Proper accessibility attributes (aria-label, title)
• TailwindCSS styling as per guidelines
• onMouseDown preventDefault to avoid focus issues
• Sticky positioning for visibility during scroll
• Conditional rendering based on collapse state

Subject to verification of the closeRightSidebar naming concern, the implementation is solid.

---

29-29: Fix semantic confusion: button labeled "Expand" calls closeRightSidebar instead of actually expanding the left sidebar.

The closeRightSidebar function (from useSidebarState) only sets isRightSidebarOpen to false—it does not expand the left sidebar. The button at line 54 is displayed when the left sidebar is collapsed and labeled to expand it, but calling closeRightSidebar doesn't change the isCollapsed state that controls the left sidebar's width. Either the function call should be replaced with logic that expands the left sidebar, or the button's intent should be reconsidered.