diff --git a/packages/twenty-front/src/modules/page-layout/components/__stories__/PageLayoutRenderer.stories.tsx b/packages/twenty-front/src/modules/page-layout/components/__stories__/PageLayoutRenderer.stories.tsx
index c9018573bd..95a5180d01 100644
--- a/packages/twenty-front/src/modules/page-layout/components/__stories__/PageLayoutRenderer.stories.tsx
+++ b/packages/twenty-front/src/modules/page-layout/components/__stories__/PageLayoutRenderer.stories.tsx
@@ -277,7 +277,7 @@ const meta: Meta
= {
{
getPageLayoutVerticalListViewerVariant({
isInPinnedTab: true,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
}),
).toBe('side-column');
});
@@ -16,17 +16,17 @@ describe('getPageLayoutVerticalListViewerVariant', () => {
getPageLayoutVerticalListViewerVariant({
isInPinnedTab: false,
isMobile: true,
- isInRightDrawer: false,
+ isInSidePanel: false,
}),
).toBe('side-column');
});
- it('should return side-column when isInRightDrawer is true', () => {
+ it('should return side-column when isInSidePanel is true', () => {
expect(
getPageLayoutVerticalListViewerVariant({
isInPinnedTab: false,
isMobile: false,
- isInRightDrawer: true,
+ isInSidePanel: true,
}),
).toBe('side-column');
});
@@ -36,7 +36,7 @@ describe('getPageLayoutVerticalListViewerVariant', () => {
getPageLayoutVerticalListViewerVariant({
isInPinnedTab: false,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
}),
).toBe('default');
});
diff --git a/packages/twenty-front/src/modules/page-layout/components/utils/getPageLayoutVerticalListViewerVariant.ts b/packages/twenty-front/src/modules/page-layout/components/utils/getPageLayoutVerticalListViewerVariant.ts
index 8b06737691..be1f33bfcb 100644
--- a/packages/twenty-front/src/modules/page-layout/components/utils/getPageLayoutVerticalListViewerVariant.ts
+++ b/packages/twenty-front/src/modules/page-layout/components/utils/getPageLayoutVerticalListViewerVariant.ts
@@ -3,15 +3,15 @@ import { type PageLayoutVerticalListViewerVariant } from '@/page-layout/types/Pa
type GetPageLayoutVerticalListViewerVariantParams = {
isInPinnedTab: boolean;
isMobile: boolean;
- isInRightDrawer: boolean;
+ isInSidePanel: boolean;
};
export const getPageLayoutVerticalListViewerVariant = ({
isInPinnedTab,
isMobile,
- isInRightDrawer,
+ isInSidePanel,
}: GetPageLayoutVerticalListViewerVariantParams): PageLayoutVerticalListViewerVariant => {
- if (isInPinnedTab || isMobile || isInRightDrawer) {
+ if (isInPinnedTab || isMobile || isInSidePanel) {
return 'side-column';
}
diff --git a/packages/twenty-front/src/modules/page-layout/hooks/__tests__/useCreateWidgetFromClick.test.tsx b/packages/twenty-front/src/modules/page-layout/hooks/__tests__/useCreateWidgetFromClick.test.tsx
index f9d89093dd..3b4ebcff7e 100644
--- a/packages/twenty-front/src/modules/page-layout/hooks/__tests__/useCreateWidgetFromClick.test.tsx
+++ b/packages/twenty-front/src/modules/page-layout/hooks/__tests__/useCreateWidgetFromClick.test.tsx
@@ -1,27 +1,27 @@
-import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu';
+import { useNavigatePageLayoutSidePanel } from '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel';
import { useCreateWidgetFromClick } from '@/page-layout/hooks/useCreateWidgetFromClick';
import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLayoutDraggedAreaComponentState';
import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { act, renderHook } from '@testing-library/react';
import { type ReactNode } from 'react';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import {
PAGE_LAYOUT_TEST_INSTANCE_ID,
PageLayoutTestWrapper,
} from './PageLayoutTestWrapper';
jest.mock(
- '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu',
+ '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel',
);
describe('useCreateWidgetFromClick', () => {
- const mockNavigatePageLayoutCommandMenu = jest.fn();
+ const mockNavigatePageLayoutSidePanel = jest.fn();
beforeEach(() => {
jest.clearAllMocks();
- (useNavigatePageLayoutCommandMenu as jest.Mock).mockReturnValue({
- navigatePageLayoutCommandMenu: mockNavigatePageLayoutCommandMenu,
+ (useNavigatePageLayoutSidePanel as jest.Mock).mockReturnValue({
+ navigatePageLayoutSidePanel: mockNavigatePageLayoutSidePanel,
});
});
@@ -51,8 +51,8 @@ describe('useCreateWidgetFromClick', () => {
expect(result.current.draggedArea).toEqual({ x: 2, y: 3, w: 1, h: 1 });
expect(result.current.editingWidgetId).toBeNull();
- expect(mockNavigatePageLayoutCommandMenu).toHaveBeenCalledWith({
- commandMenuPage: CommandMenuPages.PageLayoutWidgetTypeSelect,
+ expect(mockNavigatePageLayoutSidePanel).toHaveBeenCalledWith({
+ sidePanelPage: SidePanelPages.PageLayoutWidgetTypeSelect,
resetNavigationStack: true,
});
});
diff --git a/packages/twenty-front/src/modules/page-layout/hooks/__tests__/useEndPageLayoutDragSelection.test.tsx b/packages/twenty-front/src/modules/page-layout/hooks/__tests__/useEndPageLayoutDragSelection.test.tsx
index c14ecb9a71..0c8590d06a 100644
--- a/packages/twenty-front/src/modules/page-layout/hooks/__tests__/useEndPageLayoutDragSelection.test.tsx
+++ b/packages/twenty-front/src/modules/page-layout/hooks/__tests__/useEndPageLayoutDragSelection.test.tsx
@@ -1,4 +1,4 @@
-import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu';
+import { useNavigatePageLayoutSidePanel } from '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel';
import { useEndPageLayoutDragSelection } from '@/page-layout/hooks/useEndPageLayoutDragSelection';
import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLayoutDraggedAreaComponentState';
import { pageLayoutSelectedCellsComponentState } from '@/page-layout/states/pageLayoutSelectedCellsComponentState';
@@ -7,7 +7,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
import { act, renderHook } from '@testing-library/react';
import { createStore } from 'jotai';
import { type ReactNode } from 'react';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import {
PAGE_LAYOUT_TEST_INSTANCE_ID,
@@ -15,7 +15,7 @@ import {
} from './PageLayoutTestWrapper';
jest.mock(
- '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu',
+ '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel',
);
jest.mock('../../utils/calculateGridBoundsFromSelectedCells');
@@ -44,12 +44,12 @@ const createTestStore = (
};
describe('useEndPageLayoutDragSelection', () => {
- const mockNavigatePageLayoutCommandMenu = jest.fn();
+ const mockNavigatePageLayoutSidePanel = jest.fn();
beforeEach(() => {
jest.clearAllMocks();
- (useNavigatePageLayoutCommandMenu as jest.Mock).mockReturnValue({
- navigatePageLayoutCommandMenu: mockNavigatePageLayoutCommandMenu,
+ (useNavigatePageLayoutSidePanel as jest.Mock).mockReturnValue({
+ navigatePageLayoutSidePanel: mockNavigatePageLayoutSidePanel,
});
});
@@ -101,8 +101,8 @@ describe('useEndPageLayoutDragSelection', () => {
expect(result.current.draggedArea).toEqual(mockBounds);
expect(result.current.selectedCells.size).toBe(0);
- expect(mockNavigatePageLayoutCommandMenu).toHaveBeenCalledWith({
- commandMenuPage: CommandMenuPages.PageLayoutWidgetTypeSelect,
+ expect(mockNavigatePageLayoutSidePanel).toHaveBeenCalledWith({
+ sidePanelPage: SidePanelPages.PageLayoutWidgetTypeSelect,
resetNavigationStack: true,
});
});
@@ -140,7 +140,7 @@ describe('useEndPageLayoutDragSelection', () => {
});
expect(calculateGridBoundsFromSelectedCells).not.toHaveBeenCalled();
- expect(mockNavigatePageLayoutCommandMenu).not.toHaveBeenCalled();
+ expect(mockNavigatePageLayoutSidePanel).not.toHaveBeenCalled();
expect(result.current.draggedArea).toBeNull();
expect(result.current.selectedCells.size).toBe(0);
});
@@ -180,7 +180,7 @@ describe('useEndPageLayoutDragSelection', () => {
expect(calculateGridBoundsFromSelectedCells).toHaveBeenCalledWith([
'invalid-cell',
]);
- expect(mockNavigatePageLayoutCommandMenu).not.toHaveBeenCalled();
+ expect(mockNavigatePageLayoutSidePanel).not.toHaveBeenCalled();
expect(result.current.draggedArea).toBeNull();
expect(result.current.selectedCells.size).toBe(0);
});
@@ -229,7 +229,7 @@ describe('useEndPageLayoutDragSelection', () => {
result.current.endDragSelection.endPageLayoutDragSelection();
});
- expect(mockNavigatePageLayoutCommandMenu).toHaveBeenCalled();
+ expect(mockNavigatePageLayoutSidePanel).toHaveBeenCalled();
});
it('should clear selected cells after successful navigation', () => {
diff --git a/packages/twenty-front/src/modules/page-layout/hooks/useCreatePageLayoutGraphWidget.ts b/packages/twenty-front/src/modules/page-layout/hooks/useCreatePageLayoutGraphWidget.ts
index 4ae3691cc9..5c6e16fd04 100644
--- a/packages/twenty-front/src/modules/page-layout/hooks/useCreatePageLayoutGraphWidget.ts
+++ b/packages/twenty-front/src/modules/page-layout/hooks/useCreatePageLayoutGraphWidget.ts
@@ -1,4 +1,4 @@
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { useDateTimeFormat } from '@/localization/hooks/useDateTimeFormat';
import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
diff --git a/packages/twenty-front/src/modules/page-layout/hooks/useCreateWidgetFromClick.ts b/packages/twenty-front/src/modules/page-layout/hooks/useCreateWidgetFromClick.ts
index 83fd4f9d98..bdb8fdc591 100644
--- a/packages/twenty-front/src/modules/page-layout/hooks/useCreateWidgetFromClick.ts
+++ b/packages/twenty-front/src/modules/page-layout/hooks/useCreateWidgetFromClick.ts
@@ -1,11 +1,11 @@
-import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu';
+import { useNavigatePageLayoutSidePanel } from '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel';
import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLayoutDraggedAreaComponentState';
import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
import { parseCellIdToCoordinates } from '@/page-layout/utils/parseCellIdToCoordinates';
import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
import { useStore } from 'jotai';
import { useCallback } from 'react';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
export const useCreateWidgetFromClick = () => {
const pageLayoutDraggedAreaState = useAtomComponentStateCallbackState(
@@ -16,7 +16,7 @@ export const useCreateWidgetFromClick = () => {
pageLayoutEditingWidgetIdComponentState,
);
- const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu();
+ const { navigatePageLayoutSidePanel } = useNavigatePageLayoutSidePanel();
const store = useStore();
@@ -28,13 +28,13 @@ export const useCreateWidgetFromClick = () => {
store.set(pageLayoutDraggedAreaState, bounds);
store.set(pageLayoutEditingWidgetIdState, null);
- navigatePageLayoutCommandMenu({
- commandMenuPage: CommandMenuPages.PageLayoutWidgetTypeSelect,
+ navigatePageLayoutSidePanel({
+ sidePanelPage: SidePanelPages.PageLayoutWidgetTypeSelect,
resetNavigationStack: true,
});
},
[
- navigatePageLayoutCommandMenu,
+ navigatePageLayoutSidePanel,
pageLayoutDraggedAreaState,
pageLayoutEditingWidgetIdState,
store,
diff --git a/packages/twenty-front/src/modules/page-layout/hooks/useDeletePageLayoutWidget.ts b/packages/twenty-front/src/modules/page-layout/hooks/useDeletePageLayoutWidget.ts
index be0775cc49..b0a3071399 100644
--- a/packages/twenty-front/src/modules/page-layout/hooks/useDeletePageLayoutWidget.ts
+++ b/packages/twenty-front/src/modules/page-layout/hooks/useDeletePageLayoutWidget.ts
@@ -1,4 +1,4 @@
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
@@ -26,13 +26,13 @@ export const useDeletePageLayoutWidget = (pageLayoutIdFromProps?: string) => {
pageLayoutId,
);
- const { closeCommandMenu } = useCommandMenu();
+ const { closeSidePanelMenu } = useSidePanelMenu();
const store = useStore();
const deletePageLayoutWidget = useCallback(
(widgetId: string) => {
- closeCommandMenu();
+ closeSidePanelMenu();
const pageLayoutDraft = store.get(pageLayoutDraftState);
const allTabLayouts = store.get(pageLayoutCurrentLayoutsState);
@@ -57,7 +57,7 @@ export const useDeletePageLayoutWidget = (pageLayoutIdFromProps?: string) => {
}
},
[
- closeCommandMenu,
+ closeSidePanelMenu,
pageLayoutCurrentLayoutsState,
pageLayoutDraftState,
store,
diff --git a/packages/twenty-front/src/modules/page-layout/hooks/useDuplicatePageLayoutTab.ts b/packages/twenty-front/src/modules/page-layout/hooks/useDuplicatePageLayoutTab.ts
index 3a9d4c8599..912e211c27 100644
--- a/packages/twenty-front/src/modules/page-layout/hooks/useDuplicatePageLayoutTab.ts
+++ b/packages/twenty-front/src/modules/page-layout/hooks/useDuplicatePageLayoutTab.ts
@@ -1,6 +1,6 @@
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { useNavigatePageLayoutSidePanel } from '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel';
+import { SidePanelPages } from 'twenty-shared/types';
import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
@@ -48,9 +48,9 @@ export const useDuplicatePageLayoutTab = (pageLayoutIdFromProps?: string) => {
pageLayoutId,
);
- const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu();
+ const { navigatePageLayoutSidePanel } = useNavigatePageLayoutSidePanel();
- const { closeCommandMenu } = useCommandMenu();
+ const { closeSidePanelMenu } = useSidePanelMenu();
const duplicateTab = useCallback(
(tabId: string): string => {
@@ -124,14 +124,14 @@ export const useDuplicatePageLayoutTab = (pageLayoutIdFromProps?: string) => {
tabs: [...prev.tabs, newTab],
});
- closeCommandMenu();
+ closeSidePanelMenu();
setActiveTabId(newTabId);
setPageLayoutTabSettingsOpenTabId(newTabId);
- navigatePageLayoutCommandMenu({
- commandMenuPage: CommandMenuPages.PageLayoutTabSettings,
+ navigatePageLayoutSidePanel({
+ sidePanelPage: SidePanelPages.PageLayoutTabSettings,
pageTitle: newTab.title,
focusTitleInput: true,
});
@@ -139,8 +139,8 @@ export const useDuplicatePageLayoutTab = (pageLayoutIdFromProps?: string) => {
return newTabId;
},
[
- closeCommandMenu,
- navigatePageLayoutCommandMenu,
+ closeSidePanelMenu,
+ navigatePageLayoutSidePanel,
pageLayoutCurrentLayouts,
pageLayoutDraft,
setActiveTabId,
diff --git a/packages/twenty-front/src/modules/page-layout/hooks/useEditPageLayoutWidget.ts b/packages/twenty-front/src/modules/page-layout/hooks/useEditPageLayoutWidget.ts
index ea01d45d91..155850ad1c 100644
--- a/packages/twenty-front/src/modules/page-layout/hooks/useEditPageLayoutWidget.ts
+++ b/packages/twenty-front/src/modules/page-layout/hooks/useEditPageLayoutWidget.ts
@@ -1,11 +1,11 @@
import { useCallback } from 'react';
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
-import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu';
+import { useNavigatePageLayoutSidePanel } from '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel';
import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
@@ -24,9 +24,9 @@ export const useEditPageLayoutWidget = (pageLayoutIdFromProps?: string) => {
pageLayoutId,
);
- const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu();
- const { closeCommandMenu } = useCommandMenu();
- const setCommandMenuPage = useSetAtomState(commandMenuPageState);
+ const { navigatePageLayoutSidePanel } = useNavigatePageLayoutSidePanel();
+ const { closeSidePanelMenu } = useSidePanelMenu();
+ const setSidePanelPage = useSetAtomState(sidePanelPageState);
const handleEditWidget = useCallback(
({
@@ -39,8 +39,8 @@ export const useEditPageLayoutWidget = (pageLayoutIdFromProps?: string) => {
setPageLayoutEditingWidgetId(widgetId);
if (widgetType === WidgetType.IFRAME) {
- navigatePageLayoutCommandMenu({
- commandMenuPage: CommandMenuPages.PageLayoutIframeSettings,
+ navigatePageLayoutSidePanel({
+ sidePanelPage: SidePanelPages.PageLayoutIframeSettings,
pageTitle: t`Edit iFrame`,
resetNavigationStack: true,
});
@@ -48,8 +48,8 @@ export const useEditPageLayoutWidget = (pageLayoutIdFromProps?: string) => {
}
if (widgetType === WidgetType.GRAPH) {
- navigatePageLayoutCommandMenu({
- commandMenuPage: CommandMenuPages.PageLayoutGraphTypeSelect,
+ navigatePageLayoutSidePanel({
+ sidePanelPage: SidePanelPages.PageLayoutGraphTypeSelect,
pageTitle: t`Edit Graph`,
resetNavigationStack: true,
});
@@ -57,22 +57,22 @@ export const useEditPageLayoutWidget = (pageLayoutIdFromProps?: string) => {
}
if (widgetType === WidgetType.FIELDS) {
- navigatePageLayoutCommandMenu({
- commandMenuPage: CommandMenuPages.PageLayoutFieldsSettings,
+ navigatePageLayoutSidePanel({
+ sidePanelPage: SidePanelPages.PageLayoutFieldsSettings,
pageTitle: t`Edit Fields`,
resetNavigationStack: true,
});
return;
}
- setCommandMenuPage(CommandMenuPages.Root);
- closeCommandMenu();
+ setSidePanelPage(SidePanelPages.Root);
+ closeSidePanelMenu();
},
[
setPageLayoutEditingWidgetId,
- navigatePageLayoutCommandMenu,
- closeCommandMenu,
- setCommandMenuPage,
+ navigatePageLayoutSidePanel,
+ closeSidePanelMenu,
+ setSidePanelPage,
],
);
diff --git a/packages/twenty-front/src/modules/page-layout/hooks/useEndPageLayoutDragSelection.ts b/packages/twenty-front/src/modules/page-layout/hooks/useEndPageLayoutDragSelection.ts
index 797af731c3..7d0b48917b 100644
--- a/packages/twenty-front/src/modules/page-layout/hooks/useEndPageLayoutDragSelection.ts
+++ b/packages/twenty-front/src/modules/page-layout/hooks/useEndPageLayoutDragSelection.ts
@@ -1,4 +1,4 @@
-import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu';
+import { useNavigatePageLayoutSidePanel } from '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel';
import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLayoutDraggedAreaComponentState';
import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
@@ -8,7 +8,7 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
import { useStore } from 'jotai';
import { useCallback } from 'react';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
export const useEndPageLayoutDragSelection = (
@@ -33,7 +33,7 @@ export const useEndPageLayoutDragSelection = (
pageLayoutId,
);
- const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu();
+ const { navigatePageLayoutSidePanel } = useNavigatePageLayoutSidePanel();
const store = useStore();
@@ -49,8 +49,8 @@ export const useEndPageLayoutDragSelection = (
store.set(pageLayoutDraggedAreaState, draggedBounds);
store.set(pageLayoutEditingWidgetIdState, null);
- navigatePageLayoutCommandMenu({
- commandMenuPage: CommandMenuPages.PageLayoutWidgetTypeSelect,
+ navigatePageLayoutSidePanel({
+ sidePanelPage: SidePanelPages.PageLayoutWidgetTypeSelect,
resetNavigationStack: true,
});
}
@@ -58,7 +58,7 @@ export const useEndPageLayoutDragSelection = (
store.set(pageLayoutSelectedCellsState, new Set());
}, [
- navigatePageLayoutCommandMenu,
+ navigatePageLayoutSidePanel,
pageLayoutDraggedAreaState,
pageLayoutEditingWidgetIdState,
pageLayoutSelectedCellsState,
diff --git a/packages/twenty-front/src/modules/page-layout/hooks/usePageLayoutTabWithVisibleWidgetsOrThrow.ts b/packages/twenty-front/src/modules/page-layout/hooks/usePageLayoutTabWithVisibleWidgetsOrThrow.ts
index b92d35579b..ebf4199510 100644
--- a/packages/twenty-front/src/modules/page-layout/hooks/usePageLayoutTabWithVisibleWidgetsOrThrow.ts
+++ b/packages/twenty-front/src/modules/page-layout/hooks/usePageLayoutTabWithVisibleWidgetsOrThrow.ts
@@ -13,7 +13,7 @@ export const usePageLayoutTabWithVisibleWidgetsOrThrow = (
): PageLayoutTab => {
const { currentPageLayout } = useCurrentPageLayout();
const isMobile = useIsMobile();
- const { isInRightDrawer } = useLayoutRenderingContext();
+ const { isInSidePanel } = useLayoutRenderingContext();
const isPageLayoutInEditMode = useAtomComponentStateValue(
isPageLayoutInEditModeComponentState,
);
@@ -32,7 +32,7 @@ export const usePageLayoutTabWithVisibleWidgetsOrThrow = (
return tab;
}
- const context = buildWidgetVisibilityContext({ isMobile, isInRightDrawer });
+ const context = buildWidgetVisibilityContext({ isMobile, isInSidePanel });
return {
...tab,
diff --git a/packages/twenty-front/src/modules/page-layout/hooks/useSetIsPageLayoutInEditMode.ts b/packages/twenty-front/src/modules/page-layout/hooks/useSetIsPageLayoutInEditMode.ts
index 8ea6a2e1e1..bbbbb7c200 100644
--- a/packages/twenty-front/src/modules/page-layout/hooks/useSetIsPageLayoutInEditMode.ts
+++ b/packages/twenty-front/src/modules/page-layout/hooks/useSetIsPageLayoutInEditMode.ts
@@ -1,5 +1,5 @@
-import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId';
-import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
+import { SIDE_PANEL_COMPONENT_INSTANCE_ID } from '@/side-panel/constants/SidePanelComponentInstanceId';
+import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState';
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { contextStoreIsPageInEditModeComponentState } from '@/context-store/states/contextStoreIsPageInEditModeComponentState';
import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
@@ -37,12 +37,12 @@ export const useSetIsPageLayoutInEditMode = (pageLayoutIdFromProps: string) => {
store.set(currentPageLayoutIdState.atom, value ? pageLayoutId : null);
- const isCommandMenuOpened = store.get(isCommandMenuOpenedState.atom);
+ const isSidePanelOpened = store.get(isSidePanelOpenedState.atom);
- if (isCommandMenuOpened) {
+ if (isSidePanelOpened) {
store.set(
contextStoreIsPageInEditModeComponentState.atomFamily({
- instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID,
+ instanceId: SIDE_PANEL_COMPONENT_INSTANCE_ID,
}),
value,
);
diff --git a/packages/twenty-front/src/modules/page-layout/utils/__tests__/getPageLayoutTabListInitialActiveTabId.test.ts b/packages/twenty-front/src/modules/page-layout/utils/__tests__/getPageLayoutTabListInitialActiveTabId.test.ts
index 2b478ef292..c900d8d97e 100644
--- a/packages/twenty-front/src/modules/page-layout/utils/__tests__/getPageLayoutTabListInitialActiveTabId.test.ts
+++ b/packages/twenty-front/src/modules/page-layout/utils/__tests__/getPageLayoutTabListInitialActiveTabId.test.ts
@@ -26,7 +26,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
tabs: mockTabs,
defaultTabToFocusOnMobileAndSidePanelId: 'tab-3',
isMobile: true,
- isInRightDrawer: true,
+ isInSidePanel: true,
});
expect(result).toBe('tab-2');
@@ -38,7 +38,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
tabs: mockTabs,
defaultTabToFocusOnMobileAndSidePanelId: 'tab-3',
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result).toBe('tab-1');
@@ -46,38 +46,38 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
});
describe('when activeTabId does not exist in tabs', () => {
- describe('on mobile or in right drawer', () => {
+ describe('on mobile or in side panel', () => {
it('should return defaultTabToFocusOnMobileAndSidePanelId when on mobile and default exists', () => {
const result = getPageLayoutTabListInitialActiveTabId({
activeTabId: 'non-existent-tab',
tabs: mockTabs,
defaultTabToFocusOnMobileAndSidePanelId: 'tab-3',
isMobile: true,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result).toBe('tab-3');
});
- it('should return defaultTabToFocusOnMobileAndSidePanelId when in right drawer and default exists', () => {
+ it('should return defaultTabToFocusOnMobileAndSidePanelId when in side panel and default exists', () => {
const result = getPageLayoutTabListInitialActiveTabId({
activeTabId: null,
tabs: mockTabs,
defaultTabToFocusOnMobileAndSidePanelId: 'tab-2',
isMobile: false,
- isInRightDrawer: true,
+ isInSidePanel: true,
});
expect(result).toBe('tab-2');
});
- it('should return defaultTabToFocusOnMobileAndSidePanelId when on mobile and in right drawer', () => {
+ it('should return defaultTabToFocusOnMobileAndSidePanelId when on mobile and in side panel', () => {
const result = getPageLayoutTabListInitialActiveTabId({
activeTabId: null,
tabs: mockTabs,
defaultTabToFocusOnMobileAndSidePanelId: 'tab-1',
isMobile: true,
- isInRightDrawer: true,
+ isInSidePanel: true,
});
expect(result).toBe('tab-1');
@@ -89,7 +89,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
tabs: mockTabs,
defaultTabToFocusOnMobileAndSidePanelId: 'non-existent-tab',
isMobile: true,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result).toBe('tab-1');
@@ -101,21 +101,21 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
tabs: mockTabs,
defaultTabToFocusOnMobileAndSidePanelId: undefined,
isMobile: true,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result).toBe('tab-1');
});
});
- describe('not on mobile and not in right drawer', () => {
+ describe('not on mobile and not in side panel', () => {
it('should return first tab when default is provided', () => {
const result = getPageLayoutTabListInitialActiveTabId({
activeTabId: null,
tabs: mockTabs,
defaultTabToFocusOnMobileAndSidePanelId: 'tab-3',
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result).toBe('tab-1');
@@ -127,7 +127,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
tabs: mockTabs,
defaultTabToFocusOnMobileAndSidePanelId: undefined,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result).toBe('tab-1');
@@ -142,7 +142,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
tabs: [],
defaultTabToFocusOnMobileAndSidePanelId: 'tab-1',
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result).toBe(null);
@@ -154,7 +154,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
tabs: [],
defaultTabToFocusOnMobileAndSidePanelId: 'tab-1',
isMobile: true,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result).toBe(null);
@@ -166,7 +166,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
tabs: mockTabs,
defaultTabToFocusOnMobileAndSidePanelId: undefined,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result).toBe('tab-1');
@@ -180,7 +180,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
tabs: singleTab,
defaultTabToFocusOnMobileAndSidePanelId: undefined,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result).toBe('only-tab');
@@ -194,7 +194,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
tabs: mockTabs,
defaultTabToFocusOnMobileAndSidePanelId: 'tab-2',
isMobile: true,
- isInRightDrawer: true,
+ isInSidePanel: true,
});
expect(result).toBe('tab-1');
@@ -206,7 +206,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
tabs: mockTabs,
defaultTabToFocusOnMobileAndSidePanelId: 'tab-3',
isMobile: true,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result).toBe('tab-3');
@@ -218,7 +218,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
tabs: mockTabs,
defaultTabToFocusOnMobileAndSidePanelId: 'invalid-tab',
isMobile: true,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result).toBe('tab-1');
diff --git a/packages/twenty-front/src/modules/page-layout/utils/__tests__/getTabsByDisplayMode.test.ts b/packages/twenty-front/src/modules/page-layout/utils/__tests__/getTabsByDisplayMode.test.ts
index 242e686636..bf550e6298 100644
--- a/packages/twenty-front/src/modules/page-layout/utils/__tests__/getTabsByDisplayMode.test.ts
+++ b/packages/twenty-front/src/modules/page-layout/utils/__tests__/getTabsByDisplayMode.test.ts
@@ -39,7 +39,7 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: true,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result.tabsToRenderInTabList).toEqual(tabs);
@@ -54,7 +54,7 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: true,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result.pinnedLeftTab).toBeUndefined();
@@ -67,7 +67,7 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: true,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result.tabsToRenderInTabList).toEqual([]);
@@ -82,7 +82,7 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: true,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result.tabsToRenderInTabList).toEqual(tabs);
@@ -90,7 +90,7 @@ describe('getTabsByDisplayMode', () => {
});
});
- describe('when isInRightDrawer is true', () => {
+ describe('when isInSidePanel is true', () => {
it('should return all tabs in tabsToRenderInTabList', () => {
const tabs = [
createMockTab('tab-1'),
@@ -103,7 +103,7 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: false,
- isInRightDrawer: true,
+ isInSidePanel: true,
});
expect(result.tabsToRenderInTabList).toEqual(tabs);
@@ -118,7 +118,7 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: false,
- isInRightDrawer: true,
+ isInSidePanel: true,
});
expect(result.pinnedLeftTab).toBeUndefined();
@@ -131,7 +131,7 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: false,
- isInRightDrawer: true,
+ isInSidePanel: true,
});
expect(result.tabsToRenderInTabList).toEqual([]);
@@ -146,7 +146,7 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: false,
- isInRightDrawer: true,
+ isInSidePanel: true,
});
expect(result.tabsToRenderInTabList).toEqual(tabs);
@@ -154,7 +154,7 @@ describe('getTabsByDisplayMode', () => {
});
});
- describe('when isMobile is false and isInRightDrawer is false', () => {
+ describe('when isMobile is false and isInSidePanel is false', () => {
it('should return first tab as pinnedLeftTab and rest in tabsToRenderInTabList', () => {
const tabs = [
createMockTab('tab-1'),
@@ -167,7 +167,7 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result.pinnedLeftTab).toBeDefined();
@@ -188,7 +188,7 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result.pinnedLeftTab).toBeDefined();
@@ -202,7 +202,7 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result.pinnedLeftTab).toBeUndefined();
@@ -217,7 +217,7 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result.pinnedLeftTab).toBeUndefined();
@@ -232,7 +232,7 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result.tabsToRenderInTabList).toEqual([]);
@@ -247,7 +247,7 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result.pinnedLeftTab?.id).toBe('tab-1');
@@ -265,13 +265,13 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: true,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
const resultDesktop = getTabsByDisplayMode({
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(resultMobile.tabsToRenderInTabList).toEqual(tabs);
@@ -289,13 +289,13 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: true,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
const resultDesktop = getTabsByDisplayMode({
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(resultMobile.tabsToRenderInTabList).toEqual(tabs);
@@ -314,7 +314,7 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(pageLayout.tabs).toHaveLength(originalTabsLength);
@@ -332,7 +332,7 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result.pinnedLeftTab).toBeUndefined();
@@ -351,13 +351,13 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
const result2 = getTabsByDisplayMode({
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result1).toEqual(result2);
@@ -371,13 +371,13 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: true,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
const desktopResult = getTabsByDisplayMode({
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(mobileResult.tabsToRenderInTabList.length).toBe(2);
@@ -395,13 +395,13 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: true,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
const desktopResult = getTabsByDisplayMode({
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(mobileResult.tabsToRenderInTabList).toEqual(tabs);
@@ -412,7 +412,7 @@ describe('getTabsByDisplayMode', () => {
});
});
- describe('when both isMobile and isInRightDrawer are true', () => {
+ describe('when both isMobile and isInSidePanel are true', () => {
it('should behave the same as when only one is true', () => {
const tabs = [createMockTab('tab-1'), createMockTab('tab-2')];
const pageLayout = createMockPageLayout(tabs);
@@ -421,23 +421,23 @@ describe('getTabsByDisplayMode', () => {
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: true,
- isInRightDrawer: true,
+ isInSidePanel: true,
});
const resultOnlyMobile = getTabsByDisplayMode({
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: true,
- isInRightDrawer: false,
+ isInSidePanel: false,
});
- const resultOnlyRightDrawer = getTabsByDisplayMode({
+ const resultOnlySidePanel = getTabsByDisplayMode({
tabs: pageLayout.tabs,
pageLayoutType: pageLayout.type,
isMobile: false,
- isInRightDrawer: true,
+ isInSidePanel: true,
});
expect(resultBothTrue).toEqual(resultOnlyMobile);
- expect(resultBothTrue).toEqual(resultOnlyRightDrawer);
+ expect(resultBothTrue).toEqual(resultOnlySidePanel);
expect(resultBothTrue.tabsToRenderInTabList).toEqual(tabs);
expect(resultBothTrue.pinnedLeftTab).toBeUndefined();
});
diff --git a/packages/twenty-front/src/modules/page-layout/utils/__tests__/getTabsWithVisibleWidgets.test.ts b/packages/twenty-front/src/modules/page-layout/utils/__tests__/getTabsWithVisibleWidgets.test.ts
index 5bd5bc7c03..fcecd44894 100644
--- a/packages/twenty-front/src/modules/page-layout/utils/__tests__/getTabsWithVisibleWidgets.test.ts
+++ b/packages/twenty-front/src/modules/page-layout/utils/__tests__/getTabsWithVisibleWidgets.test.ts
@@ -65,7 +65,7 @@ describe('getTabsWithVisibleWidgets', () => {
const result = getTabsWithVisibleWidgets({
tabs,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
isEditMode: false,
});
@@ -89,7 +89,7 @@ describe('getTabsWithVisibleWidgets', () => {
const result = getTabsWithVisibleWidgets({
tabs,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
isEditMode: false,
});
@@ -115,7 +115,7 @@ describe('getTabsWithVisibleWidgets', () => {
const result = getTabsWithVisibleWidgets({
tabs,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
isEditMode: false,
});
@@ -133,7 +133,7 @@ describe('getTabsWithVisibleWidgets', () => {
const result = getTabsWithVisibleWidgets({
tabs,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
isEditMode: false,
});
@@ -148,7 +148,7 @@ describe('getTabsWithVisibleWidgets', () => {
const result = getTabsWithVisibleWidgets({
tabs,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
isEditMode: false,
});
@@ -173,7 +173,7 @@ describe('getTabsWithVisibleWidgets', () => {
const result = getTabsWithVisibleWidgets({
tabs,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
isEditMode: true,
});
@@ -194,7 +194,7 @@ describe('getTabsWithVisibleWidgets', () => {
const result = getTabsWithVisibleWidgets({
tabs,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
isEditMode: true,
});
@@ -210,7 +210,7 @@ describe('getTabsWithVisibleWidgets', () => {
const result = getTabsWithVisibleWidgets({
tabs,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
isEditMode: true,
});
@@ -234,7 +234,7 @@ describe('getTabsWithVisibleWidgets', () => {
const result = getTabsWithVisibleWidgets({
tabs,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
isEditMode: true,
});
@@ -249,7 +249,7 @@ describe('getTabsWithVisibleWidgets', () => {
const result = getTabsWithVisibleWidgets({
tabs: [],
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
isEditMode: false,
});
@@ -270,7 +270,7 @@ describe('getTabsWithVisibleWidgets', () => {
getTabsWithVisibleWidgets({
tabs,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
isEditMode: false,
});
@@ -306,7 +306,7 @@ describe('getTabsWithVisibleWidgets', () => {
const result = getTabsWithVisibleWidgets({
tabs,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
isEditMode: false,
});
diff --git a/packages/twenty-front/src/modules/page-layout/utils/buildWidgetVisibilityContext.ts b/packages/twenty-front/src/modules/page-layout/utils/buildWidgetVisibilityContext.ts
index d9e412fde9..1941287d73 100644
--- a/packages/twenty-front/src/modules/page-layout/utils/buildWidgetVisibilityContext.ts
+++ b/packages/twenty-front/src/modules/page-layout/utils/buildWidgetVisibilityContext.ts
@@ -2,14 +2,14 @@ import { type WidgetVisibilityContext } from '@/page-layout/types/WidgetVisibili
type BuildWidgetVisibilityContextParams = {
isMobile: boolean;
- isInRightDrawer: boolean;
+ isInSidePanel: boolean;
};
export const buildWidgetVisibilityContext = ({
isMobile,
- isInRightDrawer,
+ isInSidePanel,
}: BuildWidgetVisibilityContextParams): WidgetVisibilityContext => {
return {
- device: isMobile || isInRightDrawer ? 'MOBILE' : 'DESKTOP',
+ device: isMobile || isInSidePanel ? 'MOBILE' : 'DESKTOP',
};
};
diff --git a/packages/twenty-front/src/modules/page-layout/utils/getPageLayoutTabListInitialActiveTabId.ts b/packages/twenty-front/src/modules/page-layout/utils/getPageLayoutTabListInitialActiveTabId.ts
index 5a9b62944f..ca0c35927f 100644
--- a/packages/twenty-front/src/modules/page-layout/utils/getPageLayoutTabListInitialActiveTabId.ts
+++ b/packages/twenty-front/src/modules/page-layout/utils/getPageLayoutTabListInitialActiveTabId.ts
@@ -6,7 +6,7 @@ type GetPageLayoutTabListInitialActiveTabIdParams = {
tabs: PageLayoutTab[];
defaultTabToFocusOnMobileAndSidePanelId?: string;
isMobile: boolean;
- isInRightDrawer: boolean;
+ isInSidePanel: boolean;
};
export const getPageLayoutTabListInitialActiveTabId = ({
@@ -14,7 +14,7 @@ export const getPageLayoutTabListInitialActiveTabId = ({
tabs,
defaultTabToFocusOnMobileAndSidePanelId,
isMobile,
- isInRightDrawer,
+ isInSidePanel,
}: GetPageLayoutTabListInitialActiveTabIdParams): string | null => {
const activeTabExists = tabs.some((tab) => tab.id === activeTabId);
@@ -22,7 +22,7 @@ export const getPageLayoutTabListInitialActiveTabId = ({
return activeTabId;
}
- const isOnMobileOrSidePanel = isMobile || isInRightDrawer;
+ const isOnMobileOrSidePanel = isMobile || isInSidePanel;
if (
isOnMobileOrSidePanel &&
diff --git a/packages/twenty-front/src/modules/page-layout/utils/getTabsByDisplayMode.ts b/packages/twenty-front/src/modules/page-layout/utils/getTabsByDisplayMode.ts
index 29911c6b49..f49c5ec6aa 100644
--- a/packages/twenty-front/src/modules/page-layout/utils/getTabsByDisplayMode.ts
+++ b/packages/twenty-front/src/modules/page-layout/utils/getTabsByDisplayMode.ts
@@ -5,18 +5,18 @@ type GetTabsByDisplayModeParams = {
tabs: PageLayoutTab[];
pageLayoutType: PageLayoutType;
isMobile: boolean;
- isInRightDrawer: boolean;
+ isInSidePanel: boolean;
};
export const getTabsByDisplayMode = ({
tabs,
pageLayoutType,
isMobile,
- isInRightDrawer,
+ isInSidePanel,
}: GetTabsByDisplayModeParams) => {
if (
isMobile ||
- isInRightDrawer ||
+ isInSidePanel ||
pageLayoutType !== PageLayoutType.RECORD_PAGE
) {
return {
diff --git a/packages/twenty-front/src/modules/page-layout/utils/getTabsWithVisibleWidgets.ts b/packages/twenty-front/src/modules/page-layout/utils/getTabsWithVisibleWidgets.ts
index 907b112773..bbe685c8b8 100644
--- a/packages/twenty-front/src/modules/page-layout/utils/getTabsWithVisibleWidgets.ts
+++ b/packages/twenty-front/src/modules/page-layout/utils/getTabsWithVisibleWidgets.ts
@@ -5,21 +5,21 @@ import { filterVisibleWidgets } from '@/page-layout/utils/filterVisibleWidgets';
type GetTabsWithVisibleWidgetsParams = {
tabs: PageLayoutTab[];
isMobile: boolean;
- isInRightDrawer: boolean;
+ isInSidePanel: boolean;
isEditMode: boolean;
};
export const getTabsWithVisibleWidgets = ({
tabs,
isMobile,
- isInRightDrawer,
+ isInSidePanel,
isEditMode,
}: GetTabsWithVisibleWidgetsParams): PageLayoutTab[] => {
if (isEditMode) {
return tabs;
}
- const context = buildWidgetVisibilityContext({ isMobile, isInRightDrawer });
+ const context = buildWidgetVisibilityContext({ isMobile, isInSidePanel });
const tabsWithFilteredWidgets = tabs.map((tab) => ({
...tab,
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/calendar/components/CalendarWidget.tsx b/packages/twenty-front/src/modules/page-layout/widgets/calendar/components/CalendarWidget.tsx
index 4e26e93782..adf18931e4 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/calendar/components/CalendarWidget.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/calendar/components/CalendarWidget.tsx
@@ -1,7 +1,7 @@
import { CalendarEventsCard } from '@/activities/calendar/components/CalendarEventsCard';
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
-import { RightDrawerProvider } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
+import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
import { styled } from '@linaria/react';
const StyledContainer = styled.div`
@@ -16,13 +16,13 @@ type CalendarWidgetProps = {
};
export const CalendarWidget = ({ widget: _widget }: CalendarWidgetProps) => {
- const { isInRightDrawer } = useLayoutRenderingContext();
+ const { isInSidePanel } = useLayoutRenderingContext();
return (
-
+
-
+
);
};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/components/DashboardWidgetPlaceholder.tsx b/packages/twenty-front/src/modules/page-layout/widgets/components/DashboardWidgetPlaceholder.tsx
index 563cc34940..223eed5eb8 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/components/DashboardWidgetPlaceholder.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/components/DashboardWidgetPlaceholder.tsx
@@ -1,4 +1,4 @@
-import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu';
+import { useNavigatePageLayoutSidePanel } from '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel';
import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState';
@@ -8,7 +8,7 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { t } from '@lingui/core/macro';
import { Trans } from '@lingui/react/macro';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import {
AnimatedPlaceholder,
AnimatedPlaceholderEmptyContainer,
@@ -30,14 +30,14 @@ export const DashboardWidgetPlaceholder = () => {
const { setIsPageLayoutInEditMode } =
useSetIsPageLayoutInEditMode(pageLayoutId);
- const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu();
+ const { navigatePageLayoutSidePanel } = useNavigatePageLayoutSidePanel();
const handleClick = () => {
if (!isPageLayoutInEditMode) {
setIsPageLayoutInEditMode(true);
}
- navigatePageLayoutCommandMenu({
- commandMenuPage: CommandMenuPages.PageLayoutWidgetTypeSelect,
+ navigatePageLayoutSidePanel({
+ sidePanelPage: SidePanelPages.PageLayoutWidgetTypeSelect,
resetNavigationStack: true,
});
};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionFieldEdit.tsx b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionFieldEdit.tsx
index a9bf914243..8242d5ffb7 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionFieldEdit.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionFieldEdit.tsx
@@ -29,7 +29,7 @@ import { assertIsDefinedOrThrow } from 'twenty-shared/utils';
export const WidgetActionFieldEdit = () => {
const widget = useCurrentWidget();
const targetRecord = useTargetRecord();
- const { isInRightDrawer } = useLayoutRenderingContext();
+ const { isInSidePanel } = useLayoutRenderingContext();
const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular: targetRecord.targetObjectNameSingular,
@@ -75,7 +75,7 @@ export const WidgetActionFieldEdit = () => {
widgetId: widget.id,
recordId: targetRecord.id,
fieldName: fieldMetadataItem.name,
- isInRightDrawer,
+ isInSidePanel,
});
if (isRelationField) {
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx
index de86928696..8373cd54ae 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx
@@ -76,7 +76,7 @@ export const WidgetRenderer = ({ widget }: WidgetRendererProps) => {
const { layoutMode } = usePageLayoutContentContext();
const { isInPinnedTab } = useIsInPinnedTab();
- const { isInRightDrawer } = useLayoutRenderingContext();
+ const { isInSidePanel } = useLayoutRenderingContext();
const isMobile = useIsMobile();
const { currentPageLayout } = useCurrentPageLayoutOrThrow();
@@ -127,7 +127,7 @@ export const WidgetRenderer = ({ widget }: WidgetRendererProps) => {
isInPinnedTab,
pageLayoutType: currentPageLayout.type,
isMobile,
- isInRightDrawer,
+ isInSidePanel,
});
const actions = useWidgetActions({ widget });
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/components/__stories__/DashboardWidgetPlaceholder.stories.tsx b/packages/twenty-front/src/modules/page-layout/widgets/components/__stories__/DashboardWidgetPlaceholder.stories.tsx
index afc910a47c..996e9d9814 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/components/__stories__/DashboardWidgetPlaceholder.stories.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/components/__stories__/DashboardWidgetPlaceholder.stories.tsx
@@ -49,7 +49,7 @@ const meta: Meta = {
= {
{
- const { isInRightDrawer } = useLayoutRenderingContext();
+ const { isInSidePanel } = useLayoutRenderingContext();
return (
-
+
-
+
);
};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidget.tsx b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidget.tsx
index d276ab4f58..d7ee459307 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidget.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidget.tsx
@@ -16,7 +16,7 @@ import { FieldWidgetRelationField } from '@/page-layout/widgets/field/components
import { assertFieldWidgetOrThrow } from '@/page-layout/widgets/field/utils/assertFieldWidgetOrThrow';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
-import { RightDrawerProvider } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
+import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
@@ -43,7 +43,7 @@ export const FieldWidget = ({ widget }: FieldWidgetProps) => {
assertFieldWidgetOrThrow(widget);
const targetRecord = useTargetRecord();
- const { isInRightDrawer } = useLayoutRenderingContext();
+ const { isInSidePanel } = useLayoutRenderingContext();
const { isPrefetchLoading } = useRecordShowContainerData({
objectRecordId: targetRecord.id,
@@ -69,17 +69,17 @@ export const FieldWidget = ({ widget }: FieldWidgetProps) => {
if (isPrefetchLoading) {
return (
-
+
-
+
);
}
if (!isDefined(fieldMetadataItem) || !fieldMetadataItem.isActive) {
return (
-
+
{
-
+
);
}
@@ -116,7 +116,7 @@ export const FieldWidget = ({ widget }: FieldWidgetProps) => {
);
}
@@ -125,7 +125,7 @@ export const FieldWidget = ({ widget }: FieldWidgetProps) => {
);
}
@@ -136,7 +136,7 @@ export const FieldWidget = ({ widget }: FieldWidgetProps) => {
);
}
@@ -145,7 +145,7 @@ export const FieldWidget = ({ widget }: FieldWidgetProps) => {
);
}
@@ -156,7 +156,7 @@ export const FieldWidget = ({ widget }: FieldWidgetProps) => {
fieldMetadataItem={fieldMetadataItem}
objectMetadataItem={objectMetadataItem}
recordId={targetRecord.id}
- isInRightDrawer={isInRightDrawer}
+ isInSidePanel={isInSidePanel}
/>
);
};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetDisplay.tsx b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetDisplay.tsx
index 5cb31a5af6..26a0f662e0 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetDisplay.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetDisplay.tsx
@@ -16,7 +16,7 @@ import { fieldWidgetHoverComponentState } from '@/page-layout/widgets/field/stat
import { generateFieldWidgetInstanceId } from '@/page-layout/widgets/field/utils/generateFieldWidgetInstanceId';
import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
import { getObjectPermissionsFromMapByObjectMetadataId } from '@/settings/roles/role-permissions/objects-permissions/utils/getObjectPermissionsFromMapByObjectMetadataId';
-import { RightDrawerProvider } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
+import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
import { styled } from '@linaria/react';
@@ -29,7 +29,7 @@ type FieldWidgetDisplayProps = {
fieldMetadataItem: FieldMetadataItem;
objectMetadataItem: ObjectMetadataItem;
recordId: string;
- isInRightDrawer: boolean;
+ isInSidePanel: boolean;
};
export const FieldWidgetDisplay = ({
@@ -37,7 +37,7 @@ export const FieldWidgetDisplay = ({
fieldMetadataItem,
objectMetadataItem,
recordId,
- isInRightDrawer,
+ isInSidePanel,
}: FieldWidgetDisplayProps) => {
const widget = useCurrentWidget();
@@ -49,7 +49,7 @@ export const FieldWidgetDisplay = ({
widgetId: widget.id,
recordId,
fieldName: fieldMetadataItem.name,
- isInRightDrawer,
+ isInSidePanel,
});
const { objectPermissionsByObjectMetadataId } = useObjectPermissions();
@@ -68,7 +68,7 @@ export const FieldWidgetDisplay = ({
return (
-
+
-
+
);
};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetMorphRelationCard.tsx b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetMorphRelationCard.tsx
index ef82ad4f4b..148a0cfaaa 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetMorphRelationCard.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetMorphRelationCard.tsx
@@ -23,7 +23,7 @@ import { FIELD_WIDGET_RELATION_CARD_LOAD_MORE_INCREMENT } from '@/page-layout/wi
import { generateFieldWidgetInstanceId } from '@/page-layout/widgets/field/utils/generateFieldWidgetInstanceId';
import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
-import { RightDrawerProvider } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
+import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
import { isDefined } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
@@ -34,13 +34,13 @@ const StyledShowMoreButtonContainer = styled.div`
type FieldWidgetMorphRelationCardProps = {
fieldDefinition: FieldDefinition;
recordId: string;
- isInRightDrawer: boolean;
+ isInSidePanel: boolean;
};
export const FieldWidgetMorphRelationCard = ({
fieldDefinition,
recordId,
- isInRightDrawer,
+ isInSidePanel,
}: FieldWidgetMorphRelationCardProps) => {
const widget = useCurrentWidget();
@@ -54,7 +54,7 @@ export const FieldWidgetMorphRelationCard = ({
widgetId: widget.id,
recordId: targetRecord.id,
fieldName: fieldDefinition.metadata.fieldName,
- isInRightDrawer,
+ isInSidePanel,
});
const handleItemClick = (id: string) =>
@@ -132,7 +132,7 @@ export const FieldWidgetMorphRelationCard = ({
const hasMoreRecords = remainingCount > 0;
return (
-
+
-
+
);
};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetMorphRelationField.tsx b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetMorphRelationField.tsx
index c8cc564c17..5448250791 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetMorphRelationField.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetMorphRelationField.tsx
@@ -2,7 +2,7 @@ import { RecordChip } from '@/object-record/components/RecordChip';
import { useGetMorphRelationRelatedRecordsWithObjectNameSingular } from '@/object-record/record-field-list/record-detail-section/relation/components/hooks/useGetMorphRelationRelatedRecordsWithObjectNameSingular';
import { type FieldDefinition } from '@/object-record/record-field/ui/types/FieldDefinition';
import { type FieldMorphRelationMetadata } from '@/object-record/record-field/ui/types/FieldMetadata';
-import { RightDrawerProvider } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
+import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
@@ -21,13 +21,13 @@ const StyledRelationChipsContainer = styled.div`
type FieldWidgetMorphRelationFieldProps = {
fieldDefinition: FieldDefinition;
recordId: string;
- isInRightDrawer: boolean;
+ isInSidePanel: boolean;
};
export const FieldWidgetMorphRelationField = ({
fieldDefinition,
recordId,
- isInRightDrawer,
+ isInSidePanel,
}: FieldWidgetMorphRelationFieldProps) => {
const fieldMetadata = fieldDefinition.metadata;
@@ -42,7 +42,7 @@ export const FieldWidgetMorphRelationField = ({
}
return (
-
+
{recordsWithObjectNameSingular.map((morphItem, index) => (
@@ -54,6 +54,6 @@ export const FieldWidgetMorphRelationField = ({
))}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetRelationCard.tsx b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetRelationCard.tsx
index 187ef4cb3c..d762334665 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetRelationCard.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetRelationCard.tsx
@@ -21,7 +21,7 @@ import { FIELD_WIDGET_RELATION_CARD_LOAD_MORE_INCREMENT } from '@/page-layout/wi
import { generateFieldWidgetInstanceId } from '@/page-layout/widgets/field/utils/generateFieldWidgetInstanceId';
import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
-import { RightDrawerProvider } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
+import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
import { isDefined } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
@@ -32,13 +32,13 @@ const StyledShowMoreButtonContainer = styled.div`
type FieldWidgetRelationCardProps = {
fieldDefinition: FieldDefinition;
relationValue: any;
- isInRightDrawer: boolean;
+ isInSidePanel: boolean;
};
export const FieldWidgetRelationCard = ({
fieldDefinition,
relationValue,
- isInRightDrawer,
+ isInSidePanel,
}: FieldWidgetRelationCardProps) => {
const widget = useCurrentWidget();
@@ -52,7 +52,7 @@ export const FieldWidgetRelationCard = ({
widgetId: widget.id,
recordId: targetRecord.id,
fieldName: fieldDefinition.metadata.fieldName,
- isInRightDrawer,
+ isInSidePanel,
});
const handleItemClick = (recordId: string) =>
@@ -129,7 +129,7 @@ export const FieldWidgetRelationCard = ({
const hasMoreRecords = remainingCount > 0;
return (
-
+
-
+
);
};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetRelationField.tsx b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetRelationField.tsx
index f2a7347bab..32bbe3c7e1 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetRelationField.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetRelationField.tsx
@@ -1,7 +1,7 @@
import { RecordChip } from '@/object-record/components/RecordChip';
import { type FieldDefinition } from '@/object-record/record-field/ui/types/FieldDefinition';
import { type FieldRelationMetadata } from '@/object-record/record-field/ui/types/FieldMetadata';
-import { RightDrawerProvider } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
+import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
import { styled } from '@linaria/react';
import { isDefined } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
@@ -21,13 +21,13 @@ const StyledRelationChipsContainer = styled.div`
type FieldWidgetRelationFieldProps = {
fieldDefinition: FieldDefinition;
relationValue: any;
- isInRightDrawer: boolean;
+ isInSidePanel: boolean;
};
export const FieldWidgetRelationField = ({
fieldDefinition,
relationValue,
- isInRightDrawer,
+ isInSidePanel,
}: FieldWidgetRelationFieldProps) => {
const fieldMetadata = fieldDefinition.metadata;
const isOneToMany = fieldMetadata.relationType === 'ONE_TO_MANY';
@@ -44,7 +44,7 @@ export const FieldWidgetRelationField = ({
if (isOneToMany) {
return (
-
+
{relationValue.map((relatedRecord: any) => (
@@ -56,12 +56,12 @@ export const FieldWidgetRelationField = ({
))}
-
+
);
}
return (
-
+
-
+
);
};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/components/__stories__/FieldWidget.stories.tsx b/packages/twenty-front/src/modules/page-layout/widgets/field/components/__stories__/FieldWidget.stories.tsx
index 94f74be4e8..21cda4dc30 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/field/components/__stories__/FieldWidget.stories.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/field/components/__stories__/FieldWidget.stories.tsx
@@ -387,7 +387,7 @@ export const TextFieldWidget: Story = {
{
- it('should generate an instance id without right drawer suffix', () => {
+ it('should generate an instance id without side panel suffix', () => {
const result = generateFieldWidgetInstanceId({
widgetId: 'widget-1',
recordId: 'record-1',
fieldName: 'name',
- isInRightDrawer: false,
+ isInSidePanel: false,
});
expect(result).toBe('widget-1-field-widget-record-1-name');
});
- it('should append right drawer suffix when isInRightDrawer is true', () => {
+ it('should append side panel suffix when isInSidePanel is true', () => {
const result = generateFieldWidgetInstanceId({
widgetId: 'widget-1',
recordId: 'record-1',
fieldName: 'name',
- isInRightDrawer: true,
+ isInSidePanel: true,
});
- expect(result).toBe('widget-1-field-widget-record-1-name-right-drawer');
+ expect(result).toBe('widget-1-field-widget-record-1-name-side-panel');
});
});
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/utils/generateFieldWidgetInstanceId.ts b/packages/twenty-front/src/modules/page-layout/widgets/field/utils/generateFieldWidgetInstanceId.ts
index 51c3266549..743ff65ec4 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/field/utils/generateFieldWidgetInstanceId.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/field/utils/generateFieldWidgetInstanceId.ts
@@ -2,12 +2,12 @@ export const generateFieldWidgetInstanceId = ({
widgetId,
recordId,
fieldName,
- isInRightDrawer,
+ isInSidePanel,
}: {
widgetId: string;
recordId: string;
fieldName: string;
- isInRightDrawer: boolean;
+ isInSidePanel: boolean;
}): string => {
- return `${widgetId}-field-widget-${recordId}-${fieldName}${isInRightDrawer ? '-right-drawer' : ''}`;
+ return `${widgetId}-field-widget-${recordId}-${fieldName}${isInSidePanel ? '-side-panel' : ''}`;
};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx
index 2226aac027..1193244daa 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx
@@ -9,7 +9,7 @@ import { FieldsWidgetGroupContainer } from '@/page-layout/widgets/fields/compone
import { useFieldsWidgetGroupsForDisplay } from '@/page-layout/widgets/fields/hooks/useFieldsWidgetGroupsForDisplay';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
-import { RightDrawerProvider } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
+import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import {
@@ -51,9 +51,9 @@ type FieldsWidgetProps = {
export const FieldsWidget = ({ widget }: FieldsWidgetProps) => {
const targetRecord = useTargetRecord();
- const { isInRightDrawer } = useLayoutRenderingContext();
+ const { isInSidePanel } = useLayoutRenderingContext();
- const instanceId = `fields-${widget.id}-${targetRecord.id}${isInRightDrawer ? '-right-drawer' : ''}`;
+ const instanceId = `fields-${widget.id}-${targetRecord.id}${isInSidePanel ? '-side-panel' : ''}`;
const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular: targetRecord.targetObjectNameSingular,
@@ -75,7 +75,7 @@ export const FieldsWidget = ({ widget }: FieldsWidgetProps) => {
if (!hasFieldsToDisplay) {
return (
-
+
{
-
+
);
}
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/__stories__/FieldsWidget.stories.tsx b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/__stories__/FieldsWidget.stories.tsx
index e3e44fa8dc..67d47e403d 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/__stories__/FieldsWidget.stories.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/__stories__/FieldsWidget.stories.tsx
@@ -341,7 +341,7 @@ export const WithViewFieldGroups: Story = {
{
- const { isInRightDrawer } = useLayoutRenderingContext();
+ const { isInSidePanel } = useLayoutRenderingContext();
return (
-
+
-
+
);
};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/front-component/components/FrontComponentWidgetRenderer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/front-component/components/FrontComponentWidgetRenderer.tsx
index befa252314..14757587d1 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/front-component/components/FrontComponentWidgetRenderer.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/front-component/components/FrontComponentWidgetRenderer.tsx
@@ -3,7 +3,7 @@ import { Suspense, lazy } from 'react';
import { isDefined } from 'twenty-shared/utils';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState';
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx
index b360d64813..9253ec5446 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx
@@ -1,4 +1,4 @@
-import { isSidePanelAnimatingState } from '@/command-menu/states/isSidePanelAnimatingState';
+import { isSidePanelAnimatingState } from '@/side-panel/states/isSidePanelAnimatingState';
import { pageLayoutDraggingWidgetIdComponentState } from '@/page-layout/states/pageLayoutDraggingWidgetIdComponentState';
import { pageLayoutResizingWidgetIdComponentState } from '@/page-layout/states/pageLayoutResizingWidgetIdComponentState';
import { GraphWidgetChartContainer } from '@/page-layout/widgets/graph/components/GraphWidgetChartContainer';
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertAggregateChartWidget.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertAggregateChartWidget.ts
index 8b2f0f3c3d..e2907c1b65 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertAggregateChartWidget.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertAggregateChartWidget.ts
@@ -1,4 +1,4 @@
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { assertIsDefinedOrThrow } from 'twenty-shared/utils';
import { type AggregateChartConfiguration } from '~/generated-metadata/graphql';
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertBarChartWidget.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertBarChartWidget.ts
index 90a6c1ec57..35ed695541 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertBarChartWidget.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertBarChartWidget.ts
@@ -1,4 +1,4 @@
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { assertIsDefinedOrThrow } from 'twenty-shared/utils';
import { type BarChartConfiguration } from '~/generated-metadata/graphql';
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertPieChartWidget.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertPieChartWidget.ts
index cb5f8c612f..9d37ccfe97 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertPieChartWidget.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertPieChartWidget.ts
@@ -1,4 +1,4 @@
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { assertIsDefinedOrThrow } from 'twenty-shared/utils';
import { type PieChartConfiguration } from '~/generated-metadata/graphql';
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/hasMinimalRequiredConfigForGraph.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/hasMinimalRequiredConfigForGraph.ts
index 56f0ac1cb6..803b594d14 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/hasMinimalRequiredConfigForGraph.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/hasMinimalRequiredConfigForGraph.ts
@@ -1,4 +1,4 @@
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { type FieldConfiguration } from '@/page-layout/types/FieldConfiguration';
import { isDefined } from 'twenty-shared/utils';
import {
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/normalizeChartConfigurationFields.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/normalizeChartConfigurationFields.ts
index 699e8dd39b..9c0bdb0125 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/normalizeChartConfigurationFields.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/normalizeChartConfigurationFields.ts
@@ -1,4 +1,4 @@
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import {
type BarChartConfiguration,
type GraphOrderBy,
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/hooks/useIsCurrentWidgetLastOfTab.ts b/packages/twenty-front/src/modules/page-layout/widgets/hooks/useIsCurrentWidgetLastOfTab.ts
index ba525bc582..78659267f7 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/hooks/useIsCurrentWidgetLastOfTab.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/hooks/useIsCurrentWidgetLastOfTab.ts
@@ -10,7 +10,7 @@ import { isDefined } from 'twenty-shared/utils';
export const useIsCurrentWidgetLastOfTab = (widgetId: string): boolean => {
const { currentPageLayout } = useCurrentPageLayout();
const isMobile = useIsMobile();
- const { isInRightDrawer } = useLayoutRenderingContext();
+ const { isInSidePanel } = useLayoutRenderingContext();
const isPageLayoutInEditMode = useAtomComponentStateValue(
isPageLayoutInEditModeComponentState,
);
@@ -31,7 +31,7 @@ export const useIsCurrentWidgetLastOfTab = (widgetId: string): boolean => {
? tab.widgets
: filterVisibleWidgets({
widgets: tab.widgets,
- context: buildWidgetVisibilityContext({ isMobile, isInRightDrawer }),
+ context: buildWidgetVisibilityContext({ isMobile, isInSidePanel }),
});
if (visibleWidgets.length === 0) {
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/hooks/useIsInPinnedTab.ts b/packages/twenty-front/src/modules/page-layout/widgets/hooks/useIsInPinnedTab.ts
index a71e78da60..39b1f49e55 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/hooks/useIsInPinnedTab.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/hooks/useIsInPinnedTab.ts
@@ -12,7 +12,7 @@ export const useIsInPinnedTab = () => {
const isMobile = useIsMobile();
const { tabId } = usePageLayoutContentContext();
- const { isInRightDrawer } = useLayoutRenderingContext();
+ const { isInSidePanel } = useLayoutRenderingContext();
const { currentPageLayout } = useCurrentPageLayoutOrThrow();
const isPageLayoutInEditMode = useAtomComponentStateValue(
@@ -22,7 +22,7 @@ export const useIsInPinnedTab = () => {
const tabsWithVisibleWidgets = getTabsWithVisibleWidgets({
tabs: currentPageLayout.tabs,
isMobile,
- isInRightDrawer,
+ isInSidePanel,
isEditMode: isPageLayoutInEditMode,
});
@@ -30,7 +30,7 @@ export const useIsInPinnedTab = () => {
tabs: tabsWithVisibleWidgets,
pageLayoutType: currentPageLayout.type,
isMobile,
- isInRightDrawer,
+ isInSidePanel,
});
return {
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/notes/components/NoteWidget.tsx b/packages/twenty-front/src/modules/page-layout/widgets/notes/components/NoteWidget.tsx
index d65478bef0..e803356185 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/notes/components/NoteWidget.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/notes/components/NoteWidget.tsx
@@ -1,7 +1,7 @@
import { NotesCard } from '@/activities/notes/components/NotesCard';
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
-import { RightDrawerProvider } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
+import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
import { styled } from '@linaria/react';
const StyledContainer = styled.div`
@@ -16,13 +16,13 @@ type NoteWidgetProps = {
};
export const NoteWidget = ({ widget: _widget }: NoteWidgetProps) => {
- const { isInRightDrawer } = useLayoutRenderingContext();
+ const { isInSidePanel } = useLayoutRenderingContext();
return (
-
+
-
+
);
};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/tasks/components/TaskWidget.tsx b/packages/twenty-front/src/modules/page-layout/widgets/tasks/components/TaskWidget.tsx
index c64fcecc99..f9cd291891 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/tasks/components/TaskWidget.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/tasks/components/TaskWidget.tsx
@@ -1,7 +1,7 @@
import { TasksCard } from '@/activities/tasks/components/TasksCard';
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
-import { RightDrawerProvider } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
+import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
import { styled } from '@linaria/react';
const StyledContainer = styled.div`
@@ -16,13 +16,13 @@ type TaskWidgetProps = {
};
export const TaskWidget = ({ widget: _widget }: TaskWidgetProps) => {
- const { isInRightDrawer } = useLayoutRenderingContext();
+ const { isInSidePanel } = useLayoutRenderingContext();
return (
-
+
-
+
);
};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/timeline/components/TimelineWidget.tsx b/packages/twenty-front/src/modules/page-layout/widgets/timeline/components/TimelineWidget.tsx
index b9eb019051..bd58feafad 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/timeline/components/TimelineWidget.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/timeline/components/TimelineWidget.tsx
@@ -1,7 +1,7 @@
import { TimelineCard } from '@/activities/timeline-activities/components/TimelineCard';
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
-import { RightDrawerProvider } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
+import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
import { styled } from '@linaria/react';
const StyledContainer = styled.div`
@@ -16,13 +16,13 @@ type TimelineWidgetProps = {
};
export const TimelineWidget = ({ widget: _widget }: TimelineWidgetProps) => {
- const { isInRightDrawer } = useLayoutRenderingContext();
+ const { isInSidePanel } = useLayoutRenderingContext();
return (
-
+
-
+
);
};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/utils/__tests__/getWidgetCardVariant.test.ts b/packages/twenty-front/src/modules/page-layout/widgets/utils/__tests__/getWidgetCardVariant.test.ts
index 44ceccac1d..98f4dbbeab 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/utils/__tests__/getWidgetCardVariant.test.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/utils/__tests__/getWidgetCardVariant.test.ts
@@ -12,7 +12,7 @@ describe('getWidgetCardVariant', () => {
isInPinnedTab: false,
pageLayoutType: PageLayoutType.DASHBOARD,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
}),
).toBe('dashboard');
});
@@ -24,7 +24,7 @@ describe('getWidgetCardVariant', () => {
isInPinnedTab: false,
pageLayoutType: PageLayoutType.RECORD_PAGE,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
}),
).toBe('canvas');
});
@@ -36,7 +36,7 @@ describe('getWidgetCardVariant', () => {
isInPinnedTab: true,
pageLayoutType: PageLayoutType.RECORD_PAGE,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
}),
).toBe('side-column');
});
@@ -48,19 +48,19 @@ describe('getWidgetCardVariant', () => {
isInPinnedTab: false,
pageLayoutType: PageLayoutType.RECORD_PAGE,
isMobile: true,
- isInRightDrawer: false,
+ isInSidePanel: false,
}),
).toBe('side-column');
});
- it('should return side-column when isInRightDrawer is true', () => {
+ it('should return side-column when isInSidePanel is true', () => {
expect(
getWidgetCardVariant({
layoutMode: PageLayoutTabLayoutMode.GRID,
isInPinnedTab: false,
pageLayoutType: PageLayoutType.RECORD_PAGE,
isMobile: false,
- isInRightDrawer: true,
+ isInSidePanel: true,
}),
).toBe('side-column');
});
@@ -72,7 +72,7 @@ describe('getWidgetCardVariant', () => {
isInPinnedTab: false,
pageLayoutType: PageLayoutType.RECORD_PAGE,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
}),
).toBe('record-page');
});
@@ -84,7 +84,7 @@ describe('getWidgetCardVariant', () => {
isInPinnedTab: false,
pageLayoutType: PageLayoutType.DASHBOARD,
isMobile: false,
- isInRightDrawer: false,
+ isInSidePanel: false,
}),
).toBe('dashboard');
});
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/utils/getWidgetCardVariant.ts b/packages/twenty-front/src/modules/page-layout/widgets/utils/getWidgetCardVariant.ts
index 3a929fa205..3ee8a5c3ec 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/utils/getWidgetCardVariant.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/utils/getWidgetCardVariant.ts
@@ -9,7 +9,7 @@ type GetWidgetCardVariantParams = {
isInPinnedTab: boolean;
pageLayoutType: PageLayoutType | null;
isMobile: boolean;
- isInRightDrawer: boolean;
+ isInSidePanel: boolean;
};
export const getWidgetCardVariant = ({
@@ -17,7 +17,7 @@ export const getWidgetCardVariant = ({
isInPinnedTab,
pageLayoutType,
isMobile,
- isInRightDrawer,
+ isInSidePanel,
}: GetWidgetCardVariantParams): WidgetCardVariant => {
if (pageLayoutType === PageLayoutType.DASHBOARD) {
return 'dashboard';
@@ -27,7 +27,7 @@ export const getWidgetCardVariant = ({
return 'canvas';
}
- if (isInPinnedTab || isMobile || isInRightDrawer) {
+ if (isInPinnedTab || isMobile || isInSidePanel) {
return 'side-column';
}
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionFilterRow.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionFilterRow.tsx
index 92007b00c2..66a883de19 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionFilterRow.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionFilterRow.tsx
@@ -2,7 +2,7 @@
import { styled } from '@linaria/react';
-import { AdvancedFilterCommandMenuRecordFilterOperandSelect } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterOperandSelect';
+import { AdvancedFilterSidePanelRecordFilterOperandSelect } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterOperandSelect';
import { AdvancedFilterRecordFilterOptionsDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown';
import { getAdvancedFilterObjectFilterDropdownComponentInstanceId } from '@/object-record/advanced-filter/utils/getAdvancedFilterObjectFilterDropdownComponentInstanceId';
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
@@ -53,7 +53,7 @@ export const SettingsRolePermissionsObjectLevelRecordLevelPermissionFilterRow =
recordFilterId={recordFilter.id}
/>
-
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuAddToNavDraggablePlaceholder.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelAddToNavigationDraggablePlaceholder.tsx
similarity index 73%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuAddToNavDraggablePlaceholder.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelAddToNavigationDraggablePlaceholder.tsx
index ff3b6a201d..53398ae897 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuAddToNavDraggablePlaceholder.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelAddToNavigationDraggablePlaceholder.tsx
@@ -1,15 +1,15 @@
import { Draggable } from '@hello-pangea/dnd';
import { type ReactNode } from 'react';
-type CommandMenuAddToNavDraggablePlaceholderProps = {
+type SidePanelAddToNavigationDraggablePlaceholderProps = {
index: number;
children: ReactNode;
};
-export const CommandMenuAddToNavDraggablePlaceholder = ({
+export const SidePanelAddToNavigationDraggablePlaceholder = ({
index,
children,
-}: CommandMenuAddToNavDraggablePlaceholderProps) => (
+}: SidePanelAddToNavigationDraggablePlaceholderProps) => (
ReactNode;
};
-export const CommandMenuAddToNavDroppable = ({
+export const SidePanelAddToNavigationDroppable = ({
children,
-}: CommandMenuAddToNavDroppableProps) => {
+}: SidePanelAddToNavigationDroppableProps) => {
const { sourceDroppableId } = useContext(NavigationDragSourceContext);
const isDropDisabled = sourceDroppableId === ADD_TO_NAV_SOURCE_DROPPABLE_ID;
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuAskAIInfo.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelAskAIInfo.tsx
similarity index 95%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuAskAIInfo.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelAskAIInfo.tsx
index 77d5e8b573..6707da8f6b 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuAskAIInfo.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelAskAIInfo.tsx
@@ -11,7 +11,7 @@ const StyledPageTitle = styled.div`
font-weight: ${themeCssVariables.font.weight.semiBold};
`;
-export const CommandMenuAskAIInfo = () => {
+export const SidePanelAskAIInfo = () => {
const currentAIChatThreadTitle = useAtomStateValue(
currentAIChatThreadTitleState,
);
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuBackButton.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelBackButton.tsx
similarity index 75%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuBackButton.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelBackButton.tsx
index 167574498e..3e2d9ad1a1 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuBackButton.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelBackButton.tsx
@@ -1,6 +1,6 @@
-import { COMMAND_MENU_NAVIGATION_HISTORY_DROPDOWN_ID } from '@/command-menu/constants/CommandMenuNavigationHistoryDropdownId';
-import { useCommandMenuContextChips } from '@/command-menu/hooks/useCommandMenuContextChips';
-import { useCommandMenuHistory } from '@/command-menu/hooks/useCommandMenuHistory';
+import { SIDE_PANEL_NAVIGATION_HISTORY_DROPDOWN_ID } from '@/side-panel/constants/SidePanelNavigationHistoryDropdownId';
+import { useSidePanelContextChips } from '@/side-panel/hooks/useSidePanelContextChips';
+import { useSidePanelHistory } from '@/side-panel/hooks/useSidePanelHistory';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -23,10 +23,10 @@ const StyledIconChevronLeft = styled(IconChevronLeft)`
color: ${themeCssVariables.font.color.secondary};
`;
-export const CommandMenuBackButton = () => {
- const { goBackFromCommandMenu } = useCommandMenuHistory();
+export const SidePanelBackButton = () => {
+ const { goBackFromSidePanel } = useSidePanelHistory();
- const { contextChips } = useCommandMenuContextChips();
+ const { contextChips } = useSidePanelContextChips();
const { openDropdown } = useOpenDropdown();
@@ -44,7 +44,7 @@ export const CommandMenuBackButton = () => {
openDropdown({
dropdownComponentInstanceIdFromProps:
- COMMAND_MENU_NAVIGATION_HISTORY_DROPDOWN_ID,
+ SIDE_PANEL_NAVIGATION_HISTORY_DROPDOWN_ID,
});
};
@@ -56,7 +56,7 @@ export const CommandMenuBackButton = () => {
Icon={StyledIconChevronLeft}
size="small"
variant="tertiary"
- onClick={goBackFromCommandMenu}
+ onClick={goBackFromSidePanel}
/>
}
@@ -68,7 +68,7 @@ export const CommandMenuBackButton = () => {
key={index}
LeftComponent={chip.Icons}
onClick={() => {
- closeDropdown(COMMAND_MENU_NAVIGATION_HISTORY_DROPDOWN_ID);
+ closeDropdown(SIDE_PANEL_NAVIGATION_HISTORY_DROPDOWN_ID);
chip.onClick?.();
}}
text={chip.text}
@@ -77,7 +77,7 @@ export const CommandMenuBackButton = () => {
}
- dropdownId={COMMAND_MENU_NAVIGATION_HISTORY_DROPDOWN_ID}
+ dropdownId={SIDE_PANEL_NAVIGATION_HISTORY_DROPDOWN_ID}
dropdownPlacement="bottom-start"
disableClickForClickableComponent={true}
/>
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelContainer.tsx
similarity index 80%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelContainer.tsx
index 6e54677cdc..bbcc47545e 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelContainer.tsx
@@ -1,6 +1,6 @@
import { styled } from '@linaria/react';
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
-import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId';
+import { SIDE_PANEL_COMPONENT_INSTANCE_ID } from '@/side-panel/constants/SidePanelComponentInstanceId';
import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
@@ -12,7 +12,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { themeCssVariables } from 'twenty-ui/theme-constants';
-const StyledCommandMenuContainer = styled.div<{ isMobile: boolean }>`
+const StyledSidePanelContainer = styled.div<{ isMobile: boolean }>`
max-height: ${({ isMobile }) => {
const mobileOffset = isMobile ? themeCssVariables.spacing[16] : '0px';
@@ -23,16 +23,14 @@ const StyledCommandMenuContainer = styled.div<{ isMobile: boolean }>`
flex: 1;
`;
-type CommandMenuContainerProps = {
+type SidePanelContainerProps = {
children: React.ReactNode;
};
-export const CommandMenuContainer = ({
- children,
-}: CommandMenuContainerProps) => {
+export const SidePanelContainer = ({ children }: SidePanelContainerProps) => {
const contextStoreCurrentObjectMetadataItemId = useAtomComponentStateValue(
contextStoreCurrentObjectMetadataItemIdComponentState,
- COMMAND_MENU_COMPONENT_INSTANCE_ID,
+ SIDE_PANEL_COMPONENT_INSTANCE_ID,
);
const isMobile = useIsMobile();
@@ -45,7 +43,7 @@ export const CommandMenuContainer = ({
const contextStoreCurrentViewId = useAtomComponentStateValue(
contextStoreCurrentViewIdComponentState,
- COMMAND_MENU_COMPONENT_INSTANCE_ID,
+ SIDE_PANEL_COMPONENT_INSTANCE_ID,
);
const recordIndexId = getRecordIndexIdFromObjectNamePluralAndViewId(
@@ -56,14 +54,14 @@ export const CommandMenuContainer = ({
return (
-
+
{children}
-
+
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelContextChip.tsx
similarity index 92%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelContextChip.tsx
index e5aa80897b..d5c7c25cd7 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelContextChip.tsx
@@ -2,7 +2,7 @@ import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { isNonEmptyString } from '@sniptt/guards';
import { Fragment } from 'react/jsx-runtime';
-import { type CommandMenuPages } from 'twenty-shared/types';
+import { type SidePanelPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
import { themeCssVariables } from 'twenty-ui/theme-constants';
@@ -51,7 +51,7 @@ const StyledEmptyText = styled.div`
color: ${themeCssVariables.font.color.tertiary};
`;
-export type CommandMenuContextChipProps = {
+export type SidePanelContextChipProps = {
Icons: React.ReactNode[];
text?: string;
onClick?: () => void;
@@ -59,19 +59,19 @@ export type CommandMenuContextChipProps = {
maxWidth?: string;
forceEmptyText?: boolean;
page?: {
- page: CommandMenuPages;
+ page: SidePanelPages;
pageId: string;
};
};
-export const CommandMenuContextChip = ({
+export const SidePanelContextChip = ({
Icons,
text,
onClick,
testId,
maxWidth,
forceEmptyText = false,
-}: CommandMenuContextChipProps) => {
+}: SidePanelContextChipProps) => {
return (
`
justify-content: center;
`;
-export const CommandMenuContextRecordChipAvatars = ({
+export const SidePanelContextRecordChipAvatars = ({
objectMetadataItem,
record,
}: {
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordsChip.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelContextRecordsChip.tsx
similarity index 75%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordsChip.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelContextRecordsChip.tsx
index 6fffcf5eeb..44da5a8bc7 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordsChip.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelContextRecordsChip.tsx
@@ -1,12 +1,12 @@
-import { CommandMenuContextChip } from '@/command-menu/components/CommandMenuContextChip';
-import { CommandMenuContextRecordChipAvatars } from '@/command-menu/components/CommandMenuContextRecordChipAvatars';
-import { getSelectedRecordsContextText } from '@/command-menu/utils/getRecordContextText';
+import { SidePanelContextChip } from '@/side-panel/components/SidePanelContextChip';
+import { SidePanelContextRecordChipAvatars } from '@/side-panel/components/SidePanelContextRecordChipAvatars';
+import { getSelectedRecordsContextText } from '@/side-panel/utils/getSelectedRecordsContextText';
import { useFindManyRecordsSelectedInContextStore } from '@/context-store/hooks/useFindManyRecordsSelectedInContextStore';
import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
import { allowRequestsToTwentyIconsState } from '@/client-config/states/allowRequestsToTwentyIcons';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-export const CommandMenuContextRecordsChip = ({
+export const SidePanelContextRecordsChip = ({
objectMetadataItemId,
instanceId,
}: {
@@ -31,7 +31,7 @@ export const CommandMenuContextRecordsChip = ({
}
const Avatars = records.map((record) => (
- {
+ const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
+
+ if (!isDefined(pageLayoutId)) {
+ return null;
+ }
+
+ return ;
+};
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuDefaultSelectionEffect.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelDefaultSelectionEffect.tsx
similarity index 66%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuDefaultSelectionEffect.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelDefaultSelectionEffect.tsx
index 713c02da51..adcec7aa15 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuDefaultSelectionEffect.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelDefaultSelectionEffect.tsx
@@ -1,5 +1,5 @@
-import { COMMAND_MENU_LIST_SELECTABLE_LIST_ID } from '@/command-menu/constants/CommandMenuListSelectableListId';
-import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelectedCommandState';
+import { SIDE_PANEL_SELECTABLE_LIST_ID } from '@/side-panel/constants/SidePanelSelectableListId';
+import { hasUserSelectedSidePanelListItemState } from '@/side-panel/states/hasUserSelectedSidePanelListItemState';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
@@ -7,27 +7,29 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
import { useEffect } from 'react';
import { isDefined } from 'twenty-shared/utils';
-export const CommandMenuDefaultSelectionEffect = ({
+export const SidePanelDefaultSelectionEffect = ({
selectableItemIds,
}: {
selectableItemIds: string[];
}) => {
const { setSelectedItemId } = useSelectableList(
- COMMAND_MENU_LIST_SELECTABLE_LIST_ID,
+ SIDE_PANEL_SELECTABLE_LIST_ID,
);
const selectedItemId = useAtomComponentStateValue(
selectedItemIdComponentState,
- COMMAND_MENU_LIST_SELECTABLE_LIST_ID,
+ SIDE_PANEL_SELECTABLE_LIST_ID,
);
- const hasUserSelectedCommand = useAtomStateValue(hasUserSelectedCommandState);
+ const hasUserSelectedSidePanelListItem = useAtomStateValue(
+ hasUserSelectedSidePanelListItemState,
+ );
useEffect(() => {
if (
isDefined(selectedItemId) &&
selectableItemIds.includes(selectedItemId) &&
- hasUserSelectedCommand
+ hasUserSelectedSidePanelListItem
) {
return;
}
@@ -36,7 +38,7 @@ export const CommandMenuDefaultSelectionEffect = ({
setSelectedItemId(selectableItemIds[0]);
}
}, [
- hasUserSelectedCommand,
+ hasUserSelectedSidePanelListItem,
selectableItemIds,
selectedItemId,
setSelectedItemId,
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuFolderInfo.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelFolderInfo.tsx
similarity index 78%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuFolderInfo.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelFolderInfo.tsx
index dbbf679ea6..a28185ce1d 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuFolderInfo.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelFolderInfo.tsx
@@ -2,9 +2,9 @@ import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import { useIcons } from 'twenty-ui/display';
-import { CommandMenuPageInfoLayout } from '@/command-menu/components/CommandMenuPageInfoLayout';
-import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
-import { commandMenuShouldFocusTitleInputComponentState } from '@/command-menu/states/commandMenuShouldFocusTitleInputComponentState';
+import { SidePanelPageInfoLayout } from '@/side-panel/components/SidePanelPageInfoLayout';
+import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState';
+import { sidePanelShouldFocusTitleInputComponentState } from '@/side-panel/states/sidePanelShouldFocusTitleInputComponentState';
import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
import { FOLDER_ICON_DEFAULT } from '@/navigation-menu-item/constants/FolderIconDefault';
import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
@@ -20,17 +20,15 @@ const StyledClickableIconWrapper = styled.div`
cursor: pointer;
`;
-export const CommandMenuFolderInfo = () => {
+export const SidePanelFolderInfo = () => {
const { t } = useLingui();
const { getIcon } = useIcons();
- const commandMenuPageInfo = useAtomStateValue(commandMenuPageInfoState);
- const [
- commandMenuShouldFocusTitleInput,
- setCommandMenuShouldFocusTitleInput,
- ] = useAtomComponentState(
- commandMenuShouldFocusTitleInputComponentState,
- commandMenuPageInfo.instanceId,
- );
+ const sidePanelPageInfo = useAtomStateValue(sidePanelPageInfoState);
+ const [sidePanelShouldFocusTitleInput, setSidePanelShouldFocusTitleInput] =
+ useAtomComponentState(
+ sidePanelShouldFocusTitleInputComponentState,
+ sidePanelPageInfo.instanceId,
+ );
const selectedNavigationMenuItemInEditMode = useAtomStateValue(
selectedNavigationMenuItemInEditModeState,
);
@@ -70,10 +68,10 @@ export const CommandMenuFolderInfo = () => {
const FolderIconComponent = getIcon(selectedIconKey);
return (
-
updateFolderInDraft(itemId, { icon: iconKey })
@@ -100,8 +98,8 @@ export const CommandMenuFolderInfo = () => {
onClickOutside={handleSave}
onTab={handleSave}
onShiftTab={handleSave}
- shouldFocus={commandMenuShouldFocusTitleInput}
- onFocus={() => setCommandMenuShouldFocusTitleInput(false)}
+ shouldFocus={sidePanelShouldFocusTitleInput}
+ onFocus={() => setSidePanelShouldFocusTitleInput(false)}
/>
}
label={t`Folder`}
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuSidePanelForDesktop.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelForDesktop.tsx
similarity index 61%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuSidePanelForDesktop.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelForDesktop.tsx
index 3116a2e63a..5082ec355f 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuSidePanelForDesktop.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelForDesktop.tsx
@@ -1,17 +1,17 @@
-import { CommandMenuRouter } from '@/command-menu/components/CommandMenuRouter';
-import { CommandMenuWidthEffect } from '@/command-menu/components/CommandMenuWidthEffect';
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { useCommandMenuCloseAnimationCompleteCleanup } from '@/command-menu/hooks/useCommandMenuCloseAnimationCompleteCleanup';
+import { SidePanelRouter } from '@/side-panel/components/SidePanelRouter';
+import { SidePanelWidthEffect } from '@/side-panel/components/SidePanelWidthEffect';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { useSidePanelCloseAnimationCompleteCleanup } from '@/side-panel/hooks/useSidePanelCloseAnimationCompleteCleanup';
import {
- COMMAND_MENU_WIDTH_VAR,
- commandMenuWidthState,
-} from '@/command-menu/states/commandMenuWidthState';
-import { isCommandMenuClosingState } from '@/command-menu/states/isCommandMenuClosingState';
-import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
+ SIDE_PANEL_WIDTH_VAR,
+ sidePanelWidthState,
+} from '@/side-panel/states/sidePanelWidthState';
+import { isSidePanelClosingState } from '@/side-panel/states/isSidePanelClosingState';
+import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState';
import { tableWidthResizeIsActiveState } from '@/object-record/record-table/states/tableWidthResizeIsActivedState';
import { ModalContainerContext } from '@/ui/layout/modal/contexts/ModalContainerContext';
import { ResizablePanelGap } from '@/ui/layout/resizable-panel/components/ResizablePanelGap';
-import { COMMAND_MENU_CONSTRAINTS } from '@/ui/layout/resizable-panel/constants/CommandMenuConstraints';
+import { SIDE_PANEL_CONSTRAINTS } from '@/side-panel/constants/SidePanelConstraints';
import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
@@ -26,7 +26,7 @@ const StyledSidePanelWrapper = styled.div<{
flex-shrink: 0;
min-width: 0;
overflow: hidden;
- width: ${({ isOpen }) => (isOpen ? `var(${COMMAND_MENU_WIDTH_VAR})` : '0px')};
+ width: ${({ isOpen }) => (isOpen ? `var(${SIDE_PANEL_WIDTH_VAR})` : '0px')};
transition: ${({ isResizing }) =>
isResizing
? 'none'
@@ -58,38 +58,36 @@ const StyledModalContainer = styled.div`
const GAP_WIDTH = 8;
-export const CommandMenuSidePanelForDesktop = () => {
- const isCommandMenuOpened = useAtomStateValue(isCommandMenuOpenedState);
- const isCommandMenuClosing = useAtomStateValue(isCommandMenuClosingState);
- const [commandMenuWidth, setCommandMenuWidth] = useAtomState(
- commandMenuWidthState,
- );
- const { closeCommandMenu } = useCommandMenu();
- const { commandMenuCloseAnimationCompleteCleanup } =
- useCommandMenuCloseAnimationCompleteCleanup();
+export const SidePanelForDesktop = () => {
+ const isSidePanelOpened = useAtomStateValue(isSidePanelOpenedState);
+ const isSidePanelClosing = useAtomStateValue(isSidePanelClosingState);
+ const [sidePanelWidth, setSidePanelWidth] = useAtomState(sidePanelWidthState);
+ const { closeSidePanelMenu } = useSidePanelMenu();
+ const { sidePanelCloseAnimationCompleteCleanup } =
+ useSidePanelCloseAnimationCompleteCleanup();
const [modalContainer, setModalContainer] = useState(
null,
);
const [isResizing, setIsResizing] = useState(false);
const [shouldRenderContent, setShouldRenderContent] =
- useState(isCommandMenuOpened);
+ useState(isSidePanelOpened);
const setTableWidthResizeIsActive = useSetAtomState(
tableWidthResizeIsActiveState,
);
- const shouldShowContent = isCommandMenuOpened || shouldRenderContent;
+ const shouldShowContent = isSidePanelOpened || shouldRenderContent;
const handleTransitionEnd = () => {
- if (isCommandMenuOpened) {
+ if (isSidePanelOpened) {
// Open animation completed - ensure content persists for close animation
setShouldRenderContent(true);
} else {
// Close animation completed
setShouldRenderContent(false);
- if (isCommandMenuClosing) {
- commandMenuCloseAnimationCompleteCleanup();
+ if (isSidePanelClosing) {
+ sidePanelCloseAnimationCompleteCleanup();
}
}
};
@@ -103,11 +101,11 @@ export const CommandMenuSidePanelForDesktop = () => {
const handleWidthChange = useCallback(
(width: number) => {
- setCommandMenuWidth(width);
+ setSidePanelWidth(width);
setIsResizing(false);
setTableWidthResizeIsActive(true);
},
- [setCommandMenuWidth, setTableWidthResizeIsActive],
+ [setSidePanelWidth, setTableWidthResizeIsActive],
);
const handleResizeStart = useCallback(() => {
@@ -116,35 +114,35 @@ export const CommandMenuSidePanelForDesktop = () => {
}, [setTableWidthResizeIsActive]);
const handleCollapse = useCallback(() => {
- closeCommandMenu();
+ closeSidePanelMenu();
setIsResizing(false);
setTableWidthResizeIsActive(true);
- }, [closeCommandMenu, setTableWidthResizeIsActive]);
+ }, [closeSidePanelMenu, setTableWidthResizeIsActive]);
return (
<>
-
+
- {shouldShowContent && }
+ {shouldShowContent && }
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelGroup.tsx
similarity index 88%
rename from packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelGroup.tsx
index f104a9b8eb..f29c6fbb4e 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelGroup.tsx
@@ -18,12 +18,12 @@ const StyledGroup = styled.div`
gap: ${themeCssVariables.spacing[0.5]};
`;
-type CommandGroupProps = {
+type SidePanelGroupProps = {
heading: string;
children: React.ReactNode | React.ReactNode[];
};
-export const CommandGroup = ({ heading, children }: CommandGroupProps) => {
+export const SidePanelGroup = ({ heading, children }: SidePanelGroupProps) => {
if (!children || !React.Children.count(children)) {
return null;
}
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemWithAddToNavigationDrag.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelItemWithAddToNavigationDrag.tsx
similarity index 94%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuItemWithAddToNavigationDrag.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelItemWithAddToNavigationDrag.tsx
index ed0876310e..9f014786e9 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItemWithAddToNavigationDrag.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelItemWithAddToNavigationDrag.tsx
@@ -10,7 +10,16 @@ import { addToNavPayloadRegistryState } from '@/navigation-menu-item/states/addT
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import type { AddToNavigationDragPayload } from '@/navigation-menu-item/types/add-to-navigation-drag-payload';
-type CommandMenuItemWithAddToNavigationDragProps = {
+const StyledDraggableMenuItem = styled.div`
+ cursor: grab;
+ width: 100%;
+
+ &:active {
+ cursor: grabbing;
+ }
+`;
+
+type SidePanelItemWithAddToNavigationDragProps = {
icon?: IconComponent;
customIconContent?: ReactNode;
label: string;
@@ -21,16 +30,7 @@ type CommandMenuItemWithAddToNavigationDragProps = {
dragIndex?: number;
};
-const StyledDraggableMenuItem = styled.div`
- cursor: grab;
- width: 100%;
-
- &:active {
- cursor: grabbing;
- }
-`;
-
-export const CommandMenuItemWithAddToNavigationDrag = ({
+export const SidePanelItemWithAddToNavigationDrag = ({
icon,
customIconContent,
label,
@@ -39,7 +39,7 @@ export const CommandMenuItemWithAddToNavigationDrag = ({
onClick,
payload,
dragIndex,
-}: CommandMenuItemWithAddToNavigationDragProps) => {
+}: SidePanelItemWithAddToNavigationDragProps) => {
const { t } = useLingui();
const setAddToNavPayloadRegistry = useSetAtomState(
addToNavPayloadRegistryState,
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuLinkInfo.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelLinkInfo.tsx
similarity index 75%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuLinkInfo.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelLinkInfo.tsx
index 57a585dae9..e356762056 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuLinkInfo.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelLinkInfo.tsx
@@ -1,9 +1,9 @@
import { useLingui } from '@lingui/react/macro';
import { IconLink } from 'twenty-ui/display';
-import { CommandMenuPageInfoLayout } from '@/command-menu/components/CommandMenuPageInfoLayout';
-import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
-import { commandMenuShouldFocusTitleInputComponentState } from '@/command-menu/states/commandMenuShouldFocusTitleInputComponentState';
+import { SidePanelPageInfoLayout } from '@/side-panel/components/SidePanelPageInfoLayout';
+import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState';
+import { sidePanelShouldFocusTitleInputComponentState } from '@/side-panel/states/sidePanelShouldFocusTitleInputComponentState';
import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
import { useUpdateLinkInDraft } from '@/navigation-menu-item/hooks/useUpdateLinkInDraft';
@@ -13,16 +13,14 @@ import { TitleInput } from '@/ui/input/components/TitleInput';
import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-export const CommandMenuLinkInfo = () => {
+export const SidePanelLinkInfo = () => {
const { t } = useLingui();
- const commandMenuPageInfo = useAtomStateValue(commandMenuPageInfoState);
- const [
- commandMenuShouldFocusTitleInput,
- setCommandMenuShouldFocusTitleInput,
- ] = useAtomComponentState(
- commandMenuShouldFocusTitleInputComponentState,
- commandMenuPageInfo.instanceId,
- );
+ const sidePanelPageInfo = useAtomStateValue(sidePanelPageInfoState);
+ const [sidePanelShouldFocusTitleInput, setSidePanelShouldFocusTitleInput] =
+ useAtomComponentState(
+ sidePanelShouldFocusTitleInputComponentState,
+ sidePanelPageInfo.instanceId,
+ );
const selectedNavigationMenuItemInEditMode = useAtomStateValue(
selectedNavigationMenuItemInEditModeState,
);
@@ -59,7 +57,7 @@ export const CommandMenuLinkInfo = () => {
};
return (
- {
onClickOutside={handleSave}
onTab={handleSave}
onShiftTab={handleSave}
- shouldFocus={commandMenuShouldFocusTitleInput}
- onFocus={() => setCommandMenuShouldFocusTitleInput(false)}
+ shouldFocus={sidePanelShouldFocusTitleInput}
+ onFocus={() => setSidePanelShouldFocusTitleInput(false)}
/>
}
label={t`Link`}
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelList.tsx
similarity index 55%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelList.tsx
index 9bd04b200e..f5e367abce 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelList.tsx
@@ -1,12 +1,12 @@
import { ActionComponent } from '@/action-menu/actions/display/components/ActionComponent';
-import { CommandGroup } from '@/command-menu/components/CommandGroup';
-import { type ActionGroupConfig } from '@/command-menu/components/CommandMenu';
-import { CommandMenuDefaultSelectionEffect } from '@/command-menu/components/CommandMenuDefaultSelectionEffect';
-import { COMMAND_MENU_LIST_SELECTABLE_LIST_ID } from '@/command-menu/constants/CommandMenuListSelectableListId';
-import { COMMAND_MENU_SEARCH_BAR_HEIGHT } from '@/command-menu/constants/CommandMenuSearchBarHeight';
-import { COMMAND_MENU_SEARCH_BAR_PADDING } from '@/command-menu/constants/CommandMenuSearchBarPadding';
-import { SIDE_PANEL_FOCUS_ID } from '@/command-menu/constants/SidePanelFocusId';
-import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelectedCommandState';
+import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
+import { SidePanelDefaultSelectionEffect } from '@/side-panel/components/SidePanelDefaultSelectionEffect';
+import { SIDE_PANEL_SELECTABLE_LIST_ID } from '@/side-panel/constants/SidePanelSelectableListId';
+import { SIDE_PANEL_TOP_BAR_HEIGHT } from '@/side-panel/constants/SidePanelTopBarHeight';
+import { SIDE_PANEL_LIST_PADDING } from '@/side-panel/constants/SidePanelListPadding';
+import { SIDE_PANEL_FOCUS_ID } from '@/side-panel/constants/SidePanelFocusId';
+import { hasUserSelectedSidePanelListItemState } from '@/side-panel/states/hasUserSelectedSidePanelListItemState';
+import { type SidePanelActionGroupConfig } from '@/side-panel/types/SidePanelActionGroupConfig';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
@@ -14,8 +14,8 @@ import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
-export type CommandMenuListProps = {
- commandGroups: ActionGroupConfig[];
+export type SidePanelListProps = {
+ commandGroups: SidePanelActionGroupConfig[];
selectableItemIds: string[];
children?: React.ReactNode;
loading?: boolean;
@@ -25,8 +25,7 @@ export type CommandMenuListProps = {
const StyledInnerList = styled.div`
max-height: calc(
- 100dvh - ${COMMAND_MENU_SEARCH_BAR_HEIGHT}px -
- ${COMMAND_MENU_SEARCH_BAR_PADDING * 2}px
+ 100dvh - ${SIDE_PANEL_TOP_BAR_HEIGHT}px - ${SIDE_PANEL_LIST_PADDING * 2}px
);
padding-left: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[2]};
@@ -35,13 +34,12 @@ const StyledInnerList = styled.div`
@media (min-width: ${MOBILE_VIEWPORT}px) {
max-height: calc(
- 100dvh - ${COMMAND_MENU_SEARCH_BAR_HEIGHT}px -
- ${COMMAND_MENU_SEARCH_BAR_PADDING * 2}px
+ 100dvh - ${SIDE_PANEL_TOP_BAR_HEIGHT}px - ${SIDE_PANEL_LIST_PADDING * 2}px
);
}
`;
-const StyledCommandMenuList = styled.div`
+const StyledSidePanelList = styled.div`
overflow-y: hidden;
`;
@@ -55,41 +53,39 @@ const StyledEmpty = styled.div`
white-space: pre-wrap;
`;
-export const CommandMenuList = ({
+export const SidePanelList = ({
commandGroups,
selectableItemIds,
children,
loading = false,
noResults = false,
noResultsText,
-}: CommandMenuListProps) => {
- const setHasUserSelectedCommand = useSetAtomState(
- hasUserSelectedCommandState,
+}: SidePanelListProps) => {
+ const setHasUserSelectedSidePanelListItem = useSetAtomState(
+ hasUserSelectedSidePanelListItemState,
);
return (
-
-
-
+
+
+
{
- setHasUserSelectedCommand(true);
+ setHasUserSelectedSidePanelListItem(true);
}}
>
{children}
{commandGroups.map(({ heading, items }) =>
items?.length ? (
-
+
{items.map((item) => (
))}
-
+
) : null,
)}
{noResults && !loading && (
@@ -98,6 +94,6 @@ export const CommandMenuList = ({
-
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuMultipleRecordsInfo.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelMultipleRecordsInfo.tsx
similarity index 73%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuMultipleRecordsInfo.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelMultipleRecordsInfo.tsx
index 48faba1b78..1215f23fb8 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuMultipleRecordsInfo.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelMultipleRecordsInfo.tsx
@@ -1,22 +1,22 @@
import { DEFAULT_RECORD_ACTIONS_CONFIG } from '@/action-menu/actions/record-actions/constants/DefaultRecordActionsConfig';
import { MultipleRecordsActionKeys } from '@/action-menu/actions/record-actions/multiple-records/types/MultipleRecordsActionKeys';
import { getActionLabel } from '@/action-menu/utils/getActionLabel';
-import { CommandMenuPageInfoLayout } from '@/command-menu/components/CommandMenuPageInfoLayout';
+import { SidePanelPageInfoLayout } from '@/side-panel/components/SidePanelPageInfoLayout';
import { useFindManyRecordsSelectedInContextStore } from '@/context-store/hooks/useFindManyRecordsSelectedInContextStore';
import { t } from '@lingui/core/macro';
import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme-constants';
-type CommandMenuMultipleRecordsInfoProps = {
- commandMenuPageInstanceId: string;
+type SidePanelMultipleRecordsInfoProps = {
+ sidePanelPageInstanceId: string;
};
-export const CommandMenuMultipleRecordsInfo = ({
- commandMenuPageInstanceId,
-}: CommandMenuMultipleRecordsInfoProps) => {
+export const SidePanelMultipleRecordsInfo = ({
+ sidePanelPageInstanceId,
+}: SidePanelMultipleRecordsInfoProps) => {
const { theme } = useContext(ThemeContext);
const { totalCount } = useFindManyRecordsSelectedInContextStore({
- instanceId: commandMenuPageInstanceId,
+ instanceId: sidePanelPageInstanceId,
limit: 1,
});
@@ -24,7 +24,7 @@ export const CommandMenuMultipleRecordsInfo = ({
DEFAULT_RECORD_ACTIONS_CONFIG[MultipleRecordsActionKeys.UPDATE];
return (
- }
iconColor={theme.font.color.tertiary}
title={getActionLabel(label)}
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuObjectViewRecordInfo.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelObjectViewRecordInfo.tsx
similarity index 90%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuObjectViewRecordInfo.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelObjectViewRecordInfo.tsx
index 2d3df58075..775d099dae 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuObjectViewRecordInfo.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelObjectViewRecordInfo.tsx
@@ -1,7 +1,7 @@
import { useLingui } from '@lingui/react/macro';
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
-import { CommandMenuPageInfoLayout } from '@/command-menu/components/CommandMenuPageInfoLayout';
+import { SidePanelPageInfoLayout } from '@/side-panel/components/SidePanelPageInfoLayout';
import { NavigationMenuItemIcon } from '@/navigation-menu-item/components/NavigationMenuItemIcon';
import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
import { useSelectedNavigationMenuItemEditItem } from '@/navigation-menu-item/hooks/useSelectedNavigationMenuItemEditItem';
@@ -9,7 +9,7 @@ import { useSelectedNavigationMenuItemEditItemLabel } from '@/navigation-menu-it
import { useSelectedNavigationMenuItemEditItemObjectMetadata } from '@/navigation-menu-item/hooks/useSelectedNavigationMenuItemEditItemObjectMetadata';
import { ViewKey } from '@/views/types/ViewKey';
-export const CommandMenuObjectViewRecordInfo = () => {
+export const SidePanelObjectViewRecordInfo = () => {
const { t } = useLingui();
const { selectedItem } = useSelectedNavigationMenuItemEditItem();
const { selectedItemLabel } = useSelectedNavigationMenuItemEditItemLabel();
@@ -42,7 +42,7 @@ export const CommandMenuObjectViewRecordInfo = () => {
: t`View`;
return (
- }
title={}
label={label}
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageInfo.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelPageInfo.tsx
similarity index 52%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuPageInfo.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelPageInfo.tsx
index 5130f4018d..24a6872370 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageInfo.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelPageInfo.tsx
@@ -5,23 +5,23 @@ import {
OverflowingTextWithTooltip,
} from 'twenty-ui/display';
-import { CommandMenuAskAIInfo } from '@/command-menu/components/CommandMenuAskAIInfo';
-import { CommandMenuFolderInfo } from '@/command-menu/components/CommandMenuFolderInfo';
-import { CommandMenuLinkInfo } from '@/command-menu/components/CommandMenuLinkInfo';
-import { CommandMenuMultipleRecordsInfo } from '@/command-menu/components/CommandMenuMultipleRecordsInfo';
-import { CommandMenuObjectViewRecordInfo } from '@/command-menu/components/CommandMenuObjectViewRecordInfo';
-import { CommandMenuPageInfoLayout } from '@/command-menu/components/CommandMenuPageInfoLayout';
-import { CommandMenuPageLayoutInfo } from '@/command-menu/components/CommandMenuPageLayoutInfo';
-import { CommandMenuRecordInfo } from '@/command-menu/components/CommandMenuRecordInfo';
-import { CommandMenuWorkflowStepInfo } from '@/command-menu/components/CommandMenuWorkflowStepInfo';
+import { SidePanelAskAIInfo } from '@/side-panel/components/SidePanelAskAIInfo';
+import { SidePanelFolderInfo } from '@/side-panel/components/SidePanelFolderInfo';
+import { SidePanelLinkInfo } from '@/side-panel/components/SidePanelLinkInfo';
+import { SidePanelMultipleRecordsInfo } from '@/side-panel/components/SidePanelMultipleRecordsInfo';
+import { SidePanelObjectViewRecordInfo } from '@/side-panel/components/SidePanelObjectViewRecordInfo';
+import { SidePanelPageInfoLayout } from '@/side-panel/components/SidePanelPageInfoLayout';
+import { SidePanelPageLayoutInfo } from '@/side-panel/components/SidePanelPageLayoutInfo';
+import { SidePanelRecordInfo } from '@/side-panel/components/SidePanelRecordInfo';
+import { SidePanelWorkflowStepInfo } from '@/side-panel/components/SidePanelWorkflowStepInfo';
import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
import { useWorkspaceSectionItems } from '@/navigation-menu-item/hooks/useWorkspaceSectionItems';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/states/selectedNavigationMenuItemInEditModeState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
+import { type SidePanelContextChipProps } from '@/side-panel/components/SidePanelContextChip';
import { useContext } from 'react';
-import { type CommandMenuContextChipProps } from './CommandMenuContextChip';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
const StyledPageTitle = styled.div`
color: ${themeCssVariables.font.color.primary};
@@ -29,11 +29,11 @@ const StyledPageTitle = styled.div`
font-weight: ${themeCssVariables.font.weight.semiBold};
`;
-type CommandMenuPageInfoProps = {
- pageChip: CommandMenuContextChipProps | undefined;
+type SidePanelPageInfoProps = {
+ pageChip: SidePanelContextChipProps | undefined;
};
-export const CommandMenuPageInfo = ({ pageChip }: CommandMenuPageInfoProps) => {
+export const SidePanelPageInfo = ({ pageChip }: SidePanelPageInfoProps) => {
const { theme } = useContext(ThemeContext);
const selectedNavigationMenuItemInEditMode = useAtomStateValue(
selectedNavigationMenuItemInEditModeState,
@@ -45,7 +45,7 @@ export const CommandMenuPageInfo = ({ pageChip }: CommandMenuPageInfoProps) => {
}
const isNavigationMenuItemEditPage =
- pageChip.page?.page === CommandMenuPages.NavigationMenuItemEdit;
+ pageChip.page?.page === SidePanelPages.NavigationMenuItemEdit;
const selectedNavItem = isNavigationMenuItemEditPage
? items.find((item) => item.id === selectedNavigationMenuItemInEditMode)
: undefined;
@@ -54,82 +54,82 @@ export const CommandMenuPageInfo = ({ pageChip }: CommandMenuPageInfoProps) => {
const itemType = selectedNavItem.itemType;
if (itemType === NavigationMenuItemType.FOLDER) {
- return ;
+ return ;
}
if (itemType === NavigationMenuItemType.LINK) {
- return ;
+ return ;
}
if (
itemType === NavigationMenuItemType.VIEW ||
itemType === NavigationMenuItemType.RECORD
) {
- return ;
+ return ;
}
}
- const isRecordPage = pageChip.page?.page === CommandMenuPages.ViewRecord;
+ const isRecordPage = pageChip.page?.page === SidePanelPages.ViewRecord;
if (isRecordPage && isDefined(pageChip.page?.pageId)) {
return (
-
+
);
}
const isWorkflowStepPage = pageChip.page?.page
? [
- CommandMenuPages.WorkflowStepEdit,
- CommandMenuPages.WorkflowStepView,
- CommandMenuPages.WorkflowRunStepView,
+ SidePanelPages.WorkflowStepEdit,
+ SidePanelPages.WorkflowStepView,
+ SidePanelPages.WorkflowRunStepView,
].includes(pageChip.page?.page)
: false;
if (isWorkflowStepPage && isDefined(pageChip.page?.pageId)) {
return (
-
);
}
const isPageLayoutPage = pageChip.page?.page
? [
- CommandMenuPages.PageLayoutWidgetTypeSelect,
- CommandMenuPages.PageLayoutGraphTypeSelect,
- CommandMenuPages.PageLayoutGraphFilter,
- CommandMenuPages.PageLayoutIframeSettings,
- CommandMenuPages.PageLayoutTabSettings,
- CommandMenuPages.PageLayoutFieldsSettings,
- CommandMenuPages.PageLayoutFieldsLayout,
+ SidePanelPages.PageLayoutWidgetTypeSelect,
+ SidePanelPages.PageLayoutGraphTypeSelect,
+ SidePanelPages.PageLayoutGraphFilter,
+ SidePanelPages.PageLayoutIframeSettings,
+ SidePanelPages.PageLayoutTabSettings,
+ SidePanelPages.PageLayoutFieldsSettings,
+ SidePanelPages.PageLayoutFieldsLayout,
].includes(pageChip.page?.page)
: false;
if (isPageLayoutPage) {
- return ;
+ return ;
}
const isMultipleRecordsPage =
- pageChip.page?.page === CommandMenuPages.UpdateRecords;
+ pageChip.page?.page === SidePanelPages.UpdateRecords;
if (isMultipleRecordsPage && isDefined(pageChip.page?.pageId)) {
return (
-
);
}
- const isAskAIPage = pageChip.page?.page === CommandMenuPages.AskAI;
+ const isAskAIPage = pageChip.page?.page === SidePanelPages.AskAI;
if (isAskAIPage) {
- return ;
+ return ;
}
- if (pageChip.page?.page === CommandMenuPages.NavigationMenuAddItem) {
+ if (pageChip.page?.page === SidePanelPages.NavigationMenuAddItem) {
return (
- {
+}: SidePanelPageInfoLayoutProps) => {
return (
{icon && (
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageLayoutInfo.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelPageLayoutInfo.tsx
similarity index 72%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuPageLayoutInfo.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelPageLayoutInfo.tsx
index 8adc7bfb0f..0450c08f21 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageLayoutInfo.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelPageLayoutInfo.tsx
@@ -1,12 +1,12 @@
-import { CommandMenuDashboardPageLayoutInfo } from '@/command-menu/components/CommandMenuDashboardPageLayoutInfo';
-import { CommandMenuRecordPageLayoutInfo } from '@/command-menu/components/CommandMenuRecordPageLayoutInfo';
+import { SidePanelDashboardPageLayoutInfo } from '@/side-panel/components/SidePanelDashboardPageLayoutInfo';
+import { SidePanelRecordPageLayoutInfo } from '@/side-panel/components/SidePanelRecordPageLayoutInfo';
import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
import { CoreObjectNameSingular } from 'twenty-shared/types';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { isDefined } from 'twenty-shared/utils';
-export const CommandMenuPageLayoutInfo = () => {
+export const SidePanelPageLayoutInfo = () => {
const contextStoreCurrentObjectMetadataItemId = useAtomComponentStateValue(
contextStoreCurrentObjectMetadataItemIdComponentState,
);
@@ -23,8 +23,8 @@ export const CommandMenuPageLayoutInfo = () => {
objectMetadataItem.nameSingular === CoreObjectNameSingular.Dashboard;
if (isDashboardContext) {
- return ;
+ return ;
}
- return ;
+ return ;
};
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageLayoutInfoContent.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelPageLayoutInfoContent.tsx
similarity index 71%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuPageLayoutInfoContent.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelPageLayoutInfoContent.tsx
index 76b1fddfbf..a1122a403f 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageLayoutInfoContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelPageLayoutInfoContent.tsx
@@ -1,8 +1,8 @@
-import { usePageLayoutHeaderInfo } from '@/command-menu/components/hooks/usePageLayoutHeaderInfo';
-import { useUpdateCommandMenuPageInfo } from '@/command-menu/hooks/useUpdateCommandMenuPageInfo';
-import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
-import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
-import { commandMenuShouldFocusTitleInputComponentState } from '@/command-menu/states/commandMenuShouldFocusTitleInputComponentState';
+import { usePageLayoutHeaderInfo } from '@/side-panel/components/hooks/usePageLayoutHeaderInfo';
+import { useUpdateSidePanelPageInfo } from '@/side-panel/hooks/useUpdateSidePanelPageInfo';
+import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState';
+import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
+import { sidePanelShouldFocusTitleInputComponentState } from '@/side-panel/states/sidePanelShouldFocusTitleInputComponentState';
import { useUpdatePageLayoutTab } from '@/page-layout/hooks/useUpdatePageLayoutTab';
import { useUpdatePageLayoutWidget } from '@/page-layout/hooks/useUpdatePageLayoutWidget';
import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
@@ -14,31 +14,30 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
import { isNonEmptyString } from '@sniptt/guards';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useContext, useState } from 'react';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui/display';
-import { CommandMenuPageInfoLayout } from './CommandMenuPageInfoLayout';
+import { SidePanelPageInfoLayout } from './SidePanelPageInfoLayout';
import { ThemeContext } from 'twenty-ui/theme-constants';
-export const CommandMenuPageLayoutInfoContent = ({
+
+export const SidePanelPageLayoutInfoContent = ({
pageLayoutId,
}: {
pageLayoutId: string;
}) => {
const { theme } = useContext(ThemeContext);
const { getIcon } = useIcons();
- const commandMenuPage = useAtomStateValue(commandMenuPageState);
- const commandMenuPageInfo = useAtomStateValue(commandMenuPageInfoState);
+ const sidePanelPage = useAtomStateValue(sidePanelPageState);
+ const sidePanelPageInfo = useAtomStateValue(sidePanelPageInfoState);
- const [
- commandMenuShouldFocusTitleInput,
- setCommandMenuShouldFocusTitleInput,
- ] = useAtomComponentState(
- commandMenuShouldFocusTitleInputComponentState,
- commandMenuPageInfo.instanceId,
- );
+ const [sidePanelShouldFocusTitleInput, setSidePanelShouldFocusTitleInput] =
+ useAtomComponentState(
+ sidePanelShouldFocusTitleInputComponentState,
+ sidePanelPageInfo.instanceId,
+ );
const handleTitleInputOpen = () => {
- setCommandMenuShouldFocusTitleInput(false);
+ setSidePanelShouldFocusTitleInput(false);
};
const pageLayoutDraft = useAtomComponentStateValue(
@@ -56,14 +55,14 @@ export const CommandMenuPageLayoutInfoContent = ({
pageLayoutId,
);
- const { updateCommandMenuPageInfo } = useUpdateCommandMenuPageInfo();
+ const { updateSidePanelPageInfo } = useUpdateSidePanelPageInfo();
const { updatePageLayoutWidget } = useUpdatePageLayoutWidget(pageLayoutId);
const { updatePageLayoutTab } = useUpdatePageLayoutTab(pageLayoutId);
const [editedTitle, setEditedTitle] = useState(null);
const headerInfo = usePageLayoutHeaderInfo({
- commandMenuPage,
+ sidePanelPage,
draftPageLayout: pageLayoutDraft,
pageLayoutEditingWidgetId,
openTabId: pageLayoutTabSettingsOpenTabId,
@@ -97,13 +96,13 @@ export const CommandMenuPageLayoutInfoContent = ({
return;
}
- updateCommandMenuPageInfo({
+ updateSidePanelPageInfo({
pageTitle: finalTitle,
pageIcon: Icon,
});
if (
- commandMenuPage === CommandMenuPages.PageLayoutTabSettings &&
+ sidePanelPage === SidePanelPages.PageLayoutTabSettings &&
isDefined(tab)
) {
updatePageLayoutTab(tab.id, { title: finalTitle });
@@ -117,7 +116,7 @@ export const CommandMenuPageLayoutInfoContent = ({
};
return (
-
@@ -126,7 +125,7 @@ export const CommandMenuPageLayoutInfoContent = ({
iconColor={headerIconColor}
title={
}
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuRecordInfo.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelRecordInfo.tsx
similarity index 90%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuRecordInfo.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelRecordInfo.tsx
index cf8eb4d722..48a12c156a 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuRecordInfo.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelRecordInfo.tsx
@@ -1,6 +1,6 @@
import { allowRequestsToTwentyIconsState } from '@/client-config/states/allowRequestsToTwentyIcons';
-import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
-import { viewableRecordNameSingularComponentState } from '@/command-menu/pages/record-page/states/viewableRecordNameSingularComponentState';
+import { viewableRecordIdComponentState } from '@/side-panel/pages/record-page/states/viewableRecordIdComponentState';
+import { viewableRecordNameSingularComponentState } from '@/side-panel/pages/record-page/states/viewableRecordNameSingularComponentState';
import { useLabelIdentifierFieldMetadataItem } from '@/object-metadata/hooks/useLabelIdentifierFieldMetadataItem';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useIsRecordFieldReadOnly } from '@/object-record/read-only/hooks/useIsRecordFieldReadOnly';
@@ -20,16 +20,16 @@ import { Avatar } from 'twenty-ui/display';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { dateLocaleState } from '~/localization/states/dateLocaleState';
import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
-import { CommandMenuPageInfoLayout } from './CommandMenuPageInfoLayout';
+import { SidePanelPageInfoLayout } from './SidePanelPageInfoLayout';
-export const CommandMenuRecordInfo = ({
- commandMenuPageInstanceId,
+export const SidePanelRecordInfo = ({
+ sidePanelPageInstanceId,
}: {
- commandMenuPageInstanceId: string;
+ sidePanelPageInstanceId: string;
}) => {
const viewableRecordNameSingular = useAtomComponentStateValue(
viewableRecordNameSingularComponentState,
- commandMenuPageInstanceId,
+ sidePanelPageInstanceId,
);
const allowRequestsToTwentyIcons = useAtomStateValue(
allowRequestsToTwentyIconsState,
@@ -37,7 +37,7 @@ export const CommandMenuRecordInfo = ({
const viewableRecordId = useAtomComponentStateValue(
viewableRecordIdComponentState,
- commandMenuPageInstanceId,
+ sidePanelPageInstanceId,
);
const { objectNameSingular, objectRecordId } = useRecordShowPage(
@@ -98,7 +98,7 @@ export const CommandMenuRecordInfo = ({
};
return (
- {
+ const { pageLayoutId } =
+ usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord();
+
+ return ;
+};
diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelRouter.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelRouter.tsx
new file mode 100644
index 0000000000..6213b104ee
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelRouter.tsx
@@ -0,0 +1,60 @@
+import { ActionMenuContextProvider } from '@/action-menu/contexts/ActionMenuContextProvider';
+import { SidePanelContainer } from '@/side-panel/components/SidePanelContainer';
+import { SidePanelTopBar } from '@/side-panel/components/SidePanelTopBar';
+import { SIDE_PANEL_PAGES_CONFIG } from '@/side-panel/constants/SidePanelPagesConfig';
+import { SidePanelPageComponentInstanceContext } from '@/side-panel/states/contexts/SidePanelPageComponentInstanceContext';
+import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState';
+import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
+import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
+import { styled } from '@linaria/react';
+import { motion } from 'framer-motion';
+import { useContext } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+import { ThemeContext } from 'twenty-ui/theme-constants';
+
+const StyledSidePanelContent = styled.div`
+ flex: 1;
+ overflow-y: auto;
+`;
+
+export const SidePanelRouter = () => {
+ const sidePanelPage = useAtomStateValue(sidePanelPageState);
+ const sidePanelPageInfo = useAtomStateValue(sidePanelPageInfoState);
+
+ const sidePanelPageComponent = isDefined(sidePanelPage) ? (
+ SIDE_PANEL_PAGES_CONFIG.get(sidePanelPage)
+ ) : (
+ <>
+ );
+
+ const { theme } = useContext(ThemeContext);
+
+ return (
+
+
+
+
+
+
+
+ {sidePanelPageComponent}
+
+
+
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuSubViewWithSearch.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelSubViewWithSearch.tsx
similarity index 88%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuSubViewWithSearch.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelSubViewWithSearch.tsx
index 6b1a65c123..8c4f93b794 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuSubViewWithSearch.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelSubViewWithSearch.tsx
@@ -1,7 +1,7 @@
import { styled } from '@linaria/react';
import { type ReactNode } from 'react';
-import { SidePanelSubPageNavigationHeader } from '@/command-menu/pages/common/components/SidePanelSubPageNavigationHeader';
+import { SidePanelSubPageNavigationHeader } from '@/side-panel/pages/common/components/SidePanelSubPageNavigationHeader';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledSubViewContainer = styled.div`
@@ -49,7 +49,7 @@ const StyledScrollableListWrapper = styled.div`
}
`;
-type CommandMenuSubViewWithSearchProps = {
+type SidePanelSubViewWithSearchProps = {
backBarTitle: string;
onBack: () => void;
searchPlaceholder: string;
@@ -59,7 +59,7 @@ type CommandMenuSubViewWithSearchProps = {
children?: ReactNode;
};
-export const CommandMenuSubViewWithSearch = ({
+export const SidePanelSubViewWithSearch = ({
backBarTitle,
onBack,
searchPlaceholder,
@@ -67,7 +67,7 @@ export const CommandMenuSubViewWithSearch = ({
onSearchChange,
searchInputProps,
children,
-}: CommandMenuSubViewWithSearchProps) => (
+}: SidePanelSubViewWithSearchProps) => (
`
justify-content: space-between;
font-size: ${themeCssVariables.font.size.lg};
height: ${({ isMobile }) =>
- isMobile
- ? COMMAND_MENU_SEARCH_BAR_HEIGHT_MOBILE
- : COMMAND_MENU_SEARCH_BAR_HEIGHT}px;
+ isMobile ? SIDE_PANEL_TOP_BAR_HEIGHT_MOBILE : SIDE_PANEL_TOP_BAR_HEIGHT}px;
margin: 0;
outline: none;
position: relative;
@@ -78,30 +76,30 @@ const StyledContentContainer = styled.div`
overflow: hidden;
`;
-export const CommandMenuTopBar = () => {
- const { theme } = useContext(ThemeContext);
- const [commandMenuSearch, setCommandMenuSearch] = useAtomState(
- commandMenuSearchState,
- );
+export const SidePanelTopBar = () => {
+ const [sidePanelSearch, setSidePanelSearch] =
+ useAtomState(sidePanelSearchState);
const inputRef = useRef(null);
const { t } = useLingui();
const handleSearchChange = (event: React.ChangeEvent) => {
- setCommandMenuSearch(event.target.value);
+ setSidePanelSearch(event.target.value);
};
const isMobile = useIsMobile();
- const { closeCommandMenu } = useCommandMenu();
+ const { closeSidePanelMenu } = useSidePanelMenu();
- const commandMenuPage = useAtomStateValue(commandMenuPageState);
+ const sidePanelPage = useAtomStateValue(sidePanelPageState);
- const commandMenuNavigationStack = useAtomStateValue(
- commandMenuNavigationStackState,
+ const sidePanelNavigationStack = useAtomStateValue(
+ sidePanelNavigationStackState,
);
- const { contextChips } = useCommandMenuContextChips();
+ const { theme } = useContext(ThemeContext);
+
+ const { contextChips } = useSidePanelContextChips();
const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
const { removeFocusItemFromFocusStackById } =
@@ -126,10 +124,10 @@ export const CommandMenuTopBar = () => {
});
};
- const canGoBack = commandMenuNavigationStack.length > 1;
+ const canGoBack = sidePanelNavigationStack.length > 1;
const shouldShowCloseButton =
- !isMobile && commandMenuNavigationStack.length === 1;
+ !isMobile && sidePanelNavigationStack.length === 1;
const shouldShowBackButton = canGoBack;
@@ -146,7 +144,7 @@ export const CommandMenuTopBar = () => {
duration: theme.animation.duration.instant,
}}
>
-
+
)}
{shouldShowCloseButton && (
@@ -160,33 +158,33 @@ export const CommandMenuTopBar = () => {
Icon={IconX}
size="small"
variant="tertiary"
- onClick={closeCommandMenu}
+ onClick={closeSidePanelMenu}
/>
)}
{lastChip &&
- commandMenuPage !== CommandMenuPages.Root &&
- commandMenuPage !== CommandMenuPages.SearchRecords && (
-
+ sidePanelPage !== SidePanelPages.Root &&
+ sidePanelPage !== SidePanelPages.SearchRecords && (
+
)}
- {(commandMenuPage === CommandMenuPages.Root ||
- commandMenuPage === CommandMenuPages.SearchRecords) && (
+ {(sidePanelPage === SidePanelPages.Root ||
+ sidePanelPage === SidePanelPages.SearchRecords) && (
<>
-
+
)}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBarInputFocusEffect.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBarInputFocusEffect.tsx
new file mode 100644
index 0000000000..adff6f3b2d
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBarInputFocusEffect.tsx
@@ -0,0 +1,25 @@
+import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
+import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
+import { useEffect } from 'react';
+import { SidePanelPages } from 'twenty-shared/types';
+
+type SidePanelTopBarInputFocusEffectProps = {
+ inputRef: React.RefObject;
+};
+
+export const SidePanelTopBarInputFocusEffect = ({
+ inputRef,
+}: SidePanelTopBarInputFocusEffectProps) => {
+ const sidePanelPage = useAtomStateValue(sidePanelPageState);
+
+ useEffect(() => {
+ if (
+ sidePanelPage === SidePanelPages.Root ||
+ sidePanelPage === SidePanelPages.SearchRecords
+ ) {
+ inputRef.current?.focus();
+ }
+ }, [sidePanelPage, inputRef]);
+
+ return null;
+};
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBarRightCornerIcon.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBarRightCornerIcon.tsx
similarity index 72%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBarRightCornerIcon.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelTopBarRightCornerIcon.tsx
index 50b7cc95a4..5d2695039c 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBarRightCornerIcon.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBarRightCornerIcon.tsx
@@ -1,10 +1,10 @@
-import { useOpenAskAIPageInCommandMenu } from '@/command-menu/hooks/useOpenAskAIPageInCommandMenu';
-import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
+import { useOpenAskAIPageInSidePanel } from '@/side-panel/hooks/useOpenAskAIPageInSidePanel';
+import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import { IconEdit, IconSparkles } from 'twenty-ui/display';
import { IconButton } from 'twenty-ui/input';
import { useIsMobile } from 'twenty-ui/utilities';
@@ -17,11 +17,11 @@ const StyledIconButton = styled(IconButton)`
color: ${themeCssVariables.font.color.secondary};
`;
-export const CommandMenuTopBarRightCornerIcon = () => {
+export const SidePanelTopBarRightCornerIcon = () => {
const isMobile = useIsMobile();
const isAiEnabled = useIsFeatureEnabled(FeatureFlagKey.IS_AI_ENABLED);
- const commandMenuPage = useAtomStateValue(commandMenuPageState);
- const { openAskAIPage } = useOpenAskAIPageInCommandMenu();
+ const sidePanelPage = useAtomStateValue(sidePanelPageState);
+ const { openAskAIPage } = useOpenAskAIPageInSidePanel();
const { createChatThread } = useCreateNewAIChatThread();
if (isMobile || !isAiEnabled) {
@@ -29,9 +29,9 @@ export const CommandMenuTopBarRightCornerIcon = () => {
}
const isOnAskAIPage = [
- CommandMenuPages.AskAI,
- CommandMenuPages.ViewPreviousAIChats,
- ].includes(commandMenuPage);
+ SidePanelPages.AskAI,
+ SidePanelPages.ViewPreviousAIChats,
+ ].includes(sidePanelPage);
if (!isOnAskAIPage) {
return (
diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelWidthEffect.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelWidthEffect.tsx
new file mode 100644
index 0000000000..e5585df8c5
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelWidthEffect.tsx
@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+
+import {
+ SIDE_PANEL_WIDTH_VAR,
+ sidePanelWidthState,
+} from '@/side-panel/states/sidePanelWidthState';
+import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
+
+export const SidePanelWidthEffect = () => {
+ const sidePanelWidth = useAtomStateValue(sidePanelWidthState);
+
+ useEffect(() => {
+ document.documentElement.style.setProperty(
+ SIDE_PANEL_WIDTH_VAR,
+ `${sidePanelWidth}px`,
+ );
+ }, [sidePanelWidth]);
+
+ return null;
+};
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuWorkflowStepInfo.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelWorkflowStepInfo.tsx
similarity index 78%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenuWorkflowStepInfo.tsx
rename to packages/twenty-front/src/modules/side-panel/components/SidePanelWorkflowStepInfo.tsx
index 60f6b5e96c..98c84e73db 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuWorkflowStepInfo.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelWorkflowStepInfo.tsx
@@ -1,7 +1,7 @@
-import { useUpdateCommandMenuPageInfo } from '@/command-menu/hooks/useUpdateCommandMenuPageInfo';
-import { useCommandMenuWorkflowIdOrThrow } from '@/command-menu/pages/workflow/hooks/useCommandMenuWorkflowIdOrThrow';
-import { commandMenuWorkflowStepIdComponentState } from '@/command-menu/pages/workflow/states/commandMenuWorkflowStepIdComponentState';
-import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
+import { useUpdateSidePanelPageInfo } from '@/side-panel/hooks/useUpdateSidePanelPageInfo';
+import { useSidePanelWorkflowIdOrThrow } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowIdOrThrow';
+import { sidePanelWorkflowStepIdComponentState } from '@/side-panel/pages/workflow/states/sidePanelWorkflowStepIdComponentState';
+import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { TitleInput } from '@/ui/input/components/TitleInput';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
@@ -19,37 +19,37 @@ import { getTriggerIcon } from '@/workflow/workflow-trigger/utils/getTriggerIcon
import { getTriggerIconColor } from '@/workflow/workflow-trigger/utils/getTriggerIconColor';
import { t } from '@lingui/core/macro';
import { useContext, useState } from 'react';
-import { CommandMenuPages, CoreObjectNameSingular } from 'twenty-shared/types';
+import { CoreObjectNameSingular, SidePanelPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { TRIGGER_STEP_ID } from 'twenty-shared/workflow';
import { useIcons } from 'twenty-ui/display';
-import { CommandMenuPageInfoLayout } from './CommandMenuPageInfoLayout';
+import { SidePanelPageInfoLayout } from './SidePanelPageInfoLayout';
import { ThemeContext } from 'twenty-ui/theme-constants';
-export const CommandMenuWorkflowStepInfo = ({
- commandMenuPageInstanceId,
+export const SidePanelWorkflowStepInfo = ({
+ sidePanelPageInstanceId,
}: {
- commandMenuPageInstanceId: string;
+ sidePanelPageInstanceId: string;
}) => {
const { theme } = useContext(ThemeContext);
const { getIcon } = useIcons();
- const commandMenuPage = useAtomStateValue(commandMenuPageState);
+ const sidePanelPage = useAtomStateValue(sidePanelPageState);
- const workflowId = useCommandMenuWorkflowIdOrThrow();
+ const workflowId = useSidePanelWorkflowIdOrThrow();
- const commandMenuWorkflowStepId = useAtomComponentStateValue(
- commandMenuWorkflowStepIdComponentState,
- commandMenuPageInstanceId,
+ const sidePanelWorkflowStepId = useAtomComponentStateValue(
+ sidePanelWorkflowStepIdComponentState,
+ sidePanelPageInstanceId,
);
const workflowWithCurrentVersion = useWorkflowWithCurrentVersion(workflowId);
const isReadonly =
- commandMenuPage === CommandMenuPages.WorkflowStepView ||
- commandMenuPage === CommandMenuPages.WorkflowRunStepView;
+ sidePanelPage === SidePanelPages.WorkflowStepView ||
+ sidePanelPage === SidePanelPages.WorkflowRunStepView;
- const { updateCommandMenuPageInfo } = useUpdateCommandMenuPageInfo();
+ const { updateSidePanelPageInfo } = useUpdateSidePanelPageInfo();
const instanceId = getWorkflowVisualizerComponentInstanceId({
recordId: workflowId,
@@ -70,13 +70,13 @@ export const CommandMenuWorkflowStepInfo = ({
id: undefined,
};
- const isTriggerStep = commandMenuWorkflowStepId === TRIGGER_STEP_ID;
+ const isTriggerStep = sidePanelWorkflowStepId === TRIGGER_STEP_ID;
const stepDefinition =
- isDefined(commandMenuWorkflowStepId) && isDefined(trigger)
+ isDefined(sidePanelWorkflowStepId) && isDefined(trigger)
? isTriggerStep || isDefined(steps)
? getStepDefinitionOrThrow({
- stepId: commandMenuWorkflowStepId,
+ stepId: sidePanelWorkflowStepId,
trigger,
steps,
})
@@ -108,7 +108,7 @@ export const CommandMenuWorkflowStepInfo = ({
if (
!isDefined(workflowId) ||
- !isDefined(commandMenuWorkflowStepId) ||
+ !isDefined(sidePanelWorkflowStepId) ||
!isDefined(workflowWithCurrentVersion?.currentVersion) ||
!isDefined(stepDefinition) ||
!isDefined(stepDefinition.definition)
@@ -133,7 +133,7 @@ export const CommandMenuWorkflowStepInfo = ({
return;
}
- updateCommandMenuPageInfo({
+ updateSidePanelPageInfo({
pageTitle: title,
pageIcon: Icon,
});
@@ -167,7 +167,7 @@ export const CommandMenuWorkflowStepInfo = ({
};
return (
-
@@ -176,7 +176,7 @@ export const CommandMenuWorkflowStepInfo = ({
iconColor={headerIconColor}
title={
{
);
};
-const meta: Meta = {
- title: 'Modules/CommandMenu/CommandMenuContextRecordChip',
- component: CommandMenuContextRecordsChip,
+const meta: Meta = {
+ title: 'Modules/SidePanel/SidePanelContextRecordChip',
+ component: SidePanelContextRecordsChip,
decorators: [
ContextStoreDecorator,
ChipGeneratorsDecorator,
@@ -227,7 +227,7 @@ const meta: Meta = {
};
export default meta;
-type Story = StoryObj;
+type Story = StoryObj;
export const Default: Story = {};
diff --git a/packages/twenty-front/src/modules/command-menu/components/hooks/usePageLayoutHeaderInfo.ts b/packages/twenty-front/src/modules/side-panel/components/hooks/usePageLayoutHeaderInfo.ts
similarity index 82%
rename from packages/twenty-front/src/modules/command-menu/components/hooks/usePageLayoutHeaderInfo.ts
rename to packages/twenty-front/src/modules/side-panel/components/hooks/usePageLayoutHeaderInfo.ts
index 063ff8466f..d36308d423 100644
--- a/packages/twenty-front/src/modules/command-menu/components/hooks/usePageLayoutHeaderInfo.ts
+++ b/packages/twenty-front/src/modules/side-panel/components/hooks/usePageLayoutHeaderInfo.ts
@@ -1,10 +1,10 @@
-import { GRAPH_TYPE_INFORMATION } from '@/command-menu/pages/page-layout/constants/GraphTypeInformation';
-import { getCurrentGraphTypeFromConfig } from '@/command-menu/pages/page-layout/utils/getCurrentGraphTypeFromConfig';
-import { isWidgetConfigurationOfTypeGraph } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfTypeGraph';
+import { GRAPH_TYPE_INFORMATION } from '@/side-panel/pages/page-layout/constants/GraphTypeInformation';
+import { getCurrentGraphTypeFromConfig } from '@/side-panel/pages/page-layout/utils/getCurrentGraphTypeFromConfig';
+import { isWidgetConfigurationOfTypeGraph } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfTypeGraph';
import { type PageLayoutTab } from '@/page-layout/types/PageLayoutTab';
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { t } from '@lingui/core/macro';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import {
IconAppWindow,
@@ -27,7 +27,7 @@ type PageLayoutHeaderInfo = {
};
type UsePageLayoutHeaderInfoParams = {
- commandMenuPage: CommandMenuPages;
+ sidePanelPage: SidePanelPages;
draftPageLayout: {
tabs: PageLayoutTab[];
};
@@ -37,7 +37,7 @@ type UsePageLayoutHeaderInfoParams = {
};
export const usePageLayoutHeaderInfo = ({
- commandMenuPage,
+ sidePanelPage,
draftPageLayout,
pageLayoutEditingWidgetId,
openTabId,
@@ -46,8 +46,8 @@ export const usePageLayoutHeaderInfo = ({
const { theme } = useContext(ThemeContext);
const iconColor = theme.font.color.tertiary;
- switch (commandMenuPage) {
- case CommandMenuPages.PageLayoutTabSettings: {
+ switch (sidePanelPage) {
+ case SidePanelPages.PageLayoutTabSettings: {
if (!isDefined(openTabId)) {
return null;
}
@@ -75,7 +75,7 @@ export const usePageLayoutHeaderInfo = ({
};
}
- case CommandMenuPages.PageLayoutIframeSettings: {
+ case SidePanelPages.PageLayoutIframeSettings: {
if (!isDefined(pageLayoutEditingWidgetId)) {
return null;
}
@@ -105,8 +105,8 @@ export const usePageLayoutHeaderInfo = ({
};
}
- case CommandMenuPages.PageLayoutGraphTypeSelect:
- case CommandMenuPages.PageLayoutGraphFilter: {
+ case SidePanelPages.PageLayoutGraphTypeSelect:
+ case SidePanelPages.PageLayoutGraphFilter: {
if (!isDefined(pageLayoutEditingWidgetId)) {
return null;
}
@@ -130,7 +130,7 @@ export const usePageLayoutHeaderInfo = ({
const graphTypeLabel = t(graphTypeInfo.label);
const headerType =
- commandMenuPage === CommandMenuPages.PageLayoutGraphFilter
+ sidePanelPage === SidePanelPages.PageLayoutGraphFilter
? graphTypeLabel
: t`Chart`;
@@ -145,14 +145,14 @@ export const usePageLayoutHeaderInfo = ({
headerIconColor: iconColor,
headerType,
title,
- isReadonly: commandMenuPage === CommandMenuPages.PageLayoutGraphFilter,
+ isReadonly: sidePanelPage === SidePanelPages.PageLayoutGraphFilter,
tab: undefined,
widgetInEditMode,
};
}
- case CommandMenuPages.PageLayoutFieldsSettings:
- case CommandMenuPages.PageLayoutFieldsLayout: {
+ case SidePanelPages.PageLayoutFieldsSettings:
+ case SidePanelPages.PageLayoutFieldsLayout: {
if (!isDefined(pageLayoutEditingWidgetId)) {
return null;
}
@@ -182,7 +182,7 @@ export const usePageLayoutHeaderInfo = ({
};
}
- case CommandMenuPages.PageLayoutWidgetTypeSelect: {
+ case SidePanelPages.PageLayoutWidgetTypeSelect: {
return {
headerIcon: IconPlus,
headerIconColor: iconColor,
diff --git a/packages/twenty-front/src/modules/command-menu/constants/CommandMenuAnimationVariants.ts b/packages/twenty-front/src/modules/side-panel/constants/SidePanelAnimationVariants.ts
similarity index 70%
rename from packages/twenty-front/src/modules/command-menu/constants/CommandMenuAnimationVariants.ts
rename to packages/twenty-front/src/modules/side-panel/constants/SidePanelAnimationVariants.ts
index 7db2daf635..16d0b1f557 100644
--- a/packages/twenty-front/src/modules/command-menu/constants/CommandMenuAnimationVariants.ts
+++ b/packages/twenty-front/src/modules/side-panel/constants/SidePanelAnimationVariants.ts
@@ -1,6 +1,6 @@
import { themeCssVariables } from 'twenty-ui/theme-constants';
-export const COMMAND_MENU_ANIMATION_VARIANTS = {
+export const SIDE_PANEL_ANIMATION_VARIANTS = {
fullScreen: {
x: '0%',
width: '100%',
@@ -10,14 +10,14 @@ export const COMMAND_MENU_ANIMATION_VARIANTS = {
},
normal: {
x: '0%',
- width: themeCssVariables.rightDrawerWidth,
+ width: themeCssVariables.sidePanelWidth,
height: '100%',
bottom: '0',
top: '0',
},
closed: {
x: '100%',
- width: themeCssVariables.rightDrawerWidth,
+ width: themeCssVariables.sidePanelWidth,
height: '100%',
bottom: '0',
top: 'auto',
diff --git a/packages/twenty-front/src/modules/side-panel/constants/SidePanelComponentInstanceId.ts b/packages/twenty-front/src/modules/side-panel/constants/SidePanelComponentInstanceId.ts
new file mode 100644
index 0000000000..d8f1cc3103
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/constants/SidePanelComponentInstanceId.ts
@@ -0,0 +1 @@
+export const SIDE_PANEL_COMPONENT_INSTANCE_ID = 'side-panel';
diff --git a/packages/twenty-front/src/modules/ui/layout/resizable-panel/constants/CommandMenuConstraints.ts b/packages/twenty-front/src/modules/side-panel/constants/SidePanelConstraints.ts
similarity index 69%
rename from packages/twenty-front/src/modules/ui/layout/resizable-panel/constants/CommandMenuConstraints.ts
rename to packages/twenty-front/src/modules/side-panel/constants/SidePanelConstraints.ts
index 26eb6b2d8a..456654bb5d 100644
--- a/packages/twenty-front/src/modules/ui/layout/resizable-panel/constants/CommandMenuConstraints.ts
+++ b/packages/twenty-front/src/modules/side-panel/constants/SidePanelConstraints.ts
@@ -1,6 +1,6 @@
import { type ResizablePanelConstraints } from '@/ui/layout/resizable-panel/types/ResizablePanelConstraints';
-export const COMMAND_MENU_CONSTRAINTS: ResizablePanelConstraints = {
+export const SIDE_PANEL_CONSTRAINTS: ResizablePanelConstraints = {
min: 320,
max: 600,
default: 400,
diff --git a/packages/twenty-front/src/modules/side-panel/constants/SidePanelContextChipGroupsDropdownId.ts b/packages/twenty-front/src/modules/side-panel/constants/SidePanelContextChipGroupsDropdownId.ts
new file mode 100644
index 0000000000..8913ded64c
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/constants/SidePanelContextChipGroupsDropdownId.ts
@@ -0,0 +1,2 @@
+export const SIDE_PANEL_CONTEXT_CHIP_GROUPS_DROPDOWN_ID =
+ 'side-panel-context-chip-groups-dropdown';
diff --git a/packages/twenty-front/src/modules/side-panel/constants/SidePanelFocusId.ts b/packages/twenty-front/src/modules/side-panel/constants/SidePanelFocusId.ts
new file mode 100644
index 0000000000..659768acdb
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/constants/SidePanelFocusId.ts
@@ -0,0 +1 @@
+export const SIDE_PANEL_FOCUS_ID = 'side-panel-focus';
diff --git a/packages/twenty-front/src/modules/side-panel/constants/SidePanelListPadding.ts b/packages/twenty-front/src/modules/side-panel/constants/SidePanelListPadding.ts
new file mode 100644
index 0000000000..27323db4e4
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/constants/SidePanelListPadding.ts
@@ -0,0 +1 @@
+export const SIDE_PANEL_LIST_PADDING = 2;
diff --git a/packages/twenty-front/src/modules/side-panel/constants/SidePanelNavigationHistoryDropdownId.ts b/packages/twenty-front/src/modules/side-panel/constants/SidePanelNavigationHistoryDropdownId.ts
new file mode 100644
index 0000000000..d4f68f5c4c
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/constants/SidePanelNavigationHistoryDropdownId.ts
@@ -0,0 +1,2 @@
+export const SIDE_PANEL_NAVIGATION_HISTORY_DROPDOWN_ID =
+ 'side-panel-navigation-history-dropdown';
diff --git a/packages/twenty-front/src/modules/side-panel/constants/SidePanelPagesConfig.tsx b/packages/twenty-front/src/modules/side-panel/constants/SidePanelPagesConfig.tsx
new file mode 100644
index 0000000000..d8f84e0c29
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/constants/SidePanelPagesConfig.tsx
@@ -0,0 +1,79 @@
+import { SidePanelAIChatThreadsPage } from '@/side-panel/pages/AIChatThreads/components/SidePanelAIChatThreadsPage';
+import { SidePanelAskAIPage } from '@/side-panel/pages/ask-ai/components/SidePanelAskAIPage';
+import { SidePanelCalendarEventPage } from '@/side-panel/pages/calendar-event/components/SidePanelCalendarEventPage';
+import { SidePanelFrontComponentPage } from '@/side-panel/pages/front-component/components/SidePanelFrontComponentPage';
+import { SidePanelMessageThreadPage } from '@/side-panel/pages/message-thread/components/SidePanelMessageThreadPage';
+import { SidePanelNavigationMenuItemEditPage } from '@/side-panel/pages/navigation-menu-item/components/SidePanelNavigationMenuItemEditPage';
+import { SidePanelNewSidebarItemPage } from '@/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemPage';
+import { SidePanelPageLayoutChartSettings } from '@/side-panel/pages/page-layout/components/SidePanelPageLayoutChartSettings';
+import { SidePanelPageLayoutFieldsLayout } from '@/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldsLayout';
+import { SidePanelPageLayoutFieldsSettings } from '@/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldsSettings';
+import { SidePanelPageLayoutGraphFilter } from '@/side-panel/pages/page-layout/components/SidePanelPageLayoutGraphFilter';
+import { SidePanelPageLayoutIframeSettings } from '@/side-panel/pages/page-layout/components/SidePanelPageLayoutIframeSettings';
+import { SidePanelPageLayoutTabSettings } from '@/side-panel/pages/page-layout/components/SidePanelPageLayoutTabSettings';
+import { SidePanelPageLayoutWidgetTypeSelect } from '@/side-panel/pages/page-layout/components/SidePanelPageLayoutWidgetTypeSelect';
+import { SidePanelMergeRecordPage } from '@/side-panel/pages/record-page/components/SidePanelMergeRecordPage';
+import { SidePanelRecordPage } from '@/side-panel/pages/record-page/components/SidePanelRecordPage';
+import { SidePanelUpdateMultipleRecords } from '@/side-panel/pages/record-page/components/SidePanelUpdateMultipleRecords';
+import { SidePanelEditRichTextPage } from '@/side-panel/pages/rich-text-page/components/SidePanelEditRichTextPage';
+import { SidePanelRootPage } from '@/side-panel/pages/root/components/SidePanelRootPage';
+import { SidePanelSearchRecordsPage } from '@/side-panel/pages/search/components/SidePanelSearchRecordsPage';
+import { SidePanelWorkflowCreateStep } from '@/side-panel/pages/workflow/step/create/components/SidePanelWorkflowCreateStep';
+import { SidePanelWorkflowEditStep } from '@/side-panel/pages/workflow/step/edit/components/SidePanelWorkflowEditStep';
+import { SidePanelWorkflowEditStepType } from '@/side-panel/pages/workflow/step/edit/components/SidePanelWorkflowEditStepType';
+import { SidePanelWorkflowRunViewStep } from '@/side-panel/pages/workflow/step/view-run/components/SidePanelWorkflowRunViewStep';
+import { SidePanelWorkflowViewStep } from '@/side-panel/pages/workflow/step/view/components/SidePanelWorkflowViewStep';
+import { SidePanelWorkflowSelectTriggerType } from '@/side-panel/pages/workflow/trigger-type/components/SidePanelWorkflowSelectTriggerType';
+import { SidePanelPages } from 'twenty-shared/types';
+
+export const SIDE_PANEL_PAGES_CONFIG = new Map(
+ [
+ [SidePanelPages.Root, ],
+ [SidePanelPages.ViewRecord, ],
+ [SidePanelPages.MergeRecords, ],
+ [SidePanelPages.UpdateRecords, ],
+ [SidePanelPages.ViewEmailThread, ],
+ [SidePanelPages.ViewCalendarEvent, ],
+ [SidePanelPages.EditRichText, ],
+ [
+ SidePanelPages.WorkflowTriggerSelectType,
+ ,
+ ],
+ [SidePanelPages.WorkflowStepCreate, ],
+ [SidePanelPages.WorkflowStepEditType, ],
+ [SidePanelPages.WorkflowStepEdit, ],
+ [SidePanelPages.WorkflowStepView, ],
+ [SidePanelPages.WorkflowRunStepView, ],
+ [SidePanelPages.SearchRecords, ],
+ [SidePanelPages.AskAI, ],
+ [SidePanelPages.ViewPreviousAIChats, ],
+ [
+ SidePanelPages.PageLayoutWidgetTypeSelect,
+ ,
+ ],
+ [
+ SidePanelPages.PageLayoutGraphTypeSelect,
+ ,
+ ],
+ [SidePanelPages.PageLayoutGraphFilter, ],
+ [
+ SidePanelPages.PageLayoutIframeSettings,
+ ,
+ ],
+ [SidePanelPages.PageLayoutTabSettings, ],
+ [
+ SidePanelPages.PageLayoutFieldsSettings,
+ ,
+ ],
+ [
+ SidePanelPages.PageLayoutFieldsLayout,
+ ,
+ ],
+ [SidePanelPages.ViewFrontComponent, ],
+ [
+ SidePanelPages.NavigationMenuItemEdit,
+ ,
+ ],
+ [SidePanelPages.NavigationMenuAddItem, ],
+ ],
+);
diff --git a/packages/twenty-front/src/modules/side-panel/constants/SidePanelPreviousComponentInstanceId.ts b/packages/twenty-front/src/modules/side-panel/constants/SidePanelPreviousComponentInstanceId.ts
new file mode 100644
index 0000000000..3f78a32bde
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/constants/SidePanelPreviousComponentInstanceId.ts
@@ -0,0 +1 @@
+export const SIDE_PANEL_PREVIOUS_COMPONENT_INSTANCE_ID = 'side-panel-previous';
diff --git a/packages/twenty-front/src/modules/side-panel/constants/SidePanelResetContextToSelection.ts b/packages/twenty-front/src/modules/side-panel/constants/SidePanelResetContextToSelection.ts
new file mode 100644
index 0000000000..1c6047cb27
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/constants/SidePanelResetContextToSelection.ts
@@ -0,0 +1,2 @@
+export const SIDE_PANEL_RESET_CONTEXT_TO_SELECTION =
+ 'reset-context-to-selection';
diff --git a/packages/twenty-front/src/modules/side-panel/constants/SidePanelSelectableListId.ts b/packages/twenty-front/src/modules/side-panel/constants/SidePanelSelectableListId.ts
new file mode 100644
index 0000000000..ecfc51699b
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/constants/SidePanelSelectableListId.ts
@@ -0,0 +1 @@
+export const SIDE_PANEL_SELECTABLE_LIST_ID = 'side-panel-list';
diff --git a/packages/twenty-front/src/modules/side-panel/constants/SidePanelTopBarHeight.ts b/packages/twenty-front/src/modules/side-panel/constants/SidePanelTopBarHeight.ts
new file mode 100644
index 0000000000..574749a328
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/constants/SidePanelTopBarHeight.ts
@@ -0,0 +1 @@
+export const SIDE_PANEL_TOP_BAR_HEIGHT = 40;
diff --git a/packages/twenty-front/src/modules/side-panel/constants/SidePanelTopBarHeightMobile.ts b/packages/twenty-front/src/modules/side-panel/constants/SidePanelTopBarHeightMobile.ts
new file mode 100644
index 0000000000..df2b58b821
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/constants/SidePanelTopBarHeightMobile.ts
@@ -0,0 +1 @@
+export const SIDE_PANEL_TOP_BAR_HEIGHT_MOBILE = 52;
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useNavigateCommandMenu.test.tsx b/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useNavigateSidePanel.test.tsx
similarity index 64%
rename from packages/twenty-front/src/modules/command-menu/hooks/__tests__/useNavigateCommandMenu.test.tsx
rename to packages/twenty-front/src/modules/side-panel/hooks/__tests__/useNavigateSidePanel.test.tsx
index af8869bc8d..0e152c249f 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useNavigateCommandMenu.test.tsx
+++ b/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useNavigateSidePanel.test.tsx
@@ -1,14 +1,14 @@
import { renderHook } from '@testing-library/react';
import { act } from 'react';
-import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId';
-import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
-import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
-import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
-import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
+import { SIDE_PANEL_COMPONENT_INSTANCE_ID } from '@/side-panel/constants/SidePanelComponentInstanceId';
+import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
+import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState';
+import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState';
+import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import { Icon123, useIcons } from 'twenty-ui/display';
import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
import { generatedMockObjectMetadataItems } from '~/testing/utils/generatedMockObjectMetadataItems';
@@ -23,7 +23,7 @@ const personMockObjectMetadataItem = generatedMockObjectMetadataItems.find(
const wrapper = getJestMetadataAndApolloMocksAndActionMenuWrapper({
apolloMocks: [],
- componentInstanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID,
+ componentInstanceId: SIDE_PANEL_COMPONENT_INSTANCE_ID,
contextStoreCurrentObjectMetadataNameSingular:
personMockObjectMetadataItem.nameSingular,
contextStoreCurrentViewId: 'my-view-id',
@@ -38,12 +38,12 @@ const wrapper = getJestMetadataAndApolloMocksAndActionMenuWrapper({
const renderHooks = () => {
const { result } = renderHook(
() => {
- const { navigateCommandMenu } = useNavigateCommandMenu();
+ const { navigateSidePanel } = useNavigateSidePanel();
const { getIcon } = useIcons();
return {
- navigateCommandMenu,
+ navigateSidePanel,
getIcon,
};
},
@@ -54,7 +54,7 @@ const renderHooks = () => {
return { result };
};
-describe('useNavigateCommandMenu', () => {
+describe('useNavigateSidePanel', () => {
beforeEach(() => {
jest.clearAllMocks();
});
@@ -63,8 +63,8 @@ describe('useNavigateCommandMenu', () => {
const { result } = renderHooks();
act(() => {
- result.current.navigateCommandMenu({
- page: CommandMenuPages.Root,
+ result.current.navigateSidePanel({
+ page: SidePanelPages.Root,
pageTitle: 'Root',
pageIcon: Icon123,
pageIconColor: 'red',
@@ -73,19 +73,17 @@ describe('useNavigateCommandMenu', () => {
});
});
- expect(jotaiStore.get(commandMenuPageState.atom)).toBe(
- CommandMenuPages.Root,
- );
- expect(jotaiStore.get(commandMenuNavigationStackState.atom)).toEqual([
+ expect(jotaiStore.get(sidePanelPageState.atom)).toBe(SidePanelPages.Root);
+ expect(jotaiStore.get(sidePanelNavigationStackState.atom)).toEqual([
{
- page: CommandMenuPages.Root,
+ page: SidePanelPages.Root,
pageTitle: 'Root',
pageIcon: Icon123,
pageIconColor: 'red',
pageId: 'mocked-uuid',
},
]);
- expect(jotaiStore.get(commandMenuPageInfoState.atom)).toEqual({
+ expect(jotaiStore.get(sidePanelPageInfoState.atom)).toEqual({
title: 'Root',
Icon: Icon123,
instanceId: 'mocked-uuid',
diff --git a/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useOpenAskAIPageInSidePanel.test.tsx b/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useOpenAskAIPageInSidePanel.test.tsx
new file mode 100644
index 0000000000..af583b8692
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useOpenAskAIPageInSidePanel.test.tsx
@@ -0,0 +1,85 @@
+import { act, renderHook } from '@testing-library/react';
+import { Provider as JotaiProvider } from 'jotai';
+import { type ReactNode } from 'react';
+
+import { useOpenAskAIPageInSidePanel } from '@/side-panel/hooks/useOpenAskAIPageInSidePanel';
+import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState';
+import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
+import { SidePanelPages } from 'twenty-shared/types';
+import { IconSparkles } from 'twenty-ui/display';
+
+const navigateSidePanelMenuMock = jest.fn();
+
+jest.mock('@/side-panel/hooks/useSidePanelMenu', () => ({
+ useSidePanelMenu: () => ({
+ navigateSidePanelMenu: navigateSidePanelMenuMock,
+ openSidePanelMenu: jest.fn(),
+ closeSidePanelMenu: jest.fn(),
+ toggleSidePanelMenu: jest.fn(),
+ }),
+}));
+
+const Wrapper = ({ children }: { children: ReactNode }) => (
+ {children}
+);
+
+describe('useOpenAskAIPageInSidePanel', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ jotaiStore.set(isSidePanelOpenedState.atom, false);
+ });
+
+ it('should navigate to AskAI page with correct defaults', () => {
+ const { result } = renderHook(() => useOpenAskAIPageInSidePanel(), {
+ wrapper: Wrapper,
+ });
+
+ act(() => {
+ result.current.openAskAIPage();
+ });
+
+ expect(navigateSidePanelMenuMock).toHaveBeenCalledWith(
+ expect.objectContaining({
+ page: SidePanelPages.AskAI,
+ pageTitle: 'Ask AI',
+ pageIcon: IconSparkles,
+ }),
+ );
+ });
+
+ it('should use resetNavigationStack from argument when provided', () => {
+ jotaiStore.set(isSidePanelOpenedState.atom, true);
+
+ const { result } = renderHook(() => useOpenAskAIPageInSidePanel(), {
+ wrapper: Wrapper,
+ });
+
+ act(() => {
+ result.current.openAskAIPage({ resetNavigationStack: false });
+ });
+
+ expect(navigateSidePanelMenuMock).toHaveBeenCalledWith(
+ expect.objectContaining({
+ resetNavigationStack: false,
+ }),
+ );
+ });
+
+ it('should default resetNavigationStack to isSidePanelOpened', () => {
+ jotaiStore.set(isSidePanelOpenedState.atom, true);
+
+ const { result } = renderHook(() => useOpenAskAIPageInSidePanel(), {
+ wrapper: Wrapper,
+ });
+
+ act(() => {
+ result.current.openAskAIPage();
+ });
+
+ expect(navigateSidePanelMenuMock).toHaveBeenCalledWith(
+ expect.objectContaining({
+ resetNavigationStack: true,
+ }),
+ );
+ });
+});
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenCalendarEventInCommandMenu.test.tsx b/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useOpenCalendarEventInSidePanel.test.tsx
similarity index 65%
rename from packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenCalendarEventInCommandMenu.test.tsx
rename to packages/twenty-front/src/modules/side-panel/hooks/__tests__/useOpenCalendarEventInSidePanel.test.tsx
index 9cd593244e..0cc1e96670 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenCalendarEventInCommandMenu.test.tsx
+++ b/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useOpenCalendarEventInSidePanel.test.tsx
@@ -1,12 +1,12 @@
import { renderHook } from '@testing-library/react';
import { act } from 'react';
-import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId';
-import { useOpenCalendarEventInCommandMenu } from '@/command-menu/hooks/useOpenCalendarEventInCommandMenu';
-import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
+import { SIDE_PANEL_COMPONENT_INSTANCE_ID } from '@/side-panel/constants/SidePanelComponentInstanceId';
+import { useOpenCalendarEventInSidePanel } from '@/side-panel/hooks/useOpenCalendarEventInSidePanel';
+import { viewableRecordIdComponentState } from '@/side-panel/pages/record-page/states/viewableRecordIdComponentState';
import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import { IconCalendarEvent } from 'twenty-ui/display';
import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
import { generatedMockObjectMetadataItems } from '~/testing/utils/generatedMockObjectMetadataItems';
@@ -15,10 +15,10 @@ jest.mock('uuid', () => ({
v4: jest.fn().mockReturnValue('mocked-uuid'),
}));
-const mockNavigateCommandMenu = jest.fn();
-jest.mock('@/command-menu/hooks/useNavigateCommandMenu', () => ({
- useNavigateCommandMenu: () => ({
- navigateCommandMenu: mockNavigateCommandMenu,
+const mockNavigateSidePanel = jest.fn();
+jest.mock('@/side-panel/hooks/useNavigateSidePanel', () => ({
+ useNavigateSidePanel: () => ({
+ navigateSidePanel: mockNavigateSidePanel,
}),
}));
@@ -28,7 +28,7 @@ const personMockObjectMetadataItem = generatedMockObjectMetadataItems.find(
const wrapper = getJestMetadataAndApolloMocksAndActionMenuWrapper({
apolloMocks: [],
- componentInstanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID,
+ componentInstanceId: SIDE_PANEL_COMPONENT_INSTANCE_ID,
contextStoreCurrentObjectMetadataNameSingular:
personMockObjectMetadataItem.nameSingular,
contextStoreCurrentViewId: 'my-view-id',
@@ -43,8 +43,8 @@ const wrapper = getJestMetadataAndApolloMocksAndActionMenuWrapper({
const renderHooks = () => {
const { result } = renderHook(
() => {
- const { openCalendarEventInCommandMenu } =
- useOpenCalendarEventInCommandMenu();
+ const { openCalendarEventInSidePanel } =
+ useOpenCalendarEventInSidePanel();
const viewableRecordId = useAtomComponentStateValue(
viewableRecordIdComponentState,
@@ -52,7 +52,7 @@ const renderHooks = () => {
);
return {
- openCalendarEventInCommandMenu,
+ openCalendarEventInSidePanel,
viewableRecordId,
};
},
@@ -63,7 +63,7 @@ const renderHooks = () => {
return { result };
};
-describe('useOpenCalendarEventInCommandMenu', () => {
+describe('useOpenCalendarEventInSidePanel', () => {
beforeEach(() => {
jest.clearAllMocks();
});
@@ -74,13 +74,13 @@ describe('useOpenCalendarEventInCommandMenu', () => {
const calendarEventId = 'calendar-event-123';
act(() => {
- result.current.openCalendarEventInCommandMenu(calendarEventId);
+ result.current.openCalendarEventInSidePanel(calendarEventId);
});
expect(result.current.viewableRecordId).toBe(calendarEventId);
- expect(mockNavigateCommandMenu).toHaveBeenCalledWith({
- page: CommandMenuPages.ViewCalendarEvent,
+ expect(mockNavigateSidePanel).toHaveBeenCalledWith({
+ page: SidePanelPages.ViewCalendarEvent,
pageTitle: 'Calendar Event',
pageIcon: IconCalendarEvent,
pageId: 'mocked-uuid',
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenEmailThreadInCommandMenu.test.tsx b/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useOpenEmailThreadInSidePanel.test.tsx
similarity index 66%
rename from packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenEmailThreadInCommandMenu.test.tsx
rename to packages/twenty-front/src/modules/side-panel/hooks/__tests__/useOpenEmailThreadInSidePanel.test.tsx
index 690b7fe877..c2c038ced9 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenEmailThreadInCommandMenu.test.tsx
+++ b/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useOpenEmailThreadInSidePanel.test.tsx
@@ -1,12 +1,12 @@
import { renderHook } from '@testing-library/react';
import { act } from 'react';
-import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId';
-import { useOpenEmailThreadInCommandMenu } from '@/command-menu/hooks/useOpenEmailThreadInCommandMenu';
-import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
+import { SIDE_PANEL_COMPONENT_INSTANCE_ID } from '@/side-panel/constants/SidePanelComponentInstanceId';
+import { useOpenEmailThreadInSidePanel } from '@/side-panel/hooks/useOpenEmailThreadInSidePanel';
+import { viewableRecordIdComponentState } from '@/side-panel/pages/record-page/states/viewableRecordIdComponentState';
import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import { IconMail } from 'twenty-ui/display';
import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
import { generatedMockObjectMetadataItems } from '~/testing/utils/generatedMockObjectMetadataItems';
@@ -15,10 +15,10 @@ jest.mock('uuid', () => ({
v4: jest.fn().mockReturnValue('mocked-uuid'),
}));
-const mockNavigateCommandMenu = jest.fn();
-jest.mock('@/command-menu/hooks/useNavigateCommandMenu', () => ({
- useNavigateCommandMenu: () => ({
- navigateCommandMenu: mockNavigateCommandMenu,
+const mockNavigateSidePanel = jest.fn();
+jest.mock('@/side-panel/hooks/useNavigateSidePanel', () => ({
+ useNavigateSidePanel: () => ({
+ navigateSidePanel: mockNavigateSidePanel,
}),
}));
@@ -28,7 +28,7 @@ const personMockObjectMetadataItem = generatedMockObjectMetadataItems.find(
const wrapper = getJestMetadataAndApolloMocksAndActionMenuWrapper({
apolloMocks: [],
- componentInstanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID,
+ componentInstanceId: SIDE_PANEL_COMPONENT_INSTANCE_ID,
contextStoreCurrentObjectMetadataNameSingular:
personMockObjectMetadataItem.nameSingular,
contextStoreCurrentViewId: 'my-view-id',
@@ -43,8 +43,7 @@ const wrapper = getJestMetadataAndApolloMocksAndActionMenuWrapper({
const renderHooks = () => {
const { result } = renderHook(
() => {
- const { openEmailThreadInCommandMenu } =
- useOpenEmailThreadInCommandMenu();
+ const { openEmailThreadInSidePanel } = useOpenEmailThreadInSidePanel();
const viewableRecordId = useAtomComponentStateValue(
viewableRecordIdComponentState,
@@ -52,7 +51,7 @@ const renderHooks = () => {
);
return {
- openEmailThreadInCommandMenu,
+ openEmailThreadInSidePanel,
viewableRecordId,
};
},
@@ -63,7 +62,7 @@ const renderHooks = () => {
return { result };
};
-describe('useOpenEmailThreadInCommandMenu', () => {
+describe('useOpenEmailThreadInSidePanel', () => {
beforeEach(() => {
jest.clearAllMocks();
});
@@ -74,13 +73,13 @@ describe('useOpenEmailThreadInCommandMenu', () => {
const emailThreadId = 'email-thread-123';
act(() => {
- result.current.openEmailThreadInCommandMenu(emailThreadId);
+ result.current.openEmailThreadInSidePanel(emailThreadId);
});
expect(result.current.viewableRecordId).toBe(emailThreadId);
- expect(mockNavigateCommandMenu).toHaveBeenCalledWith({
- page: CommandMenuPages.ViewEmailThread,
+ expect(mockNavigateSidePanel).toHaveBeenCalledWith({
+ page: SidePanelPages.ViewEmailThread,
pageTitle: 'Email Thread',
pageIcon: IconMail,
pageId: 'mocked-uuid',
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenRecordInCommandMenu.test.tsx b/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useOpenRecordInSidePanel.test.tsx
similarity index 78%
rename from packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenRecordInCommandMenu.test.tsx
rename to packages/twenty-front/src/modules/side-panel/hooks/__tests__/useOpenRecordInSidePanel.test.tsx
index 1bf82ac5a7..6e1de6c49c 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenRecordInCommandMenu.test.tsx
+++ b/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useOpenRecordInSidePanel.test.tsx
@@ -1,11 +1,11 @@
import { renderHook } from '@testing-library/react';
import { act } from 'react';
-import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId';
-import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
-import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
-import { viewableRecordNameSingularComponentState } from '@/command-menu/pages/record-page/states/viewableRecordNameSingularComponentState';
-import { commandMenuNavigationMorphItemsByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsByPageState';
+import { SIDE_PANEL_COMPONENT_INSTANCE_ID } from '@/side-panel/constants/SidePanelComponentInstanceId';
+import { useOpenRecordInSidePanel } from '@/side-panel/hooks/useOpenRecordInSidePanel';
+import { viewableRecordIdComponentState } from '@/side-panel/pages/record-page/states/viewableRecordIdComponentState';
+import { viewableRecordNameSingularComponentState } from '@/side-panel/pages/record-page/states/viewableRecordNameSingularComponentState';
+import { sidePanelNavigationMorphItemsByPageState } from '@/side-panel/states/sidePanelNavigationMorphItemsByPageState';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
import { contextStoreCurrentViewTypeComponentState } from '@/context-store/states/contextStoreCurrentViewTypeComponentState';
@@ -14,7 +14,7 @@ import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/s
import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import { useIcons } from 'twenty-ui/display';
import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
import { generatedMockObjectMetadataItems } from '~/testing/utils/generatedMockObjectMetadataItems';
@@ -23,10 +23,10 @@ jest.mock('uuid', () => ({
v4: jest.fn().mockReturnValue('mocked-uuid'),
}));
-const mockNavigateCommandMenu = jest.fn();
-jest.mock('@/command-menu/hooks/useNavigateCommandMenu', () => ({
- useNavigateCommandMenu: () => ({
- navigateCommandMenu: mockNavigateCommandMenu,
+const mockNavigateSidePanel = jest.fn();
+jest.mock('@/side-panel/hooks/useNavigateSidePanel', () => ({
+ useNavigateSidePanel: () => ({
+ navigateSidePanel: mockNavigateSidePanel,
}),
}));
@@ -46,7 +46,7 @@ const personMockObjectMetadataItem = generatedMockObjectMetadataItems.find(
const wrapper = getJestMetadataAndApolloMocksAndActionMenuWrapper({
apolloMocks: [],
- componentInstanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID,
+ componentInstanceId: SIDE_PANEL_COMPONENT_INSTANCE_ID,
contextStoreCurrentObjectMetadataNameSingular:
personMockObjectMetadataItem.nameSingular,
contextStoreCurrentViewId: 'my-view-id',
@@ -61,7 +61,7 @@ const wrapper = getJestMetadataAndApolloMocksAndActionMenuWrapper({
const renderHooks = () => {
const { result } = renderHook(
() => {
- const { openRecordInCommandMenu } = useOpenRecordInCommandMenu();
+ const { openRecordInSidePanel } = useOpenRecordInSidePanel();
const viewableRecordId = useAtomComponentStateValue(
viewableRecordIdComponentState,
@@ -91,7 +91,7 @@ const renderHooks = () => {
const { getIcon } = useIcons();
return {
- openRecordInCommandMenu,
+ openRecordInSidePanel,
viewableRecordId,
viewableRecordNameSingular,
contextStoreCurrentObjectMetadataItemId,
@@ -108,7 +108,7 @@ const renderHooks = () => {
return { result };
};
-describe('useOpenRecordInCommandMenu', () => {
+describe('useOpenRecordInSidePanel', () => {
beforeEach(() => {
jest.clearAllMocks();
});
@@ -120,7 +120,7 @@ describe('useOpenRecordInCommandMenu', () => {
const objectNameSingular = 'person';
act(() => {
- result.current.openRecordInCommandMenu({
+ result.current.openRecordInSidePanel({
recordId,
objectNameSingular,
});
@@ -140,19 +140,19 @@ describe('useOpenRecordInCommandMenu', () => {
ContextStoreViewType.ShowPage,
);
- const commandMenuNavigationMorphItemsByPage = jotaiStore.get(
- commandMenuNavigationMorphItemsByPageState.atom,
+ const sidePanelNavigationMorphItemsByPage = jotaiStore.get(
+ sidePanelNavigationMorphItemsByPageState.atom,
);
- expect(commandMenuNavigationMorphItemsByPage.size).toBe(1);
- expect(commandMenuNavigationMorphItemsByPage.get('mocked-uuid')).toEqual([
+ expect(sidePanelNavigationMorphItemsByPage.size).toBe(1);
+ expect(sidePanelNavigationMorphItemsByPage.get('mocked-uuid')).toEqual([
{
objectMetadataId: personMockObjectMetadataItem.id,
recordId,
},
]);
- expect(mockNavigateCommandMenu).toHaveBeenCalledWith({
- page: CommandMenuPages.ViewRecord,
+ expect(mockNavigateSidePanel).toHaveBeenCalledWith({
+ page: SidePanelPages.ViewRecord,
pageTitle: 'Person',
pageIcon: result.current.getIcon(personMockObjectMetadataItem.icon),
pageIconColor: 'currentColor',
@@ -168,15 +168,15 @@ describe('useOpenRecordInCommandMenu', () => {
const objectNameSingular = 'person';
act(() => {
- result.current.openRecordInCommandMenu({
+ result.current.openRecordInSidePanel({
recordId,
objectNameSingular,
isNewRecord: true,
});
});
- expect(mockNavigateCommandMenu).toHaveBeenCalledWith({
- page: CommandMenuPages.ViewRecord,
+ expect(mockNavigateSidePanel).toHaveBeenCalledWith({
+ page: SidePanelPages.ViewRecord,
pageTitle: 'New Person',
pageIcon: result.current.getIcon(personMockObjectMetadataItem.icon),
pageIconColor: 'currentColor',
@@ -189,7 +189,7 @@ describe('useOpenRecordInCommandMenu', () => {
const { result } = renderHooks();
act(() => {
- result.current.openRecordInCommandMenu({
+ result.current.openRecordInSidePanel({
recordId: 'new-record-123',
objectNameSingular: 'person',
isNewRecord: true,
@@ -208,7 +208,7 @@ describe('useOpenRecordInCommandMenu', () => {
const { result } = renderHooks();
act(() => {
- result.current.openRecordInCommandMenu({
+ result.current.openRecordInSidePanel({
recordId: 'record-123',
objectNameSingular: 'person',
});
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenUpdateMultipleRecordsPageInCommandMenu.test.tsx b/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useOpenUpdateMultipleRecordsPageInSidePanel.test.tsx
similarity index 50%
rename from packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenUpdateMultipleRecordsPageInCommandMenu.test.tsx
rename to packages/twenty-front/src/modules/side-panel/hooks/__tests__/useOpenUpdateMultipleRecordsPageInSidePanel.test.tsx
index d365c843d4..79c20cb570 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenUpdateMultipleRecordsPageInCommandMenu.test.tsx
+++ b/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useOpenUpdateMultipleRecordsPageInSidePanel.test.tsx
@@ -1,6 +1,6 @@
-describe('useOpenUpdateMultipleRecordsPageInCommandMenu', () => {
+describe('useOpenUpdateMultipleRecordsPageInSidePanel', () => {
it('should work', () => {
- // const { result } = renderHook(() => useOpenUpdateMultipleRecordsPageInCommandMenu({ contextStoreInstanceId: 'test' }));
+ // const { result } = renderHook(() => useOpenUpdateMultipleRecordsPageInSidePanel({ contextStoreInstanceId: 'test' }));
expect(true).toBe(true);
});
});
diff --git a/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useSidePanelCloseAnimationCompleteCleanup.test.tsx b/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useSidePanelCloseAnimationCompleteCleanup.test.tsx
new file mode 100644
index 0000000000..5988a8d976
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useSidePanelCloseAnimationCompleteCleanup.test.tsx
@@ -0,0 +1,179 @@
+import { renderHook } from '@testing-library/react';
+import { Provider as JotaiProvider } from 'jotai';
+import { act } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { SIDE_PANEL_COMPONENT_INSTANCE_ID } from '@/side-panel/constants/SidePanelComponentInstanceId';
+import { SIDE_PANEL_CONTEXT_CHIP_GROUPS_DROPDOWN_ID } from '@/side-panel/constants/SidePanelContextChipGroupsDropdownId';
+import { SIDE_PANEL_PREVIOUS_COMPONENT_INSTANCE_ID } from '@/side-panel/constants/SidePanelPreviousComponentInstanceId';
+import { useSidePanelCloseAnimationCompleteCleanup } from '@/side-panel/hooks/useSidePanelCloseAnimationCompleteCleanup';
+import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState';
+import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState';
+import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
+import { sidePanelSearchState } from '@/side-panel/states/sidePanelSearchState';
+import { hasUserSelectedSidePanelListItemState } from '@/side-panel/states/hasUserSelectedSidePanelListItemState';
+import { isSidePanelClosingState } from '@/side-panel/states/isSidePanelClosingState';
+import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState';
+import { viewableRecordIdState } from '@/object-record/record-side-panel/states/viewableRecordIdState';
+import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
+import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
+import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
+import { SidePanelPages } from 'twenty-shared/types';
+import { IconList } from 'twenty-ui/display';
+
+const mockCloseDropdown = jest.fn();
+const mockResetContextStoreStates = jest.fn();
+const mockResetSelectedItem = jest.fn();
+const mockEmitSidePanelCloseEvent = jest.fn();
+
+jest.mock('@/ui/layout/dropdown/hooks/useCloseDropdown', () => ({
+ useCloseDropdown: () => ({
+ closeDropdown: mockCloseDropdown,
+ }),
+}));
+
+jest.mock('@/command-menu/hooks/useResetContextStoreStates', () => ({
+ useResetContextStoreStates: () => ({
+ resetContextStoreStates: mockResetContextStoreStates,
+ }),
+}));
+
+jest.mock('@/ui/layout/selectable-list/hooks/useSelectableList', () => ({
+ useSelectableList: () => ({
+ resetSelectedItem: mockResetSelectedItem,
+ }),
+}));
+
+jest.mock('@/ui/layout/side-panel/utils/emitSidePanelCloseEvent', () => ({
+ emitSidePanelCloseEvent: () => {
+ mockEmitSidePanelCloseEvent();
+ },
+}));
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+
+ {children}
+
+);
+
+describe('useSidePanelCloseAnimationCompleteCleanup', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ const renderHooks = () => {
+ const { result } = renderHook(
+ () => {
+ const { sidePanelCloseAnimationCompleteCleanup } =
+ useSidePanelCloseAnimationCompleteCleanup();
+
+ const viewableRecordId = useAtomStateValue(viewableRecordIdState);
+
+ const setViewableRecordId = useSetAtomState(viewableRecordIdState);
+
+ return {
+ sidePanelCloseAnimationCompleteCleanup,
+ viewableRecordId,
+ setViewableRecordId,
+ };
+ },
+ {
+ wrapper: Wrapper,
+ },
+ );
+ return { result };
+ };
+
+ it('should reset modified states back to default values', () => {
+ const { result } = renderHooks();
+
+ act(() => {
+ jotaiStore.set(sidePanelPageState.atom, SidePanelPages.ViewRecord);
+ jotaiStore.set(sidePanelPageInfoState.atom, {
+ title: 'Test Record',
+ Icon: IconList,
+ instanceId: 'test-id',
+ });
+ jotaiStore.set(isSidePanelOpenedState.atom, true);
+ jotaiStore.set(sidePanelSearchState.atom, 'test search');
+ jotaiStore.set(sidePanelNavigationStackState.atom, [
+ {
+ page: SidePanelPages.SearchRecords,
+ pageTitle: 'Search',
+ pageIcon: IconList,
+ pageId: '1',
+ },
+ ]);
+ jotaiStore.set(hasUserSelectedSidePanelListItemState.atom, true);
+ jotaiStore.set(isSidePanelClosingState.atom, true);
+ result.current.setViewableRecordId('record-123');
+ });
+
+ expect(jotaiStore.get(sidePanelPageState.atom)).toBe(
+ SidePanelPages.ViewRecord,
+ );
+ expect(jotaiStore.get(sidePanelPageInfoState.atom)).toEqual({
+ title: 'Test Record',
+ Icon: IconList,
+ instanceId: 'test-id',
+ });
+ expect(jotaiStore.get(isSidePanelOpenedState.atom)).toBe(true);
+ expect(jotaiStore.get(sidePanelSearchState.atom)).toBe('test search');
+ expect(jotaiStore.get(sidePanelNavigationStackState.atom)).toEqual([
+ {
+ page: SidePanelPages.SearchRecords,
+ pageTitle: 'Search',
+ pageIcon: IconList,
+ pageId: '1',
+ },
+ ]);
+ expect(jotaiStore.get(hasUserSelectedSidePanelListItemState.atom)).toBe(
+ true,
+ );
+ expect(jotaiStore.get(isSidePanelClosingState.atom)).toBe(true);
+ expect(result.current.viewableRecordId).toBe('record-123');
+
+ act(() => {
+ result.current.sidePanelCloseAnimationCompleteCleanup();
+ });
+
+ expect(jotaiStore.get(sidePanelPageState.atom)).toBe(SidePanelPages.Root);
+ expect(jotaiStore.get(sidePanelPageInfoState.atom)).toEqual({
+ title: undefined,
+ Icon: undefined,
+ instanceId: '',
+ });
+ expect(jotaiStore.get(isSidePanelOpenedState.atom)).toBe(false);
+ expect(jotaiStore.get(sidePanelSearchState.atom)).toBe('');
+ expect(jotaiStore.get(sidePanelNavigationStackState.atom)).toEqual([]);
+ expect(jotaiStore.get(hasUserSelectedSidePanelListItemState.atom)).toBe(
+ false,
+ );
+ expect(jotaiStore.get(isSidePanelClosingState.atom)).toBe(false);
+ expect(result.current.viewableRecordId).toBe(null);
+ });
+
+ it('should call all dependent functions correctly', () => {
+ const { result } = renderHooks();
+
+ act(() => {
+ result.current.sidePanelCloseAnimationCompleteCleanup();
+ });
+
+ expect(mockCloseDropdown).toHaveBeenCalledTimes(1);
+ expect(mockResetContextStoreStates).toHaveBeenCalledTimes(2);
+ expect(mockResetSelectedItem).toHaveBeenCalledTimes(1);
+ expect(mockEmitSidePanelCloseEvent).toHaveBeenCalledTimes(1);
+
+ expect(mockCloseDropdown).toHaveBeenCalledWith(
+ SIDE_PANEL_CONTEXT_CHIP_GROUPS_DROPDOWN_ID,
+ );
+ expect(mockResetContextStoreStates).toHaveBeenNthCalledWith(
+ 1,
+ SIDE_PANEL_COMPONENT_INSTANCE_ID,
+ );
+ expect(mockResetContextStoreStates).toHaveBeenNthCalledWith(
+ 2,
+ SIDE_PANEL_PREVIOUS_COMPONENT_INSTANCE_ID,
+ );
+ });
+});
diff --git a/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useSidePanelHistory.test.tsx b/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useSidePanelHistory.test.tsx
new file mode 100644
index 0000000000..8f885ef79c
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useSidePanelHistory.test.tsx
@@ -0,0 +1,141 @@
+import { renderHook } from '@testing-library/react';
+import { Provider as JotaiProvider } from 'jotai';
+import { act } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { useSidePanelCloseAnimationCompleteCleanup } from '@/side-panel/hooks/useSidePanelCloseAnimationCompleteCleanup';
+import { useSidePanelHistory } from '@/side-panel/hooks/useSidePanelHistory';
+import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState';
+import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState';
+import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
+import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState';
+import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
+import { SidePanelPages } from 'twenty-shared/types';
+import { IconList, IconSearch } from 'twenty-ui/display';
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+
+ {children}
+
+);
+
+const renderHooks = () => {
+ const { result } = renderHook(
+ () => {
+ const commandMenu = useSidePanelMenu();
+ const commandMenuHistory = useSidePanelHistory();
+ const sidePanelCloseAnimationCompleteCleanup =
+ useSidePanelCloseAnimationCompleteCleanup();
+
+ return {
+ commandMenu,
+ commandMenuHistory,
+ sidePanelCloseAnimationCompleteCleanup,
+ };
+ },
+ {
+ wrapper: Wrapper,
+ },
+ );
+ return { result };
+};
+
+describe('useSidePanelHistory', () => {
+ it('should go back from a page', () => {
+ const { result } = renderHooks();
+
+ act(() => {
+ result.current.commandMenu.navigateSidePanelMenu({
+ page: SidePanelPages.SearchRecords,
+ pageTitle: 'Search',
+ pageIcon: IconSearch,
+ pageId: '1',
+ });
+ });
+
+ act(() => {
+ result.current.commandMenu.navigateSidePanelMenu({
+ page: SidePanelPages.ViewRecord,
+ pageTitle: 'Company',
+ pageIcon: IconList,
+ pageId: '2',
+ });
+ });
+
+ expect(jotaiStore.get(sidePanelNavigationStackState.atom)).toEqual([
+ {
+ page: SidePanelPages.SearchRecords,
+ pageTitle: 'Search',
+ pageIcon: IconSearch,
+ pageId: '1',
+ },
+ {
+ page: SidePanelPages.ViewRecord,
+ pageTitle: 'Company',
+ pageIcon: IconList,
+ pageId: '2',
+ },
+ ]);
+
+ act(() => {
+ result.current.commandMenuHistory.goBackFromSidePanel();
+ });
+
+ expect(jotaiStore.get(sidePanelNavigationStackState.atom)).toEqual([
+ {
+ page: SidePanelPages.SearchRecords,
+ pageTitle: 'Search',
+ pageIcon: IconSearch,
+ pageId: '1',
+ },
+ ]);
+ expect(jotaiStore.get(sidePanelPageState.atom)).toBe(
+ SidePanelPages.SearchRecords,
+ );
+ expect(jotaiStore.get(sidePanelPageInfoState.atom)).toEqual({
+ title: 'Search',
+ Icon: IconSearch,
+ instanceId: '1',
+ });
+
+ act(() => {
+ result.current.commandMenuHistory.goBackFromSidePanel();
+ result.current.sidePanelCloseAnimationCompleteCleanup.sidePanelCloseAnimationCompleteCleanup();
+ });
+
+ expect(jotaiStore.get(sidePanelNavigationStackState.atom)).toEqual([]);
+ expect(jotaiStore.get(sidePanelPageState.atom)).toBe(SidePanelPages.Root);
+ expect(jotaiStore.get(sidePanelPageInfoState.atom)).toEqual({
+ title: undefined,
+ instanceId: '',
+ Icon: undefined,
+ });
+ expect(jotaiStore.get(isSidePanelOpenedState.atom)).toBe(false);
+ });
+
+ it('should navigate to a page in history', () => {
+ const { result } = renderHooks();
+
+ act(() => {
+ result.current.commandMenu.navigateSidePanelMenu({
+ page: SidePanelPages.SearchRecords,
+ pageTitle: 'Search',
+ pageIcon: IconSearch,
+ pageId: '1',
+ });
+ });
+
+ act(() => {
+ result.current.commandMenuHistory.navigateSidePanelHistory(0);
+ });
+
+ expect(jotaiStore.get(sidePanelPageState.atom)).toBe(
+ SidePanelPages.SearchRecords,
+ );
+ expect(jotaiStore.get(sidePanelPageInfoState.atom)).toEqual({
+ title: 'Search',
+ Icon: IconSearch,
+ instanceId: '1',
+ });
+ });
+});
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuUpdateNavigationMorphItemsByPage.test.tsx b/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useSidePanelUpdateNavigationMorphItemsByPage.test.tsx
similarity index 65%
rename from packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuUpdateNavigationMorphItemsByPage.test.tsx
rename to packages/twenty-front/src/modules/side-panel/hooks/__tests__/useSidePanelUpdateNavigationMorphItemsByPage.test.tsx
index de04cb90a5..febb2bc3a8 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuUpdateNavigationMorphItemsByPage.test.tsx
+++ b/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useSidePanelUpdateNavigationMorphItemsByPage.test.tsx
@@ -1,5 +1,5 @@
-import { useCommandMenuUpdateNavigationMorphItemsByPage } from '@/command-menu/hooks/useCommandMenuUpdateNavigationMorphItemsByPage';
-import { commandMenuNavigationMorphItemsByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsByPageState';
+import { useSidePanelUpdateNavigationMorphItemsByPage } from '@/side-panel/hooks/useSidePanelUpdateNavigationMorphItemsByPage';
+import { sidePanelNavigationMorphItemsByPageState } from '@/side-panel/states/sidePanelNavigationMorphItemsByPageState';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { renderHook } from '@testing-library/react';
import { Provider as JotaiProvider } from 'jotai';
@@ -13,7 +13,7 @@ const Wrapper = ({ children }: { children: React.ReactNode }) => (
const renderHooks = (initialRecordIds: string[]) => {
jotaiStore.set(
- commandMenuNavigationMorphItemsByPageState.atom,
+ sidePanelNavigationMorphItemsByPageState.atom,
new Map([
[
pageId,
@@ -27,11 +27,11 @@ const renderHooks = (initialRecordIds: string[]) => {
return renderHook(
() => {
- const { updateCommandMenuNavigationMorphItemsByPage } =
- useCommandMenuUpdateNavigationMorphItemsByPage();
+ const { updateSidePanelNavigationMorphItemsByPage } =
+ useSidePanelUpdateNavigationMorphItemsByPage();
return {
- updateCommandMenuNavigationMorphItemsByPage,
+ updateSidePanelNavigationMorphItemsByPage,
};
},
{
@@ -40,12 +40,12 @@ const renderHooks = (initialRecordIds: string[]) => {
);
};
-describe('useCommandMenuUpdateNavigationMorphItemsByPage', () => {
+describe('useSidePanelUpdateNavigationMorphItemsByPage', () => {
it('should replace existing items for a page instead of appending', async () => {
const { result } = renderHooks(['record-1', 'record-2']);
await act(async () => {
- await result.current.updateCommandMenuNavigationMorphItemsByPage({
+ await result.current.updateSidePanelNavigationMorphItemsByPage({
pageId,
objectMetadataId,
objectRecordIds: ['record-2', 'record-1'],
@@ -53,9 +53,7 @@ describe('useCommandMenuUpdateNavigationMorphItemsByPage', () => {
});
expect(
- jotaiStore
- .get(commandMenuNavigationMorphItemsByPageState.atom)
- .get(pageId),
+ jotaiStore.get(sidePanelNavigationMorphItemsByPageState.atom).get(pageId),
).toEqual([
{
objectMetadataId,
@@ -72,12 +70,12 @@ describe('useCommandMenuUpdateNavigationMorphItemsByPage', () => {
const { result } = renderHooks([]);
await act(async () => {
- await result.current.updateCommandMenuNavigationMorphItemsByPage({
+ await result.current.updateSidePanelNavigationMorphItemsByPage({
pageId,
objectMetadataId,
objectRecordIds: ['record-1', 'record-2'],
});
- await result.current.updateCommandMenuNavigationMorphItemsByPage({
+ await result.current.updateSidePanelNavigationMorphItemsByPage({
pageId,
objectMetadataId,
objectRecordIds: ['record-2', 'record-1'],
@@ -85,9 +83,7 @@ describe('useCommandMenuUpdateNavigationMorphItemsByPage', () => {
});
expect(
- jotaiStore
- .get(commandMenuNavigationMorphItemsByPageState.atom)
- .get(pageId),
+ jotaiStore.get(sidePanelNavigationMorphItemsByPageState.atom).get(pageId),
).toEqual([
{
objectMetadataId,
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useUpdateCommandMenuPageInfo.test.tsx b/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useUpdateSidePanelPageInfo.test.tsx
similarity index 55%
rename from packages/twenty-front/src/modules/command-menu/hooks/__tests__/useUpdateCommandMenuPageInfo.test.tsx
rename to packages/twenty-front/src/modules/side-panel/hooks/__tests__/useUpdateSidePanelPageInfo.test.tsx
index 01d1427959..969539d242 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useUpdateCommandMenuPageInfo.test.tsx
+++ b/packages/twenty-front/src/modules/side-panel/hooks/__tests__/useUpdateSidePanelPageInfo.test.tsx
@@ -1,11 +1,11 @@
-import { useUpdateCommandMenuPageInfo } from '@/command-menu/hooks/useUpdateCommandMenuPageInfo';
-import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
-import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
+import { useUpdateSidePanelPageInfo } from '@/side-panel/hooks/useUpdateSidePanelPageInfo';
+import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState';
+import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { renderHook } from '@testing-library/react';
import { Provider as JotaiProvider } from 'jotai';
import { act } from 'react';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import { IconArrowDown, IconDotsVertical } from 'twenty-ui/display';
const mockedPageInfo = {
@@ -16,7 +16,7 @@ const mockedPageInfo = {
const mockedNavigationStack = [
{
- page: CommandMenuPages.Root,
+ page: SidePanelPages.Root,
pageTitle: 'Initial Title',
pageIcon: IconDotsVertical,
pageId: 'test-page-id',
@@ -27,19 +27,19 @@ const Wrapper = ({ children }: { children: React.ReactNode }) => (
{children}
);
-describe('useUpdateCommandMenuPageInfo', () => {
+describe('useUpdateSidePanelPageInfo', () => {
beforeEach(() => {
- jotaiStore.set(commandMenuNavigationStackState.atom, mockedNavigationStack);
- jotaiStore.set(commandMenuPageInfoState.atom, mockedPageInfo);
+ jotaiStore.set(sidePanelNavigationStackState.atom, mockedNavigationStack);
+ jotaiStore.set(sidePanelPageInfoState.atom, mockedPageInfo);
});
const renderHooks = () => {
const { result } = renderHook(
() => {
- const { updateCommandMenuPageInfo } = useUpdateCommandMenuPageInfo();
+ const { updateSidePanelPageInfo } = useUpdateSidePanelPageInfo();
return {
- updateCommandMenuPageInfo,
+ updateSidePanelPageInfo,
};
},
{ wrapper: Wrapper },
@@ -54,26 +54,26 @@ describe('useUpdateCommandMenuPageInfo', () => {
const { result } = renderHooks();
act(() => {
- result.current.updateCommandMenuPageInfo({
+ result.current.updateSidePanelPageInfo({
pageTitle: 'New Title',
pageIcon: IconArrowDown,
});
});
- const commandMenuNavigationStack = jotaiStore.get(
- commandMenuNavigationStackState.atom,
+ const sidePanelNavigationStack = jotaiStore.get(
+ sidePanelNavigationStackState.atom,
);
- expect(commandMenuNavigationStack).toEqual([
+ expect(sidePanelNavigationStack).toEqual([
{
- page: CommandMenuPages.Root,
+ page: SidePanelPages.Root,
pageTitle: 'New Title',
pageIcon: IconArrowDown,
pageId: 'test-page-id',
},
]);
- const commandMenuPageInfo = jotaiStore.get(commandMenuPageInfoState.atom);
- expect(commandMenuPageInfo).toEqual({
+ const sidePanelPageInfo = jotaiStore.get(sidePanelPageInfoState.atom);
+ expect(sidePanelPageInfo).toEqual({
title: 'New Title',
Icon: IconArrowDown,
instanceId: 'test-instance',
@@ -84,25 +84,25 @@ describe('useUpdateCommandMenuPageInfo', () => {
const { result } = renderHooks();
act(() => {
- result.current.updateCommandMenuPageInfo({
+ result.current.updateSidePanelPageInfo({
pageTitle: 'New Title',
});
});
- const commandMenuNavigationStack = jotaiStore.get(
- commandMenuNavigationStackState.atom,
+ const sidePanelNavigationStack = jotaiStore.get(
+ sidePanelNavigationStackState.atom,
);
- expect(commandMenuNavigationStack).toEqual([
+ expect(sidePanelNavigationStack).toEqual([
{
- page: CommandMenuPages.Root,
+ page: SidePanelPages.Root,
pageTitle: 'New Title',
pageIcon: IconDotsVertical,
pageId: 'test-page-id',
},
]);
- const commandMenuPageInfo = jotaiStore.get(commandMenuPageInfoState.atom);
- expect(commandMenuPageInfo).toEqual({
+ const sidePanelPageInfo = jotaiStore.get(sidePanelPageInfoState.atom);
+ expect(sidePanelPageInfo).toEqual({
title: 'New Title',
Icon: IconDotsVertical,
instanceId: 'test-instance',
@@ -113,25 +113,25 @@ describe('useUpdateCommandMenuPageInfo', () => {
const { result } = renderHooks();
act(() => {
- result.current.updateCommandMenuPageInfo({
+ result.current.updateSidePanelPageInfo({
pageIcon: IconArrowDown,
});
});
- const commandMenuNavigationStack = jotaiStore.get(
- commandMenuNavigationStackState.atom,
+ const sidePanelNavigationStack = jotaiStore.get(
+ sidePanelNavigationStackState.atom,
);
- expect(commandMenuNavigationStack).toEqual([
+ expect(sidePanelNavigationStack).toEqual([
{
- page: CommandMenuPages.Root,
+ page: SidePanelPages.Root,
pageTitle: 'Initial Title',
pageIcon: IconArrowDown,
pageId: 'test-page-id',
},
]);
- const commandMenuPageInfo = jotaiStore.get(commandMenuPageInfoState.atom);
- expect(commandMenuPageInfo).toEqual({
+ const sidePanelPageInfo = jotaiStore.get(sidePanelPageInfoState.atom);
+ expect(sidePanelPageInfo).toEqual({
title: 'Initial Title',
Icon: IconArrowDown,
instanceId: 'test-instance',
diff --git a/packages/twenty-front/src/modules/side-panel/hooks/useNavigateSidePanel.ts b/packages/twenty-front/src/modules/side-panel/hooks/useNavigateSidePanel.ts
new file mode 100644
index 0000000000..a1ca5011bc
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/hooks/useNavigateSidePanel.ts
@@ -0,0 +1,148 @@
+import { SIDE_PANEL_COMPONENT_INSTANCE_ID } from '@/side-panel/constants/SidePanelComponentInstanceId';
+import { SIDE_PANEL_FOCUS_ID } from '@/side-panel/constants/SidePanelFocusId';
+import { useSidePanelCloseAnimationCompleteCleanup } from '@/side-panel/hooks/useSidePanelCloseAnimationCompleteCleanup';
+import { useCopyContextStoreStates } from '@/command-menu/hooks/useCopyContextStoreAndActionMenuStates';
+import { sidePanelNavigationMorphItemsByPageState } from '@/side-panel/states/sidePanelNavigationMorphItemsByPageState';
+import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState';
+import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState';
+import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
+import { sidePanelShouldFocusTitleInputComponentState } from '@/side-panel/states/sidePanelShouldFocusTitleInputComponentState';
+import { hasUserSelectedSidePanelListItemState } from '@/side-panel/states/hasUserSelectedSidePanelListItemState';
+import { isSidePanelClosingState } from '@/side-panel/states/isSidePanelClosingState';
+import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState';
+import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
+import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
+import { useStore } from 'jotai';
+import { useCallback } from 'react';
+import { type SidePanelPages } from 'twenty-shared/types';
+import { type IconComponent } from 'twenty-ui/display';
+import { v4 } from 'uuid';
+
+export type SidePanelNavigationStackItem = {
+ page: SidePanelPages;
+ pageTitle: string;
+ pageIcon: IconComponent;
+ pageIconColor?: string;
+ pageId?: string;
+};
+
+export const useNavigateSidePanel = () => {
+ const store = useStore();
+ const { copyContextStoreStates } = useCopyContextStoreStates();
+
+ const { sidePanelCloseAnimationCompleteCleanup } =
+ useSidePanelCloseAnimationCompleteCleanup();
+
+ const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
+
+ const openSidePanel = useCallback(() => {
+ const isSidePanelOpened = store.get(isSidePanelOpenedState.atom);
+
+ const isSidePanelClosing = store.get(isSidePanelClosingState.atom);
+
+ if (isSidePanelClosing) {
+ sidePanelCloseAnimationCompleteCleanup({
+ emitSidePanelCloseEvent: false,
+ });
+ }
+
+ if (isSidePanelOpened) {
+ return;
+ }
+
+ pushFocusItemToFocusStack({
+ focusId: SIDE_PANEL_FOCUS_ID,
+ component: {
+ type: FocusComponentType.SIDE_PANEL,
+ instanceId: SIDE_PANEL_COMPONENT_INSTANCE_ID,
+ },
+ globalHotkeysConfig: {
+ enableGlobalHotkeysConflictingWithKeyboard: false,
+ },
+ });
+
+ copyContextStoreStates({
+ instanceIdToCopyFrom: MAIN_CONTEXT_STORE_INSTANCE_ID,
+ instanceIdToCopyTo: SIDE_PANEL_COMPONENT_INSTANCE_ID,
+ });
+
+ store.set(isSidePanelOpenedState.atom, true);
+ store.set(hasUserSelectedSidePanelListItemState.atom, false);
+ }, [
+ copyContextStoreStates,
+ sidePanelCloseAnimationCompleteCleanup,
+ pushFocusItemToFocusStack,
+ store,
+ ]);
+
+ const navigateSidePanel = useCallback(
+ ({
+ page,
+ pageTitle,
+ pageIcon,
+ pageIconColor,
+ pageId,
+ focusTitleInput = false,
+ resetNavigationStack = false,
+ }: SidePanelNavigationStackItem & {
+ resetNavigationStack?: boolean;
+ focusTitleInput?: boolean;
+ }) => {
+ const computedPageId = pageId || v4();
+
+ openSidePanel();
+ store.set(sidePanelPageState.atom, page);
+ store.set(sidePanelPageInfoState.atom, {
+ title: pageTitle,
+ Icon: pageIcon,
+ instanceId: computedPageId,
+ });
+
+ if (focusTitleInput) {
+ store.set(
+ sidePanelShouldFocusTitleInputComponentState.atomFamily({
+ instanceId: computedPageId,
+ }),
+ true,
+ );
+ }
+
+ const isSidePanelClosing = store.get(isSidePanelClosingState.atom);
+
+ const currentNavigationStack = isSidePanelClosing
+ ? []
+ : store.get(sidePanelNavigationStackState.atom);
+
+ if (resetNavigationStack) {
+ store.set(sidePanelNavigationStackState.atom, [
+ {
+ page,
+ pageTitle,
+ pageIcon,
+ pageIconColor,
+ pageId: computedPageId,
+ },
+ ]);
+
+ store.set(sidePanelNavigationMorphItemsByPageState.atom, new Map());
+ } else {
+ store.set(sidePanelNavigationStackState.atom, [
+ ...currentNavigationStack,
+ {
+ page,
+ pageTitle,
+ pageIcon,
+ pageIconColor,
+ pageId: computedPageId,
+ },
+ ]);
+ }
+ },
+ [openSidePanel, store],
+ );
+
+ return {
+ navigateSidePanel,
+ };
+};
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useOpenAskAIPageInCommandMenu.ts b/packages/twenty-front/src/modules/side-panel/hooks/useOpenAskAIPageInSidePanel.ts
similarity index 55%
rename from packages/twenty-front/src/modules/command-menu/hooks/useOpenAskAIPageInCommandMenu.ts
rename to packages/twenty-front/src/modules/side-panel/hooks/useOpenAskAIPageInSidePanel.ts
index 2256b62b14..2fcb8daf78 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useOpenAskAIPageInCommandMenu.ts
+++ b/packages/twenty-front/src/modules/side-panel/hooks/useOpenAskAIPageInSidePanel.ts
@@ -1,15 +1,15 @@
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { t } from '@lingui/core/macro';
import { useCallback } from 'react';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import { IconSparkles } from 'twenty-ui/display';
import { v4 } from 'uuid';
-export const useOpenAskAIPageInCommandMenu = () => {
- const { navigateCommandMenu } = useCommandMenu();
- const isCommandMenuOpened = useAtomStateValue(isCommandMenuOpenedState);
+export const useOpenAskAIPageInSidePanel = () => {
+ const { navigateSidePanelMenu } = useSidePanelMenu();
+ const isSidePanelOpened = useAtomStateValue(isSidePanelOpenedState);
const openAskAIPage = useCallback(
({
@@ -20,17 +20,17 @@ export const useOpenAskAIPageInCommandMenu = () => {
const shouldReset =
resetNavigationStack !== undefined
? resetNavigationStack
- : isCommandMenuOpened;
+ : isSidePanelOpened;
- navigateCommandMenu({
- page: CommandMenuPages.AskAI,
+ navigateSidePanelMenu({
+ page: SidePanelPages.AskAI,
pageTitle: t`Ask AI`,
pageIcon: IconSparkles,
pageId: v4(),
resetNavigationStack: shouldReset,
});
},
- [navigateCommandMenu, isCommandMenuOpened],
+ [navigateSidePanelMenu, isSidePanelOpened],
);
return {
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useOpenCalendarEventInCommandMenu.ts b/packages/twenty-front/src/modules/side-panel/hooks/useOpenCalendarEventInSidePanel.ts
similarity index 70%
rename from packages/twenty-front/src/modules/command-menu/hooks/useOpenCalendarEventInCommandMenu.ts
rename to packages/twenty-front/src/modules/side-panel/hooks/useOpenCalendarEventInSidePanel.ts
index e29d49c316..226372c4da 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useOpenCalendarEventInCommandMenu.ts
+++ b/packages/twenty-front/src/modules/side-panel/hooks/useOpenCalendarEventInSidePanel.ts
@@ -1,17 +1,17 @@
-import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
-import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
+import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
+import { viewableRecordIdComponentState } from '@/side-panel/pages/record-page/states/viewableRecordIdComponentState';
import { t } from '@lingui/core/macro';
import { useCallback } from 'react';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import { IconCalendarEvent } from 'twenty-ui/display';
import { v4 } from 'uuid';
import { useStore } from 'jotai';
-export const useOpenCalendarEventInCommandMenu = () => {
+export const useOpenCalendarEventInSidePanel = () => {
const store = useStore();
- const { navigateCommandMenu } = useNavigateCommandMenu();
+ const { navigateSidePanel } = useNavigateSidePanel();
- const openCalendarEventInCommandMenu = useCallback(
+ const openCalendarEventInSidePanel = useCallback(
(calendarEventId: string) => {
const pageComponentInstanceId = v4();
@@ -47,17 +47,17 @@ export const useOpenCalendarEventInCommandMenu = () => {
// ]),
// );
- navigateCommandMenu({
- page: CommandMenuPages.ViewCalendarEvent,
+ navigateSidePanel({
+ page: SidePanelPages.ViewCalendarEvent,
pageTitle: t`Calendar Event`,
pageIcon: IconCalendarEvent,
pageId: pageComponentInstanceId,
});
},
- [navigateCommandMenu, store],
+ [navigateSidePanel, store],
);
return {
- openCalendarEventInCommandMenu,
+ openCalendarEventInSidePanel,
};
};
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useOpenEmailThreadInCommandMenu.ts b/packages/twenty-front/src/modules/side-panel/hooks/useOpenEmailThreadInSidePanel.ts
similarity index 70%
rename from packages/twenty-front/src/modules/command-menu/hooks/useOpenEmailThreadInCommandMenu.ts
rename to packages/twenty-front/src/modules/side-panel/hooks/useOpenEmailThreadInSidePanel.ts
index b2d233d008..378315803d 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useOpenEmailThreadInCommandMenu.ts
+++ b/packages/twenty-front/src/modules/side-panel/hooks/useOpenEmailThreadInSidePanel.ts
@@ -1,17 +1,17 @@
-import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
-import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
+import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
+import { viewableRecordIdComponentState } from '@/side-panel/pages/record-page/states/viewableRecordIdComponentState';
import { t } from '@lingui/core/macro';
import { useCallback } from 'react';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import { IconMail } from 'twenty-ui/display';
import { v4 } from 'uuid';
import { useStore } from 'jotai';
-export const useOpenEmailThreadInCommandMenu = () => {
+export const useOpenEmailThreadInSidePanel = () => {
const store = useStore();
- const { navigateCommandMenu } = useNavigateCommandMenu();
+ const { navigateSidePanel } = useNavigateSidePanel();
- const openEmailThreadInCommandMenu = useCallback(
+ const openEmailThreadInSidePanel = useCallback(
(emailThreadId: string) => {
const pageComponentInstanceId = v4();
@@ -47,17 +47,17 @@ export const useOpenEmailThreadInCommandMenu = () => {
// ]),
// );
- navigateCommandMenu({
- page: CommandMenuPages.ViewEmailThread,
+ navigateSidePanel({
+ page: SidePanelPages.ViewEmailThread,
pageTitle: t`Email Thread`,
pageIcon: IconMail,
pageId: pageComponentInstanceId,
});
},
- [navigateCommandMenu, store],
+ [navigateSidePanel, store],
);
return {
- openEmailThreadInCommandMenu,
+ openEmailThreadInSidePanel,
};
};
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useOpenFrontComponentInCommandMenu.ts b/packages/twenty-front/src/modules/side-panel/hooks/useOpenFrontComponentInSidePanel.ts
similarity index 62%
rename from packages/twenty-front/src/modules/command-menu/hooks/useOpenFrontComponentInCommandMenu.ts
rename to packages/twenty-front/src/modules/side-panel/hooks/useOpenFrontComponentInSidePanel.ts
index 29ff0cc0b2..c0f09ea253 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useOpenFrontComponentInCommandMenu.ts
+++ b/packages/twenty-front/src/modules/side-panel/hooks/useOpenFrontComponentInSidePanel.ts
@@ -1,16 +1,16 @@
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { viewableFrontComponentIdComponentState } from '@/command-menu/pages/front-component/states/viewableFrontComponentIdComponentState';
-import { viewableFrontComponentRecordContextComponentState } from '@/command-menu/pages/front-component/states/viewableFrontComponentRecordContextComponentState';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { viewableFrontComponentIdComponentState } from '@/side-panel/pages/front-component/states/viewableFrontComponentIdComponentState';
+import { viewableFrontComponentRecordContextComponentState } from '@/side-panel/pages/front-component/states/viewableFrontComponentRecordContextComponentState';
import { useStore } from 'jotai';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import { type IconComponent } from 'twenty-ui/display';
import { v4 } from 'uuid';
-export const useOpenFrontComponentInCommandMenu = () => {
+export const useOpenFrontComponentInSidePanel = () => {
const store = useStore();
- const { navigateCommandMenu } = useCommandMenu();
+ const { navigateSidePanelMenu } = useSidePanelMenu();
- const openFrontComponentInCommandMenu = ({
+ const openFrontComponentInSidePanel = ({
frontComponentId,
pageTitle,
pageIcon,
@@ -42,8 +42,8 @@ export const useOpenFrontComponentInCommandMenu = () => {
recordContext ?? null,
);
- navigateCommandMenu({
- page: CommandMenuPages.ViewFrontComponent,
+ navigateSidePanelMenu({
+ page: SidePanelPages.ViewFrontComponent,
pageTitle,
pageIcon,
pageId: pageComponentInstanceId,
@@ -52,6 +52,6 @@ export const useOpenFrontComponentInCommandMenu = () => {
};
return {
- openFrontComponentInCommandMenu,
+ openFrontComponentInSidePanel,
};
};
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useOpenMergeRecordsPageInCommandMenu.tsx b/packages/twenty-front/src/modules/side-panel/hooks/useOpenMergeRecordsPageInSidePanel.tsx
similarity index 65%
rename from packages/twenty-front/src/modules/command-menu/hooks/useOpenMergeRecordsPageInCommandMenu.tsx
rename to packages/twenty-front/src/modules/side-panel/hooks/useOpenMergeRecordsPageInSidePanel.tsx
index c54b35995a..27b1338d96 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useOpenMergeRecordsPageInCommandMenu.tsx
+++ b/packages/twenty-front/src/modules/side-panel/hooks/useOpenMergeRecordsPageInSidePanel.tsx
@@ -1,10 +1,10 @@
-import { useCommandMenuUpdateNavigationMorphItemsByPage } from '@/command-menu/hooks/useCommandMenuUpdateNavigationMorphItemsByPage';
-import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
+import { useSidePanelUpdateNavigationMorphItemsByPage } from '@/side-panel/hooks/useSidePanelUpdateNavigationMorphItemsByPage';
+import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useLazyFindManyRecords } from '@/object-record/hooks/useLazyFindManyRecords';
import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import { msg, t } from '@lingui/core/macro';
import { useCallback } from 'react';
@@ -12,23 +12,23 @@ import { IconArrowMerge } from 'twenty-ui/display';
import { v4 } from 'uuid';
import { useStore } from 'jotai';
-type UseOpenMergeRecordsPageInCommandMenuProps = {
+type UseOpenMergeRecordsPageInSidePanelProps = {
objectNameSingular: string;
objectRecordIds: string[];
};
-export const useOpenMergeRecordsPageInCommandMenu = ({
+export const useOpenMergeRecordsPageInSidePanel = ({
objectNameSingular,
objectRecordIds,
-}: UseOpenMergeRecordsPageInCommandMenuProps) => {
+}: UseOpenMergeRecordsPageInSidePanelProps) => {
const store = useStore();
const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular,
});
- const { navigateCommandMenu } = useNavigateCommandMenu();
- const { updateCommandMenuNavigationMorphItemsByPage } =
- useCommandMenuUpdateNavigationMorphItemsByPage();
+ const { navigateSidePanel } = useNavigateSidePanel();
+ const { updateSidePanelNavigationMorphItemsByPage } =
+ useSidePanelUpdateNavigationMorphItemsByPage();
const { upsertRecordsInStore } = useUpsertRecordsInStore();
@@ -41,7 +41,7 @@ export const useOpenMergeRecordsPageInCommandMenu = ({
},
});
- const openMergeRecordsPageInCommandMenu = useCallback(async () => {
+ const openMergeRecordsPageInSidePanel = useCallback(async () => {
const pageId = v4();
store.set(
@@ -51,7 +51,7 @@ export const useOpenMergeRecordsPageInCommandMenu = ({
objectMetadataItem.id,
);
- await updateCommandMenuNavigationMorphItemsByPage({
+ await updateSidePanelNavigationMorphItemsByPage({
pageId,
objectMetadataId: objectMetadataItem.id,
objectRecordIds,
@@ -59,8 +59,8 @@ export const useOpenMergeRecordsPageInCommandMenu = ({
const { records } = await findManyRecordsLazy();
upsertRecordsInStore({ partialRecords: records ?? [] });
- navigateCommandMenu({
- page: CommandMenuPages.MergeRecords,
+ navigateSidePanel({
+ page: SidePanelPages.MergeRecords,
pageTitle: t(msg`Merge records`),
pageIcon: IconArrowMerge,
pageId,
@@ -70,12 +70,12 @@ export const useOpenMergeRecordsPageInCommandMenu = ({
objectRecordIds,
findManyRecordsLazy,
upsertRecordsInStore,
- navigateCommandMenu,
- updateCommandMenuNavigationMorphItemsByPage,
+ navigateSidePanel,
+ updateSidePanelNavigationMorphItemsByPage,
store,
]);
return {
- openMergeRecordsPageInCommandMenu,
+ openMergeRecordsPageInSidePanel,
};
};
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordInCommandMenu.ts b/packages/twenty-front/src/modules/side-panel/hooks/useOpenRecordInSidePanel.ts
similarity index 79%
rename from packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordInCommandMenu.ts
rename to packages/twenty-front/src/modules/side-panel/hooks/useOpenRecordInSidePanel.ts
index e8317465b6..4dd533e6b7 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordInCommandMenu.ts
+++ b/packages/twenty-front/src/modules/side-panel/hooks/useOpenRecordInSidePanel.ts
@@ -1,8 +1,8 @@
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
-import { viewableRecordNameSingularComponentState } from '@/command-menu/pages/record-page/states/viewableRecordNameSingularComponentState';
-import { commandMenuNavigationMorphItemsByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsByPageState';
-import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { viewableRecordIdComponentState } from '@/side-panel/pages/record-page/states/viewableRecordIdComponentState';
+import { viewableRecordNameSingularComponentState } from '@/side-panel/pages/record-page/states/viewableRecordNameSingularComponentState';
+import { sidePanelNavigationMorphItemsByPageState } from '@/side-panel/states/sidePanelNavigationMorphItemsByPageState';
+import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState';
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
@@ -14,11 +14,11 @@ import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType
import { objectMetadataItemFamilySelector } from '@/object-metadata/states/objectMetadataItemFamilySelector';
import { getIconColorForObjectType } from '@/object-metadata/utils/getIconColorForObjectType';
import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
-import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
+import { viewableRecordIdState } from '@/object-record/record-side-panel/states/viewableRecordIdState';
import { useOpenNewRecordTitleCell } from '@/object-record/record-title-cell/hooks/useOpenNewRecordTitleCell';
-import { CommandMenuPages, CoreObjectNameSingular } from 'twenty-shared/types';
+import { CoreObjectNameSingular, SidePanelPages } from 'twenty-shared/types';
-import { useRunWorkflowRunOpeningInCommandMenuSideEffects } from '@/workflow/hooks/useRunWorkflowRunOpeningInCommandMenuSideEffects';
+import { useRunWorkflowRunOpeningInSidePanelEffects } from '@/workflow/hooks/useRunWorkflowRunOpeningInSidePanelEffects';
import { t } from '@lingui/core/macro';
import { useStore } from 'jotai';
import { useCallback } from 'react';
@@ -26,16 +26,16 @@ import { isDefined } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui/display';
import { v4 } from 'uuid';
-export const useOpenRecordInCommandMenu = () => {
+export const useOpenRecordInSidePanel = () => {
const store = useStore();
const { getIcon } = useIcons();
- const { navigateCommandMenu } = useCommandMenu();
- const { runWorkflowRunOpeningInCommandMenuSideEffects } =
- useRunWorkflowRunOpeningInCommandMenuSideEffects();
+ const { navigateSidePanelMenu } = useSidePanelMenu();
+ const { runWorkflowRunOpeningInSidePanelEffects } =
+ useRunWorkflowRunOpeningInSidePanelEffects();
const { openNewRecordTitleCell } = useOpenNewRecordTitleCell();
- const openRecordInCommandMenu = useCallback(
+ const openRecordInSidePanel = useCallback(
({
recordId,
objectNameSingular,
@@ -47,7 +47,7 @@ export const useOpenRecordInCommandMenu = () => {
isNewRecord?: boolean;
resetNavigationStack?: boolean;
}) => {
- const navigationStack = store.get(commandMenuNavigationStackState.atom);
+ const navigationStack = store.get(sidePanelNavigationStackState.atom);
const currentNavigationStackItem = navigationStack.at(-1);
@@ -146,7 +146,7 @@ export const useOpenRecordInCommandMenu = () => {
);
const currentMorphItems = store.get(
- commandMenuNavigationMorphItemsByPageState.atom,
+ sidePanelNavigationMorphItemsByPageState.atom,
);
const morphItemToAdd = {
@@ -158,7 +158,7 @@ export const useOpenRecordInCommandMenu = () => {
newMorphItemsMap.set(pageComponentInstanceId, [morphItemToAdd]);
store.set(
- commandMenuNavigationMorphItemsByPageState.atom,
+ sidePanelNavigationMorphItemsByPageState.atom,
newMorphItemsMap,
);
@@ -172,8 +172,8 @@ export const useOpenRecordInCommandMenu = () => {
const objectLabelSingular = objectMetadataItem.labelSingular;
- navigateCommandMenu({
- page: CommandMenuPages.ViewRecord,
+ navigateSidePanelMenu({
+ page: SidePanelPages.ViewRecord,
pageTitle: isNewRecord
? t`New ${objectLabelSingular}`
: objectLabelSingular,
@@ -184,7 +184,7 @@ export const useOpenRecordInCommandMenu = () => {
});
if (objectNameSingular === CoreObjectNameSingular.WorkflowRun) {
- runWorkflowRunOpeningInCommandMenuSideEffects({
+ runWorkflowRunOpeningInSidePanelEffects({
objectMetadataItem,
recordId,
});
@@ -204,14 +204,14 @@ export const useOpenRecordInCommandMenu = () => {
},
[
getIcon,
- navigateCommandMenu,
+ navigateSidePanelMenu,
openNewRecordTitleCell,
- runWorkflowRunOpeningInCommandMenuSideEffects,
+ runWorkflowRunOpeningInSidePanelEffects,
store,
],
);
return {
- openRecordInCommandMenu,
+ openRecordInSidePanel,
};
};
diff --git a/packages/twenty-front/src/modules/side-panel/hooks/useOpenRecordsSearchPageInSidePanel.ts b/packages/twenty-front/src/modules/side-panel/hooks/useOpenRecordsSearchPageInSidePanel.ts
new file mode 100644
index 0000000000..2c5d43f0c0
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/hooks/useOpenRecordsSearchPageInSidePanel.ts
@@ -0,0 +1,26 @@
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState';
+import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
+import { t } from '@lingui/core/macro';
+import { SidePanelPages } from 'twenty-shared/types';
+import { IconSearch } from 'twenty-ui/display';
+import { v4 } from 'uuid';
+
+export const useOpenRecordsSearchPageInSidePanel = () => {
+ const { navigateSidePanelMenu } = useSidePanelMenu();
+ const isSidePanelOpened = useAtomStateValue(isSidePanelOpenedState);
+
+ const openRecordsSearchPage = () => {
+ navigateSidePanelMenu({
+ page: SidePanelPages.SearchRecords,
+ pageTitle: t`Search`,
+ pageIcon: IconSearch,
+ pageId: v4(),
+ resetNavigationStack: isSidePanelOpened,
+ });
+ };
+
+ return {
+ openRecordsSearchPage,
+ };
+};
diff --git a/packages/twenty-front/src/modules/side-panel/hooks/useOpenRichTextInSidePanel.ts b/packages/twenty-front/src/modules/side-panel/hooks/useOpenRichTextInSidePanel.ts
new file mode 100644
index 0000000000..83984f90e1
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/hooks/useOpenRichTextInSidePanel.ts
@@ -0,0 +1,34 @@
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { viewableRichTextComponentState } from '@/side-panel/pages/rich-text-page/states/viewableRichTextComponentState';
+import { t } from '@lingui/core/macro';
+import { useStore } from 'jotai';
+import { useCallback } from 'react';
+import { SidePanelPages } from 'twenty-shared/types';
+import { IconPencil } from 'twenty-ui/display';
+
+export const useOpenRichTextInSidePanel = () => {
+ const { navigateSidePanelMenu, openSidePanelMenu } = useSidePanelMenu();
+
+ const store = useStore();
+
+ const openRichTextInSidePanel = useCallback(
+ (activityId: string, activityObjectNameSingular: string) => {
+ store.set(viewableRichTextComponentState.atom, {
+ activityId,
+ activityObjectNameSingular,
+ });
+
+ openSidePanelMenu();
+ navigateSidePanelMenu({
+ page: SidePanelPages.EditRichText,
+ pageTitle: t`Rich Text`,
+ pageIcon: IconPencil,
+ });
+ },
+ [navigateSidePanelMenu, openSidePanelMenu, store],
+ );
+
+ return {
+ openRichTextInSidePanel,
+ };
+};
diff --git a/packages/twenty-front/src/modules/side-panel/hooks/useOpenUpdateMultipleRecordsPageInSidePanel.tsx b/packages/twenty-front/src/modules/side-panel/hooks/useOpenUpdateMultipleRecordsPageInSidePanel.tsx
new file mode 100644
index 0000000000..041cc83831
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/hooks/useOpenUpdateMultipleRecordsPageInSidePanel.tsx
@@ -0,0 +1,29 @@
+import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
+import { SidePanelPages } from 'twenty-shared/types';
+
+import { msg, t } from '@lingui/core/macro';
+import { useCallback } from 'react';
+import { IconBoxMultiple } from 'twenty-ui/display';
+
+type UseOpenUpdateMultipleRecordsPageInSidePanelProps = {
+ contextStoreInstanceId: string;
+};
+
+export const useOpenUpdateMultipleRecordsPageInSidePanel = ({
+ contextStoreInstanceId,
+}: UseOpenUpdateMultipleRecordsPageInSidePanelProps) => {
+ const { navigateSidePanel } = useNavigateSidePanel();
+
+ const openUpdateMultipleRecordsPageInSidePanel = useCallback(async () => {
+ navigateSidePanel({
+ page: SidePanelPages.UpdateRecords,
+ pageTitle: t(msg`Update records`),
+ pageIcon: IconBoxMultiple,
+ pageId: contextStoreInstanceId,
+ });
+ }, [navigateSidePanel, contextStoreInstanceId]);
+
+ return {
+ openUpdateMultipleRecordsPageInSidePanel,
+ };
+};
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuCloseAnimationCompleteCleanup.ts b/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelCloseAnimationCompleteCleanup.ts
similarity index 58%
rename from packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuCloseAnimationCompleteCleanup.ts
rename to packages/twenty-front/src/modules/side-panel/hooks/useSidePanelCloseAnimationCompleteCleanup.ts
index 226ecfcf0f..c6660de1c1 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuCloseAnimationCompleteCleanup.ts
+++ b/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelCloseAnimationCompleteCleanup.ts
@@ -1,24 +1,24 @@
-import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId';
-import { COMMAND_MENU_CONTEXT_CHIP_GROUPS_DROPDOWN_ID } from '@/command-menu/constants/CommandMenuContextChipGroupsDropdownId';
-import { COMMAND_MENU_LIST_SELECTABLE_LIST_ID } from '@/command-menu/constants/CommandMenuListSelectableListId';
-import { COMMAND_MENU_PREVIOUS_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuPreviousComponentInstanceId';
+import { SIDE_PANEL_COMPONENT_INSTANCE_ID } from '@/side-panel/constants/SidePanelComponentInstanceId';
+import { SIDE_PANEL_CONTEXT_CHIP_GROUPS_DROPDOWN_ID } from '@/side-panel/constants/SidePanelContextChipGroupsDropdownId';
+import { SIDE_PANEL_SELECTABLE_LIST_ID } from '@/side-panel/constants/SidePanelSelectableListId';
+import { SIDE_PANEL_PREVIOUS_COMPONENT_INSTANCE_ID } from '@/side-panel/constants/SidePanelPreviousComponentInstanceId';
import { useResetContextStoreStates } from '@/command-menu/hooks/useResetContextStoreStates';
-import { commandMenuNavigationMorphItemsByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsByPageState';
-import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
-import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
-import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
-import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
-import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelectedCommandState';
-import { isCommandMenuClosingState } from '@/command-menu/states/isCommandMenuClosingState';
-import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
+import { sidePanelNavigationMorphItemsByPageState } from '@/side-panel/states/sidePanelNavigationMorphItemsByPageState';
+import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState';
+import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState';
+import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
+import { sidePanelSearchState } from '@/side-panel/states/sidePanelSearchState';
+import { hasUserSelectedSidePanelListItemState } from '@/side-panel/states/hasUserSelectedSidePanelListItemState';
+import { isSidePanelClosingState } from '@/side-panel/states/isSidePanelClosingState';
+import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState';
import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
-import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
+import { viewableRecordIdState } from '@/object-record/record-side-panel/states/viewableRecordIdState';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLayoutDraggedAreaComponentState';
import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/states/pageLayoutTabSettingsOpenTabIdComponentState';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
-import { emitSidePanelCloseEvent } from '@/ui/layout/right-drawer/utils/emitSidePanelCloseEvent';
+import { emitSidePanelCloseEvent } from '@/ui/layout/side-panel/utils/emitSidePanelCloseEvent';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { getShowPageTabListComponentId } from '@/ui/layout/show-page/utils/getShowPageTabListComponentId';
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
@@ -26,43 +26,43 @@ import { WORKFLOW_LOGIC_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/workflow/workfl
import { WorkflowLogicFunctionTabId } from '@/workflow/workflow-steps/workflow-actions/code-action/types/WorkflowLogicFunctionTabId';
import { useStore } from 'jotai';
import { useCallback } from 'react';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
-export const useCommandMenuCloseAnimationCompleteCleanup = () => {
+export const useSidePanelCloseAnimationCompleteCleanup = () => {
const store = useStore();
const { resetSelectedItem } = useSelectableList(
- COMMAND_MENU_LIST_SELECTABLE_LIST_ID,
+ SIDE_PANEL_SELECTABLE_LIST_ID,
);
const { resetContextStoreStates } = useResetContextStoreStates();
const { closeDropdown } = useCloseDropdown();
- const commandMenuCloseAnimationCompleteCleanup = useCallback(
+ const sidePanelCloseAnimationCompleteCleanup = useCallback(
(options?: { emitSidePanelCloseEvent?: boolean }) => {
- closeDropdown(COMMAND_MENU_CONTEXT_CHIP_GROUPS_DROPDOWN_ID);
+ closeDropdown(SIDE_PANEL_CONTEXT_CHIP_GROUPS_DROPDOWN_ID);
// Snapshot values before any mutations (Jotai store.get is live and
// reflects the latest state, so we capture before mutating).
- const currentPage = store.get(commandMenuPageState.atom);
+ const currentPage = store.get(sidePanelPageState.atom);
const targetedRecordsRule = store.get(
contextStoreTargetedRecordsRuleComponentState.atomFamily({
- instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID,
+ instanceId: SIDE_PANEL_COMPONENT_INSTANCE_ID,
}),
);
const morphItemsByPage = store.get(
- commandMenuNavigationMorphItemsByPageState.atom,
+ sidePanelNavigationMorphItemsByPageState.atom,
);
- resetContextStoreStates(COMMAND_MENU_COMPONENT_INSTANCE_ID);
- resetContextStoreStates(COMMAND_MENU_PREVIOUS_COMPONENT_INSTANCE_ID);
+ resetContextStoreStates(SIDE_PANEL_COMPONENT_INSTANCE_ID);
+ resetContextStoreStates(SIDE_PANEL_PREVIOUS_COMPONENT_INSTANCE_ID);
const isPageLayoutEditingPage =
- currentPage === CommandMenuPages.PageLayoutWidgetTypeSelect ||
- currentPage === CommandMenuPages.PageLayoutGraphTypeSelect ||
- currentPage === CommandMenuPages.PageLayoutIframeSettings ||
- currentPage === CommandMenuPages.PageLayoutTabSettings;
+ currentPage === SidePanelPages.PageLayoutWidgetTypeSelect ||
+ currentPage === SidePanelPages.PageLayoutGraphTypeSelect ||
+ currentPage === SidePanelPages.PageLayoutIframeSettings ||
+ currentPage === SidePanelPages.PageLayoutTabSettings;
if (isPageLayoutEditingPage) {
if (
@@ -96,23 +96,23 @@ export const useCommandMenuCloseAnimationCompleteCleanup = () => {
}
store.set(viewableRecordIdState.atom, null);
- store.set(commandMenuPageState.atom, CommandMenuPages.Root);
- store.set(commandMenuPageInfoState.atom, {
+ store.set(sidePanelPageState.atom, SidePanelPages.Root);
+ store.set(sidePanelPageInfoState.atom, {
title: undefined,
Icon: undefined,
instanceId: '',
});
- store.set(isCommandMenuOpenedState.atom, false);
- store.set(commandMenuSearchState.atom, '');
- store.set(commandMenuNavigationMorphItemsByPageState.atom, new Map());
- store.set(commandMenuNavigationStackState.atom, []);
+ store.set(isSidePanelOpenedState.atom, false);
+ store.set(sidePanelSearchState.atom, '');
+ store.set(sidePanelNavigationMorphItemsByPageState.atom, new Map());
+ store.set(sidePanelNavigationStackState.atom, []);
resetSelectedItem();
- store.set(hasUserSelectedCommandState.atom, false);
+ store.set(hasUserSelectedSidePanelListItemState.atom, false);
if (options?.emitSidePanelCloseEvent !== false) {
emitSidePanelCloseEvent();
}
- store.set(isCommandMenuClosingState.atom, false);
+ store.set(isSidePanelClosingState.atom, false);
store.set(
activeTabIdComponentState.atomFamily({
instanceId: WORKFLOW_LOGIC_FUNCTION_TAB_LIST_COMPONENT_ID,
@@ -136,6 +136,6 @@ export const useCommandMenuCloseAnimationCompleteCleanup = () => {
);
return {
- commandMenuCloseAnimationCompleteCleanup,
+ sidePanelCloseAnimationCompleteCleanup,
};
};
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuContextChips.tsx b/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelContextChips.tsx
similarity index 60%
rename from packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuContextChips.tsx
rename to packages/twenty-front/src/modules/side-panel/hooks/useSidePanelContextChips.tsx
index 5a06000519..933bdb64fd 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuContextChips.tsx
+++ b/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelContextChips.tsx
@@ -1,8 +1,8 @@
-import { CommandMenuContextChipIconWrapper } from '@/command-menu/components/CommandMenuContextChipIconWrapper';
-import { CommandMenuContextRecordChipAvatars } from '@/command-menu/components/CommandMenuContextRecordChipAvatars';
-import { useCommandMenuHistory } from '@/command-menu/hooks/useCommandMenuHistory';
-import { commandMenuNavigationMorphItemsByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsByPageState';
-import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
+import { SidePanelContextChipIconWrapper } from '@/side-panel/components/SidePanelContextChipIconWrapper';
+import { SidePanelContextRecordChipAvatars } from '@/side-panel/components/SidePanelContextRecordChipAvatars';
+import { useSidePanelHistory } from '@/side-panel/hooks/useSidePanelHistory';
+import { sidePanelNavigationMorphItemsByPageState } from '@/side-panel/states/sidePanelNavigationMorphItemsByPageState';
+import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState';
import { allowRequestsToTwentyIconsState } from '@/client-config/states/allowRequestsToTwentyIcons';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { recordStoreIdentifiersFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreIdentifiersSelector';
@@ -10,15 +10,15 @@ import { recordStoreRecordsSelector } from '@/object-record/record-store/states/
import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useContext, useMemo } from 'react';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
-export const useCommandMenuContextChips = () => {
+export const useSidePanelContextChips = () => {
const { theme } = useContext(ThemeContext);
const iconSizeSm = theme.icon.size.sm;
- const commandMenuNavigationStack = useAtomStateValue(
- commandMenuNavigationStackState,
+ const sidePanelNavigationStack = useAtomStateValue(
+ sidePanelNavigationStackState,
);
const allowRequestsToTwentyIcons = useAtomStateValue(
@@ -27,14 +27,14 @@ export const useCommandMenuContextChips = () => {
const objectMetadataItems = useAtomStateValue(objectMetadataItemsState);
- const { navigateCommandMenuHistory } = useCommandMenuHistory();
+ const { navigateSidePanelHistory } = useSidePanelHistory();
- const commandMenuNavigationMorphItemsByPage = useAtomStateValue(
- commandMenuNavigationMorphItemsByPageState,
+ const sidePanelNavigationMorphItemsByPage = useAtomStateValue(
+ sidePanelNavigationMorphItemsByPageState,
);
const allRecordIds = Array.from(
- commandMenuNavigationMorphItemsByPage.entries(),
+ sidePanelNavigationMorphItemsByPage.entries(),
).flatMap(([, morphItems]) =>
morphItems.map((morphItem) => morphItem.recordId),
);
@@ -51,38 +51,36 @@ export const useCommandMenuContextChips = () => {
});
const contextChips = useMemo(() => {
- const filteredCommandMenuNavigationStack =
- commandMenuNavigationStack.filter(
- (page) => page.page !== CommandMenuPages.Root,
- );
+ const filteredSidePanelNavigationStack = sidePanelNavigationStack.filter(
+ (page) => page.page !== SidePanelPages.Root,
+ );
- return filteredCommandMenuNavigationStack
+ return filteredSidePanelNavigationStack
.map((page, index) => {
const isLastChip =
- index === filteredCommandMenuNavigationStack.length - 1;
+ index === filteredSidePanelNavigationStack.length - 1;
- const isRecordPage = page.page === CommandMenuPages.ViewRecord;
+ const isRecordPage = page.page === SidePanelPages.ViewRecord;
if (isRecordPage && !isLastChip) {
- const commandMenuNavigationMorphItem =
- commandMenuNavigationMorphItemsByPage.get(page.pageId)?.[0];
+ const sidePanelNavigationMorphItem =
+ sidePanelNavigationMorphItemsByPage.get(page.pageId)?.[0];
- if (!isDefined(commandMenuNavigationMorphItem?.recordId)) {
+ if (!isDefined(sidePanelNavigationMorphItem?.recordId)) {
return null;
}
const objectMetadataItem = objectMetadataItems.find(
- (item) =>
- item.id === commandMenuNavigationMorphItem.objectMetadataId,
+ (item) => item.id === sidePanelNavigationMorphItem.objectMetadataId,
);
const recordIdentifier = recordIdentifiers.find(
(recordIdentifier) =>
- recordIdentifier.id === commandMenuNavigationMorphItem.recordId,
+ recordIdentifier.id === sidePanelNavigationMorphItem.recordId,
);
const record = records.find(
- (record) => record.id === commandMenuNavigationMorphItem.recordId,
+ (record) => record.id === sidePanelNavigationMorphItem.recordId,
);
if (
@@ -96,14 +94,14 @@ export const useCommandMenuContextChips = () => {
return {
page,
Icons: [
- ,
],
text: recordIdentifier.name,
onClick: () => {
- navigateCommandMenuHistory(index);
+ navigateSidePanelHistory(index);
},
};
}
@@ -113,7 +111,7 @@ export const useCommandMenuContextChips = () => {
Icons: isLastChip
? []
: [
-
+
{
: themeCssVariables.font.color.tertiary
}
/>
- ,
+ ,
],
text: page.pageTitle,
onClick: isLastChip
? undefined
: () => {
- navigateCommandMenuHistory(index);
+ navigateSidePanelHistory(index);
},
};
})
.filter(isDefined);
}, [
- commandMenuNavigationMorphItemsByPage,
- commandMenuNavigationStack,
+ sidePanelNavigationMorphItemsByPage,
+ sidePanelNavigationStack,
+ navigateSidePanelHistory,
iconSizeSm,
- navigateCommandMenuHistory,
objectMetadataItems,
recordIdentifiers,
records,
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useFilteredPickerItems.ts b/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelFilteredPickerItems.ts
similarity index 75%
rename from packages/twenty-front/src/modules/command-menu/hooks/useFilteredPickerItems.ts
rename to packages/twenty-front/src/modules/side-panel/hooks/useSidePanelFilteredPickerItems.ts
index 78e82cf5c7..bf672c8e60 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useFilteredPickerItems.ts
+++ b/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelFilteredPickerItems.ts
@@ -1,25 +1,25 @@
import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
-type UseFilteredPickerItemsParams = {
+type UseSidePanelFilteredPickerItemsParams = {
items: T[];
searchQuery: string;
getSearchableValues: (item: T) => string[];
appendSelectableIds?: string[];
};
-type UseFilteredPickerItemsResult = {
+type UseSidePanelFilteredPickerItemsResult = {
filteredItems: T[];
selectableItemIds: string[];
isEmpty: boolean;
hasSearchQuery: boolean;
};
-export const useFilteredPickerItems = ({
+export const useSidePanelFilteredPickerItems = ({
items,
searchQuery,
getSearchableValues,
appendSelectableIds = [],
-}: UseFilteredPickerItemsParams): UseFilteredPickerItemsResult => {
+}: UseSidePanelFilteredPickerItemsParams): UseSidePanelFilteredPickerItemsResult => {
const filteredItems = filterBySearchQuery({
items,
searchQuery,
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuHistory.ts b/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelHistory.ts
similarity index 60%
rename from packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuHistory.ts
rename to packages/twenty-front/src/modules/side-panel/hooks/useSidePanelHistory.ts
index 1a19471e2f..b8b31a77df 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuHistory.ts
+++ b/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelHistory.ts
@@ -1,46 +1,46 @@
import { useCallback } from 'react';
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { commandMenuNavigationMorphItemsByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsByPageState';
-import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
-import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
-import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
-import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelectedCommandState';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { sidePanelNavigationMorphItemsByPageState } from '@/side-panel/states/sidePanelNavigationMorphItemsByPageState';
+import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState';
+import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState';
+import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
+import { hasUserSelectedSidePanelListItemState } from '@/side-panel/states/hasUserSelectedSidePanelListItemState';
import { getShowPageTabListComponentId } from '@/ui/layout/show-page/utils/getShowPageTabListComponentId';
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
import { isNonEmptyArray } from '@sniptt/guards';
import { isDefined } from 'twenty-shared/utils';
import { useStore } from 'jotai';
-export const useCommandMenuHistory = () => {
+export const useSidePanelHistory = () => {
const store = useStore();
- const { closeCommandMenu } = useCommandMenu();
+ const { closeSidePanelMenu } = useSidePanelMenu();
- const goBackFromCommandMenu = useCallback(() => {
+ const goBackFromSidePanel = useCallback(() => {
const currentNavigationStack = store.get(
- commandMenuNavigationStackState.atom,
+ sidePanelNavigationStackState.atom,
);
const newNavigationStack = currentNavigationStack.slice(0, -1);
const lastNavigationStackItem = newNavigationStack.at(-1);
if (!isDefined(lastNavigationStackItem)) {
- closeCommandMenu();
+ closeSidePanelMenu();
return;
}
- store.set(commandMenuPageState.atom, lastNavigationStackItem.page);
+ store.set(sidePanelPageState.atom, lastNavigationStackItem.page);
- store.set(commandMenuPageInfoState.atom, {
+ store.set(sidePanelPageInfoState.atom, {
title: lastNavigationStackItem.pageTitle,
Icon: lastNavigationStackItem.pageIcon,
instanceId: lastNavigationStackItem.pageId,
});
- store.set(commandMenuNavigationStackState.atom, newNavigationStack);
+ store.set(sidePanelNavigationStackState.atom, newNavigationStack);
const currentMorphItems = store.get(
- commandMenuNavigationMorphItemsByPageState.atom,
+ sidePanelNavigationMorphItemsByPageState.atom,
);
if (currentNavigationStack.length > 0) {
@@ -49,10 +49,7 @@ export const useCommandMenuHistory = () => {
if (isDefined(removedItem)) {
const newMorphItems = new Map(currentMorphItems);
newMorphItems.delete(removedItem.pageId);
- store.set(
- commandMenuNavigationMorphItemsByPageState.atom,
- newMorphItems,
- );
+ store.set(sidePanelNavigationMorphItemsByPageState.atom, newMorphItems);
const morphItems = currentMorphItems.get(removedItem.pageId);
if (isNonEmptyArray(morphItems)) {
@@ -69,35 +66,35 @@ export const useCommandMenuHistory = () => {
}
}
- store.set(hasUserSelectedCommandState.atom, false);
- }, [closeCommandMenu, store]);
+ store.set(hasUserSelectedSidePanelListItemState.atom, false);
+ }, [closeSidePanelMenu, store]);
- const navigateCommandMenuHistory = useCallback(
+ const navigateSidePanelHistory = useCallback(
(pageIndex: number) => {
const currentNavigationStack = store.get(
- commandMenuNavigationStackState.atom,
+ sidePanelNavigationStackState.atom,
);
const newNavigationStack = currentNavigationStack.slice(0, pageIndex + 1);
- store.set(commandMenuNavigationStackState.atom, newNavigationStack);
+ store.set(sidePanelNavigationStackState.atom, newNavigationStack);
const newNavigationStackItem = newNavigationStack.at(-1);
if (!isDefined(newNavigationStackItem)) {
throw new Error(
- `No command menu navigation stack item found for index ${pageIndex}`,
+ `No side panel navigation stack item found for index ${pageIndex}`,
);
}
- store.set(commandMenuPageState.atom, newNavigationStackItem.page);
- store.set(commandMenuPageInfoState.atom, {
+ store.set(sidePanelPageState.atom, newNavigationStackItem.page);
+ store.set(sidePanelPageInfoState.atom, {
title: newNavigationStackItem.pageTitle,
Icon: newNavigationStackItem.pageIcon,
instanceId: newNavigationStackItem.pageId,
});
const currentMorphItems = store.get(
- commandMenuNavigationMorphItemsByPageState.atom,
+ sidePanelNavigationMorphItemsByPageState.atom,
);
for (const [pageId, morphItems] of currentMorphItems.entries()) {
@@ -120,15 +117,15 @@ export const useCommandMenuHistory = () => {
),
);
- store.set(commandMenuNavigationMorphItemsByPageState.atom, newMorphItems);
+ store.set(sidePanelNavigationMorphItemsByPageState.atom, newMorphItems);
- store.set(hasUserSelectedCommandState.atom, false);
+ store.set(hasUserSelectedSidePanelListItemState.atom, false);
},
[store],
);
return {
- goBackFromCommandMenu,
- navigateCommandMenuHistory,
+ goBackFromSidePanel,
+ navigateSidePanelHistory,
};
};
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts b/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelMenu.ts
similarity index 55%
rename from packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
rename to packages/twenty-front/src/modules/side-panel/hooks/useSidePanelMenu.ts
index ba81728d1a..c22b5d21f9 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
+++ b/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelMenu.ts
@@ -1,36 +1,36 @@
-import { SIDE_PANEL_FOCUS_ID } from '@/command-menu/constants/SidePanelFocusId';
-import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
-import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
-import { isCommandMenuClosingState } from '@/command-menu/states/isCommandMenuClosingState';
-import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
+import { SIDE_PANEL_FOCUS_ID } from '@/side-panel/constants/SidePanelFocusId';
+import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
+import { sidePanelSearchState } from '@/side-panel/states/sidePanelSearchState';
+import { isSidePanelClosingState } from '@/side-panel/states/isSidePanelClosingState';
+import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState';
import { addToNavPayloadRegistryState } from '@/navigation-menu-item/states/addToNavPayloadRegistryState';
import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/states/selectedNavigationMenuItemInEditModeState';
import { useCloseAnyOpenDropdown } from '@/ui/layout/dropdown/hooks/useCloseAnyOpenDropdown';
-import { emitSidePanelOpenEvent } from '@/ui/layout/right-drawer/utils/emitSidePanelOpenEvent';
+import { emitSidePanelOpenEvent } from '@/ui/layout/side-panel/utils/emitSidePanelOpenEvent';
import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
import { t } from '@lingui/core/macro';
import { useStore } from 'jotai';
import { useCallback } from 'react';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { IconColumnInsertRight, IconDotsVertical } from 'twenty-ui/display';
-export const useCommandMenu = () => {
+export const useSidePanelMenu = () => {
const store = useStore();
- const { navigateCommandMenu } = useNavigateCommandMenu();
+ const { navigateSidePanel } = useNavigateSidePanel();
const { closeAnyOpenDropdown } = useCloseAnyOpenDropdown();
const { removeFocusItemFromFocusStackById } =
useRemoveFocusItemFromFocusStackById();
- const closeCommandMenu = useCallback(() => {
- const isCommandMenuOpened = store.get(isCommandMenuOpenedState.atom);
+ const closeSidePanelMenu = useCallback(() => {
+ const isSidePanelOpened = store.get(isSidePanelOpenedState.atom);
- if (isCommandMenuOpened) {
+ if (isSidePanelOpened) {
store.set(addToNavPayloadRegistryState.atom, new Map());
- store.set(isCommandMenuOpenedState.atom, false);
- store.set(isCommandMenuClosingState.atom, true);
+ store.set(isSidePanelOpenedState.atom, false);
+ store.set(isSidePanelClosingState.atom, true);
closeAnyOpenDropdown();
removeFocusItemFromFocusStackById({
focusId: SIDE_PANEL_FOCUS_ID,
@@ -38,7 +38,7 @@ export const useCommandMenu = () => {
}
}, [closeAnyOpenDropdown, removeFocusItemFromFocusStackById, store]);
- const openCommandMenu = useCallback(() => {
+ const openSidePanelMenu = useCallback(() => {
emitSidePanelOpenEvent();
closeAnyOpenDropdown();
const isNavigationMenuInEditMode = store.get(
@@ -48,45 +48,47 @@ export const useCommandMenu = () => {
selectedNavigationMenuItemInEditModeState.atom,
);
if (isNavigationMenuInEditMode && isDefined(selectedNavigationItemId)) {
- navigateCommandMenu({
- page: CommandMenuPages.NavigationMenuItemEdit,
+ navigateSidePanel({
+ page: SidePanelPages.NavigationMenuItemEdit,
pageTitle: t`Edit`,
pageIcon: IconDotsVertical,
resetNavigationStack: true,
});
} else if (isNavigationMenuInEditMode) {
- navigateCommandMenu({
- page: CommandMenuPages.NavigationMenuAddItem,
+ navigateSidePanel({
+ page: SidePanelPages.NavigationMenuAddItem,
pageTitle: t`New sidebar item`,
pageIcon: IconColumnInsertRight,
resetNavigationStack: true,
});
} else {
- navigateCommandMenu({
- page: CommandMenuPages.Root,
+ navigateSidePanel({
+ page: SidePanelPages.Root,
pageTitle: t`Command Menu`,
pageIcon: IconDotsVertical,
resetNavigationStack: true,
});
}
- }, [closeAnyOpenDropdown, navigateCommandMenu, store]);
+ }, [closeAnyOpenDropdown, navigateSidePanel, store]);
- const toggleCommandMenu = useCallback(() => {
- const isCommandMenuOpened = store.get(isCommandMenuOpenedState.atom);
+ const navigateSidePanelMenu = navigateSidePanel;
- store.set(commandMenuSearchState.atom, '');
+ const toggleSidePanelMenu = useCallback(() => {
+ const isSidePanelOpened = store.get(isSidePanelOpenedState.atom);
- if (isCommandMenuOpened) {
- closeCommandMenu();
+ store.set(sidePanelSearchState.atom, '');
+
+ if (isSidePanelOpened) {
+ closeSidePanelMenu();
} else {
- openCommandMenu();
+ openSidePanelMenu();
}
- }, [closeCommandMenu, openCommandMenu, store]);
+ }, [closeSidePanelMenu, openSidePanelMenu, store]);
return {
- openCommandMenu,
- closeCommandMenu,
- navigateCommandMenu,
- toggleCommandMenu,
+ openSidePanelMenu,
+ closeSidePanelMenu,
+ navigateSidePanelMenu,
+ toggleSidePanelMenu,
};
};
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuUpdateNavigationMorphItemsByPage.tsx b/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelUpdateNavigationMorphItemsByPage.tsx
similarity index 63%
rename from packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuUpdateNavigationMorphItemsByPage.tsx
rename to packages/twenty-front/src/modules/side-panel/hooks/useSidePanelUpdateNavigationMorphItemsByPage.tsx
index 0b3043c6eb..0d8854deb1 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuUpdateNavigationMorphItemsByPage.tsx
+++ b/packages/twenty-front/src/modules/side-panel/hooks/useSidePanelUpdateNavigationMorphItemsByPage.tsx
@@ -1,4 +1,4 @@
-import { commandMenuNavigationMorphItemsByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsByPageState';
+import { sidePanelNavigationMorphItemsByPageState } from '@/side-panel/states/sidePanelNavigationMorphItemsByPageState';
import { useCallback } from 'react';
import { useStore } from 'jotai';
@@ -8,16 +8,16 @@ type UpdateNavigationMorphItemsByPageParams = {
objectRecordIds: string[];
};
-export const useCommandMenuUpdateNavigationMorphItemsByPage = () => {
+export const useSidePanelUpdateNavigationMorphItemsByPage = () => {
const store = useStore();
- const updateCommandMenuNavigationMorphItemsByPage = useCallback(
+ const updateSidePanelNavigationMorphItemsByPage = useCallback(
async ({
pageId,
objectMetadataId,
objectRecordIds,
}: UpdateNavigationMorphItemsByPageParams) => {
const currentMorphItems = store.get(
- commandMenuNavigationMorphItemsByPageState.atom,
+ sidePanelNavigationMorphItemsByPageState.atom,
);
const newMorphItems = objectRecordIds.map((recordId) => ({
@@ -28,7 +28,7 @@ export const useCommandMenuUpdateNavigationMorphItemsByPage = () => {
const newMorphItemsMap = new Map(currentMorphItems);
newMorphItemsMap.set(pageId, newMorphItems);
store.set(
- commandMenuNavigationMorphItemsByPageState.atom,
+ sidePanelNavigationMorphItemsByPageState.atom,
newMorphItemsMap,
);
},
@@ -36,6 +36,6 @@ export const useCommandMenuUpdateNavigationMorphItemsByPage = () => {
);
return {
- updateCommandMenuNavigationMorphItemsByPage,
+ updateSidePanelNavigationMorphItemsByPage,
};
};
diff --git a/packages/twenty-front/src/modules/side-panel/hooks/useUpdateSidePanelPageInfo.ts b/packages/twenty-front/src/modules/side-panel/hooks/useUpdateSidePanelPageInfo.ts
new file mode 100644
index 0000000000..333169d857
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/hooks/useUpdateSidePanelPageInfo.ts
@@ -0,0 +1,58 @@
+import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState';
+import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState';
+import { useCallback } from 'react';
+import { type IconComponent, IconDotsVertical } from 'twenty-ui/display';
+import { useStore } from 'jotai';
+
+export const useUpdateSidePanelPageInfo = () => {
+ const store = useStore();
+ const updateSidePanelPageInfo = useCallback(
+ ({
+ pageTitle,
+ pageIcon,
+ }: {
+ pageTitle?: string;
+ pageIcon?: IconComponent;
+ }) => {
+ const sidePanelPageInfo = store.get(sidePanelPageInfoState.atom);
+
+ const newSidePanelPageInfo = {
+ ...sidePanelPageInfo,
+ title: pageTitle ?? sidePanelPageInfo.title ?? '',
+ Icon: pageIcon ?? sidePanelPageInfo.Icon ?? IconDotsVertical,
+ };
+
+ store.set(sidePanelPageInfoState.atom, newSidePanelPageInfo);
+
+ const sidePanelNavigationStack = store.get(
+ sidePanelNavigationStackState.atom,
+ );
+
+ const lastSidePanelNavigationStackItem = sidePanelNavigationStack.at(-1);
+
+ if (!lastSidePanelNavigationStackItem) {
+ return;
+ }
+
+ const newSidePanelNavigationStack = [
+ ...sidePanelNavigationStack.slice(0, -1),
+ {
+ page: lastSidePanelNavigationStackItem.page,
+ pageTitle: newSidePanelPageInfo.title,
+ pageIcon: newSidePanelPageInfo.Icon,
+ pageId: lastSidePanelNavigationStackItem.pageId,
+ },
+ ];
+
+ store.set(
+ sidePanelNavigationStackState.atom,
+ newSidePanelNavigationStack,
+ );
+ },
+ [store],
+ );
+
+ return {
+ updateSidePanelPageInfo,
+ };
+};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/AIChatThreads/components/CommandMenuAIChatThreadsPage.tsx b/packages/twenty-front/src/modules/side-panel/pages/AIChatThreads/components/SidePanelAIChatThreadsPage.tsx
similarity index 84%
rename from packages/twenty-front/src/modules/command-menu/pages/AIChatThreads/components/CommandMenuAIChatThreadsPage.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/AIChatThreads/components/SidePanelAIChatThreadsPage.tsx
index cee799f3ae..ee0e47ee01 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/AIChatThreads/components/CommandMenuAIChatThreadsPage.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/AIChatThreads/components/SidePanelAIChatThreadsPage.tsx
@@ -6,7 +6,7 @@ const StyledContainer = styled.div`
width: 100%;
`;
-export const CommandMenuAIChatThreadsPage = () => {
+export const SidePanelAIChatThreadsPage = () => {
return (
diff --git a/packages/twenty-front/src/modules/command-menu/pages/ask-ai/components/CommandMenuAskAIPage.tsx b/packages/twenty-front/src/modules/side-panel/pages/ask-ai/components/SidePanelAskAIPage.tsx
similarity index 85%
rename from packages/twenty-front/src/modules/command-menu/pages/ask-ai/components/CommandMenuAskAIPage.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/ask-ai/components/SidePanelAskAIPage.tsx
index e5cd9b68ca..ae14d1c1e8 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/ask-ai/components/CommandMenuAskAIPage.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/ask-ai/components/SidePanelAskAIPage.tsx
@@ -6,7 +6,7 @@ const StyledContainer = styled.div`
width: 100%;
`;
-export const CommandMenuAskAIPage = () => {
+export const SidePanelAskAIPage = () => {
return (
diff --git a/packages/twenty-front/src/modules/command-menu/pages/calendar-event/components/CommandMenuCalendarEventPage.tsx b/packages/twenty-front/src/modules/side-panel/pages/calendar-event/components/SidePanelCalendarEventPage.tsx
similarity index 92%
rename from packages/twenty-front/src/modules/command-menu/pages/calendar-event/components/CommandMenuCalendarEventPage.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/calendar-event/components/SidePanelCalendarEventPage.tsx
index 084c338491..a1d630abd2 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/calendar-event/components/CommandMenuCalendarEventPage.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/calendar-event/components/SidePanelCalendarEventPage.tsx
@@ -1,7 +1,7 @@
import { CalendarEventDetails } from '@/activities/calendar/components/CalendarEventDetails';
import { CalendarEventDetailsEffect } from '@/activities/calendar/components/CalendarEventDetailsEffect';
import { type CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
-import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
+import { viewableRecordIdComponentState } from '@/side-panel/pages/record-page/states/viewableRecordIdComponentState';
import { CoreObjectNameSingular } from 'twenty-shared/types';
import { useGenerateDepthRecordGqlFieldsFromObject } from '@/object-record/graphql/record-gql-fields/hooks/useGenerateDepthRecordGqlFieldsFromObject';
import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
@@ -10,7 +10,7 @@ import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingCon
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { PageLayoutType } from '~/generated-metadata/graphql';
-export const CommandMenuCalendarEventPage = () => {
+export const SidePanelCalendarEventPage = () => {
const { upsertRecordsInStore } = useUpsertRecordsInStore();
const viewableRecordId = useAtomComponentStateValue(
viewableRecordIdComponentState,
@@ -59,7 +59,7 @@ export const CommandMenuCalendarEventPage = () => {
targetObjectNameSingular: CoreObjectNameSingular.CalendarEvent,
},
layoutType: PageLayoutType.RECORD_PAGE,
- isInRightDrawer: true,
+ isInSidePanel: true,
}}
>
diff --git a/packages/twenty-front/src/modules/command-menu/pages/common/components/SidePanelSubPageNavigationHeader.tsx b/packages/twenty-front/src/modules/side-panel/pages/common/components/SidePanelSubPageNavigationHeader.tsx
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/common/components/SidePanelSubPageNavigationHeader.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/common/components/SidePanelSubPageNavigationHeader.tsx
diff --git a/packages/twenty-front/src/modules/command-menu/pages/front-component/components/CommandMenuFrontComponentPage.tsx b/packages/twenty-front/src/modules/side-panel/pages/front-component/components/SidePanelFrontComponentPage.tsx
similarity index 82%
rename from packages/twenty-front/src/modules/command-menu/pages/front-component/components/CommandMenuFrontComponentPage.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/front-component/components/SidePanelFrontComponentPage.tsx
index f96c947649..87e3f6788f 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/front-component/components/CommandMenuFrontComponentPage.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/front-component/components/SidePanelFrontComponentPage.tsx
@@ -1,7 +1,7 @@
import { Suspense, lazy } from 'react';
-import { viewableFrontComponentIdComponentState } from '@/command-menu/pages/front-component/states/viewableFrontComponentIdComponentState';
-import { viewableFrontComponentRecordContextComponentState } from '@/command-menu/pages/front-component/states/viewableFrontComponentRecordContextComponentState';
+import { viewableFrontComponentIdComponentState } from '@/side-panel/pages/front-component/states/viewableFrontComponentIdComponentState';
+import { viewableFrontComponentRecordContextComponentState } from '@/side-panel/pages/front-component/states/viewableFrontComponentRecordContextComponentState';
import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingContext';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { isDefined } from 'twenty-shared/utils';
@@ -13,7 +13,7 @@ const FrontComponentRenderer = lazy(() =>
),
);
-export const CommandMenuFrontComponentPage = () => {
+export const SidePanelFrontComponentPage = () => {
const viewableFrontComponentId = useAtomComponentStateValue(
viewableFrontComponentIdComponentState,
);
@@ -37,7 +37,7 @@ export const CommandMenuFrontComponentPage = () => {
}
: undefined,
layoutType: PageLayoutType.DASHBOARD,
- isInRightDrawer: true,
+ isInSidePanel: true,
}}
>
diff --git a/packages/twenty-front/src/modules/side-panel/pages/front-component/states/viewableFrontComponentIdComponentState.ts b/packages/twenty-front/src/modules/side-panel/pages/front-component/states/viewableFrontComponentIdComponentState.ts
new file mode 100644
index 0000000000..5bbbd5ed44
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/front-component/states/viewableFrontComponentIdComponentState.ts
@@ -0,0 +1,10 @@
+import { SidePanelPageComponentInstanceContext } from '@/side-panel/states/contexts/SidePanelPageComponentInstanceContext';
+import { createAtomComponentState } from '@/ui/utilities/state/jotai/utils/createAtomComponentState';
+
+export const viewableFrontComponentIdComponentState = createAtomComponentState<
+ string | null
+>({
+ key: 'side-panel/viewable-front-component-id',
+ defaultValue: null,
+ componentInstanceContext: SidePanelPageComponentInstanceContext,
+});
diff --git a/packages/twenty-front/src/modules/command-menu/pages/front-component/states/viewableFrontComponentRecordContextComponentState.ts b/packages/twenty-front/src/modules/side-panel/pages/front-component/states/viewableFrontComponentRecordContextComponentState.ts
similarity index 57%
rename from packages/twenty-front/src/modules/command-menu/pages/front-component/states/viewableFrontComponentRecordContextComponentState.ts
rename to packages/twenty-front/src/modules/side-panel/pages/front-component/states/viewableFrontComponentRecordContextComponentState.ts
index f3b336c0da..e57a0775b1 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/front-component/states/viewableFrontComponentRecordContextComponentState.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/front-component/states/viewableFrontComponentRecordContextComponentState.ts
@@ -1,4 +1,4 @@
-import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
+import { SidePanelPageComponentInstanceContext } from '@/side-panel/states/contexts/SidePanelPageComponentInstanceContext';
import { createAtomComponentState } from '@/ui/utilities/state/jotai/utils/createAtomComponentState';
type FrontComponentRecordContext = {
@@ -8,7 +8,7 @@ type FrontComponentRecordContext = {
export const viewableFrontComponentRecordContextComponentState =
createAtomComponentState({
- key: 'command-menu/viewable-front-component-record-context',
+ key: 'side-panel/viewable-front-component-record-context',
defaultValue: null,
- componentInstanceContext: CommandMenuPageComponentInstanceContext,
+ componentInstanceContext: SidePanelPageComponentInstanceContext,
});
diff --git a/packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadIntermediaryMessages.tsx b/packages/twenty-front/src/modules/side-panel/pages/message-thread/components/SidePanelMessageThreadIntermediaryMessages.tsx
similarity index 95%
rename from packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadIntermediaryMessages.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/message-thread/components/SidePanelMessageThreadIntermediaryMessages.tsx
index e22a1ba0d2..0a12c7769a 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadIntermediaryMessages.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/message-thread/components/SidePanelMessageThreadIntermediaryMessages.tsx
@@ -12,7 +12,7 @@ const StyledButtonContainer = styled.div`
padding: 16px 24px;
`;
-export const CommandMenuMessageThreadIntermediaryMessages = ({
+export const SidePanelMessageThreadIntermediaryMessages = ({
messages,
}: {
messages: EmailThreadMessageWithSender[];
diff --git a/packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadPage.tsx b/packages/twenty-front/src/modules/side-panel/pages/message-thread/components/SidePanelMessageThreadPage.tsx
similarity index 90%
rename from packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadPage.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/message-thread/components/SidePanelMessageThreadPage.tsx
index df2784749b..de158b74cd 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadPage.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/message-thread/components/SidePanelMessageThreadPage.tsx
@@ -5,9 +5,9 @@ import { CustomResolverFetchMoreLoader } from '@/activities/components/CustomRes
import { EmailLoader } from '@/activities/emails/components/EmailLoader';
import { EmailThreadHeader } from '@/activities/emails/components/EmailThreadHeader';
import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage';
-import { CommandMenuMessageThreadIntermediaryMessages } from '@/command-menu/pages/message-thread/components/CommandMenuMessageThreadIntermediaryMessages';
-import { useEmailThreadInCommandMenu } from '@/command-menu/pages/message-thread/hooks/useEmailThreadInCommandMenu';
-import { messageThreadComponentState } from '@/command-menu/pages/message-thread/states/messageThreadComponentState';
+import { SidePanelMessageThreadIntermediaryMessages } from '@/side-panel/pages/message-thread/components/SidePanelMessageThreadIntermediaryMessages';
+import { useEmailThreadInSidePanel } from '@/side-panel/pages/message-thread/hooks/useEmailThreadInSidePanel';
+import { messageThreadComponentState } from '@/side-panel/pages/message-thread/states/messageThreadComponentState';
import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
import { t } from '@lingui/core/macro';
import { ConnectedAccountProvider } from 'twenty-shared/types';
@@ -47,7 +47,7 @@ const ALLOWED_REPLY_PROVIDERS = [
ConnectedAccountProvider.IMAP_SMTP_CALDAV,
];
-export const CommandMenuMessageThreadPage = () => {
+export const SidePanelMessageThreadPage = () => {
const setMessageThread = useSetAtomComponentState(
messageThreadComponentState,
);
@@ -63,7 +63,7 @@ export const CommandMenuMessageThreadPage = () => {
connectedAccountProvider,
lastMessageExternalId,
connectedAccountConnectionParameters,
- } = useEmailThreadInCommandMenu();
+ } = useEmailThreadInSidePanel();
useEffect(() => {
if (!messages[0]?.messageThread) {
@@ -148,7 +148,7 @@ export const CommandMenuMessageThreadPage = () => {
sentAt={message.receivedAt}
/>
))}
-
{
return (
-
{children}
-
+
);
};
-describe('useEmailThreadInCommandMenu', () => {
+describe('useEmailThreadInSidePanel', () => {
it('should return correct values', async () => {
const mockMessages = [
{
@@ -241,7 +241,7 @@ describe('useEmailThreadInCommandMenu', () => {
},
];
- const { result } = renderHook(() => useEmailThreadInCommandMenu(), {
+ const { result } = renderHook(() => useEmailThreadInSidePanel(), {
wrapper: Wrapper,
});
diff --git a/packages/twenty-front/src/modules/command-menu/pages/message-thread/hooks/useEmailThreadInCommandMenu.ts b/packages/twenty-front/src/modules/side-panel/pages/message-thread/hooks/useEmailThreadInSidePanel.ts
similarity index 97%
rename from packages/twenty-front/src/modules/command-menu/pages/message-thread/hooks/useEmailThreadInCommandMenu.ts
rename to packages/twenty-front/src/modules/side-panel/pages/message-thread/hooks/useEmailThreadInSidePanel.ts
index c50784476d..49c477bb23 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/message-thread/hooks/useEmailThreadInCommandMenu.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/message-thread/hooks/useEmailThreadInSidePanel.ts
@@ -8,7 +8,7 @@ import { type MessageChannel } from '@/accounts/types/MessageChannel';
import { type EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant';
import { type EmailThreadMessageWithSender } from '@/activities/emails/types/EmailThreadMessageWithSender';
import { type MessageChannelMessageAssociation } from '@/activities/emails/types/MessageChannelMessageAssociation';
-import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
+import { viewableRecordIdComponentState } from '@/side-panel/pages/record-page/states/viewableRecordIdComponentState';
import {
CoreObjectNameSingular,
MessageParticipantRole,
@@ -20,7 +20,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
import { isDefined } from 'twenty-shared/utils';
// to improve - https://github.com/twentyhq/twenty/issues/12190
-export const useEmailThreadInCommandMenu = () => {
+export const useEmailThreadInSidePanel = () => {
const viewableRecordId = useAtomComponentStateValue(
viewableRecordIdComponentState,
);
diff --git a/packages/twenty-front/src/modules/command-menu/pages/message-thread/states/messageThreadComponentState.ts b/packages/twenty-front/src/modules/side-panel/pages/message-thread/states/messageThreadComponentState.ts
similarity index 63%
rename from packages/twenty-front/src/modules/command-menu/pages/message-thread/states/messageThreadComponentState.ts
rename to packages/twenty-front/src/modules/side-panel/pages/message-thread/states/messageThreadComponentState.ts
index f8e4ff44ef..fb96c149f1 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/message-thread/states/messageThreadComponentState.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/message-thread/states/messageThreadComponentState.ts
@@ -1,10 +1,10 @@
import { type MessageThread } from '@/activities/emails/types/MessageThread';
-import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
+import { SidePanelPageComponentInstanceContext } from '@/side-panel/states/contexts/SidePanelPageComponentInstanceContext';
import { createAtomComponentState } from '@/ui/utilities/state/jotai/utils/createAtomComponentState';
export const messageThreadComponentState =
createAtomComponentState({
key: 'messageThreadComponentState',
defaultValue: null,
- componentInstanceContext: CommandMenuPageComponentInstanceContext,
+ componentInstanceContext: SidePanelPageComponentInstanceContext,
});
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditColorOption.tsx b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelEditColorOption.tsx
similarity index 96%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditColorOption.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelEditColorOption.tsx
index b3ad48caa6..3d969e273a 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditColorOption.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelEditColorOption.tsx
@@ -24,15 +24,15 @@ const StyledMenuStyleText = styled.span`
font-size: 13px;
`;
-type CommandMenuEditColorOptionProps = {
+type SidePanelEditColorOptionProps = {
navigationMenuItemId: string;
color: ThemeColor;
};
-export const CommandMenuEditColorOption = ({
+export const SidePanelEditColorOption = ({
navigationMenuItemId,
color,
-}: CommandMenuEditColorOptionProps) => {
+}: SidePanelEditColorOptionProps) => {
const { t } = useLingui();
const { updateNavigationMenuItemInDraft } =
useUpdateNavigationMenuItemInDraft();
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditFolderPickerSubView.tsx b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelEditFolderPickerSubView.tsx
similarity index 81%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditFolderPickerSubView.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelEditFolderPickerSubView.tsx
index a52113c43e..060b5f583b 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditFolderPickerSubView.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelEditFolderPickerSubView.tsx
@@ -2,24 +2,24 @@ import { useLingui } from '@lingui/react/macro';
import { useState } from 'react';
import { useIcons } from 'twenty-ui/display';
-import { CommandGroup } from '@/command-menu/components/CommandGroup';
+import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
-import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
-import { CommandMenuSubViewWithSearch } from '@/command-menu/components/CommandMenuSubViewWithSearch';
-import { useFolderPickerSelectionData } from '@/command-menu/pages/navigation-menu-item/hooks/useFolderPickerSelectionData';
+import { SidePanelList } from '@/side-panel/components/SidePanelList';
+import { SidePanelSubViewWithSearch } from '@/side-panel/components/SidePanelSubViewWithSearch';
+import { useFolderPickerSelectionData } from '@/side-panel/pages/navigation-menu-item/hooks/useFolderPickerSelectionData';
import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
import { FOLDER_ICON_DEFAULT } from '@/navigation-menu-item/constants/FolderIconDefault';
import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorFolder';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
-type CommandMenuEditFolderPickerSubViewProps = {
+type SidePanelEditFolderPickerSubViewProps = {
onBack: () => void;
};
-export const CommandMenuEditFolderPickerSubView = ({
+export const SidePanelEditFolderPickerSubView = ({
onBack,
-}: CommandMenuEditFolderPickerSubViewProps) => {
+}: SidePanelEditFolderPickerSubViewProps) => {
const { t } = useLingui();
const { getIcon } = useIcons();
const [searchValue, setSearchValue] = useState('');
@@ -42,20 +42,20 @@ export const CommandMenuEditFolderPickerSubView = ({
: t`No folders available`;
return (
-
-
-
+
{includeNoFolderOption && (
);
})}
-
-
-
+
+
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditLinkItemView.tsx b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelEditLinkItemView.tsx
similarity index 61%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditLinkItemView.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelEditLinkItemView.tsx
index 8508bae905..a25484ca3b 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditLinkItemView.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelEditLinkItemView.tsx
@@ -3,26 +3,26 @@ import { isNonEmptyString } from '@sniptt/guards';
import { useState } from 'react';
import { getAbsoluteUrl } from 'twenty-shared/utils';
-import { CommandGroup } from '@/command-menu/components/CommandGroup';
-import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
-import { CommandMenuEditColorOption } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditColorOption';
+import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
+import { SidePanelList } from '@/side-panel/components/SidePanelList';
+import { SidePanelEditColorOption } from '@/side-panel/pages/navigation-menu-item/components/SidePanelEditColorOption';
import {
type OrganizeActionsProps,
- CommandMenuEditOrganizeActions,
-} from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditOrganizeActions';
-import { CommandMenuEditOwnerSection } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditOwnerSection';
-import { getOrganizeActionsSelectableItemIds } from '@/command-menu/pages/navigation-menu-item/utils/getOrganizeActionsSelectableItemIds';
+ SidePanelEditOrganizeActions,
+} from '@/side-panel/pages/navigation-menu-item/components/SidePanelEditOrganizeActions';
+import { SidePanelEditOwnerSection } from '@/side-panel/pages/navigation-menu-item/components/SidePanelEditOwnerSection';
+import { getOrganizeActionsSelectableItemIds } from '@/side-panel/pages/navigation-menu-item/utils/getOrganizeActionsSelectableItemIds';
import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/types/processed-navigation-menu-item';
import { parseThemeColor } from '@/navigation-menu-item/utils/parseThemeColor';
import { TextInput } from '@/ui/input/components/TextInput';
-type CommandMenuEditLinkItemViewProps = OrganizeActionsProps & {
+type SidePanelEditLinkItemViewProps = OrganizeActionsProps & {
selectedItem: ProcessedNavigationMenuItem;
onUpdateLink: (linkId: string, link: string) => void;
onOpenFolderPicker: () => void;
};
-export const CommandMenuEditLinkItemView = ({
+export const SidePanelEditLinkItemView = ({
selectedItem,
onUpdateLink,
canMoveUp,
@@ -33,16 +33,16 @@ export const CommandMenuEditLinkItemView = ({
onRemove,
onAddBefore,
onAddAfter,
-}: CommandMenuEditLinkItemViewProps) => {
+}: SidePanelEditLinkItemViewProps) => {
const { t } = useLingui();
const [urlEditInput, setUrlEditInput] = useState('');
const selectableItemIds = getOrganizeActionsSelectableItemIds(true);
return (
-
-
-
+
+
@@ -59,8 +59,8 @@ export const CommandMenuEditLinkItemView = ({
}
}}
/>
-
-
+
-
-
+
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditObjectViewBase.tsx b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelEditObjectViewBase.tsx
similarity index 55%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditObjectViewBase.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelEditObjectViewBase.tsx
index cf73f4c90a..d4902dcca6 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditObjectViewBase.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelEditObjectViewBase.tsx
@@ -1,21 +1,21 @@
-import { CommandGroup } from '@/command-menu/components/CommandGroup';
-import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
-import { CommandMenuEditColorOption } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditColorOption';
+import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
+import { SidePanelList } from '@/side-panel/components/SidePanelList';
+import { SidePanelEditColorOption } from '@/side-panel/pages/navigation-menu-item/components/SidePanelEditColorOption';
import {
type OrganizeActionsProps,
- CommandMenuEditOrganizeActions,
-} from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditOrganizeActions';
-import { getOrganizeActionsSelectableItemIds } from '@/command-menu/pages/navigation-menu-item/utils/getOrganizeActionsSelectableItemIds';
+ SidePanelEditOrganizeActions,
+} from '@/side-panel/pages/navigation-menu-item/components/SidePanelEditOrganizeActions';
+import { getOrganizeActionsSelectableItemIds } from '@/side-panel/pages/navigation-menu-item/utils/getOrganizeActionsSelectableItemIds';
import { useSelectedNavigationMenuItemEditItem } from '@/navigation-menu-item/hooks/useSelectedNavigationMenuItemEditItem';
import { parseThemeColor } from '@/navigation-menu-item/utils/parseThemeColor';
import { useLingui } from '@lingui/react/macro';
-type CommandMenuEditObjectViewBaseProps = OrganizeActionsProps & {
+type SidePanelEditObjectViewBaseProps = OrganizeActionsProps & {
onOpenFolderPicker: () => void;
showColorOption?: boolean;
};
-export const CommandMenuEditObjectViewBase = ({
+export const SidePanelEditObjectViewBase = ({
onOpenFolderPicker,
canMoveUp,
canMoveDown,
@@ -25,22 +25,22 @@ export const CommandMenuEditObjectViewBase = ({
onAddBefore,
onAddAfter,
showColorOption = false,
-}: CommandMenuEditObjectViewBaseProps) => {
+}: SidePanelEditObjectViewBaseProps) => {
const { t } = useLingui();
const { selectedItem } = useSelectedNavigationMenuItemEditItem();
const selectableItemIds = getOrganizeActionsSelectableItemIds(true);
return (
-
+
{showColorOption && selectedItem && (
-
-
+
-
+
)}
-
-
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditOrganizeActions.tsx b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelEditOrganizeActions.tsx
similarity index 69%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditOrganizeActions.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelEditOrganizeActions.tsx
index 526eba79f9..c59a578ade 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditOrganizeActions.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelEditOrganizeActions.tsx
@@ -8,9 +8,9 @@ import {
IconTrash,
} from 'twenty-ui/display';
-import { CommandGroup } from '@/command-menu/components/CommandGroup';
+import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
-import { CommandMenuNavigationItemActions } from '@/command-menu/pages/navigation-menu-item/command-menu-navigation-item-actions';
+import { SidePanelNavigationItemActions } from '@/side-panel/pages/navigation-menu-item/side-panel-navigation-item-actions';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
export type OrganizeActionsProps = {
@@ -23,13 +23,13 @@ export type OrganizeActionsProps = {
onAddAfter?: () => void;
};
-type CommandMenuEditOrganizeActionsProps = OrganizeActionsProps & {
+type SidePanelEditOrganizeActionsProps = OrganizeActionsProps & {
showMoveToFolder?: boolean;
onMoveToFolder?: () => void;
moveToFolderHasSubMenu?: boolean;
};
-export const CommandMenuEditOrganizeActions = ({
+export const SidePanelEditOrganizeActions = ({
canMoveUp,
canMoveDown,
onMoveUp,
@@ -40,44 +40,44 @@ export const CommandMenuEditOrganizeActions = ({
showMoveToFolder = false,
onMoveToFolder,
moveToFolderHasSubMenu = false,
-}: CommandMenuEditOrganizeActionsProps) => {
+}: SidePanelEditOrganizeActionsProps) => {
const { t } = useLingui();
return (
-
+
{showMoveToFolder && onMoveToFolder && (
@@ -85,41 +85,41 @@ export const CommandMenuEditOrganizeActions = ({
)}
{onAddBefore && (
)}
{onAddAfter && (
)}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditOwnerSection.tsx b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelEditOwnerSection.tsx
similarity index 86%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditOwnerSection.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelEditOwnerSection.tsx
index f5552237cd..036f9e1574 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditOwnerSection.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelEditOwnerSection.tsx
@@ -2,20 +2,20 @@ import { useLingui } from '@lingui/react/macro';
import { isDefined } from 'twenty-shared/utils';
import { IconApps } from 'twenty-ui/display';
-import { CommandGroup } from '@/command-menu/components/CommandGroup';
+import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
import { useDraftNavigationMenuItems } from '@/navigation-menu-item/hooks/useDraftNavigationMenuItems';
import { useSelectedNavigationMenuItemEditItem } from '@/navigation-menu-item/hooks/useSelectedNavigationMenuItemEditItem';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { useFindOneApplicationQuery } from '~/generated-metadata/graphql';
-type CommandMenuEditOwnerSectionProps = {
+type SidePanelEditOwnerSectionProps = {
applicationId?: string | null;
};
-export const CommandMenuEditOwnerSection = ({
+export const SidePanelEditOwnerSection = ({
applicationId: applicationIdProp,
-}: CommandMenuEditOwnerSectionProps) => {
+}: SidePanelEditOwnerSectionProps) => {
const { t } = useLingui();
const { selectedItem } = useSelectedNavigationMenuItemEditItem();
@@ -40,7 +40,7 @@ export const CommandMenuEditOwnerSection = ({
}
return (
-
+
{}}>
-
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNavigationMenuItemEditPage.tsx b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNavigationMenuItemEditPage.tsx
similarity index 75%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNavigationMenuItemEditPage.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNavigationMenuItemEditPage.tsx
index c368891271..7a10762183 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNavigationMenuItemEditPage.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNavigationMenuItemEditPage.tsx
@@ -1,14 +1,14 @@
-import { CommandGroup } from '@/command-menu/components/CommandGroup';
+import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
-import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
-import { CommandMenuEditColorOption } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditColorOption';
-import { CommandMenuEditFolderPickerSubView } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditFolderPickerSubView';
-import { CommandMenuEditLinkItemView } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditLinkItemView';
-import { CommandMenuEditObjectViewBase } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditObjectViewBase';
-import { CommandMenuEditOrganizeActions } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditOrganizeActions';
-import { CommandMenuEditOwnerSection } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditOwnerSection';
-import { useNavigationMenuItemEditOrganizeActions } from '@/command-menu/pages/navigation-menu-item/hooks/useNavigationMenuItemEditOrganizeActions';
-import { getOrganizeActionsSelectableItemIds } from '@/command-menu/pages/navigation-menu-item/utils/getOrganizeActionsSelectableItemIds';
+import { SidePanelList } from '@/side-panel/components/SidePanelList';
+import { SidePanelEditColorOption } from '@/side-panel/pages/navigation-menu-item/components/SidePanelEditColorOption';
+import { SidePanelEditFolderPickerSubView } from '@/side-panel/pages/navigation-menu-item/components/SidePanelEditFolderPickerSubView';
+import { SidePanelEditLinkItemView } from '@/side-panel/pages/navigation-menu-item/components/SidePanelEditLinkItemView';
+import { SidePanelEditObjectViewBase } from '@/side-panel/pages/navigation-menu-item/components/SidePanelEditObjectViewBase';
+import { SidePanelEditOrganizeActions } from '@/side-panel/pages/navigation-menu-item/components/SidePanelEditOrganizeActions';
+import { SidePanelEditOwnerSection } from '@/side-panel/pages/navigation-menu-item/components/SidePanelEditOwnerSection';
+import { useNavigationMenuItemEditOrganizeActions } from '@/side-panel/pages/navigation-menu-item/hooks/useNavigationMenuItemEditOrganizeActions';
+import { getOrganizeActionsSelectableItemIds } from '@/side-panel/pages/navigation-menu-item/utils/getOrganizeActionsSelectableItemIds';
import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
import { useNavigationMenuItemsDraftState } from '@/navigation-menu-item/hooks/useNavigationMenuItemsDraftState';
import { useOpenAddItemToFolderPage } from '@/navigation-menu-item/hooks/useOpenAddItemToFolderPage';
@@ -30,16 +30,16 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const ADD_ITEM_TO_FOLDER_ACTION_ID = 'add-item-to-folder';
-const StyledCommandMenuPlaceholder = styled.p`
+const StyledSidePanelPlaceholder = styled.p`
color: ${themeCssVariables.font.color.tertiary};
font-size: ${themeCssVariables.font.size.sm};
`;
-const StyledCommandMenuPageContainer = styled.div`
+const StyledSidePanelPageContainer = styled.div`
padding: ${themeCssVariables.spacing[3]};
`;
-export const CommandMenuNavigationMenuItemEditPage = () => {
+export const SidePanelNavigationMenuItemEditPage = () => {
const { t } = useLingui();
const selectedNavigationMenuItemInEditMode = useAtomStateValue(
@@ -87,17 +87,17 @@ export const CommandMenuNavigationMenuItemEditPage = () => {
if (!selectedNavigationMenuItemInEditMode || !selectedItemLabel) {
return (
-
-
+
+
{t`Select a navigation item to edit`}
-
-
+
+
);
}
if (isFolderPickerOpen) {
return (
- setIsFolderPickerOpen(false)}
/>
);
@@ -107,7 +107,7 @@ export const CommandMenuNavigationMenuItemEditPage = () => {
case NavigationMenuItemType.VIEW:
if (!selectedItemObjectMetadata) return null;
return (
- {
selectedItem.itemType === NavigationMenuItemType.LINK
) {
return (
- updateLinkInDraft(linkId, { link })}
@@ -147,7 +147,7 @@ export const CommandMenuNavigationMenuItemEditPage = () => {
return null;
case NavigationMenuItemType.FOLDER:
return (
- {
]}
>
{selectedItem && (
-
+
{
hasSubMenu
/>
-
-
+
)}
- {
onAddBefore={onAddBefore}
onAddAfter={onAddAfter}
/>
-
-
+
+
);
default:
return (
-
{selectedItem && (
-
-
+
-
+
)}
- {
showMoveToFolder
onMoveToFolder={openFolderPicker}
/>
-
+
);
}
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemMainMenu.tsx b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemMainMenu.tsx
similarity index 70%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemMainMenu.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemMainMenu.tsx
index ed3e78c4e4..cfd9900411 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemMainMenu.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemMainMenu.tsx
@@ -7,47 +7,47 @@ import {
IconTable,
} from 'twenty-ui/display';
-import { CommandGroup } from '@/command-menu/components/CommandGroup';
-import { CommandMenuAddToNavDraggablePlaceholder } from '@/command-menu/components/CommandMenuAddToNavDraggablePlaceholder';
-import { CommandMenuAddToNavDroppable } from '@/command-menu/components/CommandMenuAddToNavDroppable';
+import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
+import { SidePanelAddToNavigationDraggablePlaceholder } from '@/side-panel/components/SidePanelAddToNavigationDraggablePlaceholder';
+import { SidePanelAddToNavigationDroppable } from '@/side-panel/components/SidePanelAddToNavigationDroppable';
import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
-import { CommandMenuItemWithAddToNavigationDrag } from '@/command-menu/components/CommandMenuItemWithAddToNavigationDrag';
-import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
-import { useAddFolderToNavigationMenu } from '@/command-menu/pages/navigation-menu-item/hooks/useAddFolderToNavigationMenu';
-import { useAddLinkToNavigationMenu } from '@/command-menu/pages/navigation-menu-item/hooks/useAddLinkToNavigationMenu';
+import { SidePanelItemWithAddToNavigationDrag } from '@/side-panel/components/SidePanelItemWithAddToNavigationDrag';
+import { SidePanelList } from '@/side-panel/components/SidePanelList';
+import { useAddFolderToNavigationMenu } from '@/side-panel/pages/navigation-menu-item/hooks/useAddFolderToNavigationMenu';
+import { useAddLinkToNavigationMenu } from '@/side-panel/pages/navigation-menu-item/hooks/useAddLinkToNavigationMenu';
import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { useContext } from 'react';
import { ThemeContext } from 'twenty-ui/theme-constants';
-type CommandMenuNewSidebarItemMainMenuProps = {
+type SidePanelNewSidebarItemMainMenuProps = {
onSelectObject: () => void;
onSelectView: () => void;
onSelectRecord: () => void;
};
-export const CommandMenuNewSidebarItemMainMenu = ({
+export const SidePanelNewSidebarItemMainMenu = ({
onSelectObject,
onSelectView,
onSelectRecord,
-}: CommandMenuNewSidebarItemMainMenuProps) => {
- const { theme } = useContext(ThemeContext);
+}: SidePanelNewSidebarItemMainMenuProps) => {
const { t } = useLingui();
+ const { theme } = useContext(ThemeContext);
const { handleAddFolder } = useAddFolderToNavigationMenu();
const { handleAddLink } = useAddLinkToNavigationMenu();
return (
-
+
{({ innerRef, droppableProps, placeholder }) => (
-
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
-
-
+
+
(
@@ -62,8 +62,8 @@ export const CommandMenuNewSidebarItemMainMenu = ({
onClick={onSelectObject}
/>
-
-
+
+
(
@@ -78,8 +78,8 @@ export const CommandMenuNewSidebarItemMainMenu = ({
onClick={onSelectView}
/>
-
-
+
+
(
@@ -95,11 +95,11 @@ export const CommandMenuNewSidebarItemMainMenu = ({
onClick={onSelectRecord}
/>
-
-
-
+
+
+
-
-
-
+
{placeholder}
-
+
)}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemObjectFlow.tsx b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemObjectFlow.tsx
similarity index 82%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemObjectFlow.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemObjectFlow.tsx
index 6a63f23191..abd06beade 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemObjectFlow.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemObjectFlow.tsx
@@ -1,10 +1,10 @@
import { useLingui } from '@lingui/react/macro';
import { useState } from 'react';
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { CommandMenuObjectPickerSubView } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuObjectPickerSubView';
-import { CommandMenuSystemObjectPickerSubView } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuSystemObjectPickerSubView';
-import { getAvailableObjectMetadataForNewSidebarItem } from '@/command-menu/pages/navigation-menu-item/utils/getAvailableObjectMetadataForNewSidebarItem';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { SidePanelObjectPickerSubView } from '@/side-panel/pages/navigation-menu-item/components/SidePanelObjectPickerSubView';
+import { SidePanelSystemObjectPickerSubView } from '@/side-panel/pages/navigation-menu-item/components/SidePanelSystemObjectPickerSubView';
+import { getAvailableObjectMetadataForNewSidebarItem } from '@/side-panel/pages/navigation-menu-item/utils/getAvailableObjectMetadataForNewSidebarItem';
import { useAddObjectToNavigationMenuDraft } from '@/navigation-menu-item/hooks/useAddObjectToNavigationMenuDraft';
import { getStandardObjectIconColor } from '@/navigation-menu-item/utils/getStandardObjectIconColor';
import { useDraftNavigationMenuItems } from '@/navigation-menu-item/hooks/useDraftNavigationMenuItems';
@@ -17,15 +17,15 @@ import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadat
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { ViewKey } from '@/views/types/ViewKey';
-type CommandMenuNewSidebarItemObjectFlowProps = {
+type SidePanelNewSidebarItemObjectFlowProps = {
onBack: () => void;
};
-export const CommandMenuNewSidebarItemObjectFlow = ({
+export const SidePanelNewSidebarItemObjectFlow = ({
onBack,
-}: CommandMenuNewSidebarItemObjectFlowProps) => {
+}: SidePanelNewSidebarItemObjectFlowProps) => {
const { t } = useLingui();
- const { closeCommandMenu } = useCommandMenu();
+ const { closeSidePanelMenu } = useSidePanelMenu();
const [objectSearchInput, setObjectSearchInput] = useState('');
const [systemObjectSearchInput, setSystemObjectSearchInput] = useState('');
const [isInSystemPicker, setIsInSystemPicker] = useState(false);
@@ -77,7 +77,7 @@ export const CommandMenuNewSidebarItemObjectFlow = ({
getStandardObjectIconColor(objectMetadataItem.nameSingular),
);
setAddMenuItemInsertionContext(null);
- closeCommandMenu();
+ closeSidePanelMenu();
};
const handleBackToObjectList = () => {
@@ -87,7 +87,7 @@ export const CommandMenuNewSidebarItemObjectFlow = ({
if (isInSystemPicker) {
return (
- {
+ const [selectedOption, setSelectedOption] = useState(null);
+
+ const handleBackToMain = () => {
+ setSelectedOption(null);
+ };
+
+ switch (selectedOption) {
+ case 'view':
+ return ;
+ case 'object':
+ return ;
+ case 'record':
+ return ;
+ default:
+ return (
+ setSelectedOption('record')}
+ onSelectObject={() => setSelectedOption('object')}
+ onSelectView={() => setSelectedOption('view')}
+ />
+ );
+ }
+};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemRecordItem.tsx b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemRecordItem.tsx
similarity index 87%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemRecordItem.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemRecordItem.tsx
index dd1aba6033..5385e38996 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemRecordItem.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemRecordItem.tsx
@@ -1,7 +1,7 @@
import { Avatar } from 'twenty-ui/display';
-import { CommandMenuItemWithAddToNavigationDrag } from '@/command-menu/components/CommandMenuItemWithAddToNavigationDrag';
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { SidePanelItemWithAddToNavigationDrag } from '@/side-panel/components/SidePanelItemWithAddToNavigationDrag';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
import { useDraftNavigationMenuItems } from '@/navigation-menu-item/hooks/useDraftNavigationMenuItems';
import { useAddRecordToNavigationMenuDraft } from '@/navigation-menu-item/hooks/useAddRecordToNavigationMenuDraft';
@@ -20,16 +20,16 @@ type SearchRecord = {
imageUrl?: string | null;
};
-type CommandMenuNewSidebarItemRecordItemProps = {
+type SidePanelNewSidebarItemRecordItemProps = {
record: SearchRecord;
dragIndex?: number;
};
-export const CommandMenuNewSidebarItemRecordItem = ({
+export const SidePanelNewSidebarItemRecordItem = ({
record,
dragIndex,
-}: CommandMenuNewSidebarItemRecordItemProps) => {
- const { closeCommandMenu } = useCommandMenu();
+}: SidePanelNewSidebarItemRecordItemProps) => {
+ const { closeSidePanelMenu } = useSidePanelMenu();
const { addRecordToDraft } = useAddRecordToNavigationMenuDraft();
const { currentDraft } = useDraftNavigationMenuItems();
const addMenuItemInsertionContext = useAtomStateValue(
@@ -64,12 +64,12 @@ export const CommandMenuNewSidebarItemRecordItem = ({
addMenuItemInsertionContext?.targetIndex,
);
setAddMenuItemInsertionContext(null);
- closeCommandMenu();
+ closeSidePanelMenu();
};
return (
- void;
};
-export const CommandMenuNewSidebarItemRecordSubView = ({
+export const SidePanelNewSidebarItemRecordSubView = ({
onBack,
-}: CommandMenuNewSidebarItemRecordSubViewProps) => {
+}: SidePanelNewSidebarItemRecordSubViewProps) => {
const { t } = useLingui();
const { currentDraft } = useDraftNavigationMenuItems();
const { objectMetadataItems } = useObjectMetadataItems();
@@ -82,16 +82,16 @@ export const CommandMenuNewSidebarItemRecordSubView = ({
: t`Type to search records`;
return (
-
-
+
{({ innerRef, droppableProps, placeholder }) => (
-
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
-
+
{availableSearchRecords.map((record, index) => (
-
))}
-
+
{placeholder}
-
+
)}
-
-
+
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemViewFlow.tsx b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemViewFlow.tsx
similarity index 78%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemViewFlow.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemViewFlow.tsx
index 9e9547eb2e..bd6f2ce35d 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemViewFlow.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemViewFlow.tsx
@@ -1,23 +1,23 @@
import { useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
-import { CommandMenuNewSidebarItemViewObjectPickerSubView } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemViewObjectPickerSubView';
-import { CommandMenuNewSidebarItemViewPickerSubView } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemViewPickerSubView';
-import { CommandMenuNewSidebarItemViewSystemSubView } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemViewSystemSubView';
-import { getAvailableObjectMetadataForNewSidebarItem } from '@/command-menu/pages/navigation-menu-item/utils/getAvailableObjectMetadataForNewSidebarItem';
+import { SidePanelNewSidebarItemViewObjectPickerSubView } from '@/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemViewObjectPickerSubView';
+import { SidePanelNewSidebarItemViewPickerSubView } from '@/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemViewPickerSubView';
+import { SidePanelNewSidebarItemViewSystemSubView } from '@/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemViewSystemSubView';
+import { getAvailableObjectMetadataForNewSidebarItem } from '@/side-panel/pages/navigation-menu-item/utils/getAvailableObjectMetadataForNewSidebarItem';
import { useDraftNavigationMenuItems } from '@/navigation-menu-item/hooks/useDraftNavigationMenuItems';
import { useNavigationMenuObjectMetadataFromDraft } from '@/navigation-menu-item/hooks/useNavigationMenuObjectMetadataFromDraft';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { ViewKey } from '@/views/types/ViewKey';
-type CommandMenuNewSidebarItemViewFlowProps = {
+type SidePanelNewSidebarItemViewFlowProps = {
onBack: () => void;
};
-export const CommandMenuNewSidebarItemViewFlow = ({
+export const SidePanelNewSidebarItemViewFlow = ({
onBack,
-}: CommandMenuNewSidebarItemViewFlowProps) => {
+}: SidePanelNewSidebarItemViewFlowProps) => {
const [selectedObjectMetadataIdForView, setSelectedObjectMetadataIdForView] =
useState(null);
const [objectSearchInput, setObjectSearchInput] = useState('');
@@ -76,7 +76,7 @@ export const CommandMenuNewSidebarItemViewFlow = ({
if (isDefined(selectedObjectMetadataIdForView) && !isInSystemPicker) {
return (
-
@@ -85,7 +85,7 @@ export const CommandMenuNewSidebarItemViewFlow = ({
if (isInSystemPicker) {
return (
- void;
@@ -21,7 +21,7 @@ type CommandMenuNewSidebarItemViewObjectPickerSubViewProps = {
showSystemObjectsOption?: boolean;
};
-export const CommandMenuNewSidebarItemViewObjectPickerSubView = ({
+export const SidePanelNewSidebarItemViewObjectPickerSubView = ({
objects,
searchValue,
onSearchChange,
@@ -29,11 +29,11 @@ export const CommandMenuNewSidebarItemViewObjectPickerSubView = ({
onOpenSystemPicker,
onSelectObject,
showSystemObjectsOption = true,
-}: CommandMenuNewSidebarItemViewObjectPickerSubViewProps) => {
+}: SidePanelNewSidebarItemViewObjectPickerSubViewProps) => {
const { t } = useLingui();
const { getIcon } = useIcons();
const { filteredItems, selectableItemIds, isEmpty, hasSearchQuery } =
- useFilteredPickerItems({
+ useSidePanelFilteredPickerItems({
items: objects,
searchQuery: searchValue,
getSearchableValues: (item) => [item.labelPlural],
@@ -44,20 +44,20 @@ export const CommandMenuNewSidebarItemViewObjectPickerSubView = ({
: t`No objects with views found`;
return (
-
-
-
+
{filteredItems.map((objectMetadataItem) => (
)}
-
-
-
+
+
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemViewPickerSubView.tsx b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemViewPickerSubView.tsx
similarity index 80%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemViewPickerSubView.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemViewPickerSubView.tsx
index 9abb0bf0a2..f93fa065df 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemViewPickerSubView.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemViewPickerSubView.tsx
@@ -1,10 +1,10 @@
-import { CommandGroup } from '@/command-menu/components/CommandGroup';
-import { CommandMenuAddToNavDroppable } from '@/command-menu/components/CommandMenuAddToNavDroppable';
-import { CommandMenuItemWithAddToNavigationDrag } from '@/command-menu/components/CommandMenuItemWithAddToNavigationDrag';
-import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
-import { CommandMenuSubViewWithSearch } from '@/command-menu/components/CommandMenuSubViewWithSearch';
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { useFilteredPickerItems } from '@/command-menu/hooks/useFilteredPickerItems';
+import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
+import { SidePanelAddToNavigationDroppable } from '@/side-panel/components/SidePanelAddToNavigationDroppable';
+import { SidePanelItemWithAddToNavigationDrag } from '@/side-panel/components/SidePanelItemWithAddToNavigationDrag';
+import { SidePanelList } from '@/side-panel/components/SidePanelList';
+import { SidePanelSubViewWithSearch } from '@/side-panel/components/SidePanelSubViewWithSearch';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { useSidePanelFilteredPickerItems } from '@/side-panel/hooks/useSidePanelFilteredPickerItems';
import { ObjectIconWithViewOverlay } from '@/navigation-menu-item/components/ObjectIconWithViewOverlay';
import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
import { useAddViewToNavigationMenuDraft } from '@/navigation-menu-item/hooks/useAddViewToNavigationMenuDraft';
@@ -23,19 +23,19 @@ import { useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui/display';
-type CommandMenuNewSidebarItemViewPickerSubViewProps = {
+type SidePanelNewSidebarItemViewPickerSubViewProps = {
selectedObjectMetadataIdForView: string;
onBack: () => void;
};
-export const CommandMenuNewSidebarItemViewPickerSubView = ({
+export const SidePanelNewSidebarItemViewPickerSubView = ({
selectedObjectMetadataIdForView,
onBack,
-}: CommandMenuNewSidebarItemViewPickerSubViewProps) => {
+}: SidePanelNewSidebarItemViewPickerSubViewProps) => {
const { t } = useLingui();
const { getIcon } = useIcons();
const [searchValue, setSearchValue] = useState('');
- const { closeCommandMenu } = useCommandMenu();
+ const { closeSidePanelMenu } = useSidePanelMenu();
const { addViewToDraft } = useAddViewToNavigationMenuDraft();
const { currentDraft } = useDraftNavigationMenuItems();
const addMenuItemInsertionContext = useAtomStateValue(
@@ -66,7 +66,7 @@ export const CommandMenuNewSidebarItemViewPickerSubView = ({
selectableItemIds,
isEmpty,
hasSearchQuery,
- } = useFilteredPickerItems({
+ } = useSidePanelFilteredPickerItems({
items: viewsForSelectedObject,
searchQuery: searchValue,
getSearchableValues: (view) => [view.name],
@@ -86,20 +86,20 @@ export const CommandMenuNewSidebarItemViewPickerSubView = ({
: undefined,
);
setAddMenuItemInsertionContext(null);
- closeCommandMenu();
+ closeSidePanelMenu();
};
return (
-
-
+
{({ innerRef, droppableProps, placeholder }) => (
-
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
-
+
{filteredViews.map((view, index) => (
handleSelectView(view)}
>
-
))}
-
+
{placeholder}
-
+
)}
-
-
+
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemViewSystemSubView.tsx b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemViewSystemSubView.tsx
similarity index 76%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemViewSystemSubView.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemViewSystemSubView.tsx
index 1c81adacfb..dc211d73ed 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemViewSystemSubView.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelNewSidebarItemViewSystemSubView.tsx
@@ -1,17 +1,17 @@
import { useLingui } from '@lingui/react/macro';
import { useIcons } from 'twenty-ui/display';
-import { CommandGroup } from '@/command-menu/components/CommandGroup';
+import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
-import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
-import { CommandMenuSubViewWithSearch } from '@/command-menu/components/CommandMenuSubViewWithSearch';
-import { useFilteredPickerItems } from '@/command-menu/hooks/useFilteredPickerItems';
+import { SidePanelList } from '@/side-panel/components/SidePanelList';
+import { SidePanelSubViewWithSearch } from '@/side-panel/components/SidePanelSubViewWithSearch';
+import { useSidePanelFilteredPickerItems } from '@/side-panel/hooks/useSidePanelFilteredPickerItems';
import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
import { getStandardObjectIconColor } from '@/navigation-menu-item/utils/getStandardObjectIconColor';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
-type CommandMenuNewSidebarItemViewSystemSubViewProps = {
+type SidePanelNewSidebarItemViewSystemSubViewProps = {
systemObjects: ObjectMetadataItem[];
searchValue: string;
onSearchChange: (value: string) => void;
@@ -19,13 +19,13 @@ type CommandMenuNewSidebarItemViewSystemSubViewProps = {
onSelectObject: (objectMetadataItem: ObjectMetadataItem) => void;
};
-export const CommandMenuNewSidebarItemViewSystemSubView = ({
+export const SidePanelNewSidebarItemViewSystemSubView = ({
systemObjects,
searchValue,
onSearchChange,
onBack,
onSelectObject,
-}: CommandMenuNewSidebarItemViewSystemSubViewProps) => {
+}: SidePanelNewSidebarItemViewSystemSubViewProps) => {
const { t } = useLingui();
const { getIcon } = useIcons();
const {
@@ -33,7 +33,7 @@ export const CommandMenuNewSidebarItemViewSystemSubView = ({
selectableItemIds,
isEmpty,
hasSearchQuery,
- } = useFilteredPickerItems({
+ } = useSidePanelFilteredPickerItems({
items: systemObjects,
searchQuery: searchValue,
getSearchableValues: (item) => [item.labelPlural],
@@ -43,20 +43,20 @@ export const CommandMenuNewSidebarItemViewSystemSubView = ({
: t`No system objects with views found`;
return (
-
-
-
+
{filteredSystemObjectMetadataItems.map((objectMetadataItem) => (
))}
-
-
-
+
+
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuObjectMenuItem.tsx b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelObjectMenuItem.tsx
similarity index 91%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuObjectMenuItem.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelObjectMenuItem.tsx
index ea7465f5ad..63bc9fa79e 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuObjectMenuItem.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelObjectMenuItem.tsx
@@ -3,7 +3,7 @@ import { isDefined } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui/display';
import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
-import { CommandMenuItemWithAddToNavigationDrag } from '@/command-menu/components/CommandMenuItemWithAddToNavigationDrag';
+import { SidePanelItemWithAddToNavigationDrag } from '@/side-panel/components/SidePanelItemWithAddToNavigationDrag';
import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
import { useDraftNavigationMenuItems } from '@/navigation-menu-item/hooks/useDraftNavigationMenuItems';
@@ -14,7 +14,7 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec
import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
import { coreIndexViewIdFromObjectMetadataItemFamilySelector } from '@/views/states/selectors/coreIndexViewIdFromObjectMetadataItemFamilySelector';
-type CommandMenuObjectMenuItemProps = {
+type SidePanelObjectMenuItemProps = {
objectMetadataItem: ObjectMetadataItem;
onSelect: (
objectMetadataItem: ObjectMetadataItem,
@@ -24,12 +24,12 @@ type CommandMenuObjectMenuItemProps = {
dragIndex?: number;
};
-export const CommandMenuObjectMenuItem = ({
+export const SidePanelObjectMenuItem = ({
objectMetadataItem,
onSelect,
variant,
dragIndex,
-}: CommandMenuObjectMenuItemProps) => {
+}: SidePanelObjectMenuItemProps) => {
const { t } = useLingui();
const { getIcon } = useIcons();
const { currentDraft } = useDraftNavigationMenuItems();
@@ -60,7 +60,7 @@ export const CommandMenuObjectMenuItem = ({
return (
{variant === 'add' && !isDisabled ? (
- void;
@@ -20,14 +20,14 @@ type CommandMenuObjectPickerItemProps = {
dragIndex?: number;
};
-export const CommandMenuObjectPickerItem = ({
+export const SidePanelObjectPickerItem = ({
objectMetadataItem,
isViewItem,
onSelectObjectForViewEdit,
onChangeObject,
objectMenuItemVariant = 'edit',
dragIndex,
-}: CommandMenuObjectPickerItemProps) => {
+}: SidePanelObjectPickerItemProps) => {
const { getIcon } = useIcons();
if (isViewItem && isDefined(onSelectObjectForViewEdit)) {
@@ -54,7 +54,7 @@ export const CommandMenuObjectPickerItem = ({
}
return (
- void;
@@ -29,7 +29,7 @@ type CommandMenuObjectPickerSubViewProps = {
emptyNoResultsText?: string;
};
-export const CommandMenuObjectPickerSubView = ({
+export const SidePanelObjectPickerSubView = ({
objects,
searchValue,
onSearchChange,
@@ -40,10 +40,10 @@ export const CommandMenuObjectPickerSubView = ({
onChangeObject,
objectMenuItemVariant = 'edit',
emptyNoResultsText,
-}: CommandMenuObjectPickerSubViewProps) => {
+}: SidePanelObjectPickerSubViewProps) => {
const { t } = useLingui();
const { filteredItems, selectableItemIds, isEmpty, hasSearchQuery } =
- useFilteredPickerItems({
+ useSidePanelFilteredPickerItems({
items: objects,
searchQuery: searchValue,
getSearchableValues: (item) => [item.labelPlural],
@@ -57,9 +57,9 @@ export const CommandMenuObjectPickerSubView = ({
const isAddVariant = objectMenuItemVariant === 'add';
const listContent = (
-
+
{filteredItems.map((objectMetadataItem, index) => (
-
))}
{isAddVariant ? (
-
+
}
@@ -80,7 +82,7 @@ export const CommandMenuObjectPickerSubView = ({
onClick={onOpenSystemPicker}
/>
-
+
) : (
)}
-
+
);
return (
-
{isAddVariant ? (
-
+
{({ innerRef, droppableProps, placeholder }) => (
-
-
+
)}
-
+
) : (
-
{listContent}
-
+
)}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuSystemObjectPickerSubView.tsx b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelSystemObjectPickerSubView.tsx
similarity index 67%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuSystemObjectPickerSubView.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelSystemObjectPickerSubView.tsx
index 8f7d502857..38ee11ef8a 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuSystemObjectPickerSubView.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/components/SidePanelSystemObjectPickerSubView.tsx
@@ -1,13 +1,13 @@
import { useLingui } from '@lingui/react/macro';
-import { CommandGroup } from '@/command-menu/components/CommandGroup';
-import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
-import { CommandMenuObjectPickerItem } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuObjectPickerItem';
-import { CommandMenuSubViewWithSearch } from '@/command-menu/components/CommandMenuSubViewWithSearch';
-import { useFilteredPickerItems } from '@/command-menu/hooks/useFilteredPickerItems';
+import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
+import { SidePanelList } from '@/side-panel/components/SidePanelList';
+import { SidePanelObjectPickerItem } from '@/side-panel/pages/navigation-menu-item/components/SidePanelObjectPickerItem';
+import { SidePanelSubViewWithSearch } from '@/side-panel/components/SidePanelSubViewWithSearch';
+import { useSidePanelFilteredPickerItems } from '@/side-panel/hooks/useSidePanelFilteredPickerItems';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-type CommandMenuSystemObjectPickerSubViewProps = {
+type SidePanelSystemObjectPickerSubViewProps = {
systemObjects: ObjectMetadataItem[];
searchValue: string;
onSearchChange: (value: string) => void;
@@ -22,7 +22,7 @@ type CommandMenuSystemObjectPickerSubViewProps = {
emptyNoResultsText?: string;
};
-export const CommandMenuSystemObjectPickerSubView = ({
+export const SidePanelSystemObjectPickerSubView = ({
systemObjects,
searchValue,
onSearchChange,
@@ -32,10 +32,10 @@ export const CommandMenuSystemObjectPickerSubView = ({
onChangeObject,
objectMenuItemVariant = 'edit',
emptyNoResultsText,
-}: CommandMenuSystemObjectPickerSubViewProps) => {
+}: SidePanelSystemObjectPickerSubViewProps) => {
const { t } = useLingui();
const { filteredItems, selectableItemIds, isEmpty, hasSearchQuery } =
- useFilteredPickerItems({
+ useSidePanelFilteredPickerItems({
items: systemObjects,
searchQuery: searchValue,
getSearchableValues: (item) => [item.labelPlural],
@@ -46,22 +46,22 @@ export const CommandMenuSystemObjectPickerSubView = ({
: (emptyNoResultsText ?? t`No system objects available`);
return (
-
-
-
+
{filteredItems.map((objectMetadataItem) => (
-
))}
-
-
-
+
+
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/hooks/useAddFolderToNavigationMenu.ts b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/hooks/useAddFolderToNavigationMenu.ts
similarity index 89%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/hooks/useAddFolderToNavigationMenu.ts
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/hooks/useAddFolderToNavigationMenu.ts
index a3a6dcee99..1078718cf3 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/hooks/useAddFolderToNavigationMenu.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/hooks/useAddFolderToNavigationMenu.ts
@@ -4,7 +4,7 @@ import { IconFolder } from 'twenty-ui/display';
import { useAddFolderToNavigationMenuDraft } from '@/navigation-menu-item/hooks/useAddFolderToNavigationMenuDraft';
import { useNavigationMenuItemsDraftState } from '@/navigation-menu-item/hooks/useNavigationMenuItemsDraftState';
-import { useOpenNavigationMenuItemInCommandMenu } from '@/navigation-menu-item/hooks/useOpenNavigationMenuItemInCommandMenu';
+import { useOpenNavigationMenuItemInSidePanel } from '@/navigation-menu-item/hooks/useOpenNavigationMenuItemInSidePanel';
import { addMenuItemInsertionContextState } from '@/navigation-menu-item/states/addMenuItemInsertionContextState';
import { navigationMenuItemsDraftState } from '@/navigation-menu-item/states/navigationMenuItemsDraftState';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/states/selectedNavigationMenuItemInEditModeState';
@@ -21,8 +21,8 @@ export const useAddFolderToNavigationMenu = () => {
const setSelectedNavigationMenuItemInEditMode = useSetAtomState(
selectedNavigationMenuItemInEditModeState,
);
- const { openNavigationMenuItemInCommandMenu } =
- useOpenNavigationMenuItemInCommandMenu();
+ const { openNavigationMenuItemInSidePanel } =
+ useOpenNavigationMenuItemInSidePanel();
const addMenuItemInsertionContext = useAtomStateValue(
addMenuItemInsertionContextState,
);
@@ -47,7 +47,7 @@ export const useAddFolderToNavigationMenu = () => {
setAddMenuItemInsertionContext(null);
setSelectedNavigationMenuItemInEditMode(itemId);
- openNavigationMenuItemInCommandMenu({
+ openNavigationMenuItemInSidePanel({
pageTitle: t`Edit folder`,
pageIcon: IconFolder,
focusTitleInput: true,
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/hooks/useAddLinkToNavigationMenu.ts b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/hooks/useAddLinkToNavigationMenu.ts
similarity index 89%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/hooks/useAddLinkToNavigationMenu.ts
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/hooks/useAddLinkToNavigationMenu.ts
index d3339a86ce..f8ac4f5deb 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/hooks/useAddLinkToNavigationMenu.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/hooks/useAddLinkToNavigationMenu.ts
@@ -4,7 +4,7 @@ import { IconLink } from 'twenty-ui/display';
import { useAddLinkToNavigationMenuDraft } from '@/navigation-menu-item/hooks/useAddLinkToNavigationMenuDraft';
import { useNavigationMenuItemsDraftState } from '@/navigation-menu-item/hooks/useNavigationMenuItemsDraftState';
-import { useOpenNavigationMenuItemInCommandMenu } from '@/navigation-menu-item/hooks/useOpenNavigationMenuItemInCommandMenu';
+import { useOpenNavigationMenuItemInSidePanel } from '@/navigation-menu-item/hooks/useOpenNavigationMenuItemInSidePanel';
import { addMenuItemInsertionContextState } from '@/navigation-menu-item/states/addMenuItemInsertionContextState';
import { navigationMenuItemsDraftState } from '@/navigation-menu-item/states/navigationMenuItemsDraftState';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/states/selectedNavigationMenuItemInEditModeState';
@@ -21,8 +21,8 @@ export const useAddLinkToNavigationMenu = () => {
const setSelectedNavigationMenuItemInEditMode = useSetAtomState(
selectedNavigationMenuItemInEditModeState,
);
- const { openNavigationMenuItemInCommandMenu } =
- useOpenNavigationMenuItemInCommandMenu();
+ const { openNavigationMenuItemInSidePanel } =
+ useOpenNavigationMenuItemInSidePanel();
const addMenuItemInsertionContext = useAtomStateValue(
addMenuItemInsertionContextState,
);
@@ -48,7 +48,7 @@ export const useAddLinkToNavigationMenu = () => {
setAddMenuItemInsertionContext(null);
setSelectedNavigationMenuItemInEditMode(itemId);
- openNavigationMenuItemInCommandMenu({
+ openNavigationMenuItemInSidePanel({
pageTitle: t`Edit link`,
pageIcon: IconLink,
focusTitleInput: true,
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/hooks/useFolderPickerSelectionData.ts b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/hooks/useFolderPickerSelectionData.ts
similarity index 96%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/hooks/useFolderPickerSelectionData.ts
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/hooks/useFolderPickerSelectionData.ts
index a16f47de97..3bc4fd5b92 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/hooks/useFolderPickerSelectionData.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/hooks/useFolderPickerSelectionData.ts
@@ -1,6 +1,6 @@
import { isDefined } from 'twenty-shared/utils';
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
import { useDraftNavigationMenuItemsAllFolders } from '@/navigation-menu-item/hooks/useDraftNavigationMenuItemsAllFolders';
import { useDraftNavigationMenuItemsWorkspaceFolders } from '@/navigation-menu-item/hooks/useDraftNavigationMenuItemsWorkspaceFolders';
import { useSelectedNavigationMenuItemEditItem } from '@/navigation-menu-item/hooks/useSelectedNavigationMenuItemEditItem';
@@ -45,7 +45,7 @@ type UseFolderPickerSelectionDataParams = {
export const useFolderPickerSelectionData = ({
onCloseSubView,
}: UseFolderPickerSelectionDataParams) => {
- const { closeCommandMenu } = useCommandMenu();
+ const { closeSidePanelMenu } = useSidePanelMenu();
const { moveToFolder } = useNavigationMenuItemMoveRemove();
const selectedNavigationMenuItemInEditMode = useAtomStateValue(
selectedNavigationMenuItemInEditModeState,
@@ -95,7 +95,7 @@ export const useFolderPickerSelectionData = ({
if (isDefined(selectedNavigationMenuItemInEditMode)) {
moveToFolder(selectedNavigationMenuItemInEditMode, folderId);
onCloseSubView();
- closeCommandMenu();
+ closeSidePanelMenu();
}
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/hooks/useNavigationMenuItemEditOrganizeActions.ts b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/hooks/useNavigationMenuItemEditOrganizeActions.ts
similarity index 89%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/hooks/useNavigationMenuItemEditOrganizeActions.ts
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/hooks/useNavigationMenuItemEditOrganizeActions.ts
index 082c9c79fa..e77a68cec0 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/hooks/useNavigationMenuItemEditOrganizeActions.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/hooks/useNavigationMenuItemEditOrganizeActions.ts
@@ -2,9 +2,9 @@ import { useLingui } from '@lingui/react/macro';
import { isDefined } from 'twenty-shared/utils';
import { IconColumnInsertRight } from 'twenty-ui/display';
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
-import { type OrganizeActionsProps } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditOrganizeActions';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
+import { type OrganizeActionsProps } from '@/side-panel/pages/navigation-menu-item/components/SidePanelEditOrganizeActions';
import { useNavigationMenuItemMoveRemove } from '@/navigation-menu-item/hooks/useNavigationMenuItemMoveRemove';
import { useNavigationMenuItemsDraftState } from '@/navigation-menu-item/hooks/useNavigationMenuItemsDraftState';
import { useWorkspaceSectionItems } from '@/navigation-menu-item/hooks/useWorkspaceSectionItems';
@@ -13,7 +13,7 @@ import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-ite
import { type AddMenuItemInsertionContext } from '@/navigation-menu-item/types/AddMenuItemInsertionContext';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
const getAddMenuItemInsertionContext = (
selectedItem: { id: string; folderId?: string | null },
@@ -47,8 +47,8 @@ const getAddMenuItemInsertionContext = (
export const useNavigationMenuItemEditOrganizeActions =
(): OrganizeActionsProps => {
const { t } = useLingui();
- const { closeCommandMenu } = useCommandMenu();
- const { navigateCommandMenu } = useNavigateCommandMenu();
+ const { closeSidePanelMenu } = useSidePanelMenu();
+ const { navigateSidePanel } = useNavigateSidePanel();
const selectedNavigationMenuItemInEditMode = useAtomStateValue(
selectedNavigationMenuItemInEditModeState,
);
@@ -103,7 +103,7 @@ export const useNavigationMenuItemEditOrganizeActions =
if (isDefined(selectedNavigationMenuItemInEditMode)) {
remove(selectedNavigationMenuItemInEditMode);
setSelectedNavigationMenuItemInEditMode(null);
- closeCommandMenu();
+ closeSidePanelMenu();
}
};
@@ -116,8 +116,8 @@ export const useNavigationMenuItemEditOrganizeActions =
);
if (!context) return;
setAddMenuItemInsertionContext(context);
- navigateCommandMenu({
- page: CommandMenuPages.NavigationMenuAddItem,
+ navigateSidePanel({
+ page: SidePanelPages.NavigationMenuAddItem,
pageTitle: t`New sidebar item`,
pageIcon: IconColumnInsertRight,
resetNavigationStack: true,
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/command-menu-navigation-item-actions.ts b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/side-panel-navigation-item-actions.ts
similarity index 77%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/command-menu-navigation-item-actions.ts
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/side-panel-navigation-item-actions.ts
index 9c2d3c1b3a..34c608d4e6 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/command-menu-navigation-item-actions.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/side-panel-navigation-item-actions.ts
@@ -1,4 +1,4 @@
-export enum CommandMenuNavigationItemActions {
+export enum SidePanelNavigationItemActions {
MOVE_UP = 'move-up',
MOVE_DOWN = 'move-down',
MOVE_TO_FOLDER = 'move-to-folder',
diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/utils/getAvailableObjectMetadataForNewSidebarItem.ts b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/utils/getAvailableObjectMetadataForNewSidebarItem.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/utils/getAvailableObjectMetadataForNewSidebarItem.ts
rename to packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/utils/getAvailableObjectMetadataForNewSidebarItem.ts
diff --git a/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/utils/getOrganizeActionsSelectableItemIds.ts b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/utils/getOrganizeActionsSelectableItemIds.ts
new file mode 100644
index 0000000000..fa088f4f2a
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/navigation-menu-item/utils/getOrganizeActionsSelectableItemIds.ts
@@ -0,0 +1,26 @@
+import { SidePanelNavigationItemActions } from '@/side-panel/pages/navigation-menu-item/side-panel-navigation-item-actions';
+
+const ORGANIZE_ACTIONS_WITHOUT_MOVE_TO_FOLDER: SidePanelNavigationItemActions[] =
+ [
+ SidePanelNavigationItemActions.MOVE_UP,
+ SidePanelNavigationItemActions.MOVE_DOWN,
+ SidePanelNavigationItemActions.ADD_BEFORE,
+ SidePanelNavigationItemActions.ADD_AFTER,
+ SidePanelNavigationItemActions.REMOVE,
+ ];
+
+const ORGANIZE_ACTIONS_WITH_MOVE_TO_FOLDER: SidePanelNavigationItemActions[] = [
+ SidePanelNavigationItemActions.MOVE_UP,
+ SidePanelNavigationItemActions.MOVE_DOWN,
+ SidePanelNavigationItemActions.MOVE_TO_FOLDER,
+ SidePanelNavigationItemActions.ADD_BEFORE,
+ SidePanelNavigationItemActions.ADD_AFTER,
+ SidePanelNavigationItemActions.REMOVE,
+];
+
+export const getOrganizeActionsSelectableItemIds = (
+ includeMoveToFolder: boolean,
+): SidePanelNavigationItemActions[] =>
+ includeMoveToFolder
+ ? ORGANIZE_ACTIONS_WITH_MOVE_TO_FOLDER
+ : ORGANIZE_ACTIONS_WITHOUT_MOVE_TO_FOLDER;
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartFiltersSettings.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/ChartFiltersSettings.tsx
similarity index 75%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartFiltersSettings.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/ChartFiltersSettings.tsx
index d7bf8814b4..536c270be2 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartFiltersSettings.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/ChartFiltersSettings.tsx
@@ -1,14 +1,14 @@
-import { useCommandMenuHistory } from '@/command-menu/hooks/useCommandMenuHistory';
-import { SidePanelSubPageNavigationHeader } from '@/command-menu/pages/common/components/SidePanelSubPageNavigationHeader';
-import { ChartFiltersSettingsInitializeStateEffect } from '@/command-menu/pages/page-layout/components/ChartFiltersSettingsInitializeStateEffect';
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
-import { type ChartWidget } from '@/command-menu/pages/page-layout/types/ChartWidget';
-import { type ChartWidgetConfiguration } from '@/command-menu/pages/page-layout/types/ChartWidgetConfiguration';
-import { getChartFiltersSettingsInstanceId } from '@/command-menu/pages/page-layout/utils/getChartFiltersSettingsInstanceId';
+import { useSidePanelHistory } from '@/side-panel/hooks/useSidePanelHistory';
+import { SidePanelSubPageNavigationHeader } from '@/side-panel/pages/common/components/SidePanelSubPageNavigationHeader';
+import { ChartFiltersSettingsInitializeStateEffect } from '@/side-panel/pages/page-layout/components/ChartFiltersSettingsInitializeStateEffect';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useUpdateCurrentWidgetConfig } from '@/side-panel/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
+import { type ChartWidget } from '@/side-panel/pages/page-layout/types/ChartWidget';
+import { type ChartWidgetConfiguration } from '@/side-panel/pages/page-layout/types/ChartWidgetConfiguration';
+import { getChartFiltersSettingsInstanceId } from '@/side-panel/pages/page-layout/utils/getChartFiltersSettingsInstanceId';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { AdvancedFilterCommandMenuContainer } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuContainer';
+import { AdvancedFilterSidePanelContainer } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelContainer';
import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
@@ -38,7 +38,7 @@ export const ChartFiltersSettings = ({
objectMetadataItem,
widget,
}: ChartFiltersSettingsProps) => {
- const { goBackFromCommandMenu } = useCommandMenuHistory();
+ const { goBackFromSidePanel } = useSidePanelHistory();
const { instanceId } = getChartFiltersSettingsInstanceId({
widgetId: widget.id,
@@ -82,7 +82,7 @@ export const ChartFiltersSettings = ({
<>
@@ -93,7 +93,7 @@ export const ChartFiltersSettings = ({
- {
- const { updateCommandMenuPageInfo } = useUpdateCommandMenuPageInfo();
+ const { updateSidePanelPageInfo } = useUpdateSidePanelPageInfo();
const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
const { updateCurrentWidgetConfig } =
useUpdateCurrentWidgetConfig(pageLayoutId);
@@ -67,7 +67,7 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
configToUpdate,
});
- updateCommandMenuPageInfo({
+ updateSidePanelPageInfo({
pageIcon: GRAPH_TYPE_INFORMATION[graphType].icon,
});
@@ -137,8 +137,8 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
: CHART_SETTINGS_HEADINGS.X_AXIS;
return (
-
-
+
+
{
const shouldShowBanner = group.heading.id === bannerTargetHeading.id;
return (
-
+
{shouldShowBanner && hasWidgetTooManyGroups && (
{
configuration={configuration}
/>
))}
-
+
);
})}
-
-
+
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartTypeSelectionSection.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/ChartTypeSelectionSection.tsx
similarity index 90%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartTypeSelectionSection.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/ChartTypeSelectionSection.tsx
index 72f129bb0a..d746fa949e 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartTypeSelectionSection.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/ChartTypeSelectionSection.tsx
@@ -1,9 +1,9 @@
-import { GRAPH_TYPE_INFORMATION } from '@/command-menu/pages/page-layout/constants/GraphTypeInformation';
+import { GRAPH_TYPE_INFORMATION } from '@/side-panel/pages/page-layout/constants/GraphTypeInformation';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { styled } from '@linaria/react';
import { FeatureFlagKey } from '~/generated-metadata/graphql';
-import { GraphType } from '@/command-menu/pages/page-layout/types/GraphType';
+import { GraphType } from '@/side-panel/pages/page-layout/types/GraphType';
import { t } from '@lingui/core/macro';
import { MenuPicker } from 'twenty-ui/navigation';
import { themeCssVariables } from 'twenty-ui/theme-constants';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutChartSettings.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutChartSettings.tsx
similarity index 79%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutChartSettings.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutChartSettings.tsx
index 3e9632f2a7..92038948ee 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutChartSettings.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutChartSettings.tsx
@@ -1,7 +1,7 @@
-import { ChartSettings } from '@/command-menu/pages/page-layout/components/ChartSettings';
-import { WidgetSettingsFooter } from '@/command-menu/pages/page-layout/components/WidgetSettingsFooter';
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { isChartWidget } from '@/command-menu/pages/page-layout/utils/isChartWidget';
+import { ChartSettings } from '@/side-panel/pages/page-layout/components/ChartSettings';
+import { WidgetSettingsFooter } from '@/side-panel/pages/page-layout/components/WidgetSettingsFooter';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { isChartWidget } from '@/side-panel/pages/page-layout/utils/isChartWidget';
import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
import { WidgetComponentInstanceContext } from '@/page-layout/widgets/states/contexts/WidgetComponentInstanceContext';
@@ -15,7 +15,7 @@ const StyledContainer = styled.div`
height: 100%;
`;
-export const CommandMenuPageLayoutChartSettings = () => {
+export const SidePanelPageLayoutChartSettings = () => {
const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
const pageLayoutDraft = useAtomComponentStateValue(
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutFieldsLayout.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldsLayout.tsx
similarity index 78%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutFieldsLayout.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldsLayout.tsx
index 03690c9f0d..3d01856631 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutFieldsLayout.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldsLayout.tsx
@@ -1,7 +1,7 @@
-import { useCommandMenuHistory } from '@/command-menu/hooks/useCommandMenuHistory';
-import { SidePanelSubPageNavigationHeader } from '@/command-menu/pages/common/components/SidePanelSubPageNavigationHeader';
-import { usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord';
-import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
+import { useSidePanelHistory } from '@/side-panel/hooks/useSidePanelHistory';
+import { SidePanelSubPageNavigationHeader } from '@/side-panel/pages/common/components/SidePanelSubPageNavigationHeader';
+import { usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord';
+import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
import { useTemporaryFieldsConfiguration } from '@/page-layout/hooks/useTemporaryFieldsConfiguration';
import { FieldsConfigurationEditor } from '@/page-layout/widgets/fields/components/FieldsConfigurationEditor';
import { FieldsWidgetGroupsDraftInitializationEffect } from '@/page-layout/widgets/fields/components/FieldsWidgetGroupsDraftInitializationEffect';
@@ -29,8 +29,8 @@ const StyledContainer = styled.div`
overflow-y: auto;
`;
-export const CommandMenuPageLayoutFieldsLayout = () => {
- const { goBackFromCommandMenu } = useCommandMenuHistory();
+export const SidePanelPageLayoutFieldsLayout = () => {
+ const { goBackFromSidePanel } = useSidePanelHistory();
const { pageLayoutId } =
usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord();
@@ -54,7 +54,7 @@ export const CommandMenuPageLayoutFieldsLayout = () => {
{
+export const SidePanelPageLayoutFieldsSettings = () => {
const { t } = useLingui();
- const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu();
+ const { navigatePageLayoutSidePanel } = useNavigatePageLayoutSidePanel();
const { pageLayoutId, objectNameSingular } =
usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord();
@@ -54,8 +54,8 @@ export const CommandMenuPageLayoutFieldsSettings = () => {
);
const handleNavigateToLayout = () => {
- navigatePageLayoutCommandMenu({
- commandMenuPage: CommandMenuPages.PageLayoutFieldsLayout,
+ navigatePageLayoutSidePanel({
+ sidePanelPage: SidePanelPages.PageLayoutFieldsLayout,
});
};
@@ -73,12 +73,9 @@ export const CommandMenuPageLayoutFieldsSettings = () => {
return (
-
-
-
+
+
+
{
contextualTextPosition="right"
/>
-
-
-
+
+
+
);
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutGraphFilter.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutGraphFilter.tsx
similarity index 84%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutGraphFilter.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutGraphFilter.tsx
index 557c7cd389..a36b791ec2 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutGraphFilter.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutGraphFilter.tsx
@@ -1,6 +1,6 @@
-import { ChartFiltersSettings } from '@/command-menu/pages/page-layout/components/ChartFiltersSettings';
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { isChartWidget } from '@/command-menu/pages/page-layout/utils/isChartWidget';
+import { ChartFiltersSettings } from '@/side-panel/pages/page-layout/components/ChartFiltersSettings';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { isChartWidget } from '@/side-panel/pages/page-layout/utils/isChartWidget';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
@@ -8,7 +8,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { isDefined } from 'twenty-shared/utils';
-export const CommandMenuPageLayoutGraphFilter = () => {
+export const SidePanelPageLayoutGraphFilter = () => {
const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
const pageLayoutDraft = useAtomComponentStateValue(
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutIframeSettings.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutIframeSettings.tsx
similarity index 88%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutIframeSettings.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutIframeSettings.tsx
index 84391efca7..9d598b6917 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutIframeSettings.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutIframeSettings.tsx
@@ -1,6 +1,6 @@
-import { WidgetSettingsFooter } from '@/command-menu/pages/page-layout/components/WidgetSettingsFooter';
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
+import { WidgetSettingsFooter } from '@/side-panel/pages/page-layout/components/WidgetSettingsFooter';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
import { FormTextFieldInput } from '@/object-record/record-field/ui/form-types/components/FormTextFieldInput';
import { useUpdatePageLayoutWidget } from '@/page-layout/hooks/useUpdatePageLayoutWidget';
import { styled } from '@linaria/react';
@@ -25,7 +25,7 @@ const StyledContainer = styled.div`
padding: ${themeCssVariables.spacing[2]};
`;
-export const CommandMenuPageLayoutIframeSettings = () => {
+export const SidePanelPageLayoutIframeSettings = () => {
const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId);
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutTabSettings.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutTabSettings.tsx
similarity index 85%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutTabSettings.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutTabSettings.tsx
index 0de75cb603..4cadb83a85 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutTabSettings.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutTabSettings.tsx
@@ -1,9 +1,9 @@
-import { CommandGroup } from '@/command-menu/components/CommandGroup';
+import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
-import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { TAB_SETTINGS_SELECTABLE_ITEM_IDS } from '@/command-menu/pages/page-layout/constants/settings/TabSettingsSelectableItemIds';
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { SidePanelList } from '@/side-panel/components/SidePanelList';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { TAB_SETTINGS_SELECTABLE_ITEM_IDS } from '@/side-panel/pages/page-layout/constants/settings/TabSettingsSelectableItemIds';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
import { useDeletePageLayoutTab } from '@/page-layout/hooks/useDeletePageLayoutTab';
import { useDuplicatePageLayoutTab } from '@/page-layout/hooks/useDuplicatePageLayoutTab';
import { useMovePageLayoutTab } from '@/page-layout/hooks/useMovePageLayoutTab';
@@ -22,8 +22,8 @@ import {
IconTrash,
} from 'twenty-ui/display';
-export const CommandMenuPageLayoutTabSettings = () => {
- const { closeCommandMenu } = useCommandMenu();
+export const SidePanelPageLayoutTabSettings = () => {
+ const { closeSidePanelMenu } = useSidePanelMenu();
const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
const pageLayoutDraft = useAtomComponentStateValue(
@@ -58,7 +58,7 @@ export const CommandMenuPageLayoutTabSettings = () => {
const handleDelete = () => {
deleteTab(tab.id);
setPageLayoutTabSettingsOpenTabId(null);
- closeCommandMenu();
+ closeSidePanelMenu();
};
const selectableItemIds = [
@@ -70,8 +70,8 @@ export const CommandMenuPageLayoutTabSettings = () => {
return (
<>
-
-
+
+
{canMoveLeft && (
{
/>
)}
-
-
+
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutWidgetTypeSelect.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutWidgetTypeSelect.tsx
similarity index 84%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutWidgetTypeSelect.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutWidgetTypeSelect.tsx
index 6e8e296d53..2822d01192 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutWidgetTypeSelect.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutWidgetTypeSelect.tsx
@@ -1,11 +1,11 @@
-import { CommandGroup } from '@/command-menu/components/CommandGroup';
+import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
-import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu';
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { getFrontComponentWidgetTypeSelectItemId } from '@/command-menu/pages/page-layout/utils/getFrontComponentWidgetTypeSelectItemId';
-import { isExistingWidgetMissingOrDifferentType } from '@/command-menu/pages/page-layout/utils/isExistingWidgetMissingOrDifferentType';
+import { SidePanelList } from '@/side-panel/components/SidePanelList';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { useNavigatePageLayoutSidePanel } from '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { getFrontComponentWidgetTypeSelectItemId } from '@/side-panel/pages/page-layout/utils/getFrontComponentWidgetTypeSelectItemId';
+import { isExistingWidgetMissingOrDifferentType } from '@/side-panel/pages/page-layout/utils/isExistingWidgetMissingOrDifferentType';
import { FIND_MANY_FRONT_COMPONENTS } from '@/front-components/graphql/queries/findManyFrontComponents';
import { useCreatePageLayoutFrontComponentWidget } from '@/page-layout/hooks/useCreatePageLayoutFrontComponentWidget';
import { useCreatePageLayoutGraphWidget } from '@/page-layout/hooks/useCreatePageLayoutGraphWidget';
@@ -21,7 +21,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useQuery } from '@apollo/client';
import { t } from '@lingui/core/macro';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import {
IconAlignBoxLeftTop,
@@ -35,12 +35,12 @@ import {
WidgetType,
} from '~/generated-metadata/graphql';
-export const CommandMenuPageLayoutWidgetTypeSelect = () => {
+export const SidePanelPageLayoutWidgetTypeSelect = () => {
const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
- const { closeCommandMenu } = useCommandMenu();
+ const { closeSidePanelMenu } = useSidePanelMenu();
- const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu();
+ const { navigatePageLayoutSidePanel } = useNavigatePageLayoutSidePanel();
const { buildBarChartFieldSelection } = useOpportunityDefaultChartConfig();
@@ -111,8 +111,8 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
setPageLayoutEditingWidgetId(newWidget.id);
}
- navigatePageLayoutCommandMenu({
- commandMenuPage: CommandMenuPages.PageLayoutGraphTypeSelect,
+ navigatePageLayoutSidePanel({
+ sidePanelPage: SidePanelPages.PageLayoutGraphTypeSelect,
focusTitleInput: true,
});
};
@@ -132,8 +132,8 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
setPageLayoutEditingWidgetId(newWidget.id);
}
- navigatePageLayoutCommandMenu({
- commandMenuPage: CommandMenuPages.PageLayoutIframeSettings,
+ navigatePageLayoutSidePanel({
+ sidePanelPage: SidePanelPages.PageLayoutIframeSettings,
focusTitleInput: true,
});
};
@@ -156,7 +156,7 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
setPageLayoutEditingWidgetId(newWidget.id);
}
- closeCommandMenu();
+ closeSidePanelMenu();
};
const handleCreateFrontComponentWidget = (frontComponent: FrontComponent) => {
@@ -177,7 +177,7 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
setPageLayoutEditingWidgetId(newWidget.id);
}
- closeCommandMenu();
+ closeSidePanelMenu();
};
const selectableItemIds = [
@@ -188,8 +188,8 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
];
return (
-
-
+
+
{
onClick={handleNavigateToRichTextSettings}
/>
-
+
{isApplicationEnabled && frontComponentsWithSelectItemId.length > 0 && (
-
+
{frontComponentsWithSelectItemId.map(
({ frontComponent, selectItemId }) => (
{
),
)}
-
+
)}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/WidgetSettingsFooter.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/WidgetSettingsFooter.tsx
similarity index 96%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/WidgetSettingsFooter.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/WidgetSettingsFooter.tsx
index 7f4f315999..2d07d73845 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/WidgetSettingsFooter.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/WidgetSettingsFooter.tsx
@@ -3,7 +3,7 @@ import { useDuplicatePageLayoutWidget } from '@/page-layout/hooks/useDuplicatePa
import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
import { OptionsDropdownMenu } from '@/ui/layout/dropdown/components/OptionsDropdownMenu';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
-import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter';
+import { SidePanelFooter } from '@/ui/layout/side-panel/components/SidePanelFooter';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
@@ -48,7 +48,7 @@ export const WidgetSettingsFooter = ({
);
return (
- {
- navigatePageLayoutCommandMenu({
- commandMenuPage: CommandMenuPages.PageLayoutGraphFilter,
+ navigatePageLayoutSidePanel({
+ sidePanelPage: SidePanelPages.PageLayoutGraphFilter,
});
};
if (item.id === CHART_CONFIGURATION_SETTING_IDS.FILTER) {
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectableListItem.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectableListItem.tsx
similarity index 89%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectableListItem.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectableListItem.tsx
index ad1282b72c..a399214242 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectableListItem.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectableListItem.tsx
@@ -1,7 +1,7 @@
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
-import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useUpdateCurrentWidgetConfig } from '@/side-panel/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
+import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { type ExtendedAggregateOperations } from '@/object-record/record-table/types/ExtendedAggregateOperations';
import { convertExtendedAggregateOperationToAggregateOperation } from '@/object-record/utils/convertExtendedAggregateOperationToAggregateOperation';
import { DASHBOARD_AGGREGATE_OPERATION_RATIO } from '@/page-layout/widgets/graph/constants/DashboardAggregateOperationRatio';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent.tsx
similarity index 90%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent.tsx
index dd8b15c94c..c7a722dc30 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent.tsx
@@ -1,9 +1,9 @@
-import { ChartAggregateOperationSelectableListItem } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectableListItem';
-import { ChartRatioAggregateOperationSelectableListItem } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartRatioAggregateOperationSelectableListItem';
-import { ChartRatioOptionValueSelectionDropdownContent } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionValueSelectionDropdownContent';
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { ChartAggregateOperationSelectableListItem } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectableListItem';
+import { ChartRatioAggregateOperationSelectableListItem } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartRatioAggregateOperationSelectableListItem';
+import { ChartRatioOptionValueSelectionDropdownContent } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartRatioOptionValueSelectionDropdownContent';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { DateAggregateOperations } from '@/object-record/record-table/constants/DateAggregateOperations';
import { getAvailableAggregateOperationsForFieldMetadataType } from '@/object-record/record-table/record-table-footer/utils/getAvailableAggregateOperationsForFieldMetadataType';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAxisNameSelectionDropdownContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartAxisNameSelectionDropdownContent.tsx
similarity index 85%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAxisNameSelectionDropdownContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartAxisNameSelectionDropdownContent.tsx
index aaceda0c5a..86c72f0aea 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAxisNameSelectionDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartAxisNameSelectionDropdownContent.tsx
@@ -1,8 +1,8 @@
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
-import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
-import { getChartAxisNameDisplayOptions } from '@/command-menu/pages/page-layout/utils/getChartAxisNameDisplayOptions';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useUpdateCurrentWidgetConfig } from '@/side-panel/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
+import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
+import { getChartAxisNameDisplayOptions } from '@/side-panel/pages/page-layout/utils/getChartAxisNameDisplayOptions';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx
similarity index 94%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx
index 70e7ebaf5a..a245aea865 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx
@@ -1,4 +1,4 @@
-import { CHART_SETTINGS_PALETTE_COLOR_GROUP_COUNT } from '@/command-menu/pages/page-layout/constants/ChartSettingsPaletteColorGroupCount';
+import { CHART_SETTINGS_PALETTE_COLOR_GROUP_COUNT } from '@/side-panel/pages/page-layout/constants/ChartSettingsPaletteColorGroupCount';
import { createGraphColorRegistry } from '@/page-layout/widgets/graph/utils/createGraphColorRegistry';
import { generateGroupColor } from '@/page-layout/widgets/graph/utils/generateGroupColor';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx
similarity index 94%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx
index 50f51fde3e..6670a6c419 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx
@@ -1,4 +1,4 @@
-import { CHART_SETTINGS_PALETTE_COLOR_GROUP_COUNT } from '@/command-menu/pages/page-layout/constants/ChartSettingsPaletteColorGroupCount';
+import { CHART_SETTINGS_PALETTE_COLOR_GROUP_COUNT } from '@/side-panel/pages/page-layout/constants/ChartSettingsPaletteColorGroupCount';
import { createGraphColorRegistry } from '@/page-layout/widgets/graph/utils/createGraphColorRegistry';
import { getColorSchemeByIndex } from '@/page-layout/widgets/graph/utils/getColorSchemeByIndex';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx
similarity index 86%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx
index 9c585c95b4..76ed4cd8c1 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx
@@ -1,10 +1,10 @@
-import { ChartColorGradientOption } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption';
-import { ChartColorPaletteOption } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption';
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
-import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
-import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { ChartColorGradientOption } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartColorGradientOption';
+import { ChartColorPaletteOption } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartColorPaletteOption';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useUpdateCurrentWidgetConfig } from '@/side-panel/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
+import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
+import { type ChartConfiguration } from '@/side-panel/pages/page-layout/types/ChartConfiguration';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartDataSourceDropdownContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartDataSourceDropdownContent.tsx
similarity index 94%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartDataSourceDropdownContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartDataSourceDropdownContent.tsx
index 63f890e14c..5965c8e2f9 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartDataSourceDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartDataSourceDropdownContent.tsx
@@ -1,7 +1,7 @@
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { useResetChartDraftFiltersSettings } from '@/command-menu/pages/page-layout/hooks/useResetChartDraftFiltersSettings';
-import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
-import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useResetChartDraftFiltersSettings } from '@/side-panel/pages/page-layout/hooks/useResetChartDraftFiltersSettings';
+import { useUpdateCurrentWidgetConfig } from '@/side-panel/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
+import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { useObjectPermissions } from '@/object-record/hooks/useObjectPermissions';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartDateGranularitySelectionDropdownContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartDateGranularitySelectionDropdownContent.tsx
similarity index 90%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartDateGranularitySelectionDropdownContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartDateGranularitySelectionDropdownContent.tsx
index bb2dfb0e2c..7c511f9cca 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartDateGranularitySelectionDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartDateGranularitySelectionDropdownContent.tsx
@@ -1,9 +1,9 @@
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
-import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
-import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
-import { getDateGranularityLabel } from '@/command-menu/pages/page-layout/utils/getDateGranularityLabel';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useUpdateCurrentWidgetConfig } from '@/side-panel/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
+import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
+import { type ChartConfiguration } from '@/side-panel/pages/page-layout/types/ChartConfiguration';
+import { getDateGranularityLabel } from '@/side-panel/pages/page-layout/utils/getDateGranularityLabel';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { type FieldConfiguration } from '@/page-layout/types/FieldConfiguration';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartDateGranularityXSelectionDropdownContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartDateGranularityXSelectionDropdownContent.tsx
similarity index 66%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartDateGranularityXSelectionDropdownContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartDateGranularityXSelectionDropdownContent.tsx
index 813768a490..349805714e 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartDateGranularityXSelectionDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartDateGranularityXSelectionDropdownContent.tsx
@@ -1,4 +1,4 @@
-import { ChartDateGranularitySelectionDropdownContent } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartDateGranularitySelectionDropdownContent';
+import { ChartDateGranularitySelectionDropdownContent } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartDateGranularitySelectionDropdownContent';
export const ChartDateGranularityXSelectionDropdownContent = () => {
return ;
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartDateGranularityYSelectionDropdownContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartDateGranularityYSelectionDropdownContent.tsx
similarity index 66%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartDateGranularityYSelectionDropdownContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartDateGranularityYSelectionDropdownContent.tsx
index d631aa3f6a..bafa17ad3c 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartDateGranularityYSelectionDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartDateGranularityYSelectionDropdownContent.tsx
@@ -1,4 +1,4 @@
-import { ChartDateGranularitySelectionDropdownContent } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartDateGranularitySelectionDropdownContent';
+import { ChartDateGranularitySelectionDropdownContent } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartDateGranularitySelectionDropdownContent';
export const ChartDateGranularityYSelectionDropdownContent = () => {
return ;
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent.tsx
similarity index 92%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent.tsx
index 78512519c4..649ff92eb2 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent.tsx
@@ -1,7 +1,7 @@
-import { ChartAggregateOperationSelectionDropdownContent } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent';
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { ChartAggregateOperationSelectionDropdownContent } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { isHiddenSystemField } from '@/object-metadata/utils/isHiddenSystemField';
import { isFieldRelation } from '@/object-record/record-field/ui/types/guards/isFieldRelation';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionCompositeFieldView.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionCompositeFieldView.tsx
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionCompositeFieldView.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionCompositeFieldView.tsx
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContent.tsx
similarity index 53%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContent.tsx
index d06b3423bf..43af03f6f4 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContent.tsx
@@ -1,6 +1,6 @@
-import { ChartGroupByFieldSelectionDropdownContentBase } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContentBase';
-import { type TypedBarChartConfiguration } from '@/command-menu/pages/page-layout/types/TypedBarChartConfiguration';
-import { type TypedLineChartConfiguration } from '@/command-menu/pages/page-layout/types/TypedLineChartConfiguration';
+import { ChartGroupByFieldSelectionDropdownContentBase } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContentBase';
+import { type TypedBarChartConfiguration } from '@/side-panel/pages/page-layout/types/TypedBarChartConfiguration';
+import { type TypedLineChartConfiguration } from '@/side-panel/pages/page-layout/types/TypedLineChartConfiguration';
export const ChartGroupByFieldSelectionDropdownContent = () => {
return (
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContentBase.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContentBase.tsx
similarity index 92%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContentBase.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContentBase.tsx
index 5ad61adbb8..11ed7cc0b1 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContentBase.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContentBase.tsx
@@ -1,10 +1,10 @@
-import { ChartGroupByFieldSelectionCompositeFieldView } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionCompositeFieldView';
-import { ChartGroupByFieldSelectionRelationFieldView } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionRelationFieldView';
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
-import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
-import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
-import { buildChartGroupByFieldConfigUpdate } from '@/command-menu/pages/page-layout/utils/buildChartGroupByFieldConfigUpdate';
+import { ChartGroupByFieldSelectionCompositeFieldView } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionCompositeFieldView';
+import { ChartGroupByFieldSelectionRelationFieldView } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionRelationFieldView';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useUpdateCurrentWidgetConfig } from '@/side-panel/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
+import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
+import { type ChartConfiguration } from '@/side-panel/pages/page-layout/types/ChartConfiguration';
+import { buildChartGroupByFieldConfigUpdate } from '@/side-panel/pages/page-layout/utils/buildChartGroupByFieldConfigUpdate';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { isHiddenSystemField } from '@/object-metadata/utils/isHiddenSystemField';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionRelationFieldView.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionRelationFieldView.tsx
similarity index 98%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionRelationFieldView.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionRelationFieldView.tsx
index f487ecddff..0614e68329 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionRelationFieldView.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionRelationFieldView.tsx
@@ -1,4 +1,4 @@
-import { ChartGroupByFieldSelectionCompositeFieldView } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionCompositeFieldView';
+import { ChartGroupByFieldSelectionCompositeFieldView } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionCompositeFieldView';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { isHiddenSystemField } from '@/object-metadata/utils/isHiddenSystemField';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartManualSortSubMenuContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartManualSortSubMenuContent.tsx
similarity index 88%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartManualSortSubMenuContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartManualSortSubMenuContent.tsx
index 374ca103de..3a1e18c598 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartManualSortSubMenuContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartManualSortSubMenuContent.tsx
@@ -1,11 +1,11 @@
import { type DropResult } from '@hello-pangea/dnd';
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
-import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useUpdateCurrentWidgetConfig } from '@/side-panel/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
+import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
-import { getManualSortOrderFromConfig } from '@/command-menu/pages/page-layout/utils/getManualSortOrderFromConfig';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { getManualSortOrderFromConfig } from '@/side-panel/pages/page-layout/utils/getManualSortOrderFromConfig';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { sortOptionsForManualOrder } from '@/page-layout/widgets/graph/utils/sortOptionsForManualOrder';
import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartPieFieldSelectionDropdownContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartPieFieldSelectionDropdownContent.tsx
similarity index 59%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartPieFieldSelectionDropdownContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartPieFieldSelectionDropdownContent.tsx
index bf76377c8e..0ee39b6e2c 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartPieFieldSelectionDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartPieFieldSelectionDropdownContent.tsx
@@ -1,5 +1,5 @@
-import { ChartGroupByFieldSelectionDropdownContentBase } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContentBase';
-import { type TypedPieChartConfiguration } from '@/command-menu/pages/page-layout/types/TypedPieChartConfiguration';
+import { ChartGroupByFieldSelectionDropdownContentBase } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContentBase';
+import { type TypedPieChartConfiguration } from '@/side-panel/pages/page-layout/types/TypedPieChartConfiguration';
export const ChartPieFieldSelectionDropdownContent = () => {
return (
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioAggregateOperationSelectableListItem.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartRatioAggregateOperationSelectableListItem.tsx
similarity index 86%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioAggregateOperationSelectableListItem.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartRatioAggregateOperationSelectableListItem.tsx
index b980fbef24..292b2a325d 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioAggregateOperationSelectableListItem.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartRatioAggregateOperationSelectableListItem.tsx
@@ -1,6 +1,6 @@
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { DASHBOARD_AGGREGATE_OPERATION_RATIO } from '@/page-layout/widgets/graph/constants/DashboardAggregateOperationRatio';
import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionBooleanSelectableListItem.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartRatioOptionBooleanSelectableListItem.tsx
similarity index 86%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionBooleanSelectableListItem.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartRatioOptionBooleanSelectableListItem.tsx
index 6bc9b18e7f..38fb1e9ee8 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionBooleanSelectableListItem.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartRatioOptionBooleanSelectableListItem.tsx
@@ -1,7 +1,7 @@
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
-import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useUpdateCurrentWidgetConfig } from '@/side-panel/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
+import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionSelectSelectableListItem.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartRatioOptionSelectSelectableListItem.tsx
similarity index 86%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionSelectSelectableListItem.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartRatioOptionSelectSelectableListItem.tsx
index ec2df8c85e..8de708e809 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionSelectSelectableListItem.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartRatioOptionSelectSelectableListItem.tsx
@@ -1,7 +1,7 @@
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
-import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useUpdateCurrentWidgetConfig } from '@/side-panel/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
+import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionValueSelectionDropdownContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartRatioOptionValueSelectionDropdownContent.tsx
similarity index 88%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionValueSelectionDropdownContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartRatioOptionValueSelectionDropdownContent.tsx
index 6d3d33e66d..5e0a058484 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionValueSelectionDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartRatioOptionValueSelectionDropdownContent.tsx
@@ -1,8 +1,8 @@
-import { ChartRatioOptionBooleanSelectableListItem } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionBooleanSelectableListItem';
-import { ChartRatioOptionSelectSelectableListItem } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionSelectSelectableListItem';
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { ChartRatioOptionBooleanSelectableListItem } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartRatioOptionBooleanSelectableListItem';
+import { ChartRatioOptionSelectSelectableListItem } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartRatioOptionSelectSelectableListItem';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartSortByGroupByFieldDropdownContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartSortByGroupByFieldDropdownContent.tsx
similarity index 83%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartSortByGroupByFieldDropdownContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartSortByGroupByFieldDropdownContent.tsx
index 0665d50f93..f19096011f 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartSortByGroupByFieldDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartSortByGroupByFieldDropdownContent.tsx
@@ -1,15 +1,15 @@
import { useState } from 'react';
-import { ChartManualSortSubMenuContent } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartManualSortSubMenuContent';
-import { AGGREGATE_SORT_BY_OPTIONS } from '@/command-menu/pages/page-layout/constants/AggregateSortByOptions';
-import { useGraphGroupBySortOptionLabels } from '@/command-menu/pages/page-layout/hooks/useGraphGroupBySortOptionLabels';
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
-import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
-import { filterSortOptionsByFieldType } from '@/command-menu/pages/page-layout/utils/filterSortOptionsByFieldType';
-import { getDefaultManualSortOrder } from '@/command-menu/pages/page-layout/utils/getDefaultManualSortOrder';
-import { getSortIconForFieldType } from '@/command-menu/pages/page-layout/utils/getSortIconForFieldType';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { ChartManualSortSubMenuContent } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartManualSortSubMenuContent';
+import { AGGREGATE_SORT_BY_OPTIONS } from '@/side-panel/pages/page-layout/constants/AggregateSortByOptions';
+import { useGraphGroupBySortOptionLabels } from '@/side-panel/pages/page-layout/hooks/useGraphGroupBySortOptionLabels';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useUpdateCurrentWidgetConfig } from '@/side-panel/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
+import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
+import { filterSortOptionsByFieldType } from '@/side-panel/pages/page-layout/utils/filterSortOptionsByFieldType';
+import { getDefaultManualSortOrder } from '@/side-panel/pages/page-layout/utils/getDefaultManualSortOrder';
+import { getSortIconForFieldType } from '@/side-panel/pages/page-layout/utils/getSortIconForFieldType';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartSortBySelectionDropdownContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartSortBySelectionDropdownContent.tsx
similarity index 86%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartSortBySelectionDropdownContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartSortBySelectionDropdownContent.tsx
index 4e87fe2491..147cf301ff 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartSortBySelectionDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartSortBySelectionDropdownContent.tsx
@@ -1,15 +1,15 @@
import { useState } from 'react';
-import { ChartManualSortSubMenuContent } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartManualSortSubMenuContent';
-import { X_SORT_BY_OPTIONS } from '@/command-menu/pages/page-layout/constants/XSortByOptions';
-import { useGraphXSortOptionLabels } from '@/command-menu/pages/page-layout/hooks/useGraphXSortOptionLabels';
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
-import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
-import { filterSortOptionsByFieldType } from '@/command-menu/pages/page-layout/utils/filterSortOptionsByFieldType';
-import { getDefaultManualSortOrder } from '@/command-menu/pages/page-layout/utils/getDefaultManualSortOrder';
-import { getSortIconForFieldType } from '@/command-menu/pages/page-layout/utils/getSortIconForFieldType';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { ChartManualSortSubMenuContent } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartManualSortSubMenuContent';
+import { X_SORT_BY_OPTIONS } from '@/side-panel/pages/page-layout/constants/XSortByOptions';
+import { useGraphXSortOptionLabels } from '@/side-panel/pages/page-layout/hooks/useGraphXSortOptionLabels';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useUpdateCurrentWidgetConfig } from '@/side-panel/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
+import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
+import { filterSortOptionsByFieldType } from '@/side-panel/pages/page-layout/utils/filterSortOptionsByFieldType';
+import { getDefaultManualSortOrder } from '@/side-panel/pages/page-layout/utils/getDefaultManualSortOrder';
+import { getSortIconForFieldType } from '@/side-panel/pages/page-layout/utils/getSortIconForFieldType';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartXAxisFieldSelectionDropdownContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartXAxisFieldSelectionDropdownContent.tsx
similarity index 53%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartXAxisFieldSelectionDropdownContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartXAxisFieldSelectionDropdownContent.tsx
index 2c62b33340..331fe32127 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartXAxisFieldSelectionDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartXAxisFieldSelectionDropdownContent.tsx
@@ -1,6 +1,6 @@
-import { ChartGroupByFieldSelectionDropdownContentBase } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContentBase';
-import { type TypedBarChartConfiguration } from '@/command-menu/pages/page-layout/types/TypedBarChartConfiguration';
-import { type TypedLineChartConfiguration } from '@/command-menu/pages/page-layout/types/TypedLineChartConfiguration';
+import { ChartGroupByFieldSelectionDropdownContentBase } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContentBase';
+import { type TypedBarChartConfiguration } from '@/side-panel/pages/page-layout/types/TypedBarChartConfiguration';
+import { type TypedLineChartConfiguration } from '@/side-panel/pages/page-layout/types/TypedLineChartConfiguration';
export const ChartXAxisFieldSelectionDropdownContent = () => {
return (
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/AggregateChartSettings.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/AggregateChartSettings.ts
new file mode 100644
index 0000000000..668883666f
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/AggregateChartSettings.ts
@@ -0,0 +1,22 @@
+import { CHART_SETTINGS_HEADINGS } from '@/side-panel/pages/page-layout/constants/ChartSettingsHeadings';
+import { CHART_DATA_SOURCE_SETTING } from '@/side-panel/pages/page-layout/constants/settings/ChartDataSourceSetting';
+import { DATA_DISPLAY_AGGREGATE_SETTING } from '@/side-panel/pages/page-layout/constants/settings/DataDisplayAggregateSetting';
+import { FILTER_SETTING } from '@/side-panel/pages/page-layout/constants/settings/FilterSetting';
+import { PREFIX_SETTING } from '@/side-panel/pages/page-layout/constants/settings/PrefixSetting';
+import { SUFFIX_SETTING } from '@/side-panel/pages/page-layout/constants/settings/SuffixSetting';
+import { type ChartSettingsGroup } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+
+export const AGGREGATE_CHART_SETTINGS: ChartSettingsGroup[] = [
+ {
+ heading: CHART_SETTINGS_HEADINGS.DATA,
+ items: [
+ CHART_DATA_SOURCE_SETTING,
+ FILTER_SETTING,
+ DATA_DISPLAY_AGGREGATE_SETTING,
+ ],
+ },
+ {
+ heading: CHART_SETTINGS_HEADINGS.STYLE,
+ items: [PREFIX_SETTING, SUFFIX_SETTING],
+ },
+];
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/AggregateSortByOptions.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/AggregateSortByOptions.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/AggregateSortByOptions.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/AggregateSortByOptions.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/ChartSettingsHeadings.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/ChartSettingsHeadings.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/ChartSettingsHeadings.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/ChartSettingsHeadings.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/ChartSettingsPaletteColorGroupCount.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/ChartSettingsPaletteColorGroupCount.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/ChartSettingsPaletteColorGroupCount.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/ChartSettingsPaletteColorGroupCount.ts
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/GaugeChartSettings.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/GaugeChartSettings.ts
new file mode 100644
index 0000000000..a62615b503
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/GaugeChartSettings.ts
@@ -0,0 +1,16 @@
+import { CHART_SETTINGS_HEADINGS } from '@/side-panel/pages/page-layout/constants/ChartSettingsHeadings';
+import { CHART_DATA_SOURCE_SETTING } from '@/side-panel/pages/page-layout/constants/settings/ChartDataSourceSetting';
+import { DATA_LABELS_SETTING } from '@/side-panel/pages/page-layout/constants/settings/DataLabelsSetting';
+import { FILTER_SETTING } from '@/side-panel/pages/page-layout/constants/settings/FilterSetting';
+import { type ChartSettingsGroup } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+
+export const GAUGE_CHART_SETTINGS: ChartSettingsGroup[] = [
+ {
+ heading: CHART_SETTINGS_HEADINGS.DATA,
+ items: [CHART_DATA_SOURCE_SETTING, FILTER_SETTING],
+ },
+ {
+ heading: CHART_SETTINGS_HEADINGS.STYLE,
+ items: [DATA_LABELS_SETTING],
+ },
+];
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/GraphConfigurationTypeToConfigTypename.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/GraphConfigurationTypeToConfigTypename.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/GraphConfigurationTypeToConfigTypename.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/GraphConfigurationTypeToConfigTypename.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/GraphTypeInformation.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/GraphTypeInformation.ts
similarity index 64%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/GraphTypeInformation.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/GraphTypeInformation.ts
index 64169cd867..4cf733eeb1 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/GraphTypeInformation.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/GraphTypeInformation.ts
@@ -1,10 +1,10 @@
-import { AGGREGATE_CHART_SETTINGS } from '@/command-menu/pages/page-layout/constants/AggregateChartSettings';
-import { GAUGE_CHART_SETTINGS } from '@/command-menu/pages/page-layout/constants/GaugeChartSettings';
-import { LINE_CHART_SETTINGS } from '@/command-menu/pages/page-layout/constants/LineChartSettings';
-import { PIE_CHART_SETTINGS } from '@/command-menu/pages/page-layout/constants/PieChartSettings';
-import { type ChartSettingsGroup } from '@/command-menu/pages/page-layout/types/ChartSettingsGroup';
-import { GraphType } from '@/command-menu/pages/page-layout/types/GraphType';
-import { getBarChartSettings } from '@/command-menu/pages/page-layout/utils/getBarChartSettings';
+import { AGGREGATE_CHART_SETTINGS } from '@/side-panel/pages/page-layout/constants/AggregateChartSettings';
+import { GAUGE_CHART_SETTINGS } from '@/side-panel/pages/page-layout/constants/GaugeChartSettings';
+import { LINE_CHART_SETTINGS } from '@/side-panel/pages/page-layout/constants/LineChartSettings';
+import { PIE_CHART_SETTINGS } from '@/side-panel/pages/page-layout/constants/PieChartSettings';
+import { type ChartSettingsGroup } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { GraphType } from '@/side-panel/pages/page-layout/types/GraphType';
+import { getBarChartSettings } from '@/side-panel/pages/page-layout/utils/getBarChartSettings';
import { type MessageDescriptor } from '@lingui/core';
import { msg } from '@lingui/core/macro';
import {
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/LineChartSettings.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/LineChartSettings.ts
new file mode 100644
index 0000000000..fa9f0129a1
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/LineChartSettings.ts
@@ -0,0 +1,62 @@
+import { CHART_SETTINGS_HEADINGS } from '@/side-panel/pages/page-layout/constants/ChartSettingsHeadings';
+import { AXIS_NAME_SETTING } from '@/side-panel/pages/page-layout/constants/settings/AxisNameSetting';
+import { CHART_DATA_SOURCE_SETTING } from '@/side-panel/pages/page-layout/constants/settings/ChartDataSourceSetting';
+import { COLORS_SETTING } from '@/side-panel/pages/page-layout/constants/settings/ColorsSetting';
+import { CUMULATIVE_SETTING } from '@/side-panel/pages/page-layout/constants/settings/CumulativeSetting';
+import { DATA_DISPLAY_X_SETTING } from '@/side-panel/pages/page-layout/constants/settings/DataDisplayXSetting';
+import { DATA_DISPLAY_Y_SETTING } from '@/side-panel/pages/page-layout/constants/settings/DataDisplayYSetting';
+import { DATA_LABELS_SETTING } from '@/side-panel/pages/page-layout/constants/settings/DataLabelsSetting';
+import { DATE_GRANULARITY_X_SETTING } from '@/side-panel/pages/page-layout/constants/settings/DateGranularityXSetting';
+import { DATE_GRANULARITY_Y_SETTING } from '@/side-panel/pages/page-layout/constants/settings/DateGranularityYSetting';
+import { FILTER_SETTING } from '@/side-panel/pages/page-layout/constants/settings/FilterSetting';
+import { GROUP_BY_SETTING } from '@/side-panel/pages/page-layout/constants/settings/GroupBySetting';
+import { OMIT_NULL_VALUES_SETTING } from '@/side-panel/pages/page-layout/constants/settings/OmitNullValuesSetting';
+import { PRIMARY_SORT_BY_SETTING } from '@/side-panel/pages/page-layout/constants/settings/PrimarySortBySetting';
+import { RANGE_MAX_SETTING } from '@/side-panel/pages/page-layout/constants/settings/RangeMaxSetting';
+import { RANGE_MIN_SETTING } from '@/side-panel/pages/page-layout/constants/settings/RangeMinSetting';
+import { SHOW_LEGEND_SETTING } from '@/side-panel/pages/page-layout/constants/settings/ShowLegendSetting';
+import { SORT_BY_GROUP_BY_FIELD_SETTING } from '@/side-panel/pages/page-layout/constants/settings/SortByGroupByFieldSetting';
+import { SPLIT_MULTI_VALUE_FIELDS_X_SETTING } from '@/side-panel/pages/page-layout/constants/settings/SplitMultiValueFieldsXSetting';
+import { SPLIT_MULTI_VALUE_FIELDS_Y_SETTING } from '@/side-panel/pages/page-layout/constants/settings/SplitMultiValueFieldsYSetting';
+import { STACKED_LINES_SETTING } from '@/side-panel/pages/page-layout/constants/settings/StackedLineSettings';
+import { type ChartSettingsGroup } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+
+export const LINE_CHART_SETTINGS: ChartSettingsGroup[] = [
+ {
+ heading: CHART_SETTINGS_HEADINGS.DATA,
+ items: [CHART_DATA_SOURCE_SETTING, FILTER_SETTING],
+ },
+ {
+ heading: CHART_SETTINGS_HEADINGS.X_AXIS,
+ items: [
+ DATA_DISPLAY_X_SETTING,
+ DATE_GRANULARITY_X_SETTING,
+ PRIMARY_SORT_BY_SETTING,
+ OMIT_NULL_VALUES_SETTING,
+ SPLIT_MULTI_VALUE_FIELDS_X_SETTING,
+ ],
+ },
+ {
+ heading: CHART_SETTINGS_HEADINGS.Y_AXIS,
+ items: [
+ DATA_DISPLAY_Y_SETTING,
+ GROUP_BY_SETTING,
+ DATE_GRANULARITY_Y_SETTING,
+ SORT_BY_GROUP_BY_FIELD_SETTING,
+ CUMULATIVE_SETTING,
+ RANGE_MIN_SETTING,
+ RANGE_MAX_SETTING,
+ SPLIT_MULTI_VALUE_FIELDS_Y_SETTING,
+ ],
+ },
+ {
+ heading: CHART_SETTINGS_HEADINGS.STYLE,
+ items: [
+ COLORS_SETTING,
+ AXIS_NAME_SETTING,
+ STACKED_LINES_SETTING,
+ DATA_LABELS_SETTING,
+ SHOW_LEGEND_SETTING,
+ ],
+ },
+];
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/PieChartSettings.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/PieChartSettings.ts
new file mode 100644
index 0000000000..431e5306b1
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/PieChartSettings.ts
@@ -0,0 +1,39 @@
+import { CHART_SETTINGS_HEADINGS } from '@/side-panel/pages/page-layout/constants/ChartSettingsHeadings';
+import { CENTER_METRIC_SETTING } from '@/side-panel/pages/page-layout/constants/settings/CenterMetricSetting';
+import { CHART_DATA_SOURCE_SETTING } from '@/side-panel/pages/page-layout/constants/settings/ChartDataSourceSetting';
+import { COLORS_SETTING } from '@/side-panel/pages/page-layout/constants/settings/ColorsSetting';
+import { DATA_DISPLAY_PIE_CHART_SETTING } from '@/side-panel/pages/page-layout/constants/settings/DataDisplayPieChartSetting';
+import { DATA_LABELS_SETTING } from '@/side-panel/pages/page-layout/constants/settings/DataLabelsSetting';
+import { DATE_GRANULARITY_SETTING } from '@/side-panel/pages/page-layout/constants/settings/DateGranularitySetting';
+import { EACH_SLICE_REPRESENTS_SETTING } from '@/side-panel/pages/page-layout/constants/settings/EachSliceRepresentsSetting';
+import { FILTER_SETTING } from '@/side-panel/pages/page-layout/constants/settings/FilterSetting';
+import { HIDE_EMPTY_CATEGORY_SETTING } from '@/side-panel/pages/page-layout/constants/settings/HideEmptyCategorySetting';
+import { PRIMARY_SORT_BY_SETTING } from '@/side-panel/pages/page-layout/constants/settings/PrimarySortBySetting';
+import { SHOW_LEGEND_SETTING } from '@/side-panel/pages/page-layout/constants/settings/ShowLegendSetting';
+import { SPLIT_MULTI_VALUE_FIELDS_X_SETTING } from '@/side-panel/pages/page-layout/constants/settings/SplitMultiValueFieldsXSetting';
+import { type ChartSettingsGroup } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+
+export const PIE_CHART_SETTINGS: ChartSettingsGroup[] = [
+ {
+ heading: CHART_SETTINGS_HEADINGS.DATA,
+ items: [
+ CHART_DATA_SOURCE_SETTING,
+ FILTER_SETTING,
+ DATA_DISPLAY_PIE_CHART_SETTING,
+ DATE_GRANULARITY_SETTING,
+ EACH_SLICE_REPRESENTS_SETTING,
+ PRIMARY_SORT_BY_SETTING,
+ HIDE_EMPTY_CATEGORY_SETTING,
+ SPLIT_MULTI_VALUE_FIELDS_X_SETTING,
+ ],
+ },
+ {
+ heading: CHART_SETTINGS_HEADINGS.STYLE,
+ items: [
+ COLORS_SETTING,
+ DATA_LABELS_SETTING,
+ SHOW_LEGEND_SETTING,
+ CENTER_METRIC_SETTING,
+ ],
+ },
+];
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/XSortByOptions.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/XSortByOptions.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/XSortByOptions.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/XSortByOptions.ts
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/AxisNameSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/AxisNameSetting.ts
new file mode 100644
index 0000000000..a0b6bf1d22
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/AxisNameSetting.ts
@@ -0,0 +1,13 @@
+import { ChartAxisNameSelectionDropdownContent } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartAxisNameSelectionDropdownContent';
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconGizmo } from 'twenty-ui/display';
+
+export const AXIS_NAME_SETTING: ChartSettingsItem = {
+ isBoolean: false,
+ Icon: IconGizmo,
+ label: CHART_CONFIGURATION_SETTING_LABELS.AXIS_NAME,
+ id: CHART_CONFIGURATION_SETTING_IDS.AXIS_NAME,
+ DropdownContent: ChartAxisNameSelectionDropdownContent,
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/CenterMetricSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/CenterMetricSetting.ts
new file mode 100644
index 0000000000..73bc0fbc75
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/CenterMetricSetting.ts
@@ -0,0 +1,11 @@
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconNumber123 } from 'twenty-ui/display';
+
+export const CENTER_METRIC_SETTING: ChartSettingsItem = {
+ isBoolean: true,
+ Icon: IconNumber123,
+ label: CHART_CONFIGURATION_SETTING_LABELS.CENTER_METRIC,
+ id: CHART_CONFIGURATION_SETTING_IDS.CENTER_METRIC,
+};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/ChartConfigurationSettingLabels.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/ChartConfigurationSettingLabels.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels.ts
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/ChartDataSourceSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/ChartDataSourceSetting.ts
new file mode 100644
index 0000000000..f70d1d05fa
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/ChartDataSourceSetting.ts
@@ -0,0 +1,13 @@
+import { ChartDataSourceDropdownContent } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartDataSourceDropdownContent';
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconDatabase } from 'twenty-ui/display';
+
+export const CHART_DATA_SOURCE_SETTING: ChartSettingsItem = {
+ isBoolean: false,
+ Icon: IconDatabase,
+ label: CHART_CONFIGURATION_SETTING_LABELS.SOURCE,
+ id: CHART_CONFIGURATION_SETTING_IDS.SOURCE,
+ DropdownContent: ChartDataSourceDropdownContent,
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/ColorsSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/ColorsSetting.ts
new file mode 100644
index 0000000000..8ed2aa33cb
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/ColorsSetting.ts
@@ -0,0 +1,15 @@
+import { ChartColorSelectionDropdownContent } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent';
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
+import { IconColorSwatch } from 'twenty-ui/display';
+
+export const COLORS_SETTING: ChartSettingsItem = {
+ isBoolean: false,
+ Icon: IconColorSwatch,
+ label: CHART_CONFIGURATION_SETTING_LABELS.COLORS,
+ id: CHART_CONFIGURATION_SETTING_IDS.COLORS,
+ DropdownContent: ChartColorSelectionDropdownContent,
+ dropdownWidth: GenericDropdownContentWidth.ExtraLarge,
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/CumulativeSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/CumulativeSetting.ts
new file mode 100644
index 0000000000..684fae2d90
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/CumulativeSetting.ts
@@ -0,0 +1,11 @@
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconChartBarPopular } from 'twenty-ui/display';
+
+export const CUMULATIVE_SETTING: ChartSettingsItem = {
+ isBoolean: true,
+ Icon: IconChartBarPopular,
+ label: CHART_CONFIGURATION_SETTING_LABELS.CUMULATIVE,
+ id: CHART_CONFIGURATION_SETTING_IDS.CUMULATIVE,
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DataDisplayAggregateSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DataDisplayAggregateSetting.ts
new file mode 100644
index 0000000000..fe6336e56a
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DataDisplayAggregateSetting.ts
@@ -0,0 +1,14 @@
+import { ChartFieldSelectionForAggregateOperationDropdownContent } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent';
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconSum } from 'twenty-ui/display';
+
+export const DATA_DISPLAY_AGGREGATE_SETTING: ChartSettingsItem = {
+ isBoolean: false,
+ Icon: IconSum,
+ label: CHART_CONFIGURATION_SETTING_LABELS.DATA_ON_DISPLAY_AGGREGATE,
+ id: CHART_CONFIGURATION_SETTING_IDS.DATA_ON_DISPLAY_AGGREGATE,
+ dependsOn: [CHART_CONFIGURATION_SETTING_IDS.SOURCE],
+ DropdownContent: ChartFieldSelectionForAggregateOperationDropdownContent,
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DataDisplayPieChartSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DataDisplayPieChartSetting.ts
new file mode 100644
index 0000000000..140d03eb26
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DataDisplayPieChartSetting.ts
@@ -0,0 +1,14 @@
+import { ChartPieFieldSelectionDropdownContent } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartPieFieldSelectionDropdownContent';
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconChartPie } from 'twenty-ui/display';
+
+export const DATA_DISPLAY_PIE_CHART_SETTING: ChartSettingsItem = {
+ isBoolean: false,
+ Icon: IconChartPie,
+ label: CHART_CONFIGURATION_SETTING_LABELS.DATA_ON_DISPLAY_PIE_CHART,
+ id: CHART_CONFIGURATION_SETTING_IDS.DATA_ON_DISPLAY_PIE_CHART,
+ dependsOn: [CHART_CONFIGURATION_SETTING_IDS.SOURCE],
+ DropdownContent: ChartPieFieldSelectionDropdownContent,
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DataDisplayXSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DataDisplayXSetting.ts
new file mode 100644
index 0000000000..0c4190f1e5
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DataDisplayXSetting.ts
@@ -0,0 +1,14 @@
+import { ChartXAxisFieldSelectionDropdownContent } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartXAxisFieldSelectionDropdownContent';
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconAxisX } from 'twenty-ui/display';
+
+export const DATA_DISPLAY_X_SETTING: ChartSettingsItem = {
+ isBoolean: false,
+ Icon: IconAxisX,
+ label: CHART_CONFIGURATION_SETTING_LABELS.DATA_ON_DISPLAY_X,
+ id: CHART_CONFIGURATION_SETTING_IDS.DATA_ON_DISPLAY_X,
+ dependsOn: [CHART_CONFIGURATION_SETTING_IDS.SOURCE],
+ DropdownContent: ChartXAxisFieldSelectionDropdownContent,
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DataDisplayYSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DataDisplayYSetting.ts
new file mode 100644
index 0000000000..241c580970
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DataDisplayYSetting.ts
@@ -0,0 +1,14 @@
+import { ChartFieldSelectionForAggregateOperationDropdownContent } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent';
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconAxisY } from 'twenty-ui/display';
+
+export const DATA_DISPLAY_Y_SETTING: ChartSettingsItem = {
+ isBoolean: false,
+ Icon: IconAxisY,
+ label: CHART_CONFIGURATION_SETTING_LABELS.DATA_ON_DISPLAY_Y,
+ id: CHART_CONFIGURATION_SETTING_IDS.DATA_ON_DISPLAY_Y,
+ dependsOn: [CHART_CONFIGURATION_SETTING_IDS.SOURCE],
+ DropdownContent: ChartFieldSelectionForAggregateOperationDropdownContent,
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DataLabelsSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DataLabelsSetting.ts
new file mode 100644
index 0000000000..c9f4acf9f3
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DataLabelsSetting.ts
@@ -0,0 +1,11 @@
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconBadge2k } from 'twenty-ui/display';
+
+export const DATA_LABELS_SETTING: ChartSettingsItem = {
+ isBoolean: true,
+ Icon: IconBadge2k,
+ label: CHART_CONFIGURATION_SETTING_LABELS.DATA_LABELS,
+ id: CHART_CONFIGURATION_SETTING_IDS.DATA_LABELS,
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DateGranularitySetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DateGranularitySetting.ts
new file mode 100644
index 0000000000..6b1710f7a9
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DateGranularitySetting.ts
@@ -0,0 +1,13 @@
+import { ChartDateGranularitySelectionDropdownContent } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartDateGranularitySelectionDropdownContent';
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconCalendar } from 'twenty-ui/display';
+
+export const DATE_GRANULARITY_SETTING: ChartSettingsItem = {
+ isBoolean: false,
+ Icon: IconCalendar,
+ label: CHART_CONFIGURATION_SETTING_LABELS.DATE_GRANULARITY,
+ id: CHART_CONFIGURATION_SETTING_IDS.DATE_GRANULARITY,
+ DropdownContent: ChartDateGranularitySelectionDropdownContent,
+};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/DateGranularityXSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DateGranularityXSetting.ts
similarity index 50%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/DateGranularityXSetting.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DateGranularityXSetting.ts
index b2b41b0344..6e1a3b7696 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/DateGranularityXSetting.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DateGranularityXSetting.ts
@@ -1,7 +1,7 @@
-import { ChartDateGranularityXSelectionDropdownContent } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartDateGranularityXSelectionDropdownContent';
-import { CHART_CONFIGURATION_SETTING_LABELS } from '@/command-menu/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
-import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
-import { type ChartSettingsItem } from '@/command-menu/pages/page-layout/types/ChartSettingsGroup';
+import { ChartDateGranularityXSelectionDropdownContent } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartDateGranularityXSelectionDropdownContent';
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
import { IconCalendar } from 'twenty-ui/display';
export const DATE_GRANULARITY_X_SETTING: ChartSettingsItem = {
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/DateGranularityYSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DateGranularityYSetting.ts
similarity index 50%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/DateGranularityYSetting.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DateGranularityYSetting.ts
index c45aaf57a8..e7170b34bd 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/DateGranularityYSetting.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/DateGranularityYSetting.ts
@@ -1,7 +1,7 @@
-import { ChartDateGranularityYSelectionDropdownContent } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartDateGranularityYSelectionDropdownContent';
-import { CHART_CONFIGURATION_SETTING_LABELS } from '@/command-menu/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
-import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
-import { type ChartSettingsItem } from '@/command-menu/pages/page-layout/types/ChartSettingsGroup';
+import { ChartDateGranularityYSelectionDropdownContent } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartDateGranularityYSelectionDropdownContent';
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
import { IconCalendar } from 'twenty-ui/display';
export const DATE_GRANULARITY_Y_SETTING: ChartSettingsItem = {
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/EachSliceRepresentsSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/EachSliceRepresentsSetting.ts
new file mode 100644
index 0000000000..40955d2a13
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/EachSliceRepresentsSetting.ts
@@ -0,0 +1,13 @@
+import { ChartFieldSelectionForAggregateOperationDropdownContent } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent';
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconChartPie } from 'twenty-ui/display';
+
+export const EACH_SLICE_REPRESENTS_SETTING: ChartSettingsItem = {
+ isBoolean: false,
+ Icon: IconChartPie,
+ label: CHART_CONFIGURATION_SETTING_LABELS.EACH_SLICE_REPRESENTS,
+ id: CHART_CONFIGURATION_SETTING_IDS.EACH_SLICE_REPRESENTS,
+ DropdownContent: ChartFieldSelectionForAggregateOperationDropdownContent,
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/FilterSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/FilterSetting.ts
new file mode 100644
index 0000000000..2d0b614920
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/FilterSetting.ts
@@ -0,0 +1,12 @@
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconFilter } from 'twenty-ui/display';
+
+export const FILTER_SETTING: ChartSettingsItem = {
+ isBoolean: false,
+ Icon: IconFilter,
+ label: CHART_CONFIGURATION_SETTING_LABELS.FILTER,
+ id: CHART_CONFIGURATION_SETTING_IDS.FILTER,
+ dependsOn: [CHART_CONFIGURATION_SETTING_IDS.SOURCE],
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/GroupBySetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/GroupBySetting.ts
new file mode 100644
index 0000000000..72b99f54a8
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/GroupBySetting.ts
@@ -0,0 +1,14 @@
+import { ChartGroupByFieldSelectionDropdownContent } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContent';
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconFilters } from 'twenty-ui/display';
+
+export const GROUP_BY_SETTING: ChartSettingsItem = {
+ isBoolean: false,
+ Icon: IconFilters,
+ label: CHART_CONFIGURATION_SETTING_LABELS.GROUP_BY,
+ id: CHART_CONFIGURATION_SETTING_IDS.GROUP_BY,
+ dependsOn: [CHART_CONFIGURATION_SETTING_IDS.SOURCE],
+ DropdownContent: ChartGroupByFieldSelectionDropdownContent,
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/HideEmptyCategorySetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/HideEmptyCategorySetting.ts
new file mode 100644
index 0000000000..222081037a
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/HideEmptyCategorySetting.ts
@@ -0,0 +1,11 @@
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconEyeOff } from 'twenty-ui/display';
+
+export const HIDE_EMPTY_CATEGORY_SETTING: ChartSettingsItem = {
+ isBoolean: true,
+ Icon: IconEyeOff,
+ label: CHART_CONFIGURATION_SETTING_LABELS.HIDE_EMPTY_CATEGORY,
+ id: CHART_CONFIGURATION_SETTING_IDS.HIDE_EMPTY_CATEGORY,
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/OmitNullValuesSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/OmitNullValuesSetting.ts
new file mode 100644
index 0000000000..76f838b9fb
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/OmitNullValuesSetting.ts
@@ -0,0 +1,11 @@
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconEyeOff } from 'twenty-ui/display';
+
+export const OMIT_NULL_VALUES_SETTING: ChartSettingsItem = {
+ isBoolean: true,
+ Icon: IconEyeOff,
+ label: CHART_CONFIGURATION_SETTING_LABELS.OMIT_NULL_VALUES,
+ id: CHART_CONFIGURATION_SETTING_IDS.OMIT_NULL_VALUES,
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/PrefixSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/PrefixSetting.ts
new file mode 100644
index 0000000000..7450a78c4b
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/PrefixSetting.ts
@@ -0,0 +1,14 @@
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { msg } from '@lingui/core/macro';
+import { IconCaretLeft } from 'twenty-ui/display';
+
+export const PREFIX_SETTING: ChartSettingsItem = {
+ isBoolean: false,
+ Icon: IconCaretLeft,
+ label: CHART_CONFIGURATION_SETTING_LABELS.PREFIX,
+ id: CHART_CONFIGURATION_SETTING_IDS.PREFIX,
+ isTextInput: true,
+ inputPlaceholder: msg`unit`,
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/PrimarySortBySetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/PrimarySortBySetting.ts
new file mode 100644
index 0000000000..9111dcd06d
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/PrimarySortBySetting.ts
@@ -0,0 +1,13 @@
+import { ChartSortBySelectionDropdownContent } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartSortBySelectionDropdownContent';
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconArrowsSort } from 'twenty-ui/display';
+
+export const PRIMARY_SORT_BY_SETTING: ChartSettingsItem = {
+ isBoolean: false,
+ Icon: IconArrowsSort,
+ label: CHART_CONFIGURATION_SETTING_LABELS.PRIMARY_SORT_BY,
+ id: CHART_CONFIGURATION_SETTING_IDS.PRIMARY_SORT_BY,
+ DropdownContent: ChartSortBySelectionDropdownContent,
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/RangeMaxSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/RangeMaxSetting.ts
new file mode 100644
index 0000000000..60abecc6a6
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/RangeMaxSetting.ts
@@ -0,0 +1,14 @@
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { msg } from '@lingui/core/macro';
+import { IconMathMax } from 'twenty-ui/display';
+
+export const RANGE_MAX_SETTING: ChartSettingsItem = {
+ isBoolean: false,
+ Icon: IconMathMax,
+ label: CHART_CONFIGURATION_SETTING_LABELS.MAX_RANGE,
+ id: CHART_CONFIGURATION_SETTING_IDS.MAX_RANGE,
+ isNumberInput: true,
+ inputPlaceholder: msg`Max`,
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/RangeMinSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/RangeMinSetting.ts
new file mode 100644
index 0000000000..6e920816cd
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/RangeMinSetting.ts
@@ -0,0 +1,14 @@
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { msg } from '@lingui/core/macro';
+import { IconMathMin } from 'twenty-ui/display';
+
+export const RANGE_MIN_SETTING: ChartSettingsItem = {
+ isBoolean: false,
+ Icon: IconMathMin,
+ label: CHART_CONFIGURATION_SETTING_LABELS.MIN_RANGE,
+ id: CHART_CONFIGURATION_SETTING_IDS.MIN_RANGE,
+ isNumberInput: true,
+ inputPlaceholder: msg`Min`,
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/ShowLegendSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/ShowLegendSetting.ts
new file mode 100644
index 0000000000..3f26ab9b04
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/ShowLegendSetting.ts
@@ -0,0 +1,12 @@
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconTextCaption } from 'twenty-ui/display';
+
+export const SHOW_LEGEND_SETTING: ChartSettingsItem = {
+ isBoolean: true,
+ Icon: IconTextCaption,
+ label: CHART_CONFIGURATION_SETTING_LABELS.SHOW_LEGEND,
+ id: CHART_CONFIGURATION_SETTING_IDS.SHOW_LEGEND,
+ dependsOn: [CHART_CONFIGURATION_SETTING_IDS.GROUP_BY],
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/SortByGroupByFieldSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/SortByGroupByFieldSetting.ts
new file mode 100644
index 0000000000..394dda0b54
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/SortByGroupByFieldSetting.ts
@@ -0,0 +1,14 @@
+import { ChartSortByGroupByFieldDropdownContent } from '@/side-panel/pages/page-layout/components/dropdown-content/ChartSortByGroupByFieldDropdownContent';
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconArrowsSort } from 'twenty-ui/display';
+
+export const SORT_BY_GROUP_BY_FIELD_SETTING: ChartSettingsItem = {
+ isBoolean: false,
+ Icon: IconArrowsSort,
+ label: CHART_CONFIGURATION_SETTING_LABELS.SORT_BY_GROUP_BY_FIELD,
+ id: CHART_CONFIGURATION_SETTING_IDS.SORT_BY_GROUP_BY_FIELD,
+ dependsOn: [CHART_CONFIGURATION_SETTING_IDS.GROUP_BY],
+ DropdownContent: ChartSortByGroupByFieldDropdownContent,
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/SplitMultiValueFieldsXSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/SplitMultiValueFieldsXSetting.ts
new file mode 100644
index 0000000000..ec61c4ad03
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/SplitMultiValueFieldsXSetting.ts
@@ -0,0 +1,11 @@
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconArrowsSplit2 } from 'twenty-ui/display';
+
+export const SPLIT_MULTI_VALUE_FIELDS_X_SETTING: ChartSettingsItem = {
+ isBoolean: true,
+ Icon: IconArrowsSplit2,
+ label: CHART_CONFIGURATION_SETTING_LABELS.SPLIT_MULTI_VALUE_FIELDS_X,
+ id: CHART_CONFIGURATION_SETTING_IDS.SPLIT_MULTI_VALUE_FIELDS_X,
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/SplitMultiValueFieldsYSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/SplitMultiValueFieldsYSetting.ts
new file mode 100644
index 0000000000..a7e6f66ff4
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/SplitMultiValueFieldsYSetting.ts
@@ -0,0 +1,11 @@
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconArrowsSplit2 } from 'twenty-ui/display';
+
+export const SPLIT_MULTI_VALUE_FIELDS_Y_SETTING: ChartSettingsItem = {
+ isBoolean: true,
+ Icon: IconArrowsSplit2,
+ label: CHART_CONFIGURATION_SETTING_LABELS.SPLIT_MULTI_VALUE_FIELDS_Y,
+ id: CHART_CONFIGURATION_SETTING_IDS.SPLIT_MULTI_VALUE_FIELDS_Y,
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/StackedBarsSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/StackedBarsSetting.ts
new file mode 100644
index 0000000000..50298477a9
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/StackedBarsSetting.ts
@@ -0,0 +1,12 @@
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconStack2 } from 'twenty-ui/display';
+
+export const STACKED_BARS_SETTING: ChartSettingsItem = {
+ isBoolean: true,
+ Icon: IconStack2,
+ label: CHART_CONFIGURATION_SETTING_LABELS.STACKED_BARS,
+ id: CHART_CONFIGURATION_SETTING_IDS.STACKED_BARS,
+ dependsOn: [CHART_CONFIGURATION_SETTING_IDS.GROUP_BY],
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/StackedLineSettings.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/StackedLineSettings.ts
new file mode 100644
index 0000000000..20c82a5885
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/StackedLineSettings.ts
@@ -0,0 +1,12 @@
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconStack2 } from 'twenty-ui/display';
+
+export const STACKED_LINES_SETTING: ChartSettingsItem = {
+ isBoolean: true,
+ Icon: IconStack2,
+ label: CHART_CONFIGURATION_SETTING_LABELS.STACKED_LINES,
+ id: CHART_CONFIGURATION_SETTING_IDS.STACKED_LINES,
+ dependsOn: [CHART_CONFIGURATION_SETTING_IDS.GROUP_BY],
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/SuffixSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/SuffixSetting.ts
new file mode 100644
index 0000000000..6f609f8a3d
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/SuffixSetting.ts
@@ -0,0 +1,14 @@
+import { CHART_CONFIGURATION_SETTING_LABELS } from '@/side-panel/pages/page-layout/constants/settings/ChartConfigurationSettingLabels';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { msg } from '@lingui/core/macro';
+import { IconCaretRight } from 'twenty-ui/display';
+
+export const SUFFIX_SETTING: ChartSettingsItem = {
+ isBoolean: false,
+ Icon: IconCaretRight,
+ label: CHART_CONFIGURATION_SETTING_LABELS.SUFFIX,
+ id: CHART_CONFIGURATION_SETTING_IDS.SUFFIX,
+ isTextInput: true,
+ inputPlaceholder: msg`unit`,
+};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/TabSettingsSelectableItemIds.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/TabSettingsSelectableItemIds.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/TabSettingsSelectableItemIds.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/settings/TabSettingsSelectableItemIds.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/__tests__/useChartSettingsValues.test.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/__tests__/useChartSettingsValues.test.tsx
similarity index 97%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/__tests__/useChartSettingsValues.test.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/__tests__/useChartSettingsValues.test.tsx
index 61b572fc70..b918aebce0 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/__tests__/useChartSettingsValues.test.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/__tests__/useChartSettingsValues.test.tsx
@@ -1,9 +1,9 @@
import { renderHook } from '@testing-library/react';
import { Provider as JotaiProvider } from 'jotai';
-import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
-import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
-import { type TypedBarChartConfiguration } from '@/command-menu/pages/page-layout/types/TypedBarChartConfiguration';
+import { type ChartConfiguration } from '@/side-panel/pages/page-layout/types/ChartConfiguration';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type TypedBarChartConfiguration } from '@/side-panel/pages/page-layout/types/TypedBarChartConfiguration';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import {
@@ -15,7 +15,7 @@ import {
GraphOrderBy,
WidgetConfigurationType,
} from '~/generated-metadata/graphql';
-import { useChartSettingsValues } from '@/command-menu/pages/page-layout/hooks/useChartSettingsValues';
+import { useChartSettingsValues } from '@/side-panel/pages/page-layout/hooks/useChartSettingsValues';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
const mockObjectMetadataItem: ObjectMetadataItem = {
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useChartSettingsValues.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useChartSettingsValues.ts
similarity index 93%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useChartSettingsValues.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useChartSettingsValues.ts
index 6847144531..02cd207de3 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useChartSettingsValues.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useChartSettingsValues.ts
@@ -1,11 +1,11 @@
-import { useGraphGroupBySortOptionLabels } from '@/command-menu/pages/page-layout/hooks/useGraphGroupBySortOptionLabels';
-import { useGraphXSortOptionLabels } from '@/command-menu/pages/page-layout/hooks/useGraphXSortOptionLabels';
-import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
-import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
-import { getChartAxisNameDisplayOptions } from '@/command-menu/pages/page-layout/utils/getChartAxisNameDisplayOptions';
-import { getChartFilterRulesCount } from '@/command-menu/pages/page-layout/utils/getChartFilterRulesCount';
-import { getDateGranularityLabel } from '@/command-menu/pages/page-layout/utils/getDateGranularityLabel';
-import { getFieldLabelWithSubField } from '@/command-menu/pages/page-layout/utils/getFieldLabelWithSubField';
+import { useGraphGroupBySortOptionLabels } from '@/side-panel/pages/page-layout/hooks/useGraphGroupBySortOptionLabels';
+import { useGraphXSortOptionLabels } from '@/side-panel/pages/page-layout/hooks/useGraphXSortOptionLabels';
+import { type ChartConfiguration } from '@/side-panel/pages/page-layout/types/ChartConfiguration';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { getChartAxisNameDisplayOptions } from '@/side-panel/pages/page-layout/utils/getChartAxisNameDisplayOptions';
+import { getChartFilterRulesCount } from '@/side-panel/pages/page-layout/utils/getChartFilterRulesCount';
+import { getDateGranularityLabel } from '@/side-panel/pages/page-layout/utils/getDateGranularityLabel';
+import { getFieldLabelWithSubField } from '@/side-panel/pages/page-layout/utils/getFieldLabelWithSubField';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { getAggregateOperationLabel } from '@/object-record/record-board/record-board-column/utils/getAggregateOperationLabel';
import { convertAggregateOperationToExtendedAggregateOperation } from '@/object-record/utils/convertAggregateOperationToExtendedAggregateOperation';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useGraphGroupBySortOptionLabels.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useGraphGroupBySortOptionLabels.ts
similarity index 89%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useGraphGroupBySortOptionLabels.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useGraphGroupBySortOptionLabels.ts
index 32ee3a713e..640d83cb68 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useGraphGroupBySortOptionLabels.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useGraphGroupBySortOptionLabels.ts
@@ -1,5 +1,5 @@
-import { getFieldLabelWithSubField } from '@/command-menu/pages/page-layout/utils/getFieldLabelWithSubField';
-import { getSortLabelSuffixForFieldType } from '@/command-menu/pages/page-layout/utils/getSortLabelSuffixForFieldType';
+import { getFieldLabelWithSubField } from '@/side-panel/pages/page-layout/utils/getFieldLabelWithSubField';
+import { getSortLabelSuffixForFieldType } from '@/side-panel/pages/page-layout/utils/getSortLabelSuffixForFieldType';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { t } from '@lingui/core/macro';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useGraphXSortOptionLabels.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useGraphXSortOptionLabels.ts
similarity index 92%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useGraphXSortOptionLabels.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useGraphXSortOptionLabels.ts
index 53a3d8e0f9..7d5fbfba62 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useGraphXSortOptionLabels.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useGraphXSortOptionLabels.ts
@@ -1,5 +1,5 @@
-import { getFieldLabelWithSubField } from '@/command-menu/pages/page-layout/utils/getFieldLabelWithSubField';
-import { getSortLabelSuffixForFieldType } from '@/command-menu/pages/page-layout/utils/getSortLabelSuffixForFieldType';
+import { getFieldLabelWithSubField } from '@/side-panel/pages/page-layout/utils/getFieldLabelWithSubField';
+import { getSortLabelSuffixForFieldType } from '@/side-panel/pages/page-layout/utils/getSortLabelSuffixForFieldType';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { getAggregateOperationLabel } from '@/object-record/record-board/record-board-column/utils/getAggregateOperationLabel';
import { type ExtendedAggregateOperations } from '@/object-record/record-table/types/ExtendedAggregateOperations';
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel.ts
new file mode 100644
index 0000000000..1e5161228f
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel.ts
@@ -0,0 +1,46 @@
+import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
+import { type PageLayoutSidePanelPage } from '@/side-panel/pages/page-layout/types/PageLayoutSidePanelPage';
+import { getPageLayoutIcon } from '@/side-panel/pages/page-layout/utils/getPageLayoutIcon';
+import { getPageLayoutPageTitle } from '@/side-panel/pages/page-layout/utils/getPageLayoutPageTitle';
+import { useCallback } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+import { type IconComponent } from 'twenty-ui/display';
+
+type NavigatePageLayoutSidePanelProps = {
+ sidePanelPage: PageLayoutSidePanelPage;
+ pageTitle?: string;
+ pageIcon?: IconComponent;
+ focusTitleInput?: boolean;
+ resetNavigationStack?: boolean;
+};
+
+export const useNavigatePageLayoutSidePanel = () => {
+ const { navigateSidePanel } = useNavigateSidePanel();
+
+ const navigatePageLayoutSidePanel = useCallback(
+ ({
+ sidePanelPage,
+ pageTitle,
+ pageIcon,
+ focusTitleInput = false,
+ resetNavigationStack = false,
+ }: NavigatePageLayoutSidePanelProps) => {
+ navigateSidePanel({
+ page: sidePanelPage,
+ pageTitle: isDefined(pageTitle)
+ ? pageTitle
+ : getPageLayoutPageTitle(sidePanelPage),
+ pageIcon: isDefined(pageIcon)
+ ? pageIcon
+ : getPageLayoutIcon(sidePanelPage),
+ focusTitleInput,
+ resetNavigationStack,
+ });
+ },
+ [navigateSidePanel],
+ );
+
+ return {
+ navigatePageLayoutSidePanel,
+ };
+};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useResetChartDraftFiltersSettings.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useResetChartDraftFiltersSettings.ts
similarity index 86%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useResetChartDraftFiltersSettings.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useResetChartDraftFiltersSettings.ts
index 40a305c983..58065852de 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useResetChartDraftFiltersSettings.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useResetChartDraftFiltersSettings.ts
@@ -1,6 +1,6 @@
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
-import { getChartFiltersSettingsInstanceId } from '@/command-menu/pages/page-layout/utils/getChartFiltersSettingsInstanceId';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
+import { getChartFiltersSettingsInstanceId } from '@/side-panel/pages/page-layout/utils/getChartFiltersSettingsInstanceId';
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { hasInitializedCurrentRecordFilterGroupsComponentFamilyState } from '@/views/states/hasInitializedCurrentRecordFilterGroupsComponentFamilyState';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateChartSettingInput.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useUpdateChartSettingInput.ts
similarity index 70%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateChartSettingInput.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useUpdateChartSettingInput.ts
index 2d3d9e93b0..14915667af 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateChartSettingInput.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useUpdateChartSettingInput.ts
@@ -1,5 +1,5 @@
-import { type CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
-import { getConfigKeyFromSettingId } from '@/command-menu/pages/page-layout/utils/getConfigKeyFromSettingId';
+import { type CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { getConfigKeyFromSettingId } from '@/side-panel/pages/page-layout/utils/getConfigKeyFromSettingId';
import { useUpdateCurrentWidgetConfig } from './useUpdateCurrentWidgetConfig';
export const useUpdateChartSettingInput = (pageLayoutId: string) => {
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateChartSettingTextInput.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useUpdateChartSettingTextInput.ts
similarity index 70%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateChartSettingTextInput.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useUpdateChartSettingTextInput.ts
index 9ff5877da5..e8e9b04d34 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateChartSettingTextInput.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useUpdateChartSettingTextInput.ts
@@ -1,5 +1,5 @@
-import { type CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
-import { getConfigKeyFromSettingId } from '@/command-menu/pages/page-layout/utils/getConfigKeyFromSettingId';
+import { type CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { getConfigKeyFromSettingId } from '@/side-panel/pages/page-layout/utils/getConfigKeyFromSettingId';
import { useUpdateCurrentWidgetConfig } from './useUpdateCurrentWidgetConfig';
export const useUpdateChartSettingTextInput = (pageLayoutId: string) => {
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateChartSettingToggle.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useUpdateChartSettingToggle.ts
similarity index 83%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateChartSettingToggle.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useUpdateChartSettingToggle.ts
index b54662f4f7..b47a824dee 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateChartSettingToggle.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useUpdateChartSettingToggle.ts
@@ -1,6 +1,6 @@
-import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
-import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
-import { getConfigKeyFromSettingId } from '@/command-menu/pages/page-layout/utils/getConfigKeyFromSettingId';
+import { type ChartConfiguration } from '@/side-panel/pages/page-layout/types/ChartConfiguration';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { getConfigKeyFromSettingId } from '@/side-panel/pages/page-layout/utils/getConfigKeyFromSettingId';
import { BarChartGroupMode } from '~/generated-metadata/graphql';
import { useChartSettingsValues } from './useChartSettingsValues';
import { useUpdateCurrentWidgetConfig } from './useUpdateCurrentWidgetConfig';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useUpdateCurrentWidgetConfig.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useUpdateCurrentWidgetConfig.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateGraphTypeConfig.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useUpdateGraphTypeConfig.ts
similarity index 84%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateGraphTypeConfig.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useUpdateGraphTypeConfig.ts
index fdbdbc0a94..aa9717c353 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateGraphTypeConfig.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useUpdateGraphTypeConfig.ts
@@ -1,12 +1,12 @@
-import { GRAPH_CONFIGURATION_TYPE_TO_CONFIG_TYPENAME } from '@/command-menu/pages/page-layout/constants/GraphConfigurationTypeToConfigTypename';
-import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
-import { GraphType } from '@/command-menu/pages/page-layout/types/GraphType';
-import { convertAggregateOperationForDateField } from '@/command-menu/pages/page-layout/utils/convertAggregateOperationForDateField';
-import { convertBarOrLineChartConfigToPieChart } from '@/command-menu/pages/page-layout/utils/convertBarOrLineChartConfigToPieChart';
-import { convertPieChartConfigToBarOrLineChart } from '@/command-menu/pages/page-layout/utils/convertPieChartConfigToBarOrLineChart';
-import { getConfigurationTypeFromGraphType } from '@/command-menu/pages/page-layout/utils/getConfigurationTypeFromGraphType';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
-import { isWidgetConfigurationOfTypeGraph } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfTypeGraph';
+import { GRAPH_CONFIGURATION_TYPE_TO_CONFIG_TYPENAME } from '@/side-panel/pages/page-layout/constants/GraphConfigurationTypeToConfigTypename';
+import { type ChartConfiguration } from '@/side-panel/pages/page-layout/types/ChartConfiguration';
+import { GraphType } from '@/side-panel/pages/page-layout/types/GraphType';
+import { convertAggregateOperationForDateField } from '@/side-panel/pages/page-layout/utils/convertAggregateOperationForDateField';
+import { convertBarOrLineChartConfigToPieChart } from '@/side-panel/pages/page-layout/utils/convertBarOrLineChartConfigToPieChart';
+import { convertPieChartConfigToBarOrLineChart } from '@/side-panel/pages/page-layout/utils/convertPieChartConfigToBarOrLineChart';
+import { getConfigurationTypeFromGraphType } from '@/side-panel/pages/page-layout/utils/getConfigurationTypeFromGraphType';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { isWidgetConfigurationOfTypeGraph } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfTypeGraph';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useWidgetInEditMode.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useWidgetInEditMode.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useWidgetInEditMode.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/hooks/useWidgetInEditMode.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/states/hasInitializedChartFiltersComponentState.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/states/hasInitializedChartFiltersComponentState.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/states/hasInitializedChartFiltersComponentState.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/states/hasInitializedChartFiltersComponentState.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/types/BarLineChartConvertibleFields.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/BarLineChartConvertibleFields.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/types/BarLineChartConvertibleFields.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/types/BarLineChartConvertibleFields.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartConfiguration.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/ChartConfiguration.ts
similarity index 81%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartConfiguration.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/types/ChartConfiguration.ts
index ca246be4d4..cbf6807fe9 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartConfiguration.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/ChartConfiguration.ts
@@ -1,4 +1,4 @@
-import { type TypedGaugeChartConfiguration } from '@/command-menu/pages/page-layout/types/TypedGaugeChartConfiguration';
+import { type TypedGaugeChartConfiguration } from '@/side-panel/pages/page-layout/types/TypedGaugeChartConfiguration';
import { type TypedAggregateChartConfiguration } from './TypedAggregateChartConfiguration';
import { type TypedBarChartConfiguration } from './TypedBarChartConfiguration';
import { type TypedLineChartConfiguration } from './TypedLineChartConfiguration';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartConfigurationSettingIds.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/ChartConfigurationSettingIds.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartConfigurationSettingIds.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/types/ChartConfigurationSettingIds.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartFilters.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/ChartFilters.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartFilters.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/types/ChartFilters.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartSettingsGroup.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/ChartSettingsGroup.ts
similarity index 83%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartSettingsGroup.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/types/ChartSettingsGroup.ts
index 7a8a9b269d..9fe1dd2ecf 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartSettingsGroup.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/ChartSettingsGroup.ts
@@ -1,4 +1,4 @@
-import { type CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
import { type MessageDescriptor } from '@lingui/core';
import { type ComponentType } from 'react';
import { type IconComponent } from 'twenty-ui/display';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartWidget.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/ChartWidget.ts
similarity index 75%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartWidget.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/types/ChartWidget.ts
index 5ecb12c618..d83ec19ea2 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/types/ChartWidget.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/ChartWidget.ts
@@ -1,4 +1,4 @@
-import { type ChartWidgetConfiguration } from '@/command-menu/pages/page-layout/types/ChartWidgetConfiguration';
+import { type ChartWidgetConfiguration } from '@/side-panel/pages/page-layout/types/ChartWidgetConfiguration';
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { type ModifiedProperties } from 'twenty-shared/types';
import { type WidgetType } from '~/generated-metadata/graphql';
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/ChartWidgetConfiguration.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/ChartWidgetConfiguration.ts
new file mode 100644
index 0000000000..45b75bd815
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/ChartWidgetConfiguration.ts
@@ -0,0 +1,12 @@
+import { type TypedAggregateChartConfiguration } from '@/side-panel/pages/page-layout/types/TypedAggregateChartConfiguration';
+import { type TypedBarChartConfiguration } from '@/side-panel/pages/page-layout/types/TypedBarChartConfiguration';
+import { type TypedGaugeChartConfiguration } from '@/side-panel/pages/page-layout/types/TypedGaugeChartConfiguration';
+import { type TypedLineChartConfiguration } from '@/side-panel/pages/page-layout/types/TypedLineChartConfiguration';
+import { type TypedPieChartConfiguration } from '@/side-panel/pages/page-layout/types/TypedPieChartConfiguration';
+
+export type ChartWidgetConfiguration =
+ | TypedBarChartConfiguration
+ | TypedGaugeChartConfiguration
+ | TypedLineChartConfiguration
+ | TypedAggregateChartConfiguration
+ | TypedPieChartConfiguration;
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/types/GraphType.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/GraphType.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/types/GraphType.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/types/GraphType.ts
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/PageLayoutSidePanelPage.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/PageLayoutSidePanelPage.ts
new file mode 100644
index 0000000000..f845295944
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/PageLayoutSidePanelPage.ts
@@ -0,0 +1,10 @@
+import { type SidePanelPages } from 'twenty-shared/types';
+
+export type PageLayoutSidePanelPage =
+ | SidePanelPages.PageLayoutWidgetTypeSelect
+ | SidePanelPages.PageLayoutGraphTypeSelect
+ | SidePanelPages.PageLayoutIframeSettings
+ | SidePanelPages.PageLayoutGraphFilter
+ | SidePanelPages.PageLayoutTabSettings
+ | SidePanelPages.PageLayoutFieldsSettings
+ | SidePanelPages.PageLayoutFieldsLayout;
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/types/PieChartConvertibleFields.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/PieChartConvertibleFields.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/types/PieChartConvertibleFields.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/types/PieChartConvertibleFields.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/types/TypedAggregateChartConfiguration.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/TypedAggregateChartConfiguration.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/types/TypedAggregateChartConfiguration.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/types/TypedAggregateChartConfiguration.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/types/TypedBarChartConfiguration.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/TypedBarChartConfiguration.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/types/TypedBarChartConfiguration.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/types/TypedBarChartConfiguration.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/types/TypedGaugeChartConfiguration.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/TypedGaugeChartConfiguration.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/types/TypedGaugeChartConfiguration.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/types/TypedGaugeChartConfiguration.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/types/TypedLineChartConfiguration.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/TypedLineChartConfiguration.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/types/TypedLineChartConfiguration.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/types/TypedLineChartConfiguration.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/types/TypedPieChartConfiguration.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/TypedPieChartConfiguration.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/types/TypedPieChartConfiguration.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/types/TypedPieChartConfiguration.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/assertChartWidgetOrThrow.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/assertChartWidgetOrThrow.test.ts
similarity index 93%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/assertChartWidgetOrThrow.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/assertChartWidgetOrThrow.test.ts
index 91cbff87cd..465ce72a7c 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/assertChartWidgetOrThrow.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/assertChartWidgetOrThrow.test.ts
@@ -1,4 +1,4 @@
-import { assertChartWidgetOrThrow } from '@/command-menu/pages/page-layout/utils/assertChartWidgetOrThrow';
+import { assertChartWidgetOrThrow } from '@/side-panel/pages/page-layout/utils/assertChartWidgetOrThrow';
import {
ALL_CHART_CONFIGURATIONS,
createTestWidget,
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/buildChartGroupByFieldConfigUpdate.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/buildChartGroupByFieldConfigUpdate.test.ts
similarity index 92%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/buildChartGroupByFieldConfigUpdate.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/buildChartGroupByFieldConfigUpdate.test.ts
index 2e4dcfe7c5..38720b12ca 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/buildChartGroupByFieldConfigUpdate.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/buildChartGroupByFieldConfigUpdate.test.ts
@@ -1,7 +1,7 @@
-import { type TypedBarChartConfiguration } from '@/command-menu/pages/page-layout/types/TypedBarChartConfiguration';
-import { type TypedLineChartConfiguration } from '@/command-menu/pages/page-layout/types/TypedLineChartConfiguration';
-import { type TypedPieChartConfiguration } from '@/command-menu/pages/page-layout/types/TypedPieChartConfiguration';
-import { buildChartGroupByFieldConfigUpdate } from '@/command-menu/pages/page-layout/utils/buildChartGroupByFieldConfigUpdate';
+import { type TypedBarChartConfiguration } from '@/side-panel/pages/page-layout/types/TypedBarChartConfiguration';
+import { type TypedLineChartConfiguration } from '@/side-panel/pages/page-layout/types/TypedLineChartConfiguration';
+import { type TypedPieChartConfiguration } from '@/side-panel/pages/page-layout/types/TypedPieChartConfiguration';
+import { buildChartGroupByFieldConfigUpdate } from '@/side-panel/pages/page-layout/utils/buildChartGroupByFieldConfigUpdate';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import {
FieldMetadataType,
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/convertAggregateOperationForDateField.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/convertAggregateOperationForDateField.test.ts
similarity index 93%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/convertAggregateOperationForDateField.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/convertAggregateOperationForDateField.test.ts
index e2c69d3a21..26385be5df 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/convertAggregateOperationForDateField.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/convertAggregateOperationForDateField.test.ts
@@ -1,5 +1,5 @@
-import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
-import { convertAggregateOperationForDateField } from '@/command-menu/pages/page-layout/utils/convertAggregateOperationForDateField';
+import { type ChartConfiguration } from '@/side-panel/pages/page-layout/types/ChartConfiguration';
+import { convertAggregateOperationForDateField } from '@/side-panel/pages/page-layout/utils/convertAggregateOperationForDateField';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { AggregateOperations } from '@/object-record/record-table/constants/AggregateOperations';
import { FieldMetadataType } from 'twenty-shared/types';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/convertBarOrLineChartConfigToPieChart.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/convertBarOrLineChartConfigToPieChart.test.ts
similarity index 93%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/convertBarOrLineChartConfigToPieChart.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/convertBarOrLineChartConfigToPieChart.test.ts
index bf5adb294d..f019cb205f 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/convertBarOrLineChartConfigToPieChart.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/convertBarOrLineChartConfigToPieChart.test.ts
@@ -1,4 +1,4 @@
-import { convertBarOrLineChartConfigToPieChart } from '@/command-menu/pages/page-layout/utils/convertBarOrLineChartConfigToPieChart';
+import { convertBarOrLineChartConfigToPieChart } from '@/side-panel/pages/page-layout/utils/convertBarOrLineChartConfigToPieChart';
import { type BarChartConfiguration } from '~/generated-metadata/graphql';
import {
TEST_BAR_CHART_CONFIGURATION,
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/convertPieChartConfigToBarOrLineChart.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/convertPieChartConfigToBarOrLineChart.test.ts
similarity index 93%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/convertPieChartConfigToBarOrLineChart.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/convertPieChartConfigToBarOrLineChart.test.ts
index 8c9a6c3340..851608f666 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/convertPieChartConfigToBarOrLineChart.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/convertPieChartConfigToBarOrLineChart.test.ts
@@ -1,4 +1,4 @@
-import { convertPieChartConfigToBarOrLineChart } from '@/command-menu/pages/page-layout/utils/convertPieChartConfigToBarOrLineChart';
+import { convertPieChartConfigToBarOrLineChart } from '@/side-panel/pages/page-layout/utils/convertPieChartConfigToBarOrLineChart';
import { type PieChartConfiguration } from '~/generated-metadata/graphql';
import {
TEST_BAR_CHART_CONFIGURATION,
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/filterSortOptionsByFieldType.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/filterSortOptionsByFieldType.test.ts
similarity index 94%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/filterSortOptionsByFieldType.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/filterSortOptionsByFieldType.test.ts
index a7084e721c..7c6af64b79 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/filterSortOptionsByFieldType.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/filterSortOptionsByFieldType.test.ts
@@ -1,6 +1,6 @@
import { FieldMetadataType } from 'twenty-shared/types';
-import { filterSortOptionsByFieldType } from '@/command-menu/pages/page-layout/utils/filterSortOptionsByFieldType';
+import { filterSortOptionsByFieldType } from '@/side-panel/pages/page-layout/utils/filterSortOptionsByFieldType';
import { GraphOrderBy } from '~/generated-metadata/graphql';
describe('filterSortOptionsByFieldType', () => {
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getBarChartSettings.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getBarChartSettings.test.ts
similarity index 73%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getBarChartSettings.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getBarChartSettings.test.ts
index 5baef20e04..951fa427ee 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getBarChartSettings.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getBarChartSettings.test.ts
@@ -1,23 +1,23 @@
-import { CHART_SETTINGS_HEADINGS } from '@/command-menu/pages/page-layout/constants/ChartSettingsHeadings';
-import { AXIS_NAME_SETTING } from '@/command-menu/pages/page-layout/constants/settings/AxisNameSetting';
-import { CHART_DATA_SOURCE_SETTING } from '@/command-menu/pages/page-layout/constants/settings/ChartDataSourceSetting';
-import { COLORS_SETTING } from '@/command-menu/pages/page-layout/constants/settings/ColorsSetting';
-import { CUMULATIVE_SETTING } from '@/command-menu/pages/page-layout/constants/settings/CumulativeSetting';
-import { DATA_DISPLAY_X_SETTING } from '@/command-menu/pages/page-layout/constants/settings/DataDisplayXSetting';
-import { DATA_DISPLAY_Y_SETTING } from '@/command-menu/pages/page-layout/constants/settings/DataDisplayYSetting';
-import { DATA_LABELS_SETTING } from '@/command-menu/pages/page-layout/constants/settings/DataLabelsSetting';
-import { DATE_GRANULARITY_X_SETTING } from '@/command-menu/pages/page-layout/constants/settings/DateGranularityXSetting';
-import { DATE_GRANULARITY_Y_SETTING } from '@/command-menu/pages/page-layout/constants/settings/DateGranularityYSetting';
-import { FILTER_SETTING } from '@/command-menu/pages/page-layout/constants/settings/FilterSetting';
-import { GROUP_BY_SETTING } from '@/command-menu/pages/page-layout/constants/settings/GroupBySetting';
-import { OMIT_NULL_VALUES_SETTING } from '@/command-menu/pages/page-layout/constants/settings/OmitNullValuesSetting';
-import { PRIMARY_SORT_BY_SETTING } from '@/command-menu/pages/page-layout/constants/settings/PrimarySortBySetting';
-import { RANGE_MAX_SETTING } from '@/command-menu/pages/page-layout/constants/settings/RangeMaxSetting';
-import { RANGE_MIN_SETTING } from '@/command-menu/pages/page-layout/constants/settings/RangeMinSetting';
-import { SHOW_LEGEND_SETTING } from '@/command-menu/pages/page-layout/constants/settings/ShowLegendSetting';
-import { SORT_BY_GROUP_BY_FIELD_SETTING } from '@/command-menu/pages/page-layout/constants/settings/SortByGroupByFieldSetting';
-import { STACKED_BARS_SETTING } from '@/command-menu/pages/page-layout/constants/settings/StackedBarsSetting';
-import { getBarChartSettings } from '@/command-menu/pages/page-layout/utils/getBarChartSettings';
+import { CHART_SETTINGS_HEADINGS } from '@/side-panel/pages/page-layout/constants/ChartSettingsHeadings';
+import { AXIS_NAME_SETTING } from '@/side-panel/pages/page-layout/constants/settings/AxisNameSetting';
+import { CHART_DATA_SOURCE_SETTING } from '@/side-panel/pages/page-layout/constants/settings/ChartDataSourceSetting';
+import { COLORS_SETTING } from '@/side-panel/pages/page-layout/constants/settings/ColorsSetting';
+import { CUMULATIVE_SETTING } from '@/side-panel/pages/page-layout/constants/settings/CumulativeSetting';
+import { DATA_DISPLAY_X_SETTING } from '@/side-panel/pages/page-layout/constants/settings/DataDisplayXSetting';
+import { DATA_DISPLAY_Y_SETTING } from '@/side-panel/pages/page-layout/constants/settings/DataDisplayYSetting';
+import { DATA_LABELS_SETTING } from '@/side-panel/pages/page-layout/constants/settings/DataLabelsSetting';
+import { DATE_GRANULARITY_X_SETTING } from '@/side-panel/pages/page-layout/constants/settings/DateGranularityXSetting';
+import { DATE_GRANULARITY_Y_SETTING } from '@/side-panel/pages/page-layout/constants/settings/DateGranularityYSetting';
+import { FILTER_SETTING } from '@/side-panel/pages/page-layout/constants/settings/FilterSetting';
+import { GROUP_BY_SETTING } from '@/side-panel/pages/page-layout/constants/settings/GroupBySetting';
+import { OMIT_NULL_VALUES_SETTING } from '@/side-panel/pages/page-layout/constants/settings/OmitNullValuesSetting';
+import { PRIMARY_SORT_BY_SETTING } from '@/side-panel/pages/page-layout/constants/settings/PrimarySortBySetting';
+import { RANGE_MAX_SETTING } from '@/side-panel/pages/page-layout/constants/settings/RangeMaxSetting';
+import { RANGE_MIN_SETTING } from '@/side-panel/pages/page-layout/constants/settings/RangeMinSetting';
+import { SHOW_LEGEND_SETTING } from '@/side-panel/pages/page-layout/constants/settings/ShowLegendSetting';
+import { SORT_BY_GROUP_BY_FIELD_SETTING } from '@/side-panel/pages/page-layout/constants/settings/SortByGroupByFieldSetting';
+import { STACKED_BARS_SETTING } from '@/side-panel/pages/page-layout/constants/settings/StackedBarsSetting';
+import { getBarChartSettings } from '@/side-panel/pages/page-layout/utils/getBarChartSettings';
import { IconAxisX, IconAxisY } from 'twenty-ui/display';
import { BarChartLayout } from '~/generated-metadata/graphql';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getChartDefaultOrderByForFieldType.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getChartDefaultOrderByForFieldType.test.ts
similarity index 89%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getChartDefaultOrderByForFieldType.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getChartDefaultOrderByForFieldType.test.ts
index 6a70f7b12f..a40754c83c 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getChartDefaultOrderByForFieldType.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getChartDefaultOrderByForFieldType.test.ts
@@ -1,6 +1,6 @@
import { FieldMetadataType } from 'twenty-shared/types';
-import { getChartDefaultOrderByForFieldType } from '@/command-menu/pages/page-layout/utils/getChartDefaultOrderByForFieldType';
+import { getChartDefaultOrderByForFieldType } from '@/side-panel/pages/page-layout/utils/getChartDefaultOrderByForFieldType';
import { GraphOrderBy } from '~/generated-metadata/graphql';
describe('getChartDefaultOrderByForFieldType', () => {
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getChartFilterRulesCount.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getChartFilterRulesCount.test.ts
similarity index 87%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getChartFilterRulesCount.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getChartFilterRulesCount.test.ts
index 1cec14447a..709bd9b5fe 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getChartFilterRulesCount.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getChartFilterRulesCount.test.ts
@@ -1,5 +1,5 @@
-import { type ChartFilters } from '@/command-menu/pages/page-layout/types/ChartFilters';
-import { getChartFilterRulesCount } from '@/command-menu/pages/page-layout/utils/getChartFilterRulesCount';
+import { type ChartFilters } from '@/side-panel/pages/page-layout/types/ChartFilters';
+import { getChartFilterRulesCount } from '@/side-panel/pages/page-layout/utils/getChartFilterRulesCount';
describe('getChartFilterRulesCount', () => {
it('should return 0 for undefined filter', () => {
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getChartLimitMessage.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getChartLimitMessage.test.ts
similarity index 95%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getChartLimitMessage.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getChartLimitMessage.test.ts
index 04fb4228f9..876cb6ac53 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getChartLimitMessage.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getChartLimitMessage.test.ts
@@ -1,4 +1,4 @@
-import { getChartLimitMessage } from '@/command-menu/pages/page-layout/utils/getChartLimitMessage';
+import { getChartLimitMessage } from '@/side-panel/pages/page-layout/utils/getChartLimitMessage';
import { ObjectRecordGroupByDateGranularity } from 'twenty-shared/types';
import { WidgetConfigurationType } from '~/generated-metadata/graphql';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getConfigurationTypeFromGraphType.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getConfigurationTypeFromGraphType.test.ts
similarity index 87%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getConfigurationTypeFromGraphType.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getConfigurationTypeFromGraphType.test.ts
index ceda91f3f1..be32e0af2c 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getConfigurationTypeFromGraphType.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getConfigurationTypeFromGraphType.test.ts
@@ -1,5 +1,5 @@
-import { GraphType } from '@/command-menu/pages/page-layout/types/GraphType';
-import { getConfigurationTypeFromGraphType } from '@/command-menu/pages/page-layout/utils/getConfigurationTypeFromGraphType';
+import { GraphType } from '@/side-panel/pages/page-layout/types/GraphType';
+import { getConfigurationTypeFromGraphType } from '@/side-panel/pages/page-layout/utils/getConfigurationTypeFromGraphType';
import { WidgetConfigurationType } from '~/generated-metadata/graphql';
describe('getConfigurationTypeFromGraphType', () => {
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getCurrentGraphTypeFromConfig.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getCurrentGraphTypeFromConfig.test.ts
similarity index 86%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getCurrentGraphTypeFromConfig.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getCurrentGraphTypeFromConfig.test.ts
index 95c1edbb2b..ca0fe00d2f 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getCurrentGraphTypeFromConfig.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getCurrentGraphTypeFromConfig.test.ts
@@ -1,6 +1,6 @@
-import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
-import { GraphType } from '@/command-menu/pages/page-layout/types/GraphType';
-import { getCurrentGraphTypeFromConfig } from '@/command-menu/pages/page-layout/utils/getCurrentGraphTypeFromConfig';
+import { type ChartConfiguration } from '@/side-panel/pages/page-layout/types/ChartConfiguration';
+import { GraphType } from '@/side-panel/pages/page-layout/types/GraphType';
+import { getCurrentGraphTypeFromConfig } from '@/side-panel/pages/page-layout/utils/getCurrentGraphTypeFromConfig';
import {
TEST_AGGREGATE_CHART_CONFIGURATION,
TEST_BAR_CHART_CONFIGURATION,
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getDateGranularityPluralLabel.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getDateGranularityPluralLabel.test.ts
similarity index 93%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getDateGranularityPluralLabel.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getDateGranularityPluralLabel.test.ts
index 144a979acb..d24b4da884 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getDateGranularityPluralLabel.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getDateGranularityPluralLabel.test.ts
@@ -1,4 +1,4 @@
-import { getDateGranularityPluralLabel } from '@/command-menu/pages/page-layout/utils/getDateGranularityPluralLabel';
+import { getDateGranularityPluralLabel } from '@/side-panel/pages/page-layout/utils/getDateGranularityPluralLabel';
import { ObjectRecordGroupByDateGranularity } from 'twenty-shared/types';
describe('getDateGranularityPluralLabel', () => {
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getDefaultManualSortOrder.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getDefaultManualSortOrder.test.ts
similarity index 87%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getDefaultManualSortOrder.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getDefaultManualSortOrder.test.ts
index bf973b9d52..1fbaf06766 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getDefaultManualSortOrder.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getDefaultManualSortOrder.test.ts
@@ -1,4 +1,4 @@
-import { getDefaultManualSortOrder } from '@/command-menu/pages/page-layout/utils/getDefaultManualSortOrder';
+import { getDefaultManualSortOrder } from '@/side-panel/pages/page-layout/utils/getDefaultManualSortOrder';
describe('getDefaultManualSortOrder', () => {
it('should return empty array for null options', () => {
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getManualSortOrderFromConfig.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getManualSortOrderFromConfig.test.ts
similarity index 96%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getManualSortOrderFromConfig.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getManualSortOrderFromConfig.test.ts
index 98d637a9e4..8698f2d203 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getManualSortOrderFromConfig.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getManualSortOrderFromConfig.test.ts
@@ -1,4 +1,4 @@
-import { getManualSortOrderFromConfig } from '@/command-menu/pages/page-layout/utils/getManualSortOrderFromConfig';
+import { getManualSortOrderFromConfig } from '@/side-panel/pages/page-layout/utils/getManualSortOrderFromConfig';
import {
WidgetConfigurationType,
type BarChartConfiguration,
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getSortIconForFieldType.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getSortIconForFieldType.test.ts
similarity index 98%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getSortIconForFieldType.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getSortIconForFieldType.test.ts
index 4c9e2e8e78..db1429ad85 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getSortIconForFieldType.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getSortIconForFieldType.test.ts
@@ -8,7 +8,7 @@ import {
IconSortDescendingNumbers,
} from 'twenty-ui/display';
-import { getSortIconForFieldType } from '@/command-menu/pages/page-layout/utils/getSortIconForFieldType';
+import { getSortIconForFieldType } from '@/side-panel/pages/page-layout/utils/getSortIconForFieldType';
import { GraphOrderBy } from '~/generated-metadata/graphql';
describe('getSortIconForFieldType', () => {
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getSortLabelSuffixForFieldType.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getSortLabelSuffixForFieldType.test.ts
similarity index 88%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getSortLabelSuffixForFieldType.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getSortLabelSuffixForFieldType.test.ts
index 2ae9c01073..3be9a8544e 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/getSortLabelSuffixForFieldType.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/getSortLabelSuffixForFieldType.test.ts
@@ -1,4 +1,4 @@
-import { getSortLabelSuffixForFieldType } from '@/command-menu/pages/page-layout/utils/getSortLabelSuffixForFieldType';
+import { getSortLabelSuffixForFieldType } from '@/side-panel/pages/page-layout/utils/getSortLabelSuffixForFieldType';
import { FieldMetadataType } from 'twenty-shared/types';
import { GraphOrderBy } from '~/generated-metadata/graphql';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isChartWidget.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/isChartWidget.test.ts
similarity index 94%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isChartWidget.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/isChartWidget.test.ts
index 6e0fb86064..0be16cb000 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isChartWidget.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/isChartWidget.test.ts
@@ -1,4 +1,4 @@
-import { isChartWidget } from '@/command-menu/pages/page-layout/utils/isChartWidget';
+import { isChartWidget } from '@/side-panel/pages/page-layout/utils/isChartWidget';
import {
createTestWidget,
TEST_BAR_CHART_CONFIGURATION,
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isFieldOrNestedFieldDateKind.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/isFieldOrNestedFieldDateKind.test.ts
similarity index 94%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isFieldOrNestedFieldDateKind.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/isFieldOrNestedFieldDateKind.test.ts
index 8d8b4f0cc2..c3c2e6dd76 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isFieldOrNestedFieldDateKind.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/isFieldOrNestedFieldDateKind.test.ts
@@ -1,4 +1,4 @@
-import { isFieldOrRelationNestedFieldDateKind } from '@/command-menu/pages/page-layout/utils/isFieldOrNestedFieldDateKind';
+import { isFieldOrRelationNestedFieldDateKind } from '@/side-panel/pages/page-layout/utils/isFieldOrNestedFieldDateKind';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { FieldMetadataType } from 'twenty-shared/types';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isMinMaxRangeValid.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/isMinMaxRangeValid.test.ts
similarity index 95%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isMinMaxRangeValid.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/isMinMaxRangeValid.test.ts
index 283e3a6ef6..1f1e06c8f3 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isMinMaxRangeValid.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/isMinMaxRangeValid.test.ts
@@ -1,6 +1,6 @@
-import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
-import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
-import { isMinMaxRangeValid } from '@/command-menu/pages/page-layout/utils/isMinMaxRangeValid';
+import { type ChartConfiguration } from '@/side-panel/pages/page-layout/types/ChartConfiguration';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { isMinMaxRangeValid } from '@/side-panel/pages/page-layout/utils/isMinMaxRangeValid';
import {
BarChartLayout,
WidgetConfigurationType,
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isWidgetConfigurationOfType.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/isWidgetConfigurationOfType.test.ts
similarity index 94%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isWidgetConfigurationOfType.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/isWidgetConfigurationOfType.test.ts
index 924c6d001f..1679184886 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isWidgetConfigurationOfType.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/isWidgetConfigurationOfType.test.ts
@@ -1,4 +1,4 @@
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import {
ALL_CHART_CONFIGURATIONS,
TEST_BAR_CHART_CONFIGURATION,
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isWidgetConfigurationOfTypeGraph.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/isWidgetConfigurationOfTypeGraph.test.ts
similarity index 90%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isWidgetConfigurationOfTypeGraph.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/isWidgetConfigurationOfTypeGraph.test.ts
index 99d63c897a..cdd5474fa0 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isWidgetConfigurationOfTypeGraph.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/isWidgetConfigurationOfTypeGraph.test.ts
@@ -1,4 +1,4 @@
-import { isWidgetConfigurationOfTypeGraph } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfTypeGraph';
+import { isWidgetConfigurationOfTypeGraph } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfTypeGraph';
import {
ALL_CHART_CONFIGURATIONS,
TEST_FIELDS_CONFIGURATION,
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/shouldHideChartSetting.test.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/shouldHideChartSetting.test.ts
similarity index 97%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/shouldHideChartSetting.test.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/shouldHideChartSetting.test.ts
index ff614f657b..7309b76ba7 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/shouldHideChartSetting.test.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/__tests__/shouldHideChartSetting.test.ts
@@ -1,7 +1,7 @@
-import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
-import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
-import { type ChartSettingsItem } from '@/command-menu/pages/page-layout/types/ChartSettingsGroup';
-import { shouldHideChartSetting } from '@/command-menu/pages/page-layout/utils/shouldHideChartSetting';
+import { type ChartConfiguration } from '@/side-panel/pages/page-layout/types/ChartConfiguration';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { shouldHideChartSetting } from '@/side-panel/pages/page-layout/utils/shouldHideChartSetting';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { msg } from '@lingui/core/macro';
import { FieldMetadataType } from 'twenty-shared/types';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/assertChartWidgetOrThrow.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/assertChartWidgetOrThrow.ts
similarity index 92%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/assertChartWidgetOrThrow.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/assertChartWidgetOrThrow.ts
index 01f5eeca27..9c18262ff1 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/assertChartWidgetOrThrow.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/assertChartWidgetOrThrow.ts
@@ -1,4 +1,4 @@
-import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
+import { type ChartConfiguration } from '@/side-panel/pages/page-layout/types/ChartConfiguration';
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { isNonEmptyString } from '@sniptt/guards';
import { assertIsDefinedOrThrow } from 'twenty-shared/utils';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/buildChartGroupByFieldConfigUpdate.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/buildChartGroupByFieldConfigUpdate.ts
similarity index 91%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/buildChartGroupByFieldConfigUpdate.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/buildChartGroupByFieldConfigUpdate.ts
index 41f97db084..2eed1c8c8e 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/buildChartGroupByFieldConfigUpdate.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/buildChartGroupByFieldConfigUpdate.ts
@@ -1,7 +1,7 @@
-import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
-import { getChartDefaultOrderByForFieldType } from '@/command-menu/pages/page-layout/utils/getChartDefaultOrderByForFieldType';
-import { isFieldOrRelationNestedFieldDateKind } from '@/command-menu/pages/page-layout/utils/isFieldOrNestedFieldDateKind';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { type ChartConfiguration } from '@/side-panel/pages/page-layout/types/ChartConfiguration';
+import { getChartDefaultOrderByForFieldType } from '@/side-panel/pages/page-layout/utils/getChartDefaultOrderByForFieldType';
+import { isFieldOrRelationNestedFieldDateKind } from '@/side-panel/pages/page-layout/utils/isFieldOrNestedFieldDateKind';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { ObjectRecordGroupByDateGranularity } from 'twenty-shared/types';
import { isDefined, isFieldMetadataArrayKind } from 'twenty-shared/utils';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/convertAggregateOperationForDateField.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/convertAggregateOperationForDateField.ts
similarity index 91%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/convertAggregateOperationForDateField.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/convertAggregateOperationForDateField.ts
index 2b98c7a02e..8f9328c374 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/convertAggregateOperationForDateField.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/convertAggregateOperationForDateField.ts
@@ -1,4 +1,4 @@
-import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
+import { type ChartConfiguration } from '@/side-panel/pages/page-layout/types/ChartConfiguration';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { AggregateOperations } from '@/object-record/record-table/constants/AggregateOperations';
import { isDefined, isFieldMetadataDateKind } from 'twenty-shared/utils';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/convertBarOrLineChartConfigToPieChart.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/convertBarOrLineChartConfigToPieChart.ts
similarity index 87%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/convertBarOrLineChartConfigToPieChart.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/convertBarOrLineChartConfigToPieChart.ts
index 0b7e76eb08..e91c3bcf3d 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/convertBarOrLineChartConfigToPieChart.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/convertBarOrLineChartConfigToPieChart.ts
@@ -1,4 +1,4 @@
-import { type PieChartConvertibleFields } from '@/command-menu/pages/page-layout/types/PieChartConvertibleFields';
+import { type PieChartConvertibleFields } from '@/side-panel/pages/page-layout/types/PieChartConvertibleFields';
import {
type BarChartConfiguration,
type LineChartConfiguration,
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/convertPieChartConfigToBarOrLineChart.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/convertPieChartConfigToBarOrLineChart.ts
similarity index 75%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/convertPieChartConfigToBarOrLineChart.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/convertPieChartConfigToBarOrLineChart.ts
index deac52765b..b5573dad1e 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/convertPieChartConfigToBarOrLineChart.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/convertPieChartConfigToBarOrLineChart.ts
@@ -1,5 +1,5 @@
-import { type BarLineChartConvertibleFields } from '@/command-menu/pages/page-layout/types/BarLineChartConvertibleFields';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { type BarLineChartConvertibleFields } from '@/side-panel/pages/page-layout/types/BarLineChartConvertibleFields';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { type PieChartConfiguration } from '~/generated-metadata/graphql';
export const convertPieChartConfigToBarOrLineChart = (
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/filterSortOptionsByFieldType.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/filterSortOptionsByFieldType.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/filterSortOptionsByFieldType.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/filterSortOptionsByFieldType.ts
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getBarChartSettings.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getBarChartSettings.ts
new file mode 100644
index 0000000000..51a1a64bb1
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getBarChartSettings.ts
@@ -0,0 +1,80 @@
+import { CHART_SETTINGS_HEADINGS } from '@/side-panel/pages/page-layout/constants/ChartSettingsHeadings';
+import { AXIS_NAME_SETTING } from '@/side-panel/pages/page-layout/constants/settings/AxisNameSetting';
+import { CHART_DATA_SOURCE_SETTING } from '@/side-panel/pages/page-layout/constants/settings/ChartDataSourceSetting';
+import { COLORS_SETTING } from '@/side-panel/pages/page-layout/constants/settings/ColorsSetting';
+import { CUMULATIVE_SETTING } from '@/side-panel/pages/page-layout/constants/settings/CumulativeSetting';
+import { DATA_DISPLAY_X_SETTING } from '@/side-panel/pages/page-layout/constants/settings/DataDisplayXSetting';
+import { DATA_DISPLAY_Y_SETTING } from '@/side-panel/pages/page-layout/constants/settings/DataDisplayYSetting';
+import { DATA_LABELS_SETTING } from '@/side-panel/pages/page-layout/constants/settings/DataLabelsSetting';
+import { DATE_GRANULARITY_X_SETTING } from '@/side-panel/pages/page-layout/constants/settings/DateGranularityXSetting';
+import { DATE_GRANULARITY_Y_SETTING } from '@/side-panel/pages/page-layout/constants/settings/DateGranularityYSetting';
+import { FILTER_SETTING } from '@/side-panel/pages/page-layout/constants/settings/FilterSetting';
+import { GROUP_BY_SETTING } from '@/side-panel/pages/page-layout/constants/settings/GroupBySetting';
+import { OMIT_NULL_VALUES_SETTING } from '@/side-panel/pages/page-layout/constants/settings/OmitNullValuesSetting';
+import { PRIMARY_SORT_BY_SETTING } from '@/side-panel/pages/page-layout/constants/settings/PrimarySortBySetting';
+import { RANGE_MAX_SETTING } from '@/side-panel/pages/page-layout/constants/settings/RangeMaxSetting';
+import { RANGE_MIN_SETTING } from '@/side-panel/pages/page-layout/constants/settings/RangeMinSetting';
+import { SHOW_LEGEND_SETTING } from '@/side-panel/pages/page-layout/constants/settings/ShowLegendSetting';
+import { SORT_BY_GROUP_BY_FIELD_SETTING } from '@/side-panel/pages/page-layout/constants/settings/SortByGroupByFieldSetting';
+import { SPLIT_MULTI_VALUE_FIELDS_X_SETTING } from '@/side-panel/pages/page-layout/constants/settings/SplitMultiValueFieldsXSetting';
+import { SPLIT_MULTI_VALUE_FIELDS_Y_SETTING } from '@/side-panel/pages/page-layout/constants/settings/SplitMultiValueFieldsYSetting';
+import { STACKED_BARS_SETTING } from '@/side-panel/pages/page-layout/constants/settings/StackedBarsSetting';
+import { type ChartSettingsGroup } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { IconAxisX, IconAxisY } from 'twenty-ui/display';
+import { BarChartLayout } from '~/generated-metadata/graphql';
+
+export const getBarChartSettings = (
+ layout: BarChartLayout,
+): ChartSettingsGroup[] => {
+ const isHorizontal = layout === BarChartLayout.HORIZONTAL;
+
+ const dataDisplayXIcon = isHorizontal ? IconAxisY : IconAxisX;
+ const dataDisplayYIcon = isHorizontal ? IconAxisX : IconAxisY;
+
+ const primaryAxisItems = [
+ { ...DATA_DISPLAY_X_SETTING, Icon: dataDisplayXIcon },
+ DATE_GRANULARITY_X_SETTING,
+ PRIMARY_SORT_BY_SETTING,
+ OMIT_NULL_VALUES_SETTING,
+ SPLIT_MULTI_VALUE_FIELDS_X_SETTING,
+ ];
+
+ const secondaryAxisItems = [
+ { ...DATA_DISPLAY_Y_SETTING, Icon: dataDisplayYIcon },
+ GROUP_BY_SETTING,
+ DATE_GRANULARITY_Y_SETTING,
+ SORT_BY_GROUP_BY_FIELD_SETTING,
+ CUMULATIVE_SETTING,
+ RANGE_MIN_SETTING,
+ RANGE_MAX_SETTING,
+ SPLIT_MULTI_VALUE_FIELDS_Y_SETTING,
+ ];
+
+ const xAxisItems = isHorizontal ? secondaryAxisItems : primaryAxisItems;
+ const yAxisItems = isHorizontal ? primaryAxisItems : secondaryAxisItems;
+
+ return [
+ {
+ heading: CHART_SETTINGS_HEADINGS.DATA,
+ items: [CHART_DATA_SOURCE_SETTING, FILTER_SETTING],
+ },
+ {
+ heading: CHART_SETTINGS_HEADINGS.X_AXIS,
+ items: xAxisItems,
+ },
+ {
+ heading: CHART_SETTINGS_HEADINGS.Y_AXIS,
+ items: yAxisItems,
+ },
+ {
+ heading: CHART_SETTINGS_HEADINGS.STYLE,
+ items: [
+ COLORS_SETTING,
+ AXIS_NAME_SETTING,
+ STACKED_BARS_SETTING,
+ DATA_LABELS_SETTING,
+ SHOW_LEGEND_SETTING,
+ ],
+ },
+ ];
+};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getChartAxisNameDisplayOptions.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getChartAxisNameDisplayOptions.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getChartAxisNameDisplayOptions.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getChartAxisNameDisplayOptions.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getChartDefaultOrderByForFieldType.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getChartDefaultOrderByForFieldType.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getChartDefaultOrderByForFieldType.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getChartDefaultOrderByForFieldType.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getChartFilterRulesCount.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getChartFilterRulesCount.ts
similarity index 89%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getChartFilterRulesCount.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getChartFilterRulesCount.ts
index da231a1a04..da13bf930f 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getChartFilterRulesCount.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getChartFilterRulesCount.ts
@@ -1,4 +1,4 @@
-import { type ChartFilters } from '@/command-menu/pages/page-layout/types/ChartFilters';
+import { type ChartFilters } from '@/side-panel/pages/page-layout/types/ChartFilters';
import { isDefined } from 'twenty-shared/utils';
export const getChartFilterRulesCount = (
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getChartFiltersSettingsInstanceId.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getChartFiltersSettingsInstanceId.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getChartFiltersSettingsInstanceId.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getChartFiltersSettingsInstanceId.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getChartLimitMessage.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getChartLimitMessage.ts
similarity index 94%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getChartLimitMessage.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getChartLimitMessage.ts
index d53e2510a7..906c86d666 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getChartLimitMessage.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getChartLimitMessage.ts
@@ -1,4 +1,4 @@
-import { getDateGranularityPluralLabel } from '@/command-menu/pages/page-layout/utils/getDateGranularityPluralLabel';
+import { getDateGranularityPluralLabel } from '@/side-panel/pages/page-layout/utils/getDateGranularityPluralLabel';
import { BAR_CHART_CONSTANTS } from '@/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartConstants';
import { LINE_CHART_CONSTANTS } from '@/page-layout/widgets/graph/graphWidgetLineChart/constants/LineChartConstants';
import { PIE_CHART_MAXIMUM_NUMBER_OF_SLICES } from '@/page-layout/widgets/graph/graphWidgetPieChart/constants/PieChartMaximumNumberOfSlices.constant';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getConfigKeyFromSettingId.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getConfigKeyFromSettingId.ts
similarity index 84%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getConfigKeyFromSettingId.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getConfigKeyFromSettingId.ts
index 50928b789b..45b7d5f280 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getConfigKeyFromSettingId.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getConfigKeyFromSettingId.ts
@@ -1,7 +1,7 @@
import {
type CHART_CONFIGURATION_SETTING_IDS,
CHART_CONFIGURATION_SETTING_TO_CONFIG_KEY_MAP,
-} from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
+} from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
export const getConfigKeyFromSettingId = (
settingId: CHART_CONFIGURATION_SETTING_IDS,
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getConfigurationTypeFromGraphType.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getConfigurationTypeFromGraphType.ts
similarity index 90%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getConfigurationTypeFromGraphType.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getConfigurationTypeFromGraphType.ts
index 68e958ea9c..6b9404c55f 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getConfigurationTypeFromGraphType.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getConfigurationTypeFromGraphType.ts
@@ -1,4 +1,4 @@
-import { GraphType } from '@/command-menu/pages/page-layout/types/GraphType';
+import { GraphType } from '@/side-panel/pages/page-layout/types/GraphType';
import { assertUnreachable } from 'twenty-shared/utils';
import { WidgetConfigurationType } from '~/generated-metadata/graphql';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getCurrentGraphTypeFromConfig.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getCurrentGraphTypeFromConfig.ts
similarity index 76%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getCurrentGraphTypeFromConfig.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getCurrentGraphTypeFromConfig.ts
index 69cda0cce3..e24fcac5f6 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getCurrentGraphTypeFromConfig.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getCurrentGraphTypeFromConfig.ts
@@ -1,6 +1,6 @@
-import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
-import { GraphType } from '@/command-menu/pages/page-layout/types/GraphType';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { type ChartConfiguration } from '@/side-panel/pages/page-layout/types/ChartConfiguration';
+import { GraphType } from '@/side-panel/pages/page-layout/types/GraphType';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { t } from '@lingui/core/macro';
import { BarChartLayout } from '~/generated-metadata/graphql';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getDateGranularityLabel.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getDateGranularityLabel.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getDateGranularityLabel.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getDateGranularityLabel.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getDateGranularityPluralLabel.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getDateGranularityPluralLabel.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getDateGranularityPluralLabel.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getDateGranularityPluralLabel.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getDefaultManualSortOrder.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getDefaultManualSortOrder.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getDefaultManualSortOrder.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getDefaultManualSortOrder.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getFieldLabelWithSubField.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getFieldLabelWithSubField.ts
similarity index 93%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getFieldLabelWithSubField.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getFieldLabelWithSubField.ts
index dddea9a219..c4be5e12e4 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getFieldLabelWithSubField.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getFieldLabelWithSubField.ts
@@ -1,4 +1,4 @@
-import { getRelationFieldLabel } from '@/command-menu/pages/page-layout/utils/getRelationFieldLabel';
+import { getRelationFieldLabel } from '@/side-panel/pages/page-layout/utils/getRelationFieldLabel';
import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { getCompositeSubFieldLabel } from '@/object-record/object-filter-dropdown/utils/getCompositeSubFieldLabel';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getFrontComponentWidgetTypeSelectItemId.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getFrontComponentWidgetTypeSelectItemId.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getFrontComponentWidgetTypeSelectItemId.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getFrontComponentWidgetTypeSelectItemId.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getManualSortOrderFromConfig.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getManualSortOrderFromConfig.ts
similarity index 87%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getManualSortOrderFromConfig.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getManualSortOrderFromConfig.ts
index f3f9ff7960..7b9817a95f 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getManualSortOrderFromConfig.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getManualSortOrderFromConfig.ts
@@ -1,4 +1,4 @@
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { isDefined } from 'twenty-shared/utils';
import { type WidgetConfiguration } from '~/generated-metadata/graphql';
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getPageLayoutIcon.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getPageLayoutIcon.ts
new file mode 100644
index 0000000000..681e82cb3c
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getPageLayoutIcon.ts
@@ -0,0 +1,32 @@
+import { type PageLayoutSidePanelPage } from '@/side-panel/pages/page-layout/types/PageLayoutSidePanelPage';
+import { SidePanelPages } from 'twenty-shared/types';
+import { assertUnreachable } from 'twenty-shared/utils';
+import {
+ IconAppWindow,
+ IconChartPie,
+ IconFilter,
+ IconFrame,
+ IconLayoutSidebarRight,
+ IconList,
+} from 'twenty-ui/display';
+
+export const getPageLayoutIcon = (page: PageLayoutSidePanelPage) => {
+ switch (page) {
+ case SidePanelPages.PageLayoutWidgetTypeSelect:
+ return IconAppWindow;
+ case SidePanelPages.PageLayoutGraphTypeSelect:
+ return IconChartPie;
+ case SidePanelPages.PageLayoutIframeSettings:
+ return IconFrame;
+ case SidePanelPages.PageLayoutGraphFilter:
+ return IconFilter;
+ case SidePanelPages.PageLayoutTabSettings:
+ return IconAppWindow;
+ case SidePanelPages.PageLayoutFieldsSettings:
+ return IconList;
+ case SidePanelPages.PageLayoutFieldsLayout:
+ return IconLayoutSidebarRight;
+ default:
+ assertUnreachable(page);
+ }
+};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getPageLayoutPageTitle.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getPageLayoutPageTitle.ts
new file mode 100644
index 0000000000..d91afd5ea1
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getPageLayoutPageTitle.ts
@@ -0,0 +1,25 @@
+import { type PageLayoutSidePanelPage } from '@/side-panel/pages/page-layout/types/PageLayoutSidePanelPage';
+import { t } from '@lingui/core/macro';
+import { SidePanelPages } from 'twenty-shared/types';
+import { assertUnreachable } from 'twenty-shared/utils';
+
+export const getPageLayoutPageTitle = (page: PageLayoutSidePanelPage) => {
+ switch (page) {
+ case SidePanelPages.PageLayoutWidgetTypeSelect:
+ return t`Add Widget`;
+ case SidePanelPages.PageLayoutGraphTypeSelect:
+ return t`Select Graph Type`;
+ case SidePanelPages.PageLayoutIframeSettings:
+ return t`iFrame Settings`;
+ case SidePanelPages.PageLayoutGraphFilter:
+ return t`Configure filters`;
+ case SidePanelPages.PageLayoutTabSettings:
+ return t`Tab Settings`;
+ case SidePanelPages.PageLayoutFieldsSettings:
+ return t`Fields Settings`;
+ case SidePanelPages.PageLayoutFieldsLayout:
+ return t`Layout`;
+ default:
+ assertUnreachable(page);
+ }
+};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getRelationFieldLabel.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getRelationFieldLabel.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getRelationFieldLabel.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getRelationFieldLabel.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getSortIconForFieldType.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getSortIconForFieldType.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getSortIconForFieldType.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getSortIconForFieldType.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getSortLabelSuffixForFieldType.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getSortLabelSuffixForFieldType.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/getSortLabelSuffixForFieldType.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getSortLabelSuffixForFieldType.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isChartWidget.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/isChartWidget.ts
similarity index 55%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isChartWidget.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/isChartWidget.ts
index dc1b341737..aab0aa1b97 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isChartWidget.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/isChartWidget.ts
@@ -1,5 +1,5 @@
-import { type ChartWidget } from '@/command-menu/pages/page-layout/types/ChartWidget';
-import { isWidgetConfigurationOfTypeGraph } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfTypeGraph';
+import { type ChartWidget } from '@/side-panel/pages/page-layout/types/ChartWidget';
+import { isWidgetConfigurationOfTypeGraph } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfTypeGraph';
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
export const isChartWidget = (
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isExistingWidgetMissingOrDifferentType.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/isExistingWidgetMissingOrDifferentType.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isExistingWidgetMissingOrDifferentType.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/isExistingWidgetMissingOrDifferentType.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isFieldOrNestedFieldDateKind.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/isFieldOrNestedFieldDateKind.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isFieldOrNestedFieldDateKind.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/isFieldOrNestedFieldDateKind.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isMinMaxRangeValid.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/isMinMaxRangeValid.ts
similarity index 73%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isMinMaxRangeValid.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/isMinMaxRangeValid.ts
index 4f7b4410d0..b14ddab6b3 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isMinMaxRangeValid.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/isMinMaxRangeValid.ts
@@ -1,6 +1,6 @@
-import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
-import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { type ChartConfiguration } from '@/side-panel/pages/page-layout/types/ChartConfiguration';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { isDefined } from 'twenty-shared/utils';
export const isMinMaxRangeValid = (
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isWidgetConfigurationOfTypeGraph.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/isWidgetConfigurationOfTypeGraph.ts
similarity index 78%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isWidgetConfigurationOfTypeGraph.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/isWidgetConfigurationOfTypeGraph.ts
index 5da5e66a8a..5ef6c0bf69 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isWidgetConfigurationOfTypeGraph.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/isWidgetConfigurationOfTypeGraph.ts
@@ -1,5 +1,5 @@
-import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { type ChartConfiguration } from '@/side-panel/pages/page-layout/types/ChartConfiguration';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { type FieldConfiguration } from '@/page-layout/types/FieldConfiguration';
import {
type FieldsConfiguration,
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/shouldHideChartSetting.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/shouldHideChartSetting.ts
similarity index 92%
rename from packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/shouldHideChartSetting.ts
rename to packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/shouldHideChartSetting.ts
index cf50e2ef5a..b587cc344d 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/shouldHideChartSetting.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/shouldHideChartSetting.ts
@@ -1,7 +1,7 @@
-import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
-import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
-import { type ChartSettingsItem } from '@/command-menu/pages/page-layout/types/ChartSettingsGroup';
-import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { type ChartConfiguration } from '@/side-panel/pages/page-layout/types/ChartConfiguration';
+import { CHART_CONFIGURATION_SETTING_IDS } from '@/side-panel/pages/page-layout/types/ChartConfigurationSettingIds';
+import { type ChartSettingsItem } from '@/side-panel/pages/page-layout/types/ChartSettingsGroup';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { isFieldRelation } from '@/object-record/record-field/ui/types/guards/isFieldRelation';
import { isRelationNestedFieldDateKind } from '@/page-layout/widgets/graph/utils/isRelationNestedFieldDateKind';
diff --git a/packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuMergeRecordPage.tsx b/packages/twenty-front/src/modules/side-panel/pages/record-page/components/SidePanelMergeRecordPage.tsx
similarity index 68%
rename from packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuMergeRecordPage.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/record-page/components/SidePanelMergeRecordPage.tsx
index ebc7fa4813..e9811383ee 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuMergeRecordPage.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/record-page/components/SidePanelMergeRecordPage.tsx
@@ -1,5 +1,5 @@
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
-import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
+import { SidePanelPageComponentInstanceContext } from '@/side-panel/states/contexts/SidePanelPageComponentInstanceContext';
import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { RecordComponentInstanceContextsWrapper } from '@/object-record/components/RecordComponentInstanceContextsWrapper';
@@ -7,40 +7,40 @@ import { MergeRecordsContainer } from '@/object-record/record-merge/components/M
import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext';
import { styled } from '@linaria/react';
-const StyledRightDrawerRecord = styled.div`
+const StyledSidePanelRecord = styled.div`
height: 100%;
`;
-export const CommandMenuMergeRecordPage = () => {
- const commandMenuPageInstanceId = useComponentInstanceStateContext(
- CommandMenuPageComponentInstanceContext,
+export const SidePanelMergeRecordPage = () => {
+ const sidePanelPageInstanceId = useComponentInstanceStateContext(
+ SidePanelPageComponentInstanceContext,
)?.instanceId;
const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow(
- commandMenuPageInstanceId,
+ sidePanelPageInstanceId,
);
- if (!commandMenuPageInstanceId) {
+ if (!sidePanelPageInstanceId) {
throw new Error('Command menu page instance id is not defined');
}
return (
-
+
-
+
diff --git a/packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuRecordPage.tsx b/packages/twenty-front/src/modules/side-panel/pages/record-page/components/SidePanelRecordPage.tsx
similarity index 77%
rename from packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuRecordPage.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/record-page/components/SidePanelRecordPage.tsx
index 080a0d8868..fda2b13be3 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuRecordPage.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/record-page/components/SidePanelRecordPage.tsx
@@ -1,8 +1,8 @@
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { TimelineActivityContext } from '@/activities/timeline-activities/contexts/TimelineActivityContext';
-import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
-import { viewableRecordNameSingularComponentState } from '@/command-menu/pages/record-page/states/viewableRecordNameSingularComponentState';
-import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
+import { viewableRecordIdComponentState } from '@/side-panel/pages/record-page/states/viewableRecordIdComponentState';
+import { viewableRecordNameSingularComponentState } from '@/side-panel/pages/record-page/states/viewableRecordNameSingularComponentState';
+import { SidePanelPageComponentInstanceContext } from '@/side-panel/states/contexts/SidePanelPageComponentInstanceContext';
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { INFORMATION_BANNER_HEIGHT } from '@/information-banner/constants/InformationBannerHeight';
import { RecordComponentInstanceContextsWrapper } from '@/object-record/components/RecordComponentInstanceContextsWrapper';
@@ -14,7 +14,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
import { styled } from '@linaria/react';
import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
-const StyledRightDrawerRecord = styled.div<{
+const StyledSidePanelRecord = styled.div<{
hasDeletedRecordBanner: boolean;
}>`
height: ${({ hasDeletedRecordBanner }) => {
@@ -25,7 +25,7 @@ const StyledRightDrawerRecord = styled.div<{
}};
`;
-export const CommandMenuRecordPage = () => {
+export const SidePanelRecordPage = () => {
const viewableRecordNameSingular = useAtomComponentStateValue(
viewableRecordNameSingularComponentState,
);
@@ -55,11 +55,11 @@ export const CommandMenuRecordPage = () => {
},
);
- const commandMenuPageInstanceId = useComponentInstanceStateContext(
- CommandMenuPageComponentInstanceContext,
+ const sidePanelPageInstanceId = useComponentInstanceStateContext(
+ SidePanelPageComponentInstanceContext,
)?.instanceId;
- if (!commandMenuPageInstanceId) {
+ if (!sidePanelPageInstanceId) {
throw new Error('Command menu page instance id is not defined');
}
@@ -69,13 +69,13 @@ export const CommandMenuRecordPage = () => {
>
-
+
{
id: objectRecordId,
targetObjectNameSingular: objectNameSingular,
}}
- isInRightDrawer
+ isInSidePanel
/>
-
+
diff --git a/packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuUpdateMultipleRecords.tsx b/packages/twenty-front/src/modules/side-panel/pages/record-page/components/SidePanelUpdateMultipleRecords.tsx
similarity index 58%
rename from packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuUpdateMultipleRecords.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/record-page/components/SidePanelUpdateMultipleRecords.tsx
index ab3d4094c5..29435489df 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/record-page/components/CommandMenuUpdateMultipleRecords.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/record-page/components/SidePanelUpdateMultipleRecords.tsx
@@ -1,33 +1,33 @@
-import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
+import { SidePanelPageComponentInstanceContext } from '@/side-panel/states/contexts/SidePanelPageComponentInstanceContext';
import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
import { UpdateMultipleRecordsContainer } from '@/object-record/record-update-multiple/components/UpdateMultipleRecordsContainer';
import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext';
import { styled } from '@linaria/react';
-const StyledRightDrawerRecord = styled.div`
+const StyledSidePanelRecord = styled.div`
height: 100%;
`;
-export const CommandMenuUpdateMultipleRecords = () => {
- const commandMenuPageInstanceId = useComponentInstanceStateContext(
- CommandMenuPageComponentInstanceContext,
+export const SidePanelUpdateMultipleRecords = () => {
+ const sidePanelPageInstanceId = useComponentInstanceStateContext(
+ SidePanelPageComponentInstanceContext,
)?.instanceId;
- if (!commandMenuPageInstanceId) {
+ if (!sidePanelPageInstanceId) {
throw new Error('Command menu page instance id is not defined');
}
const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow(
- commandMenuPageInstanceId,
+ sidePanelPageInstanceId,
);
return (
-
+
-
+
);
};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/record-page/states/viewableRecordIdComponentState.ts b/packages/twenty-front/src/modules/side-panel/pages/record-page/states/viewableRecordIdComponentState.ts
new file mode 100644
index 0000000000..7e347752be
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/record-page/states/viewableRecordIdComponentState.ts
@@ -0,0 +1,10 @@
+import { SidePanelPageComponentInstanceContext } from '@/side-panel/states/contexts/SidePanelPageComponentInstanceContext';
+import { createAtomComponentState } from '@/ui/utilities/state/jotai/utils/createAtomComponentState';
+
+export const viewableRecordIdComponentState = createAtomComponentState<
+ string | null
+>({
+ key: 'side-panel/viewable-record-id',
+ defaultValue: null,
+ componentInstanceContext: SidePanelPageComponentInstanceContext,
+});
diff --git a/packages/twenty-front/src/modules/side-panel/pages/record-page/states/viewableRecordNameSingularComponentState.ts b/packages/twenty-front/src/modules/side-panel/pages/record-page/states/viewableRecordNameSingularComponentState.ts
new file mode 100644
index 0000000000..fb8f85cb0a
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/record-page/states/viewableRecordNameSingularComponentState.ts
@@ -0,0 +1,9 @@
+import { SidePanelPageComponentInstanceContext } from '@/side-panel/states/contexts/SidePanelPageComponentInstanceContext';
+import { createAtomComponentState } from '@/ui/utilities/state/jotai/utils/createAtomComponentState';
+
+export const viewableRecordNameSingularComponentState =
+ createAtomComponentState({
+ key: 'side-panel/viewable-record-name-singular',
+ defaultValue: null,
+ componentInstanceContext: SidePanelPageComponentInstanceContext,
+ });
diff --git a/packages/twenty-front/src/modules/command-menu/pages/rich-text-page/components/CommandMenuEditRichTextPage.tsx b/packages/twenty-front/src/modules/side-panel/pages/rich-text-page/components/SidePanelEditRichTextPage.tsx
similarity index 91%
rename from packages/twenty-front/src/modules/command-menu/pages/rich-text-page/components/CommandMenuEditRichTextPage.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/rich-text-page/components/SidePanelEditRichTextPage.tsx
index d09a92b0f4..50826d9e8c 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/rich-text-page/components/CommandMenuEditRichTextPage.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/rich-text-page/components/SidePanelEditRichTextPage.tsx
@@ -1,5 +1,5 @@
import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
-import { viewableRichTextComponentState } from '@/command-menu/pages/rich-text-page/states/viewableRichTextComponentState';
+import { viewableRichTextComponentState } from '@/side-panel/pages/rich-text-page/states/viewableRichTextComponentState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { styled } from '@linaria/react';
import { lazy, Suspense, useContext } from 'react';
@@ -33,7 +33,7 @@ const LoadingSkeleton = () => {
);
};
-export const CommandMenuEditRichTextPage = () => {
+export const SidePanelEditRichTextPage = () => {
const { activityId, activityObjectNameSingular } = useAtomStateValue(
viewableRichTextComponentState,
);
diff --git a/packages/twenty-front/src/modules/command-menu/pages/rich-text-page/states/viewableRichTextComponentState.ts b/packages/twenty-front/src/modules/side-panel/pages/rich-text-page/states/viewableRichTextComponentState.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/rich-text-page/states/viewableRichTextComponentState.ts
rename to packages/twenty-front/src/modules/side-panel/pages/rich-text-page/states/viewableRichTextComponentState.ts
diff --git a/packages/twenty-front/src/modules/command-menu/components/ResetContextToSelectionCommandButton.tsx b/packages/twenty-front/src/modules/side-panel/pages/root/components/SidePanelResetContextToSelectionButton.tsx
similarity index 65%
rename from packages/twenty-front/src/modules/command-menu/components/ResetContextToSelectionCommandButton.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/root/components/SidePanelResetContextToSelectionButton.tsx
index 9e1df473c7..8e4d6f9ea1 100644
--- a/packages/twenty-front/src/modules/command-menu/components/ResetContextToSelectionCommandButton.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/root/components/SidePanelResetContextToSelectionButton.tsx
@@ -1,8 +1,8 @@
-import { CommandMenuContextRecordsChip } from '@/command-menu/components/CommandMenuContextRecordsChip';
+import { SidePanelContextRecordsChip } from '@/side-panel/components/SidePanelContextRecordsChip';
import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
-import { COMMAND_MENU_PREVIOUS_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuPreviousComponentInstanceId';
-import { RESET_CONTEXT_TO_SELECTION } from '@/command-menu/constants/ResetContextToSelection';
-import { useResetPreviousCommandMenuContext } from '@/command-menu/hooks/useResetPreviousCommandMenuContext';
+import { SIDE_PANEL_PREVIOUS_COMPONENT_INSTANCE_ID } from '@/side-panel/constants/SidePanelPreviousComponentInstanceId';
+import { SIDE_PANEL_RESET_CONTEXT_TO_SELECTION } from '@/side-panel/constants/SidePanelResetContextToSelection';
+import { useResetPreviousSidePanelContext } from '@/side-panel/pages/root/hooks/useResetPreviousSidePanelContext';
import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
@@ -13,15 +13,15 @@ import { t } from '@lingui/core/macro';
import { isDefined } from 'twenty-shared/utils';
import { IconArrowBackUp } from 'twenty-ui/display';
-export const ResetContextToSelectionCommandButton = () => {
+export const SidePanelResetContextToSelectionButton = () => {
const contextStoreTargetedRecordsRule = useAtomComponentStateValue(
contextStoreTargetedRecordsRuleComponentState,
- 'command-menu-previous',
+ SIDE_PANEL_PREVIOUS_COMPONENT_INSTANCE_ID,
);
const contextStoreCurrentObjectMetadataItemId = useAtomComponentStateValue(
contextStoreCurrentObjectMetadataItemIdComponentState,
- 'command-menu-previous',
+ SIDE_PANEL_PREVIOUS_COMPONENT_INSTANCE_ID,
);
const objectMetadataItems = useAtomStateValue(objectMetadataItemsState);
@@ -31,8 +31,7 @@ export const ResetContextToSelectionCommandButton = () => {
objectMetadataItem.id === contextStoreCurrentObjectMetadataItemId,
);
- const { resetPreviousCommandMenuContext } =
- useResetPreviousCommandMenuContext();
+ const { resetPreviousSidePanelContext } = useResetPreviousSidePanelContext();
if (
!isDefined(objectMetadataItem) ||
@@ -44,20 +43,20 @@ export const ResetContextToSelectionCommandButton = () => {
return (
}
- onClick={resetPreviousCommandMenuContext}
+ onClick={resetPreviousSidePanelContext}
/>
);
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx b/packages/twenty-front/src/modules/side-panel/pages/root/components/SidePanelRootPage.tsx
similarity index 66%
rename from packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/root/components/SidePanelRootPage.tsx
index 7073987a82..5204efc9e0 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/root/components/SidePanelRootPage.tsx
@@ -1,26 +1,22 @@
-import { type ActionConfig } from '@/action-menu/actions/types/ActionConfig';
-import { CommandGroup } from '@/command-menu/components/CommandGroup';
-import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
-import { ResetContextToSelectionCommandButton } from '@/command-menu/components/ResetContextToSelectionCommandButton';
-import { RESET_CONTEXT_TO_SELECTION } from '@/command-menu/constants/ResetContextToSelection';
-import { useMatchingCommandMenuActions } from '@/command-menu/hooks/useMatchingCommandMenuActions';
-import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
+import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
+import { SidePanelList } from '@/side-panel/components/SidePanelList';
+import { SIDE_PANEL_PREVIOUS_COMPONENT_INSTANCE_ID } from '@/side-panel/constants/SidePanelPreviousComponentInstanceId';
+import { SIDE_PANEL_RESET_CONTEXT_TO_SELECTION } from '@/side-panel/constants/SidePanelResetContextToSelection';
+import { sidePanelSearchState } from '@/side-panel/states/sidePanelSearchState';
+import { type SidePanelActionGroupConfig } from '@/side-panel/types/SidePanelActionGroupConfig';
import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
+import { SidePanelResetContextToSelectionButton } from '@/side-panel/pages/root/components/SidePanelResetContextToSelectionButton';
+import { useSidePanelMatchingActions } from '@/side-panel/pages/root/hooks/useSidePanelMatchingActions';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useLingui } from '@lingui/react/macro';
import { isDefined } from 'twenty-shared/utils';
-export type ActionGroupConfig = {
- heading: string;
- items?: ActionConfig[];
-};
-
-export const CommandMenu = () => {
+export const SidePanelRootPage = () => {
const { t } = useLingui();
- const commandMenuSearch = useAtomStateValue(commandMenuSearchState);
+ const sidePanelSearch = useAtomStateValue(sidePanelSearchState);
const { objectMetadataItems } = useObjectMetadataItems();
const {
@@ -35,15 +31,15 @@ export const CommandMenu = () => {
matchingNavigateActions,
fallbackActions,
matchingCreateRelatedRecordActions,
- } = useMatchingCommandMenuActions({
- commandMenuSearch,
+ } = useSidePanelMatchingActions({
+ sidePanelSearch,
});
// eslint-disable-next-line twenty/matching-state-variable
const previousContextStoreCurrentObjectMetadataItemId =
useAtomComponentStateValue(
contextStoreCurrentObjectMetadataItemIdComponentState,
- 'command-menu-previous',
+ SIDE_PANEL_PREVIOUS_COMPONENT_INSTANCE_ID,
);
const contextStoreCurrentObjectMetadataItemId = useAtomComponentStateValue(
@@ -53,7 +49,7 @@ export const CommandMenu = () => {
(item) => item.id === contextStoreCurrentObjectMetadataItemId,
);
- const commandGroups: ActionGroupConfig[] = [
+ const commandGroups: SidePanelActionGroupConfig[] = [
{
heading: t`Record Selection`,
items: matchingStandardActionRecordSelectionActions
@@ -76,7 +72,7 @@ export const CommandMenu = () => {
.concat(matchingNavigateActions),
},
{
- heading: t`Search ''${commandMenuSearch}'' with...`,
+ heading: t`Search ''${sidePanelSearch}'' with...`,
items: fallbackActions,
},
];
@@ -86,20 +82,20 @@ export const CommandMenu = () => {
const selectableItemIds = selectableItems.map((item) => item.key);
if (isDefined(previousContextStoreCurrentObjectMetadataItemId)) {
- selectableItemIds.unshift(RESET_CONTEXT_TO_SELECTION);
+ selectableItemIds.unshift(SIDE_PANEL_RESET_CONTEXT_TO_SELECTION);
}
return (
-
{isDefined(previousContextStoreCurrentObjectMetadataItemId) && (
-
-
-
+
+
+
)}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useFilterActionsWithCommandMenuSearch.test.tsx b/packages/twenty-front/src/modules/side-panel/pages/root/hooks/__tests__/useFilterActionsWithSidePanelSearch.test.tsx
similarity index 70%
rename from packages/twenty-front/src/modules/command-menu/hooks/__tests__/useFilterActionsWithCommandMenuSearch.test.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/root/hooks/__tests__/useFilterActionsWithSidePanelSearch.test.tsx
index 7f235d838c..2fb9dc2e16 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useFilterActionsWithCommandMenuSearch.test.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/root/hooks/__tests__/useFilterActionsWithSidePanelSearch.test.tsx
@@ -3,11 +3,11 @@ import { ActionScope } from '@/action-menu/actions/types/ActionScope';
import { ActionType } from '@/action-menu/actions/types/ActionType';
import { renderHook } from '@testing-library/react';
import { IconPlus } from 'twenty-ui/display';
-import { useFilterActionsWithCommandMenuSearch } from '@/command-menu/hooks/useFilterActionsWithCommandMenuSearch';
+import { useFilterActionsWithSidePanelSearch } from '@/side-panel/pages/root/hooks/useFilterActionsWithSidePanelSearch';
const MockComponent = Mock Component
;
-describe('useFilterActionsWithCommandMenuSearch', () => {
+describe('useFilterActionsWithSidePanelSearch', () => {
const mockActions: ActionConfig[] = [
{
key: 'action-1',
@@ -45,22 +45,22 @@ describe('useFilterActionsWithCommandMenuSearch', () => {
it('should return all actions when search is empty', () => {
const { result } = renderHook(() =>
- useFilterActionsWithCommandMenuSearch({ commandMenuSearch: '' }),
+ useFilterActionsWithSidePanelSearch({ sidePanelSearch: '' }),
);
const filtered =
- result.current.filterActionsWithCommandMenuSearch(mockActions);
+ result.current.filterActionsWithSidePanelSearch(mockActions);
expect(filtered).toEqual(mockActions);
});
it('should filter actions by label', () => {
const { result } = renderHook(() =>
- useFilterActionsWithCommandMenuSearch({ commandMenuSearch: 'Create' }),
+ useFilterActionsWithSidePanelSearch({ sidePanelSearch: 'Create' }),
);
const filtered =
- result.current.filterActionsWithCommandMenuSearch(mockActions);
+ result.current.filterActionsWithSidePanelSearch(mockActions);
expect(filtered).toHaveLength(1);
expect(filtered[0].key).toBe('action-1');
@@ -68,11 +68,11 @@ describe('useFilterActionsWithCommandMenuSearch', () => {
it('should filter actions by hotkeys', () => {
const { result } = renderHook(() =>
- useFilterActionsWithCommandMenuSearch({ commandMenuSearch: 'del' }),
+ useFilterActionsWithSidePanelSearch({ sidePanelSearch: 'del' }),
);
const filtered =
- result.current.filterActionsWithCommandMenuSearch(mockActions);
+ result.current.filterActionsWithSidePanelSearch(mockActions);
expect(filtered).toHaveLength(1);
expect(filtered[0].key).toBe('action-2');
@@ -80,22 +80,22 @@ describe('useFilterActionsWithCommandMenuSearch', () => {
it('should return empty array when no actions match', () => {
const { result } = renderHook(() =>
- useFilterActionsWithCommandMenuSearch({ commandMenuSearch: 'xyz' }),
+ useFilterActionsWithSidePanelSearch({ sidePanelSearch: 'xyz' }),
);
const filtered =
- result.current.filterActionsWithCommandMenuSearch(mockActions);
+ result.current.filterActionsWithSidePanelSearch(mockActions);
expect(filtered).toEqual([]);
});
it('should match actions by either label or hotkeys', () => {
const { result } = renderHook(() =>
- useFilterActionsWithCommandMenuSearch({ commandMenuSearch: 'Record' }),
+ useFilterActionsWithSidePanelSearch({ sidePanelSearch: 'Record' }),
);
const filtered =
- result.current.filterActionsWithCommandMenuSearch(mockActions);
+ result.current.filterActionsWithSidePanelSearch(mockActions);
expect(filtered).toHaveLength(3);
});
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useFilterActionsWithCommandMenuSearch.ts b/packages/twenty-front/src/modules/side-panel/pages/root/hooks/useFilterActionsWithSidePanelSearch.ts
similarity index 68%
rename from packages/twenty-front/src/modules/command-menu/hooks/useFilterActionsWithCommandMenuSearch.ts
rename to packages/twenty-front/src/modules/side-panel/pages/root/hooks/useFilterActionsWithSidePanelSearch.ts
index 79b8872bb5..66364e5946 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useFilterActionsWithCommandMenuSearch.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/root/hooks/useFilterActionsWithSidePanelSearch.ts
@@ -19,26 +19,26 @@ const checkInLabels = (action: ActionConfig, search: string) => {
return false;
};
-type UseFilterActionsWithCommandMenuSearchProps = {
- commandMenuSearch: string;
+type UseFilterActionsWithSidePanelSearchProps = {
+ sidePanelSearch: string;
};
-export const useFilterActionsWithCommandMenuSearch = ({
- commandMenuSearch,
-}: UseFilterActionsWithCommandMenuSearchProps) => {
- const filterActionsWithCommandMenuSearch = useCallback(
+export const useFilterActionsWithSidePanelSearch = ({
+ sidePanelSearch,
+}: UseFilterActionsWithSidePanelSearchProps) => {
+ const filterActionsWithSidePanelSearch = useCallback(
(actions: ActionConfig[]) => {
return actions.filter((action) =>
- commandMenuSearch.length > 0
- ? checkInShortcuts(action, commandMenuSearch) ||
- checkInLabels(action, commandMenuSearch)
+ sidePanelSearch.length > 0
+ ? checkInShortcuts(action, sidePanelSearch) ||
+ checkInLabels(action, sidePanelSearch)
: true,
);
},
- [commandMenuSearch],
+ [sidePanelSearch],
);
return {
- filterActionsWithCommandMenuSearch,
+ filterActionsWithSidePanelSearch,
};
};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/root/hooks/useResetPreviousSidePanelContext.ts b/packages/twenty-front/src/modules/side-panel/pages/root/hooks/useResetPreviousSidePanelContext.ts
new file mode 100644
index 0000000000..0bb145a7ec
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/root/hooks/useResetPreviousSidePanelContext.ts
@@ -0,0 +1,21 @@
+import { SIDE_PANEL_COMPONENT_INSTANCE_ID } from '@/side-panel/constants/SidePanelComponentInstanceId';
+import { SIDE_PANEL_PREVIOUS_COMPONENT_INSTANCE_ID } from '@/side-panel/constants/SidePanelPreviousComponentInstanceId';
+import { useCopyContextStoreStates } from '@/command-menu/hooks/useCopyContextStoreAndActionMenuStates';
+import { useResetContextStoreStates } from '@/command-menu/hooks/useResetContextStoreStates';
+
+export const useResetPreviousSidePanelContext = () => {
+ const { copyContextStoreStates } = useCopyContextStoreStates();
+ const { resetContextStoreStates } = useResetContextStoreStates();
+
+ const resetPreviousSidePanelContext = () => {
+ copyContextStoreStates({
+ instanceIdToCopyFrom: SIDE_PANEL_PREVIOUS_COMPONENT_INSTANCE_ID,
+ instanceIdToCopyTo: SIDE_PANEL_COMPONENT_INSTANCE_ID,
+ });
+ resetContextStoreStates(SIDE_PANEL_PREVIOUS_COMPONENT_INSTANCE_ID);
+ };
+
+ return {
+ resetPreviousSidePanelContext,
+ };
+};
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuActions.tsx b/packages/twenty-front/src/modules/side-panel/pages/root/hooks/useSidePanelActions.tsx
similarity index 98%
rename from packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuActions.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/root/hooks/useSidePanelActions.tsx
index 956f3079e2..c7ef18b527 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuActions.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/root/hooks/useSidePanelActions.tsx
@@ -4,7 +4,7 @@ import { ActionType } from '@/action-menu/actions/types/ActionType';
import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
import { useContext } from 'react';
-export const useCommandMenuActions = () => {
+export const useSidePanelActions = () => {
const { actions } = useContext(ActionMenuContext);
const navigateActions = actions?.filter(
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useMatchingCommandMenuActions.ts b/packages/twenty-front/src/modules/side-panel/pages/root/hooks/useSidePanelMatchingActions.ts
similarity index 59%
rename from packages/twenty-front/src/modules/command-menu/hooks/useMatchingCommandMenuActions.ts
rename to packages/twenty-front/src/modules/side-panel/pages/root/hooks/useSidePanelMatchingActions.ts
index f0843102c5..c1509a0777 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useMatchingCommandMenuActions.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/root/hooks/useSidePanelMatchingActions.ts
@@ -1,14 +1,14 @@
-import { useCommandMenuActions } from '@/command-menu/hooks/useCommandMenuActions';
-import { useFilterActionsWithCommandMenuSearch } from '@/command-menu/hooks/useFilterActionsWithCommandMenuSearch';
+import { useFilterActionsWithSidePanelSearch } from '@/side-panel/pages/root/hooks/useFilterActionsWithSidePanelSearch';
+import { useSidePanelActions } from '@/side-panel/pages/root/hooks/useSidePanelActions';
-export const useMatchingCommandMenuActions = ({
- commandMenuSearch,
+export const useSidePanelMatchingActions = ({
+ sidePanelSearch,
}: {
- commandMenuSearch: string;
+ sidePanelSearch: string;
}) => {
- const { filterActionsWithCommandMenuSearch } =
- useFilterActionsWithCommandMenuSearch({
- commandMenuSearch,
+ const { filterActionsWithSidePanelSearch } =
+ useFilterActionsWithSidePanelSearch({
+ sidePanelSearch: sidePanelSearch,
});
const {
@@ -22,34 +22,35 @@ export const useMatchingCommandMenuActions = ({
frontComponentRecordSelectionActions,
fallbackActions,
createRelatedRecordActions,
- } = useCommandMenuActions();
+ } = useSidePanelActions();
const matchingNavigateActions =
- filterActionsWithCommandMenuSearch(navigateActions);
+ filterActionsWithSidePanelSearch(navigateActions);
const matchingStandardActionRecordSelectionActions =
- filterActionsWithCommandMenuSearch(actionRecordSelectionActions);
+ filterActionsWithSidePanelSearch(actionRecordSelectionActions);
const matchingStandardActionObjectActions =
- filterActionsWithCommandMenuSearch(actionObjectActions);
+ filterActionsWithSidePanelSearch(actionObjectActions);
const matchingStandardActionGlobalActions =
- filterActionsWithCommandMenuSearch(actionGlobalActions);
+ filterActionsWithSidePanelSearch(actionGlobalActions);
const matchingWorkflowRunRecordSelectionActions =
- filterActionsWithCommandMenuSearch(workflowRunRecordSelectionActions);
+ filterActionsWithSidePanelSearch(workflowRunRecordSelectionActions);
- const matchingWorkflowRunGlobalActions = filterActionsWithCommandMenuSearch(
+ const matchingWorkflowRunGlobalActions = filterActionsWithSidePanelSearch(
workflowRunGlobalActions,
);
- const matchingFrontComponentGlobalActions =
- filterActionsWithCommandMenuSearch(frontComponentGlobalActions);
+ const matchingFrontComponentGlobalActions = filterActionsWithSidePanelSearch(
+ frontComponentGlobalActions,
+ );
const matchingFrontComponentRecordSelectionActions =
- filterActionsWithCommandMenuSearch(frontComponentRecordSelectionActions);
+ filterActionsWithSidePanelSearch(frontComponentRecordSelectionActions);
- const matchingCreateRelatedRecordActions = filterActionsWithCommandMenuSearch(
+ const matchingCreateRelatedRecordActions = filterActionsWithSidePanelSearch(
createRelatedRecordActions,
);
diff --git a/packages/twenty-front/src/modules/command-menu/pages/search/components/CommandMenuSearchRecordsPage.tsx b/packages/twenty-front/src/modules/side-panel/pages/search/components/SidePanelSearchRecordsPage.tsx
similarity index 52%
rename from packages/twenty-front/src/modules/command-menu/pages/search/components/CommandMenuSearchRecordsPage.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/search/components/SidePanelSearchRecordsPage.tsx
index 15435c7042..8c65bb163f 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/search/components/CommandMenuSearchRecordsPage.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/search/components/SidePanelSearchRecordsPage.tsx
@@ -1,9 +1,9 @@
-import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
-import { useCommandMenuSearchRecords } from '@/command-menu/hooks/useCommandMenuSearchRecords';
+import { SidePanelList } from '@/side-panel/components/SidePanelList';
+import { useSidePanelSearchRecords } from '@/side-panel/pages/search/hooks/useSidePanelSearchRecords';
import { useMemo } from 'react';
-export const CommandMenuSearchRecordsPage = () => {
- const { commandGroups, loading, noResults } = useCommandMenuSearchRecords();
+export const SidePanelSearchRecordsPage = () => {
+ const { commandGroups, loading, noResults } = useSidePanelSearchRecords();
const selectableItemIds = useMemo(() => {
return commandGroups
@@ -12,7 +12,7 @@ export const CommandMenuSearchRecordsPage = () => {
}, [commandGroups]);
return (
- {
- const commandMenuSearch = useAtomStateValue(commandMenuSearchState);
+export const useSidePanelSearchRecords = () => {
+ const sidePanelSearch = useAtomStateValue(sidePanelSearchState);
const coreClient = useApolloCoreClient();
- const [deferredCommandMenuSearch] = useDebounce(commandMenuSearch, 300);
+ const [deferredSidePanelSearch] = useDebounce(sidePanelSearch, 300);
const { objectPermissionsByObjectMetadataId } = useObjectPermissions();
const { objectMetadataItems } = useObjectMetadataItems();
@@ -41,7 +41,7 @@ export const useCommandMenuSearchRecords = () => {
const { data: searchData, loading } = useSearchQuery({
client: coreClient,
variables: {
- searchInput: deferredCommandMenuSearch ?? '',
+ searchInput: deferredSidePanelSearch ?? '',
limit: MAX_SEARCH_RESULTS,
excludedObjectNameSingulars: [
'workspaceMember',
@@ -50,7 +50,7 @@ export const useCommandMenuSearchRecords = () => {
},
});
- const { openRecordInCommandMenu } = useOpenRecordInCommandMenu();
+ const { openRecordInSidePanel } = useOpenRecordInSidePanel();
const actionItems = useMemo(() => {
return (searchData?.search.edges.map((edge) => edge.node) ?? []).map(
@@ -92,11 +92,11 @@ export const useCommandMenuSearchRecords = () => {
{
searchRecord.objectNameSingular === 'task'
- ? openRecordInCommandMenu({
+ ? openRecordInSidePanel({
recordId: searchRecord.recordId,
objectNameSingular: CoreObjectNameSingular.Task,
})
- : openRecordInCommandMenu({
+ : openRecordInSidePanel({
recordId: searchRecord.recordId,
objectNameSingular: CoreObjectNameSingular.Note,
});
@@ -121,7 +121,7 @@ export const useCommandMenuSearchRecords = () => {
};
},
);
- }, [searchData, openRecordInCommandMenu, objectMetadataItems]);
+ }, [searchData, openRecordInSidePanel, objectMetadataItems]);
return {
loading,
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectAction.tsx b/packages/twenty-front/src/modules/side-panel/pages/workflow/action/components/SidePanelWorkflowSelectAction.tsx
similarity index 77%
rename from packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectAction.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/workflow/action/components/SidePanelWorkflowSelectAction.tsx
index 7c1a379796..3cea913751 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectAction.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/action/components/SidePanelWorkflowSelectAction.tsx
@@ -1,8 +1,8 @@
-import { WorkflowActionMenuItems } from '@/command-menu/pages/workflow/action/components/WorkflowActionMenuItems';
+import { WorkflowActionMenuItems } from '@/side-panel/pages/workflow/action/components/WorkflowActionMenuItems';
import { logicFunctionsState } from '@/settings/logic-functions/states/logicFunctionsState';
import { type WorkflowActionType } from '@/workflow/types/Workflow';
-import { RightDrawerStepListContainer } from '@/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepContainer';
-import { RightDrawerWorkflowSelectStepTitle } from '@/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepTitle';
+import { SidePanelStepListContainer } from '@/workflow/workflow-steps/components/SidePanelWorkflowSelectStepContainer';
+import { SidePanelWorkflowSelectStepTitle } from '@/workflow/workflow-steps/components/SidePanelWorkflowSelectStepTitle';
import { AI_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/AiActions';
import { CORE_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/CoreActions';
import { FLOW_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/FlowActions';
@@ -21,7 +21,7 @@ export type WorkflowActionSelection = {
defaultSettings?: Record;
};
-export const CommandMenuWorkflowSelectAction = ({
+export const SidePanelWorkflowSelectAction = ({
onActionSelected,
}: {
onActionSelected: (selection: WorkflowActionSelection) => void;
@@ -55,10 +55,10 @@ export const CommandMenuWorkflowSelectAction = ({
};
return (
-
-
+
+
{t`Data`}
-
+
-
+
{t`AI`}
-
+
)}
-
+
{t`Flow`}
-
+
-
+
{t`Core`}
-
+
-
+
{t`Human Input`}
-
+
0 && (
<>
-
+
{t`Applications`}
-
+
{toolFunctions.map((fn) => (
)}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/WorkflowActionMenuItems.tsx b/packages/twenty-front/src/modules/side-panel/pages/workflow/action/components/WorkflowActionMenuItems.tsx
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/WorkflowActionMenuItems.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/workflow/action/components/WorkflowActionMenuItems.tsx
diff --git a/packages/twenty-front/src/modules/side-panel/pages/workflow/hooks/useSidePanelWorkflowIdOrThrow.ts b/packages/twenty-front/src/modules/side-panel/pages/workflow/hooks/useSidePanelWorkflowIdOrThrow.ts
new file mode 100644
index 0000000000..be30e26c10
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/hooks/useSidePanelWorkflowIdOrThrow.ts
@@ -0,0 +1,14 @@
+import { sidePanelWorkflowIdComponentState } from '@/side-panel/pages/workflow/states/sidePanelWorkflowIdComponentState';
+import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+import { isDefined } from 'twenty-shared/utils';
+
+export const useSidePanelWorkflowIdOrThrow = () => {
+ const sidePanelWorkflowId = useAtomComponentStateValue(
+ sidePanelWorkflowIdComponentState,
+ );
+ if (!isDefined(sidePanelWorkflowId)) {
+ throw new Error('Expected sidePanelWorkflowIdComponentState to be defined');
+ }
+
+ return sidePanelWorkflowId;
+};
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useWorkflowCommandMenu.ts b/packages/twenty-front/src/modules/side-panel/pages/workflow/hooks/useSidePanelWorkflowNavigation.ts
similarity index 55%
rename from packages/twenty-front/src/modules/command-menu/hooks/useWorkflowCommandMenu.ts
rename to packages/twenty-front/src/modules/side-panel/pages/workflow/hooks/useSidePanelWorkflowNavigation.ts
index ec47351016..ac19187b74 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useWorkflowCommandMenu.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/hooks/useSidePanelWorkflowNavigation.ts
@@ -1,14 +1,14 @@
-import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
-import { commandMenuWorkflowIdComponentState } from '@/command-menu/pages/workflow/states/commandMenuWorkflowIdComponentState';
-import { commandMenuWorkflowRunIdComponentState } from '@/command-menu/pages/workflow/states/commandMenuWorkflowRunIdComponentState';
-import { commandMenuWorkflowStepIdComponentState } from '@/command-menu/pages/workflow/states/commandMenuWorkflowStepIdComponentState';
-import { commandMenuWorkflowVersionIdComponentState } from '@/command-menu/pages/workflow/states/commandMenuWorkflowVersionIdComponentState';
+import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
+import { sidePanelWorkflowIdComponentState } from '@/side-panel/pages/workflow/states/sidePanelWorkflowIdComponentState';
+import { sidePanelWorkflowRunIdComponentState } from '@/side-panel/pages/workflow/states/sidePanelWorkflowRunIdComponentState';
+import { sidePanelWorkflowStepIdComponentState } from '@/side-panel/pages/workflow/states/sidePanelWorkflowStepIdComponentState';
+import { sidePanelWorkflowVersionIdComponentState } from '@/side-panel/pages/workflow/states/sidePanelWorkflowVersionIdComponentState';
import { type WorkflowRunStepStatus } from '@/workflow/types/Workflow';
-import { useSetInitialWorkflowRunRightDrawerTab } from '@/workflow/workflow-diagram/hooks/useSetInitialWorkflowRunRightDrawerTab';
+import { useSetInitialWorkflowRunSidePanelTab } from '@/workflow/workflow-diagram/hooks/useSetInitialWorkflowRunSidePanelTab';
import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeComponentState';
import { t } from '@lingui/core/macro';
import { useCallback } from 'react';
-import { CommandMenuPages } from 'twenty-shared/types';
+import { SidePanelPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import {
IconBolt,
@@ -18,55 +18,55 @@ import {
import { v4 } from 'uuid';
import { useStore } from 'jotai';
-export const useWorkflowCommandMenu = () => {
+export const useSidePanelWorkflowNavigation = () => {
const store = useStore();
- const { navigateCommandMenu } = useNavigateCommandMenu();
- const { setInitialWorkflowRunRightDrawerTab } =
- useSetInitialWorkflowRunRightDrawerTab();
+ const { navigateSidePanel } = useNavigateSidePanel();
+ const { setInitialWorkflowRunSidePanelTab } =
+ useSetInitialWorkflowRunSidePanelTab();
- const openWorkflowTriggerTypeInCommandMenu = useCallback(
+ const openWorkflowTriggerTypeInSidePanel = useCallback(
(workflowId: string) => {
const pageId = v4();
store.set(
- commandMenuWorkflowIdComponentState.atomFamily({
+ sidePanelWorkflowIdComponentState.atomFamily({
instanceId: pageId,
}),
workflowId,
);
- navigateCommandMenu({
- page: CommandMenuPages.WorkflowTriggerSelectType,
+ navigateSidePanel({
+ page: SidePanelPages.WorkflowTriggerSelectType,
pageTitle: t`Trigger Type`,
pageIcon: IconBolt,
pageId,
});
},
- [navigateCommandMenu, store],
+ [navigateSidePanel, store],
);
- const openWorkflowCreateStepInCommandMenu = useCallback(
+ const openWorkflowCreateStepInSidePanel = useCallback(
(workflowId: string) => {
const pageId = v4();
store.set(
- commandMenuWorkflowIdComponentState.atomFamily({
+ sidePanelWorkflowIdComponentState.atomFamily({
instanceId: pageId,
}),
workflowId,
);
- navigateCommandMenu({
- page: CommandMenuPages.WorkflowStepCreate,
+ navigateSidePanel({
+ page: SidePanelPages.WorkflowStepCreate,
pageTitle: t`Select Action`,
pageIcon: IconSettingsAutomation,
pageId,
});
},
- [navigateCommandMenu, store],
+ [navigateSidePanel, store],
);
- const openWorkflowEditStepInCommandMenu = useCallback(
+ const openWorkflowEditStepInSidePanel = useCallback(
(
workflowId: string,
title: string,
@@ -76,7 +76,7 @@ export const useWorkflowCommandMenu = () => {
const pageId = v4();
store.set(
- commandMenuWorkflowIdComponentState.atomFamily({
+ sidePanelWorkflowIdComponentState.atomFamily({
instanceId: pageId,
}),
workflowId,
@@ -84,7 +84,7 @@ export const useWorkflowCommandMenu = () => {
if (isDefined(stepId)) {
store.set(
- commandMenuWorkflowStepIdComponentState.atomFamily({
+ sidePanelWorkflowStepIdComponentState.atomFamily({
instanceId: pageId,
}),
stepId,
@@ -98,38 +98,38 @@ export const useWorkflowCommandMenu = () => {
);
}
- navigateCommandMenu({
- page: CommandMenuPages.WorkflowStepEdit,
+ navigateSidePanel({
+ page: SidePanelPages.WorkflowStepEdit,
pageTitle: title,
pageIcon: icon,
pageId,
});
},
- [navigateCommandMenu, store],
+ [navigateSidePanel, store],
);
- const openWorkflowEditStepTypeInCommandMenu = useCallback(
+ const openWorkflowEditStepTypeInSidePanel = useCallback(
(workflowId: string) => {
const pageId = v4();
store.set(
- commandMenuWorkflowIdComponentState.atomFamily({
+ sidePanelWorkflowIdComponentState.atomFamily({
instanceId: pageId,
}),
workflowId,
);
- navigateCommandMenu({
- page: CommandMenuPages.WorkflowStepEditType,
+ navigateSidePanel({
+ page: SidePanelPages.WorkflowStepEditType,
pageTitle: t`Select action`,
pageIcon: IconSettingsAutomation,
pageId,
});
},
- [navigateCommandMenu, store],
+ [navigateSidePanel, store],
);
- const openWorkflowViewStepInCommandMenu = useCallback(
+ const openWorkflowViewStepInSidePanel = useCallback(
({
workflowId,
workflowVersionId,
@@ -146,13 +146,13 @@ export const useWorkflowCommandMenu = () => {
const pageId = v4();
store.set(
- commandMenuWorkflowIdComponentState.atomFamily({
+ sidePanelWorkflowIdComponentState.atomFamily({
instanceId: pageId,
}),
workflowId,
);
store.set(
- commandMenuWorkflowVersionIdComponentState.atomFamily({
+ sidePanelWorkflowVersionIdComponentState.atomFamily({
instanceId: pageId,
}),
workflowVersionId,
@@ -160,7 +160,7 @@ export const useWorkflowCommandMenu = () => {
if (isDefined(stepId)) {
store.set(
- commandMenuWorkflowStepIdComponentState.atomFamily({
+ sidePanelWorkflowStepIdComponentState.atomFamily({
instanceId: pageId,
}),
stepId,
@@ -174,17 +174,17 @@ export const useWorkflowCommandMenu = () => {
);
}
- navigateCommandMenu({
- page: CommandMenuPages.WorkflowStepView,
+ navigateSidePanel({
+ page: SidePanelPages.WorkflowStepView,
pageTitle: title,
pageIcon: icon,
pageId,
});
},
- [navigateCommandMenu, store],
+ [navigateSidePanel, store],
);
- const openWorkflowRunViewStepInCommandMenu = useCallback(
+ const openWorkflowRunViewStepInSidePanel = useCallback(
({
workflowId,
workflowRunId,
@@ -203,19 +203,19 @@ export const useWorkflowCommandMenu = () => {
const pageId = v4();
store.set(
- commandMenuWorkflowIdComponentState.atomFamily({
+ sidePanelWorkflowIdComponentState.atomFamily({
instanceId: pageId,
}),
workflowId,
);
store.set(
- commandMenuWorkflowRunIdComponentState.atomFamily({
+ sidePanelWorkflowRunIdComponentState.atomFamily({
instanceId: pageId,
}),
workflowRunId,
);
store.set(
- commandMenuWorkflowStepIdComponentState.atomFamily({
+ sidePanelWorkflowStepIdComponentState.atomFamily({
instanceId: pageId,
}),
workflowSelectedNode,
@@ -228,27 +228,27 @@ export const useWorkflowCommandMenu = () => {
workflowSelectedNode,
);
- navigateCommandMenu({
- page: CommandMenuPages.WorkflowRunStepView,
+ navigateSidePanel({
+ page: SidePanelPages.WorkflowRunStepView,
pageTitle: title,
pageIcon: icon,
pageId,
});
- setInitialWorkflowRunRightDrawerTab({
+ setInitialWorkflowRunSidePanelTab({
workflowSelectedNode,
stepExecutionStatus,
});
},
- [navigateCommandMenu, setInitialWorkflowRunRightDrawerTab, store],
+ [navigateSidePanel, setInitialWorkflowRunSidePanelTab, store],
);
return {
- openWorkflowTriggerTypeInCommandMenu,
- openWorkflowCreateStepInCommandMenu,
- openWorkflowEditStepInCommandMenu,
- openWorkflowEditStepTypeInCommandMenu,
- openWorkflowViewStepInCommandMenu,
- openWorkflowRunViewStepInCommandMenu,
+ openWorkflowTriggerTypeInSidePanel,
+ openWorkflowCreateStepInSidePanel,
+ openWorkflowEditStepInSidePanel,
+ openWorkflowEditStepTypeInSidePanel,
+ openWorkflowViewStepInSidePanel,
+ openWorkflowRunViewStepInSidePanel,
};
};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/workflow/states/sidePanelWorkflowIdComponentState.ts b/packages/twenty-front/src/modules/side-panel/pages/workflow/states/sidePanelWorkflowIdComponentState.ts
new file mode 100644
index 0000000000..b3f6e61bba
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/states/sidePanelWorkflowIdComponentState.ts
@@ -0,0 +1,10 @@
+import { SidePanelPageComponentInstanceContext } from '@/side-panel/states/contexts/SidePanelPageComponentInstanceContext';
+import { createAtomComponentState } from '@/ui/utilities/state/jotai/utils/createAtomComponentState';
+
+export const sidePanelWorkflowIdComponentState = createAtomComponentState<
+ string | undefined
+>({
+ key: 'side-panel/workflow-id',
+ defaultValue: undefined,
+ componentInstanceContext: SidePanelPageComponentInstanceContext,
+});
diff --git a/packages/twenty-front/src/modules/side-panel/pages/workflow/states/sidePanelWorkflowRunIdComponentState.ts b/packages/twenty-front/src/modules/side-panel/pages/workflow/states/sidePanelWorkflowRunIdComponentState.ts
new file mode 100644
index 0000000000..6dc8d010cc
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/states/sidePanelWorkflowRunIdComponentState.ts
@@ -0,0 +1,10 @@
+import { SidePanelPageComponentInstanceContext } from '@/side-panel/states/contexts/SidePanelPageComponentInstanceContext';
+import { createAtomComponentState } from '@/ui/utilities/state/jotai/utils/createAtomComponentState';
+
+export const sidePanelWorkflowRunIdComponentState = createAtomComponentState<
+ string | undefined
+>({
+ key: 'side-panel/workflow-run-id',
+ defaultValue: undefined,
+ componentInstanceContext: SidePanelPageComponentInstanceContext,
+});
diff --git a/packages/twenty-front/src/modules/side-panel/pages/workflow/states/sidePanelWorkflowStepIdComponentState.ts b/packages/twenty-front/src/modules/side-panel/pages/workflow/states/sidePanelWorkflowStepIdComponentState.ts
new file mode 100644
index 0000000000..eb28b9008a
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/states/sidePanelWorkflowStepIdComponentState.ts
@@ -0,0 +1,10 @@
+import { SidePanelPageComponentInstanceContext } from '@/side-panel/states/contexts/SidePanelPageComponentInstanceContext';
+import { createAtomComponentState } from '@/ui/utilities/state/jotai/utils/createAtomComponentState';
+
+export const sidePanelWorkflowStepIdComponentState = createAtomComponentState<
+ string | undefined
+>({
+ key: 'side-panel/workflow-step-id',
+ defaultValue: undefined,
+ componentInstanceContext: SidePanelPageComponentInstanceContext,
+});
diff --git a/packages/twenty-front/src/modules/side-panel/pages/workflow/states/sidePanelWorkflowVersionIdComponentState.ts b/packages/twenty-front/src/modules/side-panel/pages/workflow/states/sidePanelWorkflowVersionIdComponentState.ts
new file mode 100644
index 0000000000..7c1ceab188
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/states/sidePanelWorkflowVersionIdComponentState.ts
@@ -0,0 +1,9 @@
+import { SidePanelPageComponentInstanceContext } from '@/side-panel/states/contexts/SidePanelPageComponentInstanceContext';
+import { createAtomComponentState } from '@/ui/utilities/state/jotai/utils/createAtomComponentState';
+
+export const sidePanelWorkflowVersionIdComponentState =
+ createAtomComponentState({
+ key: 'side-panel/workflow-version-id',
+ defaultValue: undefined,
+ componentInstanceContext: SidePanelPageComponentInstanceContext,
+ });
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/create/components/CommandMenuWorkflowCreateStep.tsx b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/create/components/SidePanelWorkflowCreateStep.tsx
similarity index 56%
rename from packages/twenty-front/src/modules/command-menu/pages/workflow/step/create/components/CommandMenuWorkflowCreateStep.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/workflow/step/create/components/SidePanelWorkflowCreateStep.tsx
index 1b7669e8d9..6c98b8772f 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/create/components/CommandMenuWorkflowCreateStep.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/create/components/SidePanelWorkflowCreateStep.tsx
@@ -1,10 +1,10 @@
-import { useCommandMenuWorkflowIdOrThrow } from '@/command-menu/pages/workflow/hooks/useCommandMenuWorkflowIdOrThrow';
-import { CommandMenuWorkflowCreateStepContent } from '@/command-menu/pages/workflow/step/create/components/CommandMenuWorkflowCreateStepContent';
+import { useSidePanelWorkflowIdOrThrow } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowIdOrThrow';
+import { SidePanelWorkflowCreateStepContent } from '@/side-panel/pages/workflow/step/create/components/SidePanelWorkflowCreateStepContent';
import { getWorkflowVisualizerComponentInstanceId } from '@/workflow/utils/getWorkflowVisualizerComponentInstanceId';
import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
-export const CommandMenuWorkflowCreateStep = () => {
- const workflowId = useCommandMenuWorkflowIdOrThrow();
+export const SidePanelWorkflowCreateStep = () => {
+ const workflowId = useSidePanelWorkflowIdOrThrow();
return (
{
}),
}}
>
-
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/create/components/CommandMenuWorkflowCreateStepContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/create/components/SidePanelWorkflowCreateStepContent.tsx
similarity index 83%
rename from packages/twenty-front/src/modules/command-menu/pages/workflow/step/create/components/CommandMenuWorkflowCreateStepContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/workflow/step/create/components/SidePanelWorkflowCreateStepContent.tsx
index 6100622daa..c94fe80c2c 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/create/components/CommandMenuWorkflowCreateStepContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/create/components/SidePanelWorkflowCreateStepContent.tsx
@@ -1,9 +1,9 @@
-import { useWorkflowCommandMenu } from '@/command-menu/hooks/useWorkflowCommandMenu';
+import { useSidePanelWorkflowNavigation } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowNavigation';
import {
- CommandMenuWorkflowSelectAction,
+ SidePanelWorkflowSelectAction,
type WorkflowActionSelection,
-} from '@/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectAction';
-import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
+} from '@/side-panel/pages/workflow/action/components/SidePanelWorkflowSelectAction';
+import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState';
import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
@@ -22,7 +22,7 @@ import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomStat
import { isDefined } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui/display';
-export const CommandMenuWorkflowCreateStepContent = () => {
+export const SidePanelWorkflowCreateStepContent = () => {
const { getIcon } = useIcons();
const workflowVisualizerWorkflowId = useAtomComponentStateValue(
workflowVisualizerWorkflowIdComponentState,
@@ -34,10 +34,10 @@ export const CommandMenuWorkflowCreateStepContent = () => {
workflowVisualizerWorkflowId,
);
- const { openWorkflowEditStepInCommandMenu } = useWorkflowCommandMenu();
+ const { openWorkflowEditStepInSidePanel } = useSidePanelWorkflowNavigation();
const { closeRightClickMenu } = useCloseRightClickMenu();
- const setCommandMenuNavigationStack = useSetAtomState(
- commandMenuNavigationStackState,
+ const setSidePanelNavigationStack = useSetAtomState(
+ sidePanelNavigationStackState,
);
const [workflowInsertStepIds, setWorkflowInsertStepIds] =
@@ -102,9 +102,9 @@ export const CommandMenuWorkflowCreateStepContent = () => {
closeRightClickMenu();
- setCommandMenuNavigationStack([]);
+ setSidePanelNavigationStack([]);
- openWorkflowEditStepInCommandMenu(
+ openWorkflowEditStepInSidePanel(
workflowVisualizerWorkflowId,
createdStep.name,
getIcon(getActionIcon(createdStep.type as WorkflowActionType)),
@@ -112,7 +112,5 @@ export const CommandMenuWorkflowCreateStepContent = () => {
);
};
- return (
-
- );
+ return ;
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStep.tsx b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/edit/components/SidePanelWorkflowEditStep.tsx
similarity index 57%
rename from packages/twenty-front/src/modules/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStep.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/workflow/step/edit/components/SidePanelWorkflowEditStep.tsx
index a7bf32a661..508c0d5c69 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStep.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/edit/components/SidePanelWorkflowEditStep.tsx
@@ -1,10 +1,10 @@
-import { useCommandMenuWorkflowIdOrThrow } from '@/command-menu/pages/workflow/hooks/useCommandMenuWorkflowIdOrThrow';
-import { CommandMenuWorkflowEditStepContent } from '@/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepContent';
+import { useSidePanelWorkflowIdOrThrow } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowIdOrThrow';
+import { SidePanelWorkflowEditStepContent } from '@/side-panel/pages/workflow/step/edit/components/SidePanelWorkflowEditStepContent';
import { getWorkflowVisualizerComponentInstanceId } from '@/workflow/utils/getWorkflowVisualizerComponentInstanceId';
import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
-export const CommandMenuWorkflowEditStep = () => {
- const workflowId = useCommandMenuWorkflowIdOrThrow();
+export const SidePanelWorkflowEditStep = () => {
+ const workflowId = useSidePanelWorkflowIdOrThrow();
const instanceId = getWorkflowVisualizerComponentInstanceId({
recordId: workflowId,
});
@@ -15,7 +15,7 @@ export const CommandMenuWorkflowEditStep = () => {
instanceId,
}}
>
-
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/edit/components/SidePanelWorkflowEditStepContent.tsx
similarity index 95%
rename from packages/twenty-front/src/modules/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/workflow/step/edit/components/SidePanelWorkflowEditStepContent.tsx
index 3c2b7354a9..27e09c2a9d 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/edit/components/SidePanelWorkflowEditStepContent.tsx
@@ -13,7 +13,7 @@ const StyledContainer = styled.div`
height: 100%;
`;
-export const CommandMenuWorkflowEditStepContent = () => {
+export const SidePanelWorkflowEditStepContent = () => {
const flow = useFlowOrThrow();
const workflowSelectedNode = useAtomComponentStateValue(
workflowSelectedNodeComponentState,
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepType.tsx b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/edit/components/SidePanelWorkflowEditStepType.tsx
similarity index 55%
rename from packages/twenty-front/src/modules/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepType.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/workflow/step/edit/components/SidePanelWorkflowEditStepType.tsx
index e80bf478f3..d210637f67 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepType.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/edit/components/SidePanelWorkflowEditStepType.tsx
@@ -1,10 +1,10 @@
-import { useCommandMenuWorkflowIdOrThrow } from '@/command-menu/pages/workflow/hooks/useCommandMenuWorkflowIdOrThrow';
-import { CommandMenuWorkflowEditStepTypeContent } from '@/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepTypeContent';
+import { useSidePanelWorkflowIdOrThrow } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowIdOrThrow';
+import { SidePanelWorkflowEditStepTypeContent } from '@/side-panel/pages/workflow/step/edit/components/SidePanelWorkflowEditStepTypeContent';
import { getWorkflowVisualizerComponentInstanceId } from '@/workflow/utils/getWorkflowVisualizerComponentInstanceId';
import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
-export const CommandMenuWorkflowEditStepType = () => {
- const workflowId = useCommandMenuWorkflowIdOrThrow();
+export const SidePanelWorkflowEditStepType = () => {
+ const workflowId = useSidePanelWorkflowIdOrThrow();
return (
{
}),
}}
>
-
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepTypeContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/edit/components/SidePanelWorkflowEditStepTypeContent.tsx
similarity index 76%
rename from packages/twenty-front/src/modules/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepTypeContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/workflow/step/edit/components/SidePanelWorkflowEditStepTypeContent.tsx
index c780cd83d1..31902795f0 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepTypeContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/edit/components/SidePanelWorkflowEditStepTypeContent.tsx
@@ -1,9 +1,9 @@
-import { useWorkflowCommandMenu } from '@/command-menu/hooks/useWorkflowCommandMenu';
+import { useSidePanelWorkflowNavigation } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowNavigation';
import {
- CommandMenuWorkflowSelectAction,
+ SidePanelWorkflowSelectAction,
type WorkflowActionSelection,
-} from '@/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectAction';
-import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
+} from '@/side-panel/pages/workflow/action/components/SidePanelWorkflowSelectAction';
+import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useFlowOrThrow } from '@/workflow/hooks/useFlowOrThrow';
import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
@@ -19,7 +19,7 @@ import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomStat
import { isDefined } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui/display';
-export const CommandMenuWorkflowEditStepTypeContent = () => {
+export const SidePanelWorkflowEditStepTypeContent = () => {
const { getIcon } = useIcons();
const workflowSelectedNode = useAtomComponentStateValue(
workflowSelectedNodeComponentState,
@@ -31,10 +31,10 @@ export const CommandMenuWorkflowEditStepTypeContent = () => {
const { updateStep } = useUpdateStep();
- const { openWorkflowEditStepInCommandMenu } = useWorkflowCommandMenu();
+ const { openWorkflowEditStepInSidePanel } = useSidePanelWorkflowNavigation();
const { closeRightClickMenu } = useCloseRightClickMenu();
- const setCommandMenuNavigationStack = useSetAtomState(
- commandMenuNavigationStackState,
+ const setSidePanelNavigationStack = useSetAtomState(
+ sidePanelNavigationStackState,
);
const handleUpdateStepType = async (selection: WorkflowActionSelection) => {
@@ -66,9 +66,9 @@ export const CommandMenuWorkflowEditStepTypeContent = () => {
closeRightClickMenu();
- setCommandMenuNavigationStack([]);
+ setSidePanelNavigationStack([]);
- openWorkflowEditStepInCommandMenu(
+ openWorkflowEditStepInSidePanel(
workflowVisualizerWorkflowId,
updatedStep.name,
getIcon(getActionIcon(updatedStep.type as WorkflowActionType)),
@@ -77,6 +77,6 @@ export const CommandMenuWorkflowEditStepTypeContent = () => {
};
return (
-
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStep.tsx b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/components/SidePanelWorkflowRunViewStep.tsx
similarity index 54%
rename from packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStep.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/components/SidePanelWorkflowRunViewStep.tsx
index 71ad1ffc32..43c468c006 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStep.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/components/SidePanelWorkflowRunViewStep.tsx
@@ -1,10 +1,10 @@
-import { CommandMenuWorkflowRunViewStepContent } from '@/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStepContent';
-import { useCommandMenuWorkflowRunIdOrThrow } from '@/command-menu/pages/workflow/step/view-run/hooks/useCommandMenuWorkflowRunIdOrThrow';
+import { SidePanelWorkflowRunViewStepContent } from '@/side-panel/pages/workflow/step/view-run/components/SidePanelWorkflowRunViewStepContent';
+import { useSidePanelWorkflowRunIdOrThrow } from '@/side-panel/pages/workflow/step/view-run/hooks/useSidePanelWorkflowRunIdOrThrow';
import { getWorkflowVisualizerComponentInstanceId } from '@/workflow/utils/getWorkflowVisualizerComponentInstanceId';
import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
-export const CommandMenuWorkflowRunViewStep = () => {
- const workflowRunId = useCommandMenuWorkflowRunIdOrThrow();
+export const SidePanelWorkflowRunViewStep = () => {
+ const workflowRunId = useSidePanelWorkflowRunIdOrThrow();
return (
{
}),
}}
>
-
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStepContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/components/SidePanelWorkflowRunViewStepContent.tsx
similarity index 79%
rename from packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStepContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/components/SidePanelWorkflowRunViewStepContent.tsx
index 9ce0ebf431..3bb407606a 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStepContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/components/SidePanelWorkflowRunViewStepContent.tsx
@@ -1,8 +1,8 @@
-import { CommandMenuWorkflowRunStepContentComponentInstanceContext } from '@/command-menu/pages/workflow/step/view-run/states/contexts/CommandMenuWorkflowRunStepContentComponentInstanceContext';
-import { getIsInputTabDisabled } from '@/command-menu/pages/workflow/step/view-run/utils/getIsInputTabDisabled';
-import { getIsOutputTabDisabled } from '@/command-menu/pages/workflow/step/view-run/utils/getIsOutputTabDisabled';
-import { getShouldFocusNodeTab } from '@/command-menu/pages/workflow/step/view-run/utils/getShouldFocusNodeTab';
-import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
+import { SidePanelWorkflowRunStepContentComponentInstanceContext } from '@/side-panel/pages/workflow/step/view-run/states/contexts/SidePanelWorkflowRunStepContentComponentInstanceContext';
+import { getIsInputTabDisabled } from '@/side-panel/pages/workflow/step/view-run/utils/getIsInputTabDisabled';
+import { getIsOutputTabDisabled } from '@/side-panel/pages/workflow/step/view-run/utils/getIsOutputTabDisabled';
+import { getShouldFocusNodeTab } from '@/side-panel/pages/workflow/step/view-run/utils/getShouldFocusNodeTab';
+import { SidePanelPageComponentInstanceContext } from '@/side-panel/states/contexts/SidePanelPageComponentInstanceContext';
import { TabList } from '@/ui/layout/tab-list/components/TabList';
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
@@ -42,7 +42,7 @@ const StyledTabList = styled(TabList)`
type TabId = WorkflowRunTabIdType;
-export const CommandMenuWorkflowRunViewStepContent = () => {
+export const SidePanelWorkflowRunViewStepContent = () => {
const flow = useFlowOrThrow();
const workflowSelectedNode = useAtomComponentStateValue(
workflowSelectedNodeComponentState,
@@ -51,18 +51,18 @@ export const CommandMenuWorkflowRunViewStepContent = () => {
const workflowRun = useWorkflowRun({ workflowRunId });
- const commandMenuPageComponentInstance = useComponentInstanceStateContext(
- CommandMenuPageComponentInstanceContext,
+ const sidePanelPageComponentInstance = useComponentInstanceStateContext(
+ SidePanelPageComponentInstanceContext,
);
- if (isNull(commandMenuPageComponentInstance)) {
+ if (isNull(sidePanelPageComponentInstance)) {
throw new Error(
- 'CommandMenuPageComponentInstanceContext is not defined. This component should be used within CommandMenuPageComponentInstanceContext.',
+ 'SidePanelPageComponentInstanceContext is not defined. This component should be used within SidePanelPageComponentInstanceContext.',
);
}
const activeTabId = useAtomComponentStateValue(
activeTabIdComponentState,
- commandMenuPageComponentInstance.instanceId,
+ sidePanelPageComponentInstance.instanceId,
);
if (!isDefined(workflowRun) || !isDefined(workflowSelectedNode)) {
@@ -116,7 +116,7 @@ export const CommandMenuWorkflowRunViewStepContent = () => {
];
return (
- {
{activeTabId === WorkflowRunTabId.OUTPUT ? (
@@ -164,6 +164,6 @@ export const CommandMenuWorkflowRunViewStepContent = () => {
)}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/hooks/useSidePanelWorkflowRunIdOrThrow.ts b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/hooks/useSidePanelWorkflowRunIdOrThrow.ts
new file mode 100644
index 0000000000..5fbd284e71
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/hooks/useSidePanelWorkflowRunIdOrThrow.ts
@@ -0,0 +1,16 @@
+import { sidePanelWorkflowRunIdComponentState } from '@/side-panel/pages/workflow/states/sidePanelWorkflowRunIdComponentState';
+import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+import { isDefined } from 'twenty-shared/utils';
+
+export const useSidePanelWorkflowRunIdOrThrow = () => {
+ const sidePanelWorkflowRunId = useAtomComponentStateValue(
+ sidePanelWorkflowRunIdComponentState,
+ );
+ if (!isDefined(sidePanelWorkflowRunId)) {
+ throw new Error(
+ 'Expected the sidePanelWorkflowRunIdComponentState to be defined.',
+ );
+ }
+
+ return sidePanelWorkflowRunId;
+};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/states/contexts/CommandMenuWorkflowRunStepContentComponentInstanceContext.ts b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/states/contexts/SidePanelWorkflowRunStepContentComponentInstanceContext.ts
similarity index 71%
rename from packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/states/contexts/CommandMenuWorkflowRunStepContentComponentInstanceContext.ts
rename to packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/states/contexts/SidePanelWorkflowRunStepContentComponentInstanceContext.ts
index 8c4410cb7e..fce510e7d1 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/states/contexts/CommandMenuWorkflowRunStepContentComponentInstanceContext.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/states/contexts/SidePanelWorkflowRunStepContentComponentInstanceContext.ts
@@ -1,6 +1,6 @@
import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext';
-export const CommandMenuWorkflowRunStepContentComponentInstanceContext =
+export const SidePanelWorkflowRunStepContentComponentInstanceContext =
createComponentInstanceContext({
instanceId: '',
});
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/states/workflowRunIteratorSubStepIterationIndexComponentState.ts b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/states/workflowRunIteratorSubStepIterationIndexComponentState.ts
similarity index 56%
rename from packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/states/workflowRunIteratorSubStepIterationIndexComponentState.ts
rename to packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/states/workflowRunIteratorSubStepIterationIndexComponentState.ts
index 4b81ea626c..c20ca55ae9 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/states/workflowRunIteratorSubStepIterationIndexComponentState.ts
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/states/workflowRunIteratorSubStepIterationIndexComponentState.ts
@@ -1,4 +1,4 @@
-import { CommandMenuWorkflowRunStepContentComponentInstanceContext } from '@/command-menu/pages/workflow/step/view-run/states/contexts/CommandMenuWorkflowRunStepContentComponentInstanceContext';
+import { SidePanelWorkflowRunStepContentComponentInstanceContext } from '@/side-panel/pages/workflow/step/view-run/states/contexts/SidePanelWorkflowRunStepContentComponentInstanceContext';
import { createAtomComponentState } from '@/ui/utilities/state/jotai/utils/createAtomComponentState';
export const workflowRunIteratorSubStepIterationIndexComponentState =
@@ -6,5 +6,5 @@ export const workflowRunIteratorSubStepIterationIndexComponentState =
key: 'workflowRunIteratorSubStepIterationIndexComponentState',
defaultValue: 0,
componentInstanceContext:
- CommandMenuWorkflowRunStepContentComponentInstanceContext,
+ SidePanelWorkflowRunStepContentComponentInstanceContext,
});
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/utils/getIsInputTabDisabled.ts b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/utils/getIsInputTabDisabled.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/utils/getIsInputTabDisabled.ts
rename to packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/utils/getIsInputTabDisabled.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/utils/getIsOutputTabDisabled.ts b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/utils/getIsOutputTabDisabled.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/utils/getIsOutputTabDisabled.ts
rename to packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/utils/getIsOutputTabDisabled.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/utils/getShouldFocusNodeTab.ts b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/utils/getShouldFocusNodeTab.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/utils/getShouldFocusNodeTab.ts
rename to packages/twenty-front/src/modules/side-panel/pages/workflow/step/view-run/utils/getShouldFocusNodeTab.ts
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view/components/CommandMenuWorkflowViewStep.tsx b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view/components/SidePanelWorkflowViewStep.tsx
similarity index 54%
rename from packages/twenty-front/src/modules/command-menu/pages/workflow/step/view/components/CommandMenuWorkflowViewStep.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/workflow/step/view/components/SidePanelWorkflowViewStep.tsx
index 4e644f0e6c..c16eb66fe5 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view/components/CommandMenuWorkflowViewStep.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view/components/SidePanelWorkflowViewStep.tsx
@@ -1,10 +1,10 @@
-import { useCommandMenuWorkflowVersionIdOrThrow } from '@/command-menu/pages/workflow/step/view/hooks/useCommandMenuWorkflowVersionIdOrThrow';
-import { CommandMenuWorkflowViewStepContent } from '@/command-menu/pages/workflow/step/view/components/CommandMenuWorkflowViewStepContent';
+import { useSidePanelWorkflowVersionIdOrThrow } from '@/side-panel/pages/workflow/step/view/hooks/useSidePanelWorkflowVersionIdOrThrow';
+import { SidePanelWorkflowViewStepContent } from '@/side-panel/pages/workflow/step/view/components/SidePanelWorkflowViewStepContent';
import { getWorkflowVisualizerComponentInstanceId } from '@/workflow/utils/getWorkflowVisualizerComponentInstanceId';
import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
-export const CommandMenuWorkflowViewStep = () => {
- const workflowVersionId = useCommandMenuWorkflowVersionIdOrThrow();
+export const SidePanelWorkflowViewStep = () => {
+ const workflowVersionId = useSidePanelWorkflowVersionIdOrThrow();
return (
{
}),
}}
>
-
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view/components/CommandMenuWorkflowViewStepContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view/components/SidePanelWorkflowViewStepContent.tsx
similarity index 94%
rename from packages/twenty-front/src/modules/command-menu/pages/workflow/step/view/components/CommandMenuWorkflowViewStepContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/workflow/step/view/components/SidePanelWorkflowViewStepContent.tsx
index 5c489ce111..a206ddecb7 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view/components/CommandMenuWorkflowViewStepContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view/components/SidePanelWorkflowViewStepContent.tsx
@@ -11,7 +11,7 @@ const StyledContainer = styled.div`
height: 100%;
`;
-export const CommandMenuWorkflowViewStepContent = () => {
+export const SidePanelWorkflowViewStepContent = () => {
const flow = useFlowOrThrow();
const workflowSelectedNode = useAtomComponentStateValue(
workflowSelectedNodeComponentState,
diff --git a/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view/hooks/useSidePanelWorkflowVersionIdOrThrow.ts b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view/hooks/useSidePanelWorkflowVersionIdOrThrow.ts
new file mode 100644
index 0000000000..fc4e5b8b1e
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/step/view/hooks/useSidePanelWorkflowVersionIdOrThrow.ts
@@ -0,0 +1,16 @@
+import { sidePanelWorkflowVersionIdComponentState } from '@/side-panel/pages/workflow/states/sidePanelWorkflowVersionIdComponentState';
+import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+import { isDefined } from 'twenty-shared/utils';
+
+export const useSidePanelWorkflowVersionIdOrThrow = () => {
+ const sidePanelWorkflowVersionId = useAtomComponentStateValue(
+ sidePanelWorkflowVersionIdComponentState,
+ );
+ if (!isDefined(sidePanelWorkflowVersionId)) {
+ throw new Error(
+ 'Expected sidePanelWorkflowVersionIdComponentState to be defined',
+ );
+ }
+
+ return sidePanelWorkflowVersionId;
+};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/trigger-type/components/CommandMenuWorkflowSelectTriggerType.tsx b/packages/twenty-front/src/modules/side-panel/pages/workflow/trigger-type/components/SidePanelWorkflowSelectTriggerType.tsx
similarity index 54%
rename from packages/twenty-front/src/modules/command-menu/pages/workflow/trigger-type/components/CommandMenuWorkflowSelectTriggerType.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/workflow/trigger-type/components/SidePanelWorkflowSelectTriggerType.tsx
index 66469d28c6..64bfa47fef 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/workflow/trigger-type/components/CommandMenuWorkflowSelectTriggerType.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/trigger-type/components/SidePanelWorkflowSelectTriggerType.tsx
@@ -1,10 +1,10 @@
-import { useCommandMenuWorkflowIdOrThrow } from '@/command-menu/pages/workflow/hooks/useCommandMenuWorkflowIdOrThrow';
-import { CommandMenuWorkflowSelectTriggerTypeContent } from '@/command-menu/pages/workflow/trigger-type/components/CommandMenuWorkflowSelectTriggerTypeContent';
+import { useSidePanelWorkflowIdOrThrow } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowIdOrThrow';
+import { SidePanelWorkflowSelectTriggerTypeContent } from '@/side-panel/pages/workflow/trigger-type/components/SidePanelWorkflowSelectTriggerTypeContent';
import { getWorkflowVisualizerComponentInstanceId } from '@/workflow/utils/getWorkflowVisualizerComponentInstanceId';
import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
-export const CommandMenuWorkflowSelectTriggerType = () => {
- const workflowId = useCommandMenuWorkflowIdOrThrow();
+export const SidePanelWorkflowSelectTriggerType = () => {
+ const workflowId = useSidePanelWorkflowIdOrThrow();
return (
{
}),
}}
>
-
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/trigger-type/components/CommandMenuWorkflowSelectTriggerTypeContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/workflow/trigger-type/components/SidePanelWorkflowSelectTriggerTypeContent.tsx
similarity index 77%
rename from packages/twenty-front/src/modules/command-menu/pages/workflow/trigger-type/components/CommandMenuWorkflowSelectTriggerTypeContent.tsx
rename to packages/twenty-front/src/modules/side-panel/pages/workflow/trigger-type/components/SidePanelWorkflowSelectTriggerTypeContent.tsx
index 04d231f43b..4b0155f907 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/workflow/trigger-type/components/CommandMenuWorkflowSelectTriggerTypeContent.tsx
+++ b/packages/twenty-front/src/modules/side-panel/pages/workflow/trigger-type/components/SidePanelWorkflowSelectTriggerTypeContent.tsx
@@ -1,5 +1,5 @@
-import { useWorkflowCommandMenu } from '@/command-menu/hooks/useWorkflowCommandMenu';
-import { useCommandMenuWorkflowIdOrThrow } from '@/command-menu/pages/workflow/hooks/useCommandMenuWorkflowIdOrThrow';
+import { useSidePanelWorkflowNavigation } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowNavigation';
+import { useSidePanelWorkflowIdOrThrow } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowIdOrThrow';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
import { useFlowOrThrow } from '@/workflow/hooks/useFlowOrThrow';
@@ -8,8 +8,8 @@ import {
type WorkflowTriggerType,
} from '@/workflow/types/Workflow';
import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeComponentState';
-import { RightDrawerStepListContainer } from '@/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepContainer';
-import { RightDrawerWorkflowSelectStepTitle } from '@/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepTitle';
+import { SidePanelStepListContainer } from '@/workflow/workflow-steps/components/SidePanelWorkflowSelectStepContainer';
+import { SidePanelWorkflowSelectStepTitle } from '@/workflow/workflow-steps/components/SidePanelWorkflowSelectStepTitle';
import { DATABASE_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/DatabaseTriggerTypes';
import { OTHER_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/OtherTriggerTypes';
import { useUpdateWorkflowVersionTrigger } from '@/workflow/workflow-trigger/hooks/useUpdateWorkflowVersionTrigger';
@@ -22,10 +22,10 @@ import { useContext } from 'react';
import { MenuItem } from 'twenty-ui/navigation';
import { ThemeContext } from 'twenty-ui/theme-constants';
-export const CommandMenuWorkflowSelectTriggerTypeContent = () => {
+export const SidePanelWorkflowSelectTriggerTypeContent = () => {
const { theme } = useContext(ThemeContext);
const { getIcon } = useIcons();
- const workflowId = useCommandMenuWorkflowIdOrThrow();
+ const workflowId = useSidePanelWorkflowIdOrThrow();
const { updateTrigger } = useUpdateWorkflowVersionTrigger();
const { activeNonSystemObjectMetadataItems } =
@@ -34,7 +34,7 @@ export const CommandMenuWorkflowSelectTriggerTypeContent = () => {
const setWorkflowSelectedNode = useSetAtomComponentState(
workflowSelectedNodeComponentState,
);
- const { openWorkflowEditStepInCommandMenu } = useWorkflowCommandMenu();
+ const { openWorkflowEditStepInSidePanel } = useSidePanelWorkflowNavigation();
const flow = useFlowOrThrow();
const handleTriggerTypeClick = ({
@@ -65,7 +65,7 @@ export const CommandMenuWorkflowSelectTriggerTypeContent = () => {
setWorkflowSelectedNode(TRIGGER_STEP_ID);
- openWorkflowEditStepInCommandMenu(
+ openWorkflowEditStepInSidePanel(
workflowId,
defaultLabel,
getIcon(icon),
@@ -75,10 +75,10 @@ export const CommandMenuWorkflowSelectTriggerTypeContent = () => {
};
return (
-
-
+
+
{t`Data`}
-
+
{DATABASE_TRIGGER_TYPES.map((action) => {
const Icon = getIcon(action.icon);
return (
@@ -92,9 +92,9 @@ export const CommandMenuWorkflowSelectTriggerTypeContent = () => {
);
})}
-
+
{t`Others`}
-
+
{OTHER_TRIGGER_TYPES.map((action) => {
const Icon = getIcon(action.icon);
return (
@@ -107,6 +107,6 @@ export const CommandMenuWorkflowSelectTriggerTypeContent = () => {
/>
);
})}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/command-menu/states/contexts/CommandMenuPageComponentInstanceContext.tsx b/packages/twenty-front/src/modules/side-panel/states/contexts/SidePanelPageComponentInstanceContext.tsx
similarity index 77%
rename from packages/twenty-front/src/modules/command-menu/states/contexts/CommandMenuPageComponentInstanceContext.tsx
rename to packages/twenty-front/src/modules/side-panel/states/contexts/SidePanelPageComponentInstanceContext.tsx
index e1c6da4e3e..a9a244a5d1 100644
--- a/packages/twenty-front/src/modules/command-menu/states/contexts/CommandMenuPageComponentInstanceContext.tsx
+++ b/packages/twenty-front/src/modules/side-panel/states/contexts/SidePanelPageComponentInstanceContext.tsx
@@ -1,6 +1,6 @@
import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext';
-export const CommandMenuPageComponentInstanceContext =
+export const SidePanelPageComponentInstanceContext =
createComponentInstanceContext({
instanceId: '',
});
diff --git a/packages/twenty-front/src/modules/side-panel/states/hasUserSelectedSidePanelListItemState.ts b/packages/twenty-front/src/modules/side-panel/states/hasUserSelectedSidePanelListItemState.ts
new file mode 100644
index 0000000000..4d87706e02
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/states/hasUserSelectedSidePanelListItemState.ts
@@ -0,0 +1,5 @@
+import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
+export const hasUserSelectedSidePanelListItemState = createAtomState({
+ key: 'hasUserSelectedSidePanelListItemState',
+ defaultValue: false,
+});
diff --git a/packages/twenty-front/src/modules/command-menu/states/isSidePanelAnimatingState.ts b/packages/twenty-front/src/modules/side-panel/states/isSidePanelAnimatingState.ts
similarity index 78%
rename from packages/twenty-front/src/modules/command-menu/states/isSidePanelAnimatingState.ts
rename to packages/twenty-front/src/modules/side-panel/states/isSidePanelAnimatingState.ts
index f06d437daa..4f105b02bc 100644
--- a/packages/twenty-front/src/modules/command-menu/states/isSidePanelAnimatingState.ts
+++ b/packages/twenty-front/src/modules/side-panel/states/isSidePanelAnimatingState.ts
@@ -1,6 +1,6 @@
import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
export const isSidePanelAnimatingState = createAtomState({
- key: 'command-menu/isSidePanelAnimatingState',
+ key: 'side-panel/isSidePanelAnimatingState',
defaultValue: false,
});
diff --git a/packages/twenty-front/src/modules/command-menu/states/hasUserSelectedCommandState.ts b/packages/twenty-front/src/modules/side-panel/states/isSidePanelClosingState.ts
similarity index 52%
rename from packages/twenty-front/src/modules/command-menu/states/hasUserSelectedCommandState.ts
rename to packages/twenty-front/src/modules/side-panel/states/isSidePanelClosingState.ts
index 7352a0f278..d4458b9b52 100644
--- a/packages/twenty-front/src/modules/command-menu/states/hasUserSelectedCommandState.ts
+++ b/packages/twenty-front/src/modules/side-panel/states/isSidePanelClosingState.ts
@@ -1,5 +1,5 @@
import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
-export const hasUserSelectedCommandState = createAtomState({
- key: 'hasUserSelectedCommandState',
+export const isSidePanelClosingState = createAtomState({
+ key: 'side-panel/isSidePanelClosingState',
defaultValue: false,
});
diff --git a/packages/twenty-front/src/modules/command-menu/states/isCommandMenuClosingState.ts b/packages/twenty-front/src/modules/side-panel/states/isSidePanelOpenedState.ts
similarity index 50%
rename from packages/twenty-front/src/modules/command-menu/states/isCommandMenuClosingState.ts
rename to packages/twenty-front/src/modules/side-panel/states/isSidePanelOpenedState.ts
index 0f0f4dd42d..a8fb6e8f74 100644
--- a/packages/twenty-front/src/modules/command-menu/states/isCommandMenuClosingState.ts
+++ b/packages/twenty-front/src/modules/side-panel/states/isSidePanelOpenedState.ts
@@ -1,5 +1,6 @@
import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
-export const isCommandMenuClosingState = createAtomState({
- key: 'command-menu/isCommandMenuClosingState',
+
+export const isSidePanelOpenedState = createAtomState({
+ key: 'side-panel/isSidePanelOpenedState',
defaultValue: false,
});
diff --git a/packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationMorphItemsByPageState.ts b/packages/twenty-front/src/modules/side-panel/states/sidePanelNavigationMorphItemsByPageState.ts
similarity index 61%
rename from packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationMorphItemsByPageState.ts
rename to packages/twenty-front/src/modules/side-panel/states/sidePanelNavigationMorphItemsByPageState.ts
index 0d41a2e568..0a160c72e3 100644
--- a/packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationMorphItemsByPageState.ts
+++ b/packages/twenty-front/src/modules/side-panel/states/sidePanelNavigationMorphItemsByPageState.ts
@@ -1,9 +1,9 @@
import { type MorphItem } from '@/object-record/multiple-objects/types/MorphItem';
import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
-export const commandMenuNavigationMorphItemsByPageState = createAtomState<
+export const sidePanelNavigationMorphItemsByPageState = createAtomState<
Map
>({
- key: 'command-menu/commandMenuNavigationMorphItemsByPageState',
+ key: 'side-panel/sidePanelNavigationMorphItemsByPageState',
defaultValue: new Map(),
});
diff --git a/packages/twenty-front/src/modules/side-panel/states/sidePanelNavigationStackState.ts b/packages/twenty-front/src/modules/side-panel/states/sidePanelNavigationStackState.ts
new file mode 100644
index 0000000000..5d16be87f4
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/states/sidePanelNavigationStackState.ts
@@ -0,0 +1,18 @@
+import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
+import { type SidePanelPages } from 'twenty-shared/types';
+import { type IconComponent } from 'twenty-ui/display';
+
+export type SidePanelNavigationStackItem = {
+ page: SidePanelPages;
+ pageTitle: string;
+ pageIcon: IconComponent;
+ pageIconColor?: string;
+ pageId: string;
+};
+
+export const sidePanelNavigationStackState = createAtomState<
+ SidePanelNavigationStackItem[]
+>({
+ key: 'side-panel/sidePanelNavigationStackState',
+ defaultValue: [],
+});
diff --git a/packages/twenty-front/src/modules/command-menu/states/commandMenuPageInfoState.ts b/packages/twenty-front/src/modules/side-panel/states/sidePanelPageInfoState.ts
similarity index 73%
rename from packages/twenty-front/src/modules/command-menu/states/commandMenuPageInfoState.ts
rename to packages/twenty-front/src/modules/side-panel/states/sidePanelPageInfoState.ts
index dbaebb8710..e1a6b70173 100644
--- a/packages/twenty-front/src/modules/command-menu/states/commandMenuPageInfoState.ts
+++ b/packages/twenty-front/src/modules/side-panel/states/sidePanelPageInfoState.ts
@@ -1,12 +1,12 @@
-import { type IconComponent } from 'twenty-ui/display';
import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
+import { type IconComponent } from 'twenty-ui/display';
-export const commandMenuPageInfoState = createAtomState<{
+export const sidePanelPageInfoState = createAtomState<{
title?: string;
Icon?: IconComponent;
instanceId: string;
}>({
- key: 'command-menu/commandMenuPageInfoState',
+ key: 'side-panel/sidePanelPageInfoState',
defaultValue: {
title: undefined,
Icon: undefined,
diff --git a/packages/twenty-front/src/modules/side-panel/states/sidePanelPageState.ts b/packages/twenty-front/src/modules/side-panel/states/sidePanelPageState.ts
new file mode 100644
index 0000000000..616cc5f089
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/states/sidePanelPageState.ts
@@ -0,0 +1,7 @@
+import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
+import { SidePanelPages } from 'twenty-shared/types';
+
+export const sidePanelPageState = createAtomState({
+ key: 'side-panel/sidePanelPageState',
+ defaultValue: SidePanelPages.Root,
+});
diff --git a/packages/twenty-front/src/modules/side-panel/states/sidePanelSearchState.ts b/packages/twenty-front/src/modules/side-panel/states/sidePanelSearchState.ts
new file mode 100644
index 0000000000..a0cdaff982
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/states/sidePanelSearchState.ts
@@ -0,0 +1,5 @@
+import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
+export const sidePanelSearchState = createAtomState({
+ key: 'side-panel/sidePanelSearchState',
+ defaultValue: '',
+});
diff --git a/packages/twenty-front/src/modules/side-panel/states/sidePanelShouldFocusTitleInputComponentState.ts b/packages/twenty-front/src/modules/side-panel/states/sidePanelShouldFocusTitleInputComponentState.ts
new file mode 100644
index 0000000000..e6a8cc0165
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/states/sidePanelShouldFocusTitleInputComponentState.ts
@@ -0,0 +1,10 @@
+import { createAtomComponentState } from '@/ui/utilities/state/jotai/utils/createAtomComponentState';
+
+import { SidePanelPageComponentInstanceContext } from './contexts/SidePanelPageComponentInstanceContext';
+
+export const sidePanelShouldFocusTitleInputComponentState =
+ createAtomComponentState({
+ key: 'sidePanelShouldFocusTitleInputComponentState',
+ defaultValue: false,
+ componentInstanceContext: SidePanelPageComponentInstanceContext,
+ });
diff --git a/packages/twenty-front/src/modules/side-panel/states/sidePanelWidthState.ts b/packages/twenty-front/src/modules/side-panel/states/sidePanelWidthState.ts
new file mode 100644
index 0000000000..b84d3c44df
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/states/sidePanelWidthState.ts
@@ -0,0 +1,10 @@
+import { SIDE_PANEL_CONSTRAINTS } from '@/side-panel/constants/SidePanelConstraints';
+import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
+
+export const SIDE_PANEL_WIDTH_VAR = '--side-panel-width';
+
+export const sidePanelWidthState = createAtomState({
+ key: 'sidePanelWidth',
+ defaultValue: SIDE_PANEL_CONSTRAINTS.default,
+ useLocalStorage: true,
+});
diff --git a/packages/twenty-front/src/modules/side-panel/types/SidePanelActionGroupConfig.ts b/packages/twenty-front/src/modules/side-panel/types/SidePanelActionGroupConfig.ts
new file mode 100644
index 0000000000..dcb54940ef
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/types/SidePanelActionGroupConfig.ts
@@ -0,0 +1,6 @@
+import { type ActionConfig } from '@/action-menu/actions/types/ActionConfig';
+
+export type SidePanelActionGroupConfig = {
+ heading: string;
+ items?: ActionConfig[];
+};
diff --git a/packages/twenty-front/src/modules/side-panel/types/SidePanelAnimationVariant.ts b/packages/twenty-front/src/modules/side-panel/types/SidePanelAnimationVariant.ts
new file mode 100644
index 0000000000..469ef58fd5
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/types/SidePanelAnimationVariant.ts
@@ -0,0 +1,4 @@
+import { type SIDE_PANEL_ANIMATION_VARIANTS } from '@/side-panel/constants/SidePanelAnimationVariants';
+
+export type SidePanelAnimationVariant =
+ keyof typeof SIDE_PANEL_ANIMATION_VARIANTS;
diff --git a/packages/twenty-front/src/modules/command-menu/utils/getRecordContextText.ts b/packages/twenty-front/src/modules/side-panel/utils/getSelectedRecordsContextText.ts
similarity index 100%
rename from packages/twenty-front/src/modules/command-menu/utils/getRecordContextText.ts
rename to packages/twenty-front/src/modules/side-panel/utils/getSelectedRecordsContextText.ts
diff --git a/packages/twenty-front/src/modules/ui/layout/constants/RootStackingContextZIndices.ts b/packages/twenty-front/src/modules/ui/layout/constants/RootStackingContextZIndices.ts
index 5a71a8720f..1a636f96d9 100644
--- a/packages/twenty-front/src/modules/ui/layout/constants/RootStackingContextZIndices.ts
+++ b/packages/twenty-front/src/modules/ui/layout/constants/RootStackingContextZIndices.ts
@@ -13,8 +13,8 @@
* TODO: add the other remaining components that can appear in the root stacking context
*/
export enum RootStackingContextZIndices {
- CommandMenu = 21,
- CommandMenuButton = 22,
+ SidePanel = 21,
+ SidePanelButton = 22,
DropdownPortalBelowModal = 38,
RootModalBackDrop = 39,
RootModal = 40,
diff --git a/packages/twenty-front/src/modules/ui/layout/contexts/LayoutRenderingContext.tsx b/packages/twenty-front/src/modules/ui/layout/contexts/LayoutRenderingContext.tsx
index 88ad873c24..f5165763dc 100644
--- a/packages/twenty-front/src/modules/ui/layout/contexts/LayoutRenderingContext.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/contexts/LayoutRenderingContext.tsx
@@ -10,7 +10,7 @@ export type LayoutRenderingContextType = {
layoutType: PageLayoutType;
- isInRightDrawer: boolean;
+ isInSidePanel: boolean;
};
export const [LayoutRenderingProvider, useLayoutRenderingContext] =
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/OptionsDropdownMenu.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/OptionsDropdownMenu.tsx
index 28b911bbef..01cafb3cff 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/OptionsDropdownMenu.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/OptionsDropdownMenu.tsx
@@ -1,4 +1,4 @@
-import { SIDE_PANEL_FOCUS_ID } from '@/command-menu/constants/SidePanelFocusId';
+import { SIDE_PANEL_FOCUS_ID } from '@/side-panel/constants/SidePanelFocusId';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
diff --git a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleSidePanelButton.tsx
similarity index 68%
rename from packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx
rename to packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleSidePanelButton.tsx
index ee6e079cad..abe8f7c48b 100644
--- a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleSidePanelButton.tsx
@@ -1,9 +1,9 @@
-import { COMMAND_MENU_SEARCH_BAR_HEIGHT_MOBILE } from '@/command-menu/constants/CommandMenuSearchBarHeightMobile';
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
+import { SIDE_PANEL_TOP_BAR_HEIGHT_MOBILE } from '@/side-panel/constants/SidePanelTopBarHeightMobile';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState';
import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState';
import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
-import { PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID } from '@/ui/layout/page-header/constants/PageHeaderCommandMenuButtonClickOutsideId';
+import { PAGE_HEADER_SIDE_PANEL_BUTTON_CLICK_OUTSIDE_ID } from '@/ui/layout/page-header/constants/PageHeaderSidePanelButtonClickOutsideId';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { styled } from '@linaria/react';
import { i18n } from '@lingui/core';
@@ -18,12 +18,12 @@ const StyledButtonWrapper = styled.div<{ alignToTop: boolean }>`
align-items: ${({ alignToTop }) => (alignToTop ? 'center' : 'initial')};
display: ${({ alignToTop }) => (alignToTop ? 'flex' : 'block')};
height: ${({ alignToTop }) =>
- alignToTop ? `${COMMAND_MENU_SEARCH_BAR_HEIGHT_MOBILE}px` : 'auto'};
+ alignToTop ? `${SIDE_PANEL_TOP_BAR_HEIGHT_MOBILE}px` : 'auto'};
position: ${({ alignToTop }) => (alignToTop ? 'fixed' : 'static')};
right: ${({ alignToTop }) =>
alignToTop ? themeCssVariables.spacing[3] : 'auto'};
top: ${({ alignToTop }) => (alignToTop ? '0' : 'auto')};
- z-index: ${RootStackingContextZIndices.CommandMenuButton};
+ z-index: ${RootStackingContextZIndices.SidePanelButton};
`;
const StyledTooltipWrapper = styled.div`
@@ -38,9 +38,9 @@ const xPaths = {
};
const AnimatedIcon = ({
- isCommandMenuOpened,
+ isSidePanelOpened,
}: {
- isCommandMenuOpened: boolean;
+ isSidePanelOpened: boolean;
}) => {
const { theme } = useContext(ThemeContext);
@@ -64,8 +64,8 @@ const AnimatedIcon = ({
r="1"
initial={{ opacity: 0 }}
animate={{
- scale: isCommandMenuOpened ? 0 : 1,
- opacity: isCommandMenuOpened ? 0 : 1,
+ scale: isSidePanelOpened ? 0 : 1,
+ opacity: isSidePanelOpened ? 0 : 1,
}}
transition={{
duration: theme.animation.duration.fast,
@@ -79,13 +79,13 @@ const AnimatedIcon = ({
d={path}
initial={{ pathLength: 0, opacity: 0 }}
animate={{
- pathLength: isCommandMenuOpened ? 1 : 0,
- opacity: isCommandMenuOpened ? 1 : 0,
+ pathLength: isSidePanelOpened ? 1 : 0,
+ opacity: isSidePanelOpened ? 1 : 0,
}}
transition={{
duration: theme.animation.duration.fast,
ease: 'easeInOut',
- delay: isCommandMenuOpened ? 0.1 : 0,
+ delay: isSidePanelOpened ? 0.1 : 0,
}}
/>
))}
@@ -97,8 +97,8 @@ const AnimatedIcon = ({
r="1"
initial={{ opacity: 0 }}
animate={{
- scale: isCommandMenuOpened ? 0 : 1,
- opacity: isCommandMenuOpened ? 0 : 1,
+ scale: isSidePanelOpened ? 0 : 1,
+ opacity: isSidePanelOpened ? 0 : 1,
}}
transition={{
duration: theme.animation.duration.fast,
@@ -112,8 +112,8 @@ const AnimatedIcon = ({
r="1"
initial={{ opacity: 0 }}
animate={{
- scale: isCommandMenuOpened ? 0 : 1,
- opacity: isCommandMenuOpened ? 0 : 1,
+ scale: isSidePanelOpened ? 0 : 1,
+ opacity: isSidePanelOpened ? 0 : 1,
}}
transition={{
duration: theme.animation.duration.fast,
@@ -123,39 +123,38 @@ const AnimatedIcon = ({
);
};
-export const PageHeaderToggleCommandMenuButton = () => {
- const { theme } = useContext(ThemeContext);
- const { toggleCommandMenu } = useCommandMenu();
- const isCommandMenuOpened = useAtomStateValue(isCommandMenuOpenedState);
+export const PageHeaderToggleSidePanelButton = () => {
+ const { toggleSidePanelMenu } = useSidePanelMenu();
+ const isSidePanelOpened = useAtomStateValue(isSidePanelOpenedState);
const isNavigationMenuInEditMode = useAtomStateValue(
isNavigationMenuInEditModeState,
);
const isMobile = useIsMobile();
- const alignWithCommandMenuTopBar =
- isMobile && isNavigationMenuInEditMode && isCommandMenuOpened;
+ const alignWithSidePanelTopBar =
+ isMobile && isNavigationMenuInEditMode && isSidePanelOpened;
- const ariaLabel = isCommandMenuOpened
- ? t`Close command menu`
- : t`Open command menu`;
+ const ariaLabel = isSidePanelOpened
+ ? t`Close side panel`
+ : t`Open side panel`;
+
+ const { theme } = useContext(ThemeContext);
return (
-
-