feat: Display version in UI

Closes #153

client/.env

@@ -0,0 +1 @@
+REACT_APP_VERSION=1.10.0

client/src/components/UserSettingsModal/AboutPane.jsx

@@ -1,17 +1,22 @@
 import React from 'react';
-// import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { Image, Tab } from 'semantic-ui-react';
 
+import Config from '../../constants/Config';
+
 import logo from '../../assets/images/logo.png';
 
 import styles from './AboutPane.module.scss';
 
 const AboutPane = React.memo(() => {
-  // const [t] = useTranslation();
+  const [t] = useTranslation();
 
   return (
     <Tab.Pane attached={false} className={styles.wrapper}>
-      <Image centered src={logo} size="large" className={styles.logo} />
+      <Image centered src={logo} size="large" />
+      <div className={styles.version}>
+        {t('common.version')} {Config.VERSION}
+      </div>
     </Tab.Pane>
   );
 });

client/src/components/UserSettingsModal/AboutPane.module.scss

@@ -1,7 +1,8 @@
 :global(#app) {
-  /* .logo {
-    margin-bottom: 16px;
-  } */
+  .version {
+    font-weight: bold;
+    text-align: center;
+  }
 
   .wrapper {
     border: none;

client/src/constants/Config.js

@@ -1,3 +1,5 @@
+const VERSION = process.env.REACT_APP_VERSION;
+
 const { BASE_URL } = window;
 const BASE_PATH = BASE_URL.replace(/^.*\/\/[^/]*(.*)[^?#]*.*$/, '$1');
 
@@ -15,6 +17,7 @@ const POSITION_GAP = 65535;
 const ACTIVITIES_LIMIT = 50;
 
 export default {
+  VERSION,
   BASE_PATH,
   SERVER_BASE_URL,
   SERVER_HOST_NAME,

client/src/locales/en/core.js

@@ -155,6 +155,7 @@ export default {
       username: 'Username',
       usernameAlreadyInUse: 'Username already in use',
       users: 'Users',
+      version: 'Version',
       viewer: 'Viewer',
       writeComment: 'Write a comment...',
     },