2358 refactor entityboard to recordboard (#2652)

* renaming

* wip

* merge BoardColumn and RecordBoardColumn

* merge files

* remove unnecessary export

* Fix lint

---------

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

front/src/modules/companies/board/components/CompanyBoard.tsx

@@ -2,14 +2,14 @@ import styled from '@emotion/styled';
 
 import { BoardContext } from '@/companies/states/contexts/BoardContext';
 import { mapBoardFieldDefinitionsToViewFields } from '@/companies/utils/mapBoardFieldDefinitionsToViewFields';
-import { BoardOptionsDropdown } from '@/ui/layout/board/components/BoardOptionsDropdown';
+import { RecordBoardActionBar } from '@/ui/object/record-board/action-bar/components/RecordBoardActionBar';
-import { BoardOptionsDropdownId } from '@/ui/layout/board/components/constants/BoardOptionsDropdownId';
+import { BoardOptionsDropdownId } from '@/ui/object/record-board/components/constants/BoardOptionsDropdownId';
 import {
-  EntityBoard,
+  RecordBoard,
-  EntityBoardProps,
+  RecordBoardProps,
-} from '@/ui/layout/board/components/EntityBoard';
+} from '@/ui/object/record-board/components/RecordBoard';
-import { EntityBoardActionBar } from '@/ui/layout/board/components/EntityBoardActionBar';
+import { RecordBoardContextMenu } from '@/ui/object/record-board/context-menu/components/RecordBoardContextMenu';
-import { EntityBoardContextMenu } from '@/ui/layout/board/components/EntityBoardContextMenu';
+import { BoardOptionsDropdown } from '@/ui/object/record-board/options/components/BoardOptionsDropdown';
 import { ViewBar } from '@/views/components/ViewBar';
 import { useViewFields } from '@/views/hooks/internal/useViewFields';
 import { ViewScope } from '@/views/scopes/ViewScope';
@@ -27,7 +27,7 @@ const StyledContainer = styled.div`
 `;
 
 type CompanyBoardProps = Pick<
-  EntityBoardProps,
+  RecordBoardProps,
   'onColumnAdd' | 'onColumnDelete' | 'onEditColumnTitle'
 >;
 
@@ -61,14 +61,14 @@ export const CompanyBoard = ({
             optionsDropdownScopeId={BoardOptionsDropdownId}
           />
           <HooksCompanyBoardEffect />
-          <EntityBoard
+          <RecordBoard
             boardOptions={opportunitiesBoardOptions}
             onColumnAdd={onColumnAdd}
             onColumnDelete={onColumnDelete}
             onEditColumnTitle={onEditColumnTitle}
           />
-          <EntityBoardActionBar />
+          <RecordBoardActionBar />
-          <EntityBoardContextMenu />
+          <RecordBoardContextMenu />
         </BoardContext.Provider>
       </StyledContainer>
     </ViewScope>

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

@@ -7,13 +7,13 @@ import { EntityChipVariant } from '@/ui/display/chip/components/EntityChip';
 import { IconEye } from '@/ui/display/icon/index';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox';
-import { BoardCardIdContext } from '@/ui/layout/board/contexts/BoardCardIdContext';
-import { useBoardContext } from '@/ui/layout/board/hooks/useBoardContext';
-import { useCurrentCardSelected } from '@/ui/layout/board/hooks/useCurrentCardSelected';
-import { isCardInCompactViewState } from '@/ui/layout/board/states/isCardInCompactViewState';
-import { isCompactViewEnabledState } from '@/ui/layout/board/states/isCompactViewEnabledState';
-import { visibleBoardCardFieldsScopedSelector } from '@/ui/layout/board/states/selectors/visibleBoardCardFieldsScopedSelector';
 import { FieldContext } from '@/ui/object/field/contexts/FieldContext';
+import { BoardCardIdContext } from '@/ui/object/record-board/contexts/BoardCardIdContext';
+import { useBoardContext } from '@/ui/object/record-board/hooks/useBoardContext';
+import { useCurrentCardSelected } from '@/ui/object/record-board/hooks/useCurrentCardSelected';
+import { isCardInCompactViewState } from '@/ui/object/record-board/states/isCardInCompactViewState';
+import { isCompactViewEnabledState } from '@/ui/object/record-board/states/isCompactViewEnabledState';
+import { visibleBoardCardFieldsScopedSelector } from '@/ui/object/record-board/states/selectors/visibleBoardCardFieldsScopedSelector';
 import { RecordInlineCell } from '@/ui/object/record-inline-cell/components/RecordInlineCell';
 import { InlineCellHotkeyScope } from '@/ui/object/record-inline-cell/types/InlineCellHotkeyScope';
 import { AnimatedEaseInOut } from '@/ui/utilities/animation/components/AnimatedEaseInOut';

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

@@ -9,14 +9,14 @@ import { PaginatedObjectTypeResults } from '@/object-record/types/PaginatedObjec
 import { filterAvailableTableColumns } from '@/object-record/utils/filterAvailableTableColumns';
 import { Opportunity } from '@/pipeline/types/Opportunity';
 import { PipelineStep } from '@/pipeline/types/PipelineStep';
-import { useBoardActionBarEntries } from '@/ui/layout/board/hooks/useBoardActionBarEntries';
-import { useBoardContext } from '@/ui/layout/board/hooks/useBoardContext';
-import { useBoardContextMenuEntries } from '@/ui/layout/board/hooks/useBoardContextMenuEntries';
-import { availableBoardCardFieldsScopedState } from '@/ui/layout/board/states/availableBoardCardFieldsScopedState';
-import { boardCardFieldsScopedState } from '@/ui/layout/board/states/boardCardFieldsScopedState';
-import { isBoardLoadedState } from '@/ui/layout/board/states/isBoardLoadedState';
 import { turnFiltersIntoWhereClauseV2 } from '@/ui/object/object-filter-dropdown/utils/turnFiltersIntoWhereClauseV2';
 import { turnSortsIntoOrderByV2 } from '@/ui/object/object-sort-dropdown/utils/turnSortsIntoOrderByV2';
+import { useBoardActionBarEntries } from '@/ui/object/record-board/hooks/useBoardActionBarEntries';
+import { useBoardContext } from '@/ui/object/record-board/hooks/useBoardContext';
+import { useBoardContextMenuEntries } from '@/ui/object/record-board/hooks/useBoardContextMenuEntries';
+import { availableBoardCardFieldsScopedState } from '@/ui/object/record-board/states/availableBoardCardFieldsScopedState';
+import { boardCardFieldsScopedState } from '@/ui/object/record-board/states/boardCardFieldsScopedState';
+import { isBoardLoadedState } from '@/ui/object/record-board/states/isBoardLoadedState';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useSetRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useSetRecoilScopedStateV2';
 import { useViewScopedStates } from '@/views/hooks/internal/useViewScopedStates';

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

@@ -3,8 +3,8 @@ import { useCallback, useContext, useState } from 'react';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
 import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
-import { NewButton } from '@/ui/layout/board/components/NewButton';
+import { NewButton } from '@/ui/object/record-board/components/NewButton';
-import { BoardColumnContext } from '@/ui/layout/board/contexts/BoardColumnContext';
+import { BoardColumnContext } from '@/ui/object/record-board/contexts/BoardColumnContext';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 

front/src/modules/companies/hooks/useUpdateBoardCardIds.ts

@@ -1,8 +1,8 @@
 import { useRecoilCallback } from 'recoil';
 
 import { Opportunity } from '@/pipeline/types/Opportunity';
-import { boardCardIdsByColumnIdFamilyState } from '@/ui/layout/board/states/boardCardIdsByColumnIdFamilyState';
+import { boardCardIdsByColumnIdFamilyState } from '@/ui/object/record-board/states/boardCardIdsByColumnIdFamilyState';
-import { boardColumnsState } from '@/ui/layout/board/states/boardColumnsState';
+import { boardColumnsState } from '@/ui/object/record-board/states/boardColumnsState';
 
 export const useUpdateCompanyBoardCardIds = () =>
   useRecoilCallback(

front/src/modules/companies/hooks/useUpdateCompanyBoardColumns.ts

@@ -3,11 +3,11 @@ import { useRecoilCallback } from 'recoil';
 import { currentPipelineStepsState } from '@/pipeline/states/currentPipelineStepsState';
 import { Opportunity } from '@/pipeline/types/Opportunity';
 import { PipelineStep } from '@/pipeline/types/PipelineStep';
-import { boardCardIdsByColumnIdFamilyState } from '@/ui/layout/board/states/boardCardIdsByColumnIdFamilyState';
-import { boardColumnsState } from '@/ui/layout/board/states/boardColumnsState';
-import { savedBoardColumnsState } from '@/ui/layout/board/states/savedBoardColumnsState';
-import { BoardColumnDefinition } from '@/ui/layout/board/types/BoardColumnDefinition';
 import { entityFieldsFamilyState } from '@/ui/object/field/states/entityFieldsFamilyState';
+import { boardCardIdsByColumnIdFamilyState } from '@/ui/object/record-board/states/boardCardIdsByColumnIdFamilyState';
+import { boardColumnsState } from '@/ui/object/record-board/states/boardColumnsState';
+import { savedBoardColumnsState } from '@/ui/object/record-board/states/savedBoardColumnsState';
+import { BoardColumnDefinition } from '@/ui/object/record-board/types/BoardColumnDefinition';
 import { isThemeColor } from '@/ui/theme/utils/castStringAsThemeColor';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 import { logError } from '~/utils/logError';

front/src/modules/companies/states/contexts/BoardContext.ts

@@ -1,8 +1,8 @@
 import { createContext } from 'react';
 
 import { RecoilScopeContext } from '@/types/RecoilScopeContext';
-import { BoardFieldDefinition } from '@/ui/layout/board/types/BoardFieldDefinition';
 import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
+import { BoardFieldDefinition } from '@/ui/object/record-board/types/BoardFieldDefinition';
 
 export const BoardContext = createContext<{
   BoardRecoilScopeContext: RecoilScopeContext;

front/src/modules/companies/utils/mapBoardFieldDefinitionsToViewFields.ts

@@ -1,5 +1,5 @@
-import { BoardFieldDefinition } from '@/ui/layout/board/types/BoardFieldDefinition';
 import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
+import { BoardFieldDefinition } from '@/ui/object/record-board/types/BoardFieldDefinition';
 import { ViewField } from '@/views/types/ViewField';
 
 export const mapBoardFieldDefinitionsToViewFields = (

front/src/modules/pipeline/hooks/usePipelineSteps.ts

@@ -4,7 +4,7 @@ import { useCreateOneObjectRecord } from '@/object-record/hooks/useCreateOneObje
 import { useDeleteOneObjectRecord } from '@/object-record/hooks/useDeleteOneObjectRecord';
 import { currentPipelineState } from '@/pipeline/states/currentPipelineState';
 import { PipelineStep } from '@/pipeline/types/PipelineStep';
-import { BoardColumnDefinition } from '@/ui/layout/board/types/BoardColumnDefinition';
+import { BoardColumnDefinition } from '@/ui/object/record-board/types/BoardColumnDefinition';
 
 export const usePipelineSteps = () => {
   const { createOneObject: createOnePipelineStep } =

front/src/modules/ui/layout/board/components/BoardColumn.tsx

@@ -1,120 +0,0 @@
-import React, { useContext } from 'react';
-import styled from '@emotion/styled';
-
-import { Tag } from '@/ui/display/tag/components/Tag';
-import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
-
-import { BoardColumnContext } from '../contexts/BoardColumnContext';
-import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope';
-
-import { BoardColumnMenu } from './BoardColumnMenu';
-
-const StyledColumn = styled.div<{ isFirstColumn: boolean }>`
-  background-color: ${({ theme }) => theme.background.primary};
-  border-left: 1px solid
-    ${({ theme, isFirstColumn }) =>
-      isFirstColumn ? 'none' : theme.border.color.light};
-  display: flex;
-  flex-direction: column;
-  max-width: 200px;
-  min-width: 200px;
-
-  padding: ${({ theme }) => theme.spacing(2)};
-  position: relative;
-`;
-
-const StyledHeader = styled.div`
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  height: 24px;
-  justify-content: left;
-  margin-bottom: ${({ theme }) => theme.spacing(2)};
-  width: 100%;
-`;
-
-const StyledAmount = styled.div`
-  color: ${({ theme }) => theme.font.color.tertiary};
-  margin-left: ${({ theme }) => theme.spacing(2)};
-`;
-
-const StyledNumChildren = styled.div`
-  align-items: center;
-  background-color: ${({ theme }) => theme.background.tertiary};
-  border-radius: ${({ theme }) => theme.border.radius.rounded};
-  color: ${({ theme }) => theme.font.color.tertiary};
-  display: flex;
-  height: 20px;
-  justify-content: center;
-  line-height: ${({ theme }) => theme.text.lineHeight.lg};
-  margin-left: auto;
-  width: 16px;
-`;
-
-export type BoardColumnProps = {
-  onDelete?: (id: string) => void;
-  onTitleEdit: (title: string, color: string) => void;
-  totalAmount?: number;
-  children: React.ReactNode;
-  numChildren: number;
-  stageId: string;
-};
-
-export const BoardColumn = ({
-  onDelete,
-  onTitleEdit,
-  totalAmount,
-  children,
-  numChildren,
-  stageId,
-}: BoardColumnProps) => {
-  const boardColumn = useContext(BoardColumnContext);
-
-  const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] =
-    React.useState(false);
-
-  const {
-    setHotkeyScopeAndMemorizePreviousScope,
-    goBackToPreviousHotkeyScope,
-  } = usePreviousHotkeyScope();
-
-  const handleTitleClick = () => {
-    setIsBoardColumnMenuOpen(true);
-    setHotkeyScopeAndMemorizePreviousScope(BoardColumnHotkeyScope.BoardColumn, {
-      goto: false,
-    });
-  };
-
-  const handleClose = () => {
-    goBackToPreviousHotkeyScope();
-    setIsBoardColumnMenuOpen(false);
-  };
-
-  if (!boardColumn) return <></>;
-
-  const { isFirstColumn, columnDefinition } = boardColumn;
-
-  return (
-    <StyledColumn isFirstColumn={isFirstColumn}>
-      <StyledHeader>
-        <Tag
-          onClick={handleTitleClick}
-          color={columnDefinition.colorCode ?? 'gray'}
-          text={columnDefinition.title}
-        />
-        {!!totalAmount && <StyledAmount>${totalAmount}</StyledAmount>}
-        <StyledNumChildren>{numChildren}</StyledNumChildren>
-      </StyledHeader>
-      {isBoardColumnMenuOpen && (
-        <BoardColumnMenu
-          onClose={handleClose}
-          onDelete={onDelete}
-          onTitleEdit={onTitleEdit}
-          stageId={stageId}
-        />
-      )}
-      {children}
-    </StyledColumn>
-  );
-};

front/src/modules/ui/layout/board/components/EntityBoardColumn.tsx

@@ -1,123 +0,0 @@
-import { useContext } from 'react';
-import styled from '@emotion/styled';
-import { Draggable, Droppable, DroppableProvided } from '@hello-pangea/dnd';
-import { useRecoilValue } from 'recoil';
-
-import { BoardColumn } from '@/ui/layout/board/components/BoardColumn';
-import { BoardCardIdContext } from '@/ui/layout/board/contexts/BoardCardIdContext';
-import { BoardColumnContext } from '@/ui/layout/board/contexts/BoardColumnContext';
-import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
-
-import { boardCardIdsByColumnIdFamilyState } from '../states/boardCardIdsByColumnIdFamilyState';
-import { boardColumnTotalsFamilySelector } from '../states/selectors/boardColumnTotalsFamilySelector';
-import { BoardOptions } from '../types/BoardOptions';
-
-import { EntityBoardCard } from './EntityBoardCard';
-
-const StyledPlaceholder = styled.div`
-  min-height: 1px;
-`;
-
-const StyledNewCardButtonContainer = styled.div`
-  padding-bottom: ${({ theme }) => theme.spacing(4)};
-`;
-
-const StyledColumnCardsContainer = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-`;
-
-type BoardColumnCardsContainerProps = {
-  children: React.ReactNode;
-  droppableProvided: DroppableProvided;
-};
-
-type EntityBoardColumnProps = {
-  boardOptions: BoardOptions;
-  onDelete?: (columnId: string) => void;
-  onTitleEdit: (columnId: string, title: string, color: string) => void;
-};
-
-const BoardColumnCardsContainer = ({
-  children,
-  droppableProvided,
-}: BoardColumnCardsContainerProps) => {
-  return (
-    <StyledColumnCardsContainer
-      ref={droppableProvided?.innerRef}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...droppableProvided?.droppableProps}
-    >
-      {children}
-      <StyledPlaceholder>{droppableProvided?.placeholder}</StyledPlaceholder>
-    </StyledColumnCardsContainer>
-  );
-};
-
-export const EntityBoardColumn = ({
-  boardOptions,
-  onDelete,
-  onTitleEdit,
-}: EntityBoardColumnProps) => {
-  const column = useContext(BoardColumnContext);
-
-  const boardColumnId = column?.id || '';
-
-  const boardColumnTotal = useRecoilValue(
-    boardColumnTotalsFamilySelector(boardColumnId),
-  );
-
-  const cardIds = useRecoilValue(
-    boardCardIdsByColumnIdFamilyState(boardColumnId),
-  );
-
-  const handleTitleEdit = (title: string, color: string) => {
-    onTitleEdit(boardColumnId, title, color);
-  };
-
-  if (!column) return <></>;
-
-  return (
-    <Droppable droppableId={column.id}>
-      {(droppableProvided) => (
-        <BoardColumn
-          onTitleEdit={handleTitleEdit}
-          onDelete={onDelete}
-          totalAmount={boardColumnTotal}
-          numChildren={cardIds.length}
-          stageId={column.id}
-        >
-          <BoardColumnCardsContainer droppableProvided={droppableProvided}>
-            {cardIds.map((cardId, index) => (
-              <BoardCardIdContext.Provider value={cardId} key={cardId}>
-                <EntityBoardCard
-                  index={index}
-                  cardId={cardId}
-                  boardOptions={boardOptions}
-                />
-              </BoardCardIdContext.Provider>
-            ))}
-            <Draggable
-              draggableId={`new-${column.id}`}
-              index={cardIds.length}
-              isDragDisabled={true}
-            >
-              {(draggableProvided) => (
-                <div
-                  ref={draggableProvided?.innerRef}
-                  // eslint-disable-next-line react/jsx-props-no-spreading
-                  {...draggableProvided?.draggableProps}
-                >
-                  <StyledNewCardButtonContainer>
-                    <RecoilScope>{boardOptions.newCardComponent}</RecoilScope>
-                  </StyledNewCardButtonContainer>
-                </div>
-              )}
-            </Draggable>
-          </BoardColumnCardsContainer>
-        </BoardColumn>
-      )}
-    </Droppable>
-  );
-};

front/src/modules/ui/layout/board/components/StyledBoard.tsx

@@ -1,10 +0,0 @@
-import styled from '@emotion/styled';
-
-export const StyledBoard = styled.div`
-  border-top: 1px solid ${({ theme }) => theme.border.color.light};
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  margin-left: ${({ theme }) => theme.spacing(2)};
-  margin-right: ${({ theme }) => theme.spacing(2)};
-`;

front/src/modules/ui/object/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx

@@ -25,7 +25,6 @@ export const SingleEntityObjectFilterDropdownButton = ({
     selectedFilter,
     setFilterDefinitionUsedInDropdown,
     setSelectedOperandInDropdown,
-    resetFilter,
   } = useFilter();
 
   const availableFilter = availableFilterDefinitions[0];

front/src/modules/ui/object/record-board/action-bar/components/RecordBoardActionBar.tsx

@@ -3,9 +3,9 @@ import { useRecoilValue } from 'recoil';
 
 import { ActionBar } from '@/ui/navigation/action-bar/components/ActionBar';
 
-import { selectedCardIdsSelector } from '../states/selectors/selectedCardIdsSelector';
+import { selectedCardIdsSelector } from '../../states/selectors/selectedCardIdsSelector';
 
-export const EntityBoardActionBar = () => {
+export const RecordBoardActionBar = () => {
   const selectedCardIds = useRecoilValue(selectedCardIdsSelector);
   return <ActionBar selectedIds={selectedCardIds}></ActionBar>;
 };

front/src/modules/ui/object/record-board/components/RecordBoard.tsx

@@ -6,11 +6,10 @@ import { useRecoilValue } from 'recoil';
 import { useUpdateOneObjectRecord } from '@/object-record/hooks/useUpdateOneObjectRecord';
 import { Opportunity } from '@/pipeline/types/Opportunity';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
-import { StyledBoard } from '@/ui/layout/board/components/StyledBoard';
+import { BoardColumnContext } from '@/ui/object/record-board/contexts/BoardColumnContext';
-import { BoardColumnContext } from '@/ui/layout/board/contexts/BoardColumnContext';
+import { useSetCardSelected } from '@/ui/object/record-board/hooks/useSetCardSelected';
-import { useSetCardSelected } from '@/ui/layout/board/hooks/useSetCardSelected';
+import { useUpdateBoardCardIds } from '@/ui/object/record-board/hooks/useUpdateBoardCardIds';
-import { useUpdateBoardCardIds } from '@/ui/layout/board/hooks/useUpdateBoardCardIds';
+import { boardColumnsState } from '@/ui/object/record-board/states/boardColumnsState';
-import { boardColumnsState } from '@/ui/layout/board/states/boardColumnsState';
 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';
@@ -22,15 +21,24 @@ import { BoardColumnRecoilScopeContext } from '../states/recoil-scope-contexts/B
 import { BoardColumnDefinition } from '../types/BoardColumnDefinition';
 import { BoardOptions } from '../types/BoardOptions';
 
-import { EntityBoardColumn } from './EntityBoardColumn';
+import { RecordBoardColumn } from './RecordBoardColumn';
 
-export type EntityBoardProps = {
+export type RecordBoardProps = {
   boardOptions: BoardOptions;
   onColumnAdd?: (boardColumn: BoardColumnDefinition) => void;
   onColumnDelete?: (boardColumnId: string) => void;
   onEditColumnTitle: (columnId: string, title: string, color: string) => void;
 };
 
+const StyledBoard = styled.div`
+  border-top: 1px solid ${({ theme }) => theme.border.color.light};
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  margin-left: ${({ theme }) => theme.spacing(2)};
+  margin-right: ${({ theme }) => theme.spacing(2)};
+`;
+
 const StyledWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -45,11 +53,11 @@ const StyledBoardHeader = styled.div`
   z-index: 1;
 `;
 
-export const EntityBoard = ({
+export const RecordBoard = ({
   boardOptions,
   onColumnDelete,
   onEditColumnTitle,
-}: EntityBoardProps) => {
+}: RecordBoardProps) => {
   const boardColumns = useRecoilValue(boardColumnsState);
 
   const { updateOneObject: updateOneOpportunity } =
@@ -140,7 +148,7 @@ export const EntityBoard = ({
                   CustomRecoilScopeContext={BoardColumnRecoilScopeContext}
                   key={column.id}
                 >
-                  <EntityBoardColumn
+                  <RecordBoardColumn
                     boardOptions={boardOptions}
                     onDelete={onColumnDelete}
                     onTitleEdit={onEditColumnTitle}

front/src/modules/ui/object/record-board/components/RecordBoardCard.tsx

@@ -7,7 +7,7 @@ import { contextMenuPositionState } from '@/ui/navigation/context-menu/states/co
 import { useCurrentCardSelected } from '../hooks/useCurrentCardSelected';
 import { BoardOptions } from '../types/BoardOptions';
 
-export const EntityBoardCard = ({
+export const RecordBoardCard = ({
   boardOptions,
   cardId,
   index,

front/src/modules/ui/object/record-board/components/RecordBoardColumn.tsx

@@ -0,0 +1,204 @@
+import React, { useContext } from 'react';
+import styled from '@emotion/styled';
+import { Draggable, Droppable, DroppableProvided } from '@hello-pangea/dnd';
+import { useRecoilValue } from 'recoil';
+
+import { Tag } from '@/ui/display/tag/components/Tag';
+import { RecordBoardCard } from '@/ui/object/record-board/components/RecordBoardCard';
+import { BoardCardIdContext } from '@/ui/object/record-board/contexts/BoardCardIdContext';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+
+import { BoardColumnContext } from '../contexts/BoardColumnContext';
+import { boardCardIdsByColumnIdFamilyState } from '../states/boardCardIdsByColumnIdFamilyState';
+import { boardColumnTotalsFamilySelector } from '../states/selectors/boardColumnTotalsFamilySelector';
+import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope';
+import { BoardOptions } from '../types/BoardOptions';
+
+import { RecordBoardColumnDropdownMenu } from './RecordBoardColumnDropdownMenu';
+
+const StyledPlaceholder = styled.div`
+  min-height: 1px;
+`;
+
+const StyledNewCardButtonContainer = styled.div`
+  padding-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledColumnCardsContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+`;
+
+const StyledColumn = styled.div<{ isFirstColumn: boolean }>`
+  background-color: ${({ theme }) => theme.background.primary};
+  border-left: 1px solid
+    ${({ theme, isFirstColumn }) =>
+      isFirstColumn ? 'none' : theme.border.color.light};
+  display: flex;
+  flex-direction: column;
+  max-width: 200px;
+  min-width: 200px;
+
+  padding: ${({ theme }) => theme.spacing(2)};
+  position: relative;
+`;
+
+const StyledHeader = styled.div`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  height: 24px;
+  justify-content: left;
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+  width: 100%;
+`;
+
+const StyledAmount = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  margin-left: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledNumChildren = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.tertiary};
+  border-radius: ${({ theme }) => theme.border.radius.rounded};
+  color: ${({ theme }) => theme.font.color.tertiary};
+  display: flex;
+  height: 20px;
+  justify-content: center;
+  line-height: ${({ theme }) => theme.text.lineHeight.lg};
+  margin-left: auto;
+  width: 16px;
+`;
+
+type BoardColumnCardsContainerProps = {
+  children: React.ReactNode;
+  droppableProvided: DroppableProvided;
+};
+
+type RecordBoardColumnProps = {
+  boardOptions: BoardOptions;
+  onDelete?: (columnId: string) => void;
+  onTitleEdit: (columnId: string, title: string, color: string) => void;
+};
+
+const BoardColumnCardsContainer = ({
+  children,
+  droppableProvided,
+}: BoardColumnCardsContainerProps) => {
+  return (
+    <StyledColumnCardsContainer
+      ref={droppableProvided?.innerRef}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...droppableProvided?.droppableProps}
+    >
+      {children}
+      <StyledPlaceholder>{droppableProvided?.placeholder}</StyledPlaceholder>
+    </StyledColumnCardsContainer>
+  );
+};
+
+export const RecordBoardColumn = ({
+  boardOptions,
+  onDelete,
+  onTitleEdit,
+}: RecordBoardColumnProps) => {
+  const column = useContext(BoardColumnContext);
+
+  const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] =
+    React.useState(false);
+
+  const {
+    setHotkeyScopeAndMemorizePreviousScope,
+    goBackToPreviousHotkeyScope,
+  } = usePreviousHotkeyScope();
+
+  const handleTitleClick = () => {
+    setIsBoardColumnMenuOpen(true);
+    setHotkeyScopeAndMemorizePreviousScope(BoardColumnHotkeyScope.BoardColumn, {
+      goto: false,
+    });
+  };
+
+  const handleClose = () => {
+    goBackToPreviousHotkeyScope();
+    setIsBoardColumnMenuOpen(false);
+  };
+
+  const boardColumnId = column?.id || '';
+
+  const boardColumnTotal = useRecoilValue(
+    boardColumnTotalsFamilySelector(boardColumnId),
+  );
+
+  const cardIds = useRecoilValue(
+    boardCardIdsByColumnIdFamilyState(boardColumnId),
+  );
+
+  const handleTitleEdit = (title: string, color: string) => {
+    onTitleEdit(boardColumnId, title, color);
+  };
+
+  if (!column) return <></>;
+
+  const { isFirstColumn, columnDefinition } = column;
+
+  return (
+    <Droppable droppableId={column.id}>
+      {(droppableProvided) => (
+        <StyledColumn isFirstColumn={isFirstColumn}>
+          <StyledHeader>
+            <Tag
+              onClick={handleTitleClick}
+              color={columnDefinition.colorCode ?? 'gray'}
+              text={columnDefinition.title}
+            />
+            {!!boardColumnTotal && (
+              <StyledAmount>${boardColumnTotal}</StyledAmount>
+            )}
+            <StyledNumChildren>{cardIds.length}</StyledNumChildren>
+          </StyledHeader>
+          {isBoardColumnMenuOpen && (
+            <RecordBoardColumnDropdownMenu
+              onClose={handleClose}
+              onDelete={onDelete}
+              onTitleEdit={handleTitleEdit}
+              stageId={boardColumnId}
+            />
+          )}
+          <BoardColumnCardsContainer droppableProvided={droppableProvided}>
+            {cardIds.map((cardId, index) => (
+              <BoardCardIdContext.Provider value={cardId} key={cardId}>
+                <RecordBoardCard
+                  index={index}
+                  cardId={cardId}
+                  boardOptions={boardOptions}
+                />
+              </BoardCardIdContext.Provider>
+            ))}
+            <Draggable
+              draggableId={`new-${column.id}`}
+              index={cardIds.length}
+              isDragDisabled={true}
+            >
+              {(draggableProvided) => (
+                <div
+                  ref={draggableProvided?.innerRef}
+                  // eslint-disable-next-line react/jsx-props-no-spreading
+                  {...draggableProvided?.draggableProps}
+                >
+                  <StyledNewCardButtonContainer>
+                    <RecoilScope>{boardOptions.newCardComponent}</RecoilScope>
+                  </StyledNewCardButtonContainer>
+                </div>
+              )}
+            </Draggable>
+          </BoardColumnCardsContainer>
+        </StyledColumn>
+      )}
+    </Droppable>
+  );
+};

front/src/modules/ui/object/record-board/components/RecordBoardColumnDropdownMenu.tsx

@@ -25,7 +25,7 @@ import { BoardColumnContext } from '../contexts/BoardColumnContext';
 import { useBoardColumns } from '../hooks/useBoardColumns';
 import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope';
 
-import { BoardColumnEditTitleMenu } from './BoardColumnEditTitleMenu';
+import { RecordBoardColumnEditTitleMenu } from './RecordBoardColumnEditTitleMenu';
 const StyledMenuContainer = styled.div`
   position: absolute;
   top: ${({ theme }) => theme.spacing(10)};
@@ -33,7 +33,7 @@ const StyledMenuContainer = styled.div`
   z-index: 1;
 `;
 
-type BoardColumnMenuProps = {
+type RecordBoardColumnDropdownMenuProps = {
   onClose: () => void;
   onDelete?: (id: string) => void;
   onTitleEdit: (title: string, color: string) => void;
@@ -42,12 +42,12 @@ type BoardColumnMenuProps = {
 
 type Menu = 'actions' | 'add' | 'title';
 
-export const BoardColumnMenu = ({
+export const RecordBoardColumnDropdownMenu = ({
   onClose,
   onDelete,
   onTitleEdit,
   stageId,
-}: BoardColumnMenuProps) => {
+}: RecordBoardColumnDropdownMenuProps) => {
   const [currentMenu, setCurrentMenu] = useState('actions');
   const column = useContext(BoardColumnContext);
 
@@ -160,7 +160,7 @@ export const BoardColumnMenu = ({
           </DropdownMenuItemsContainer>
         )}
         {currentMenu === 'title' && (
-          <BoardColumnEditTitleMenu
+          <RecordBoardColumnEditTitleMenu
             color={columnDefinition.colorCode ?? 'gray'}
             onClose={closeMenu}
             onTitleEdit={onTitleEdit}

front/src/modules/ui/object/record-board/components/RecordBoardColumnEditTitleMenu.tsx

@@ -40,7 +40,7 @@ const StyledEditModeInput = styled.input`
   width: 100%;
 `;
 
-export type BoardColumnEditTitleMenuProps = {
+type RecordBoardColumnEditTitleMenuProps = {
   onClose: () => void;
   onDelete?: (id: string) => void;
   title: string;
@@ -67,14 +67,14 @@ export const COLUMN_COLOR_OPTIONS: ColumnColorOption[] = [
   { name: 'Gray', id: 'gray' },
 ];
 
-export const BoardColumnEditTitleMenu = ({
+export const RecordBoardColumnEditTitleMenu = ({
   onClose,
   onDelete,
   stageId,
   onTitleEdit,
   title,
   color,
-}: BoardColumnEditTitleMenuProps) => {
+}: RecordBoardColumnEditTitleMenuProps) => {
   const [internalValue, setInternalValue] = useState(title);
   const [, setBoardColumns] = useRecoilState(boardColumnsState);
   const debouncedOnUpdateTitle = debounce(

front/src/modules/ui/object/record-board/components/__stories__/RecordBoardColumnEditTitleMenu.stories.tsx

@@ -3,13 +3,13 @@ import { Meta, StoryObj } from '@storybook/react';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import {
-  BoardColumnEditTitleMenu,
   COLUMN_COLOR_OPTIONS,
-} from '../BoardColumnEditTitleMenu';
+  RecordBoardColumnEditTitleMenu,
+} from '../RecordBoardColumnEditTitleMenu';
 
-const meta: Meta<typeof BoardColumnEditTitleMenu> = {
+const meta: Meta<typeof RecordBoardColumnEditTitleMenu> = {
   title: 'UI/Layout/Board/BoardColumnMenu',
-  component: BoardColumnEditTitleMenu,
+  component: RecordBoardColumnEditTitleMenu,
   decorators: [ComponentDecorator],
   argTypes: {
     color: {
@@ -21,6 +21,6 @@ const meta: Meta<typeof BoardColumnEditTitleMenu> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof BoardColumnEditTitleMenu>;
+type Story = StoryObj<typeof RecordBoardColumnEditTitleMenu>;
 
 export const AllTags: Story = {};

front/src/modules/ui/object/record-board/context-menu/components/RecordBoardContextMenu.tsx

@@ -3,9 +3,9 @@ import { useRecoilValue } from 'recoil';
 
 import { ContextMenu } from '@/ui/navigation/context-menu/components/ContextMenu';
 
-import { selectedCardIdsSelector } from '../states/selectors/selectedCardIdsSelector';
+import { selectedCardIdsSelector } from '../../states/selectors/selectedCardIdsSelector';
 
-export const EntityBoardContextMenu = () => {
+export const RecordBoardContextMenu = () => {
   const selectedCardIds = useRecoilValue(selectedCardIdsSelector);
   return <ContextMenu selectedIds={selectedCardIds}></ContextMenu>;
 };

front/src/modules/ui/object/record-board/contexts/BoardOptionsContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
 
-import { BoardOptions } from '@/ui/layout/board/types/BoardOptions';
+import { BoardOptions } from '@/ui/object/record-board/types/BoardOptions';
 
 export const BoardOptionsContext = createContext<BoardOptions | null>(null);

front/src/modules/ui/object/record-board/hooks/useBoardActionBarEntries.tsx

@@ -2,8 +2,8 @@ import { useCallback } from 'react';
 import { useSetRecoilState } from 'recoil';
 
 import { IconTrash } from '@/ui/display/icon';
-import { useDeleteSelectedBoardCards } from '@/ui/layout/board/hooks/useDeleteSelectedBoardCards';
 import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState';
+import { useDeleteSelectedBoardCards } from '@/ui/object/record-board/hooks/useDeleteSelectedBoardCards';
 
 export const useBoardActionBarEntries = () => {
   const setActionBarEntriesRecoil = useSetRecoilState(actionBarEntriesState);

front/src/modules/ui/object/record-board/hooks/useBoardCardFields.ts

@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
 
-import { savedBoardCardFieldsFamilyState } from '@/ui/layout/board/states/savedBoardCardFieldsFamilyState';
-import { BoardFieldDefinition } from '@/ui/layout/board/types/BoardFieldDefinition';
 import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
+import { savedBoardCardFieldsFamilyState } from '@/ui/object/record-board/states/savedBoardCardFieldsFamilyState';
+import { BoardFieldDefinition } from '@/ui/object/record-board/types/BoardFieldDefinition';
 import { ColumnDefinition } from '@/ui/object/record-table/types/ColumnDefinition';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 

front/src/modules/ui/object/record-board/hooks/useBoardContextMenuEntries.tsx

@@ -2,8 +2,8 @@ import { useCallback } from 'react';
 import { useSetRecoilState } from 'recoil';
 
 import { IconTrash } from '@/ui/display/icon';
-import { useDeleteSelectedBoardCards } from '@/ui/layout/board/hooks/useDeleteSelectedBoardCards';
 import { contextMenuEntriesState } from '@/ui/navigation/context-menu/states/contextMenuEntriesState';
+import { useDeleteSelectedBoardCards } from '@/ui/object/record-board/hooks/useDeleteSelectedBoardCards';
 
 export const useBoardContextMenuEntries = () => {
   const setContextMenuEntriesRecoil = useSetRecoilState(

front/src/modules/ui/object/record-board/hooks/useCurrentCardSelected.ts

@@ -1,8 +1,8 @@
 import { useContext } from 'react';
 import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
 
-import { activeCardIdsState } from '@/ui/layout/board/states/activeCardIdsState';
 import { actionBarOpenState } from '@/ui/navigation/action-bar/states/actionBarIsOpenState';
+import { activeCardIdsState } from '@/ui/object/record-board/states/activeCardIdsState';
 
 import { BoardCardIdContext } from '../contexts/BoardCardIdContext';
 import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';

front/src/modules/ui/object/record-board/options/components/BoardOptionsDropdown.tsx

@@ -1,10 +1,10 @@
 import { useView } from '@/views/hooks/useView';
 
-import { Dropdown } from '../../dropdown/components/Dropdown';
+import { Dropdown } from '../../../../layout/dropdown/components/Dropdown';
-import { DropdownScope } from '../../dropdown/scopes/DropdownScope';
+import { DropdownScope } from '../../../../layout/dropdown/scopes/DropdownScope';
-import { BoardOptionsHotkeyScope } from '../types/BoardOptionsHotkeyScope';
+import { BoardOptionsDropdownId } from '../../components/constants/BoardOptionsDropdownId';
+import { BoardOptionsHotkeyScope } from '../../types/BoardOptionsHotkeyScope';
 
-import { BoardOptionsDropdownId } from './constants/BoardOptionsDropdownId';
 import { BoardOptionsDropdownButton } from './BoardOptionsDropdownButton';
 import {
   BoardOptionsDropdownContent,

front/src/modules/ui/object/record-board/options/components/BoardOptionsDropdownContent.tsx

@@ -28,13 +28,13 @@ import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFiel
 import { useViewScopedStates } from '@/views/hooks/internal/useViewScopedStates';
 import { useView } from '@/views/hooks/useView';
 
-import { useBoardCardFields } from '../hooks/useBoardCardFields';
+import { useBoardCardFields } from '../../hooks/useBoardCardFields';
-import { boardColumnsState } from '../states/boardColumnsState';
+import { boardColumnsState } from '../../states/boardColumnsState';
-import { isCompactViewEnabledState } from '../states/isCompactViewEnabledState';
+import { isCompactViewEnabledState } from '../../states/isCompactViewEnabledState';
-import { hiddenBoardCardFieldsScopedSelector } from '../states/selectors/hiddenBoardCardFieldsScopedSelector';
+import { hiddenBoardCardFieldsScopedSelector } from '../../states/selectors/hiddenBoardCardFieldsScopedSelector';
-import { visibleBoardCardFieldsScopedSelector } from '../states/selectors/visibleBoardCardFieldsScopedSelector';
+import { visibleBoardCardFieldsScopedSelector } from '../../states/selectors/visibleBoardCardFieldsScopedSelector';
-import { BoardColumnDefinition } from '../types/BoardColumnDefinition';
+import { BoardColumnDefinition } from '../../types/BoardColumnDefinition';
-import { BoardOptionsHotkeyScope } from '../types/BoardOptionsHotkeyScope';
+import { BoardOptionsHotkeyScope } from '../../types/BoardOptionsHotkeyScope';
 
 export type BoardOptionsDropdownContentProps = {
   onStageAdd?: (boardColumn: BoardColumnDefinition) => void;

front/src/modules/ui/object/record-board/states/boardColumnsState.ts

@@ -1,6 +1,6 @@
 import { atom } from 'recoil';
 
-import { BoardColumnDefinition } from '@/ui/layout/board/types/BoardColumnDefinition';
+import { BoardColumnDefinition } from '@/ui/object/record-board/types/BoardColumnDefinition';
 
 export const boardColumnsState = atom<BoardColumnDefinition[]>({
   key: 'boardColumnsState',

front/src/modules/views/types/ViewField.ts

@@ -1,4 +1,4 @@
-import { BoardFieldDefinition } from '@/ui/layout/board/types/BoardFieldDefinition';
+import { BoardFieldDefinition } from '@/ui/object/record-board/types/BoardFieldDefinition';
 import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
 import { ColumnDefinition } from '@/ui/object/record-table/types/ColumnDefinition';
 

front/src/modules/views/utils/mapViewFieldsToBoardFieldDefinitions.ts

@@ -1,5 +1,5 @@
-import { BoardFieldDefinition } from '@/ui/layout/board/types/BoardFieldDefinition';
 import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
+import { BoardFieldDefinition } from '@/ui/object/record-board/types/BoardFieldDefinition';
 import { assertNotNull } from '~/utils/assert';
 
 import { ViewField } from '../types/ViewField';

front/src/pages/opportunities/Opportunities.tsx

@@ -7,10 +7,10 @@ import { PipelineAddButton } from '@/pipeline/components/PipelineAddButton';
 import { usePipelineSteps } from '@/pipeline/hooks/usePipelineSteps';
 import { PipelineStep } from '@/pipeline/types/PipelineStep';
 import { IconTargetArrow } from '@/ui/display/icon';
-import { BoardOptionsContext } from '@/ui/layout/board/contexts/BoardOptionsContext';
 import { PageBody } from '@/ui/layout/page/PageBody';
 import { PageContainer } from '@/ui/layout/page/PageContainer';
 import { PageHeader } from '@/ui/layout/page/PageHeader';
+import { BoardOptionsContext } from '@/ui/object/record-board/contexts/BoardOptionsContext';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';
 

front/src/pages/opportunities/opportunitiesBoardOptions.tsx

@@ -1,6 +1,6 @@
 import { CompanyBoardCard } from '@/companies/components/CompanyBoardCard';
 import { NewCompanyProgressButton } from '@/companies/components/NewCompanyProgressButton';
-import { BoardOptions } from '@/ui/layout/board/types/BoardOptions';
+import { BoardOptions } from '@/ui/object/record-board/types/BoardOptions';
 
 import { opportunityBoardFilterDefinitions } from './constants/opportunityBoardFilterDefinitions';
 import { opportunityBoardSortDefinitions } from './constants/opportunityBoardSortDefinitions';