7338 refactor actionbar and contextmenu to use the context store (#7462)

Closes #7338

packages/twenty-front/src/modules/action-menu/components/ActionMenuBar.tsx

@@ -0,0 +1,49 @@
+import styled from '@emotion/styled';
+
+import { ActionMenuBarEntry } from '@/action-menu/components/ActionMenuBarEntry';
+import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
+import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { ActionBarHotkeyScope } from '@/action-menu/types/ActionBarHotKeyScope';
+import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
+import { BottomBar } from '@/ui/layout/bottom-bar/components/BottomBar';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilValue } from 'recoil';
+
+const StyledLabel = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
+`;
+
+export const ActionMenuBar = () => {
+  const contextStoreTargetedRecordIds = useRecoilValue(
+    contextStoreTargetedRecordIdsState,
+  );
+
+  const actionMenuId = useAvailableComponentInstanceIdOrThrow(
+    ActionMenuComponentInstanceContext,
+  );
+
+  const actionMenuEntries = useRecoilComponentValueV2(
+    actionMenuEntriesComponentState,
+  );
+
+  return (
+    <BottomBar
+      bottomBarId={`action-bar-${actionMenuId}`}
+      bottomBarHotkeyScopeFromParent={{
+        scope: ActionBarHotkeyScope.ActionBar,
+      }}
+    >
+      <StyledLabel>
+        {contextStoreTargetedRecordIds.length} selected:
+      </StyledLabel>
+      {actionMenuEntries.map((entry, index) => (
+        <ActionMenuBarEntry key={index} entry={entry} />
+      ))}
+    </BottomBar>
+  );
+};

packages/twenty-front/src/modules/action-menu/components/ActionMenuBarEntry.tsx

@@ -0,0 +1,49 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
+import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';
+
+type ActionMenuBarEntryProps = {
+  entry: ActionMenuEntry;
+};
+
+const StyledButton = styled.div<{ accent: MenuItemAccent }>`
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${(props) =>
+    props.accent === 'danger'
+      ? props.theme.color.red
+      : props.theme.font.color.secondary};
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+
+  padding: ${({ theme }) => theme.spacing(2)};
+  transition: background 0.1s ease;
+  user-select: none;
+
+  &:hover {
+    background: ${({ theme, accent }) =>
+      accent === 'danger'
+        ? theme.background.danger
+        : theme.background.tertiary};
+  }
+`;
+
+const StyledButtonLabel = styled.div`
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  margin-left: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const ActionMenuBarEntry = ({ entry }: ActionMenuBarEntryProps) => {
+  const theme = useTheme();
+  return (
+    <StyledButton
+      accent={entry.accent ?? 'default'}
+      onClick={() => entry.onClick?.()}
+    >
+      {entry.Icon && <entry.Icon size={theme.icon.size.md} />}
+      <StyledButtonLabel>{entry.label}</StyledButtonLabel>
+    </StyledButton>
+  );
+};

packages/twenty-front/src/modules/action-menu/components/ActionMenuConfirmationModals.tsx

@@ -0,0 +1,18 @@
+import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+
+export const ActionMenuConfirmationModals = () => {
+  const actionMenuEntries = useRecoilComponentValueV2(
+    actionMenuEntriesComponentState,
+  );
+
+  return (
+    <div data-select-disable>
+      {actionMenuEntries.map((actionMenuEntry, index) =>
+        actionMenuEntry.ConfirmationModal ? (
+          <div key={index}>{actionMenuEntry.ConfirmationModal}</div>
+        ) : null,
+      )}
+    </div>
+  );
+};

packages/twenty-front/src/modules/action-menu/components/ActionMenuDropdown.tsx

@@ -0,0 +1,84 @@
+import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
+
+import { PositionType } from '../types/PositionType';
+
+import { actionMenuDropdownPositionComponentState } from '@/action-menu/states/actionMenuDropdownPositionComponentState';
+import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
+import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { ActionMenuDropdownHotkeyScope } from '@/action-menu/types/ActionMenuDropdownHotKeyScope';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
+
+type StyledContainerProps = {
+  position: PositionType;
+};
+
+const StyledContainerActionMenuDropdown = styled.div<StyledContainerProps>`
+  align-items: flex-start;
+  background: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  box-shadow: ${({ theme }) => theme.boxShadow.strong};
+  display: flex;
+  flex-direction: column;
+
+  left: ${(props) => `${props.position.x}px`};
+  position: fixed;
+  top: ${(props) => `${props.position.y}px`};
+
+  transform: translateX(-50%);
+  width: auto;
+`;
+
+export const ActionMenuDropdown = () => {
+  const actionMenuEntries = useRecoilComponentValueV2(
+    actionMenuEntriesComponentState,
+  );
+
+  const actionMenuId = useAvailableComponentInstanceIdOrThrow(
+    ActionMenuComponentInstanceContext,
+  );
+
+  const actionMenuDropdownPosition = useRecoilValue(
+    extractComponentState(
+      actionMenuDropdownPositionComponentState,
+      `action-menu-dropdown-${actionMenuId}`,
+    ),
+  );
+
+  //TODO: remove this
+  const width = actionMenuEntries.some(
+    (actionMenuEntry) => actionMenuEntry.label === 'Remove from favorites',
+  )
+    ? 200
+    : undefined;
+
+  return (
+    <StyledContainerActionMenuDropdown
+      position={actionMenuDropdownPosition}
+      className="context-menu"
+    >
+      <Dropdown
+        dropdownId={`action-menu-dropdown-${actionMenuId}`}
+        dropdownHotkeyScope={{
+          scope: ActionMenuDropdownHotkeyScope.ActionMenuDropdown,
+        }}
+        data-select-disable
+        dropdownMenuWidth={width}
+        dropdownComponents={actionMenuEntries.map((item, index) => (
+          <MenuItem
+            key={index}
+            LeftIcon={item.Icon}
+            onClick={item.onClick}
+            accent={item.accent}
+            text={item.label}
+          />
+        ))}
+      />
+    </StyledContainerActionMenuDropdown>
+  );
+};

packages/twenty-front/src/modules/action-menu/components/ActionMenuEffect.tsx

@@ -0,0 +1,46 @@
+import { useActionMenu } from '@/action-menu/hooks/useActionMenu';
+import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
+import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
+import { useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
+
+export const ActionMenuEffect = () => {
+  const contextStoreTargetedRecordIds = useRecoilValue(
+    contextStoreTargetedRecordIdsState,
+  );
+
+  const actionMenuId = useAvailableComponentInstanceIdOrThrow(
+    ActionMenuComponentInstanceContext,
+  );
+
+  const { openActionBar, closeActionBar } = useActionMenu(actionMenuId);
+
+  const isDropdownOpen = useRecoilValue(
+    extractComponentState(
+      isDropdownOpenComponentState,
+      `action-menu-dropdown-${actionMenuId}`,
+    ),
+  );
+
+  useEffect(() => {
+    if (contextStoreTargetedRecordIds.length > 0 && !isDropdownOpen) {
+      // We only handle opening the ActionMenuBar here, not the Dropdown.
+      // The Dropdown is already managed by sync handlers for events like
+      // right-click to open and click outside to close.
+      openActionBar();
+    }
+    if (contextStoreTargetedRecordIds.length === 0) {
+      closeActionBar();
+    }
+  }, [
+    contextStoreTargetedRecordIds,
+    openActionBar,
+    closeActionBar,
+    isDropdownOpen,
+  ]);
+
+  return null;
+};

packages/twenty-front/src/modules/action-menu/components/ActionMenuEntriesProvider.tsx

@@ -0,0 +1,25 @@
+import { EmptyActionMenuEntriesEffect } from '@/action-menu/components/EmptyActionMenuEntriesEffect';
+import { NonEmptyActionMenuEntriesEffect } from '@/action-menu/components/NonEmptyActionMenuEntriesEffect';
+import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
+import { useRecoilValue } from 'recoil';
+
+export const ActionMenuEntriesProvider = () => {
+  //TODO: Refactor this
+  const contextStoreCurrentObjectMetadataId = useRecoilValue(
+    contextStoreCurrentObjectMetadataIdState,
+  );
+
+  return (
+    <>
+      {contextStoreCurrentObjectMetadataId ? (
+        <NonEmptyActionMenuEntriesEffect
+          contextStoreCurrentObjectMetadataId={
+            contextStoreCurrentObjectMetadataId
+          }
+        />
+      ) : (
+        <EmptyActionMenuEntriesEffect />
+      )}
+    </>
+  );
+};

packages/twenty-front/src/modules/action-menu/components/EmptyActionMenuEntriesEffect.tsx

@@ -0,0 +1,14 @@
+import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { useEffect } from 'react';
+
+export const EmptyActionMenuEntriesEffect = () => {
+  const setActionMenuEntries = useSetRecoilComponentStateV2(
+    actionMenuEntriesComponentState,
+  );
+  useEffect(() => {
+    setActionMenuEntries([]);
+  }, [setActionMenuEntries]);
+
+  return null;
+};

packages/twenty-front/src/modules/action-menu/components/NonEmptyActionMenuEntriesEffect.tsx

@@ -0,0 +1,28 @@
+import { useComputeActionsBasedOnContextStore } from '@/action-menu/hooks/useComputeActionsBasedOnContextStore';
+import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
+import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { useEffect } from 'react';
+
+export const NonEmptyActionMenuEntriesEffect = ({
+  contextStoreCurrentObjectMetadataId,
+}: {
+  contextStoreCurrentObjectMetadataId: string;
+}) => {
+  const { objectMetadataItem } = useObjectMetadataItemById({
+    objectId: contextStoreCurrentObjectMetadataId,
+  });
+  const { availableActionsInContext } = useComputeActionsBasedOnContextStore({
+    objectMetadataItem,
+  });
+
+  const setActionMenuEntries = useSetRecoilComponentStateV2(
+    actionMenuEntriesComponentState,
+  );
+
+  useEffect(() => {
+    setActionMenuEntries(availableActionsInContext);
+  }, [availableActionsInContext, setActionMenuEntries]);
+
+  return null;
+};