houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor!: rename Command Menu page/navigation layer to Side Panel (#18393)

Browse Source
This commit is contained in:
nitin
2026-03-05 20:16:31 +05:30
committed by GitHub
parent 38ad0820c0
commit 5853891b02
675 changed files with 4894 additions and 4964 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx
+15 -15
View File
@@ -1,29 +1,29 @@
import { COMMAND_MENU_ANIMATION_VARIANTS } from '@/command-menu/constants/CommandMenuAnimationVariants';
import { COMMAND_MENU_CLICK_OUTSIDE_ID } from '@/command-menu/constants/CommandMenuClickOutsideId';
import { SIDE_PANEL_FOCUS_ID } from '@/command-menu/constants/SidePanelFocusId';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { isSidePanelAnimatingState } from '@/command-menu/states/isSidePanelAnimatingState';
import { type CommandMenuAnimationVariant } from '@/command-menu/types/CommandMenuAnimationVariant';
import { RECORD_CHIP_CLICK_OUTSIDE_ID } from '@/object-record/record-table/constants/RecordChipClickOutsideId';
import { SIDE_PANEL_ANIMATION_VARIANTS } from '@/side-panel/constants/SidePanelAnimationVariants';
import { SIDE_PANEL_FOCUS_ID } from '@/side-panel/constants/SidePanelFocusId';
import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
import { isSidePanelAnimatingState } from '@/side-panel/states/isSidePanelAnimatingState';
import { type SidePanelAnimationVariant } from '@/side-panel/types/SidePanelAnimationVariant';
import { MENTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/ui/input/constants/MentionMenuDropdownClickOutsideId';
import { SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/ui/input/constants/SlashMenuDropdownClickOutsideId';
import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
import { PAGE_HEADER_SIDE_PANEL_BUTTON_CLICK_OUTSIDE_ID } from '@/ui/layout/page-header/constants/PageHeaderSidePanelButtonClickOutsideId';
import { NAVIGATION_DRAWER_CLICK_OUTSIDE_ID } from '@/ui/navigation/navigation-drawer/constants/NavigationDrawerClickOutsideId';
import { PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID } from '@/ui/layout/page-header/constants/PageHeaderCommandMenuButtonClickOutsideId';
import { currentFocusIdSelector } from '@/ui/utilities/focus/states/currentFocusIdSelector';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useStore } from 'jotai';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { WORKFLOW_DIAGRAM_CREATE_STEP_NODE_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramCreateStepNodeClickOutsideId';
import { WORKFLOW_DIAGRAM_STEP_NODE_BASE_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramStepNodeClickOutsideId';
import { WORKFLOW_DIAGRAM_EDGE_OPTIONS_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/workflow-edges/constants/WorkflowDiagramEdgeOptionsClickOutsideId';
import { useStore } from 'jotai';
import { styled } from '@linaria/react';
import { motion } from 'framer-motion';
import { useCallback, useContext, useRef } from 'react';
import { LINK_CHIP_CLICK_OUTSIDE_ID } from 'twenty-ui/components';
import { useIsMobile } from 'twenty-ui/utilities';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
import { useIsMobile } from 'twenty-ui/utilities';
const StyledCommandMenuBase = styled.div`
background: ${themeCssVariables.background.primary};
border-left: 1px solid ${themeCssVariables.border.color.medium};
@@ -35,7 +35,7 @@ const StyledCommandMenuBase = styled.div`
position: fixed;
right: 0%;
top: 0%;
z-index: ${RootStackingContextZIndices.CommandMenu};
z-index: ${RootStackingContextZIndices.SidePanel};
display: flex;
flex-direction: column;
`;
@@ -47,10 +47,10 @@ export const CommandMenuOpenContainer = ({
const { theme } = useContext(ThemeContext);
const isMobile = useIsMobile();
const targetVariantForAnimation: CommandMenuAnimationVariant = isMobile
const targetVariantForAnimation: SidePanelAnimationVariant = isMobile
? 'fullScreen'
: 'normal';
const { closeCommandMenu } = useCommandMenu();
const { closeSidePanelMenu } = useSidePanelMenu();
const commandMenuRef = useRef<HTMLDivElement>(null);
const setIsSidePanelAnimating = useSetAtomState(isSidePanelAnimatingState);
@@ -64,10 +64,10 @@ export const CommandMenuOpenContainer = ({
if (currentFocusId === SIDE_PANEL_FOCUS_ID) {
event.stopImmediatePropagation();
event.preventDefault();
closeCommandMenu();
closeSidePanelMenu();
}
},
[closeCommandMenu, store],
[closeSidePanelMenu, store],
);
useListenClickOutside({
@@ -76,7 +76,7 @@ export const CommandMenuOpenContainer = ({
listenerId: 'COMMAND_MENU_LISTENER_ID',
excludedClickOutsideIds: [
NAVIGATION_DRAWER_CLICK_OUTSIDE_ID,
PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID,
PAGE_HEADER_SIDE_PANEL_BUTTON_CLICK_OUTSIDE_ID,
LINK_CHIP_CLICK_OUTSIDE_ID,
RECORD_CHIP_CLICK_OUTSIDE_ID,
SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID,
@@ -95,7 +95,7 @@ export const CommandMenuOpenContainer = ({
animate={targetVariantForAnimation}
initial="closed"
exit="closed"
variants={COMMAND_MENU_ANIMATION_VARIANTS}
variants={SIDE_PANEL_ANIMATION_VARIANTS}
transition={{
duration: theme.animation.duration.normal,
}}