Display and update aggregate queries in kanban views (#8833)

Closes #8752, #8753, #8754

Implements usage of aggregate queries in kanban views.

https://github.com/user-attachments/assets/732590ca-2785-4c57-82d5-d999a2279e92

TO DO

1. write tests + storybook
2. Fix values displayed should have the same format as defined in number
fields + Fix display for amountMicros

---------

Co-authored-by: Weiko <corentin@twenty.com>

packages/twenty-front/src/modules/dropdown/constants/DropdownOffsetY.tsx

@@ -0,0 +1 @@
+export const DROPDOWN_OFFSET_Y = 8;

packages/twenty-front/src/modules/dropdown/constants/DropdownWidth.tsx

@@ -0,0 +1 @@
+export const DROPDOWN_WIDTH = '200px';

packages/twenty-front/src/modules/dropdown/hooks/useCurrentContentId.ts

@@ -0,0 +1,19 @@
+import { useCallback, useState } from 'react';
+
+export const useCurrentContentId = <T>() => {
+  const [currentContentId, setCurrentContentId] = useState<T | null>(null);
+
+  const handleContentChange = useCallback((key: T) => {
+    setCurrentContentId(key);
+  }, []);
+
+  const handleResetContent = useCallback(() => {
+    setCurrentContentId(null);
+  }, []);
+
+  return {
+    currentContentId,
+    handleContentChange,
+    handleResetContent,
+  };
+};

packages/twenty-front/src/modules/dropdown/hooks/useDropdown.ts

@@ -0,0 +1,35 @@
+import { ObjectOptionsDropdownContextValue } from '@/object-record/object-options-dropdown/states/contexts/ObjectOptionsDropdownContext';
+import { RecordBoardColumnHeaderAggregateDropdownContextValue } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownContext';
+import { useDropdown as useDropdownUi } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { Context, useCallback, useContext } from 'react';
+
+export const useDropdown = <
+  T extends
+    | RecordBoardColumnHeaderAggregateDropdownContextValue
+    | ObjectOptionsDropdownContextValue,
+>({
+  context,
+}: {
+  context: Context<T>;
+}) => {
+  const dropdownContext = useContext(context);
+
+  if (!dropdownContext) {
+    throw new Error(
+      `useDropdown must be used within a context provider (${context.Provider.name})`,
+    );
+  }
+  const dropdownId = dropdownContext.dropdownId;
+  const { closeDropdown } = useDropdownUi(dropdownId);
+
+  const handleCloseDropdown = useCallback(() => {
+    dropdownContext.resetContent();
+    closeDropdown();
+  }, [closeDropdown, dropdownContext]);
+
+  return {
+    ...dropdownContext,
+    closeDropdown: handleCloseDropdown,
+    resetContent: dropdownContext.resetContent,
+  };
+};