Favorites Folders Fast Followups (#8920)

Fixes :
<img width="716" alt="Screenshot 2024-12-06 at 3 45 41 PM"
src="https://github.com/user-attachments/assets/61fdf355-0d0a-4ed7-befa-ada23341a58f">

Fixes: Reduce menu width to 160px and it should appear below three dots
<img width="394" alt="Screenshot 2024-12-06 at 3 46 49 PM"
src="https://github.com/user-attachments/assets/b1266f83-9b6f-445b-9409-d7f691776bd0">

Fixes: The right margin should be 2px
<img width="1134" alt="Screenshot 2024-12-06 at 3 47 45 PM"
src="https://github.com/user-attachments/assets/b6dd857c-6575-418d-8e32-64cd4e5d4e85">

Fixes:
Requirement: Clicking the heart Icon should put the record as favorite.
It shouldn't open the menu on first click. It should only on second
click, when the record is already a favorite.

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import { useLocation } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import {
@@ -26,15 +25,19 @@ import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/compo
 import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
 import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import styled from '@emotion/styled';
 import { DragStart, DropResult, ResponderProvided } from '@hello-pangea/dnd';
 import { useState } from 'react';
 
+const StyledOrphanFavoritesContainer = styled.div`
+  margin-bottom: ${({ theme }) => theme.betweenSiblingsGap};
+`;
+
 export const CurrentWorkspaceMemberFavoritesFolders = () => {
   const [isDragging, setIsDragging] = useState(false);
 
   const currentPath = useLocation().pathname;
   const currentViewPath = useLocation().pathname + useLocation().search;
-  const theme = useTheme();
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const { sortedFavorites: favorites } = useFavorites();
   const { deleteFavorite } = useDeleteFavorite();
@@ -98,12 +101,13 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
           onClick={toggleNavigationSection}
           rightIcon={
             isFavoriteFolderEnabled ? (
-              <IconFolderPlus size={theme.icon.size.sm} />
+              <LightIconButton
+                Icon={IconFolderPlus}
+                onClick={toggleNewFolder}
+                accent="tertiary"
+              />
             ) : undefined
           }
-          onRightIconClick={
-            isFavoriteFolderEnabled ? toggleNewFolder : undefined
-          }
         />
       </NavigationDrawerAnimatedCollapseWrapper>
 
@@ -126,26 +130,28 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
                   index={index}
                   isInsideScrollableContainer={true}
                   itemComponent={
-                    <NavigationDrawerItem
-                      key={favorite.id}
-                      className="navigation-drawer-item"
-                      label={favorite.labelIdentifier}
-                      Icon={() => <FavoriteIcon favorite={favorite} />}
-                      active={isLocationMatchingFavorite(
-                        currentPath,
-                        currentViewPath,
-                        favorite,
-                      )}
-                      to={favorite.link}
-                      rightOptions={
-                        <LightIconButton
-                          Icon={IconHeartOff}
-                          onClick={() => deleteFavorite(favorite.id)}
-                          accent="tertiary"
-                        />
-                      }
-                      isDragging={isDragging}
-                    />
+                    <StyledOrphanFavoritesContainer>
+                      <NavigationDrawerItem
+                        key={favorite.id}
+                        className="navigation-drawer-item"
+                        label={favorite.labelIdentifier}
+                        Icon={() => <FavoriteIcon favorite={favorite} />}
+                        active={isLocationMatchingFavorite(
+                          currentPath,
+                          currentViewPath,
+                          favorite,
+                        )}
+                        to={favorite.link}
+                        rightOptions={
+                          <LightIconButton
+                            Icon={IconHeartOff}
+                            onClick={() => deleteFavorite(favorite.id)}
+                            accent="tertiary"
+                          />
+                        }
+                        isDragging={isDragging}
+                      />
+                    </StyledOrphanFavoritesContainer>
                   }
                 />
               ))}

packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx

@@ -1,10 +1,14 @@
 import { FavoriteFolderHotkeyScope } from '@/favorites/constants/FavoriteFolderRightIconDropdownHotkeyScope';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
 
-import { IconDotsVertical, IconPencil, IconTrash, MenuItem } from 'twenty-ui';
+import {
+  IconDotsVertical,
+  IconPencil,
+  IconTrash,
+  LightIconButton,
+  MenuItem,
+} from 'twenty-ui';
 
 type FavoriteFolderNavigationDrawerItemDropdownProps = {
   folderId: string;
@@ -13,24 +17,12 @@ type FavoriteFolderNavigationDrawerItemDropdownProps = {
   closeDropdown: () => void;
 };
 
-const StyledIconContainer = styled.div`
-  align-items: center;
-  background: transparent;
-  height: 24px;
-  width: 24px;
-  justify-content: center;
-  transition: background 0.1s ease;
-  display: flex;
-`;
-
 export const FavoriteFolderNavigationDrawerItemDropdown = ({
   folderId,
   onRename,
   onDelete,
   closeDropdown,
 }: FavoriteFolderNavigationDrawerItemDropdownProps) => {
-  const theme = useTheme();
-
   const handleRename = () => {
     onRename();
     closeDropdown();
@@ -49,15 +41,9 @@ export const FavoriteFolderNavigationDrawerItemDropdown = ({
       }}
       data-select-disable
       clickableComponent={
-        <StyledIconContainer>
-          <IconDotsVertical
-            size={theme.icon.size.sm}
-            color={theme.font.color.tertiary}
-          />
-        </StyledIconContainer>
+        <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
       }
-      dropdownPlacement="right"
-      dropdownOffset={{ y: -15 }}
+      dropdownPlacement="bottom-start"
       dropdownComponents={
         <DropdownMenuItemsContainer>
           <MenuItem

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -77,7 +77,7 @@ const StyledItem = styled('button', {
 
   padding-bottom: ${({ theme }) => theme.spacing(1)};
   padding-left: ${({ theme }) => theme.spacing(1)};
-  padding-right: ${({ theme }) => theme.spacing(1)};
+  padding-right: ${({ theme }) => theme.spacing(0.5)};
   padding-top: ${({ theme }) => theme.spacing(1)};
 
   margin-top: ${({ indentationLevel }) =>

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx

@@ -17,7 +17,10 @@ const StyledTitle = styled.div`
   font-size: ${({ theme }) => theme.font.size.xs};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
   height: ${({ theme }) => theme.spacing(5)};
-  padding: ${({ theme }) => theme.spacing(1)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
+  padding-right: ${({ theme }) => theme.spacing(0.5)};
+  padding-top: ${({ theme }) => theme.spacing(1)};
+  padding-bottom: ${({ theme }) => theme.spacing(1)};
   justify-content: space-between;
 
   &:hover {
@@ -36,38 +39,21 @@ type StyledRightIconProps = {
 
 const StyledRightIcon = styled.div<StyledRightIconProps>`
   cursor: pointer;
-  margin-left: ${({ theme }) => theme.spacing(2)};
-  transition: opacity 150ms ease-in-out;
   opacity: ${({ isMobile }) => (isMobile ? 1 : 0)};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  width: ${({ theme }) => theme.spacing(5)};
-  height: ${({ theme }) => theme.spacing(5)};
-  :hover {
-    background: ${({ theme }) => theme.background.transparent.light};
-  }
 
   .section-title-container:hover & {
     opacity: 1;
   }
-
-  &:active {
-    cursor: pointer;
-  }
 `;
 
 type NavigationDrawerSectionTitleProps = {
   onClick?: () => void;
-  onRightIconClick?: () => void;
   label: string;
   rightIcon?: React.ReactNode;
 };
 
 export const NavigationDrawerSectionTitle = ({
   onClick,
-  onRightIconClick,
   label,
   rightIcon,
 }: NavigationDrawerSectionTitleProps) => {
@@ -85,24 +71,15 @@ export const NavigationDrawerSectionTitle = ({
     }
   };
 
-  const handleRightIconClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
-    if (isDefined(onRightIconClick)) {
-      onRightIconClick();
-    }
-  };
-
   if (loading && isDefined(currentUser)) {
     return <NavigationDrawerSectionTitleSkeletonLoader />;
   }
 
   return (
-    <StyledTitle className="section-title-container" onClick={handleTitleClick}>
-      <StyledLabel>{label}</StyledLabel>
+    <StyledTitle className="section-title-container">
+      <StyledLabel onClick={handleTitleClick}>{label}</StyledLabel>
       {rightIcon && (
-        <StyledRightIcon isMobile={isMobile} onClick={handleRightIconClick}>
-          {rightIcon}
-        </StyledRightIcon>
+        <StyledRightIcon isMobile={isMobile}>{rightIcon}</StyledRightIcon>
       )}
     </StyledTitle>
   );

packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx

@@ -34,13 +34,20 @@ export const RecordShowPageBaseHeader = ({
       {!isMobile && (
         <>
           {isFavoriteFolderEnabled ? (
-            <PageFavoriteFoldersDropdown
-              key={FAVORITE_FOLDER_PICKER_DROPDOWN_ID}
-              dropdownId={FAVORITE_FOLDER_PICKER_DROPDOWN_ID}
-              isFavorite={isFavorite}
-              record={record}
-              objectNameSingular={objectNameSingular}
-            />
+            isFavorite ? (
+              <PageFavoriteFoldersDropdown
+                key={FAVORITE_FOLDER_PICKER_DROPDOWN_ID}
+                dropdownId={FAVORITE_FOLDER_PICKER_DROPDOWN_ID}
+                isFavorite={isFavorite}
+                record={record}
+                objectNameSingular={objectNameSingular}
+              />
+            ) : (
+              <PageFavoriteButton
+                isFavorite={isFavorite}
+                onClick={handleFavoriteButtonClick}
+              />
+            )
           ) : (
             <PageFavoriteButton
               isFavorite={isFavorite}