Add Plugin Panel

front/src/pages/inbox/Inbox.tsx

@@ -1,10 +1,16 @@
 import FullWidthContainer from '../../layout/containers/FullWidthContainer';
-import ListPanel from './ListPanel';
+import DiscussionPanel from './discussion-panel/DiscussionPanel';
+import ListPanel from './list-panel/ListPanel';
+import PluginPanel from './plugin-panel/PluginPanel';
 
 function Inbox() {
   return (
     <FullWidthContainer>
-      <ListPanel />
+      <>
+        <ListPanel />
+        <DiscussionPanel />
+        <PluginPanel />
+      </>
     </FullWidthContainer>
   );
 }

front/src/pages/inbox/PluginPanel.tsx

@@ -1,50 +0,0 @@
-import styled from '@emotion/styled';
-import ListPanelHeader from './ListPanelHeader';
-import ListPanelItem from './ListPanelItem';
-
-const StyledList = styled.div`
-  display: flex;
-  width: 325px;
-  flex-direction: column;
-  border-right: 2px solid #eaecee;
-`;
-
-export type Task = {
-  id: number;
-  targetUser: string;
-  label: string;
-  time: string;
-  lastMessage: string;
-};
-
-function ListPanel() {
-  const tasks: Task[] = [
-    {
-      id: 1,
-      targetUser: 'Sylvie Vartan',
-      label: 'Guest at #xxx property',
-      time: '3h',
-      lastMessage:
-        'I’m looking for my order but couldn’t find it. Could you help me find it. I don’t know where ...',
-    },
-    {
-      id: 2,
-      targetUser: 'Johnny Halliday',
-      label: 'Guest at #xxx property',
-      time: '4h',
-      lastMessage: 'Hello, this is Johnny',
-    },
-  ];
-  return (
-    <StyledList>
-      <>
-        <ListPanelHeader />
-        {tasks.map((item) => (
-          <ListPanelItem key={item.id} task={item} />
-        ))}
-      </>
-    </StyledList>
-  );
-}
-
-export default ListPanel;

front/src/pages/inbox/discussion-panel/DiscussionPanel.tsx

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+
+const StyledPanel = styled.div`
+  display: flex;
+  flex-grow: 1;
+`;
+
+function DiscussionPanel() {
+  return <StyledPanel></StyledPanel>;
+}
+
+export default DiscussionPanel;

front/src/pages/inbox/discussion-panel/composer/Composer.tsx

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+function Composer() {
+  return;
+}
+
+export default Composer;

front/src/pages/inbox/discussion-panel/composer/ComposerSwitch.tsx

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+function ComposerSwitch() {
+  return;
+}
+
+export default ComposerSwitch;

front/src/pages/inbox/discussion-panel/events/Booking.tsx

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+function Booking() {
+  return;
+}
+
+export default Booking;

front/src/pages/inbox/discussion-panel/events/Message.tsx

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+function Message() {
+  return;
+}
+
+export default Message;

front/src/pages/inbox/discussion-panel/events/Note.tsx

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+function Note() {
+  return;
+}
+
+export default Note;

front/src/pages/inbox/plugin-panel/PluginPanel.tsx

@@ -0,0 +1,27 @@
+import styled from '@emotion/styled';
+import PluginPanelNav from './PluginPanelNav';
+import PluginHistory from './plugin-history/PanelHistory';
+
+const StyledPanel = styled.div`
+  display: flex;
+  width: 350px;
+  border-left: 1px solid #eaecee;
+`;
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-grow: 1;
+`;
+
+function PluginPanel() {
+  return (
+    <StyledPanel>
+      <StyledContainer>
+        <PluginHistory />
+      </StyledContainer>
+      <PluginPanelNav />
+    </StyledPanel>
+  );
+}
+
+export default PluginPanel;

front/src/pages/inbox/plugin-panel/PluginPanelNav.tsx

@@ -0,0 +1,46 @@
+import styled from '@emotion/styled';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faClone } from '@fortawesome/free-regular-svg-icons';
+
+const StyledNav = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 60px;
+  border-left: 1px solid #eaecee;
+  background: #f1f3f5;
+`;
+
+const StyledNavItem = styled.div`
+  display: flex;
+  width: 60px;
+  border-bottom: 1px solid #eaecee;
+  padding: 22px;
+  cursor: pointer;
+`;
+
+function PluginPanelNav() {
+  return (
+    <StyledNav>
+      <StyledNavItem>
+        <FontAwesomeIcon icon={faClone} size="lg" />
+      </StyledNavItem>
+      <StyledNavItem>
+        <FontAwesomeIcon icon={faClone} size="lg" />
+      </StyledNavItem>
+      <StyledNavItem>
+        <FontAwesomeIcon icon={faClone} size="lg" />
+      </StyledNavItem>
+      <StyledNavItem>
+        <FontAwesomeIcon icon={faClone} size="lg" />
+      </StyledNavItem>
+      <StyledNavItem>
+        <FontAwesomeIcon icon={faClone} size="lg" />
+      </StyledNavItem>
+      <StyledNavItem>
+        <FontAwesomeIcon icon={faClone} size="lg" />
+      </StyledNavItem>
+    </StyledNav>
+  );
+}
+
+export default PluginPanelNav;

front/src/pages/inbox/plugin-panel/plugin-history/PanelHistory.tsx

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+function PluginHistory() {
+  return <div></div>;
+}
+
+export default PluginHistory;

front/src/pages/inbox/plugin-panel/plugin-history/UserActivity.tsx

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+function UserActivity() {
+  return;
+}
+
+export default UserActivity;

front/src/pages/inbox/plugin-panel/plugin-history/UserInformation.tsx

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+function UserInformation() {
+  return;
+}
+
+export default UserInformation;