- refactor context menu and action bar into seperate components

- fix styling context menu

front/src/modules/companies/table/components/TableActionBarButtonCreateActivityCompany.tsx

@@ -1,6 +1,7 @@
+import { IconCheckbox, IconNotes } from '@tabler/icons-react';
+
 import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
-import { TableActionBarButtonToggleComments } from '@/ui/table/action-bar/components/TableActionBarButtonOpenComments';
-import { TableActionBarButtonToggleTasks } from '@/ui/table/action-bar/components/TableActionBarButtonOpenTasks';
+import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton';
 import { ActivityType, CommentableType } from '~/generated/graphql';
 
 export function TableActionBarButtonCreateActivityCompany() {
@@ -13,10 +14,14 @@ export function TableActionBarButtonCreateActivityCompany() {
 
   return (
     <>
-      <TableActionBarButtonToggleComments
+      <EntityTableActionBarButton
+        label="Note"
+        icon={<IconNotes size={16} />}
         onClick={() => handleButtonClick(ActivityType.Note)}
       />
-      <TableActionBarButtonToggleTasks
+      <EntityTableActionBarButton
+        label="Task"
+        icon={<IconCheckbox size={16} />}
         onClick={() => handleButtonClick(ActivityType.Task)}
       />
     </>

front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies copy.tsx

@@ -0,0 +1,54 @@
+import { getOperationName } from '@apollo/client/utilities';
+import { useRecoilState, useRecoilValue } from 'recoil';
+
+import { GET_PIPELINES } from '@/pipeline/queries';
+import { IconTrash } from '@/ui/icon/index';
+import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry';
+import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
+import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
+import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
+import { useDeleteManyCompaniesMutation } from '~/generated/graphql';
+
+export function TableContextMenuEntryDeleteCompanies() {
+  const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
+
+  const resetRowSelection = useResetTableRowSelection();
+
+  const [deleteCompanies] = useDeleteManyCompaniesMutation({
+    refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
+  });
+
+  const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
+
+  async function handleDeleteClick() {
+    const rowIdsToDelete = selectedRowIds;
+
+    resetRowSelection();
+
+    await deleteCompanies({
+      variables: {
+        ids: rowIdsToDelete,
+      },
+      optimisticResponse: {
+        __typename: 'Mutation',
+        deleteManyCompany: {
+          count: rowIdsToDelete.length,
+        },
+      },
+      update: () => {
+        setTableRowIds(
+          tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
+        );
+      },
+    });
+  }
+
+  return (
+    <EntityTableContextMenuEntry
+      label="Delete"
+      icon={<IconTrash size={16} />}
+      type="warning"
+      onClick={handleDeleteClick}
+    />
+  );
+}

front/src/modules/companies/table/components/TableContextMenuEntryCreateActivityCompany copy.tsx

@@ -0,0 +1,29 @@
+import { IconCheckbox, IconNotes } from '@tabler/icons-react';
+
+import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
+import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry';
+import { ActivityType, CommentableType } from '~/generated/graphql';
+
+export function TableContextMenuEntryCreateActivityCompany() {
+  const openCreateActivityRightDrawer =
+    useOpenCreateActivityDrawerForSelectedRowIds();
+
+  async function handleButtonClick(type: ActivityType) {
+    openCreateActivityRightDrawer(type, CommentableType.Company);
+  }
+
+  return (
+    <>
+      <EntityTableContextMenuEntry
+        label="Note"
+        icon={<IconNotes size={16} />}
+        onClick={() => handleButtonClick(ActivityType.Note)}
+      />
+      <EntityTableContextMenuEntry
+        label="Task"
+        icon={<IconCheckbox size={16} />}
+        onClick={() => handleButtonClick(ActivityType.Task)}
+      />
+    </>
+  );
+}

front/src/modules/people/table/components/TableActionBarButtonCreateActivityPeople.tsx

@@ -1,6 +1,7 @@
+import { IconCheckbox, IconNotes } from '@tabler/icons-react';
+
 import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
-import { TableActionBarButtonToggleComments } from '@/ui/table/action-bar/components/TableActionBarButtonOpenComments';
-import { TableActionBarButtonToggleTasks } from '@/ui/table/action-bar/components/TableActionBarButtonOpenTasks';
+import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton';
 import { ActivityType, CommentableType } from '~/generated/graphql';
 
 export function TableActionBarButtonCreateActivityPeople() {
@@ -13,10 +14,14 @@ export function TableActionBarButtonCreateActivityPeople() {
 
   return (
     <>
-      <TableActionBarButtonToggleComments
+      <EntityTableActionBarButton
+        label="Note"
+        icon={<IconNotes size={16} />}
         onClick={() => handleButtonClick(ActivityType.Note)}
       />
-      <TableActionBarButtonToggleTasks
+      <EntityTableActionBarButton
+        label="Task"
+        icon={<IconCheckbox size={16} />}
         onClick={() => handleButtonClick(ActivityType.Task)}
       />
     </>

front/src/modules/people/table/components/TableActionContextMenuEntryDeletePeople.tsx

@@ -0,0 +1,53 @@
+import { getOperationName } from '@apollo/client/utilities';
+import { useRecoilState, useRecoilValue } from 'recoil';
+
+import { GET_PEOPLE } from '@/people/queries';
+import { IconTrash } from '@/ui/icon/index';
+import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry';
+import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
+import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
+import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
+import { useDeleteManyPersonMutation } from '~/generated/graphql';
+
+export function TableContextMenuEntryDeletePeople() {
+  const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
+  const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
+
+  const resetRowSelection = useResetTableRowSelection();
+
+  const [deleteManyPerson] = useDeleteManyPersonMutation({
+    refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
+  });
+
+  async function handleDeleteClick() {
+    const rowIdsToDelete = selectedRowIds;
+
+    resetRowSelection();
+
+    await deleteManyPerson({
+      variables: {
+        ids: rowIdsToDelete,
+      },
+      optimisticResponse: {
+        __typename: 'Mutation',
+        deleteManyPerson: {
+          count: rowIdsToDelete.length,
+        },
+      },
+      update: () => {
+        setTableRowIds(
+          tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
+        );
+      },
+    });
+  }
+
+  return (
+    <EntityTableContextMenuEntry
+      label="Delete"
+      icon={<IconTrash size={16} />}
+      type="warning"
+      onClick={handleDeleteClick}
+    />
+  );
+}

front/src/modules/people/table/components/TableContextMenuEntryCreateActivityPeople.tsx

@@ -0,0 +1,29 @@
+import { IconCheckbox, IconNotes } from '@tabler/icons-react';
+
+import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
+import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry';
+import { ActivityType, CommentableType } from '~/generated/graphql';
+
+export function TableContextMenuEntryCreateActivityPeople() {
+  const openCreateActivityRightDrawer =
+    useOpenCreateActivityDrawerForSelectedRowIds();
+
+  async function handleButtonClick(type: ActivityType) {
+    openCreateActivityRightDrawer(type, CommentableType.Person);
+  }
+
+  return (
+    <>
+      <EntityTableContextMenuEntry
+        label="Note"
+        icon={<IconNotes size={16} />}
+        onClick={() => handleButtonClick(ActivityType.Note)}
+      />
+      <EntityTableContextMenuEntry
+        label="Task"
+        icon={<IconCheckbox size={16} />}
+        onClick={() => handleButtonClick(ActivityType.Task)}
+      />
+    </>
+  );
+}

front/src/modules/ui/action-bar/components/ActionBar.tsx

@@ -4,42 +4,11 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { contextMenuPositionState } from '@/ui/table/states/contextMenuPositionState';
 
-import { PositionType } from '../types/PositionType';
-
 type OwnProps = {
   children: React.ReactNode | React.ReactNode[];
   selectedIds: string[];
 };
 
-type StyledContainerProps = {
-  position: PositionType;
-};
-
-const StyledContainerContextMenu = styled.div<StyledContainerProps>`
-  align-items: center;
-  background: ${({ theme }) => theme.background.secondary};
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: ${({ theme }) => theme.border.radius.md};
-  bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
-  box-shadow: ${({ theme }) => theme.boxShadow.strong};
-
-  left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')};
-  padding-bottom: ${({ theme }) => theme.spacing(1)};
-  padding-left: ${({ theme }) => theme.spacing(1)};
-  padding-right: ${({ theme }) => theme.spacing(1)};
-  padding-top: ${({ theme }) => theme.spacing(1)};
-  position: ${(props) => (props.position.x ? 'fixed' : 'absolute')};
-  top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')};
-
-  transform: translateX(-50%);
-  width: 160px;
-  z-index: 1;
-
-  div {
-    justify-content: left;
-  }
-`;
-
 const StyledContainerActionBar = styled.div`
   align-items: center;
   background: ${({ theme }) => theme.background.secondary};
@@ -79,16 +48,9 @@ export function ActionBar({ children, selectedIds }: OwnProps) {
     };
   }, [setContextMenuPosition]);
 
-  if (selectedIds.length === 0) {
+  if (selectedIds.length === 0 || position.x || position.y) {
     return null;
   }
-  if (position.x && position.y) {
-    return (
-      <StyledContainerContextMenu className="action-bar" position={position}>
-        {children}
-      </StyledContainerContextMenu>
-    );
-  }
   return (
     <StyledContainerActionBar className="action-bar">
       {children}

front/src/modules/ui/context-menu/components/ContextMenu.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect } from 'react';
+import styled from '@emotion/styled';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+
+import { contextMenuPositionState } from '@/ui/table/states/contextMenuPositionState';
+
+import { PositionType } from '../types/PositionType';
+
+type OwnProps = {
+  children: React.ReactNode | React.ReactNode[];
+  selectedIds: string[];
+};
+
+type StyledContainerProps = {
+  position: PositionType;
+};
+
+const StyledContainerContextMenu = 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;
+  gap: 1px;
+
+  left: ${(props) => `${props.position.x}px`};
+  position: fixed;
+  top: ${(props) => `${props.position.y}px`};
+
+  transform: translateX(-50%);
+  width: 160px;
+  z-index: 1;
+`;
+
+export function ContextMenu({ children, selectedIds }: OwnProps) {
+  const position = useRecoilValue(contextMenuPositionState);
+  const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (!(event.target as HTMLElement).closest('.action-bar')) {
+        setContextMenuPosition({ x: null, y: null });
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    // Cleanup the event listener when the component unmounts
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [setContextMenuPosition]);
+
+  if (selectedIds.length === 0 || (!position.x && !position.y)) {
+    return null;
+  }
+  return (
+    <StyledContainerContextMenu className="action-bar" position={position}>
+      {children}
+    </StyledContainerContextMenu>
+  );
+}

front/src/modules/ui/table/action-bar/components/TableActionBarButtonOpenComments.tsx

@@ -1,17 +0,0 @@
-import { IconNotes } from '@/ui/icon/index';
-
-import { EntityTableActionBarButton } from './EntityTableActionBarButton';
-
-type OwnProps = {
-  onClick: () => void;
-};
-
-export function TableActionBarButtonToggleComments({ onClick }: OwnProps) {
-  return (
-    <EntityTableActionBarButton
-      label="Note"
-      icon={<IconNotes size={16} />}
-      onClick={onClick}
-    />
-  );
-}

front/src/modules/ui/table/action-bar/components/TableActionBarButtonOpenTasks.tsx

@@ -1,17 +0,0 @@
-import { IconCheckbox } from '@/ui/icon/index';
-
-import { EntityTableActionBarButton } from './EntityTableActionBarButton';
-
-type OwnProps = {
-  onClick: () => void;
-};
-
-export function TableActionBarButtonToggleTasks({ onClick }: OwnProps) {
-  return (
-    <EntityTableActionBarButton
-      label="Task"
-      icon={<IconCheckbox size={16} />}
-      onClick={onClick}
-    />
-  );
-}

front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { ContextMenu } from '@/ui/context-menu/components/ContextMenu';
+
+import { selectedRowIdsSelector } from '../../states/selectedRowIdsSelector';
+
+type OwnProps = {
+  children: React.ReactNode | React.ReactNode[];
+};
+
+export function EntityTableContextMenu({ children }: OwnProps) {
+  const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
+
+  return <ContextMenu selectedIds={selectedRowIds}>{children}</ContextMenu>;
+}

front/src/modules/ui/table/context-menu/components/EntityTableContextMenuEntry.tsx

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  icon: ReactNode;
+  label: string;
+  type?: 'standard' | 'warning';
+  onClick: () => void;
+};
+
+type StyledButtonProps = {
+  type: 'standard' | 'warning';
+};
+
+const StyledButton = styled.div<StyledButtonProps>`
+  align-items: center;
+  align-self: stretch;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${(props) =>
+    props.type === 'warning'
+      ? props.theme.color.red
+      : props.theme.font.color.secondary};
+  cursor: pointer;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+
+  height: 32px;
+  padding-left: ${({ theme }) => theme.spacing(1)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
+  transition: background 0.1s ease;
+  user-select: none;
+
+  &:hover {
+    background: ${({ theme, type }) =>
+      type === 'warning'
+        ? theme.tag.background.red
+        : theme.background.tertiary};
+  }
+`;
+
+const StyledButtonLabel = styled.div`
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  margin-left: ${({ theme }) => theme.spacing(2)};
+`;
+
+export function EntityTableContextMenuEntry({
+  label,
+  icon,
+  type = 'standard',
+  onClick,
+}: OwnProps) {
+  return (
+    <StyledButton type={type} onClick={onClick}>
+      {icon}
+      <StyledButtonLabel>{label}</StyledButtonLabel>
+    </StyledButton>
+  );
+}

front/src/modules/ui/table/states/contextMenuPositionState.ts

@@ -1,6 +1,6 @@
 import { atom } from 'recoil';
 
-import { PositionType } from '@/ui/action-bar/types/PositionType';
+import { PositionType } from '@/ui/context-menu/types/PositionType';
 
 export const contextMenuPositionState = atom<PositionType>({
   key: 'contextMenuPositionState',

front/src/pages/companies/Companies.tsx

@@ -7,10 +7,13 @@ import { v4 } from 'uuid';
 import { CompanyTable } from '@/companies/table/components/CompanyTable';
 import { TableActionBarButtonCreateActivityCompany } from '@/companies/table/components/TableActionBarButtonCreateActivityCompany';
 import { TableActionBarButtonDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies';
+import { TableContextMenuEntryDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies copy';
+import { TableContextMenuEntryCreateActivityCompany } from '@/companies/table/components/TableContextMenuEntryCreateActivityCompany copy';
 import { SEARCH_COMPANY_QUERY } from '@/search/queries/search';
 import { IconBuildingSkyscraper } from '@/ui/icon';
 import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
 import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
+import { EntityTableContextMenu } from '@/ui/table/context-menu/components/EntityTableContextMenu';
 import { TableContext } from '@/ui/table/states/TableContext';
 import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
@@ -72,6 +75,10 @@ export function Companies() {
             <TableActionBarButtonCreateActivityCompany />
             <TableActionBarButtonDeleteCompanies />
           </EntityTableActionBar>
+          <EntityTableContextMenu>
+            <TableContextMenuEntryCreateActivityCompany />
+            <TableContextMenuEntryDeleteCompanies />
+          </EntityTableContextMenu>
         </RecoilScope>
       </WithTopBarContainer>
     </>

front/src/pages/people/People.tsx

@@ -6,9 +6,12 @@ import { v4 } from 'uuid';
 import { PeopleTable } from '@/people/table/components/PeopleTable';
 import { TableActionBarButtonCreateActivityPeople } from '@/people/table/components/TableActionBarButtonCreateActivityPeople';
 import { TableActionBarButtonDeletePeople } from '@/people/table/components/TableActionBarButtonDeletePeople';
+import { TableContextMenuEntryDeletePeople } from '@/people/table/components/TableActionContextMenuEntryDeletePeople';
+import { TableContextMenuEntryCreateActivityPeople } from '@/people/table/components/TableContextMenuEntryCreateActivityPeople';
 import { IconUser } from '@/ui/icon';
 import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
 import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
+import { EntityTableContextMenu } from '@/ui/table/context-menu/components/EntityTableContextMenu';
 import { TableContext } from '@/ui/table/states/TableContext';
 import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
@@ -67,6 +70,10 @@ export function People() {
           <TableActionBarButtonCreateActivityPeople />
           <TableActionBarButtonDeletePeople />
         </EntityTableActionBar>
+        <EntityTableContextMenu>
+          <TableContextMenuEntryCreateActivityPeople />
+          <TableContextMenuEntryDeletePeople />
+        </EntityTableContextMenu>
       </WithTopBarContainer>
     </RecoilScope>
   );