From ccb57c91a3cf3f69d33a640b1eb2ce52fd4d4e5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=AFs?= <guigon.thais@gmail.com>
Date: Fri, 8 Sep 2023 11:26:15 +0200
Subject: [PATCH] refactor: move view recoil states to ui/view-bar folder
 (#1482)

* refactor: move view recoil states to ui/view-bar folder

Closes #1481

* refactor: rename some view related Recoil states and selectors
---
 .../ui/table/components/EntityTable.tsx       |  4 +-
 .../components/TableOptionsDropdown.tsx       |  5 +-
 .../TableOptionsDropdownContent.tsx           | 66 +++++++++---------
 .../components/TableUpdateViewButtonGroup.tsx | 40 +++++------
 .../components/TableViewsDropdownButton.tsx   | 68 ++++++++-----------
 ...ate.ts => savedTableColumnsFamilyState.ts} |  4 +-
 ...ersistTableColumnsScopedFamilySelector.ts} |  8 +--
 ...> savedTableColumnsByKeyFamilySelector.ts} |  8 +--
 .../ui/table/states/tableViewsState.ts        | 50 --------------
 .../table-header/components/TableHeader.tsx   | 30 ++++----
 .../ui/table/types/TableViewsHotkeyScope.ts   |  4 --
 .../states/currentViewIdScopedState.ts        |  6 ++
 ...pedState.ts => savedFiltersFamilyState.ts} |  4 +-
 ...copedState.ts => savedSortsFamilyState.ts} |  4 +-
 ... canPersistFiltersScopedFamilySelector.ts} |  8 +--
 ...=> canPersistSortsScopedFamilySelector.ts} |  8 +--
 .../selectors/currentViewScopedSelector.ts    | 21 ++++++
 .../savedFiltersByKeyFamilySelector.ts        | 15 ++++
 .../savedFiltersByKeyScopedSelector.ts        | 15 ----
 ...or.ts => savedSortsByKeyFamilySelector.ts} |  8 +--
 .../selectors/viewsByIdScopedSelector.ts      | 18 +++++
 .../ui/view-bar/states/viewEditModeState.ts   |  9 +++
 .../ui/view-bar/states/viewsScopedState.ts    |  8 +++
 front/src/modules/ui/view-bar/types/View.ts   |  1 +
 .../ui/view-bar/types/ViewsHotkeyScope.ts     |  4 ++
 .../modules/views/hooks/useTableViewFields.ts | 32 ++++-----
 .../src/modules/views/hooks/useTableViews.ts  |  7 --
 .../src/modules/views/hooks/useViewFilters.ts | 16 +++--
 front/src/modules/views/hooks/useViewSorts.ts | 16 +++--
 front/src/modules/views/hooks/useViews.ts     | 60 ++++++++--------
 30 files changed, 268 insertions(+), 279 deletions(-)
 rename front/src/modules/ui/table/states/{savedTableColumnsScopedState.ts => savedTableColumnsFamilyState.ts} (73%)
 rename front/src/modules/ui/table/states/selectors/{canPersistTableColumnsScopedSelector.ts => canPersistTableColumnsScopedFamilySelector.ts} (56%)
 rename front/src/modules/ui/table/states/selectors/{savedTableColumnsByKeyScopedSelector.ts => savedTableColumnsByKeyFamilySelector.ts} (61%)
 delete mode 100644 front/src/modules/ui/table/states/tableViewsState.ts
 delete mode 100644 front/src/modules/ui/table/types/TableViewsHotkeyScope.ts
 create mode 100644 front/src/modules/ui/view-bar/states/currentViewIdScopedState.ts
 rename front/src/modules/ui/view-bar/states/{savedFiltersScopedState.ts => savedFiltersFamilyState.ts} (56%)
 rename front/src/modules/ui/view-bar/states/{savedSortsScopedState.ts => savedSortsFamilyState.ts} (67%)
 rename front/src/modules/ui/view-bar/states/selectors/{canPersistFiltersScopedSelector.ts => canPersistFiltersScopedFamilySelector.ts} (58%)
 rename front/src/modules/ui/view-bar/states/selectors/{canPersistSortsScopedSelector.ts => canPersistSortsScopedFamilySelector.ts} (58%)
 create mode 100644 front/src/modules/ui/view-bar/states/selectors/currentViewScopedSelector.ts
 create mode 100644 front/src/modules/ui/view-bar/states/selectors/savedFiltersByKeyFamilySelector.ts
 delete mode 100644 front/src/modules/ui/view-bar/states/selectors/savedFiltersByKeyScopedSelector.ts
 rename front/src/modules/ui/view-bar/states/selectors/{savedSortsByKeyScopedSelector.ts => savedSortsByKeyFamilySelector.ts} (56%)
 create mode 100644 front/src/modules/ui/view-bar/states/selectors/viewsByIdScopedSelector.ts
 create mode 100644 front/src/modules/ui/view-bar/states/viewEditModeState.ts
 create mode 100644 front/src/modules/ui/view-bar/states/viewsScopedState.ts
 create mode 100644 front/src/modules/ui/view-bar/types/View.ts
 create mode 100644 front/src/modules/ui/view-bar/types/ViewsHotkeyScope.ts

diff --git a/front/src/modules/ui/table/components/EntityTable.tsx b/front/src/modules/ui/table/components/EntityTable.tsx
index 8d45ca2dd..addb6f75a 100644
--- a/front/src/modules/ui/table/components/EntityTable.tsx
+++ b/front/src/modules/ui/table/components/EntityTable.tsx
@@ -9,13 +9,13 @@ import {
 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { SortType } from '@/ui/view-bar/types/interface';
+import type { View } from '@/ui/view-bar/types/View';
 
 import { EntityUpdateMutationContext } from '../contexts/EntityUpdateMutationHookContext';
 import { useLeaveTableFocus } from '../hooks/useLeaveTableFocus';
 import { useMapKeyboardToSoftFocus } from '../hooks/useMapKeyboardToSoftFocus';
 import { useResetTableRowSelection } from '../hooks/useResetTableRowSelection';
 import { useSetRowSelectedState } from '../hooks/useSetRowSelectedState';
-import type { TableView } from '../states/tableViewsState';
 import { TableHeader } from '../table-header/components/TableHeader';
 import { TableHotkeyScope } from '../types/TableHotkeyScope';
 
@@ -88,7 +88,7 @@ type OwnProps<SortField> = {
   viewName: string;
   viewIcon?: React.ReactNode;
   availableSorts?: Array<SortType<SortField>>;
-  onViewsChange?: (views: TableView[]) => void;
+  onViewsChange?: (views: View[]) => void;
   onViewSubmit?: () => void;
   onImport?: () => void;
   updateEntityMutation: any;
diff --git a/front/src/modules/ui/table/options/components/TableOptionsDropdown.tsx b/front/src/modules/ui/table/options/components/TableOptionsDropdown.tsx
index abbb8da49..2a8d5db6e 100644
--- a/front/src/modules/ui/table/options/components/TableOptionsDropdown.tsx
+++ b/front/src/modules/ui/table/options/components/TableOptionsDropdown.tsx
@@ -1,13 +1,12 @@
 import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
-
-import { type TableView } from '../../states/tableViewsState';
+import type { View } from '@/ui/view-bar/types/View';
 
 import { TableOptionsDropdownButton } from './TableOptionsDropdownButton';
 import { TableOptionsDropdownContent } from './TableOptionsDropdownContent';
 
 type TableOptionsDropdownProps = {
-  onViewsChange?: (views: TableView[]) => void;
+  onViewsChange?: (views: View[]) => void;
   onImport?: () => void;
   customHotkeyScope: HotkeyScope;
 };
diff --git a/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx b/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx
index aa5c68dc6..e37ddba8d 100644
--- a/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx
+++ b/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx
@@ -15,28 +15,26 @@ import { tableColumnsScopedState } from '@/ui/table/states/tableColumnsScopedSta
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
 import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
-import { savedFiltersScopedState } from '@/ui/view-bar/states/savedFiltersScopedState';
-import { savedSortsScopedState } from '@/ui/view-bar/states/savedSortsScopedState';
+import { savedFiltersFamilyState } from '@/ui/view-bar/states/savedFiltersFamilyState';
+import { savedSortsFamilyState } from '@/ui/view-bar/states/savedSortsFamilyState';
+import { viewsByIdScopedSelector } from '@/ui/view-bar/states/selectors/viewsByIdScopedSelector';
 import { sortsScopedState } from '@/ui/view-bar/states/sortsScopedState';
+import { viewEditModeState } from '@/ui/view-bar/states/viewEditModeState';
+import { viewsScopedState } from '@/ui/view-bar/states/viewsScopedState';
+import type { View } from '@/ui/view-bar/types/View';
 
 import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
-import { savedTableColumnsScopedState } from '../../states/savedTableColumnsScopedState';
+import { savedTableColumnsFamilyState } from '../../states/savedTableColumnsFamilyState';
 import { hiddenTableColumnsScopedSelector } from '../../states/selectors/hiddenTableColumnsScopedSelector';
 import { visibleTableColumnsScopedSelector } from '../../states/selectors/visibleTableColumnsScopedSelector';
-import {
-  currentTableViewIdState,
-  type TableView,
-  tableViewEditModeState,
-  tableViewsByIdState,
-  tableViewsState,
-} from '../../states/tableViewsState';
 import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope';
 
 import { TableOptionsDropdownColumnVisibility } from './TableOptionsDropdownSection';
 
 type TableOptionsDropdownButtonProps = {
-  onViewsChange?: (views: TableView[]) => void;
+  onViewsChange?: (views: View[]) => void;
   onImport?: () => void;
 };
 
@@ -58,9 +56,7 @@ export function TableOptionsDropdownContent({
 
   const viewEditInputRef = useRef<HTMLInputElement>(null);
 
-  const [tableViewEditMode, setTableViewEditMode] = useRecoilState(
-    tableViewEditModeState,
-  );
+  const [viewEditMode, setViewEditMode] = useRecoilState(viewEditModeState);
   const visibleTableColumns = useRecoilScopedValue(
     visibleTableColumnsScopedSelector,
     TableRecoilScopeContext,
@@ -69,18 +65,18 @@ export function TableOptionsDropdownContent({
     hiddenTableColumnsScopedSelector,
     TableRecoilScopeContext,
   );
-  const tableViewsById = useRecoilScopedValue(
-    tableViewsByIdState,
+  const viewsById = useRecoilScopedValue(
+    viewsByIdScopedSelector,
     TableRecoilScopeContext,
   );
 
   const resetViewEditMode = useCallback(() => {
-    setTableViewEditMode({ mode: undefined, viewId: undefined });
+    setViewEditMode({ mode: undefined, viewId: undefined });
 
     if (viewEditInputRef.current) {
       viewEditInputRef.current.value = '';
     }
-  }, [setTableViewEditMode]);
+  }, [setViewEditMode]);
 
   const handleViewNameSubmit = useRecoilCallback(
     ({ set, snapshot }) =>
@@ -89,43 +85,43 @@ export function TableOptionsDropdownContent({
 
         const name = viewEditInputRef.current?.value;
 
-        if (!tableViewEditMode.mode || !name) {
+        if (!viewEditMode.mode || !name) {
           return resetViewEditMode();
         }
 
-        const views = await snapshot.getPromise(tableViewsState(tableScopeId));
+        const views = await snapshot.getPromise(viewsScopedState(tableScopeId));
 
-        if (tableViewEditMode.mode === 'create') {
+        if (viewEditMode.mode === 'create') {
           const viewToCreate = { id: v4(), name };
           const nextViews = [...views, viewToCreate];
 
           const currentColumns = await snapshot.getPromise(
             tableColumnsScopedState(tableScopeId),
           );
-          set(savedTableColumnsScopedState(viewToCreate.id), currentColumns);
+          set(savedTableColumnsFamilyState(viewToCreate.id), currentColumns);
 
           const selectedFilters = await snapshot.getPromise(
             filtersScopedState(tableScopeId),
           );
-          set(savedFiltersScopedState(viewToCreate.id), selectedFilters);
+          set(savedFiltersFamilyState(viewToCreate.id), selectedFilters);
 
           const selectedSorts = await snapshot.getPromise(
             sortsScopedState(tableScopeId),
           );
-          set(savedSortsScopedState(viewToCreate.id), selectedSorts);
+          set(savedSortsFamilyState(viewToCreate.id), selectedSorts);
 
-          set(tableViewsState(tableScopeId), nextViews);
+          set(viewsScopedState(tableScopeId), nextViews);
           await Promise.resolve(onViewsChange?.(nextViews));
 
-          set(currentTableViewIdState(tableScopeId), viewToCreate.id);
+          set(currentViewIdScopedState(tableScopeId), viewToCreate.id);
         }
 
-        if (tableViewEditMode.mode === 'edit') {
+        if (viewEditMode.mode === 'edit') {
           const nextViews = views.map((view) =>
-            view.id === tableViewEditMode.viewId ? { ...view, name } : view,
+            view.id === viewEditMode.viewId ? { ...view, name } : view,
           );
 
-          set(tableViewsState(tableScopeId), nextViews);
+          set(viewsScopedState(tableScopeId), nextViews);
           await Promise.resolve(onViewsChange?.(nextViews));
         }
 
@@ -135,8 +131,8 @@ export function TableOptionsDropdownContent({
       onViewsChange,
       resetViewEditMode,
       tableScopeId,
-      tableViewEditMode.mode,
-      tableViewEditMode.viewId,
+      viewEditMode.mode,
+      viewEditMode.viewId,
     ],
   );
 
@@ -174,16 +170,16 @@ export function TableOptionsDropdownContent({
     <StyledDropdownMenu>
       {!selectedOption && (
         <>
-          {!!tableViewEditMode.mode ? (
+          {!!viewEditMode.mode ? (
             <DropdownMenuInput
               ref={viewEditInputRef}
               autoFocus
               placeholder={
-                tableViewEditMode.mode === 'create' ? 'New view' : 'View name'
+                viewEditMode.mode === 'create' ? 'New view' : 'View name'
               }
               defaultValue={
-                tableViewEditMode.viewId
-                  ? tableViewsById[tableViewEditMode.viewId]?.name
+                viewEditMode.viewId
+                  ? viewsById[viewEditMode.viewId]?.name
                   : undefined
               }
             />
diff --git a/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx b/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx
index 14b9d25fe..8030597c8 100644
--- a/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx
+++ b/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx
@@ -13,21 +13,19 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { DropdownMenuContainer } from '@/ui/view-bar/components/DropdownMenuContainer';
+import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
 import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
-import { savedFiltersScopedState } from '@/ui/view-bar/states/savedFiltersScopedState';
-import { savedSortsScopedState } from '@/ui/view-bar/states/savedSortsScopedState';
-import { canPersistFiltersScopedSelector } from '@/ui/view-bar/states/selectors/canPersistFiltersScopedSelector';
-import { canPersistSortsScopedSelector } from '@/ui/view-bar/states/selectors/canPersistSortsScopedSelector';
+import { savedFiltersFamilyState } from '@/ui/view-bar/states/savedFiltersFamilyState';
+import { savedSortsFamilyState } from '@/ui/view-bar/states/savedSortsFamilyState';
+import { canPersistFiltersScopedFamilySelector } from '@/ui/view-bar/states/selectors/canPersistFiltersScopedFamilySelector';
+import { canPersistSortsScopedFamilySelector } from '@/ui/view-bar/states/selectors/canPersistSortsScopedFamilySelector';
 import { sortsScopedState } from '@/ui/view-bar/states/sortsScopedState';
+import { viewEditModeState } from '@/ui/view-bar/states/viewEditModeState';
 
 import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
-import { savedTableColumnsScopedState } from '../../states/savedTableColumnsScopedState';
-import { canPersistTableColumnsScopedSelector } from '../../states/selectors/canPersistTableColumnsScopedSelector';
+import { savedTableColumnsFamilyState } from '../../states/savedTableColumnsFamilyState';
+import { canPersistTableColumnsScopedFamilySelector } from '../../states/selectors/canPersistTableColumnsScopedFamilySelector';
 import { tableColumnsScopedState } from '../../states/tableColumnsScopedState';
-import {
-  currentTableViewIdState,
-  tableViewEditModeState,
-} from '../../states/tableViewsState';
 
 const StyledContainer = styled.div`
   display: inline-flex;
@@ -48,8 +46,8 @@ export const TableUpdateViewButtonGroup = ({
 
   const tableScopeId = useContextScopeId(TableRecoilScopeContext);
 
-  const currentTableViewId = useRecoilScopedValue(
-    currentTableViewIdState,
+  const currentViewId = useRecoilScopedValue(
+    currentViewIdScopedState,
     TableRecoilScopeContext,
   );
 
@@ -58,10 +56,10 @@ export const TableUpdateViewButtonGroup = ({
     TableRecoilScopeContext,
   );
   const setSavedColumns = useSetRecoilState(
-    savedTableColumnsScopedState(currentTableViewId),
+    savedTableColumnsFamilyState(currentViewId),
   );
   const canPersistColumns = useRecoilValue(
-    canPersistTableColumnsScopedSelector([tableScopeId, currentTableViewId]),
+    canPersistTableColumnsScopedFamilySelector([tableScopeId, currentViewId]),
   );
 
   const filters = useRecoilScopedValue(
@@ -69,21 +67,19 @@ export const TableUpdateViewButtonGroup = ({
     TableRecoilScopeContext,
   );
   const setSavedFilters = useSetRecoilState(
-    savedFiltersScopedState(currentTableViewId),
+    savedFiltersFamilyState(currentViewId),
   );
   const canPersistFilters = useRecoilValue(
-    canPersistFiltersScopedSelector([tableScopeId, currentTableViewId]),
+    canPersistFiltersScopedFamilySelector([tableScopeId, currentViewId]),
   );
 
   const sorts = useRecoilScopedValue(sortsScopedState, TableRecoilScopeContext);
-  const setSavedSorts = useSetRecoilState(
-    savedSortsScopedState(currentTableViewId),
-  );
+  const setSavedSorts = useSetRecoilState(savedSortsFamilyState(currentViewId));
   const canPersistSorts = useRecoilValue(
-    canPersistSortsScopedSelector([tableScopeId, currentTableViewId]),
+    canPersistSortsScopedFamilySelector([tableScopeId, currentViewId]),
   );
 
-  const setViewEditMode = useSetRecoilState(tableViewEditModeState);
+  const setViewEditMode = useSetRecoilState(viewEditModeState);
 
   const { openDropdownButton: openOptionsDropdownButton } = useDropdownButton({
     key: 'options',
@@ -135,7 +131,7 @@ export const TableUpdateViewButtonGroup = ({
         <Button
           title="Update view"
           disabled={
-            !currentTableViewId ||
+            !currentViewId ||
             (!canPersistColumns && !canPersistFilters && !canPersistSorts)
           }
           onClick={handleViewSubmit}
diff --git a/front/src/modules/ui/table/options/components/TableViewsDropdownButton.tsx b/front/src/modules/ui/table/options/components/TableViewsDropdownButton.tsx
index ec62b1805..ca94ad614 100644
--- a/front/src/modules/ui/table/options/components/TableViewsDropdownButton.tsx
+++ b/front/src/modules/ui/table/options/components/TableViewsDropdownButton.tsx
@@ -14,29 +14,27 @@ import {
   IconTrash,
 } from '@/ui/icon';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
-import {
-  currentTableViewIdState,
-  currentTableViewState,
-  type TableView,
-  tableViewEditModeState,
-  tableViewsState,
-} from '@/ui/table/states/tableViewsState';
 import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import DropdownButton from '@/ui/view-bar/components/DropdownButton';
+import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
 import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
-import { savedFiltersScopedState } from '@/ui/view-bar/states/savedFiltersScopedState';
-import { savedSortsScopedState } from '@/ui/view-bar/states/savedSortsScopedState';
+import { savedFiltersFamilyState } from '@/ui/view-bar/states/savedFiltersFamilyState';
+import { savedSortsFamilyState } from '@/ui/view-bar/states/savedSortsFamilyState';
+import { currentViewScopedSelector } from '@/ui/view-bar/states/selectors/currentViewScopedSelector';
 import { sortsScopedState } from '@/ui/view-bar/states/sortsScopedState';
+import { viewEditModeState } from '@/ui/view-bar/states/viewEditModeState';
+import { viewsScopedState } from '@/ui/view-bar/states/viewsScopedState';
+import type { View } from '@/ui/view-bar/types/View';
+import { ViewsHotkeyScope } from '@/ui/view-bar/types/ViewsHotkeyScope';
 import { assertNotNull } from '~/utils/assert';
 
 import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
-import { savedTableColumnsScopedState } from '../../states/savedTableColumnsScopedState';
+import { savedTableColumnsFamilyState } from '../../states/savedTableColumnsFamilyState';
 import { tableColumnsScopedState } from '../../states/tableColumnsScopedState';
-import { TableViewsHotkeyScope } from '../../types/TableViewsHotkeyScope';
 
 const StyledBoldDropdownMenuItemsContainer = styled(
   StyledDropdownMenuItemsContainer,
@@ -73,8 +71,8 @@ const StyledViewName = styled.span`
 
 type TableViewsDropdownButtonProps = {
   defaultViewName: string;
-  HotkeyScope: TableViewsHotkeyScope;
-  onViewsChange?: (views: TableView[]) => void;
+  HotkeyScope: ViewsHotkeyScope;
+  onViewsChange?: (views: View[]) => void;
 };
 
 export const TableViewsDropdownButton = ({
@@ -91,19 +89,19 @@ export const TableViewsDropdownButton = ({
     key: 'options',
   });
 
-  const [, setCurrentTableViewId] = useRecoilScopedState(
-    currentTableViewIdState,
+  const [, setCurrentViewId] = useRecoilScopedState(
+    currentViewIdScopedState,
     TableRecoilScopeContext,
   );
-  const currentTableView = useRecoilScopedValue(
-    currentTableViewState,
+  const currentView = useRecoilScopedValue(
+    currentViewScopedSelector,
     TableRecoilScopeContext,
   );
-  const [tableViews, setTableViews] = useRecoilScopedState(
-    tableViewsState,
+  const [views, setViews] = useRecoilScopedState(
+    viewsScopedState,
     TableRecoilScopeContext,
   );
-  const setViewEditMode = useSetRecoilState(tableViewEditModeState);
+  const setViewEditMode = useSetRecoilState(viewEditModeState);
 
   const {
     goBackToPreviousHotkeyScope,
@@ -114,19 +112,19 @@ export const TableViewsDropdownButton = ({
     ({ set, snapshot }) =>
       async (viewId: string) => {
         const savedColumns = await snapshot.getPromise(
-          savedTableColumnsScopedState(viewId),
+          savedTableColumnsFamilyState(viewId),
         );
         const savedFilters = await snapshot.getPromise(
-          savedFiltersScopedState(viewId),
+          savedFiltersFamilyState(viewId),
         );
         const savedSorts = await snapshot.getPromise(
-          savedSortsScopedState(viewId),
+          savedSortsFamilyState(viewId),
         );
 
         set(tableColumnsScopedState(tableScopeId), savedColumns);
         set(filtersScopedState(tableScopeId), savedFilters);
         set(sortsScopedState(tableScopeId), savedSorts);
-        set(currentTableViewIdState(tableScopeId), viewId);
+        set(currentViewIdScopedState(tableScopeId), viewId);
         setIsUnfolded(false);
       },
     [tableScopeId],
@@ -152,21 +150,15 @@ export const TableViewsDropdownButton = ({
     async (event: MouseEvent<HTMLButtonElement>, viewId: string) => {
       event.stopPropagation();
 
-      if (currentTableView?.id === viewId) setCurrentTableViewId(undefined);
+      if (currentView?.id === viewId) setCurrentViewId(undefined);
 
-      const nextViews = tableViews.filter((view) => view.id !== viewId);
+      const nextViews = views.filter((view) => view.id !== viewId);
 
-      setTableViews(nextViews);
+      setViews(nextViews);
       await Promise.resolve(onViewsChange?.(nextViews));
       setIsUnfolded(false);
     },
-    [
-      currentTableView?.id,
-      onViewsChange,
-      setCurrentTableViewId,
-      setTableViews,
-      tableViews,
-    ],
+    [currentView?.id, onViewsChange, setCurrentViewId, setViews, views],
   );
 
   useEffect(() => {
@@ -186,10 +178,10 @@ export const TableViewsDropdownButton = ({
         <>
           <StyledViewIcon size={theme.icon.size.md} />
           <StyledViewName>
-            {currentTableView?.name || defaultViewName}
+            {currentView?.name || defaultViewName}
           </StyledViewName>
           <StyledDropdownLabelAdornments>
-            · {tableViews.length} <IconChevronDown size={theme.icon.size.sm} />
+            · {views.length} <IconChevronDown size={theme.icon.size.sm} />
           </StyledDropdownLabelAdornments>
         </>
       }
@@ -201,7 +193,7 @@ export const TableViewsDropdownButton = ({
       menuWidth="auto"
     >
       <StyledDropdownMenuItemsContainer>
-        {tableViews.map((view) => (
+        {views.map((view) => (
           <MenuItem
             key={view.id}
             iconButtons={[
@@ -210,7 +202,7 @@ export const TableViewsDropdownButton = ({
                 onClick: (event: MouseEvent<HTMLButtonElement>) =>
                   handleEditViewButtonClick(event, view.id),
               },
-              tableViews.length > 1
+              views.length > 1
                 ? {
                     Icon: IconTrash,
                     onClick: (event: MouseEvent<HTMLButtonElement>) =>
diff --git a/front/src/modules/ui/table/states/savedTableColumnsScopedState.ts b/front/src/modules/ui/table/states/savedTableColumnsFamilyState.ts
similarity index 73%
rename from front/src/modules/ui/table/states/savedTableColumnsScopedState.ts
rename to front/src/modules/ui/table/states/savedTableColumnsFamilyState.ts
index d060b3516..9e1f993a7 100644
--- a/front/src/modules/ui/table/states/savedTableColumnsScopedState.ts
+++ b/front/src/modules/ui/table/states/savedTableColumnsFamilyState.ts
@@ -4,10 +4,10 @@ import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
 
 import type { ColumnDefinition } from '../types/ColumnDefinition';
 
-export const savedTableColumnsScopedState = atomFamily<
+export const savedTableColumnsFamilyState = atomFamily<
   ColumnDefinition<ViewFieldMetadata>[],
   string | undefined
 >({
-  key: 'savedTableColumnsScopedState',
+  key: 'savedTableColumnsFamilyState',
   default: [],
 });
diff --git a/front/src/modules/ui/table/states/selectors/canPersistTableColumnsScopedSelector.ts b/front/src/modules/ui/table/states/selectors/canPersistTableColumnsScopedFamilySelector.ts
similarity index 56%
rename from front/src/modules/ui/table/states/selectors/canPersistTableColumnsScopedSelector.ts
rename to front/src/modules/ui/table/states/selectors/canPersistTableColumnsScopedFamilySelector.ts
index 40f45332d..b2caccba6 100644
--- a/front/src/modules/ui/table/states/selectors/canPersistTableColumnsScopedSelector.ts
+++ b/front/src/modules/ui/table/states/selectors/canPersistTableColumnsScopedFamilySelector.ts
@@ -2,16 +2,16 @@ import { selectorFamily } from 'recoil';
 
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
-import { savedTableColumnsScopedState } from '../savedTableColumnsScopedState';
+import { savedTableColumnsFamilyState } from '../savedTableColumnsFamilyState';
 import { tableColumnsScopedState } from '../tableColumnsScopedState';
 
-export const canPersistTableColumnsScopedSelector = selectorFamily({
-  key: 'canPersistTableColumnsScopedSelector',
+export const canPersistTableColumnsScopedFamilySelector = selectorFamily({
+  key: 'canPersistTableColumnsScopedFamilySelector',
   get:
     ([scopeId, viewId]: [string, string | undefined]) =>
     ({ get }) =>
       !isDeeplyEqual(
-        get(savedTableColumnsScopedState(viewId)),
+        get(savedTableColumnsFamilyState(viewId)),
         get(tableColumnsScopedState(scopeId)),
       ),
 });
diff --git a/front/src/modules/ui/table/states/selectors/savedTableColumnsByKeyScopedSelector.ts b/front/src/modules/ui/table/states/selectors/savedTableColumnsByKeyFamilySelector.ts
similarity index 61%
rename from front/src/modules/ui/table/states/selectors/savedTableColumnsByKeyScopedSelector.ts
rename to front/src/modules/ui/table/states/selectors/savedTableColumnsByKeyFamilySelector.ts
index 4a783263c..7b8c1c42d 100644
--- a/front/src/modules/ui/table/states/selectors/savedTableColumnsByKeyScopedSelector.ts
+++ b/front/src/modules/ui/table/states/selectors/savedTableColumnsByKeyFamilySelector.ts
@@ -3,14 +3,14 @@ import { selectorFamily } from 'recoil';
 import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
 
 import type { ColumnDefinition } from '../../types/ColumnDefinition';
-import { savedTableColumnsScopedState } from '../savedTableColumnsScopedState';
+import { savedTableColumnsFamilyState } from '../savedTableColumnsFamilyState';
 
-export const savedTableColumnsByKeyScopedSelector = selectorFamily({
-  key: 'savedTableColumnsByKeyScopedSelector',
+export const savedTableColumnsByKeyFamilySelector = selectorFamily({
+  key: 'savedTableColumnsByKeyFamilySelector',
   get:
     (viewId: string | undefined) =>
     ({ get }) =>
-      get(savedTableColumnsScopedState(viewId)).reduce<
+      get(savedTableColumnsFamilyState(viewId)).reduce<
         Record<string, ColumnDefinition<ViewFieldMetadata>>
       >((result, column) => ({ ...result, [column.key]: column }), {}),
 });
diff --git a/front/src/modules/ui/table/states/tableViewsState.ts b/front/src/modules/ui/table/states/tableViewsState.ts
deleted file mode 100644
index 6dc1f42cb..000000000
--- a/front/src/modules/ui/table/states/tableViewsState.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { atom, atomFamily, selectorFamily } from 'recoil';
-
-export type TableView = { id: string; name: string };
-
-export const tableViewsState = atomFamily<TableView[], string>({
-  key: 'tableViewsState',
-  default: [],
-});
-
-export const tableViewsByIdState = selectorFamily<
-  Record<string, TableView>,
-  string
->({
-  key: 'tableViewsByIdState',
-  get:
-    (scopeId) =>
-    ({ get }) =>
-      get(tableViewsState(scopeId)).reduce<Record<string, TableView>>(
-        (result, view) => ({ ...result, [view.id]: view }),
-        {},
-      ),
-});
-
-export const currentTableViewIdState = atomFamily<string | undefined, string>({
-  key: 'currentTableViewIdState',
-  default: undefined,
-});
-
-export const currentTableViewState = selectorFamily<
-  TableView | undefined,
-  string
->({
-  key: 'currentTableViewState',
-  get:
-    (scopeId) =>
-    ({ get }) => {
-      const currentViewId = get(currentTableViewIdState(scopeId));
-      return currentViewId
-        ? get(tableViewsByIdState(scopeId))[currentViewId]
-        : undefined;
-    },
-});
-
-export const tableViewEditModeState = atom<{
-  mode: 'create' | 'edit' | undefined;
-  viewId: string | undefined;
-}>({
-  key: 'tableViewEditModeState',
-  default: { mode: undefined, viewId: undefined },
-});
diff --git a/front/src/modules/ui/table/table-header/components/TableHeader.tsx b/front/src/modules/ui/table/table-header/components/TableHeader.tsx
index ac27c6ce4..773dee500 100644
--- a/front/src/modules/ui/table/table-header/components/TableHeader.tsx
+++ b/front/src/modules/ui/table/table-header/components/TableHeader.tsx
@@ -10,28 +10,26 @@ import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoi
 import { FilterDropdownButton } from '@/ui/view-bar/components/FilterDropdownButton';
 import { SortDropdownButton } from '@/ui/view-bar/components/SortDropdownButton';
 import ViewBarDetails from '@/ui/view-bar/components/ViewBarDetails';
-import { canPersistFiltersScopedSelector } from '@/ui/view-bar/states/selectors/canPersistFiltersScopedSelector';
-import { canPersistSortsScopedSelector } from '@/ui/view-bar/states/selectors/canPersistSortsScopedSelector';
+import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
+import { canPersistFiltersScopedFamilySelector } from '@/ui/view-bar/states/selectors/canPersistFiltersScopedFamilySelector';
+import { canPersistSortsScopedFamilySelector } from '@/ui/view-bar/states/selectors/canPersistSortsScopedFamilySelector';
 import { sortsScopedState } from '@/ui/view-bar/states/sortsScopedState';
 import { FiltersHotkeyScope } from '@/ui/view-bar/types/FiltersHotkeyScope';
 import { SelectedSortType, SortType } from '@/ui/view-bar/types/interface';
+import type { View } from '@/ui/view-bar/types/View';
+import { ViewsHotkeyScope } from '@/ui/view-bar/types/ViewsHotkeyScope';
 
 import { TableOptionsDropdown } from '../../options/components/TableOptionsDropdown';
 import { TableUpdateViewButtonGroup } from '../../options/components/TableUpdateViewButtonGroup';
 import { TableViewsDropdownButton } from '../../options/components/TableViewsDropdownButton';
 import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
-import { canPersistTableColumnsScopedSelector } from '../../states/selectors/canPersistTableColumnsScopedSelector';
-import {
-  currentTableViewIdState,
-  type TableView,
-} from '../../states/tableViewsState';
+import { canPersistTableColumnsScopedFamilySelector } from '../../states/selectors/canPersistTableColumnsScopedFamilySelector';
 import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope';
-import { TableViewsHotkeyScope } from '../../types/TableViewsHotkeyScope';
 
 type OwnProps<SortField> = {
   viewName: string;
   availableSorts?: Array<SortType<SortField>>;
-  onViewsChange?: (views: TableView[]) => void;
+  onViewsChange?: (views: View[]) => void;
   onViewSubmit?: () => void;
   onImport?: () => void;
 };
@@ -45,8 +43,8 @@ export function TableHeader<SortField>({
 }: OwnProps<SortField>) {
   const tableScopeId = useContextScopeId(TableRecoilScopeContext);
 
-  const currentTableViewId = useRecoilScopedValue(
-    currentTableViewIdState,
+  const currentViewId = useRecoilScopedValue(
+    currentViewIdScopedState,
     TableRecoilScopeContext,
   );
   const [sorts, setSorts] = useRecoilScopedState<SelectedSortType<SortField>[]>(
@@ -54,14 +52,14 @@ export function TableHeader<SortField>({
     TableRecoilScopeContext,
   );
   const canPersistTableColumns = useRecoilValue(
-    canPersistTableColumnsScopedSelector([tableScopeId, currentTableViewId]),
+    canPersistTableColumnsScopedFamilySelector([tableScopeId, currentViewId]),
   );
   const canPersistFilters = useRecoilValue(
-    canPersistFiltersScopedSelector([tableScopeId, currentTableViewId]),
+    canPersistFiltersScopedFamilySelector([tableScopeId, currentViewId]),
   );
 
   const canPersistSorts = useRecoilValue(
-    canPersistSortsScopedSelector([tableScopeId, currentTableViewId]),
+    canPersistSortsScopedFamilySelector([tableScopeId, currentViewId]),
   );
 
   const sortSelect = useCallback(
@@ -87,7 +85,7 @@ export function TableHeader<SortField>({
           <TableViewsDropdownButton
             defaultViewName={viewName}
             onViewsChange={onViewsChange}
-            HotkeyScope={TableViewsHotkeyScope.ListDropdown}
+            HotkeyScope={ViewsHotkeyScope.ListDropdown}
           />
         }
         displayBottomBorder={false}
@@ -126,7 +124,7 @@ export function TableHeader<SortField>({
             rightComponent={
               <TableUpdateViewButtonGroup
                 onViewSubmit={onViewSubmit}
-                HotkeyScope={TableViewsHotkeyScope.CreateDropdown}
+                HotkeyScope={ViewsHotkeyScope.CreateDropdown}
               />
             }
           />
diff --git a/front/src/modules/ui/table/types/TableViewsHotkeyScope.ts b/front/src/modules/ui/table/types/TableViewsHotkeyScope.ts
deleted file mode 100644
index f7497752b..000000000
--- a/front/src/modules/ui/table/types/TableViewsHotkeyScope.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export enum TableViewsHotkeyScope {
-  ListDropdown = 'table-views-list-dropdown',
-  CreateDropdown = 'table-views-create-dropdown',
-}
diff --git a/front/src/modules/ui/view-bar/states/currentViewIdScopedState.ts b/front/src/modules/ui/view-bar/states/currentViewIdScopedState.ts
new file mode 100644
index 000000000..1848522c2
--- /dev/null
+++ b/front/src/modules/ui/view-bar/states/currentViewIdScopedState.ts
@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const currentViewIdScopedState = atomFamily<string | undefined, string>({
+  key: 'currentViewIdScopedState',
+  default: undefined,
+});
diff --git a/front/src/modules/ui/view-bar/states/savedFiltersScopedState.ts b/front/src/modules/ui/view-bar/states/savedFiltersFamilyState.ts
similarity index 56%
rename from front/src/modules/ui/view-bar/states/savedFiltersScopedState.ts
rename to front/src/modules/ui/view-bar/states/savedFiltersFamilyState.ts
index 6dec10fa0..e846261e1 100644
--- a/front/src/modules/ui/view-bar/states/savedFiltersScopedState.ts
+++ b/front/src/modules/ui/view-bar/states/savedFiltersFamilyState.ts
@@ -2,9 +2,9 @@ import { atomFamily } from 'recoil';
 
 import type { Filter } from '../types/Filter';
 
-export const savedFiltersScopedState = atomFamily<Filter[], string | undefined>(
+export const savedFiltersFamilyState = atomFamily<Filter[], string | undefined>(
   {
-    key: 'savedFiltersScopedState',
+    key: 'savedFiltersFamilyState',
     default: [],
   },
 );
diff --git a/front/src/modules/ui/view-bar/states/savedSortsScopedState.ts b/front/src/modules/ui/view-bar/states/savedSortsFamilyState.ts
similarity index 67%
rename from front/src/modules/ui/view-bar/states/savedSortsScopedState.ts
rename to front/src/modules/ui/view-bar/states/savedSortsFamilyState.ts
index bdf1679e8..ab2be0a87 100644
--- a/front/src/modules/ui/view-bar/states/savedSortsScopedState.ts
+++ b/front/src/modules/ui/view-bar/states/savedSortsFamilyState.ts
@@ -2,10 +2,10 @@ import { atomFamily } from 'recoil';
 
 import type { SelectedSortType } from '../types/interface';
 
-export const savedSortsScopedState = atomFamily<
+export const savedSortsFamilyState = atomFamily<
   SelectedSortType<any>[],
   string | undefined
 >({
-  key: 'savedSortsScopedState',
+  key: 'savedSortsFamilyState',
   default: [],
 });
diff --git a/front/src/modules/ui/view-bar/states/selectors/canPersistFiltersScopedSelector.ts b/front/src/modules/ui/view-bar/states/selectors/canPersistFiltersScopedFamilySelector.ts
similarity index 58%
rename from front/src/modules/ui/view-bar/states/selectors/canPersistFiltersScopedSelector.ts
rename to front/src/modules/ui/view-bar/states/selectors/canPersistFiltersScopedFamilySelector.ts
index 76bc17d79..1373925e2 100644
--- a/front/src/modules/ui/view-bar/states/selectors/canPersistFiltersScopedSelector.ts
+++ b/front/src/modules/ui/view-bar/states/selectors/canPersistFiltersScopedFamilySelector.ts
@@ -3,15 +3,15 @@ import { selectorFamily } from 'recoil';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 import { filtersScopedState } from '../filtersScopedState';
-import { savedFiltersScopedState } from '../savedFiltersScopedState';
+import { savedFiltersFamilyState } from '../savedFiltersFamilyState';
 
-export const canPersistFiltersScopedSelector = selectorFamily({
-  key: 'canPersistFiltersScopedSelector',
+export const canPersistFiltersScopedFamilySelector = selectorFamily({
+  key: 'canPersistFiltersScopedFamilySelector',
   get:
     ([scopeId, viewId]: [string, string | undefined]) =>
     ({ get }) =>
       !isDeeplyEqual(
-        get(savedFiltersScopedState(viewId)),
+        get(savedFiltersFamilyState(viewId)),
         get(filtersScopedState(scopeId)),
       ),
 });
diff --git a/front/src/modules/ui/view-bar/states/selectors/canPersistSortsScopedSelector.ts b/front/src/modules/ui/view-bar/states/selectors/canPersistSortsScopedFamilySelector.ts
similarity index 58%
rename from front/src/modules/ui/view-bar/states/selectors/canPersistSortsScopedSelector.ts
rename to front/src/modules/ui/view-bar/states/selectors/canPersistSortsScopedFamilySelector.ts
index 2b50ebce5..b68a6a4b2 100644
--- a/front/src/modules/ui/view-bar/states/selectors/canPersistSortsScopedSelector.ts
+++ b/front/src/modules/ui/view-bar/states/selectors/canPersistSortsScopedFamilySelector.ts
@@ -2,16 +2,16 @@ import { selectorFamily } from 'recoil';
 
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
-import { savedSortsScopedState } from '../savedSortsScopedState';
+import { savedSortsFamilyState } from '../savedSortsFamilyState';
 import { sortsScopedState } from '../sortsScopedState';
 
-export const canPersistSortsScopedSelector = selectorFamily({
-  key: 'canPersistSortsScopedSelector',
+export const canPersistSortsScopedFamilySelector = selectorFamily({
+  key: 'canPersistSortsScopedFamilySelector',
   get:
     ([scopeId, viewId]: [string, string | undefined]) =>
     ({ get }) =>
       !isDeeplyEqual(
-        get(savedSortsScopedState(viewId)),
+        get(savedSortsFamilyState(viewId)),
         get(sortsScopedState(scopeId)),
       ),
 });
diff --git a/front/src/modules/ui/view-bar/states/selectors/currentViewScopedSelector.ts b/front/src/modules/ui/view-bar/states/selectors/currentViewScopedSelector.ts
new file mode 100644
index 000000000..de1507f82
--- /dev/null
+++ b/front/src/modules/ui/view-bar/states/selectors/currentViewScopedSelector.ts
@@ -0,0 +1,21 @@
+import { selectorFamily } from 'recoil';
+
+import type { View } from '../../types/View';
+import { currentViewIdScopedState } from '../currentViewIdScopedState';
+
+import { viewsByIdScopedSelector } from './viewsByIdScopedSelector';
+
+export const currentViewScopedSelector = selectorFamily<
+  View | undefined,
+  string
+>({
+  key: 'currentViewScopedSelector',
+  get:
+    (scopeId) =>
+    ({ get }) => {
+      const currentViewId = get(currentViewIdScopedState(scopeId));
+      return currentViewId
+        ? get(viewsByIdScopedSelector(scopeId))[currentViewId]
+        : undefined;
+    },
+});
diff --git a/front/src/modules/ui/view-bar/states/selectors/savedFiltersByKeyFamilySelector.ts b/front/src/modules/ui/view-bar/states/selectors/savedFiltersByKeyFamilySelector.ts
new file mode 100644
index 000000000..2162863a5
--- /dev/null
+++ b/front/src/modules/ui/view-bar/states/selectors/savedFiltersByKeyFamilySelector.ts
@@ -0,0 +1,15 @@
+import { selectorFamily } from 'recoil';
+
+import type { Filter } from '../../types/Filter';
+import { savedFiltersFamilyState } from '../savedFiltersFamilyState';
+
+export const savedFiltersByKeyFamilySelector = selectorFamily({
+  key: 'savedFiltersByKeyFamilySelector',
+  get:
+    (viewId: string | undefined) =>
+    ({ get }) =>
+      get(savedFiltersFamilyState(viewId)).reduce<Record<string, Filter>>(
+        (result, filter) => ({ ...result, [filter.key]: filter }),
+        {},
+      ),
+});
diff --git a/front/src/modules/ui/view-bar/states/selectors/savedFiltersByKeyScopedSelector.ts b/front/src/modules/ui/view-bar/states/selectors/savedFiltersByKeyScopedSelector.ts
deleted file mode 100644
index 253e1d15d..000000000
--- a/front/src/modules/ui/view-bar/states/selectors/savedFiltersByKeyScopedSelector.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { selectorFamily } from 'recoil';
-
-import type { Filter } from '../../types/Filter';
-import { savedFiltersScopedState } from '../savedFiltersScopedState';
-
-export const savedFiltersByKeyScopedSelector = selectorFamily({
-  key: 'savedFiltersByKeyScopedSelector',
-  get:
-    (param: string | undefined) =>
-    ({ get }) =>
-      get(savedFiltersScopedState(param)).reduce<Record<string, Filter>>(
-        (result, filter) => ({ ...result, [filter.key]: filter }),
-        {},
-      ),
-});
diff --git a/front/src/modules/ui/view-bar/states/selectors/savedSortsByKeyScopedSelector.ts b/front/src/modules/ui/view-bar/states/selectors/savedSortsByKeyFamilySelector.ts
similarity index 56%
rename from front/src/modules/ui/view-bar/states/selectors/savedSortsByKeyScopedSelector.ts
rename to front/src/modules/ui/view-bar/states/selectors/savedSortsByKeyFamilySelector.ts
index 83873e92c..ca3ebd1f4 100644
--- a/front/src/modules/ui/view-bar/states/selectors/savedSortsByKeyScopedSelector.ts
+++ b/front/src/modules/ui/view-bar/states/selectors/savedSortsByKeyFamilySelector.ts
@@ -1,14 +1,14 @@
 import { selectorFamily } from 'recoil';
 
 import type { SelectedSortType } from '../../types/interface';
-import { savedSortsScopedState } from '../savedSortsScopedState';
+import { savedSortsFamilyState } from '../savedSortsFamilyState';
 
-export const savedSortsByKeyScopedSelector = selectorFamily({
-  key: 'savedSortsByKeyScopedSelector',
+export const savedSortsByKeyFamilySelector = selectorFamily({
+  key: 'savedSortsByKeyFamilySelector',
   get:
     (viewId: string | undefined) =>
     ({ get }) =>
-      get(savedSortsScopedState(viewId)).reduce<
+      get(savedSortsFamilyState(viewId)).reduce<
         Record<string, SelectedSortType<any>>
       >((result, sort) => ({ ...result, [sort.key]: sort }), {}),
 });
diff --git a/front/src/modules/ui/view-bar/states/selectors/viewsByIdScopedSelector.ts b/front/src/modules/ui/view-bar/states/selectors/viewsByIdScopedSelector.ts
new file mode 100644
index 000000000..e931508c3
--- /dev/null
+++ b/front/src/modules/ui/view-bar/states/selectors/viewsByIdScopedSelector.ts
@@ -0,0 +1,18 @@
+import { selectorFamily } from 'recoil';
+
+import type { View } from '../../types/View';
+import { viewsScopedState } from '../viewsScopedState';
+
+export const viewsByIdScopedSelector = selectorFamily<
+  Record<string, View>,
+  string
+>({
+  key: 'viewsByIdScopedSelector',
+  get:
+    (scopeId) =>
+    ({ get }) =>
+      get(viewsScopedState(scopeId)).reduce<Record<string, View>>(
+        (result, view) => ({ ...result, [view.id]: view }),
+        {},
+      ),
+});
diff --git a/front/src/modules/ui/view-bar/states/viewEditModeState.ts b/front/src/modules/ui/view-bar/states/viewEditModeState.ts
new file mode 100644
index 000000000..0660a6830
--- /dev/null
+++ b/front/src/modules/ui/view-bar/states/viewEditModeState.ts
@@ -0,0 +1,9 @@
+import { atom } from 'recoil';
+
+export const viewEditModeState = atom<{
+  mode: 'create' | 'edit' | undefined;
+  viewId: string | undefined;
+}>({
+  key: 'viewEditModeState',
+  default: { mode: undefined, viewId: undefined },
+});
diff --git a/front/src/modules/ui/view-bar/states/viewsScopedState.ts b/front/src/modules/ui/view-bar/states/viewsScopedState.ts
new file mode 100644
index 000000000..175d12040
--- /dev/null
+++ b/front/src/modules/ui/view-bar/states/viewsScopedState.ts
@@ -0,0 +1,8 @@
+import { atomFamily } from 'recoil';
+
+import type { View } from '../types/View';
+
+export const viewsScopedState = atomFamily<View[], string>({
+  key: 'viewsScopedState',
+  default: [],
+});
diff --git a/front/src/modules/ui/view-bar/types/View.ts b/front/src/modules/ui/view-bar/types/View.ts
new file mode 100644
index 000000000..5990433a2
--- /dev/null
+++ b/front/src/modules/ui/view-bar/types/View.ts
@@ -0,0 +1 @@
+export type View = { id: string; name: string };
diff --git a/front/src/modules/ui/view-bar/types/ViewsHotkeyScope.ts b/front/src/modules/ui/view-bar/types/ViewsHotkeyScope.ts
new file mode 100644
index 000000000..a3f392ce8
--- /dev/null
+++ b/front/src/modules/ui/view-bar/types/ViewsHotkeyScope.ts
@@ -0,0 +1,4 @@
+export enum ViewsHotkeyScope {
+  ListDropdown = 'views-list-dropdown',
+  CreateDropdown = 'views-create-dropdown',
+}
diff --git a/front/src/modules/views/hooks/useTableViewFields.ts b/front/src/modules/views/hooks/useTableViewFields.ts
index ae836eb42..fb1805969 100644
--- a/front/src/modules/views/hooks/useTableViewFields.ts
+++ b/front/src/modules/views/hooks/useTableViewFields.ts
@@ -4,13 +4,13 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
 import { availableTableColumnsScopedState } from '@/ui/table/states/availableTableColumnsScopedState';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
-import { savedTableColumnsScopedState } from '@/ui/table/states/savedTableColumnsScopedState';
-import { savedTableColumnsByKeyScopedSelector } from '@/ui/table/states/selectors/savedTableColumnsByKeyScopedSelector';
+import { savedTableColumnsFamilyState } from '@/ui/table/states/savedTableColumnsFamilyState';
+import { savedTableColumnsByKeyFamilySelector } from '@/ui/table/states/selectors/savedTableColumnsByKeyFamilySelector';
 import { tableColumnsScopedState } from '@/ui/table/states/tableColumnsScopedState';
-import { currentTableViewIdState } from '@/ui/table/states/tableViewsState';
 import type { ColumnDefinition } from '@/ui/table/types/ColumnDefinition';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
 import {
   SortOrder,
   useCreateViewFieldsMutation,
@@ -41,8 +41,8 @@ export const useTableViewFields = ({
   columnDefinitions: ColumnDefinition<ViewFieldMetadata>[];
   skipFetch?: boolean;
 }) => {
-  const currentTableViewId = useRecoilScopedValue(
-    currentTableViewIdState,
+  const currentViewId = useRecoilScopedValue(
+    currentViewIdScopedState,
     TableRecoilScopeContext,
   );
   const [availableTableColumns, setAvailableTableColumns] =
@@ -55,10 +55,10 @@ export const useTableViewFields = ({
     TableRecoilScopeContext,
   );
   const setSavedTableColumns = useSetRecoilState(
-    savedTableColumnsScopedState(currentTableViewId),
+    savedTableColumnsFamilyState(currentViewId),
   );
   const savedTableColumnsByKey = useRecoilValue(
-    savedTableColumnsByKeyScopedSelector(currentTableViewId),
+    savedTableColumnsByKeyFamilySelector(currentViewId),
   );
 
   const [createViewFieldsMutation] = useCreateViewFieldsMutation();
@@ -67,7 +67,7 @@ export const useTableViewFields = ({
   const createViewFields = useCallback(
     (
       columns: ColumnDefinition<ViewFieldMetadata>[],
-      viewId = currentTableViewId,
+      viewId = currentViewId,
     ) => {
       if (!viewId || !columns.length) return;
 
@@ -80,12 +80,12 @@ export const useTableViewFields = ({
         },
       });
     },
-    [createViewFieldsMutation, currentTableViewId, objectId],
+    [createViewFieldsMutation, currentViewId, objectId],
   );
 
   const updateViewFields = useCallback(
     (columns: ColumnDefinition<ViewFieldMetadata>[]) => {
-      if (!currentTableViewId || !columns.length) return;
+      if (!currentViewId || !columns.length) return;
 
       return Promise.all(
         columns.map((column) =>
@@ -96,22 +96,22 @@ export const useTableViewFields = ({
                 size: column.size,
               },
               where: {
-                viewId_key: { key: column.key, viewId: currentTableViewId },
+                viewId_key: { key: column.key, viewId: currentViewId },
               },
             },
           }),
         ),
       );
     },
-    [currentTableViewId, updateViewFieldMutation],
+    [currentViewId, updateViewFieldMutation],
   );
 
   const { refetch } = useGetViewFieldsQuery({
-    skip: !currentTableViewId || skipFetch,
+    skip: !currentViewId || skipFetch,
     variables: {
       orderBy: { index: SortOrder.Asc },
       where: {
-        viewId: { equals: currentTableViewId },
+        viewId: { equals: currentViewId },
       },
     },
     onCompleted: async (data) => {
@@ -152,7 +152,7 @@ export const useTableViewFields = ({
   });
 
   const persistColumns = useCallback(async () => {
-    if (!currentTableViewId) return;
+    if (!currentViewId) return;
 
     const viewFieldsToCreate = tableColumns.filter(
       (column) => !savedTableColumnsByKey[column.key],
@@ -170,7 +170,7 @@ export const useTableViewFields = ({
     return refetch();
   }, [
     createViewFields,
-    currentTableViewId,
+    currentViewId,
     refetch,
     savedTableColumnsByKey,
     tableColumns,
diff --git a/front/src/modules/views/hooks/useTableViews.ts b/front/src/modules/views/hooks/useTableViews.ts
index 49899f6ac..fb9bd83d9 100644
--- a/front/src/modules/views/hooks/useTableViews.ts
+++ b/front/src/modules/views/hooks/useTableViews.ts
@@ -3,7 +3,6 @@ import { useCallback } from 'react';
 import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { tableColumnsScopedState } from '@/ui/table/states/tableColumnsScopedState';
-import { currentTableViewIdState } from '@/ui/table/states/tableViewsState';
 import type { ColumnDefinition } from '@/ui/table/types/ColumnDefinition';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
@@ -28,10 +27,6 @@ export const useTableViews = <Entity, SortField>({
   objectId: 'company' | 'person';
   columnDefinitions: ColumnDefinition<ViewFieldMetadata>[];
 }) => {
-  const currentTableViewId = useRecoilScopedValue(
-    currentTableViewIdState,
-    TableRecoilScopeContext,
-  );
   const tableColumns = useRecoilScopedValue(
     tableColumnsScopedState,
     TableRecoilScopeContext,
@@ -54,13 +49,11 @@ export const useTableViews = <Entity, SortField>({
   });
   const { createViewFilters, persistFilters } = useViewFilters({
     availableFilters,
-    currentViewId: currentTableViewId,
     scopeContext: TableRecoilScopeContext,
     skipFetch: isFetchingViews,
   });
   const { createViewSorts, persistSorts } = useViewSorts({
     availableSorts,
-    currentViewId: currentTableViewId,
     scopeContext: TableRecoilScopeContext,
     skipFetch: isFetchingViews,
   });
diff --git a/front/src/modules/views/hooks/useViewFilters.ts b/front/src/modules/views/hooks/useViewFilters.ts
index 6c7dbd012..0e9a22bee 100644
--- a/front/src/modules/views/hooks/useViewFilters.ts
+++ b/front/src/modules/views/hooks/useViewFilters.ts
@@ -2,9 +2,11 @@ import { Context, useCallback } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
 import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
-import { savedFiltersScopedState } from '@/ui/view-bar/states/savedFiltersScopedState';
-import { savedFiltersByKeyScopedSelector } from '@/ui/view-bar/states/selectors/savedFiltersByKeyScopedSelector';
+import { savedFiltersFamilyState } from '@/ui/view-bar/states/savedFiltersFamilyState';
+import { savedFiltersByKeyFamilySelector } from '@/ui/view-bar/states/selectors/savedFiltersByKeyFamilySelector';
 import type { Filter } from '@/ui/view-bar/types/Filter';
 import type { FilterDefinitionByEntity } from '@/ui/view-bar/types/FilterDefinitionByEntity';
 import {
@@ -17,24 +19,26 @@ import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 export const useViewFilters = <Entity>({
   availableFilters,
-  currentViewId,
   scopeContext,
   skipFetch,
 }: {
   availableFilters: FilterDefinitionByEntity<Entity>[];
-  currentViewId: string | undefined;
   scopeContext: Context<string | null>;
   skipFetch?: boolean;
 }) => {
+  const currentViewId = useRecoilScopedValue(
+    currentViewIdScopedState,
+    scopeContext,
+  );
   const [filters, setFilters] = useRecoilScopedState(
     filtersScopedState,
     scopeContext,
   );
   const [, setSavedFilters] = useRecoilState(
-    savedFiltersScopedState(currentViewId),
+    savedFiltersFamilyState(currentViewId),
   );
   const savedFiltersByKey = useRecoilValue(
-    savedFiltersByKeyScopedSelector(currentViewId),
+    savedFiltersByKeyFamilySelector(currentViewId),
   );
 
   const { refetch } = useGetViewFiltersQuery({
diff --git a/front/src/modules/views/hooks/useViewSorts.ts b/front/src/modules/views/hooks/useViewSorts.ts
index 39bf7482e..1c9b4e88c 100644
--- a/front/src/modules/views/hooks/useViewSorts.ts
+++ b/front/src/modules/views/hooks/useViewSorts.ts
@@ -2,8 +2,10 @@ import { Context, useCallback } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
-import { savedSortsScopedState } from '@/ui/view-bar/states/savedSortsScopedState';
-import { savedSortsByKeyScopedSelector } from '@/ui/view-bar/states/selectors/savedSortsByKeyScopedSelector';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
+import { savedSortsFamilyState } from '@/ui/view-bar/states/savedSortsFamilyState';
+import { savedSortsByKeyFamilySelector } from '@/ui/view-bar/states/selectors/savedSortsByKeyFamilySelector';
 import { sortsScopedState } from '@/ui/view-bar/states/sortsScopedState';
 import type { SelectedSortType, SortType } from '@/ui/view-bar/types/interface';
 import {
@@ -17,24 +19,26 @@ import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 export const useViewSorts = <SortField>({
   availableSorts,
-  currentViewId,
   scopeContext,
   skipFetch,
 }: {
   availableSorts: SortType<SortField>[];
-  currentViewId: string | undefined;
   scopeContext: Context<string | null>;
   skipFetch?: boolean;
 }) => {
+  const currentViewId = useRecoilScopedValue(
+    currentViewIdScopedState,
+    scopeContext,
+  );
   const [sorts, setSorts] = useRecoilScopedState(
     sortsScopedState,
     scopeContext,
   );
   const [, setSavedSorts] = useRecoilState(
-    savedSortsScopedState(currentViewId),
+    savedSortsFamilyState(currentViewId),
   );
   const savedSortsByKey = useRecoilValue(
-    savedSortsByKeyScopedSelector(currentViewId),
+    savedSortsByKeyFamilySelector(currentViewId),
   );
 
   const { refetch } = useGetViewSortsQuery({
diff --git a/front/src/modules/views/hooks/useViews.ts b/front/src/modules/views/hooks/useViews.ts
index 64770fe06..aa211a328 100644
--- a/front/src/modules/views/hooks/useViews.ts
+++ b/front/src/modules/views/hooks/useViews.ts
@@ -1,17 +1,15 @@
 import { useRecoilCallback } from 'recoil';
 
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
-import { savedTableColumnsScopedState } from '@/ui/table/states/savedTableColumnsScopedState';
-import {
-  currentTableViewIdState,
-  type TableView,
-  tableViewsByIdState,
-  tableViewsState,
-} from '@/ui/table/states/tableViewsState';
+import { savedTableColumnsFamilyState } from '@/ui/table/states/savedTableColumnsFamilyState';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
-import { savedFiltersScopedState } from '@/ui/view-bar/states/savedFiltersScopedState';
-import { savedSortsScopedState } from '@/ui/view-bar/states/savedSortsScopedState';
+import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
+import { savedFiltersFamilyState } from '@/ui/view-bar/states/savedFiltersFamilyState';
+import { savedSortsFamilyState } from '@/ui/view-bar/states/savedSortsFamilyState';
+import { viewsByIdScopedSelector } from '@/ui/view-bar/states/selectors/viewsByIdScopedSelector';
+import { viewsScopedState } from '@/ui/view-bar/states/viewsScopedState';
+import { View } from '@/ui/view-bar/types/View';
 import {
   useCreateViewMutation,
   useDeleteViewMutation,
@@ -30,16 +28,16 @@ export const useViews = ({
   onViewCreate: (viewId: string) => Promise<void>;
   type: ViewType;
 }) => {
-  const [currentTableViewId, setCurrentTableViewId] = useRecoilScopedState(
-    currentTableViewIdState,
+  const [currentViewId, setCurrentViewId] = useRecoilScopedState(
+    currentViewIdScopedState,
     TableRecoilScopeContext,
   );
-  const [tableViews, setTableViews] = useRecoilScopedState(
-    tableViewsState,
+  const [views, setViews] = useRecoilScopedState(
+    viewsScopedState,
     TableRecoilScopeContext,
   );
-  const tableViewsById = useRecoilScopedValue(
-    tableViewsByIdState,
+  const viewsById = useRecoilScopedValue(
+    viewsByIdScopedSelector,
     TableRecoilScopeContext,
   );
 
@@ -47,7 +45,7 @@ export const useViews = ({
   const [updateViewMutation] = useUpdateViewMutation();
   const [deleteViewMutation] = useDeleteViewMutation();
 
-  const createView = async (view: TableView) => {
+  const createView = async (view: View) => {
     const { data } = await createViewMutation({
       variables: {
         data: {
@@ -61,7 +59,7 @@ export const useViews = ({
     if (data?.view) await onViewCreate(data.view.id);
   };
 
-  const updateView = (view: TableView) =>
+  const updateView = (view: View) =>
     updateViewMutation({
       variables: {
         data: { name: view.name },
@@ -75,13 +73,13 @@ export const useViews = ({
   const handleResetSavedViews = useRecoilCallback(
     ({ reset }) =>
       () => {
-        tableViews.forEach((view) => {
-          reset(savedTableColumnsScopedState(view.id));
-          reset(savedFiltersScopedState(view.id));
-          reset(savedSortsScopedState(view.id));
+        views.forEach((view) => {
+          reset(savedTableColumnsFamilyState(view.id));
+          reset(savedFiltersFamilyState(view.id));
+          reset(savedSortsFamilyState(view.id));
         });
       },
-    [tableViews],
+    [views],
   );
 
   const { loading, refetch } = useGetViewsQuery({
@@ -97,25 +95,22 @@ export const useViews = ({
         name: view.name,
       }));
 
-      if (!isDeeplyEqual(tableViews, nextViews)) setTableViews(nextViews);
+      if (!isDeeplyEqual(views, nextViews)) setViews(nextViews);
 
       // If there is no current view selected,
       // or if the current view cannot be found in the views list (user switched workspaces)
       if (
         nextViews.length &&
-        (!currentTableViewId ||
-          !nextViews.some((view) => view.id === currentTableViewId))
+        (!currentViewId || !nextViews.some((view) => view.id === currentViewId))
       ) {
-        setCurrentTableViewId(nextViews[0].id);
+        setCurrentViewId(nextViews[0].id);
         handleResetSavedViews();
       }
     },
   });
 
-  const handleViewsChange = async (nextViews: TableView[]) => {
-    const viewToCreate = nextViews.find(
-      (nextView) => !tableViewsById[nextView.id],
-    );
+  const handleViewsChange = async (nextViews: View[]) => {
+    const viewToCreate = nextViews.find((nextView) => !viewsById[nextView.id]);
     if (viewToCreate) {
       await createView(viewToCreate);
       return refetch();
@@ -123,8 +118,7 @@ export const useViews = ({
 
     const viewToUpdate = nextViews.find(
       (nextView) =>
-        tableViewsById[nextView.id] &&
-        tableViewsById[nextView.id].name !== nextView.name,
+        viewsById[nextView.id] && viewsById[nextView.id].name !== nextView.name,
     );
     if (viewToUpdate) {
       await updateView(viewToUpdate);
@@ -132,7 +126,7 @@ export const useViews = ({
     }
 
     const nextViewIds = nextViews.map((nextView) => nextView.id);
-    const viewIdToDelete = Object.keys(tableViewsById).find(
+    const viewIdToDelete = Object.keys(viewsById).find(
       (previousViewId) => !nextViewIds.includes(previousViewId),
     );
     if (viewIdToDelete) await deleteView(viewIdToDelete);