Refactor sidebar sections to use collapsible components

[2witstudios]

Summary

Refactored the left sidebar layout to make Favorites and Recents sections collapsible, bringing them in line with the existing Pulse section pattern. This improves space management and provides users with better control over sidebar content visibility.

Key Changes

• Made Favorites and Recents collapsible: Both sections now use the Collapsible component with expand/collapse functionality, matching the existing Pulse section pattern
• Added state management: Extended useLayoutStore with favoritesCollapsed and recentsCollapsed states to persist user preferences
• Unified styling: Applied consistent styling across all collapsible sections with:
  • Border-top separators instead of rounded borders
  • Standardized padding (px-2 py-2) and icon sizes (h-3.5 w-3.5)
  • Consistent button styling and hover states
• Improved empty states: Favorites and Recents now display helpful messages when empty instead of hiding completely
• Simplified sidebar layout: Removed spacing utilities from DashboardSidebar wrapper and cleaned up comments
• Updated footer components: Refined padding and icon sizes in DashboardFooter and DriveFooter for visual consistency
• Updated skeletons: Adjusted skeleton loaders to match new collapsible header layouts

Implementation Details

• All collapsible sections now follow the same pattern with a trigger button containing a label and chevron icon
• Collapse state is persisted to localStorage via the layout store
• Empty state messages use muted foreground colors for visual hierarchy
• Icon sizes standardized to h-3.5 w-3.5 across all collapsible triggers

https://claude.ai/code/session_01ME89usSREPQedRGGC9qYLs

Summary by CodeRabbit

Release Notes

• New Features

  • Favorites and Recents sections are now collapsible, giving you more control over your sidebar layout.

• Style

  • Refined button spacing and icon sizing across sidebar components.
  • Redesigned Pulse section with improved visual styling and layout.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[coderabbitai]

📝 Walkthrough

Walkthrough

The pull request introduces collapsible UI sections for Favorites and Recents in the left sidebar with persisted collapse/expand state. It also applies visual refinements to footer buttons and the Pulse component, while removing Pulse from the main sidebar rendering.

Changes

Cohort / File(s)	Summary
Sidebar footer styling refinements DashboardFooter.tsx, DriveFooter.tsx	Reduced button padding and icon sizes; adjusted CollapsibleContent padding. Purely visual styling changes.
Collapsible Favorites section FavoritesSection.tsx	Wrapped static favorites list with Collapsible component. Added chevron indicator, collapsible trigger button with star icon, and integrated favoritesCollapsed state from layout store.
Collapsible Recents section RecentsSection.tsx	Wrapped static recents list with Collapsible component. Added chevron indicator, collapsible trigger button with clock icon, integrated recentsCollapsed state from layout store, and updated skeleton layout to match new structure.
Pulse component redesign Pulse.tsx	Changed container from rounded card to top-border style; simplified header layout and typography; adjusted chevron sizing and refresh button styling; updated skeleton to match new visual design.
Sidebar structure changes DashboardSidebar.tsx	Removed Pulse component import and usage; converted outer container to unstyled div, eliminating vertical spacing wrapper.
Sidebar conditional rendering index.tsx	Added layout store subscription and conditional Pulse rendering when not in drive and dashboardFooterCollapsed is true.
Layout state extensions useLayoutStore.ts	Added two new persisted boolean properties (favoritesCollapsed, recentsCollapsed) and their corresponding setter methods to LayoutState interface.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat(dashboard): redesign sidebar with Pulse, Favorites, and Recents #306: Implements related sidebar UI refinements and introduces the layout store infrastructure for collapsible sections
• feat(ui): make Pulse component collapsible #340: Modifies Pulse.tsx component with similar visual and structural changes
• fix: use cached tab title and pageType in mobile RecentsDropdown #375: Adjusts empty/error handling in RecentsSection.tsx alongside collapsible wrapper additions

Poem

A sidebar takes shape with a fold and a click, 🐰
Favorites and recents now hide with a trick—
State persists while chevrons dance round,
The Pulse finds new homes, design refined and sound! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ 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 summarizes the main change: refactoring sidebar sections (Favorites and Recents) to use collapsible components, which is the core objective of this PR.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch claude/add-accordion-sections-Ohh48

---

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