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/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/layout/board/contexts/BoardColumnContext';
-import { useSetCardSelected } from '@/ui/layout/board/hooks/useSetCardSelected';
-import { useUpdateBoardCardIds } from '@/ui/layout/board/hooks/useUpdateBoardCardIds';
-import { boardColumnsState } from '@/ui/layout/board/states/boardColumnsState';
+import { BoardColumnContext } from '@/ui/object/record-board/contexts/BoardColumnContext';
+import { useSetCardSelected } from '@/ui/object/record-board/hooks/useSetCardSelected';
+import { useUpdateBoardCardIds } from '@/ui/object/record-board/hooks/useUpdateBoardCardIds';
+import { boardColumnsState } from '@/ui/object/record-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 { DropdownScope } from '../../dropdown/scopes/DropdownScope';
-import { BoardOptionsHotkeyScope } from '../types/BoardOptionsHotkeyScope';
+import { Dropdown } from '../../../../layout/dropdown/components/Dropdown';
+import { DropdownScope } from '../../../../layout/dropdown/scopes/DropdownScope';
+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 { boardColumnsState } from '../states/boardColumnsState';
-import { isCompactViewEnabledState } from '../states/isCompactViewEnabledState';
-import { hiddenBoardCardFieldsScopedSelector } from '../states/selectors/hiddenBoardCardFieldsScopedSelector';
-import { visibleBoardCardFieldsScopedSelector } from '../states/selectors/visibleBoardCardFieldsScopedSelector';
-import { BoardColumnDefinition } from '../types/BoardColumnDefinition';
-import { BoardOptionsHotkeyScope } from '../types/BoardOptionsHotkeyScope';
+import { useBoardCardFields } from '../../hooks/useBoardCardFields';
+import { boardColumnsState } from '../../states/boardColumnsState';
+import { isCompactViewEnabledState } from '../../states/isCompactViewEnabledState';
+import { hiddenBoardCardFieldsScopedSelector } from '../../states/selectors/hiddenBoardCardFieldsScopedSelector';
+import { visibleBoardCardFieldsScopedSelector } from '../../states/selectors/visibleBoardCardFieldsScopedSelector';
+import { BoardColumnDefinition } from '../../types/BoardColumnDefinition';
+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',