favorite folders followup (#8570)

Something changed, which affected the Favorite folder picker checkbox
styles -- fixed it!
Cleaned up code in `CurrentWorkspaceMemberFavoritesFolders` - removed
redundant filtering since favorites are already filtered in
`usePrefetchedFavoritesData`.
Regarding issue #8569 - I am not sure what to do in this case. Since
Folders data is gated by a feature flag, we can't use it in
`CurrentWorkspaceMemberFavoritesFolders` to ensure the favorite section
renders with empty folders. Currently, the section only appears when at
least one favorite exists - may be leave this section open at all times
or fix this bug after removal of the feature flag?

---------

Co-authored-by: Nitin Koche <nitinkoche@Nitins-MacBook-Pro.local>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableList.tsx

@@ -1,10 +1,10 @@
-import { useState } from 'react';
 import styled from '@emotion/styled';
 import {
   DragDropContext,
   Droppable,
   OnDragEndResponder,
 } from '@hello-pangea/dnd';
+import { useState } from 'react';
 import { v4 } from 'uuid';
 type DraggableListProps = {
   draggableItems: React.ReactNode;

packages/twenty-front/src/modules/ui/layout/page/components/PageFavoriteButton.tsx

@@ -1,20 +0,0 @@
-import { IconButton, IconHeart } from 'twenty-ui';
-
-type PageFavoriteButtonProps = {
-  isFavorite: boolean;
-  onClick?: () => void;
-};
-
-export const PageFavoriteButton = ({
-  isFavorite,
-  onClick,
-}: PageFavoriteButtonProps) => (
-  <IconButton
-    Icon={IconHeart}
-    size="medium"
-    variant="secondary"
-    data-testid="add-button"
-    accent={isFavorite ? 'danger' : 'default'}
-    onClick={onClick}
-  />
-);

packages/twenty-front/src/modules/ui/layout/page/components/PageFavoriteFolderDropdown.tsx

@@ -1,49 +0,0 @@
-import { FavoriteFolderPicker } from '@/favorites/favorite-folder-picker/components/FavoriteFolderPicker';
-import { FavoriteFolderPickerEffect } from '@/favorites/favorite-folder-picker/components/FavoriteFolderPickerEffect';
-import { FavoriteFolderPickerScope } from '@/favorites/favorite-folder-picker/scopes/FavoriteFolderPickerScope';
-import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
-import { PageFavoriteButton } from '@/ui/layout/page/components/PageFavoriteButton';
-
-type PageFavoriteFoldersDropdownProps = {
-  dropdownId: string;
-  isFavorite: boolean;
-  record?: ObjectRecord;
-  objectNameSingular: string;
-};
-
-export const PageFavoriteFoldersDropdown = ({
-  dropdownId,
-  isFavorite,
-  record,
-  objectNameSingular,
-}: PageFavoriteFoldersDropdownProps) => {
-  const { closeDropdown } = useDropdown(dropdownId);
-
-  return (
-    <FavoriteFolderPickerScope favoriteFoldersScopeId={dropdownId}>
-      <DropdownScope dropdownScopeId={dropdownId}>
-        <Dropdown
-          dropdownId={dropdownId}
-          dropdownPlacement="bottom-start"
-          clickableComponent={<PageFavoriteButton isFavorite={isFavorite} />}
-          dropdownComponents={
-            <>
-              <FavoriteFolderPickerEffect record={record} />
-              <FavoriteFolderPicker
-                onSubmit={closeDropdown}
-                record={record}
-                objectNameSingular={objectNameSingular}
-              />
-            </>
-          }
-          dropdownHotkeyScope={{
-            scope: dropdownId,
-          }}
-        />
-      </DropdownScope>
-    </FavoriteFolderPickerScope>
-  );
-};

packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx

@@ -23,12 +23,17 @@ const StyledScrollWrapper = styled.div`
   }
 `;
 
+const StyledInnerContainer = styled.div`
+  flex: 1;
+`;
+
 export type ScrollWrapperProps = {
   children: React.ReactNode;
   className?: string;
   enableXScroll?: boolean;
   enableYScroll?: boolean;
   contextProviderName: ContextProviderName;
+  scrollHide?: boolean;
 };
 
 export const ScrollWrapper = ({
@@ -37,6 +42,7 @@ export const ScrollWrapper = ({
   enableXScroll = true,
   enableYScroll = true,
   contextProviderName,
+  scrollHide = false,
 }: ScrollWrapperProps) => {
   const scrollableRef = useRef<HTMLDivElement>(null);
   const Context = getContextByProviderName(contextProviderName);
@@ -55,7 +61,10 @@ export const ScrollWrapper = ({
 
   const [initialize, instance] = useOverlayScrollbars({
     options: {
-      scrollbars: { autoHide: 'scroll' },
+      scrollbars: {
+        autoHide: scrollHide ? 'scroll' : 'never',
+        visibility: scrollHide ? 'hidden' : 'visible',
+      },
       overflow: {
         x: enableXScroll ? undefined : 'hidden',
         y: enableYScroll ? undefined : 'hidden',
@@ -84,7 +93,7 @@ export const ScrollWrapper = ({
       }}
     >
       <StyledScrollWrapper ref={scrollableRef} className={className}>
-        {children}
+        <StyledInnerContainer>{children}</StyledInnerContainer>
       </StyledScrollWrapper>
     </Context.Provider>
   );