View module refactor with atomic recoil component instance states (#6810)

This PR refactors the view module to implement utils that avoid having to create hooks to inject the scope id in the states, like `useViewStates`, each componentState will know its unique related InstanceContext (which holds the instanceId), and thus will be able to retrieve it itself. We keep the naming componentState as it reflects the fact that those states are tied to instances of a component (or its children). We introduce the instance word where it is needed, in place of scopeId for example, to precise the fact that we handle instances of component state, one for each instance of a component. For example, the currentViewId is a state that is tied to an instance of the ViewBar, but as we can switch between views, we want currentViewId to be a componentState tied to an instance of the ViewBar component. This PR also refactors view filter and sort states to fix this issue : https://github.com/twentyhq/twenty/issues/6837 and other problems involving resetting those states between page navigation. Fixes https://github.com/twentyhq/twenty/issues/6837 --------- Co-authored-by: Charles Bochet <charles@twenty.com>
2024-09-20 16:13:29 +02:00
parent bebeb1515b
commit 25522752e4
177 changed files with 3132 additions and 1745 deletions
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateOrEditContent.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateOrEditContent.tsx
@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
-import { IconChevronLeft, IconLayoutKanban, IconTable, IconX } from 'twenty-ui';
+import { IconLayoutKanban, IconTable, IconX } from 'twenty-ui';

 import { IconPicker } from '@/ui/input/components/IconPicker';
 import { Select } from '@/ui/input/components/Select';
@ -11,30 +10,26 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { ViewsHotkeyScope } from '@/views/types/ViewsHotkeyScope';
 import { ViewType } from '@/views/types/ViewType';
-import { ViewPickerCreateOrEditButton } from '@/views/view-picker/components/ViewPickerCreateOrEditButton';
+import { ViewPickerCreateButton } from '@/views/view-picker/components/ViewPickerCreateButton';
+import { ViewPickerIconAndNameContainer } from '@/views/view-picker/components/ViewPickerIconAndNameContainer';
+import { ViewPickerSaveButtonContainer } from '@/views/view-picker/components/ViewPickerSaveButtonContainer';
+import { ViewPickerSelectContainer } from '@/views/view-picker/components/ViewPickerSelectContainer';
 import { VIEW_PICKER_KANBAN_FIELD_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerKanbanFieldDropdownId';
 import { VIEW_PICKER_VIEW_TYPE_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerViewTypeDropdownId';
+import { useCreateViewFromCurrentState } from '@/views/view-picker/hooks/useCreateViewFromCurrentState';
 import { useGetAvailableFieldsForKanban } from '@/views/view-picker/hooks/useGetAvailableFieldsForKanban';
 import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
-import { useViewPickerPersistView } from '@/views/view-picker/hooks/useViewPickerPersistView';
-import { useViewPickerStates } from '@/views/view-picker/hooks/useViewPickerStates';
-
-const StyledIconAndNameContainer = styled.div`
-  align-items: center;
-  display: flex;
-  margin-left: ${({ theme }) => theme.spacing(1)};
-  gap: ${({ theme }) => theme.spacing(1)};
-`;
-
-const StyledSelectContainer = styled.div`
-  display: flex;
-  width: calc(100% - ${({ theme }) => theme.spacing(2)});
-  margin: ${({ theme }) => theme.spacing(1)};
-  color: ${({ theme }) => theme.font.color.light};
-  user-select: none;
-`;
+import { viewPickerInputNameComponentState } from '@/views/view-picker/states/viewPickerInputNameComponentState';
+import { viewPickerIsDirtyComponentState } from '@/views/view-picker/states/viewPickerIsDirtyComponentState';
+import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState';
+import { viewPickerKanbanFieldMetadataIdComponentState } from '@/views/view-picker/states/viewPickerKanbanFieldMetadataIdComponentState';
+import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states/viewPickerSelectedIconComponentState';
+import { viewPickerTypeComponentState } from '@/views/view-picker/states/viewPickerTypeComponentState';

 const StyledNoKanbanFieldAvailableContainer = styled.div`
  color: ${({ theme }) => theme.font.color.light};
@ -44,40 +39,32 @@ const StyledNoKanbanFieldAvailableContainer = styled.div`
  width: calc(100% - ${({ theme }) => theme.spacing(4)});
 `;

-const StyledSaveButtonContainer = styled.div`
-  display: flex;
-  padding: ${({ theme }) => theme.spacing(1)};
-  width: calc(100% - ${({ theme }) => theme.spacing(2)});
-`;
-export const ViewPickerCreateOrEditContent = () => {
-  const { viewPickerMode, setViewPickerMode } = useViewPickerMode();
-  const {
-    viewPickerInputNameState,
-    viewPickerSelectedIconState,
-    viewPickerIsPersistingState,
-    viewPickerKanbanFieldMetadataIdState,
-    viewPickerTypeState,
-    viewPickerIsDirtyState,
-  } = useViewPickerStates();
+export const ViewPickerContentCreateMode = () => {
+  const { setViewPickerMode } = useViewPickerMode();

-  const [viewPickerInputName, setViewPickerInputName] = useRecoilState(
-    viewPickerInputNameState,
+  const [viewPickerInputName, setViewPickerInputName] =
+    useRecoilComponentStateV2(viewPickerInputNameComponentState);
+
+  const [viewPickerSelectedIcon, setViewPickerSelectedIcon] =
+    useRecoilComponentStateV2(viewPickerSelectedIconComponentState);
+
+  const viewPickerIsPersisting = useRecoilComponentValueV2(
+    viewPickerIsPersistingComponentState,
  );
-  const [viewPickerSelectedIcon, setViewPickerSelectedIcon] = useRecoilState(
-    viewPickerSelectedIconState,
+  const setViewPickerIsDirty = useSetRecoilComponentStateV2(
+    viewPickerIsDirtyComponentState,
  );
-  const viewPickerIsPersisting = useRecoilValue(viewPickerIsPersistingState);
-  const setViewPickerIsDirty = useSetRecoilState(viewPickerIsDirtyState);

  const [viewPickerKanbanFieldMetadataId, setViewPickerKanbanFieldMetadataId] =
-    useRecoilState(viewPickerKanbanFieldMetadataIdState);
+    useRecoilComponentStateV2(viewPickerKanbanFieldMetadataIdComponentState);

-  const [viewPickerType, setViewPickerType] =
-    useRecoilState(viewPickerTypeState);
+  const [viewPickerType, setViewPickerType] = useRecoilComponentStateV2(
+    viewPickerTypeComponentState,
+  );

  const setHotkeyScope = useSetHotkeyScope();

-  const { handleCreate, handleUpdate } = useViewPickerPersistView();
+  const { createViewFromCurrentState } = useCreateViewFromCurrentState();

  const { availableFieldsForKanban } = useGetAvailableFieldsForKanban();

@ -87,18 +74,15 @@ export const ViewPickerCreateOrEditContent = () => {
      if (viewPickerIsPersisting) {
        return;
      }
-      if (viewPickerMode === 'create') {
-        if (
-          viewPickerType === ViewType.Kanban &&
-          availableFieldsForKanban.length === 0
-        ) {
-          return;
-        }
-        await handleCreate();
-      }
-      if (viewPickerMode === 'edit') {
-        await handleUpdate();
+
+      if (
+        viewPickerType === ViewType.Kanban &&
+        availableFieldsForKanban.length === 0
+      ) {
+        return;
      }
+
+      await createViewFromCurrentState();
    },
    ViewsHotkeyScope.ListDropdown,
  );
@ -109,23 +93,17 @@ export const ViewPickerCreateOrEditContent = () => {
  };

  const handleClose = async () => {
-    if (viewPickerMode === 'edit') {
-      await handleUpdate();
-    }
    setViewPickerMode('list');
  };

  return (
    <>
-      <DropdownMenuHeader
-        StartIcon={viewPickerMode === 'create' ? IconX : IconChevronLeft}
-        onClick={handleClose}
-      >
-        {viewPickerMode === 'create' ? 'Create view' : 'Edit view'}
+      <DropdownMenuHeader StartIcon={IconX} onClick={handleClose}>
+        Create view
      </DropdownMenuHeader>
      <DropdownMenuSeparator />
      <DropdownMenuItemsContainer>
-        <StyledIconAndNameContainer>
+        <ViewPickerIconAndNameContainer>
          <IconPicker
            onChange={onIconChange}
            selectedIconKey={viewPickerSelectedIcon}
@ -140,33 +118,31 @@ export const ViewPickerCreateOrEditContent = () => {
            }}
            autoFocus
          />
-        </StyledIconAndNameContainer>
-        {viewPickerMode === 'create' && (
-          <StyledSelectContainer>
-            <Select
-              disableBlur
-              label="View type"
-              fullWidth
-              value={viewPickerType}
-              onChange={(value) => {
-                setViewPickerIsDirty(true);
-                setViewPickerType(value);
-              }}
-              options={[
-                { value: ViewType.Table, label: 'Table', Icon: IconTable },
-                {
-                  value: ViewType.Kanban,
-                  label: 'Kanban',
-                  Icon: IconLayoutKanban,
-                },
-              ]}
-              dropdownId={VIEW_PICKER_VIEW_TYPE_DROPDOWN_ID}
-            />
-          </StyledSelectContainer>
-        )}
-        {viewPickerType === ViewType.Kanban && viewPickerMode === 'create' && (
+        </ViewPickerIconAndNameContainer>
+        <ViewPickerSelectContainer>
+          <Select
+            disableBlur
+            label="View type"
+            fullWidth
+            value={viewPickerType}
+            onChange={(value) => {
+              setViewPickerIsDirty(true);
+              setViewPickerType(value);
+            }}
+            options={[
+              { value: ViewType.Table, label: 'Table', Icon: IconTable },
+              {
+                value: ViewType.Kanban,
+                label: 'Kanban',
+                Icon: IconLayoutKanban,
+              },
+            ]}
+            dropdownId={VIEW_PICKER_VIEW_TYPE_DROPDOWN_ID}
+          />
+        </ViewPickerSelectContainer>
+        {viewPickerType === ViewType.Kanban && (
          <>
-            <StyledSelectContainer>
+            <ViewPickerSelectContainer>
              <Select
                disableBlur
                label="Stages"
@ -186,7 +162,7 @@ export const ViewPickerCreateOrEditContent = () => {
                }
                dropdownId={VIEW_PICKER_KANBAN_FIELD_DROPDOWN_ID}
              />
-            </StyledSelectContainer>
+            </ViewPickerSelectContainer>
            {availableFieldsForKanban.length === 0 && (
              <StyledNoKanbanFieldAvailableContainer>
                Set up a Select field on Companies to create a Kanban
@ -197,9 +173,9 @@ export const ViewPickerCreateOrEditContent = () => {
      </DropdownMenuItemsContainer>
      <DropdownMenuSeparator />
      <DropdownMenuItemsContainer>
-        <StyledSaveButtonContainer>
-          <ViewPickerCreateOrEditButton />
-        </StyledSaveButtonContainer>
+        <ViewPickerSaveButtonContainer>
+          <ViewPickerCreateButton />
+        </ViewPickerSaveButtonContainer>
      </DropdownMenuItemsContainer>
    </>
  );
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEditMode.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEditMode.tsx
@ -0,0 +1,100 @@
+import { Key } from 'ts-key-enum';
+import { IconChevronLeft } from 'twenty-ui';
+
+import { IconPicker } from '@/ui/input/components/IconPicker';
+import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
+import { DropdownMenuInput } from '@/ui/layout/dropdown/components/DropdownMenuInput';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { ViewsHotkeyScope } from '@/views/types/ViewsHotkeyScope';
+import { ViewPickerEditButton } from '@/views/view-picker/components/ViewPickerEditButton';
+import { ViewPickerIconAndNameContainer } from '@/views/view-picker/components/ViewPickerIconAndNameContainer';
+import { ViewPickerSaveButtonContainer } from '@/views/view-picker/components/ViewPickerSaveButtonContainer';
+import { useUpdateViewFromCurrentState } from '@/views/view-picker/hooks/useUpdateViewFromCurrentState';
+import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
+import { viewPickerInputNameComponentState } from '@/views/view-picker/states/viewPickerInputNameComponentState';
+import { viewPickerIsDirtyComponentState } from '@/views/view-picker/states/viewPickerIsDirtyComponentState';
+import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState';
+import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states/viewPickerSelectedIconComponentState';
+
+export const ViewPickerContentEditMode = () => {
+  const { setViewPickerMode } = useViewPickerMode();
+
+  const [viewPickerInputName, setViewPickerInputName] =
+    useRecoilComponentStateV2(viewPickerInputNameComponentState);
+
+  const [viewPickerSelectedIcon, setViewPickerSelectedIcon] =
+    useRecoilComponentStateV2(viewPickerSelectedIconComponentState);
+
+  const viewPickerIsPersisting = useRecoilComponentValueV2(
+    viewPickerIsPersistingComponentState,
+  );
+  const setViewPickerIsDirty = useSetRecoilComponentStateV2(
+    viewPickerIsDirtyComponentState,
+  );
+
+  const setHotkeyScope = useSetHotkeyScope();
+
+  const { updateViewFromCurrentState } = useUpdateViewFromCurrentState();
+
+  useScopedHotkeys(
+    Key.Enter,
+    async () => {
+      if (viewPickerIsPersisting) {
+        return;
+      }
+
+      await updateViewFromCurrentState();
+    },
+    ViewsHotkeyScope.ListDropdown,
+  );
+
+  const onIconChange = ({ iconKey }: { iconKey: string }) => {
+    setViewPickerIsDirty(true);
+    setViewPickerSelectedIcon(iconKey);
+  };
+
+  const handleClose = async () => {
+    await updateViewFromCurrentState();
+
+    setViewPickerMode('list');
+  };
+
+  return (
+    <>
+      <DropdownMenuHeader StartIcon={IconChevronLeft} onClick={handleClose}>
+        Edit view
+      </DropdownMenuHeader>
+      <DropdownMenuSeparator />
+      <DropdownMenuItemsContainer>
+        <ViewPickerIconAndNameContainer>
+          <IconPicker
+            onChange={onIconChange}
+            selectedIconKey={viewPickerSelectedIcon}
+            disableBlur
+            onClose={() => setHotkeyScope(ViewsHotkeyScope.ListDropdown)}
+          />
+          <DropdownMenuInput
+            value={viewPickerInputName}
+            onChange={(event) => {
+              setViewPickerIsDirty(true);
+              setViewPickerInputName(event.target.value);
+            }}
+            autoFocus
+          />
+        </ViewPickerIconAndNameContainer>
+      </DropdownMenuItemsContainer>
+      <DropdownMenuSeparator />
+      <DropdownMenuItemsContainer>
+        <ViewPickerSaveButtonContainer>
+          <ViewPickerEditButton />
+        </ViewPickerSaveButtonContainer>
+      </DropdownMenuItemsContainer>
+    </>
+  );
+};
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEffect.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEffect.tsx
@ -0,0 +1,90 @@
+import { useEffect } from 'react';
+
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
+import { useGetAvailableFieldsForKanban } from '@/views/view-picker/hooks/useGetAvailableFieldsForKanban';
+import { viewPickerInputNameComponentState } from '@/views/view-picker/states/viewPickerInputNameComponentState';
+import { viewPickerIsDirtyComponentState } from '@/views/view-picker/states/viewPickerIsDirtyComponentState';
+import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState';
+import { viewPickerKanbanFieldMetadataIdComponentState } from '@/views/view-picker/states/viewPickerKanbanFieldMetadataIdComponentState';
+import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/states/viewPickerReferenceViewIdComponentState';
+import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states/viewPickerSelectedIconComponentState';
+import { viewPickerTypeComponentState } from '@/views/view-picker/states/viewPickerTypeComponentState';
+import { isDefined } from '~/utils/isDefined';
+
+export const ViewPickerContentEffect = () => {
+  const setViewPickerSelectedIcon = useSetRecoilComponentStateV2(
+    viewPickerSelectedIconComponentState,
+  );
+  const setViewPickerInputName = useSetRecoilComponentStateV2(
+    viewPickerInputNameComponentState,
+  );
+
+  const [viewPickerKanbanFieldMetadataId, setViewPickerKanbanFieldMetadataId] =
+    useRecoilComponentStateV2(viewPickerKanbanFieldMetadataIdComponentState);
+
+  const setViewPickerType = useSetRecoilComponentStateV2(
+    viewPickerTypeComponentState,
+  );
+
+  const viewPickerReferenceViewId = useRecoilComponentValueV2(
+    viewPickerReferenceViewIdComponentState,
+  );
+
+  const viewPickerIsDirty = useRecoilComponentValueV2(
+    viewPickerIsDirtyComponentState,
+  );
+
+  const viewPickerIsPersisting = useRecoilComponentValueV2(
+    viewPickerIsPersistingComponentState,
+  );
+
+  const { viewsOnCurrentObject } = useGetCurrentView();
+  const referenceView = viewsOnCurrentObject.find(
+    (view) => view.id === viewPickerReferenceViewId,
+  );
+
+  const { availableFieldsForKanban } = useGetAvailableFieldsForKanban();
+
+  useEffect(() => {
+    if (
+      isDefined(referenceView) &&
+      !viewPickerIsPersisting &&
+      !viewPickerIsDirty
+    ) {
+      setViewPickerSelectedIcon(referenceView.icon);
+      setViewPickerInputName(referenceView.name);
+      setViewPickerType(referenceView.type);
+    }
+  }, [
+    referenceView,
+    setViewPickerInputName,
+    setViewPickerSelectedIcon,
+    setViewPickerType,
+    viewPickerIsPersisting,
+    viewPickerIsDirty,
+  ]);
+
+  useEffect(() => {
+    if (
+      isDefined(referenceView) &&
+      availableFieldsForKanban.length > 0 &&
+      viewPickerKanbanFieldMetadataId === ''
+    ) {
+      setViewPickerKanbanFieldMetadataId(
+        referenceView.kanbanFieldMetadataId !== ''
+          ? referenceView.kanbanFieldMetadataId
+          : availableFieldsForKanban[0].id,
+      );
+    }
+  }, [
+    referenceView,
+    availableFieldsForKanban,
+    viewPickerKanbanFieldMetadataId,
+    setViewPickerKanbanFieldMetadataId,
+  ]);
+
+  return <></>;
+};
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateButton.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateButton.tsx
@ -0,0 +1,86 @@
+import { Button } from '@/ui/input/button/components/Button';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { ViewType } from '@/views/types/ViewType';
+import { useCreateViewFromCurrentState } from '@/views/view-picker/hooks/useCreateViewFromCurrentState';
+import { useDeleteViewFromCurrentState } from '@/views/view-picker/hooks/useDeleteViewFromCurrentState';
+import { useGetAvailableFieldsForKanban } from '@/views/view-picker/hooks/useGetAvailableFieldsForKanban';
+import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
+import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState';
+import { viewPickerKanbanFieldMetadataIdComponentState } from '@/views/view-picker/states/viewPickerKanbanFieldMetadataIdComponentState';
+import { viewPickerTypeComponentState } from '@/views/view-picker/states/viewPickerTypeComponentState';
+
+export const ViewPickerCreateButton = () => {
+  const { availableFieldsForKanban, navigateToSelectSettings } =
+    useGetAvailableFieldsForKanban();
+
+  const { viewPickerMode } = useViewPickerMode();
+  const viewPickerType = useRecoilComponentValueV2(
+    viewPickerTypeComponentState,
+  );
+  const viewPickerIsPersisting = useRecoilComponentValueV2(
+    viewPickerIsPersistingComponentState,
+  );
+  const viewPickerKanbanFieldMetadataId = useRecoilComponentValueV2(
+    viewPickerKanbanFieldMetadataIdComponentState,
+  );
+
+  const { createViewFromCurrentState } = useCreateViewFromCurrentState();
+  const { deleteViewFromCurrentState } = useDeleteViewFromCurrentState();
+
+  const handleCreateButtonClick = () => {
+    createViewFromCurrentState();
+  };
+
+  if (viewPickerMode === 'edit') {
+    return (
+      <Button
+        title="Delete"
+        onClick={deleteViewFromCurrentState}
+        accent="danger"
+        fullWidth
+        size="small"
+        justify="center"
+        focus={false}
+        variant="secondary"
+        disabled={viewPickerIsPersisting}
+      />
+    );
+  }
+
+  if (
+    viewPickerType === ViewType.Kanban &&
+    availableFieldsForKanban.length === 0
+  ) {
+    return (
+      <Button
+        title="Go to Settings"
+        onClick={navigateToSelectSettings}
+        size="small"
+        accent="blue"
+        fullWidth
+        justify="center"
+      />
+    );
+  }
+
+  if (
+    viewPickerType === ViewType.Table ||
+    viewPickerKanbanFieldMetadataId !== ''
+  ) {
+    return (
+      <Button
+        title="Create"
+        onClick={handleCreateButtonClick}
+        accent="blue"
+        fullWidth
+        size="small"
+        justify="center"
+        disabled={
+          viewPickerIsPersisting ||
+          (viewPickerType === ViewType.Kanban &&
+            viewPickerKanbanFieldMetadataId === '')
+        }
+      />
+    );
+  }
+};
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateOrEditContentEffect.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateOrEditContentEffect.tsx
@ -1,83 +0,0 @@
-import { useEffect } from 'react';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-
-import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
-import { useGetAvailableFieldsForKanban } from '@/views/view-picker/hooks/useGetAvailableFieldsForKanban';
-import { useViewPickerStates } from '@/views/view-picker/hooks/useViewPickerStates';
-import { isDefined } from '~/utils/isDefined';
-
-export const ViewPickerCreateOrEditContentEffect = () => {
-  const {
-    viewPickerSelectedIconState,
-    viewPickerInputNameState,
-    viewPickerReferenceViewIdState,
-    viewPickerIsPersistingState,
-    viewPickerKanbanFieldMetadataIdState,
-    viewPickerTypeState,
-    viewPickerIsDirtyState,
-  } = useViewPickerStates();
-
-  const setViewPickerSelectedIcon = useSetRecoilState(
-    viewPickerSelectedIconState,
-  );
-  const setViewPickerInputName = useSetRecoilState(viewPickerInputNameState);
-
-  const [viewPickerKanbanFieldMetadataId, setViewPickerKanbanFieldMetadataId] =
-    useRecoilState(viewPickerKanbanFieldMetadataIdState);
-  const setViewPickerType = useSetRecoilState(viewPickerTypeState);
-
-  const viewPickerReferenceViewId = useRecoilValue(
-    viewPickerReferenceViewIdState,
-  );
-
-  const viewPickerIsDirty = useRecoilValue(viewPickerIsDirtyState);
-
-  const viewPickerIsPersisting = useRecoilValue(viewPickerIsPersistingState);
-
-  const { viewsOnCurrentObject } = useGetCurrentView();
-  const referenceView = viewsOnCurrentObject.find(
-    (view) => view.id === viewPickerReferenceViewId,
-  );
-
-  const { availableFieldsForKanban } = useGetAvailableFieldsForKanban();
-
-  useEffect(() => {
-    if (
-      isDefined(referenceView) &&
-      !viewPickerIsPersisting &&
-      !viewPickerIsDirty
-    ) {
-      setViewPickerSelectedIcon(referenceView.icon);
-      setViewPickerInputName(referenceView.name);
-      setViewPickerType(referenceView.type);
-    }
-  }, [
-    referenceView,
-    setViewPickerInputName,
-    setViewPickerSelectedIcon,
-    setViewPickerType,
-    viewPickerIsPersisting,
-    viewPickerIsDirty,
-  ]);
-
-  useEffect(() => {
-    if (
-      isDefined(referenceView) &&
-      availableFieldsForKanban.length > 0 &&
-      viewPickerKanbanFieldMetadataId === ''
-    ) {
-      setViewPickerKanbanFieldMetadataId(
-        referenceView.kanbanFieldMetadataId !== ''
-          ? referenceView.kanbanFieldMetadataId
-          : availableFieldsForKanban[0].id,
-      );
-    }
-  }, [
-    referenceView,
-    availableFieldsForKanban,
-    viewPickerKanbanFieldMetadataId,
-    setViewPickerKanbanFieldMetadataId,
-  ]);
-
-  return <></>;
-};
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
@ -1,6 +1,5 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
 import {
  IconChevronDown,
  IconList,
@ -11,18 +10,19 @@ import {
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
+import { entityCountInCurrentViewComponentState } from '@/views/states/entityCountInCurrentViewComponentState';
 import { ViewsHotkeyScope } from '@/views/types/ViewsHotkeyScope';
-import { ViewPickerCreateOrEditContent } from '@/views/view-picker/components/ViewPickerCreateOrEditContent';
-import { ViewPickerCreateOrEditContentEffect } from '@/views/view-picker/components/ViewPickerCreateOrEditContentEffect';
+import { ViewPickerContentCreateMode } from '@/views/view-picker/components/ViewPickerContentCreateMode';
+import { ViewPickerContentEditMode } from '@/views/view-picker/components/ViewPickerContentEditMode';
+import { ViewPickerContentEffect } from '@/views/view-picker/components/ViewPickerContentEffect';
 import { ViewPickerListContent } from '@/views/view-picker/components/ViewPickerListContent';
 import { VIEW_PICKER_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerDropdownId';
+import { useUpdateViewFromCurrentState } from '@/views/view-picker/hooks/useUpdateViewFromCurrentState';
 import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
-import { useViewPickerPersistView } from '@/views/view-picker/hooks/useViewPickerPersistView';
 import { isDefined } from '~/utils/isDefined';

-import { useViewStates } from '../../hooks/internal/useViewStates';
-
 const StyledDropdownLabelAdornments = styled.span`
  align-items: center;
  color: ${({ theme }) => theme.grayScale.gray35};
@ -50,14 +50,12 @@ const StyledViewName = styled.span`
 export const ViewPickerDropdown = () => {
  const theme = useTheme();

-  const { entityCountInCurrentViewState } = useViewStates();
-
  const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();

-  const { handleUpdate } = useViewPickerPersistView();
+  const { updateViewFromCurrentState } = useUpdateViewFromCurrentState();

-  const entityCountInCurrentView = useRecoilValue(
-    entityCountInCurrentViewState,
+  const entityCountInCurrentView = useRecoilComponentValueV2(
+    entityCountInCurrentViewComponentState,
  );

  const { isDropdownOpen: isViewsListDropdownOpen } = useDropdown(
@ -71,7 +69,7 @@ export const ViewPickerDropdown = () => {

  const handleClickOutside = async () => {
    if (isViewsListDropdownOpen && viewPickerMode === 'edit') {
-      await handleUpdate();
+      await updateViewFromCurrentState();
    }
    setViewPickerMode('list');
  };
@ -106,8 +104,13 @@ export const ViewPickerDropdown = () => {
          <ViewPickerListContent />
        ) : (
          <>
-            <ViewPickerCreateOrEditContent />
-            <ViewPickerCreateOrEditContentEffect />
+            {viewPickerMode === 'create-empty' ||
+            viewPickerMode === 'create-from-current' ? (
+              <ViewPickerContentCreateMode />
+            ) : (
+              <ViewPickerContentEditMode />
+            )}
+            <ViewPickerContentEffect />
          </>
        )
      }
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateOrEditButton.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateOrEditButton.tsx
@ -1,36 +1,37 @@
-import { useRecoilValue } from 'recoil';
-
 import { Button } from '@/ui/input/button/components/Button';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ViewType } from '@/views/types/ViewType';
+import { useCreateViewFromCurrentState } from '@/views/view-picker/hooks/useCreateViewFromCurrentState';
+import { useDeleteViewFromCurrentState } from '@/views/view-picker/hooks/useDeleteViewFromCurrentState';
 import { useGetAvailableFieldsForKanban } from '@/views/view-picker/hooks/useGetAvailableFieldsForKanban';
 import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
-import { useViewPickerPersistView } from '@/views/view-picker/hooks/useViewPickerPersistView';
-import { useViewPickerStates } from '@/views/view-picker/hooks/useViewPickerStates';
+import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState';
+import { viewPickerKanbanFieldMetadataIdComponentState } from '@/views/view-picker/states/viewPickerKanbanFieldMetadataIdComponentState';
+import { viewPickerTypeComponentState } from '@/views/view-picker/states/viewPickerTypeComponentState';

-export const ViewPickerCreateOrEditButton = () => {
+export const ViewPickerEditButton = () => {
  const { availableFieldsForKanban, navigateToSelectSettings } =
    useGetAvailableFieldsForKanban();

-  const {
-    viewPickerIsPersistingState,
-    viewPickerKanbanFieldMetadataIdState,
-    viewPickerTypeState,
-  } = useViewPickerStates();
-
  const { viewPickerMode } = useViewPickerMode();
-  const viewPickerType = useRecoilValue(viewPickerTypeState);
-  const viewPickerIsPersisting = useRecoilValue(viewPickerIsPersistingState);
-  const viewPickerKanbanFieldMetadataId = useRecoilValue(
-    viewPickerKanbanFieldMetadataIdState,
+  const viewPickerType = useRecoilComponentValueV2(
+    viewPickerTypeComponentState,
+  );
+  const viewPickerIsPersisting = useRecoilComponentValueV2(
+    viewPickerIsPersistingComponentState,
+  );
+  const viewPickerKanbanFieldMetadataId = useRecoilComponentValueV2(
+    viewPickerKanbanFieldMetadataIdComponentState,
  );

-  const { handleCreate, handleDelete } = useViewPickerPersistView();
+  const { createViewFromCurrentState } = useCreateViewFromCurrentState();
+  const { deleteViewFromCurrentState } = useDeleteViewFromCurrentState();

  if (viewPickerMode === 'edit') {
    return (
      <Button
        title="Delete"
-        onClick={handleDelete}
+        onClick={deleteViewFromCurrentState}
        accent="danger"
        fullWidth
        size="small"
@ -65,7 +66,7 @@ export const ViewPickerCreateOrEditButton = () => {
    return (
      <Button
        title="Create"
-        onClick={handleCreate}
+        onClick={createViewFromCurrentState}
        accent="blue"
        fullWidth
        size="small"
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerIconAndNameContainer.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerIconAndNameContainer.tsx
@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+const StyledIconAndNameContainer = styled.div`
+  align-items: center;
+  display: flex;
+  margin-left: ${({ theme }) => theme.spacing(1)};
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export { StyledIconAndNameContainer as ViewPickerIconAndNameContainer };
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import { DropResult } from '@hello-pangea/dnd';
 import { MouseEvent, useCallback } from 'react';
-import { useSetRecoilState } from 'recoil';
 import { IconLock, IconPencil, IconPlus, useIcons } from 'twenty-ui';

 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
@ -11,11 +10,13 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { useChangeView } from '@/views/hooks/useChangeView';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
-import { useHandleViews } from '@/views/hooks/useHandleViews';
+import { useUpdateView } from '@/views/hooks/useUpdateView';
 import { VIEW_PICKER_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerDropdownId';
 import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
-import { useViewPickerStates } from '@/views/view-picker/hooks/useViewPickerStates';
+import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/states/viewPickerReferenceViewIdComponentState';
 import { moveArrayItem } from '~/utils/array/moveArrayItem';
 import { isDefined } from '~/utils/isDefined';

@ -24,29 +25,27 @@ const StyledBoldDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)`
 `;

 export const ViewPickerListContent = () => {
-  const { selectView } = useHandleViews();
-
  const { currentViewWithCombinedFiltersAndSorts, viewsOnCurrentObject } =
    useGetCurrentView();
-  const { viewPickerReferenceViewIdState } = useViewPickerStates();
-  const setViewPickerReferenceViewId = useSetRecoilState(
-    viewPickerReferenceViewIdState,
+  const setViewPickerReferenceViewId = useSetRecoilComponentStateV2(
+    viewPickerReferenceViewIdComponentState,
  );

  const { setViewPickerMode } = useViewPickerMode();

  const { closeDropdown } = useDropdown(VIEW_PICKER_DROPDOWN_ID);
-  const { updateView } = useHandleViews();
+  const { updateView } = useUpdateView();
+  const { changeView } = useChangeView();

  const handleViewSelect = (viewId: string) => {
-    selectView(viewId);
+    changeView(viewId);
    closeDropdown();
  };

  const handleAddViewButtonClick = () => {
    if (isDefined(currentViewWithCombinedFiltersAndSorts?.id)) {
      setViewPickerReferenceViewId(currentViewWithCombinedFiltersAndSorts.id);
-      setViewPickerMode('create');
+      setViewPickerMode('create-empty');
    }
  };

--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerSaveButtonContainer.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerSaveButtonContainer.tsx
@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+const StyledSaveButtonContainer = styled.div`
+  display: flex;
+  padding: ${({ theme }) => theme.spacing(1)};
+  width: calc(100% - ${({ theme }) => theme.spacing(2)});
+`;
+
+export { StyledSaveButtonContainer as ViewPickerSaveButtonContainer };
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerSelectContainer.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerSelectContainer.tsx
@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+const StyledSelectContainer = styled.div`
+  display: flex;
+  width: calc(100% - ${({ theme }) => theme.spacing(2)});
+  margin: ${({ theme }) => theme.spacing(1)};
+  color: ${({ theme }) => theme.font.color.light};
+  user-select: none;
+`;
+
+export { StyledSelectContainer as ViewPickerSelectContainer };
--- a/packages/twenty-front/src/modules/views/view-picker/hooks/useCloseAndResetViewPicker.ts
+++ b/packages/twenty-front/src/modules/views/view-picker/hooks/useCloseAndResetViewPicker.ts
@ -1,19 +1,18 @@
 import { useCallback } from 'react';
-import { useSetRecoilState } from 'recoil';

 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { VIEW_PICKER_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerDropdownId';
 import { VIEW_PICKER_KANBAN_FIELD_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerKanbanFieldDropdownId';
 import { VIEW_PICKER_VIEW_TYPE_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerViewTypeDropdownId';
 import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
-import { useViewPickerStates } from '@/views/view-picker/hooks/useViewPickerStates';
+import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState';

 export const useCloseAndResetViewPicker = () => {
  const { setViewPickerMode } = useViewPickerMode();
-  const { viewPickerIsPersistingState } = useViewPickerStates();

-  const setViewPickerIsPersisting = useSetRecoilState(
-    viewPickerIsPersistingState,
+  const setViewPickerIsPersisting = useSetRecoilComponentStateV2(
+    viewPickerIsPersistingComponentState,
  );

  const { closeDropdown: closeViewPickerDropdown } = useDropdown(
--- a/packages/twenty-front/src/modules/views/view-picker/hooks/useCreateViewFromCurrentState.ts
+++ b/packages/twenty-front/src/modules/views/view-picker/hooks/useCreateViewFromCurrentState.ts
@ -0,0 +1,118 @@
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
+import { useChangeView } from '@/views/hooks/useChangeView';
+import { useCreateViewFromCurrentView } from '@/views/hooks/useCreateViewFromCurrentView';
+import { useCloseAndResetViewPicker } from '@/views/view-picker/hooks/useCloseAndResetViewPicker';
+import { viewPickerInputNameComponentState } from '@/views/view-picker/states/viewPickerInputNameComponentState';
+import { viewPickerIsDirtyComponentState } from '@/views/view-picker/states/viewPickerIsDirtyComponentState';
+import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState';
+import { viewPickerKanbanFieldMetadataIdComponentState } from '@/views/view-picker/states/viewPickerKanbanFieldMetadataIdComponentState';
+import { viewPickerModeComponentState } from '@/views/view-picker/states/viewPickerModeComponentState';
+import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states/viewPickerSelectedIconComponentState';
+import { viewPickerTypeComponentState } from '@/views/view-picker/states/viewPickerTypeComponentState';
+import { useRecoilCallback } from 'recoil';
+import { v4 } from 'uuid';
+
+export const useCreateViewFromCurrentState = (viewBarInstanceId?: string) => {
+  const { closeAndResetViewPicker } = useCloseAndResetViewPicker();
+
+  const viewPickerInputNameCallbackState = useRecoilComponentCallbackStateV2(
+    viewPickerInputNameComponentState,
+    viewBarInstanceId,
+  );
+
+  const viewPickerSelectedIconCallbackState = useRecoilComponentCallbackStateV2(
+    viewPickerSelectedIconComponentState,
+    viewBarInstanceId,
+  );
+
+  const viewPickerTypeCallbackState = useRecoilComponentCallbackStateV2(
+    viewPickerTypeComponentState,
+    viewBarInstanceId,
+  );
+
+  const viewPickerKanbanFieldMetadataIdCallbackState =
+    useRecoilComponentCallbackStateV2(
+      viewPickerKanbanFieldMetadataIdComponentState,
+      viewBarInstanceId,
+    );
+
+  const viewPickerIsPersistingCallbackState = useRecoilComponentCallbackStateV2(
+    viewPickerIsPersistingComponentState,
+    viewBarInstanceId,
+  );
+
+  const viewPickerIsDirtyCallbackState = useRecoilComponentCallbackStateV2(
+    viewPickerIsDirtyComponentState,
+    viewBarInstanceId,
+  );
+
+  const viewPickerModeCallbackState = useRecoilComponentCallbackStateV2(
+    viewPickerModeComponentState,
+    viewBarInstanceId,
+  );
+
+  const { createViewFromCurrentView } =
+    useCreateViewFromCurrentView(viewBarInstanceId);
+  const { changeView } = useChangeView(viewBarInstanceId);
+
+  const createViewFromCurrentState = useRecoilCallback(
+    ({ snapshot, set }) =>
+      async () => {
+        const name = getSnapshotValue(
+          snapshot,
+          viewPickerInputNameCallbackState,
+        );
+        const iconKey = getSnapshotValue(
+          snapshot,
+          viewPickerSelectedIconCallbackState,
+        );
+        const type = getSnapshotValue(snapshot, viewPickerTypeCallbackState);
+        const kanbanFieldMetadataId = getSnapshotValue(
+          snapshot,
+          viewPickerKanbanFieldMetadataIdCallbackState,
+        );
+
+        const viewPickerMode = getSnapshotValue(
+          snapshot,
+          viewPickerModeCallbackState,
+        );
+
+        const shouldCopyFiltersAndSorts =
+          viewPickerMode === 'create-from-current';
+
+        const id = v4();
+
+        set(viewPickerIsPersistingCallbackState, true);
+        set(viewPickerIsDirtyCallbackState, false);
+
+        await createViewFromCurrentView(
+          {
+            id,
+            name,
+            icon: iconKey,
+            type,
+            kanbanFieldMetadataId,
+          },
+          shouldCopyFiltersAndSorts,
+        );
+
+        closeAndResetViewPicker();
+        changeView(id);
+      },
+    [
+      closeAndResetViewPicker,
+      createViewFromCurrentView,
+      changeView,
+      viewPickerInputNameCallbackState,
+      viewPickerIsDirtyCallbackState,
+      viewPickerIsPersistingCallbackState,
+      viewPickerKanbanFieldMetadataIdCallbackState,
+      viewPickerSelectedIconCallbackState,
+      viewPickerTypeCallbackState,
+      viewPickerModeCallbackState,
+    ],
+  );
+
+  return { createViewFromCurrentState };
+};
--- a/packages/twenty-front/src/modules/views/view-picker/hooks/useDeleteViewFromCurrentState.ts
+++ b/packages/twenty-front/src/modules/views/view-picker/hooks/useDeleteViewFromCurrentState.ts
@ -0,0 +1,78 @@
+import { useRecoilCallback } from 'recoil';
+
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
+import { useChangeView } from '@/views/hooks/useChangeView';
+import { useDeleteView } from '@/views/hooks/useDeleteView';
+import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
+import { useCloseAndResetViewPicker } from '@/views/view-picker/hooks/useCloseAndResetViewPicker';
+import { viewPickerIsDirtyComponentState } from '@/views/view-picker/states/viewPickerIsDirtyComponentState';
+import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState';
+import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/states/viewPickerReferenceViewIdComponentState';
+
+export const useDeleteViewFromCurrentState = (viewBarInstanceId?: string) => {
+  const { viewsOnCurrentObject, currentViewId } =
+    useGetCurrentView(viewBarInstanceId);
+
+  const { closeAndResetViewPicker } = useCloseAndResetViewPicker();
+
+  const viewPickerIsPersistingCallbackState = useRecoilComponentCallbackStateV2(
+    viewPickerIsPersistingComponentState,
+    viewBarInstanceId,
+  );
+
+  const viewPickerIsDirtyCallbackState = useRecoilComponentCallbackStateV2(
+    viewPickerIsDirtyComponentState,
+    viewBarInstanceId,
+  );
+
+  const viewPickerReferenceViewIdCallbackState =
+    useRecoilComponentCallbackStateV2(
+      viewPickerReferenceViewIdComponentState,
+      viewBarInstanceId,
+    );
+
+  const { changeView } = useChangeView(viewBarInstanceId);
+
+  const { deleteView } = useDeleteView();
+
+  const deleteViewFromCurrentState = useRecoilCallback(
+    ({ set, snapshot }) =>
+      async () => {
+        set(viewPickerIsPersistingCallbackState, true);
+        closeAndResetViewPicker();
+        set(viewPickerIsDirtyCallbackState, false);
+
+        const viewPickerReferenceViewId = getSnapshotValue(
+          snapshot,
+          viewPickerReferenceViewIdCallbackState,
+        );
+
+        const shouldChangeView = viewPickerReferenceViewId === currentViewId;
+
+        if (shouldChangeView) {
+          changeView(
+            viewsOnCurrentObject.filter(
+              (view) => view.id !== viewPickerReferenceViewId,
+            )[0].id,
+          );
+        }
+
+        await deleteView(viewPickerReferenceViewId);
+      },
+    [
+      currentViewId,
+      closeAndResetViewPicker,
+      changeView,
+      deleteView,
+      viewPickerIsDirtyCallbackState,
+      viewPickerIsPersistingCallbackState,
+      viewPickerReferenceViewIdCallbackState,
+      viewsOnCurrentObject,
+    ],
+  );
+
+  return {
+    deleteViewFromCurrentState,
+  };
+};
--- a/packages/twenty-front/src/modules/views/view-picker/hooks/useGetAvailableFieldsForKanban.ts
+++ b/packages/twenty-front/src/modules/views/view-picker/hooks/useGetAvailableFieldsForKanban.ts
@ -5,14 +5,15 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
-import { useViewStates } from '@/views/hooks/internal/useViewStates';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { viewObjectMetadataIdComponentState } from '@/views/states/viewObjectMetadataIdComponentState';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { isDefined } from '~/utils/isDefined';

 export const useGetAvailableFieldsForKanban = () => {
-  const { viewObjectMetadataIdState } = useViewStates();
-
-  const viewObjectMetadataId = useRecoilValue(viewObjectMetadataIdState);
+  const viewObjectMetadataId = useRecoilComponentValueV2(
+    viewObjectMetadataIdComponentState,
+  );
  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
  const setNavigationMemorizedUrl = useSetRecoilState(
    navigationMemorizedUrlState,
--- a/packages/twenty-front/src/modules/views/view-picker/hooks/useUpdateViewFromCurrentState.ts
+++ b/packages/twenty-front/src/modules/views/view-picker/hooks/useUpdateViewFromCurrentState.ts
@ -0,0 +1,80 @@
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
+import { useChangeView } from '@/views/hooks/useChangeView';
+import { useUpdateView } from '@/views/hooks/useUpdateView';
+import { useCloseAndResetViewPicker } from '@/views/view-picker/hooks/useCloseAndResetViewPicker';
+import { viewPickerInputNameComponentState } from '@/views/view-picker/states/viewPickerInputNameComponentState';
+import { viewPickerIsDirtyComponentState } from '@/views/view-picker/states/viewPickerIsDirtyComponentState';
+import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState';
+import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/states/viewPickerReferenceViewIdComponentState';
+import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states/viewPickerSelectedIconComponentState';
+import { useRecoilCallback } from 'recoil';
+
+export const useUpdateViewFromCurrentState = (viewBarInstanceId?: string) => {
+  const { closeAndResetViewPicker } = useCloseAndResetViewPicker();
+
+  const viewPickerInputNameCallbackState = useRecoilComponentCallbackStateV2(
+    viewPickerInputNameComponentState,
+  );
+
+  const viewPickerSelectedIconCallbackState = useRecoilComponentCallbackStateV2(
+    viewPickerSelectedIconComponentState,
+  );
+
+  const viewPickerIsPersistingCallbackState = useRecoilComponentCallbackStateV2(
+    viewPickerIsPersistingComponentState,
+  );
+
+  const viewPickerIsDirtyCallbackState = useRecoilComponentCallbackStateV2(
+    viewPickerIsDirtyComponentState,
+  );
+
+  const viewPickerReferenceViewIdCallbackState =
+    useRecoilComponentCallbackStateV2(viewPickerReferenceViewIdComponentState);
+
+  const { updateView } = useUpdateView();
+  const { changeView } = useChangeView(viewBarInstanceId);
+
+  const updateViewFromCurrentState = useRecoilCallback(
+    ({ set, snapshot }) =>
+      async () => {
+        set(viewPickerIsPersistingCallbackState, true);
+        set(viewPickerIsDirtyCallbackState, false);
+        closeAndResetViewPicker();
+
+        const viewPickerReferenceViewId = getSnapshotValue(
+          snapshot,
+          viewPickerReferenceViewIdCallbackState,
+        );
+        const viewPickerInputName = getSnapshotValue(
+          snapshot,
+          viewPickerInputNameCallbackState,
+        );
+        const viewPickerSelectedIcon = getSnapshotValue(
+          snapshot,
+          viewPickerSelectedIconCallbackState,
+        );
+
+        await updateView({
+          id: viewPickerReferenceViewId,
+          name: viewPickerInputName,
+          icon: viewPickerSelectedIcon,
+        });
+        changeView(viewPickerReferenceViewId);
+      },
+    [
+      viewPickerIsPersistingCallbackState,
+      viewPickerIsDirtyCallbackState,
+      closeAndResetViewPicker,
+      viewPickerReferenceViewIdCallbackState,
+      viewPickerInputNameCallbackState,
+      viewPickerSelectedIconCallbackState,
+      updateView,
+      changeView,
+    ],
+  );
+
+  return {
+    updateViewFromCurrentState,
+  };
+};
--- a/packages/twenty-front/src/modules/views/view-picker/hooks/useViewPickerMode.ts
+++ b/packages/twenty-front/src/modules/views/view-picker/hooks/useViewPickerMode.ts
@ -1,12 +1,11 @@
-import { useRecoilState } from 'recoil';
-
-import { useViewPickerStates } from '@/views/view-picker/hooks/useViewPickerStates';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import { viewPickerModeComponentState } from '@/views/view-picker/states/viewPickerModeComponentState';

 export const useViewPickerMode = (viewBarComponentId?: string) => {
-  const { viewPickerModeState } = useViewPickerStates(viewBarComponentId);
-
-  const [viewPickerMode, setViewPickerMode] =
-    useRecoilState(viewPickerModeState);
+  const [viewPickerMode, setViewPickerMode] = useRecoilComponentStateV2(
+    viewPickerModeComponentState,
+    viewBarComponentId,
+  );

  return {
    viewPickerMode,
--- a/packages/twenty-front/src/modules/views/view-picker/hooks/useViewPickerPersistView.ts
+++ b/packages/twenty-front/src/modules/views/view-picker/hooks/useViewPickerPersistView.ts
@ -1,132 +0,0 @@
-import { useRecoilCallback } from 'recoil';
-import { v4 } from 'uuid';
-
-import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
-import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
-import { useHandleViews } from '@/views/hooks/useHandleViews';
-import { useCloseAndResetViewPicker } from '@/views/view-picker/hooks/useCloseAndResetViewPicker';
-import { useViewPickerStates } from '@/views/view-picker/hooks/useViewPickerStates';
-
-export const useViewPickerPersistView = () => {
-  const {
-    viewPickerInputNameState,
-    viewPickerSelectedIconState,
-    viewPickerIsPersistingState,
-    viewPickerReferenceViewIdState,
-    viewPickerKanbanFieldMetadataIdState,
-    viewPickerTypeState,
-    viewPickerIsDirtyState,
-  } = useViewPickerStates();
-
-  const { createView, selectView, removeView, updateView } = useHandleViews();
-
-  const { viewsOnCurrentObject } = useGetCurrentView();
-
-  const { closeAndResetViewPicker } = useCloseAndResetViewPicker();
-
-  const handleCreate = useRecoilCallback(
-    ({ snapshot, set }) =>
-      async () => {
-        const name = getSnapshotValue(snapshot, viewPickerInputNameState);
-        const iconKey = getSnapshotValue(snapshot, viewPickerSelectedIconState);
-        const type = getSnapshotValue(snapshot, viewPickerTypeState);
-        const kanbanFieldMetadataId = getSnapshotValue(
-          snapshot,
-          viewPickerKanbanFieldMetadataIdState,
-        );
-        const id = v4();
-        set(viewPickerIsPersistingState, true);
-        set(viewPickerIsDirtyState, false);
-        await createView({
-          id,
-          name,
-          icon: iconKey,
-          type,
-          kanbanFieldMetadataId,
-        });
-        closeAndResetViewPicker();
-        selectView(id);
-      },
-    [
-      closeAndResetViewPicker,
-      createView,
-      selectView,
-      viewPickerInputNameState,
-      viewPickerIsDirtyState,
-      viewPickerIsPersistingState,
-      viewPickerKanbanFieldMetadataIdState,
-      viewPickerSelectedIconState,
-      viewPickerTypeState,
-    ],
-  );
-
-  const handleDelete = useRecoilCallback(
-    ({ set, snapshot }) =>
-      async () => {
-        set(viewPickerIsPersistingState, true);
-        closeAndResetViewPicker();
-        set(viewPickerIsDirtyState, false);
-        const viewPickerReferenceViewId = getSnapshotValue(
-          snapshot,
-          viewPickerReferenceViewIdState,
-        );
-
-        selectView(
-          viewsOnCurrentObject.filter(
-            (view) => view.id !== viewPickerReferenceViewId,
-          )[0].id,
-        );
-        await removeView(viewPickerReferenceViewId);
-      },
-    [
-      closeAndResetViewPicker,
-      removeView,
-      selectView,
-      viewPickerIsDirtyState,
-      viewPickerIsPersistingState,
-      viewPickerReferenceViewIdState,
-      viewsOnCurrentObject,
-    ],
-  );
-
-  const handleUpdate = useRecoilCallback(
-    ({ set, snapshot }) =>
-      async () => {
-        set(viewPickerIsPersistingState, true);
-        set(viewPickerIsDirtyState, false);
-        closeAndResetViewPicker();
-
-        const viewPickerReferenceViewId = getSnapshotValue(
-          snapshot,
-          viewPickerReferenceViewIdState,
-        );
-        const viewPickerInputName = getSnapshotValue(
-          snapshot,
-          viewPickerInputNameState,
-        );
-        const viewPickerSelectedIcon = getSnapshotValue(
-          snapshot,
-          viewPickerSelectedIconState,
-        );
-
-        await updateView({
-          id: viewPickerReferenceViewId,
-          name: viewPickerInputName,
-          icon: viewPickerSelectedIcon,
-        });
-        selectView(viewPickerReferenceViewId);
-      },
-    [
-      viewPickerIsPersistingState,
-      viewPickerIsDirtyState,
-      closeAndResetViewPicker,
-      viewPickerReferenceViewIdState,
-      viewPickerInputNameState,
-      viewPickerSelectedIconState,
-      updateView,
-      selectView,
-    ],
-  );
-
-  return { handleCreate, handleDelete, handleUpdate };
-};
--- a/packages/twenty-front/src/modules/views/view-picker/hooks/useViewPickerStates.ts
+++ b/packages/twenty-front/src/modules/views/view-picker/hooks/useViewPickerStates.ts
@ -1,55 +0,0 @@
-import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
-import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
-import { viewPickerInputNameComponentState } from '@/views/view-picker/states/viewPickerInputNameComponentState';
-import { viewPickerIsDirtyComponentState } from '@/views/view-picker/states/viewPickerIsDirtyComponentState';
-import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState';
-import { viewPickerKanbanFieldMetadataIdComponentState } from '@/views/view-picker/states/viewPickerKanbanFieldMetadataIdComponentState';
-import { viewPickerModeComponentState } from '@/views/view-picker/states/viewPickerModeComponentState';
-import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/states/viewPickerReferenceViewIdComponentState';
-import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states/viewPickerSelectedIconComponentState';
-import { viewPickerTypeComponentState } from '@/views/view-picker/states/viewPickerTypeComponentState';
-
-import { ViewScopeInternalContext } from '../../scopes/scope-internal-context/ViewScopeInternalContext';
-
-export const useViewPickerStates = (viewComponentId?: string) => {
-  const componentId = useAvailableScopeIdOrThrow(
-    ViewScopeInternalContext,
-    viewComponentId,
-  );
-
-  return {
-    componentId,
-    viewPickerModeState: extractComponentState(
-      viewPickerModeComponentState,
-      componentId,
-    ),
-    viewPickerInputNameState: extractComponentState(
-      viewPickerInputNameComponentState,
-      componentId,
-    ),
-    viewPickerSelectedIconState: extractComponentState(
-      viewPickerSelectedIconComponentState,
-      componentId,
-    ),
-    viewPickerKanbanFieldMetadataIdState: extractComponentState(
-      viewPickerKanbanFieldMetadataIdComponentState,
-      componentId,
-    ),
-    viewPickerReferenceViewIdState: extractComponentState(
-      viewPickerReferenceViewIdComponentState,
-      componentId,
-    ),
-    viewPickerIsPersistingState: extractComponentState(
-      viewPickerIsPersistingComponentState,
-      componentId,
-    ),
-    viewPickerTypeState: extractComponentState(
-      viewPickerTypeComponentState,
-      componentId,
-    ),
-    viewPickerIsDirtyState: extractComponentState(
-      viewPickerIsDirtyComponentState,
-      componentId,
-    ),
-  };
-};
--- a/packages/twenty-front/src/modules/views/view-picker/states/viewPickerInputNameComponentState.ts
+++ b/packages/twenty-front/src/modules/views/view-picker/states/viewPickerInputNameComponentState.ts
@ -1,6 +1,10 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';

-export const viewPickerInputNameComponentState = createComponentState<string>({
-  key: 'viewPickerInputNameComponentState',
-  defaultValue: '',
-});
+export const viewPickerInputNameComponentState = createComponentStateV2<string>(
+  {
+    key: 'viewPickerInputNameComponentState',
+    defaultValue: '',
+    componentInstanceContext: ViewComponentInstanceContext,
+  },
+);
--- a/packages/twenty-front/src/modules/views/view-picker/states/viewPickerIsDirtyComponentState.ts
+++ b/packages/twenty-front/src/modules/views/view-picker/states/viewPickerIsDirtyComponentState.ts
@ -1,6 +1,8 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';

-export const viewPickerIsDirtyComponentState = createComponentState<boolean>({
+export const viewPickerIsDirtyComponentState = createComponentStateV2<boolean>({
  key: 'viewPickerIsDirtyComponentState',
  defaultValue: false,
+  componentInstanceContext: ViewComponentInstanceContext,
 });
--- a/packages/twenty-front/src/modules/views/view-picker/states/viewPickerIsPersistingComponentState.ts
+++ b/packages/twenty-front/src/modules/views/view-picker/states/viewPickerIsPersistingComponentState.ts
@ -1,7 +1,9 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';

 export const viewPickerIsPersistingComponentState =
-  createComponentState<boolean>({
+  createComponentStateV2<boolean>({
    key: 'viewPickerIsPersistingComponentState',
    defaultValue: false,
+    componentInstanceContext: ViewComponentInstanceContext,
  });
--- a/packages/twenty-front/src/modules/views/view-picker/states/viewPickerKanbanFieldMetadataIdComponentState.ts
+++ b/packages/twenty-front/src/modules/views/view-picker/states/viewPickerKanbanFieldMetadataIdComponentState.ts
@ -1,7 +1,9 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';

 export const viewPickerKanbanFieldMetadataIdComponentState =
-  createComponentState<string>({
+  createComponentStateV2<string>({
    key: 'viewPickerKanbanFieldMetadataIdComponentState',
    defaultValue: '',
+    componentInstanceContext: ViewComponentInstanceContext,
  });
--- a/packages/twenty-front/src/modules/views/view-picker/states/viewPickerModeComponentState.ts
+++ b/packages/twenty-front/src/modules/views/view-picker/states/viewPickerModeComponentState.ts
@ -1,8 +1,10 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
+import { ViewPickerMode } from '@/views/view-picker/types/ViewPickerMode';

-export const viewPickerModeComponentState = createComponentState<
-  'list' | 'edit' | 'create'
->({
-  key: 'viewEditModeComponentState',
-  defaultValue: 'list',
-});
+export const viewPickerModeComponentState =
+  createComponentStateV2<ViewPickerMode>({
+    key: 'viewPickerModeComponentState',
+    defaultValue: 'list',
+    componentInstanceContext: ViewComponentInstanceContext,
+  });
--- a/packages/twenty-front/src/modules/views/view-picker/states/viewPickerReferenceViewIdComponentState.ts
+++ b/packages/twenty-front/src/modules/views/view-picker/states/viewPickerReferenceViewIdComponentState.ts
@ -1,7 +1,9 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';

 export const viewPickerReferenceViewIdComponentState =
-  createComponentState<string>({
+  createComponentStateV2<string>({
    key: 'viewPickerReferenceViewIdComponentState',
    defaultValue: '',
+    componentInstanceContext: ViewComponentInstanceContext,
  });
--- a/packages/twenty-front/src/modules/views/view-picker/states/viewPickerSelectedIconComponentState.ts
+++ b/packages/twenty-front/src/modules/views/view-picker/states/viewPickerSelectedIconComponentState.ts
@ -1,7 +1,9 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';

 export const viewPickerSelectedIconComponentState =
-  createComponentState<string>({
+  createComponentStateV2<string>({
    key: 'viewPickerSelectedIconComponentState',
    defaultValue: '',
+    componentInstanceContext: ViewComponentInstanceContext,
  });
--- a/packages/twenty-front/src/modules/views/view-picker/states/viewPickerTypeComponentState.ts
+++ b/packages/twenty-front/src/modules/views/view-picker/states/viewPickerTypeComponentState.ts
@ -1,7 +1,9 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
 import { ViewType } from '@/views/types/ViewType';

-export const viewPickerTypeComponentState = createComponentState<ViewType>({
+export const viewPickerTypeComponentState = createComponentStateV2<ViewType>({
  key: 'viewPickerTypeComponentState',
  defaultValue: ViewType.Table,
+  componentInstanceContext: ViewComponentInstanceContext,
 });
--- a/packages/twenty-front/src/modules/views/view-picker/types/ViewPickerMode.ts
+++ b/packages/twenty-front/src/modules/views/view-picker/types/ViewPickerMode.ts
@ -0,0 +1,5 @@
+export type ViewPickerMode =
+  | 'list'
+  | 'edit'
+  | 'create-empty'
+  | 'create-from-current';