Clean and re-organize post table refactoring (#1000)

* Clean and re-organize post table refactoring

* Fix tests

front/src/modules/ui/layout/components/DefaultLayout.tsx

@@ -7,7 +7,7 @@ import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus';
 import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
 import { CommandMenu } from '@/command-menu/components/CommandMenu';
 import { NavbarAnimatedContainer } from '@/ui/navbar/components/NavbarAnimatedContainer';
-import { MOBILE_VIEWPORT } from '@/ui/themes/themes';
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
 import { AppNavbar } from '~/AppNavbar';
 import { CompaniesMockMode } from '~/pages/companies/CompaniesMockMode';
 

front/src/modules/ui/layout/components/PagePanel.tsx

@@ -12,6 +12,6 @@ const StyledPanel = styled.div`
   width: 100%;
 `;
 
-export function Panel({ children }: { children: React.ReactNode }) {
+export function PagePanel({ children }: { children: React.ReactNode }) {
   return <StyledPanel>{children}</StyledPanel>;
 }

front/src/modules/ui/layout/components/RightDrawerContainer.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 import { RightDrawer } from '@/ui/right-drawer/components/RightDrawer';
 
-import { Panel } from './Panel';
+import { PagePanel } from './PagePanel';
 
 type OwnProps = {
   children: JSX.Element | JSX.Element[];
@@ -37,7 +37,7 @@ export function RightDrawerContainer({ children, topMargin }: OwnProps) {
   return (
     <StyledMainContainer topMargin={topMargin ?? 0}>
       <StyledLeftContainer>
-        <Panel>{children}</Panel>
+        <PagePanel>{children}</PagePanel>
       </StyledLeftContainer>
       <RightDrawer />
     </StyledMainContainer>

front/src/modules/ui/layout/components/ShowPageContainer.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { useIsMobile } from '@/ui/hooks/useIsMobile';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 export const ShowPageContainer = styled.div`
   display: flex;

front/src/modules/ui/layout/components/SubMenuTopBarContainer.tsx

@@ -1,7 +1,8 @@
 import styled from '@emotion/styled';
 
-import { useIsMobile } from '../../hooks/useIsMobile';
-import { TopBar } from '../top-bar/components/TopBar';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+
+import { PageBar } from '../page-bar/components/PageBar';
 
 import { RightDrawerContainer } from './RightDrawerContainer';
 
@@ -23,7 +24,7 @@ export function SubMenuTopBarContainer({ children, title, icon }: OwnProps) {
 
   return (
     <StyledContainer isMobile={isMobile}>
-      {isMobile && <TopBar title={title} icon={icon} />}
+      {isMobile && <PageBar title={title} icon={icon} />}
       <RightDrawerContainer topMargin={16}>{children}</RightDrawerContainer>
     </StyledContainer>
   );

front/src/modules/ui/layout/components/WithTopBarContainer.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 
-import { TopBarHotkeys } from '../top-bar/components/TableTopBarHotkeys';
-import { TOP_BAR_MIN_HEIGHT, TopBar } from '../top-bar/components/TopBar';
+import { PAGE_BAR_MIN_HEIGHT, PageBar } from '../page-bar/components/PageBar';
+import { PageBarHotkeys } from '../page-bar/components/PageBarHotkeys';
 
 import { RightDrawerContainer } from './RightDrawerContainer';
 
@@ -29,14 +29,14 @@ export function WithTopBarContainer({
 }: OwnProps) {
   return (
     <StyledContainer>
-      <TopBarHotkeys onAddButtonClick={onAddButtonClick} />
-      <TopBar
+      <PageBarHotkeys onAddButtonClick={onAddButtonClick} />
+      <PageBar
         title={title}
         hasBackButton={hasBackButton}
         icon={icon}
         onAddButtonClick={onAddButtonClick}
       />
-      <RightDrawerContainer topMargin={TOP_BAR_MIN_HEIGHT + 16 + 16}>
+      <RightDrawerContainer topMargin={PAGE_BAR_MIN_HEIGHT + 16 + 16}>
         {children}
       </RightDrawerContainer>
     </StyledContainer>

front/src/modules/ui/layout/page-bar/components/PageBar.tsx

@@ -4,15 +4,15 @@ import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { IconButton } from '@/ui/button/components/IconButton';
-import { useIsMobile } from '@/ui/hooks/useIsMobile';
 import { IconChevronLeft, IconPlus } from '@/ui/icon/index';
 import NavCollapseButton from '@/ui/navbar/components/NavCollapseButton';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { navbarIconSize } from '../../../navbar/constants';
 import { OverflowingTextWithTooltip } from '../../../tooltip/OverflowingTextWithTooltip';
 import { isNavbarOpenedState } from '../../states/isNavbarOpenedState';
 
-export const TOP_BAR_MIN_HEIGHT = 40;
+export const PAGE_BAR_MIN_HEIGHT = 40;
 
 const TopBarContainer = styled.div`
   align-items: center;
@@ -22,7 +22,7 @@ const TopBarContainer = styled.div`
   flex-direction: row;
   font-size: ${({ theme }) => theme.font.size.lg};
   justify-content: space-between;
-  min-height: ${TOP_BAR_MIN_HEIGHT}px;
+  min-height: ${PAGE_BAR_MIN_HEIGHT}px;
   padding: ${({ theme }) => theme.spacing(2)};
   padding-left: 0;
   padding-right: ${({ theme }) => theme.spacing(3)};
@@ -65,7 +65,7 @@ type OwnProps = {
   onAddButtonClick?: () => void;
 };
 
-export function TopBar({
+export function PageBar({
   title,
   hasBackButton,
   icon,

front/src/modules/ui/layout/page-bar/components/PageBarHotkeys.tsx

@@ -1,11 +1,11 @@
-import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
 import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
 type OwnProps = {
   onAddButtonClick?: () => void;
 };
 
-export function TopBarHotkeys({ onAddButtonClick }: OwnProps) {
+export function PageBarHotkeys({ onAddButtonClick }: OwnProps) {
   useScopedHotkeys('c', () => onAddButtonClick?.(), TableHotkeyScope.Table, [
     onAddButtonClick,
   ]);

front/src/modules/ui/layout/page-bar/components/PageTitle.tsx

@@ -17,7 +17,7 @@ type OwnProps = {
   title: string;
 };
 
-export function TopTitle({ title }: OwnProps) {
+export function PageTitle({ title }: OwnProps) {
   return (
     <TitleAndCollapseContainer>
       <TitleContainer data-testid="top-bar-title">{title}</TitleContainer>

front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { useIsMobile } from '@/ui/hooks/useIsMobile';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 export const ShowPageLeftContainer = styled.div`
   background: ${({ theme }) => theme.background.secondary};

front/src/modules/ui/layout/states/isNavbarOpenedState.ts

@@ -1,6 +1,6 @@
 import { atom } from 'recoil';
 
-import { MOBILE_VIEWPORT } from '@/ui/themes/themes';
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
 
 const isMobile = window.innerWidth <= MOBILE_VIEWPORT;