Add Plugin Panel

front/package-lock.json

@@ -10,6 +10,10 @@
       "dependencies": {
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
+        "@fortawesome/fontawesome-svg-core": "^6.2.1",
+        "@fortawesome/free-regular-svg-icons": "^6.2.1",
+        "@fortawesome/free-solid-svg-icons": "^6.2.1",
+        "@fortawesome/react-fontawesome": "^0.2.0",
         "@types/node": "^16.18.4",
         "@types/react": "^18.0.25",
         "@types/react-dom": "^18.0.9",
@@ -2264,6 +2268,63 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz",
+      "integrity": "sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz",
+      "integrity": "sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.2.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.2.1.tgz",
+      "integrity": "sha512-wiqcNDNom75x+pe88FclpKz7aOSqS2lOivZeicMV5KRwOAeypxEYWAK/0v+7r+LrEY30+qzh8r2XDaEHvoLsMA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.2.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz",
+      "integrity": "sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.2.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -35640,6 +35701,43 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz",
+      "integrity": "sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz",
+      "integrity": "sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.2.1"
+      }
+    },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.2.1.tgz",
+      "integrity": "sha512-wiqcNDNom75x+pe88FclpKz7aOSqS2lOivZeicMV5KRwOAeypxEYWAK/0v+7r+LrEY30+qzh8r2XDaEHvoLsMA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.2.1"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz",
+      "integrity": "sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.2.1"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
     "@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",

front/package.json

@@ -5,6 +5,10 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-regular-svg-icons": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@types/node": "^16.18.4",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
@@ -43,7 +47,7 @@
     "react-refresh": "0.14.0"
   },
   "jest": {
-    "coveragePathIgnorePatterns" : [
+    "coveragePathIgnorePatterns": [
       "src/stories"
     ]
   },

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;