Improve command menu animation

[abdulrahmancodes]

Screen.Recording.2025-11-30.at.8.51.43.AM.mov

---

Note

Removes legacy layout and refactors CommandMenuPageLayout to use width-based animation with shared constants and close-animation cleanup.

• UI/Command Menu:
  • Refactor CommandMenuPageLayout:
    • Switch to width/margin animation on StyledSidePanelWrapper; remove side panel x translate animation.
    • Use shared COMMAND_MENU_SIDE_PANEL_WIDTH constant.
    • Add close-state handling via isCommandMenuClosingState and useCommandMenuCloseAnimationCompleteCleanup on animation completion.
    • Simplify props: remove isSidePanelOpen; rely on isCommandMenuOpenedState and internal shouldRenderContent.
  • Cleanup:
    • Remove obsolete CommandMenuLayout.tsx.

^{Written by Cursor Bugbot for commit d6cb011. This will update automatically on new commits. Configure here.}

[greptile-apps]

Greptile Overview

Greptile Summary

Simplified command menu animation by removing redundant x-axis slide animation from StyledSidePanel. The PR deleted the duplicate CommandMenuLayout.tsx component and removed the animate={{ x: ... }} property from CommandMenuPageLayout.tsx, keeping only the width-based animation from the wrapper.

Key changes:

• Removed horizontal slide animation that was creating visual conflicts with the width animation
• Animation now relies solely on the wrapper's width change (0px → 400px) with overflow: hidden
• Eliminated duplicate component that had conflicting animation logic

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The changes simplify the animation logic by removing redundant x-axis translation. The wrapper already handles the reveal/hide animation via width changes with overflow:hidden, making the nested x-axis animation unnecessary. No logic changes, state management, or API modifications - purely a visual refinement that reduces animation complexity.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-front/src/modules/object-record/components/CommandMenuLayout.tsx	5/5	Deleted duplicate component that had conflicting animation logic
packages/twenty-front/src/modules/object-record/components/CommandMenuPageLayout.tsx	5/5	Removed redundant x-axis slide animation for cleaner side panel behavior

Sequence Diagram

sequenceDiagram
    participant User
    participant CommandMenuPageLayout
    participant StyledSidePanelWrapper
    participant StyledSidePanel
    participant CommandMenuRouter

    User->>CommandMenuPageLayout: Open command menu
    CommandMenuPageLayout->>CommandMenuPageLayout: isCommandMenuOpened = true
    CommandMenuPageLayout->>StyledSidePanelWrapper: animate width (0 → 400px)
    CommandMenuPageLayout->>StyledSidePanelWrapper: animate marginLeft (0 → spacing)
    Note over StyledSidePanel: No x-axis translation (removed)
    StyledSidePanelWrapper->>CommandMenuPageLayout: onAnimationStart()
    CommandMenuPageLayout->>CommandMenuPageLayout: setShouldRenderContent(true)
    CommandMenuPageLayout->>CommandMenuRouter: Render content
    StyledSidePanelWrapper->>CommandMenuPageLayout: onAnimationComplete()
    
    User->>CommandMenuPageLayout: Close command menu
    CommandMenuPageLayout->>CommandMenuPageLayout: isCommandMenuOpened = false
    CommandMenuPageLayout->>StyledSidePanelWrapper: animate width (400px → 0)
    CommandMenuPageLayout->>StyledSidePanelWrapper: animate marginLeft (spacing → 0)
    StyledSidePanelWrapper->>CommandMenuPageLayout: onAnimationComplete()
    CommandMenuPageLayout->>CommandMenuPageLayout: setShouldRenderContent(false)
    CommandMenuPageLayout->>CommandMenuPageLayout: commandMenuCloseAnimationCompleteCleanup()

Loading

[greptile-apps]

_{2 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[omnalamwar]

Looks fine to me.

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:4988

This environment will automatically shut down when the PR is closed or after 5 hours.

[Devessier]

Great. Thank you!

[github-actions]

Thanks @abdulrahmancodes for your contribution!
This marks your 84th PR on the repo. You're top 1% of all our contributors 🎉
See contributor page - Share on LinkedIn - Share on Twitter