diff --git a/front/package-lock.json b/front/package-lock.json
index afba0e57e0..9bb69a12c2 100644
--- a/front/package-lock.json
+++ b/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",
diff --git a/front/package.json b/front/package.json
index e8d046d88e..efb7958ff0 100644
--- a/front/package.json
+++ b/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"
]
},
diff --git a/front/src/pages/inbox/Inbox.tsx b/front/src/pages/inbox/Inbox.tsx
index 6d876e6816..e84334a1f8 100644
--- a/front/src/pages/inbox/Inbox.tsx
+++ b/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 (
-
+ <>
+
+
+
+ >
);
}
diff --git a/front/src/pages/inbox/PluginPanel.tsx b/front/src/pages/inbox/PluginPanel.tsx
deleted file mode 100644
index cf1752d894..0000000000
--- a/front/src/pages/inbox/PluginPanel.tsx
+++ /dev/null
@@ -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 (
-
- <>
-
- {tasks.map((item) => (
-
- ))}
- >
-
- );
-}
-
-export default ListPanel;
diff --git a/front/src/pages/inbox/discussion-panel/DiscussionPanel.tsx b/front/src/pages/inbox/discussion-panel/DiscussionPanel.tsx
new file mode 100644
index 0000000000..f5be950b59
--- /dev/null
+++ b/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 ;
+}
+
+export default DiscussionPanel;
diff --git a/front/src/pages/inbox/discussion-panel/composer/Composer.tsx b/front/src/pages/inbox/discussion-panel/composer/Composer.tsx
new file mode 100644
index 0000000000..410aedb894
--- /dev/null
+++ b/front/src/pages/inbox/discussion-panel/composer/Composer.tsx
@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+function Composer() {
+ return;
+}
+
+export default Composer;
diff --git a/front/src/pages/inbox/discussion-panel/composer/ComposerSwitch.tsx b/front/src/pages/inbox/discussion-panel/composer/ComposerSwitch.tsx
new file mode 100644
index 0000000000..401704285c
--- /dev/null
+++ b/front/src/pages/inbox/discussion-panel/composer/ComposerSwitch.tsx
@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+function ComposerSwitch() {
+ return;
+}
+
+export default ComposerSwitch;
diff --git a/front/src/pages/inbox/discussion-panel/events/Booking.tsx b/front/src/pages/inbox/discussion-panel/events/Booking.tsx
new file mode 100644
index 0000000000..43db278ef1
--- /dev/null
+++ b/front/src/pages/inbox/discussion-panel/events/Booking.tsx
@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+function Booking() {
+ return;
+}
+
+export default Booking;
diff --git a/front/src/pages/inbox/discussion-panel/events/Message.tsx b/front/src/pages/inbox/discussion-panel/events/Message.tsx
new file mode 100644
index 0000000000..6a131a5a6a
--- /dev/null
+++ b/front/src/pages/inbox/discussion-panel/events/Message.tsx
@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+function Message() {
+ return;
+}
+
+export default Message;
diff --git a/front/src/pages/inbox/discussion-panel/events/Note.tsx b/front/src/pages/inbox/discussion-panel/events/Note.tsx
new file mode 100644
index 0000000000..bd696ff778
--- /dev/null
+++ b/front/src/pages/inbox/discussion-panel/events/Note.tsx
@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+function Note() {
+ return;
+}
+
+export default Note;
diff --git a/front/src/pages/inbox/ListPanel.tsx b/front/src/pages/inbox/list-panel/ListPanel.tsx
similarity index 100%
rename from front/src/pages/inbox/ListPanel.tsx
rename to front/src/pages/inbox/list-panel/ListPanel.tsx
diff --git a/front/src/pages/inbox/ListPanelHeader.tsx b/front/src/pages/inbox/list-panel/ListPanelHeader.tsx
similarity index 100%
rename from front/src/pages/inbox/ListPanelHeader.tsx
rename to front/src/pages/inbox/list-panel/ListPanelHeader.tsx
diff --git a/front/src/pages/inbox/ListPanelItem.tsx b/front/src/pages/inbox/list-panel/ListPanelItem.tsx
similarity index 100%
rename from front/src/pages/inbox/ListPanelItem.tsx
rename to front/src/pages/inbox/list-panel/ListPanelItem.tsx
diff --git a/front/src/pages/inbox/__stories__/ListPanel.stories.tsx b/front/src/pages/inbox/list-panel/__stories__/ListPanel.stories.tsx
similarity index 100%
rename from front/src/pages/inbox/__stories__/ListPanel.stories.tsx
rename to front/src/pages/inbox/list-panel/__stories__/ListPanel.stories.tsx
diff --git a/front/src/pages/inbox/__stories__/ListPanelHeader.stories.tsx b/front/src/pages/inbox/list-panel/__stories__/ListPanelHeader.stories.tsx
similarity index 100%
rename from front/src/pages/inbox/__stories__/ListPanelHeader.stories.tsx
rename to front/src/pages/inbox/list-panel/__stories__/ListPanelHeader.stories.tsx
diff --git a/front/src/pages/inbox/__stories__/ListPanelItem.stories.tsx b/front/src/pages/inbox/list-panel/__stories__/ListPanelItem.stories.tsx
similarity index 100%
rename from front/src/pages/inbox/__stories__/ListPanelItem.stories.tsx
rename to front/src/pages/inbox/list-panel/__stories__/ListPanelItem.stories.tsx
diff --git a/front/src/pages/inbox/__tests__/ListPanel.test.tsx b/front/src/pages/inbox/list-panel/__tests__/ListPanel.test.tsx
similarity index 100%
rename from front/src/pages/inbox/__tests__/ListPanel.test.tsx
rename to front/src/pages/inbox/list-panel/__tests__/ListPanel.test.tsx
diff --git a/front/src/pages/inbox/__tests__/ListPanelHeader.test.tsx b/front/src/pages/inbox/list-panel/__tests__/ListPanelHeader.test.tsx
similarity index 100%
rename from front/src/pages/inbox/__tests__/ListPanelHeader.test.tsx
rename to front/src/pages/inbox/list-panel/__tests__/ListPanelHeader.test.tsx
diff --git a/front/src/pages/inbox/__tests__/ListPanelItem.test.tsx b/front/src/pages/inbox/list-panel/__tests__/ListPanelItem.test.tsx
similarity index 100%
rename from front/src/pages/inbox/__tests__/ListPanelItem.test.tsx
rename to front/src/pages/inbox/list-panel/__tests__/ListPanelItem.test.tsx
diff --git a/front/src/pages/inbox/plugin-panel/PluginPanel.tsx b/front/src/pages/inbox/plugin-panel/PluginPanel.tsx
new file mode 100644
index 0000000000..bf5acc7f10
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ );
+}
+
+export default PluginPanel;
diff --git a/front/src/pages/inbox/plugin-panel/PluginPanelNav.tsx b/front/src/pages/inbox/plugin-panel/PluginPanelNav.tsx
new file mode 100644
index 0000000000..296526d6fb
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default PluginPanelNav;
diff --git a/front/src/pages/inbox/plugin-panel/plugin-history/PanelHistory.tsx b/front/src/pages/inbox/plugin-panel/plugin-history/PanelHistory.tsx
new file mode 100644
index 0000000000..1d8bc01b4a
--- /dev/null
+++ b/front/src/pages/inbox/plugin-panel/plugin-history/PanelHistory.tsx
@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+function PluginHistory() {
+ return
;
+}
+
+export default PluginHistory;
diff --git a/front/src/pages/inbox/plugin-panel/plugin-history/UserActivity.tsx b/front/src/pages/inbox/plugin-panel/plugin-history/UserActivity.tsx
new file mode 100644
index 0000000000..5109fbf572
--- /dev/null
+++ b/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;
diff --git a/front/src/pages/inbox/plugin-panel/plugin-history/UserInformation.tsx b/front/src/pages/inbox/plugin-panel/plugin-history/UserInformation.tsx
new file mode 100644
index 0000000000..c060da8140
--- /dev/null
+++ b/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;