Add manifest.json, icons and install button, flatten client/src

client/css/style.css

@@ -723,6 +723,7 @@ input.message-input-nick.invalid {
 .settings {
   flex: 1;
   max-width: 692px;
+  text-align: center;
 }
 
 .settings-section {
@@ -730,6 +731,7 @@ input.message-input-nick.invalid {
   padding: 15px;
   margin: 0 20px;
   margin-bottom: 20px;
+  text-align: left;
 }
 
 .settings .checkbox {
@@ -773,6 +775,17 @@ input.message-input-nick.invalid {
   margin-right: 10px;
 }
 
+.button-install {
+  padding: 0 15px;
+  width: auto !important;
+  margin: 20px;
+  margin-top: 0;
+}
+
+.button-install h2 {
+  color: #fff;
+}
+
 @media (max-width: 906px) {
   .settings-file {
     display: block;
@@ -867,4 +880,8 @@ input.message-input-nick.invalid {
   .settings-section {
     margin-left: 50px;
   }
+
+  .button-install {
+    margin-left: 50px;
+  }
 }

client/gulpfile.js

@@ -60,19 +60,19 @@ function config() {
   return gulp.src('../config.default.toml').pipe(gulp.dest('dist'));
 }
 
-function fonts() {
-  return gulp.src('src/font/*(*.woff|*.woff2)').pipe(gulp.dest('dist/font'));
+function public() {
+  return gulp.src('public/**/*').pipe(gulp.dest('dist'));
 }
 
 function compress() {
   return gulp
-    .src(['dist/**/!(*.dev.js|*.map|*.toml|*.json|*.woff|*.woff2)'])
+    .src(['dist/**/*(*.js|*.css|*.json)', '!dist/**/*(*.dev.js)'])
     .pipe(brotli({ quality: 11 }))
     .pipe(gulp.dest('dist'));
 }
 
 function cleanup() {
-  return del(['dist/**/*(*.js|*.css|*.map)']);
+  return del(['dist/**/*(*.js|*.css|*.json|*.map)']);
 }
 
 function bindata(cb) {
@@ -120,13 +120,13 @@ function serve() {
   });
 }
 
-const assets = gulp.parallel(js, config, fonts);
+const assets = gulp.parallel(js, config, public);
 
 const build = gulp.series(clean, assets, compress, cleanup, bindata);
 
 const dev = gulp.series(
   clean,
-  gulp.parallel(serve, fonts, gulp.series(config, bindata))
+  gulp.parallel(serve, public, gulp.series(config, bindata))
 );
 
 gulp.task('build', build);

client/js/components/pages/Settings.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import Navicon from 'containers/Navicon';
 import Button from 'components/ui/Button';
 import Checkbox from 'components/ui/Checkbox';
@@ -6,19 +6,35 @@ import FileInput from 'components/ui/FileInput';
 
 const Settings = ({
   settings,
+  installable,
   setSetting,
   onCertChange,
   onKeyChange,
+  onInstall,
   uploadCert
 }) => {
   const status = settings.uploadingCert ? 'Uploading...' : 'Upload';
   const error = settings.certError;
 
+  const handleInstallClick = useCallback(
+    async () => {
+      installable.prompt();
+      await installable.userChoice;
+      onInstall();
+    },
+    [installable]
+  );
+
   return (
     <div className="settings-container">
       <div className="settings">
         <Navicon />
         <h1>Settings</h1>
+        {installable && (
+          <Button className="button-install" onClick={handleInstallClick}>
+            <h2>Install</h2>
+          </Button>
+        )}
         <div className="settings-section">
           <h2>Visuals</h2>
           <Checkbox

client/js/containers/Settings.js

@@ -1,5 +1,6 @@
 import { createStructuredSelector } from 'reselect';
 import Settings from 'components/pages/Settings';
+import { appSet } from 'state/app';
 import {
   getSettings,
   setSetting,
@@ -10,14 +11,16 @@ import {
 import connect from 'utils/connect';
 
 const mapState = createStructuredSelector({
-  settings: getSettings
+  settings: getSettings,
+  installable: state => state.app.installable
 });
 
 const mapDispatch = {
   onCertChange: setCert,
   onKeyChange: setKey,
   uploadCert,
-  setSetting
+  setSetting,
+  onInstall: () => appSet('installable', null)
 };
 
 export default connect(

client/js/index.js

@@ -25,6 +25,11 @@ runModules({ store, socket });
 
 createRoot(document.getElementById('root')).render(<Root store={store} />);
 
+window.addEventListener('beforeinstallprompt', e => {
+  e.preventDefault();
+  store.dispatch(appSet('installable', e));
+});
+
 register({
   onUpdate: () => store.dispatch(appSet('newVersionAvailable', true))
 });

client/js/state/app.js

@@ -23,7 +23,8 @@ const initialState = {
     showDetails: false
   },
   hexIP: false,
-  newVersionAvailable: false
+  newVersionAvailable: false,
+  installable: null
 };
 
 export default createReducer(initialState, {

client/package.json

@@ -54,7 +54,6 @@
     "webpack": "^4.25.1",
     "webpack-dev-middleware": "^3.4.0",
     "webpack-hot-middleware": "^2.24.3",
-    "webpack-manifest-plugin": "^2.0.4",
     "workbox-webpack-plugin": "^3.6.3"
   },
   "dependencies": {
@@ -92,10 +91,10 @@
   },
   "jest": {
     "moduleNameMapper": {
-      "^components(.*)$": "<rootDir>/src/js/components$1",
-      "^containers(.*)$": "<rootDir>/src/js/containers$1",
-      "^state(.*)$": "<rootDir>/src/js/state$1",
-      "^utils(.*)$": "<rootDir>/src/js/utils$1"
+      "^components(.*)$": "<rootDir>/js/components$1",
+      "^containers(.*)$": "<rootDir>/js/containers$1",
+      "^state(.*)$": "<rootDir>/js/state$1",
+      "^utils(.*)$": "<rootDir>/js/utils$1"
     }
   }
 }

client/public/manifest.json

@@ -0,0 +1,21 @@
+{
+  "short_name": "Dispatch",
+  "name": "Dispatch",
+  "icons": [
+    {
+      "src": "icon_192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "icon_512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "/",
+  "background_color": "#f0f0f0",
+  "display": "standalone",
+  "scope": "/",
+  "theme_color": "#f0f0f0"
+}

client/webpack.config.dev.js

@@ -4,17 +4,17 @@ var postcssPresetEnv = require('postcss-preset-env');
 
 module.exports = {
   mode: 'development',
-  entry: ['webpack-hot-middleware/client', './src/js/index'],
+  entry: ['webpack-hot-middleware/client', './js/index'],
   output: {
     filename: 'bundle.js',
     publicPath: '/'
   },
   resolve: {
     alias: {
-      components: path.resolve(__dirname, 'src/js/components'),
-      containers: path.resolve(__dirname, 'src/js/containers'),
-      state: path.resolve(__dirname, 'src/js/state'),
-      utils: path.resolve(__dirname, 'src/js/utils')
+      components: path.resolve(__dirname, 'js/components'),
+      containers: path.resolve(__dirname, 'js/containers'),
+      state: path.resolve(__dirname, 'js/state'),
+      utils: path.resolve(__dirname, 'js/utils')
     }
   },
   module: {