feat: add collapsible sidebar categories with persistent state - #662
feat: add collapsible sidebar categories with persistent state#662manikanta-tamminana wants to merge 6 commits into
Conversation
|
Someone is attempting to deploy a commit to the aditthyass' projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Warning Review limit reached
Next review available in: 30 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
Note
|
| Layer / File(s) | Summary |
|---|---|
Storage key and sidebar formatting src/components/Sidebar.jsx |
Adds STORAGE_KEY and adjusts nearby whitespace, toggleCategory formatting, isCategoryExpanded formatting, and the collapsible container’s grid transition markup. |
Estimated code review effort: 1 (Trivial) | ~5 minutes
Possibly related issues
- feat: collapsible categories in Sidebar to reduce scrolling #583: Touches the same sidebar category state area and relates to category collapse behavior.
Possibly related PRs
- AditthyaSS/iloveAgents#445: Modifies the same
Sidebar.jsxcategory expand/collapse area. - AditthyaSS/iloveAgents#628: Also changes sidebar category state and rendering in
Sidebar.jsx.
Suggested labels: level:beginner
Suggested reviewers: AditthyaSS
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. | Write docstrings for the functions missing them to satisfy the coverage threshold. |
✅ Passed checks (4 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title clearly matches the main change: collapsible sidebar categories with persisted state. |
| Linked Issues check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
| Out of Scope Changes check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
✨ Finishing Touches
🧪 Generate unit tests (beta)
- Create PR with 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.
Comment @coderabbitai help to get the list of available commands.
|
Hey @manikanta-tamminana! 👋
|
|
hey @manikanta-tamminana! 👋 |
|
|
![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
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/Sidebar.jsx`:
- Around line 255-260: The expanded category wrapper in Sidebar.jsx is using a
fixed max-h-screen cap, which clips tall categories and keeps overflow hidden.
Update the isCategoryExpanded transition block to use a content-driven open
height instead of the viewport-based limit, so the category container can grow
to fit all agents without cutting off items.
- Around line 255-262: In Sidebar’s category expand/collapse block, the
collapsed agent links are still mounted and reachable by keyboard even when
hidden. Update the logic around isCategoryExpanded so the NavLink subtree is
removed from the tab order while closed, either by conditionally unmounting the
list or by disabling focusability for the collapsed state after the transition
completes.
- Around line 7-16: The Sidebar state persistence currently guards the read path
in the `useState` initializer, but the write path in the `useEffect` that saves
`openCategories` still calls `localStorage` unguarded and can throw in
blocked/quota-exhausted cases. Update the persistence logic in `Sidebar.jsx` so
the write-side `localStorage.setItem` is wrapped in the same kind of try/catch
handling used by the initializer, and simply skip saving on failure. Use the
`STORAGE_KEY`, `openCategories`, and the effect that mirrors them to storage as
the main touchpoints.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: fd3fe238-ae06-4bd0-b1cb-243fc1ecfd71
📒 Files selected for processing (1)
src/components/Sidebar.jsx
| <div | ||
| className={`overflow-hidden transition-all duration-300 ease-in-out ${ | ||
| isCategoryExpanded | ||
| ? "max-h-screen opacity-100" | ||
| : "max-h-0 opacity-0" | ||
| }`} | ||
| > | ||
| <div className="mt-0.5"> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Collapsed links stay in the tab order.
This only hides the subtree visually. The NavLinks remain mounted, so keyboard users can still tab into invisible agents while a category is collapsed. Remove the subtree from the focus order while closed, or unmount it after the collapse animation completes.
Also applies to: 263-295
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/Sidebar.jsx` around lines 255 - 262, In Sidebar’s category
expand/collapse block, the collapsed agent links are still mounted and reachable
by keyboard even when hidden. Update the logic around isCategoryExpanded so the
NavLink subtree is removed from the tab order while closed, either by
conditionally unmounting the list or by disabling focusability for the collapsed
state after the transition completes.
|
@manikanta-tamminana Please resolve conflicts |
|
|
![mergify[bot]](https://avatars.githubusercontent.com/in/10562?s=60&v=4){kind=small}
There was a problem hiding this comment.
❌ Build is failing on this PR.
Please fix before merging:
- Run
npm run buildlocally - Fix any errors shown
- Push your fix — the check will re-run automatically
Most common issue: broken registry import.
Replace:
import agents from '../agents/registry'
With:
import { useAgents } from '../lib/useAgents'
const { agents } = useAgents()
See CONTRIBUTING.md for help. 🙏
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/Sidebar.jsx`:
- Line 10: Remove the unused duplicate storage key constant from Sidebar so
there is only one source of truth for localStorage in this component. The issue
is the stray STORAGE_KEY declaration that is never referenced while the code
uses SIDEBAR_CATEGORY_STORAGE_KEY elsewhere; delete STORAGE_KEY and keep the
existing SIDEBAR_CATEGORY_STORAGE_KEY references in Sidebar to avoid the
conflicting leftover merge artifact.
- Around line 82-96: The Sidebar component has an extra closing brace after
toggleCategory that prematurely ends the enclosing function and causes the JSX
return to parse outside the component. Remove the stray brace/semicolon pair in
Sidebar.jsx so the toggleCategory function remains the last closed block before
the rest of Sidebar’s logic, preserving the component structure and resolving
the syntax error.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 585f310e-2e1d-4abe-8e94-579dbe7d2432
📒 Files selected for processing (1)
src/components/Sidebar.jsx
| const SIDEBAR_CATEGORY_STORAGE_KEY = 'sidebar-category-collapsed-state' | ||
|
|
||
| export default function Sidebar({ open, onClose }) { | ||
| const STORAGE_KEY = "sidebar-category-state"; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Unused, conflicting storage-key constant.
STORAGE_KEY is defined here but never referenced — all localStorage reads/writes in this file use SIDEBAR_CATEGORY_STORAGE_KEY (Line 7). This duplicate constant with a different string value looks like leftover unresolved-merge-conflict code and should be removed.
🐛 Proposed fix
export default function Sidebar({ open, onClose }) {
- const STORAGE_KEY = "sidebar-category-state";
const [sidebarSearchQuery, setSidebarSearchQuery] = useState('')📝 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.
| const STORAGE_KEY = "sidebar-category-state"; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/Sidebar.jsx` at line 10, Remove the unused duplicate storage
key constant from Sidebar so there is only one source of truth for localStorage
in this component. The issue is the stray STORAGE_KEY declaration that is never
referenced while the code uses SIDEBAR_CATEGORY_STORAGE_KEY elsewhere; delete
STORAGE_KEY and keep the existing SIDEBAR_CATEGORY_STORAGE_KEY references in
Sidebar to avoid the conflicting leftover merge artifact.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
I've addressed the requested changes: Removed the stray closing brace causing the build failure. Could you please re-review the PR? Thanks! |
|
|
2 participants
What does this PR do?
This PR adds collapsible sidebar categories to improve navigation when the sidebar contains many agent categories.
Changes made
localStorage.Type of change
Checklist
npm run buildlocally and it passed ✅import agents from '../agents/registry'✅Screenshots (if UI change)
Summary by CodeRabbit
Enhancements
Bug Fixes