Favorite folders and new type of favorites

[Bonapara]

We want to introduce the ability to add Notes, Tasks, Records, and Views as favorites.

Feature Overview

https://github.com/twentyhq/twenty/assets/19412894/cb372cb0-b075-4987-9798-46ddd7aadc22

Global behavior

Clicking a folder name should expand or collapse the folder with a 100ms animation. The task icon should be clickable to mark a task as done.

Create a folder

Users should be able to create a new favorite folder directly from the navigation bar or the favorite menu:

Navigation

Favorite menu

Edit a folder

By clicking the menu at the right edge of the folder navigation item, you will either be able to rename the folder, or to delete the folder with its whole content

Add as Favorite

To add a Record or View as favorite, just press the heart button at the top right edge of the screen:

To add a Note or a Task, press the similar button to the top right edge of the side-panel:

Important behavior: By default, a new favorite is added to the "No folder" section, which acts as a "default folder." It will be displayed at the root of the Favorites section in the navigation menu. When choosing a specific folder, the favorite should be moved out of the "No folder." However, the user should still be able to add the favorite back to the "No folder" section. See the feature overview video for better illustration.

Remove a Favorite

Either deselect a checkbox on the favorite top right menu:

Or click the Unstar light icon button on any favorite in the navigation menu

Breadcrumb

The line going to the active navigation item should be darker

vs

Figma

Componenents

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=115-6252&t=D4lb89ry3MvwwMqw-11

Prototype

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=32481-369067&t=D4lb89ry3MvwwMqw-11

[greptile-apps[bot]]

Disclaimer: This comment was automatically generated with AI. It can give some useful hints as to where to look for, but sometimes it can also give very inaccurate answers so takes this with a pinch of salt :).

To implement the ability to save Notes, Tasks, Records, and Views as favorites, follow these steps:

1. Extend useFavorites Hook: Update packages/twenty-front/src/modules/favorites/hooks/useFavorites.ts to manage new types of favorites.

2. Update Favorite Type: Modify packages/twenty-front/src/modules/favorites/types/Favorite.ts to include new properties for Notes, Tasks, Records, and Views.

3. Handle New Favorite Types: Extend mapFavorites function in packages/twenty-front/src/modules/favorites/utils/mapFavorites.ts to process the new favorite types.

4. Update Favorites Component: Modify packages/twenty-front/src/modules/favorites/components/Favorites.tsx to display the new favorite types.

5. Modify RecordShowPage Component: Update packages/twenty-front/src/pages/object-record/RecordShowPage.tsx to handle adding and removing the new favorite types.

References

[pacyL2K19]

@Bonapara isn't good to break this down into sub tasks? I can work on some sub-task if we decide to create some

cc: @FelixMalfait

[Bonapara]

Hi @pacyL2K19! We plan to handle this internally for convenience :)

[pacyL2K19]

Hi @pacyL2K19! We plan to handle this internally for convenience :)

Got it, thanks @Bonapara I will pick another one from the queue