Better UX

* All buttons are in the same DOM container as the iframe
* Icons for buttons
* Rewriting the build process
* Simplier state management
* Buttons are hidden using CSS

package.json

@@ -30,6 +30,7 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.3.1",
+    "npm-run-all": "^4.1.5",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10"
   },
@@ -43,13 +44,18 @@
   ],
   "library": "./main.js",
   "scripts": {
+    "clean": "rm -rf dist/*",
     "prepare": "npm run build",
-    "build": "mkdir -p dist/conversejs && cp -r node_modules/converse.js/dist/* dist/conversejs/ && webpack --mode=production",
+    "build:converse": "mkdir -p dist/conversejs && cp -r node_modules/converse.js/dist/* dist/conversejs/",
+    "build:images": "mkdir -p dist/images && cp public/images/* dist/images/",
+    "build:webpack": "webpack --mode=production",
+    "build": "npm-run-all -s clean -p build:converse build:images build:webpack",
     "lint": "npx eslint --ext .js ."
   },
   "staticDirs": {
     "static": "dist/static",
-    "conversejs": "dist/conversejs/"
+    "conversejs": "dist/conversejs/",
+    "images": "dist/images/"
   },
   "translations": {
     "fr-FR": "./languages/fr.json"