feat: view groups (#7176)

Fix #4244 and #4356

This pull request introduces the new "view groups" capability, enabling
the reordering, hiding, and showing of columns in Kanban mode. The core
enhancement includes the addition of a new entity named `ViewGroup`,
which manages column behaviors and interactions.

#### Key Changes:
1. **ViewGroup Entity**:  
The newly added `ViewGroup` entity is responsible for handling the
organization and state of columns.
This includes:
   - The ability to reorder columns.
- The option to hide or show specific columns based on user preferences.

#### Conclusion:
This PR adds a significant new feature that enhances the flexibility of
Kanban views through the `ViewGroup` entity.
We'll later add the view group logic to table view too.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/views/hooks/useSaveCurrentViewGroups.ts

@@ -0,0 +1,96 @@
+import { useRecoilCallback } from 'recoil';
+
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
+import { usePersistViewGroupRecords } from '@/views/hooks/internal/usePersistViewGroupRecords';
+import { useGetViewFromCache } from '@/views/hooks/useGetViewFromCache';
+import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
+import { ViewGroup } from '@/views/types/ViewGroup';
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
+import { isDefined } from '~/utils/isDefined';
+import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
+
+export const useSaveCurrentViewGroups = (viewBarComponentId?: string) => {
+  const { createViewGroupRecords, updateViewGroupRecords } =
+    usePersistViewGroupRecords();
+
+  const { getViewFromCache } = useGetViewFromCache();
+
+  const currentViewIdCallbackState = useRecoilComponentCallbackStateV2(
+    currentViewIdComponentState,
+    viewBarComponentId,
+  );
+
+  const saveViewGroups = useRecoilCallback(
+    ({ snapshot }) =>
+      async (viewGroupsToSave: ViewGroup[]) => {
+        const currentViewId = snapshot
+          .getLoadable(currentViewIdCallbackState)
+          .getValue();
+
+        if (!currentViewId) {
+          return;
+        }
+
+        const view = await getViewFromCache(currentViewId);
+
+        if (isUndefinedOrNull(view)) {
+          return;
+        }
+
+        const currentViewGroups = view.viewGroups;
+
+        const viewGroupsToUpdate = viewGroupsToSave
+          .map((viewGroupToSave) => {
+            const existingField = currentViewGroups.find(
+              (currentViewGroup) =>
+                currentViewGroup.fieldValue === viewGroupToSave.fieldValue,
+            );
+
+            if (isUndefinedOrNull(existingField)) {
+              return undefined;
+            }
+
+            if (
+              isDeeplyEqual(
+                {
+                  position: existingField.position,
+                  isVisible: existingField.isVisible,
+                },
+                {
+                  position: viewGroupToSave.position,
+                  isVisible: viewGroupToSave.isVisible,
+                },
+              )
+            ) {
+              return undefined;
+            }
+
+            return { ...viewGroupToSave, id: existingField.id };
+          })
+          .filter(isDefined);
+
+        const viewGroupsToCreate = viewGroupsToSave.filter(
+          (viewFieldToSave) =>
+            !currentViewGroups.some(
+              (currentViewGroup) =>
+                currentViewGroup.fieldValue === viewFieldToSave.fieldValue,
+            ),
+        );
+
+        await Promise.all([
+          createViewGroupRecords(viewGroupsToCreate, view),
+          updateViewGroupRecords(viewGroupsToUpdate),
+        ]);
+      },
+    [
+      createViewGroupRecords,
+      currentViewIdCallbackState,
+      getViewFromCache,
+      updateViewGroupRecords,
+    ],
+  );
+
+  return {
+    saveViewGroups,
+  };
+};