initial commit

src/app/templates/client/Client.jsx

@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react';
+import './Client.scss';
+
+import Text from '../../atoms/text/Text';
+import Spinner from '../../atoms/spinner/Spinner';
+import Navigation from '../../organisms/navigation/Navigation';
+import Channel from '../../organisms/channel/Channel';
+import Windows from '../../organisms/pw/Windows';
+
+import initMatrix from '../../../client/initMatrix';
+
+function Client() {
+  const [isLoading, changeLoading] = useState(true);
+
+  useEffect(() => {
+    initMatrix.once('init_loading_finished', () => {
+      changeLoading(false);
+    });
+    initMatrix.init();
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className="loading-display">
+        <Spinner />
+        <Text className="loading__message" variant="b2">Heating up</Text>
+
+        <div className="loading__appname">
+          <Text variant="h2">Cinny</Text>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="client-container">
+      <div className="navigation__wrapper">
+        <Navigation />
+      </div>
+      <div className="channel__wrapper">
+        <Channel />
+      </div>
+      <Windows />
+    </div>
+  );
+}
+
+export default Client;

src/app/templates/client/Client.scss

@@ -0,0 +1,34 @@
+.client-container {
+  display: flex;
+  height: 100%;
+}
+
+.navigation__wrapper {
+  width: var(--navigation-width);
+}
+.channel__wrapper {
+  flex: 1;
+  min-width: 0;
+  background-color: var(--bg-surface);
+}
+
+
+.loading-display {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.loading__message {
+  margin-top: var(--sp-normal);
+}
+.loading__appname {
+  position: absolute;
+  bottom: var(--sp-normal);
+}