add hover expand & auto collapse(#231)

[darknight0847]

Summary by CodeRabbit

• New Features
  • Sidebar now features hover-based auto-collapse and auto-expand behavior when not in overlay mode, allowing for seamless sidebar toggling through mouse interaction.

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

[vercel]

@darknight0847 is attempting to deploy a commit to the AJEET PRATAP SINGH's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Adds hover event handlers (onMouseEnter and onMouseLeave) to the Sidebar component to automatically toggle collapse/expand state when not in overlay mode. Previously, no hover-based toggle behavior existed.

Changes

Cohort / File(s)	Summary
Sidebar hover behavior apps/web/src/components/dashboard/Sidebar.tsx	Attaches onMouseEnter and onMouseLeave event handlers to toggle collapsed state conditionally based on overlay mode

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Verify that hover handlers only activate when overlay mode is disabled
• Confirm toggleCollapsed function is called with correct parameters
• Check that the handler logic doesn't interfere with other sidebar interactions or CSS transitions

Poem

🐰 Whiskers twitching with delight,
The sidebar now responds just right,
Hover near and watch it dance,
Collapse and expand in a merry prance!
No overlay mode shall hold this grace—pure interaction, wild and free! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

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

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding hover-based expand and auto-collapse behavior to the Sidebar component.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

[cla-assistant]

All committers have signed the CLA.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/web/src/components/dashboard/Sidebar.tsx (1)

113-132: consider hover auto-collapse ux and clean up inline comment

the hover handlers look logically correct and are nicely scoped to non-overlay mode, but two small things to consider:

1. ux: with onMouseLeave always collapsing when !overlay && !isCollapsed, a user who explicitly expanded the sidebar via the chevron will still have it forced closed as soon as their mouse leaves the sidebar. if you want “hover expand” without overriding an explicit expand, you could track a separate intent flag (e.g. autoCollapsedByHover) or only auto-expand when collapsed and skip auto-collapse when the user has toggled it open manually.
2. style: the //hover logic comment is redundant and doesn’t follow the “why, not what” guideline. either remove it or rewrite it to explain intent, and add a space after //. for example, you could simply drop it:

-    
-    //hover logic
     onMouseEnter={() => {
       if (!overlay && isCollapsed) toggleCollapsed();
     }}
     onMouseLeave={() => {
       if (!overlay && !isCollapsed) toggleCollapsed();
     }}

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0cdc72d and f22605c.

📒 Files selected for processing (1)

• apps/web/src/components/dashboard/Sidebar.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (11)

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

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx,js,jsx}: Always use lowercase when writing comments
Avoid unnecessary comments; code should be self-documenting when possible
Use comments to explain 'why', not 'what'
Remove unused imports
Use UPPER_SNAKE_CASE for constants
Use camelCase for functions and variables

Files:

• apps/web/src/components/dashboard/Sidebar.tsx

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

📄 CodeRabbit inference engine (.cursorrules)

apps/web/src/**/*.{ts,tsx}: Always follow the design system defined in apps/web/src/lib/design-tokens.ts and apps/web/tailwind.config.ts
NEVER use hardcoded hex values (e.g., #5519f7) directly in components; ALWAYS reference colors from the design token system using Tailwind classes
Use semantic color names that describe purpose, not appearance
Use font-sans for standard UI text (Geist Sans) and font-mono for code, technical content, or monospace needs (DM Mono)
Follow Tailwind's spacing scale (0.25rem increments); for section padding use mobile p-4 (1rem) and desktop p-[60px]
Use appropriate border radius: small elements rounded-lg, medium rounded-xl, large rounded-2xl, buttons rounded-[16px]
Use animation durations: fast duration-100 (0.1s), normal duration-300 (0.3s), slow duration-600 (0.6s)

Files:

• apps/web/src/components/dashboard/Sidebar.tsx

**/*.{tsx,ts}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{tsx,ts}: Prefer functional components with TypeScript and use proper TypeScript types, avoid any
Extract reusable logic into custom hooks
Use descriptive prop names and define prop types using TypeScript interfaces or types
Prefer controlled components over uncontrolled
Use zustand for global state (located in src/store/)
Use absolute imports from @/ prefix when available
Include proper aria labels for accessibility
Ensure keyboard navigation works
Maintain proper heading hierarchy
Provide alt text for images
Avoid unnecessary re-renders

Files:

• apps/web/src/components/dashboard/Sidebar.tsx

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

📄 CodeRabbit inference engine (.cursorrules)

Organize imports: react → third-party → local components → utils → types

Files:

• apps/web/src/components/dashboard/Sidebar.tsx

**/*[A-Z]*.{tsx,ts}

📄 CodeRabbit inference engine (.cursorrules)

Use PascalCase for component file names (e.g., UserProfile.tsx)

Files:

• apps/web/src/components/dashboard/Sidebar.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx}: Use PascalCase for types and interfaces with descriptive names
Use dynamic imports for code splitting when appropriate
Memoize expensive computations

Files:

• apps/web/src/components/dashboard/Sidebar.tsx

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

📄 CodeRabbit inference engine (.cursorrules)

Optimize images using next/image

apps/web/src/**/*.{tsx,ts}: Use Zustand for global state, located in src/store/
Use PascalCase for types and interfaces with descriptive names
Use dynamic imports for code splitting when appropriate
Optimize images using next/image
Memoize expensive computations
Define a type when defining const functions

Files:

• apps/web/src/components/dashboard/Sidebar.tsx

**/*.{js,jsx,ts,tsx,py,java,go,rb,php}

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

**/*.{js,jsx,ts,tsx,py,java,go,rb,php}: Always use lowercase when writing comments
Avoid unnecessary comments; code should be self-documenting when possible
Use comments to explain 'why', not 'what'

Files:

• apps/web/src/components/dashboard/Sidebar.tsx

apps/web/src/components/**/*.{tsx,ts,jsx,js}

📄 CodeRabbit inference engine (apps/web/.cursor/rules/frontend_rules.mdc)

apps/web/src/components/**/*.{tsx,ts,jsx,js}: Never use hardcoded hex values directly in components; always reference colors from the design token system using Tailwind classes
Use semantic color names from the design token system that describe purpose, not appearance (e.g., bg-brand-purple, bg-surface-primary, text-text-primary)
Use font-sans for standard UI text (Geist Sans) and font-mono for code, technical content, or monospace needs (DM Mono)
Follow Tailwind's spacing scale for section padding: p-4 (1rem) on mobile, p-[60px] on desktop
Use rounded-lg (0.5rem) for small elements, rounded-xl (1rem) for medium elements, rounded-2xl (1.5rem) for large elements, and rounded-[16px] for buttons
Use duration-100 (0.1s) for fast transitions, duration-300 (0.3s) for normal transitions, and duration-600 (0.6s) for slow transitions
Use available custom animations: animate-accordion-down, animate-accordion-up, animate-scrollRight, animate-scrollLeft, animate-customspin, animate-spin-slow, animate-spin-slow-reverse, animate-marquee, animate-marquee-vertical, animate-shine
Prefer functional components with TypeScript
Extract reusable logic into custom hooks
Prefer controlled components over uncontrolled
Include proper aria labels for accessibility
Ensure keyboard navigation works in interactive components
Maintain proper heading hierarchy in page components
Provide alt text for images
Use 'class:' instead of the ternary operator in class tags whenever possible
Implement accessibility features on interactive elements (e.g., tabindex='0', aria-label, onClick, onKeyDown)
Always follow the design system defined in apps/web/src/lib/design-tokens.ts and apps/web/tailwind.config.ts

Files:

• apps/web/src/components/dashboard/Sidebar.tsx

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

📄 CodeRabbit inference engine (apps/web/.cursor/rules/frontend_rules.mdc)

apps/web/src/components/**/*.{tsx,ts}: Use proper TypeScript types and avoid using any type
Use descriptive prop names and define prop types using TypeScript interfaces or types
Name components using PascalCase (e.g., UserProfile.tsx)

Files:

• apps/web/src/components/dashboard/Sidebar.tsx

apps/web/src/**/*.{tsx,ts,jsx,js}

📄 CodeRabbit inference engine (apps/web/.cursor/rules/frontend_rules.mdc)

apps/web/src/**/*.{tsx,ts,jsx,js}: Organize imports in order: React → third-party → local components → utils → types
Use absolute imports from @/ prefix when available
Remove unused imports
Use UPPER_SNAKE_CASE for constants
Use camelCase for functions and variables
Always use Tailwind classes for styling HTML elements; avoid using CSS or style tags
Use descriptive variable and function names; name event functions with a 'handle' prefix (e.g., handleClick, handleKeyDown)
Use const with arrow functions instead of function declarations (e.g., 'const toggle = () =>')

Files:

• apps/web/src/components/dashboard/Sidebar.tsx