refactor: rename ui/filter-n-sort to ui/view-bar (#1475)

Closes #1473

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

front/src/modules/activities/tasks/hooks/useInitializeTasksFilters.ts

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 
-import { availableFiltersScopedState } from '@/ui/filter-n-sort/states/availableFiltersScopedState';
-import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { availableFiltersScopedState } from '@/ui/view-bar/states/availableFiltersScopedState';
+import { FilterDefinition } from '@/ui/view-bar/types/FilterDefinition';
 
 import { TasksRecoilScopeContext } from '../../states/recoil-scope-contexts/TasksRecoilScopeContext';
 

front/src/modules/activities/tasks/hooks/useTasks.ts

@@ -6,10 +6,10 @@ import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contex
 import { useInitializeTasksFilters } from '@/activities/tasks/hooks/useInitializeTasksFilters';
 import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
 import { currentUserState } from '@/auth/states/currentUserState';
-import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
-import { FilterOperand } from '@/ui/filter-n-sort/types/FilterOperand';
-import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
+import { FilterOperand } from '@/ui/view-bar/types/FilterOperand';
+import { turnFilterIntoWhereClause } from '@/ui/view-bar/utils/turnFilterIntoWhereClause';
 import { ActivityType, useGetActivitiesQuery } from '~/generated/graphql';
 import { tasksFilters } from '~/pages/tasks/tasks-filters';
 import { parseDate } from '~/utils/date-utils';

front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx

@@ -1,10 +1,10 @@
 import { Context } from 'react';
 
-import { FilterDropdownEntitySearchSelect } from '@/ui/filter-n-sort/components/FilterDropdownEntitySearchSelect';
-import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState';
-import { filterDropdownSelectedEntityIdScopedState } from '@/ui/filter-n-sort/states/filterDropdownSelectedEntityIdScopedState';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { FilterDropdownEntitySearchSelect } from '@/ui/view-bar/components/FilterDropdownEntitySearchSelect';
+import { filterDropdownSearchInputScopedState } from '@/ui/view-bar/states/filterDropdownSearchInputScopedState';
+import { filterDropdownSelectedEntityIdScopedState } from '@/ui/view-bar/states/filterDropdownSelectedEntityIdScopedState';
 
 import { useFilteredSearchCompanyQuery } from '../hooks/useFilteredSearchCompanyQuery';
 

front/src/modules/companies/components/HooksCompanyBoard.tsx

@@ -6,11 +6,11 @@ import { useBoardActionBarEntries } from '@/ui/board/hooks/useBoardActionBarEntr
 import { useBoardContextMenuEntries } from '@/ui/board/hooks/useBoardContextMenuEntries';
 import { isBoardLoadedState } from '@/ui/board/states/isBoardLoadedState';
 import { viewFieldsDefinitionsState } from '@/ui/board/states/viewFieldsDefinitionsState';
-import { availableFiltersScopedState } from '@/ui/filter-n-sort/states/availableFiltersScopedState';
-import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
-import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { availableFiltersScopedState } from '@/ui/view-bar/states/availableFiltersScopedState';
+import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
+import { turnFilterIntoWhereClause } from '@/ui/view-bar/utils/turnFilterIntoWhereClause';
 import {
   Pipeline,
   PipelineProgressableType,

front/src/modules/companies/table/components/CompanyTable.tsx

@@ -3,13 +3,13 @@ import { getCompaniesOptimisticEffect } from '@/companies/graphql/optimistic-eff
 import { useCompanyTableActionBarEntries } from '@/companies/hooks/useCompanyTableActionBarEntries';
 import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries';
 import { useSpreadsheetCompanyImport } from '@/companies/hooks/useSpreadsheetCompanyImport';
-import { filtersWhereScopedSelector } from '@/ui/filter-n-sort/states/selectors/filtersWhereScopedSelector';
-import { sortsOrderByScopedSelector } from '@/ui/filter-n-sort/states/selectors/sortsOrderByScopedSelector';
 import { EntityTable } from '@/ui/table/components/EntityTable';
 import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData';
 import { useUpsertEntityTableItem } from '@/ui/table/hooks/useUpsertEntityTableItem';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { filtersWhereScopedSelector } from '@/ui/view-bar/states/selectors/filtersWhereScopedSelector';
+import { sortsOrderByScopedSelector } from '@/ui/view-bar/states/selectors/sortsOrderByScopedSelector';
 import { useTableViews } from '@/views/hooks/useTableViews';
 import {
   SortOrder,

front/src/modules/people/components/FilterDropdownPeopleSearchSelect.tsx

@@ -1,11 +1,11 @@
 import { Context } from 'react';
 
 import { useFilteredSearchPeopleQuery } from '@/people/hooks/useFilteredSearchPeopleQuery';
-import { FilterDropdownEntitySearchSelect } from '@/ui/filter-n-sort/components/FilterDropdownEntitySearchSelect';
-import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState';
-import { filterDropdownSelectedEntityIdScopedState } from '@/ui/filter-n-sort/states/filterDropdownSelectedEntityIdScopedState';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { FilterDropdownEntitySearchSelect } from '@/ui/view-bar/components/FilterDropdownEntitySearchSelect';
+import { filterDropdownSearchInputScopedState } from '@/ui/view-bar/states/filterDropdownSearchInputScopedState';
+import { filterDropdownSelectedEntityIdScopedState } from '@/ui/view-bar/states/filterDropdownSelectedEntityIdScopedState';
 
 export function FilterDropdownPeopleSearchSelect({
   context,

front/src/modules/people/hooks/useSetPeopleEntityTable.ts

@@ -1,7 +1,6 @@
 import { useLocation } from 'react-router-dom';
 import { useRecoilCallback } from 'recoil';
 
-import { availableFiltersScopedState } from '@/ui/filter-n-sort/states/availableFiltersScopedState';
 import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
 import { isFetchingEntityTableDataState } from '@/ui/table/states/isFetchingEntityTableDataState';
 import { numberOfTableRowsState } from '@/ui/table/states/numberOfTableRowsState';
@@ -9,6 +8,7 @@ import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts
 import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
 import { currentPageLocationState } from '@/ui/utilities/loading-state/states/currentPageLocationState';
 import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
+import { availableFiltersScopedState } from '@/ui/view-bar/states/availableFiltersScopedState';
 import { GetPeopleQuery } from '~/generated/graphql';
 import { peopleFilters } from '~/pages/people/people-filters';
 

front/src/modules/people/table/components/PeopleTable.tsx

@@ -3,13 +3,13 @@ import { getPeopleOptimisticEffect } from '@/people/graphql/optimistic-effect-ca
 import { usePersonTableContextMenuEntries } from '@/people/hooks/usePeopleTableContextMenuEntries';
 import { usePersonTableActionBarEntries } from '@/people/hooks/usePersonTableActionBarEntries';
 import { useSpreadsheetPersonImport } from '@/people/hooks/useSpreadsheetPersonImport';
-import { filtersWhereScopedSelector } from '@/ui/filter-n-sort/states/selectors/filtersWhereScopedSelector';
-import { sortsOrderByScopedSelector } from '@/ui/filter-n-sort/states/selectors/sortsOrderByScopedSelector';
 import { EntityTable } from '@/ui/table/components/EntityTable';
 import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData';
 import { useUpsertEntityTableItem } from '@/ui/table/hooks/useUpsertEntityTableItem';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { filtersWhereScopedSelector } from '@/ui/view-bar/states/selectors/filtersWhereScopedSelector';
+import { sortsOrderByScopedSelector } from '@/ui/view-bar/states/selectors/sortsOrderByScopedSelector';
 import { useTableViews } from '@/views/hooks/useTableViews';
 import {
   SortOrder,

front/src/modules/ui/board/components/BoardHeader.tsx

@@ -8,13 +8,13 @@ import {
 import styled from '@emotion/styled';
 
 import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
-import { FilterDropdownButton } from '@/ui/filter-n-sort/components/FilterDropdownButton';
-import SortAndFilterBar from '@/ui/filter-n-sort/components/SortAndFilterBar';
-import { SortDropdownButton } from '@/ui/filter-n-sort/components/SortDropdownButton';
-import { FiltersHotkeyScope } from '@/ui/filter-n-sort/types/FiltersHotkeyScope';
-import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface';
 import { TopBar } from '@/ui/top-bar/TopBar';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+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 { FiltersHotkeyScope } from '@/ui/view-bar/types/FiltersHotkeyScope';
+import { SelectedSortType, SortType } from '@/ui/view-bar/types/interface';
 
 import type { BoardColumnDefinition } from '../types/BoardColumnDefinition';
 import { BoardOptionsHotkeyScope } from '../types/BoardOptionsHotkeyScope';
@@ -102,7 +102,7 @@ export function BoardHeader<SortField>({
           </>
         }
         bottomComponent={
-          <SortAndFilterBar
+          <ViewBarDetails
             context={context}
             sorts={sorts}
             onRemoveSort={sortUnselect}

front/src/modules/ui/board/components/EntityBoard.tsx

@@ -11,13 +11,13 @@ import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { BoardHeader } from '@/ui/board/components/BoardHeader';
 import { StyledBoard } from '@/ui/board/components/StyledBoard';
 import { BoardColumnIdContext } from '@/ui/board/contexts/BoardColumnIdContext';
-import { SelectedSortType } from '@/ui/filter-n-sort/types/interface';
 import { IconList } from '@/ui/icon';
 import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutsideByClassName } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+import { SelectedSortType } from '@/ui/view-bar/types/interface';
 import {
   PipelineProgress,
   PipelineProgressOrderByWithRelationInput,

front/src/modules/ui/board/types/BoardOptions.ts

@@ -1,5 +1,5 @@
-import { FilterDefinitionByEntity } from '@/ui/filter-n-sort/types/FilterDefinitionByEntity';
+import { FilterDefinitionByEntity } from '@/ui/view-bar/types/FilterDefinitionByEntity';
-import { SortType } from '@/ui/filter-n-sort/types/interface';
+import { SortType } from '@/ui/view-bar/types/interface';
 import { PipelineProgress } from '~/generated/graphql';
 import { PipelineProgressOrderByWithRelationInput as PipelineProgresses_Order_By } from '~/generated/graphql';
 

front/src/modules/ui/table/components/EntityTable.tsx

@@ -1,7 +1,6 @@
 import { useRef } from 'react';
 import styled from '@emotion/styled';
 
-import { SortType } from '@/ui/filter-n-sort/types/interface';
 import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import {
@@ -9,6 +8,7 @@ import {
   useListenClickOutsideByClassName,
 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+import { SortType } from '@/ui/view-bar/types/interface';
 
 import { EntityUpdateMutationContext } from '../contexts/EntityUpdateMutationHookContext';
 import { useLeaveTableFocus } from '../hooks/useLeaveTableFocus';

front/src/modules/ui/table/components/GenericEntityTableData.tsx

@@ -2,8 +2,8 @@ import { useEffect } from 'react';
 
 import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
 import { OptimisticEffect } from '@/apollo/optimistic-effect/types/OptimisticEffect';
-import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition';
 import { useSetEntityTableData } from '@/ui/table/hooks/useSetEntityTableData';
+import { FilterDefinition } from '@/ui/view-bar/types/FilterDefinition';
 import { SortOrder } from '~/generated/graphql';
 
 export function GenericEntityTableData({

front/src/modules/ui/table/hooks/useSetEntityTableData.ts

@@ -1,12 +1,12 @@
 import { useRecoilCallback } from 'recoil';
 
-import { availableFiltersScopedState } from '@/ui/filter-n-sort/states/availableFiltersScopedState';
-import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition';
 import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { tableEntitiesFamilyState } from '@/ui/table/states/tableEntitiesFamilyState';
 import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
 import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
+import { availableFiltersScopedState } from '@/ui/view-bar/states/availableFiltersScopedState';
+import { FilterDefinition } from '@/ui/view-bar/types/FilterDefinition';
 
 import { isFetchingEntityTableDataState } from '../states/isFetchingEntityTableDataState';
 import { numberOfTableRowsState } from '../states/numberOfTableRowsState';

front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx

@@ -9,16 +9,16 @@ import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu'
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
 import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
-import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
-import { savedFiltersScopedState } from '@/ui/filter-n-sort/states/savedFiltersScopedState';
-import { savedSortsScopedState } from '@/ui/filter-n-sort/states/savedSortsScopedState';
-import { sortsScopedState } from '@/ui/filter-n-sort/states/sortsScopedState';
 import { IconChevronLeft, IconFileImport, IconTag } from '@/ui/icon';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { tableColumnsScopedState } from '@/ui/table/states/tableColumnsScopedState';
 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 { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
+import { savedFiltersScopedState } from '@/ui/view-bar/states/savedFiltersScopedState';
+import { savedSortsScopedState } from '@/ui/view-bar/states/savedSortsScopedState';
+import { sortsScopedState } from '@/ui/view-bar/states/sortsScopedState';
 
 import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
 import { savedTableColumnsScopedState } from '../../states/savedTableColumnsScopedState';

front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx

@@ -7,18 +7,18 @@ import { Button } from '@/ui/button/components/Button';
 import { ButtonGroup } from '@/ui/button/components/ButtonGroup';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
-import { DropdownMenuContainer } from '@/ui/filter-n-sort/components/DropdownMenuContainer';
-import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
-import { savedFiltersScopedState } from '@/ui/filter-n-sort/states/savedFiltersScopedState';
-import { savedSortsScopedState } from '@/ui/filter-n-sort/states/savedSortsScopedState';
-import { canPersistFiltersScopedSelector } from '@/ui/filter-n-sort/states/selectors/canPersistFiltersScopedSelector';
-import { canPersistSortsScopedSelector } from '@/ui/filter-n-sort/states/selectors/canPersistSortsScopedSelector';
-import { sortsScopedState } from '@/ui/filter-n-sort/states/sortsScopedState';
 import { IconChevronDown, IconPlus } from '@/ui/icon';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 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 { 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 { sortsScopedState } from '@/ui/view-bar/states/sortsScopedState';
 
 import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
 import { savedTableColumnsScopedState } from '../../states/savedTableColumnsScopedState';

front/src/modules/ui/table/options/components/TableViewsDropdownButton.tsx

@@ -6,11 +6,6 @@ import { useRecoilCallback, useSetRecoilState } from 'recoil';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
 import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
-import DropdownButton from '@/ui/filter-n-sort/components/DropdownButton';
-import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
-import { savedFiltersScopedState } from '@/ui/filter-n-sort/states/savedFiltersScopedState';
-import { savedSortsScopedState } from '@/ui/filter-n-sort/states/savedSortsScopedState';
-import { sortsScopedState } from '@/ui/filter-n-sort/states/sortsScopedState';
 import {
   IconChevronDown,
   IconList,
@@ -31,6 +26,11 @@ import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousH
 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 { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
+import { savedFiltersScopedState } from '@/ui/view-bar/states/savedFiltersScopedState';
+import { savedSortsScopedState } from '@/ui/view-bar/states/savedSortsScopedState';
+import { sortsScopedState } from '@/ui/view-bar/states/sortsScopedState';
 import { assertNotNull } from '~/utils/assert';
 
 import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';

front/src/modules/ui/table/table-header/components/TableHeader.tsx

@@ -2,19 +2,19 @@ import { useCallback } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
-import { FilterDropdownButton } from '@/ui/filter-n-sort/components/FilterDropdownButton';
-import SortAndFilterBar from '@/ui/filter-n-sort/components/SortAndFilterBar';
-import { SortDropdownButton } from '@/ui/filter-n-sort/components/SortDropdownButton';
-import { canPersistFiltersScopedSelector } from '@/ui/filter-n-sort/states/selectors/canPersistFiltersScopedSelector';
-import { canPersistSortsScopedSelector } from '@/ui/filter-n-sort/states/selectors/canPersistSortsScopedSelector';
-import { sortsScopedState } from '@/ui/filter-n-sort/states/sortsScopedState';
-import { FiltersHotkeyScope } from '@/ui/filter-n-sort/types/FiltersHotkeyScope';
-import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface';
 import { TopBar } from '@/ui/top-bar/TopBar';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 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 { 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 { 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 { TableOptionsDropdown } from '../../options/components/TableOptionsDropdown';
 import { TableUpdateViewButtonGroup } from '../../options/components/TableUpdateViewButtonGroup';
@@ -114,7 +114,7 @@ export function TableHeader<SortField>({
           </>
         }
         bottomComponent={
-          <SortAndFilterBar
+          <ViewBarDetails
             canPersistView={
               canPersistTableColumns || canPersistFilters || canPersistSorts
             }

front/src/modules/ui/view-bar/components/FilterDropdownDateSearchInput.tsx

@@ -1,11 +1,11 @@
 import { Context } from 'react';
 import styled from '@emotion/styled';
 
-import { useUpsertFilter } from '@/ui/filter-n-sort/hooks/useUpsertFilter';
-import { filterDefinitionUsedInDropdownScopedState } from '@/ui/filter-n-sort/states/filterDefinitionUsedInDropdownScopedState';
-import { selectedOperandInDropdownScopedState } from '@/ui/filter-n-sort/states/selectedOperandInDropdownScopedState';
 import DatePicker from '@/ui/input/date/components/DatePicker';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useUpsertFilter } from '@/ui/view-bar/hooks/useUpsertFilter';
+import { filterDefinitionUsedInDropdownScopedState } from '@/ui/view-bar/states/filterDefinitionUsedInDropdownScopedState';
+import { selectedOperandInDropdownScopedState } from '@/ui/view-bar/states/selectedOperandInDropdownScopedState';
 
 export function FilterDropdownDateSearchInput({
   context,

front/src/modules/ui/view-bar/components/FilterDropdownEntitySearchInput.tsx

@@ -1,10 +1,10 @@
 import { ChangeEvent, Context } from 'react';
 
 import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput';
-import { filterDefinitionUsedInDropdownScopedState } from '@/ui/filter-n-sort/states/filterDefinitionUsedInDropdownScopedState';
-import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState';
-import { selectedOperandInDropdownScopedState } from '@/ui/filter-n-sort/states/selectedOperandInDropdownScopedState';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { filterDefinitionUsedInDropdownScopedState } from '@/ui/view-bar/states/filterDefinitionUsedInDropdownScopedState';
+import { filterDropdownSearchInputScopedState } from '@/ui/view-bar/states/filterDropdownSearchInputScopedState';
+import { selectedOperandInDropdownScopedState } from '@/ui/view-bar/states/selectedOperandInDropdownScopedState';
 
 export function FilterDropdownEntitySearchInput({
   context,

front/src/modules/ui/view-bar/components/FilterDropdownEntitySearchSelect.tsx

@@ -1,15 +1,15 @@
 import { useEffect } from 'react';
 
-import { useFilterCurrentlyEdited } from '@/ui/filter-n-sort/hooks/useFilterCurrentlyEdited';
-import { useRemoveFilter } from '@/ui/filter-n-sort/hooks/useRemoveFilter';
-import { useUpsertFilter } from '@/ui/filter-n-sort/hooks/useUpsertFilter';
-import { filterDefinitionUsedInDropdownScopedState } from '@/ui/filter-n-sort/states/filterDefinitionUsedInDropdownScopedState';
-import { filterDropdownSelectedEntityIdScopedState } from '@/ui/filter-n-sort/states/filterDropdownSelectedEntityIdScopedState';
-import { selectedOperandInDropdownScopedState } from '@/ui/filter-n-sort/states/selectedOperandInDropdownScopedState';
 import { EntitiesForMultipleEntitySelect } from '@/ui/input/relation-picker/components/MultipleEntitySelect';
 import { SingleEntitySelectBase } from '@/ui/input/relation-picker/components/SingleEntitySelectBase';
 import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useFilterCurrentlyEdited } from '@/ui/view-bar/hooks/useFilterCurrentlyEdited';
+import { useRemoveFilter } from '@/ui/view-bar/hooks/useRemoveFilter';
+import { useUpsertFilter } from '@/ui/view-bar/hooks/useUpsertFilter';
+import { filterDefinitionUsedInDropdownScopedState } from '@/ui/view-bar/states/filterDefinitionUsedInDropdownScopedState';
+import { filterDropdownSelectedEntityIdScopedState } from '@/ui/view-bar/states/filterDropdownSelectedEntityIdScopedState';
+import { selectedOperandInDropdownScopedState } from '@/ui/view-bar/states/selectedOperandInDropdownScopedState';
 
 export function FilterDropdownEntitySearchSelect({
   entitiesForSelect,

front/src/modules/ui/view-bar/components/MultipleFiltersDropdownButton.tsx

@@ -1,13 +1,13 @@
 import { Context, useCallback, useState } from 'react';
 
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
-import { filterDefinitionUsedInDropdownScopedState } from '@/ui/filter-n-sort/states/filterDefinitionUsedInDropdownScopedState';
-import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState';
-import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
-import { isFilterDropdownOperandSelectUnfoldedScopedState } from '@/ui/filter-n-sort/states/isFilterDropdownOperandSelectUnfoldedScopedState';
-import { selectedOperandInDropdownScopedState } from '@/ui/filter-n-sort/states/selectedOperandInDropdownScopedState';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { filterDefinitionUsedInDropdownScopedState } from '@/ui/view-bar/states/filterDefinitionUsedInDropdownScopedState';
+import { filterDropdownSearchInputScopedState } from '@/ui/view-bar/states/filterDropdownSearchInputScopedState';
+import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
+import { isFilterDropdownOperandSelectUnfoldedScopedState } from '@/ui/view-bar/states/isFilterDropdownOperandSelectUnfoldedScopedState';
+import { selectedOperandInDropdownScopedState } from '@/ui/view-bar/states/selectedOperandInDropdownScopedState';
 
 import { isViewBarExpandedScopedState } from '../states/isViewBarExpandedScopedState';
 import { FiltersHotkeyScope } from '../types/FiltersHotkeyScope';

front/src/modules/ui/view-bar/components/SingleEntityFilterDropdownButton.tsx

@@ -3,12 +3,12 @@ import React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { filterDefinitionUsedInDropdownScopedState } from '@/ui/filter-n-sort/states/filterDefinitionUsedInDropdownScopedState';
-import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState';
-import { selectedOperandInDropdownScopedState } from '@/ui/filter-n-sort/states/selectedOperandInDropdownScopedState';
 import { IconChevronDown } from '@/ui/icon';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { filterDefinitionUsedInDropdownScopedState } from '@/ui/view-bar/states/filterDefinitionUsedInDropdownScopedState';
+import { filterDropdownSearchInputScopedState } from '@/ui/view-bar/states/filterDropdownSearchInputScopedState';
+import { selectedOperandInDropdownScopedState } from '@/ui/view-bar/states/selectedOperandInDropdownScopedState';
 
 import { StyledHeaderDropdownButton } from '../../dropdown/components/StyledHeaderDropdownButton';
 import { availableFiltersScopedState } from '../states/availableFiltersScopedState';

front/src/modules/ui/view-bar/components/ViewBarDetails.tsx

@@ -98,7 +98,7 @@ const StyledAddFilterContainer = styled.div`
   z-index: 5;
 `;
 
-function SortAndFilterBar<SortField>({
+function ViewBarDetails<SortField>({
   canPersistView,
   context,
   sorts,
@@ -217,4 +217,4 @@ function SortAndFilterBar<SortField>({
   );
 }
 
-export default SortAndFilterBar;
+export default ViewBarDetails;

front/src/modules/users/components/FilterDropdownUserSearchSelect.tsx

@@ -1,12 +1,12 @@
 import { Context } from 'react';
 
 import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
-import { FilterDropdownEntitySearchSelect } from '@/ui/filter-n-sort/components/FilterDropdownEntitySearchSelect';
-import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState';
-import { filterDropdownSelectedEntityIdScopedState } from '@/ui/filter-n-sort/states/filterDropdownSelectedEntityIdScopedState';
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { FilterDropdownEntitySearchSelect } from '@/ui/view-bar/components/FilterDropdownEntitySearchSelect';
+import { filterDropdownSearchInputScopedState } from '@/ui/view-bar/states/filterDropdownSearchInputScopedState';
+import { filterDropdownSelectedEntityIdScopedState } from '@/ui/view-bar/states/filterDropdownSelectedEntityIdScopedState';
 import { useSearchUserQuery } from '~/generated/graphql';
 
 export function FilterDropdownUserSearchSelect({

front/src/modules/views/hooks/useTableViews.ts

@@ -1,15 +1,15 @@
 import { useCallback } from 'react';
 
 import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
-import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
-import { sortsScopedState } from '@/ui/filter-n-sort/states/sortsScopedState';
-import type { FilterDefinitionByEntity } from '@/ui/filter-n-sort/types/FilterDefinitionByEntity';
-import type { SortType } from '@/ui/filter-n-sort/types/interface';
 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';
+import { sortsScopedState } from '@/ui/view-bar/states/sortsScopedState';
+import type { FilterDefinitionByEntity } from '@/ui/view-bar/types/FilterDefinitionByEntity';
+import type { SortType } from '@/ui/view-bar/types/interface';
 import { ViewType } from '~/generated/graphql';
 
 import { useTableViewFields } from './useTableViewFields';

front/src/modules/views/hooks/useViewFilters.ts

@@ -1,12 +1,12 @@
 import { Context, useCallback } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
-import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
-import { savedFiltersScopedState } from '@/ui/filter-n-sort/states/savedFiltersScopedState';
-import { savedFiltersByKeyScopedSelector } from '@/ui/filter-n-sort/states/selectors/savedFiltersByKeyScopedSelector';
-import type { Filter } from '@/ui/filter-n-sort/types/Filter';
-import type { FilterDefinitionByEntity } from '@/ui/filter-n-sort/types/FilterDefinitionByEntity';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+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 type { Filter } from '@/ui/view-bar/types/Filter';
+import type { FilterDefinitionByEntity } from '@/ui/view-bar/types/FilterDefinitionByEntity';
 import {
   useCreateViewFiltersMutation,
   useDeleteViewFiltersMutation,

front/src/modules/views/hooks/useViewSorts.ts

@@ -1,14 +1,11 @@
 import { Context, useCallback } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
-import { savedSortsScopedState } from '@/ui/filter-n-sort/states/savedSortsScopedState';
-import { savedSortsByKeyScopedSelector } from '@/ui/filter-n-sort/states/selectors/savedSortsByKeyScopedSelector';
-import { sortsScopedState } from '@/ui/filter-n-sort/states/sortsScopedState';
-import type {
-  SelectedSortType,
-  SortType,
-} from '@/ui/filter-n-sort/types/interface';
 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 { sortsScopedState } from '@/ui/view-bar/states/sortsScopedState';
+import type { SelectedSortType, SortType } from '@/ui/view-bar/types/interface';
 import {
   useCreateViewSortsMutation,
   useDeleteViewSortsMutation,

front/src/modules/views/hooks/useViews.ts

@@ -1,7 +1,5 @@
 import { useRecoilCallback } from 'recoil';
 
-import { savedFiltersScopedState } from '@/ui/filter-n-sort/states/savedFiltersScopedState';
-import { savedSortsScopedState } from '@/ui/filter-n-sort/states/savedSortsScopedState';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { savedTableColumnsScopedState } from '@/ui/table/states/savedTableColumnsScopedState';
 import {
@@ -12,6 +10,8 @@ import {
 } from '@/ui/table/states/tableViewsState';
 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 {
   useCreateViewMutation,
   useDeleteViewMutation,

front/src/pages/companies/companies-filters.tsx

@@ -1,4 +1,3 @@
-import { FilterDefinitionByEntity } from '@/ui/filter-n-sort/types/FilterDefinitionByEntity';
 import {
   IconBuildingSkyscraper,
   IconCalendarEvent,
@@ -8,6 +7,7 @@ import {
   IconUsers,
 } from '@/ui/icon/index';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
+import { FilterDefinitionByEntity } from '@/ui/view-bar/types/FilterDefinitionByEntity';
 import { FilterDropdownUserSearchSelect } from '@/users/components/FilterDropdownUserSearchSelect';
 import { Company } from '~/generated/graphql';
 

front/src/pages/companies/companies-sorts.tsx

@@ -1,4 +1,3 @@
-import { SortType } from '@/ui/filter-n-sort/types/interface';
 import {
   IconBuildingSkyscraper,
   IconCalendarEvent,
@@ -6,6 +5,7 @@ import {
   IconMap,
   IconUsers,
 } from '@/ui/icon/index';
+import { SortType } from '@/ui/view-bar/types/interface';
 import { CompanyOrderByWithRelationInput as Companies_Order_By } from '~/generated/graphql';
 
 export const availableSorts: SortType<Companies_Order_By>[] = [

front/src/pages/opportunities/Opportunities.tsx

@@ -11,13 +11,13 @@ import { EntityBoardActionBar } from '@/ui/board/components/EntityBoardActionBar
 import { EntityBoardContextMenu } from '@/ui/board/components/EntityBoardContextMenu';
 import { BoardOptionsContext } from '@/ui/board/contexts/BoardOptionsContext';
 import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
-import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
-import { SelectedSortType } from '@/ui/filter-n-sort/types/interface';
 import { IconTargetArrow } from '@/ui/icon';
 import { PageBody } from '@/ui/layout/components/PageBody';
 import { PageContainer } from '@/ui/layout/components/PageContainer';
 import { PageHeader } from '@/ui/layout/components/PageHeader';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+import { reduceSortsToOrderBy } from '@/ui/view-bar/helpers';
+import { SelectedSortType } from '@/ui/view-bar/types/interface';
 import {
   PipelineProgressOrderByWithRelationInput,
   SortOrder,

front/src/pages/opportunities/opportunities-filters.tsx

@@ -1,12 +1,12 @@
 import { FilterDropdownCompanySearchSelect } from '@/companies/components/FilterDropdownCompanySearchSelect';
 import { CompanyBoardRecoilScopeContext } from '@/companies/states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
-import { FilterDefinitionByEntity } from '@/ui/filter-n-sort/types/FilterDefinitionByEntity';
 import {
   IconBuildingSkyscraper,
   IconCalendarEvent,
   IconCurrencyDollar,
   IconUser,
 } from '@/ui/icon/index';
+import { FilterDefinitionByEntity } from '@/ui/view-bar/types/FilterDefinitionByEntity';
 import { PipelineProgress } from '~/generated/graphql';
 
 import { FilterDropdownPeopleSearchSelect } from '../../modules/people/components/FilterDropdownPeopleSearchSelect';

front/src/pages/opportunities/opportunities-sorts.tsx

@@ -1,5 +1,5 @@
-import { SortType } from '@/ui/filter-n-sort/types/interface';
 import { IconCalendarEvent, IconCurrencyDollar } from '@/ui/icon/index';
+import { SortType } from '@/ui/view-bar/types/interface';
 import { PipelineProgressOrderByWithRelationInput as PipelineProgresses_Order_By } from '~/generated/graphql';
 
 export const opportunitiesSorts = [

front/src/pages/people/people-filters.tsx

@@ -1,5 +1,4 @@
 import { FilterDropdownCompanySearchSelect } from '@/companies/components/FilterDropdownCompanySearchSelect';
-import { FilterDefinitionByEntity } from '@/ui/filter-n-sort/types/FilterDefinitionByEntity';
 import {
   IconBuildingSkyscraper,
   IconCalendarEvent,
@@ -9,6 +8,7 @@ import {
   IconUser,
 } from '@/ui/icon/index';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
+import { FilterDefinitionByEntity } from '@/ui/view-bar/types/FilterDefinitionByEntity';
 import { Person } from '~/generated/graphql';
 
 export const peopleFilters: FilterDefinitionByEntity<Person>[] = [

front/src/pages/people/people-sorts.tsx

@@ -1,4 +1,3 @@
-import { SortType } from '@/ui/filter-n-sort/types/interface';
 import {
   IconBuildingSkyscraper,
   IconCalendarEvent,
@@ -7,6 +6,7 @@ import {
   IconPhone,
   IconUser,
 } from '@/ui/icon/index';
+import { SortType } from '@/ui/view-bar/types/interface';
 import {
   PersonOrderByWithRelationInput as People_Order_By,
   SortOrder as Order_By,

front/src/pages/tasks/Tasks.tsx

@@ -5,8 +5,6 @@ import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateAct
 import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
 import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
 import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
-import { FilterDropdownButton } from '@/ui/filter-n-sort/components/FilterDropdownButton';
-import { FiltersHotkeyScope } from '@/ui/filter-n-sort/types/FiltersHotkeyScope';
 import { IconArchive, IconCheck, IconCheckbox } from '@/ui/icon/index';
 import { PageAddButton } from '@/ui/layout/components/PageAddButton';
 import { PageBody } from '@/ui/layout/components/PageBody';
@@ -15,6 +13,8 @@ import { PageHeader } from '@/ui/layout/components/PageHeader';
 import { TabList } from '@/ui/tab/components/TabList';
 import { TopBar } from '@/ui/top-bar/TopBar';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+import { FilterDropdownButton } from '@/ui/view-bar/components/FilterDropdownButton';
+import { FiltersHotkeyScope } from '@/ui/view-bar/types/FiltersHotkeyScope';
 import { ActivityType } from '~/generated/graphql';
 
 const StyledTasksContainer = styled.div`

front/src/pages/tasks/tasks-filters.tsx

@@ -1,6 +1,6 @@
 import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
-import { FilterDefinitionByEntity } from '@/ui/filter-n-sort/types/FilterDefinitionByEntity';
 import { IconUser } from '@/ui/icon';
+import { FilterDefinitionByEntity } from '@/ui/view-bar/types/FilterDefinitionByEntity';
 import { FilterDropdownUserSearchSelect } from '@/users/components/FilterDropdownUserSearchSelect';
 import { Activity } from '~/generated/graphql';