Aggregate follow-up (#9547)

In this PR
- fix [some UI
regressions](https://discord.com/channels/1130383047699738754/1327189577575956514/1327189577575956514)
introduced by work on view groups
- address some follow-ups:
1. [Menu should keep selected when the menu is
open](https://discord.com/channels/1130383047699738754/1326607851824877639/1326607851824877639)
2.
[Cropping](https://discord.com/channels/1130383047699738754/1326610578869063800/1326610578869063800)
3. [Put earliest date / latest date in a separate "Date"
submenu](https://discord.com/channels/1130383047699738754/1326856023985618966/1326856023985618966)
- Refactor around date aggregate operations

packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx

@@ -1,30 +1,28 @@
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
+import { DropdownOnToggleEffect } from '@/ui/layout/dropdown/components/DropdownOnToggleEffect';
+import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponeInstanceContext';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
+import { dropdownHotkeyComponentState } from '@/ui/layout/dropdown/states/dropdownHotkeyComponentState';
+import { dropdownMaxHeightComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownMaxHeightComponentStateV2';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import styled from '@emotion/styled';
 import {
+  Placement,
   autoUpdate,
   flip,
   offset,
-  Placement,
   size,
   useFloating,
 } from '@floating-ui/react';
 import { MouseEvent, ReactNode } from 'react';
-import { Keys } from 'react-hotkeys-hook';
-
-import { useDropdown } from '../hooks/useDropdown';
-
-import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
-import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponeInstanceContext';
-import { dropdownHotkeyComponentState } from '@/ui/layout/dropdown/states/dropdownHotkeyComponentState';
-import { dropdownMaxHeightComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownMaxHeightComponentStateV2';
-import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
-import styled from '@emotion/styled';
 import { flushSync } from 'react-dom';
+import { Keys } from 'react-hotkeys-hook';
 import { useRecoilCallback } from 'recoil';
 import { isDefined } from 'twenty-ui';
 import { sleep } from '~/utils/sleep';
-import { DropdownOnToggleEffect } from './DropdownOnToggleEffect';
+import { useDropdown } from '../hooks/useDropdown';
 
 const StyledDropdownFallbackAnchor = styled.div`
   left: 0;
@@ -32,6 +30,26 @@ const StyledDropdownFallbackAnchor = styled.div`
   top: 0;
 `;
 
+type StyledHeaderDivProps = {
+  isUnfolded?: boolean;
+  isActive?: boolean;
+};
+
+const StyledHeaderDiv = styled.div<StyledHeaderDivProps>`
+  & button,
+  & > * {
+    background: ${({ theme, isUnfolded }) =>
+      isUnfolded ? theme.background.transparent.light : 'none'};
+
+    &:hover {
+      background: ${({ theme, isUnfolded }) =>
+        isUnfolded
+          ? theme.background.transparent.medium
+          : theme.background.transparent.light};
+    }
+  }
+`;
+
 type DropdownProps = {
   className?: string;
   clickableComponent?: ReactNode;
@@ -133,16 +151,17 @@ export const Dropdown = ({
       <DropdownScope dropdownScopeId={getScopeIdFromComponentId(dropdownId)}>
         <>
           {isDefined(clickableComponent) ? (
-            <div
+            <StyledHeaderDiv
               ref={refs.setReference}
               onClick={handleClickableComponentClick}
               aria-controls={`${dropdownId}-options`}
               aria-expanded={isDropdownOpen}
               aria-haspopup={true}
               role="button"
+              isUnfolded={isDropdownOpen}
             >
               {clickableComponent}
-            </div>
+            </StyledHeaderDiv>
           ) : (
             <StyledDropdownFallbackAnchor ref={refs.setReference} />
           )}

packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx

@@ -8,8 +8,6 @@ type StyledDropdownButtonProps = {
 export const StyledHeaderDropdownButton = styled.button<StyledDropdownButtonProps>`
   font-family: inherit;
   align-items: center;
-  background: ${({ theme, isUnfolded }) =>
-    isUnfolded ? theme.background.transparent.light : theme.background.primary};
   border: none;
   border-radius: ${({ theme }) => theme.border.radius.sm};
   color: ${({ isActive, theme }) =>
@@ -22,11 +20,4 @@ export const StyledHeaderDropdownButton = styled.button<StyledDropdownButtonProp
 
   padding-right: ${({ theme }) => theme.spacing(2)};
   user-select: none;
-
-  &:hover {
-    background: ${({ theme, isUnfolded }) =>
-      isUnfolded
-        ? theme.background.transparent.medium
-        : theme.background.transparent.light};
-  }
 `;