Animated the Sidebar Objects Tree view opening/closing

[ehconitin]

closes #6485

2024-12-31.00-15-33.mov

[greptile-apps]

PR Summary

This PR adds smooth animations to the sidebar objects tree view by implementing a new expandable container component using Framer Motion for transitions.

• Added new NavigationDrawerSubItemAnimatedExpandableContainer component with height/opacity animations and 300ms duration
• Modified NavigationDrawerItemForObjectMetadataItem to use animated container for sub-items expansion
• Updated CurrentWorkspaceMemberFavorites to animate folder content expansion/collapse
• Animations use theme-consistent easing and timing (300ms) for a polished feel

_{3 file(s) reviewed, 4 comment(s)
Edit PR Review Bot Settings | Greptile}

[magrinj]

Great job, some comments about the implementation and component naming ! 🙂

[magrinj]

Thanks for the tests and the refactor, just adding a comment to clarify where the hook should take place

[ehconitin]

@magrinj
wdyt?
one generic expandable container. not sure if keeping the hook in the component is the right choice and not sure if we can have hooks in twenty-ui @lucasbordeau? If not I can take it out of twenty-ui but then I don't know which place would be better suited for it :)

[greptile-apps]

PR Summary

(updates since last review)

This PR continues the implementation of sidebar animations by introducing a new reusable AnimatedExpandableContainer component and refactoring existing components to use it. Here are the key changes:

• Created new AnimatedExpandableContainer in twenty-ui package with Framer Motion animations and configurable dimensions/durations
• Removed old static ExpandableContainer in favor of the new animated version
• Refactored AdvancedSettingsWrapper and favorites components to use the new container
• Added comprehensive Storybook stories demonstrating different animation configurations

The implementation looks solid and matches the desired 300ms animation requirement from the issue.

_{11 file(s) reviewed, 6 comment(s)
Edit PR Review Bot Settings | Greptile}

[lucasbordeau]

I think that putting it into twenty-ui is not critical for now, let's be cautious and extract utils, states and hook into the relevant files and folders, remember to keep one util per file, etc.