- refactor context menu and action bar into seperate components

- fix styling context menu

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/action-bar/types/PositionType.ts

@@ -1,4 +0,0 @@
-export type PositionType = {
-  x: number | null;
-  y: number | null;
-};