Fix view picker small bugs (#16987)

This PR solves small bugs around the view picker.

- Couldn’t obtain optimistic update after a re-order of a view by drag
and drop, we needed to refresh the page
- Picking a new icon wouldn’t trigger optimistic update (same problem)
- Picking a new icon would change the view (difficult to understand
behavior)
- Picking a new icon would trigger left drawer collapse (z-index
problem)

Since core views are not being handled by object metadata items anymore,
and that all view logic is plugged on coreViewsState, this PR
implemented optimistic effect by upserting into this state.

Fixes https://github.com/twentyhq/twenty/issues/15422
Fixes https://github.com/twentyhq/twenty/issues/16986

# Before


https://github.com/user-attachments/assets/64099c21-df9f-4772-ab0d-9ea449aed761

# After


https://github.com/user-attachments/assets/f4e844b3-6530-4178-abdb-b7a10d2327b8

---------

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

packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleRecordGroupField.ts

@@ -4,7 +4,7 @@ import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataIte
 import { useSetRecordGroups } from '@/object-record/record-group/hooks/useSetRecordGroups';
 import { useLoadRecordIndexStates } from '@/object-record/record-index/hooks/useLoadRecordIndexStates';
 import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
-import { usePersistView } from '@/views/hooks/internal/usePersistView';
+import { usePerformViewAPIUpdate } from '@/views/hooks/internal/usePerformViewAPIUpdate';
 import { useGetViewFromPrefetchState } from '@/views/hooks/useGetViewFromPrefetchState';
 import { useRefreshCoreViewsByObjectMetadataId } from '@/views/hooks/useRefreshCoreViewsByObjectMetadataId';
 import { type ViewGroup } from '@/views/types/ViewGroup';
@@ -26,7 +26,7 @@ export const useHandleRecordGroupField = () => {
 
   const { setRecordGroupsFromViewGroups } = useSetRecordGroups();
 
-  const { updateView } = usePersistView();
+  const { performViewAPIUpdate } = usePerformViewAPIUpdate();
   const { loadRecordIndexStates } = useLoadRecordIndexStates();
   const { refreshCoreViewsByObjectMetadataId } =
     useRefreshCoreViewsByObjectMetadataId();
@@ -55,7 +55,7 @@ export const useHandleRecordGroupField = () => {
           return;
         }
 
-        const updatedViewResult = await updateView({
+        const updatedViewResult = await performViewAPIUpdate({
           id: view.id,
           input: {
             mainGroupByFieldMetadataId: fieldMetadataItem.id,
@@ -133,7 +133,7 @@ export const useHandleRecordGroupField = () => {
     [
       currentViewIdCallbackState,
       getViewFromPrefetchState,
-      updateView,
+      performViewAPIUpdate,
       setRecordGroupsFromViewGroups,
       objectMetadataItem,
       refreshCoreViewsByObjectMetadataId,
@@ -162,14 +162,18 @@ export const useHandleRecordGroupField = () => {
           return;
         }
 
-        await updateView({
+        await performViewAPIUpdate({
           id: view.id,
           input: {
             mainGroupByFieldMetadataId: null,
           },
         });
       },
-    [currentViewIdCallbackState, getViewFromPrefetchState, updateView],
+    [
+      currentViewIdCallbackState,
+      getViewFromPrefetchState,
+      performViewAPIUpdate,
+    ],
   );
 
   return { handleRecordGroupFieldChange, resetRecordGroupField };

packages/twenty-front/src/modules/object-record/record-table/record-table-footer/hooks/useViewFieldAggregateOperation.tsx

@@ -3,7 +3,7 @@ import { RecordTableColumnAggregateFooterDropdownContext } from '@/object-record
 import { viewFieldAggregateOperationState } from '@/object-record/record-table/record-table-footer/states/viewFieldAggregateOperationState';
 import { type ExtendedAggregateOperations } from '@/object-record/record-table/types/ExtendedAggregateOperations';
 import { convertExtendedAggregateOperationToAggregateOperation } from '@/object-record/utils/convertExtendedAggregateOperationToAggregateOperation';
-import { usePersistViewField } from '@/views/hooks/internal/usePersistViewField';
+import { usePerformViewFieldAPIPersist } from '@/views/hooks/internal/usePerformViewFieldAPIPersist';
 import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
 import { useRefreshCoreViewsByObjectMetadataId } from '@/views/hooks/useRefreshCoreViewsByObjectMetadataId';
 import { useContext } from 'react';
@@ -24,14 +24,14 @@ export const useViewFieldAggregateOperation = () => {
     useRefreshCoreViewsByObjectMetadataId();
 
   const { objectMetadataItem } = useRecordIndexContextOrThrow();
-  const { updateViewFields } = usePersistViewField();
+  const { performViewFieldAPIUpdate } = usePerformViewFieldAPIPersist();
   const updateViewFieldAggregateOperation = async (
     aggregateOperation: ExtendedAggregateOperations | null,
   ) => {
     if (!currentViewField) {
       throw new Error('ViewField not found');
     }
-    await updateViewFields([
+    await performViewFieldAPIUpdate([
       {
         input: {
           id: currentViewField.id,