Uniformize folder structure (#693)

* Uniformize folder structure

* Fix icons

* Fix icons

* Fix tests

* Fix tests

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

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

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

@@ -0,0 +1,51 @@
+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>`
+  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;
+  justify-content: center;
+
+  padding: ${({ theme }) => theme.spacing(2)};
+  transition: background 0.1s ease;
+  user-select: none;
+
+  &:hover {
+    background: ${({ theme }) => theme.background.tertiary};
+  }
+`;
+
+const StyledButtonLabel = styled.div`
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  margin-left: ${({ theme }) => theme.spacing(2)};
+`;
+
+export function EntityTableActionBarButton({
+  label,
+  icon,
+  type = 'standard',
+  onClick,
+}: OwnProps) {
+  return (
+    <StyledButton type={type} onClick={onClick}>
+      {icon}
+      <StyledButtonLabel>{label}</StyledButtonLabel>
+    </StyledButton>
+  );
+}

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

@@ -0,0 +1,17 @@
+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}
+    />
+  );
+}