fix(#15950): mobile favorites folder navigation with proper back button

[AntonAmbarov]

What’s done

• Clicking a favorite folder on mobile now opens a clean drill-down layer with only its contents
• Added a back button (icon + folder name) — visually 100% identical to NavigationDrawerBackButton
• Sidebar no longer collapses when opening a folder
• Tree line is removed on mobile (consistent with current Twenty design)

Intentional deviations from the mockup

1. Back button does not replace MultiWorkspaceDropdownButton
   Kept NavigationDrawerHeader untouched — it’s responsible for the hamburger menu and workspace name.
   Added the back button as a separate block below.
   → This feels cleaner architecturally and avoids breaking other places that use NavigationDrawerHeader.

2. Vertical spacing between items is slightly tighter than in the mockup
   Used NavigationDrawerSubItem — the standard component for nested items in Twenty.
   Current production spacing matches this exactly, so I preferred consistency over pixel-perfect mockup matching.

Happy to adjust either point if the team prefers to follow the mockup 1:1.

Closes #15950

[greptile-apps]

Greptile Overview

Greptile Summary

Implements mobile-specific navigation for favorite folders by introducing drill-down behavior instead of accordion expansion. When users tap a folder on mobile, it now opens a dedicated view showing only that folder's contents with a back button to return.

Key changes:

• Added currentFavoriteFolderIdState to track the opened folder on mobile
• Created FavoritesBackButton component for navigation
• Added FavoritesFolderContent component to render folder contents in mobile view
• Modified handleToggle in CurrentWorkspaceMemberFavorites to set folder state on mobile instead of expanding accordion
• Added preventCollapseOnMobile prop to keep drawer open when navigating folders

Issues found:

• Critical: Nested DragDropContext in FavoritesFolderContent - wrapping with FavoritesDragProvider creates a second context, which breaks drag-and-drop functionality
• Critical: Missing droppableProps spread in FavoritesFolderContent droppable container
• Visual inconsistency: uses NavigationDrawerItem instead of NavigationDrawerSubItem (though PR description notes tree lines removed on mobile intentionally)

Confidence Score: 2/5

• Critical drag-and-drop bugs will break existing functionality
• Two critical issues detected that will cause runtime failures: nested DragDropContext will break drag-and-drop entirely, and missing droppableProps violates library requirements. The architectural approach is sound, but these bugs must be fixed before merge.
• Pay close attention to packages/twenty-front/src/modules/favorites/components/FavoritesFolderContent.tsx - contains critical drag-and-drop implementation errors

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-front/src/modules/navigation/components/MainNavigationDrawer.tsx	4/5	Conditionally renders FavoritesFolderContent when folder is opened - uses find which could be undefined but handled properly
packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx	5/5	Updated folder toggle to use new state on mobile instead of expanding accordion
packages/twenty-front/src/modules/favorites/components/FavoritesFolderContent.tsx	3/5	Renders folder contents with back button - uses NavigationDrawerItem instead of NavigationDrawerSubItem, missing drag context integration

Sequence Diagram

sequenceDiagram
    participant User
    participant NavigationDrawer
    participant FavoriteFolder
    participant State as currentFavoriteFolderIdState
    participant Content as FavoritesFolderContent
    participant BackButton as FavoritesBackButton

    Note over User,BackButton: Mobile Folder Navigation Flow

    User->>FavoriteFolder: Click folder item
    FavoriteFolder->>FavoriteFolder: Check isMobile
    alt Mobile Device
        FavoriteFolder->>State: setCurrentFolderId(folderId)
        State-->>NavigationDrawer: State updated
        NavigationDrawer->>NavigationDrawer: Check currentFavoriteFolderId
        NavigationDrawer->>Content: Render FavoritesFolderContent
        Content->>BackButton: Render FavoritesBackButton
        Content->>Content: Render folder favorites
        Note over Content: Uses NavigationDrawerItem (not SubItem)
    else Desktop
        FavoriteFolder->>FavoriteFolder: setOpenFavoriteFolderIds
        Note over FavoriteFolder: Accordion expands inline
    end

    User->>BackButton: Click back button
    BackButton->>State: setCurrentFolderId(null)
    State-->>NavigationDrawer: State cleared
    NavigationDrawer->>NavigationDrawer: Render MainNavigationDrawerScrollableItems

Loading

[greptile-apps]

_{6 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[github-actions]

🚀 Preview Environment Ready!

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

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

[Devessier]

@AntonAmbarov, I'm checking why we can't merge your PR.