attempt implementing prerendering

* Provide window.jquery to modules in vue.config.js

* Fix curly-spacing lint error

.babelrc

@@ -1,12 +1,12 @@
 {
-  "presets": [
+    "presets": [
-    [
+      [
-      "@babel/preset-env",
+        "@babel/preset-env",
-      {
+        {
-        "targets": {
+          "targets": {
-          "node": true
+            "node": true
+          }
         }
-      }
+      ]
     ]
-  ]
+  }
-}

.gitignore

@@ -47,5 +47,5 @@ webpack.webstorm.config
 
 # mongodb replica set for local dev
 mongodb-*.tgz
-/mongodb-data
+/mongodb-data*
 /.nyc_output

gulp/gulp-start.js

@@ -1,11 +0,0 @@
-import gulp from 'gulp';
-import nodemon from 'gulp-nodemon';
-
-import pkg from '../package.json';
-
-gulp.task('nodemon', done => {
-  nodemon({
-    script: pkg.main,
-  });
-  done();
-});

gulp/gulp-tests.js

@@ -49,12 +49,6 @@ function integrationTestCommand (testDir) {
 }
 
 /* Test task definitions */
-gulp.task('test:nodemon', gulp.series(done => {
-  process.env.PORT = TEST_SERVER_PORT; // eslint-disable-line no-process-env
-  process.env.NODE_DB_URI = TEST_DB_URI; // eslint-disable-line no-process-env
-  done();
-}, 'nodemon'));
-
 gulp.task('test:prepare:mongo', cb => {
   const mongooseOptions = getDefaultConnectionOptions();
   const connectionUrl = getDevelopmentConnectionUrl(TEST_DB_URI);

gulpfile.js

@@ -21,7 +21,6 @@ if (process.env.NODE_ENV === 'production') { // eslint-disable-line no-process-e
   require('./gulp/gulp-build'); // eslint-disable-line global-require
   require('./gulp/gulp-console'); // eslint-disable-line global-require
   require('./gulp/gulp-sprites'); // eslint-disable-line global-require
-  require('./gulp/gulp-start'); // eslint-disable-line global-require
   require('./gulp/gulp-tests'); // eslint-disable-line global-require
   require('./gulp/gulp-transifex-test'); // eslint-disable-line global-require
   require('gulp').task('default', gulp.series('test')); // eslint-disable-line global-require

migrations/archive/api_v3/groups.js

@@ -37,7 +37,7 @@ let consoleStamp = require('console-stamp');
 consoleStamp(console);
 
 // Initialize configuration
-require('../../website/server/libs/api-v3/setupNconf')();
+require('../../website/server/libs/api-v3/setupNconf').default();
 
 let MONGODB_OLD = nconf.get('MONGODB_OLD');
 let MONGODB_NEW = nconf.get('MONGODB_NEW');

migrations/archive/api_v3/users.js

@@ -32,7 +32,7 @@ let moment = require('moment');
 consoleStamp(console);
 
 // Initialize configuration
-require('../../website/server/libs/api-v3/setupNconf')();
+require('../../website/server/libs/api-v3/setupNconf').default();
 
 let MONGODB_OLD = nconf.get('MONGODB_OLD');
 let MONGODB_NEW = nconf.get('MONGODB_NEW');

migrations/migration-runner.js

@@ -6,7 +6,7 @@ require('@babel/register'); // eslint-disable-line import/no-extraneous-dependen
 function setUpServer () {
   const nconf = require('nconf'); // eslint-disable-line global-require, no-unused-vars
   const mongoose = require('mongoose'); // eslint-disable-line global-require, no-unused-vars
-  const setupNconf = require('../website/server/libs/setupNconf'); // eslint-disable-line global-require
+  const setupNconf = require('../website/server/libs/setupNconf').default; // eslint-disable-line global-require
 
   setupNconf();
 

package-lock.json

@@ -43,7 +43,6 @@
         "gulp-babel": "^8.0.0",
         "gulp-filter": "^7.0.0",
         "gulp-imagemin": "^7.1.0",
-        "gulp-nodemon": "^2.5.0",
         "gulp.spritesmith": "^6.13.0",
         "habitica-markdown": "^3.0.0",
         "helmet": "^4.6.0",
@@ -55,12 +54,12 @@
         "merge-stream": "^2.0.0",
         "method-override": "^3.0.0",
         "moment": "^2.29.4",
-        "moment-recur": "^1.0.7",
+        "moment-recur": "git://github.com/HabitRPG/moment-recur.git#d3e8e6da0806f13b74dd2e4d7d9053e6a63db119",
         "mongoose": "^7.8.3",
         "morgan": "^1.10.0",
         "nconf": "^0.12.1",
         "node-gcm": "^1.0.5",
-        "nodemon": "^2.0.20",
+        "nodemon": "^3.1.9",
         "on-headers": "^1.0.2",
         "passport": "^0.5.3",
         "passport-facebook": "^3.0.0",
@@ -151,14 +150,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/@babel/code-frame/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/@babel/code-frame/node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -542,14 +533,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/@babel/highlight/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/@babel/highlight/node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -4169,6 +4152,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/apidoc/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
     "node_modules/apidoc/node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -4199,6 +4190,41 @@
         "node": ">=10"
       }
     },
+    "node_modules/apidoc/node_modules/nodemon": {
+      "version": "2.0.22",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.22.tgz",
+      "integrity": "sha512-B8YqaKMmyuCO7BowF1Z1/mkPqLk6cs/l63Ojtd6otKjMx47Dq1utxfRxcavH1I7VSaL8n5BUaoutadnsX3AAVQ==",
+      "dependencies": {
+        "chokidar": "^3.5.2",
+        "debug": "^3.2.7",
+        "ignore-by-default": "^1.0.1",
+        "minimatch": "^3.1.2",
+        "pstree.remy": "^1.1.8",
+        "semver": "^5.7.1",
+        "simple-update-notifier": "^1.0.7",
+        "supports-color": "^5.5.0",
+        "touch": "^3.1.0",
+        "undefsafe": "^2.0.5"
+      },
+      "bin": {
+        "nodemon": "bin/nodemon.js"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nodemon"
+      }
+    },
+    "node_modules/apidoc/node_modules/nodemon/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
     "node_modules/apidoc/node_modules/semver": {
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
@@ -4213,6 +4239,36 @@
         "node": ">=10"
       }
     },
+    "node_modules/apidoc/node_modules/simple-update-notifier": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz",
+      "integrity": "sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==",
+      "dependencies": {
+        "semver": "~7.0.0"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/apidoc/node_modules/simple-update-notifier/node_modules/semver": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
+      "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/apidoc/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/apidoc/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -7012,15 +7068,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/coa/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "optional": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/coa/node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -7114,6 +7161,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
       "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
+      "dev": true,
       "engines": {
         "node": ">=0.1.90"
       }
@@ -8992,14 +9040,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint-config-habitrpg/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/eslint-config-habitrpg/node_modules/ignore": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
@@ -12299,16 +12339,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/gulp-nodemon": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/gulp-nodemon/-/gulp-nodemon-2.5.0.tgz",
-      "integrity": "sha512-vXfaP72xo2C6XOaXrNcLEM3QqDJ1x21S3x97U4YtzN2Rl2kH57++aFkAVxe6BafGRSTxs/xVfE/jNNlCv5Ym2Q==",
-      "dependencies": {
-        "colors": "^1.2.1",
-        "gulp": "^4.0.0",
-        "nodemon": "^2.0.2"
-      }
-    },
     "node_modules/gulp.spritesmith": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/gulp.spritesmith/-/gulp.spritesmith-6.13.0.tgz",
@@ -12541,6 +12571,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/has-property-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
@@ -15356,15 +15394,6 @@
         "node": "*"
       }
     },
-    "node_modules/mocha/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/mocha/node_modules/minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -15428,9 +15457,10 @@
       }
     },
     "node_modules/moment-recur": {
-      "version": "1.0.7",
+      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/moment-recur/-/moment-recur-1.0.7.tgz",
+      "resolved": "git+ssh://git@github.com/HabitRPG/moment-recur.git#d3e8e6da0806f13b74dd2e4d7d9053e6a63db119",
-      "integrity": "sha512-jpBQn6H62gCnEYjtYdLfK/VdPZHEXo1t8RrVItHVVS67SRvByyJBNBa3WQSGTe+8H0smcYO/79FYTA9LGMVdQw==",
+      "integrity": "sha512-LaqXV3izeVQjG0EKAEQQWdneMiff5JR6oBKcfgl0uFOTeaFzLKG62psk7r2VE7RTBdhYigt6KNaLZR7GdWPEIA==",
+      "license": "Unlicense",
       "dependencies": {
         "moment": "<3.0.0"
       }
@@ -16216,17 +16246,17 @@
       "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
     },
     "node_modules/nodemon": {
-      "version": "2.0.22",
+      "version": "3.1.9",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.22.tgz",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.9.tgz",
-      "integrity": "sha512-B8YqaKMmyuCO7BowF1Z1/mkPqLk6cs/l63Ojtd6otKjMx47Dq1utxfRxcavH1I7VSaL8n5BUaoutadnsX3AAVQ==",
+      "integrity": "sha512-hdr1oIb2p6ZSxu3PB2JWWYS7ZQ0qvaZsc3hK8DR8f02kRzc8rjYmxAIvdz+aYC+8F2IjNaB7HMcSDg8nQpJxyg==",
       "dependencies": {
         "chokidar": "^3.5.2",
-        "debug": "^3.2.7",
+        "debug": "^4",
         "ignore-by-default": "^1.0.1",
         "minimatch": "^3.1.2",
         "pstree.remy": "^1.1.8",
-        "semver": "^5.7.1",
+        "semver": "^7.5.3",
-        "simple-update-notifier": "^1.0.7",
+        "simple-update-notifier": "^2.0.0",
         "supports-color": "^5.5.0",
         "touch": "^3.1.0",
         "undefsafe": "^2.0.5"
@@ -16235,35 +16265,22 @@
         "nodemon": "bin/nodemon.js"
       },
       "engines": {
-        "node": ">=8.10.0"
+        "node": ">=10"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/nodemon"
       }
     },
-    "node_modules/nodemon/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
-    "node_modules/nodemon/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/nodemon/node_modules/semver": {
-      "version": "5.7.2",
+      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.0.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "integrity": "sha512-DrfFnPzblFmNrIZzg5RzHegbiRWg7KMR7btwi2yjHwx06zsUbO5g613sVwEV7FTwmzJu+Io0lJe2GJ3LxqpvBQ==",
       "bin": {
-        "semver": "bin/semver"
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/nodemon/node_modules/supports-color": {
@@ -19116,15 +19133,6 @@
       "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==",
       "dev": true
     },
-    "node_modules/run-rs/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/run-rs/node_modules/mongodb": {
       "version": "3.6.12",
       "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.6.12.tgz",
@@ -19648,22 +19656,25 @@
       }
     },
     "node_modules/simple-update-notifier": {
-      "version": "1.1.0",
+      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
-      "integrity": "sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
       "dependencies": {
-        "semver": "~7.0.0"
+        "semver": "^7.5.3"
       },
       "engines": {
-        "node": ">=8.10.0"
+        "node": ">=10"
       }
     },
     "node_modules/simple-update-notifier/node_modules/semver": {
-      "version": "7.0.0",
+      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.0.tgz",
-      "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
+      "integrity": "sha512-DrfFnPzblFmNrIZzg5RzHegbiRWg7KMR7btwi2yjHwx06zsUbO5g613sVwEV7FTwmzJu+Io0lJe2GJ3LxqpvBQ==",
       "bin": {
         "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/sinon": {
@@ -20715,15 +20726,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/svgo/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "optional": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/svgo/node_modules/sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",

package.json

@@ -38,7 +38,6 @@
     "gulp-babel": "^8.0.0",
     "gulp-filter": "^7.0.0",
     "gulp-imagemin": "^7.1.0",
-    "gulp-nodemon": "^2.5.0",
     "gulp.spritesmith": "^6.13.0",
     "habitica-markdown": "^3.0.0",
     "helmet": "^4.6.0",
@@ -50,12 +49,12 @@
     "merge-stream": "^2.0.0",
     "method-override": "^3.0.0",
     "moment": "^2.29.4",
-    "moment-recur": "^1.0.7",
+    "moment-recur": "git://github.com/HabitRPG/moment-recur.git#d3e8e6da0806f13b74dd2e4d7d9053e6a63db119",
     "mongoose": "^7.8.3",
     "morgan": "^1.10.0",
     "nconf": "^0.12.1",
     "node-gcm": "^1.0.5",
-    "nodemon": "^2.0.20",
+    "nodemon": "^3.1.9",
     "on-headers": "^1.0.2",
     "passport": "^0.5.3",
     "passport-facebook": "^3.0.0",
@@ -100,16 +99,16 @@
     "test:sanity": "nyc --silent --no-clean mocha test/sanity --recursive",
     "test:common": "nyc --silent --no-clean mocha test/common --recursive",
     "test:content": "nyc --silent --no-clean mocha test/content --recursive",
-    "test:nodemon": "gulp test:nodemon",
     "coverage": "nyc report --reporter=html --report-dir coverage/results; open coverage/results/index.html",
     "sprites": "gulp sprites:compile",
     "client:dev": "cd website/client && npm run serve",
     "client:build": "cd website/client && npm run build",
     "client:unit": "cd website/client && npm run test:unit",
-    "start": "gulp nodemon",
+    "start": "node --watch ./website/server/index.js",
     "start:simple": "node ./website/server/index.js",
-    "debug": "gulp nodemon --inspect",
+    "debug": "node --watch --inspect ./website/server/index.js",
     "mongo:dev": "run-rs -v 5.0.23 -l ubuntu1804 --keep --dbpath mongodb-data --number 1 --quiet",
+    "mongo:test": "run-rs -v 5.0.23 -l ubuntu1804 --keep --dbpath mongodb-data-testing --number 1 --quiet",
     "postinstall": "git config --global url.\"https://\".insteadOf git:// && gulp build && cd website/client && npm install",
     "apidoc": "gulp apidoc",
     "heroku-postbuild": ".heroku/report_deploy.sh"

test/api/v3/integration/members/GET-members_username.test.js

@@ -0,0 +1,56 @@
+import {
+  generateUser,
+  translate as t,
+} from '../../../../helpers/api-integration/v3';
+import common from '../../../../../website/common';
+
+describe('GET /members/username/:username', () => {
+  let user;
+
+  before(async () => {
+    user = await generateUser();
+  });
+
+  it('validates req.params.username', async () => {
+    await expect(user.get('/members/username/')).to.eventually.be.rejected.and.eql({
+      code: 400,
+      error: 'BadRequest',
+      message: t('invalidReqParams'),
+    });
+  });
+
+  it('returns a member public data only', async () => {
+    // make sure user has all the fields that can be returned by the getMember call
+    const member = await generateUser({
+      contributor: { level: 1 },
+      backer: { tier: 3 },
+      preferences: {
+        costume: false,
+        background: 'volcano',
+      },
+      secret: {
+        text: 'Clark Kent',
+      },
+    });
+    const memberRes = await user.get(`/members/username/${member.auth.local.username}`);
+    expect(memberRes).to.have.all.keys([ // works as: object has all and only these keys
+      '_id', 'id', 'preferences', 'profile', 'stats', 'achievements', 'party',
+      'backer', 'contributor', 'auth', 'items', 'inbox', 'loginIncentives', 'flags',
+    ]);
+    expect(Object.keys(memberRes.auth)).to.eql(['local', 'timestamps']);
+    expect(Object.keys(memberRes.preferences).sort()).to.eql([
+      'size', 'hair', 'skin', 'shirt',
+      'chair', 'costume', 'sleep', 'background', 'tasks', 'disableClasses',
+    ].sort());
+
+    expect(memberRes.stats.maxMP).to.exist;
+    expect(memberRes.stats.maxHealth).to.equal(common.maxHealth);
+    expect(memberRes.stats.toNextLevel).to.equal(common.tnl(memberRes.stats.lvl));
+    expect(memberRes.inbox.optOut).to.exist;
+    expect(memberRes.inbox.canReceive).to.exist;
+    expect(memberRes.inbox.messages).to.not.exist;
+    expect(memberRes.secret).to.not.exist;
+
+    expect(memberRes.blocks).to.not.exist;
+  });
+});

test/api/v4/inbox/POST-inbox_message_like.test.js

@@ -0,0 +1,104 @@
+import find from 'lodash/find';
+import {
+  generateUser,
+  translate as t,
+} from '../../../helpers/api-integration/v4';
+
+/**
+ * Checks the messages array if the uniqueMessageId has the like flag
+ * @param {InboxMessage[]} messages
+ * @param {String} uniqueMessageId
+ * @param {String} userId
+ * @param {Boolean} likeStatus
+ */
+function expectMessagesLikeStatus (messages, uniqueMessageId, userId, likeStatus) {
+  const messageToCheck = find(messages, { uniqueMessageId });
+
+  expect(messageToCheck.likes[userId]).to.equal(likeStatus);
+}
+
+// eslint-disable-next-line mocha/no-exclusive-tests
+describe('POST /inbox/like-private-message/:messageId', () => {
+  let userToSendMessage;
+  const getLikeUrl = messageId => `/inbox/like-private-message/${messageId}`;
+
+  before(async () => {
+    userToSendMessage = await generateUser();
+  });
+
+  it('Returns an error when private message is not found', async () => {
+    await expect(userToSendMessage.post(getLikeUrl('some-unknown-id')))
+      .to.eventually.be.rejected.and.eql({
+        code: 404,
+        error: 'NotFound',
+        message: t('messageGroupChatNotFound'),
+      });
+  });
+
+  it('Likes a message', async () => {
+    const receiver = await generateUser();
+
+    const sentMessageResult = await userToSendMessage.post('/members/send-private-message', {
+      message: 'some message :)',
+      toUserId: receiver._id,
+    });
+
+    const { uniqueMessageId } = sentMessageResult.message;
+
+    const likeResult = await receiver.post(getLikeUrl(uniqueMessageId));
+    expect(likeResult.likes[receiver._id]).to.equal(true);
+
+    const senderMessages = await userToSendMessage.get('/inbox/messages');
+
+    expectMessagesLikeStatus(senderMessages, uniqueMessageId, receiver._id, true);
+
+    const receiversMessages = await receiver.get('/inbox/messages');
+
+    expectMessagesLikeStatus(receiversMessages, uniqueMessageId, receiver._id, true);
+  });
+
+  it('Allows to likes their own private message', async () => {
+    const receiver = await generateUser();
+
+    const sentMessageResult = await userToSendMessage.post('/members/send-private-message', {
+      message: 'some message :)',
+      toUserId: receiver._id,
+    });
+
+    const { uniqueMessageId } = sentMessageResult.message;
+
+    const likeResult = await userToSendMessage.post(getLikeUrl(uniqueMessageId));
+    expect(likeResult.likes[userToSendMessage._id]).to.equal(true);
+
+    const messages = await userToSendMessage.get('/inbox/messages');
+    expectMessagesLikeStatus(messages, uniqueMessageId, userToSendMessage._id, true);
+
+    const receiversMessages = await receiver.get('/inbox/messages');
+
+    expectMessagesLikeStatus(receiversMessages, uniqueMessageId, userToSendMessage._id, true);
+  });
+
+  it('Unlikes a message', async () => {
+    const receiver = await generateUser();
+
+    const sentMessageResult = await userToSendMessage.post('/members/send-private-message', {
+      message: 'some message :)',
+      toUserId: receiver._id,
+    });
+
+    const { uniqueMessageId } = sentMessageResult.message;
+
+    const likeResult = await receiver.post(getLikeUrl(uniqueMessageId));
+
+    expect(likeResult.likes[receiver._id]).to.equal(true);
+
+    const unlikeResult = await receiver.post(getLikeUrl(uniqueMessageId));
+
+    expect(unlikeResult.likes[receiver._id]).to.equal(false);
+
+    const messages = await userToSendMessage.get('/inbox/messages');
+
+    const messageToCheck = find(messages, { id: sentMessageResult.message.id });
+    expect(messageToCheck.likes[receiver._id]).to.equal(false);
+  });
+});

test/helpers/globals.helper.js

@@ -19,6 +19,6 @@ const sinonStubPromise = require('sinon-stub-promise');
 sinonStubPromise(global.sinon);
 global.sandbox = sinon.createSandbox();
 
-const setupNconf = require('../../website/server/libs/setupNconf');
+const setupNconf = require('../../website/server/libs/setupNconf').default;
 
 setupNconf('./config.json.example');

test/helpers/start-server.js

@@ -3,7 +3,7 @@
 
 const nconf = require('nconf');
 const mongoose = require('mongoose');
-const setupNconf = require('../../website/server/libs/setupNconf');
+const setupNconf = require('../../website/server/libs/setupNconf').default;
 
 // fix further imports of require/import syntaxes
 require('@babel/register');

website/client/.eslintrc.js

@@ -3,11 +3,12 @@ module.exports = {
   root: true,
   env: {
     node: true,
+    es2021: true,
   },
   extends: [
     'habitrpg/lib/vue',
   ],
-  ignorePatterns: ['dist/', 'node_modules/'],
+  ignorePatterns: ['dist/', 'node_modules/', '*.d.ts'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
@@ -39,7 +40,4 @@ module.exports = {
       order: ['template', 'style', 'script'],
     }],
   },
-  parserOptions: {
-    parser: 'babel-eslint',
-  },
 };

website/client/babel.config.js

@@ -1,9 +0,0 @@
-/* eslint-disable import/no-commonjs */
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset',
-  ],
-  plugins: [
-    '@babel/plugin-proposal-optional-chaining',
-  ],
-};

website/client/index-static.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Habitica - Gamify Your Life</title>
+    <meta name="description" content="Habitica is a free habit and productivity app that treats your real life like a game. Habitica can help you achieve your goals to become healthy and happy.">
+    <meta name="keywords" content="Habits,Goals,Todo,Gamification,Health,Fitness,School,Work">
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i|Roboto:400,400i,700,700i" rel="stylesheet">
+    <link rel="shortcut icon" sizes="48x48" href="/static/icons/favicon.ico">
+    <link rel="shortcut icon" sizes="192x192" href="/static/icons/favicon_192x192.png">
+    <link rel="mask-icon" href="/static/icons/favicon.ico">
+    <meta property="og:image" content="/static/emails/images/meta-image.png" />
+    <script type="module" src="/src/main-static.js"></script>
+  </head>
+  <body>
+    <div id="loading-screen">
+      <svg width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
+        <path
+        xmlns="http://www.w3.org/2000/svg"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M79.05 72.15c-.8-1.766-2.643-2.62-3.845-1.766-1.201.855-2.867.985-4.448.602-1.584-.385-1.885-4.01-1.543-8.195.342-4.184.909-5.795 1.267-7.314.404-1.524 2.191-1.404 2.405-.209.215 1.196 1.454 1.196 3.266-.979 1.811-2.175 1.543-8.52-.546-13.684-2.088-5.163.817-4.661 1.66-4.149.844.513 1.362-.255 1.156-3.2-.204-2.945-2.916-5.247-5.096-6.657-2.184-1.41-4.842-2.967-4.78-6.745.063-3.777 5.2-3.658 5.897-3.596.697.063 2.037-.233 1.264-4.157-.773-3.924-3.575-4.673-5.332-4.567-1.758.106-2.943 1.071-5.427.133-2.484-.938-4.136-.572-6.45-.057-2.313.515-5.343 1.94-9.112 2.959-1.989.545-2.661.683-4.828.718-1.33.02-1.885 1.633-.106 3.61 1.408 1.608 4.597 2.036 6.515 1.768 1.236-.174 1.521.645 1.407 1.85a20.023 20.023 0 0 0-.024 4.488c.198 1.5.45 4.051-.258 5.713-.35.817-1.361 1.693-2.449 1.633-1.413-.084-2.555-1.75-3.537-3.726-2.06-4.152-4.48-5.033-13.509-8.835-8.12-3.417-12.516-8.749-15.24-12.185-2.421-3.042-4.846-1.89-4.626.855.179 2.128 1.48 9.008 4.781 13.141 4.058 6.314 10.32 9.177 17.534 9.739 1.885.149 3.065.52 3.225 1.383.236 1.835-1.557 3.11-4.898 2.722-3.341-.39-4.768.22-4.103 2.121 2.123 4.477 7.021 4.672 9.058 4.857.686.122 3.114 0 4.41.355 1.51.418 1.836 2.514-.353 3.648-3.892 1.903-5.59 3.479-7.561 7.075-1.486 2.826-2.77 7.555-1.435 14.365 1.283 6.62-8.342 6.83-12.497 5.89-1.793-.377-3.675-3.778.716-6.625 3.553-2.305 4.269-3.724 4.111-6.642-.184-3.4-2.058-3.644-2.053-6.598v-7.05c0-.602-.488-1.088-1.087-1.088h-3.334a1.087 1.087 0 0 1-1.087-1.087v-4.25c0-.602-.488-1.087-1.088-1.087h-3.317a1.087 1.087 0 0 1-1.087-1.088v-3.81c0-.602-.489-1.087-1.088-1.087h-4.04a1.087 1.087 0 0 1-1.089-1.088V26.25c0-.602-.488-1.088-1.087-1.088H1.088C.485 25.161 0 25.65 0 26.25v4.26c0 .602.488 1.087 1.088 1.087h4.049c.602 0 1.087.489 1.087 1.088v15.192c0 .602.489 1.087 1.088 1.087h4.277c.602 0 1.088.489 1.088 1.088v4.968c0 .602.488 1.087 1.087 1.087h6.005c1.836-.13 2.156 2.335 2.137 3.214-.04 2.007-2.308 2.652-3.382 3.487-2.861 2.21-5.077 4.459-3.78 8.781l.032.09c2.362 5.017 8.855 4.499 12.956 4.499h25.817c1.459 0 2.959.339 2.614-1.362-.342-1.7-1.063-4.024-3.162-4.024-2.1 0-1.758 1.166-3.81.57-2.054-.597-2.057-3.371 1.027-8.198 3.19-4.122 8.652-3.81 11.952-.895 3.301 2.915 2.325 7.978 1.633 10.885-.396 2.048.545 3.06 1.67 3.032H78.58c2.015-.035 1.62-1.391.464-4.035h.008z"
+        fill="#fff"
+      >
+      </path>
+    </svg>
+    </div>
+
+    <div id="app"></div>
+
+    <script type="text/javascript" src="//cloudfront.loggly.com/js/loggly.tracker-latest.min.js" async></script>
+    <!-- Translations -->
+  </body>
+</html>

website/client/index.html

@@ -12,6 +12,7 @@
     <link rel="shortcut icon" sizes="192x192" href="/static/icons/favicon_192x192.png">
     <link rel="mask-icon" href="/static/icons/favicon.ico">
     <meta property="og:image" content="/static/emails/images/meta-image.png" />
+    <script type="module" src="/src/main.js"></script>
   </head>
   <body>
     <div id="loading-screen">
@@ -28,10 +29,9 @@
     </div>
 
     <div id="app"></div>
-    <!-- built files will be auto injected -->
 
     <script type="text/javascript" src="//cloudfront.loggly.com/js/loggly.tracker-latest.min.js" async></script>
     <!-- Translations -->
-    <script type='text/javascript' src='/api/v4/i18n/browser-script'></script>
+    <script type='text/javascript' src='/api/v4/i18n/browser-script' vite-ignore></script>
   </body>
 </html>

website/client/localePlugin.js

@@ -0,0 +1,64 @@
+import fs from 'fs';
+import path from 'path';
+
+import { approvedLanguages } from '../common/script/libs/i18n';
+
+const localePath = path.join(__dirname, '../common/locales/');
+
+const translations = {};
+const momentLangs = {};
+
+function loadFile (file) {
+  const contents = fs.readFileSync(file);
+  return JSON.parse(contents); 
+}
+
+function _loadTranslations (locale) {
+  const files = fs.readdirSync(path.join(localePath, locale));
+
+  translations[locale] = {};
+
+  files.forEach(file => {
+    if (path.extname(file) !== '.json') return;
+
+    const t = loadFile(path.join(localePath, locale, file))
+    translations[locale] = {
+      ...translations[locale],
+      ...t,
+    }
+  });
+}
+
+// First fetch English strings so we can merge them with missing strings in other languages
+_loadTranslations('en');
+
+// Then load all other languages
+approvedLanguages.forEach(file => {
+  if (file === 'en' || fs.statSync(path.join(localePath, file)).isDirectory() === false) return;
+  _loadTranslations(file);
+
+  // Strip empty strings, then merge missing strings from english
+  translations[file] = {
+    ...translations.en,
+    ...translations[file],
+  }
+});
+
+export default function localePlugin() {
+  const virtualModuleId = 'virtual:translations'
+  const resolvedVirtualModuleId = '\0' + virtualModuleId
+
+  return {
+    name: 'locale', // required, will show up in warnings and errors
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId
+      }
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        return `export default ${JSON.stringify(translations)}`;
+      }
+    },
+  }
+}

website/client/package.json

@@ -3,28 +3,25 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vite",
-    "build": "vue-cli-service build",
+    "build": "vite build",
-    "test:unit": "vue-cli-service test:unit --require ./tests/unit/helpers.js",
+    "preview": "vite preview",
-    "lint": "vue-cli-service lint .",
+    "test:unit": "vitest run",
-    "lint-no-fix": "vue-cli-service lint --no-fix .",
+    "test:unit:watch": "vitest watch",
+    "lint": "eslint --ext .js,.vue --ignore-path ../../.gitignore --fix .",
+    "lint-no-fix": "eslint --ext .js,.vue --no-fix src",
     "postinstall": "node ./scripts/npm-postinstall.js"
   },
   "dependencies": {
-    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vitejs/plugin-vue2": "^2.3.3",
-    "@vue/cli-plugin-eslint": "^5.0.8",
-    "@vue/cli-plugin-router": "^5.0.8",
-    "@vue/cli-plugin-unit-mocha": "^5.0.8",
-    "@vue/cli-service": "^5.0.8",
     "@vue/test-utils": "1.0.0-beta.29",
     "amplitude-js": "^8.21.3",
     "assert": "^2.1.0",
+    "autoprefixer": "^10.4.20",
     "axios": "^0.28.0",
     "axios-progress-bar": "^1.2.0",
-    "babel-eslint": "^10.1.0",
     "bootstrap": "^4.6.0",
     "bootstrap-vue": "^2.23.1",
-    "core-js": "^3.33.1",
     "eslint": "7.32.0",
     "eslint-config-habitrpg": "6.2.0",
     "eslint-plugin-mocha": "5.3.0",
@@ -35,30 +32,34 @@
     "jquery": "^3.7.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
-    "moment-locales-webpack-plugin": "^1.2.0",
     "nconf": "^0.12.1",
     "sass": "^1.63.4",
-    "sass-loader": "^14.1.1",
     "sinon": "^17.0.1",
     "stopword": "^2.0.8",
     "timers-browserify": "^2.0.12",
     "uuid": "^9.0.1",
     "validator": "^13.9.0",
+    "vite": "^6.0.0",
+    "vite-plugin-prerender": "^1.0.8",
     "vue": "^2.7.10",
     "vue-fragment": "^1.6.0",
     "vue-mugen-scroll": "^0.2.6",
     "vue-router": "^3.6.5",
-    "vue-template-babel-compiler": "^2.0.0",
-    "vue-template-compiler": "^2.7.10",
     "vuedraggable": "^2.24.3",
     "vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker.git#153d339e4dbebb73733658aeda1d5b7fcc55b0a0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@prerenderer/renderer-puppeteer": "^1.2.4",
+    "@prerenderer/rollup-plugin": "^0.3.12",
+    "@vitest/browser": "^3.0.5",
     "babel-plugin-lodash": "^3.3.4",
-    "chai": "^5.1.0",
     "inspectpack": "^4.7.1",
+    "jsdom": "^26.0.0",
+    "mocha": "^11.1.0",
+    "playwright": "^1.50.1",
     "terser-webpack-plugin": "^5.3.10",
+    "vitest": "^3.0.5",
     "webpack": "^5.94.0"
   }
 }

website/client/src/app.vue

@@ -34,7 +34,7 @@
 </template>
 
 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   #loading-screen-inapp {
     #melior {
@@ -90,7 +90,7 @@
 </style>
 
 <style lang='scss'>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .modal-backdrop {
     opacity: .9 !important;
@@ -111,7 +111,7 @@ import { mapState } from '@/libs/store';
 import userMain from '@/pages/user-main';
 import snackbars from '@/components/snackbars/notifications';
 
-const COMMUNITY_MANAGER_EMAIL = process.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
+const COMMUNITY_MANAGER_EMAIL = import.meta.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
 
 export default {
   name: 'App',

website/client/src/assets/css/sprites/spritesmith-main.css

@@ -1730,6 +1730,11 @@
   width: 141px;
   height: 147px;
 }
+.background_old_fashioned_tea_shop {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_old_fashioned_tea_shop.png');
+  width: 141px;
+  height: 147px;
+}
 .background_old_photo {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_old_photo.png');
   width: 141px;
@@ -30214,6 +30219,11 @@
   width: 90px;
   height: 90px;
 }
+.head_armoire_fancyFloralHat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_fancyFloralHat.png');
+  width: 114px;
+  height: 90px;
+}
 .head_armoire_fancyPirateHat {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_fancyPirateHat.png');
   width: 114px;
@@ -30644,6 +30654,11 @@
   width: 114px;
   height: 90px;
 }
+.shield_armoire_fancyFloralFan {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_fancyFloralFan.png');
+  width: 114px;
+  height: 90px;
+}
 .shield_armoire_fancyShoe {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_fancyShoe.png');
   width: 90px;
@@ -33719,16 +33734,6 @@
   width: 90px;
   height: 90px;
 }
-.head_mystery_202501 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_mystery_202501.png');
-  width: 114px;
-  height: 90px;
-}
-.shield_mystery_202501 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_mystery_202501.png');
-  width: 114px;
-  height: 90px;
-}
 .back_mystery_201402 {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/back_mystery_201402.png');
   width: 90px;
@@ -35404,6 +35409,36 @@
   width: 114px;
   height: 90px;
 }
+.head_mystery_202501 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_mystery_202501.png');
+  width: 114px;
+  height: 90px;
+}
+.shield_mystery_202501 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_mystery_202501.png');
+  width: 114px;
+  height: 90px;
+}
+.broad_armor_mystery_202502 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_mystery_202502.png');
+  width: 114px;
+  height: 90px;
+}
+.head_mystery_202502 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_mystery_202502.png');
+  width: 114px;
+  height: 90px;
+}
+.shield_mystery_202502 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_mystery_202502.png');
+  width: 114px;
+  height: 90px;
+}
+.slim_armor_mystery_202502 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_mystery_202502.png');
+  width: 114px;
+  height: 90px;
+}
 .broad_armor_mystery_301404 {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_mystery_301404.png');
   width: 90px;
@@ -40107,51 +40142,111 @@
   width: 28px;
   height: 28px;
 }
+.notif_2014robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2014robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_2015hat_nye {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2015hat_nye.png');
   width: 28px;
   height: 28px;
 }
+.notif_2015robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2015robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_2016hat_nye {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2016hat_nye.png');
   width: 28px;
   height: 28px;
 }
+.notif_2016robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2016robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_2017hat_nye {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2017hat_nye.png');
   width: 28px;
   height: 28px;
 }
+.notif_2017robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2017robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_2018hat_nye {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2018hat_nye.png');
   width: 28px;
   height: 28px;
 }
+.notif_2018robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2018robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_2019hat_nye {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2019hat_nye.png');
   width: 28px;
   height: 28px;
 }
+.notif_2019robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2019robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_2020hat_nye {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2020hat_nye.png');
   width: 28px;
   height: 28px;
 }
+.notif_2020robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2020robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_2021hat_nye {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2021hat_nye.png');
   width: 28px;
   height: 28px;
 }
+.notif_2021robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2021robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_2022hat_nye {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2022hat_nye.png');
   width: 28px;
   height: 28px;
 }
+.notif_2022robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2022robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_2023hat_nye {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2023hat_nye.png');
   width: 28px;
   height: 28px;
 }
+.notif_2023robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2023robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
+.notif_2024robe_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2024robe_birthday.png');
+  width: 28px;
+  height: 28px;
+}
+.notif_cake_birthday {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_cake_birthday.png');
+  width: 28px;
+  height: 28px;
+}
 .notif_candy_nye {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_candy_nye.png');
   width: 28px;
@@ -40557,6 +40652,11 @@
   width: 219px;
   height: 219px;
 }
+.quest_cat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/quest_cat.png');
+  width: 219px;
+  height: 219px;
+}
 .quest_chameleon {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/quest_chameleon.png');
   width: 216px;
@@ -41292,6 +41392,11 @@
   width: 68px;
   height: 68px;
 }
+.inventory_quest_scroll_cat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/inventory_quest_scroll_cat.png');
+  width: 68px;
+  height: 68px;
+}
 .inventory_quest_scroll_chameleon {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/inventory_quest_scroll_chameleon.png');
   width: 68px;
@@ -42897,6 +43002,56 @@
   width: 105px;
   height: 105px;
 }
+.Mount_Body_Cat-Base {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Base.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Cat-CottonCandyBlue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-CottonCandyBlue.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Cat-CottonCandyPink {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-CottonCandyPink.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Cat-Desert {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Desert.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Cat-Golden {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Golden.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Cat-Red {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Red.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Cat-Shade {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Shade.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Cat-Skeleton {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Skeleton.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Cat-White {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-White.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Body_Cat-Zombie {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Zombie.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Body_Chameleon-Base {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Chameleon-Base.png');
   width: 105px;
@@ -48437,6 +48592,56 @@
   width: 105px;
   height: 105px;
 }
+.Mount_Head_Cat-Base {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Base.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Cat-CottonCandyBlue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-CottonCandyBlue.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Cat-CottonCandyPink {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-CottonCandyPink.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Cat-Desert {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Desert.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Cat-Golden {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Golden.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Cat-Red {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Red.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Cat-Shade {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Shade.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Cat-Skeleton {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Skeleton.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Cat-White {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-White.png');
+  width: 105px;
+  height: 105px;
+}
+.Mount_Head_Cat-Zombie {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Zombie.png');
+  width: 105px;
+  height: 105px;
+}
 .Mount_Head_Chameleon-Base {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Chameleon-Base.png');
   width: 105px;
@@ -54037,6 +54242,56 @@
   width: 81px;
   height: 99px;
 }
+.Pet-Cat-Base {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Base.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Cat-CottonCandyBlue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-CottonCandyBlue.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Cat-CottonCandyPink {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-CottonCandyPink.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Cat-Desert {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Desert.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Cat-Golden {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Golden.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Cat-Red {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Red.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Cat-Shade {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Shade.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Cat-Skeleton {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Skeleton.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Cat-White {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-White.png');
+  width: 81px;
+  height: 99px;
+}
+.Pet-Cat-Zombie {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Zombie.png');
+  width: 81px;
+  height: 99px;
+}
 .Pet-Chameleon-Base {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Chameleon-Base.png');
   width: 81px;

website/client/src/assets/scss/banner.scss

@@ -1,5 +1,5 @@
 
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
 
 .featured-label {
   width: auto;

website/client/src/assets/scss/bootstrap.scss

@@ -2,7 +2,7 @@
 $grid-gutter-width: 24px;
 
 // Bootstrap and its default variables
-@import 'node_modules/bootstrap/scss/bootstrap';
+@import '~/bootstrap/scss/bootstrap';
 
 // Bootstrap Vue styles
-@import 'node_modules/bootstrap-vue/dist/bootstrap-vue';
+@import '~/bootstrap-vue/dist/bootstrap-vue';

website/client/src/assets/scss/button.scss

@@ -101,8 +101,7 @@
 
 .btn-secondary,
 .dropdown > .btn-secondary.dropdown-toggle:not(.btn-success),
-.show > .btn-secondary.dropdown-toggle:not(.btn-success)
+.show > .btn-secondary.dropdown-toggle:not(.btn-success) {
-{
   background: $white;
   border: 2px solid transparent;
   color: $gray-50;
@@ -298,6 +297,16 @@
   box-shadow: none;
 }
 
+.btn-flat,
+.dropdown > .btn-flat.dropdown-toggle:not(.btn-success),
+.show > .btn-flat.dropdown-toggle:not(.btn-success) {
+  &.with-icon {
+    .svg-icon.color {
+      color: var(--icon-color);
+    }
+  }
+}
+
 .btn-cancel {
   color: $blue-10;
 }

website/client/src/assets/scss/dropdown.scss

@@ -38,7 +38,12 @@
   border-radius: 2px;
   box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
   padding: 0;
+}
 
+.no-min-width {
+  .dropdown-menu {
+    min-width: 0 !important;
+  }
 }
 
 // shared dropdown-item styles
@@ -54,6 +59,8 @@
   color: $gray-50 !important;
   cursor: pointer;
 
+  --dropdown-item-hover-icon-color: #{$gray-200};
+
   &:focus {
     outline: none;
     background-color: inherit;
@@ -88,7 +95,7 @@
 
   &:not(:hover) {
     .with-icon .svg-icon {
-      color: $gray-200;
+      color: var(dropdown-item-hover-icon-color);
     }
   }
 }
@@ -151,7 +158,7 @@
 
 // selectList.vue items sizing
 .selectListItem .dropdown-item {
-  padding: 0.25rem 0.75rem;
+  padding: 0.25rem 1rem 0.25rem 0.75rem;
   height: 32px;
 
   &:active, &:hover, &:focus, &.active {

website/client/src/assets/scss/faq.scss

@@ -1,4 +1,4 @@
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
 
 h1 {
   margin-top: 0px;

website/client/src/assets/scss/form.scss

@@ -61,13 +61,13 @@ input, textarea, input.form-control, textarea.form-control {
 
   &.input-valid {
     padding-right: 27px;
-    background-image: url(~@/assets/svg/for-css/check.svg);
+    background-image: url(@/assets/svg/for-css/check.svg);
     background-size: 1rem;
   }
 
   &.input-invalid {
     padding-right: 40px;
-    background-image: url(~@/assets/svg/for-css/alert.svg);
+    background-image: url(@/assets/svg/for-css/alert.svg);
     background-size: 16px 16px;
     border-color: $red-100 !important;
   }
@@ -239,7 +239,7 @@ $bg-disabled-control: $gray-10;
     &:checked~.custom-control-label::after {
       width: 18px;
       height: 18px;
-      background-image: url(~@/assets/svg/for-css/checkbox-white.svg);
+      background-image: url(@/assets/svg/for-css/checkbox-white.svg);
       background-size: 13px 10px;
     }
 

website/client/src/assets/scss/iconalert.scss

@@ -29,13 +29,13 @@
 }
 
 .iconalert-success::before {
-  background-image: url(~@/assets/svg/for-css/checkbox-white.svg);
+  background-image: url(@/assets/svg/for-css/checkbox-white.svg);
   background-size: 13px 10px;
   background-color: #1ca372;
 }
 
 .iconalert-warning::before, .iconalert-error::before {
-  background-image: url(~@/assets/svg/for-css/alert-white.svg);
+  background-image: url(@/assets/svg/for-css/alert-white.svg);
   background-size: 16px 16px;
 }
 

website/client/src/assets/scss/modal.scss

@@ -1,4 +1,4 @@
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
 
 .modal {
   z-index: 1350;

website/client/src/assets/scss/static.scss

@@ -1,4 +1,4 @@
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
 
 .container-fluid.static-view {
   margin: 5em 2em 0 2em;

website/client/src/components/404.vue

@@ -4,7 +4,7 @@
       <!-- @TODO i18n. How to setup the strings with the router-link inside?-->
       <img
         :class="retiredChatPage ? 'mt-5' : 'image-404'"
-        src="~@/assets/images/404.png"
+        src="@/assets/images/404.png"
       >
       <div v-if="retiredChatPage">
         <h1>
@@ -54,7 +54,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
 
 h1, .static-wrapper h1 {
   color: $purple-200;

website/client/src/components/achievements/chooseClass.vue

@@ -103,7 +103,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .btn-primary:active {
       border: 2px solid $purple-400 !important;
@@ -189,10 +189,10 @@
 import Avatar from '../avatar';
 import { mapState } from '@/libs/store';
 import markdownDirective from '@/directives/markdown';
-import warriorIcon from '@/assets/svg/warrior.svg';
+import warriorIcon from '@/assets/svg/warrior.svg?raw';
-import rogueIcon from '@/assets/svg/rogue.svg';
+import rogueIcon from '@/assets/svg/rogue.svg?raw';
-import healerIcon from '@/assets/svg/healer.svg';
+import healerIcon from '@/assets/svg/healer.svg?raw';
-import wizardIcon from '@/assets/svg/wizard.svg';
+import wizardIcon from '@/assets/svg/wizard.svg?raw';
 
 export default {
   components: {

website/client/src/components/achievements/firstDrops.vue

@@ -70,7 +70,7 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   h2 {
     color: $purple-200;
@@ -100,7 +100,7 @@
 </style>
 
 <script>
-import closeIcon from '@/assets/svg/close.svg';
+import closeIcon from '@/assets/svg/close.svg?raw';
 import Sprite from '@/components/ui/sprite.vue';
 
 export default {

website/client/src/components/achievements/genericAchievement.vue

@@ -45,7 +45,7 @@
 </template>
 
 <style lang="scss">
-  @import '~@/assets/scss/mixins.scss';
+  @import '@/assets/scss/mixins.scss';
 
   #generic-achievement {
     @include centeredModal();
@@ -61,7 +61,7 @@
 </style>
 
 <style scoped lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .content {
     text-align: center;
@@ -98,7 +98,7 @@
 <script>
 import achievements from '@/../../common/script/content/achievements';
 import { mapState } from '@/libs/store';
-import svgClose from '@/assets/svg/close.svg';
+import svgClose from '@/assets/svg/close.svg?raw';
 import Sprite from '@/components/ui/sprite.vue';
 
 export default {

website/client/src/components/achievements/levelUp.vue

@@ -58,7 +58,7 @@ label(style='display:inline-block') {{ $t('dontShowAgain') }}
 </template>
 
 <style lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   #level-up {
     .modal-content {
@@ -160,8 +160,8 @@ label(style='display:inline-block') {{ $t('dontShowAgain') }}
 <script>
 import Avatar from '../avatar';
 import { mapState } from '@/libs/store';
-import starGroup from '@/assets/svg/star-group.svg';
+import starGroup from '@/assets/svg/star-group.svg?raw';
-import sparkles from '@/assets/svg/sparkles-left.svg';
+import sparkles from '@/assets/svg/sparkles-left.svg?raw';
 
 const levelQuests = {
   15: 'atom1',

website/client/src/components/achievements/onboardingComplete.vue

@@ -17,7 +17,7 @@
       </h2>
       <img
         class="onboarding-complete-banner d-block"
-        src="~@/assets/images/onboarding-complete-banner@2x.png"
+        src="@/assets/images/onboarding-complete-banner@2x.png"
       >
       <p
         v-once
@@ -59,7 +59,7 @@
 </style>
 
 <style lang="scss" scoped>
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
 
 h2 {
   color: $purple-200;
@@ -100,7 +100,7 @@ button {
 </style>
 
 <script>
-import svgClose from '@/assets/svg/close.svg';
+import svgClose from '@/assets/svg/close.svg?raw';
 
 export default {
   data () {

website/client/src/components/achievements/wonChallenge.vue

@@ -73,7 +73,7 @@
 </template>
 
 <style lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   #won-challenge {
     .modal-body {
@@ -96,7 +96,7 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .purple {
     color: $purple-300;
@@ -146,9 +146,9 @@
 <script>
 import habiticaMarkdown from 'habitica-markdown';
 import closeIcon from '@/components/shared/closeIcon';
-import sparkles from '@/assets/svg/star-group.svg';
+import sparkles from '@/assets/svg/star-group.svg?raw';
-import gem from '@/assets/svg/gem.svg';
+import gem from '@/assets/svg/gem.svg?raw';
-import stars from '@/assets/svg/sparkles-left.svg';
+import stars from '@/assets/svg/sparkles-left.svg?raw';
 import { mapState } from '@/libs/store';
 
 export default {

website/client/src/components/admin-panel/search.vue

@@ -7,7 +7,11 @@
     >
       Could not find any matching users.
     </div>
-    <loading-spinner class="mx-auto mb-2" dark-color="true" v-if="isSearching" />
+    <loading-spinner
+      v-if="isSearching"
+      class="mx-auto mb-2"
+      dark-color="true"
+    />
     <div
       v-if="users.length > 0"
       class="list-group"

website/client/src/components/admin-panel/user-support/cronAndAuth.vue

@@ -38,7 +38,10 @@
             <strong v-else>No</strong>
           </div>
         </div>
-        <div v-if="cronError" class="form-group row">
+        <div
+          v-if="cronError"
+          class="form-group row"
+        >
           <label class="col-sm-3 col-form-label">lastCron value:</label>
           <strong>{{ hero.lastCron | formatDate }}</strong>
           <br>

website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue

@@ -215,7 +215,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
 .input-group-append {
   width: auto;

website/client/src/components/appFooter.vue

@@ -283,9 +283,9 @@
       </div>
 
       <div
-        class="time-travel"
         v-if="TIME_TRAVEL_ENABLED && user?.permissions?.fullAccess"
         :key="lastTimeJump"
+        class="time-travel"
       >
         <a
           class="btn btn-secondary mr-1"
@@ -306,7 +306,7 @@
             @click="resetTime()"
           >
             Reset
-        </a>
+          </a>
         </div>
         <a
           class="btn btn-secondary mr-1"
@@ -410,7 +410,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 .footer-row {
   margin: 0;
   flex: 0 1 auto;
@@ -845,12 +845,12 @@ import moment from 'moment';
 import Vue from 'vue';
 
 // images
-import melior from '@/assets/svg/melior.svg';
+import melior from '@/assets/svg/melior.svg?raw';
-import twitter from '@/assets/svg/twitter.svg';
+import twitter from '@/assets/svg/twitter.svg?raw';
-import facebook from '@/assets/svg/facebook.svg';
+import facebook from '@/assets/svg/facebook.svg?raw';
-import instagram from '@/assets/svg/instagram.svg';
+import instagram from '@/assets/svg/instagram.svg?raw';
-import tumblr from '@/assets/svg/tumblr.svg';
+import tumblr from '@/assets/svg/tumblr.svg?raw';
-import heart from '@/assets/svg/heart.svg';
+import heart from '@/assets/svg/heart.svg?raw';
 
 // components & modals
 import { mapState } from '@/libs/store';
@@ -858,13 +858,13 @@ import buyGemsModal from './payments/buyGemsModal.vue';
 import reportBug from '@/mixins/reportBug.js';
 import { worldStateMixin } from '@/mixins/worldState';
 
-const DEBUG_ENABLED = process.env.DEBUG_ENABLED === 'true'; // eslint-disable-line no-process-env
+const DEBUG_ENABLED = import.meta.env.DEBUG_ENABLED === 'true'; // eslint-disable-line no-process-env
-const TIME_TRAVEL_ENABLED = process.env.TIME_TRAVEL_ENABLED === 'true'; // eslint-disable-line no-process-env
+const TIME_TRAVEL_ENABLED = import.meta.env.TIME_TRAVEL_ENABLED === 'true'; // eslint-disable-line no-process-env
 let sinon;
-if (TIME_TRAVEL_ENABLED) {
+/* if (TIME_TRAVEL_ENABLED) {
   // eslint-disable-next-line global-require
   sinon = await import('sinon');
-}
+} */
 
 export default {
   components: {

website/client/src/components/auth/authForm.vue

@@ -168,7 +168,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .form {
     margin: 0 auto;
@@ -227,8 +227,8 @@ import debounce from 'lodash/debounce';
 import isEmail from 'validator/es/lib/isEmail';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import { setUpAxios, buildAppleAuthUrl } from '@/libs/auth';
-import googleIcon from '@/assets/svg/google.svg';
+import googleIcon from '@/assets/svg/google.svg?raw';
-import appleIcon from '@/assets/svg/apple_black.svg';
+import appleIcon from '@/assets/svg/apple_black.svg?raw';
 
 export default {
   name: 'AuthForm',
@@ -290,7 +290,7 @@ export default {
   },
   mounted () {
     hello.init({
-      google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line
+      google: import.meta.env.GOOGLE_CLIENT_ID, // eslint-disable-line
     });
   },
   methods: {

website/client/src/components/auth/registerLoginReset.vue

@@ -355,7 +355,7 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   @media only screen  and (min-height: 1080px) {
     .bottom-wrap-register {
@@ -491,7 +491,7 @@
 
   #top-background {
     .seamless_stars_varied_opacity_repeat {
-      background-image: url('~@/assets/images/auth/seamless_stars_varied_opacity.png');
+      background-image: url('@/assets/images/auth/seamless_stars_varied_opacity.png');
       background-repeat: repeat-x;
       position: absolute;
       height: 500px;
@@ -510,7 +510,7 @@
     position: relative;
 
     .seamless_mountains_demo_repeat {
-      background-image: url('~@/assets/images/auth/seamless_mountains_demo.png');
+      background-image: url('@/assets/images/auth/seamless_mountains_demo.png');
       background-repeat: repeat-x;
       width: 100%;
       height: 300px;
@@ -520,7 +520,7 @@
     }
 
     .midground_foreground_extended2 {
-      background-image: url('~@/assets/images/auth/midground_foreground_extended2.png');
+      background-image: url('@/assets/images/auth/midground_foreground_extended2.png');
       position: relative;
       width: 1500px;
       max-width: 100%;
@@ -611,11 +611,11 @@ import isEmail from 'validator/es/lib/isEmail';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import { buildAppleAuthUrl } from '../../libs/auth';
 import sanitizeRedirect from '@/mixins/sanitizeRedirect';
-import exclamation from '@/assets/svg/exclamation.svg';
+import exclamation from '@/assets/svg/exclamation.svg?raw';
-import gryphon from '@/assets/svg/gryphon.svg';
+import gryphon from '@/assets/svg/gryphon.svg?raw';
-import habiticaIcon from '@/assets/svg/logo-horizontal.svg';
+import habiticaIcon from '@/assets/svg/logo-horizontal.svg?raw';
-import googleIcon from '@/assets/svg/google.svg';
+import googleIcon from '@/assets/svg/google.svg?raw';
-import appleIcon from '@/assets/svg/apple_black.svg';
+import appleIcon from '@/assets/svg/apple_black.svg?raw';
 
 export default {
   mixins: [sanitizeRedirect],
@@ -728,7 +728,7 @@ export default {
     this.forgotPassword = this.$route.path.startsWith('/forgot-password');
 
     hello.init({
-      google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line
+      google: import.meta.env.GOOGLE_CLIENT_ID, // eslint-disable-line
     });
   },
   methods: {

website/client/src/components/avatar.vue

@@ -1,110 +1,125 @@
 <template>
-  <div
+  <div class="avatar-wrapper">
-    v-if="member.preferences"
-    class="avatar"
-    :style="{width, height, paddingTop}"
-    :class="backgroundClass"
-    @click.prevent="castEnd()"
-  >
     <div
-      class="character-sprites"
+      v-if="member.preferences"
-      :style="{margin: spritesMargin}"
+      class="avatar"
+      :style="{width, height, paddingTop}"
+      :class="topLevelClassList"
+      @click.prevent="castEnd()"
     >
-      <template v-if="!avatarOnly">
+      <div
-        <!-- Mount Body-->
+        class="character-sprites"
-        <span
+        :style="{margin: spritesMargin}"
-          v-if="member.items.currentMount"
+      >
-          :class="'Mount_Body_' + member.items.currentMount"
+        <template v-if="!avatarOnly">
-        ></span>
+          <!-- Mount Body-->
-      </template>
-      <!-- Buffs that cause visual changes to avatar: Snowman, Ghost, Flower, etc-->
-      <template v-for="(klass, item) in visualBuffs">
-        <span
-          v-if="member.stats.buffs[item] && showVisualBuffs"
-          :key="item"
-          :class="klass"
-        ></span>
-      </template>
-      <!-- Show flower ALL THE TIME!!!-->
-      <!-- See https://github.com/HabitRPG/habitica/issues/7133-->
-      <span :class="'hair_flower_' + member.preferences.hair.flower"></span>
-      <!-- Show avatar only if not currently affected by visual buff-->
-      <template v-if="showAvatar()">
-        <span :class="['chair_' + member.preferences.chair, specialMountClass]"></span>
-        <span :class="[getGearClass('back'), specialMountClass]"></span>
-        <span :class="[skinClass, specialMountClass]"></span>
-        <!-- eslint-disable max-len-->
-        <span
-          :class="[shirtClass, specialMountClass]"
-        ></span>
-        <!-- eslint-enable max-len-->
-        <span :class="['head_0', specialMountClass]"></span>
-        <!-- eslint-disable max-len-->
-        <span :class="[member.preferences.size + '_' + getGearClass('armor'), specialMountClass]"></span>
-        <!-- eslint-enable max-len-->
-        <span :class="[getGearClass('back_collar'), specialMountClass]"></span>
-        <template
-          v-for="type in ['bangs', 'base', 'mustache', 'beard']"
-        >
           <span
-            :key="type"
+            v-if="member.items.currentMount"
-            :class="[hairClass(type), specialMountClass]"
+            :class="'Mount_Body_' + member.items.currentMount"
           ></span>
         </template>
-        <span :class="[getGearClass('body'), specialMountClass]"></span>
+        <!-- Buffs that cause visual changes to avatar: Snowman, Ghost, Flower, etc-->
-        <span :class="[getGearClass('eyewear'), specialMountClass]"></span>
+        <template v-for="(klass, item) in visualBuffs">
-        <span :class="[getGearClass('head'), specialMountClass]"></span>
+          <span
-        <span :class="[getGearClass('headAccessory'), specialMountClass]"></span>
+            v-if="member.stats.buffs[item] && showVisualBuffs"
-        <span :class="['hair_flower_' + member.preferences.hair.flower, specialMountClass]"></span>
+            :key="item"
+            :class="klass"
+          ></span>
+        </template>
+        <!-- Show flower ALL THE TIME!!!-->
+        <!-- See https://github.com/HabitRPG/habitica/issues/7133-->
+        <span :class="'hair_flower_' + member.preferences.hair.flower"></span>
+        <!-- Show avatar only if not currently affected by visual buff-->
+        <template v-if="showAvatar()">
+          <span :class="['chair_' + member.preferences.chair, specialMountClass]"></span>
+          <span :class="[getGearClass('back'), specialMountClass]"></span>
+          <span :class="[skinClass, specialMountClass]"></span>
+          <!-- eslint-disable max-len-->
+          <span
+            :class="[shirtClass, specialMountClass]"
+          ></span>
+          <!-- eslint-enable max-len-->
+          <span :class="['head_0', specialMountClass]"></span>
+          <!-- eslint-disable max-len-->
+          <span :class="[member.preferences.size + '_' + getGearClass('armor'), specialMountClass]"></span>
+          <!-- eslint-enable max-len-->
+          <span :class="[getGearClass('back_collar'), specialMountClass]"></span>
+          <template
+            v-for="type in ['bangs', 'base', 'mustache', 'beard']"
+          >
+            <span
+              :key="type"
+              :class="[hairClass(type), specialMountClass]"
+            ></span>
+          </template>
+          <span :class="[getGearClass('body'), specialMountClass]"></span>
+          <span :class="[getGearClass('eyewear'), specialMountClass]"></span>
+          <span :class="[getGearClass('head'), specialMountClass]"></span>
+          <span :class="[getGearClass('headAccessory'), specialMountClass]"></span>
+          <span
+            :class="[
+              'hair_flower_' + member.preferences.hair.flower, specialMountClass
+            ]"
+          ></span>
+          <span
+            v-if="!hideGear('shield')"
+            :class="[getGearClass('shield'), specialMountClass]"
+          ></span>
+          <span
+            v-if="!hideGear('weapon')"
+            :class="[getGearClass('weapon'), specialMountClass]"
+            class="weapon"
+          ></span>
+        </template>
+        <!-- Resting-->
         <span
-          v-if="!hideGear('shield')"
+          v-if="member.preferences.sleep"
-          :class="[getGearClass('shield'), specialMountClass]"
+          class="zzz"
         ></span>
-        <span
+        <template v-if="!avatarOnly">
-          v-if="!hideGear('weapon')"
+          <!-- Mount Head-->
-          :class="[getGearClass('weapon'), specialMountClass]"
+          <span
-        ></span>
+            v-if="member.items.currentMount"
-      </template>
+            :class="'Mount_Head_' + member.items.currentMount"
-      <!-- Resting-->
+          ></span>
-      <span
+          <!-- Pet-->
-        v-if="member.preferences.sleep"
+          <span
-        class="zzz"
+            class="current-pet"
-      ></span>
+            :class="petClass"
-      <template v-if="!avatarOnly">
+          ></span>
-        <!-- Mount Head-->
+        </template>
-        <span
+      </div>
-          v-if="member.items.currentMount"
+      <class-badge
-          :class="'Mount_Head_' + member.items.currentMount"
+        v-if="hasClass && !hideClassBadge"
-        ></span>
+        class="under-avatar"
-        <!-- Pet-->
+        :member-class="member.stats.class"
-        <span
+      />
-          class="current-pet"
-          :class="petClass"
-        ></span>
-      </template>
     </div>
-    <class-badge
-      v-if="hasClass && !hideClassBadge"
-      class="under-avatar"
-      :member-class="member.stats.class"
-    />
   </div>
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .avatar {
     width: 141px;
-    height: 147px;
     image-rendering: pixelated;
     position: relative;
     cursor: pointer;
+
+    &.centered-avatar {
+      margin: 0 auto;
+    }
+
+    // resetting the additional padding
+    margin-bottom: -0.5rem !important;
   }
 
   .character-sprites {
     width: 90px;
     height: 90px;
+
+    display: inline-flex;
   }
 
   .character-sprites span {
@@ -123,6 +138,27 @@
   .invert {
     filter: invert(100%);
   }
+
+  .weapon {
+     // the only one that is relative so that it fits into the parent div
+    position: relative !important;
+  }
+
+  .debug {
+    border: 1px solid red;
+
+    .character-sprites {
+      border: 1px solid blue;
+    }
+
+    .weapon {
+      border: 1px solid green;
+    }
+
+    span {
+      border: 1px solid yellow;
+    }
+  }
 </style>
 
 <script>
@@ -133,12 +169,24 @@ import foolPet from '../mixins/foolPet';
 
 import ClassBadge from '@/components/members/classBadge';
 
+/**
+ * TODO replace avatarOnly with multiple options like
+ *    - showMount
+ *    - showPet
+ *    - showBackground
+ *    - showWeapons
+ */
+
 export default {
   components: {
     ClassBadge,
   },
   mixins: [foolPet],
   props: {
+    debugMode: {
+      type: Boolean,
+      default: false,
+    },
     member: {
       type: Object,
       required: true,
@@ -156,14 +204,21 @@ export default {
     },
     overrideAvatarGear: {
       type: Object,
+      default (data) {
+        return data;
+      },
     },
     width: {
-      type: Number,
+      type: String,
-      default: 140,
+      default: '140px',
     },
     height: {
-      type: Number,
+      type: String,
-      default: 147,
+      default: undefined,
+    },
+    centerAvatar: {
+      type: Boolean,
+      default: false,
     },
     spritesMargin: {
       type: String,
@@ -171,11 +226,16 @@ export default {
     },
     overrideTopPadding: {
       type: String,
+      default: null,
     },
     showVisualBuffs: {
       type: Boolean,
       default: true,
     },
+    showWeapon: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     ...mapState({
@@ -204,6 +264,19 @@ export default {
 
       return val;
     },
+    topLevelClassList () {
+      const classes = [this.backgroundClass];
+
+      if (this.debugMode) {
+        classes.push('debug');
+      }
+
+      if (this.centerAvatar) {
+        classes.push('centered-avatar');
+      }
+
+      return classes.join(' ');
+    },
     backgroundClass () {
       if (this.member) {
         const { background } = this.member.preferences;
@@ -290,6 +363,10 @@ export default {
     },
     hideGear (gearType) {
       if (!this.member) return true;
+      if (!this.showWeapon) {
+        return true;
+      }
+
       if (gearType === 'weapon') {
         const equippedWeapon = this.member.items.gear[this.costumeClass][gearType];
 

website/client/src/components/avatarModal/customize-banner.vue

@@ -27,7 +27,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .bottom-banner {
     background: linear-gradient(114.26deg, $purple-300 0%, $purple-200 100%);
@@ -55,7 +55,7 @@
 </style>
 
 <script>
-import sparkles from '@/assets/svg/sparkles-left.svg';
+import sparkles from '@/assets/svg/sparkles-left.svg?raw';
 
 export default {
   data () {

website/client/src/components/avatarModal/customize-options.vue

@@ -5,8 +5,8 @@
   >
     <div
       v-for="option in items"
-      :key="option.key"
       :id="option.imageName"
+      :key="option.key"
       class="outer-option-background"
       :class="{
         premium: Boolean(option.gem),
@@ -28,23 +28,22 @@
           v-if="!option.none"
           class="sprite"
           :prefix="option.isGear ? 'shop' : 'icon'"
-          :imageName="option.imageName"
           :image-name="option.imageName"
         />
-          <div
+        <div
-            v-else
+          v-else
-            class="redline-outer"
+          class="redline-outer"
-          >
+        >
-            <div class="redline"></div>
+          <div class="redline"></div>
-          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import gem from '@/assets/svg/gem.svg';
+import gem from '@/assets/svg/gem.svg?raw';
-import gold from '@/assets/svg/gold.svg';
+import gold from '@/assets/svg/gold.svg?raw';
 import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
 import Sprite from '@/components/ui/sprite.vue';
 
@@ -73,7 +72,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .customize-options {
     width: 100%;

website/client/src/components/avatarModal/sub-menu.vue

@@ -19,7 +19,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .sub-menu {
     display: flex;

website/client/src/components/bannedAccountModal.vue

@@ -31,7 +31,7 @@
 <script>
 import markdownDirective from '@/directives/markdown';
 
-const COMMUNITY_MANAGER_EMAIL = process.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
+const COMMUNITY_MANAGER_EMAIL = import.meta.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
 
 export default {
   directives: {

website/client/src/components/bugReportModal.vue

@@ -118,7 +118,7 @@
 </style>
 
 <style scoped lang="scss">
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
 
 h2 {
   color: $white;

website/client/src/components/bugReportSuccessModal.vue

@@ -70,7 +70,7 @@
 </style>
 
 <style scoped lang="scss">
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
 
 h2 {
   color: $white;
@@ -134,7 +134,7 @@ label {
 
 <script>
 import closeIcon from '@/components/shared/closeIcon';
-import checkCircleIcon from '@/assets/svg/check_circle.svg';
+import checkCircleIcon from '@/assets/svg/check_circle.svg?raw';
 import { MODALS } from '@/libs/consts';
 
 export default {

website/client/src/components/challenges/challengeDetail.vue

@@ -259,7 +259,7 @@
 </template>
 
 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   h1 {
     color: $purple-200;
@@ -380,9 +380,9 @@ import sidebarSection from '../sidebarSection';
 import userLink from '../userLink';
 import groupLink from '../groupLink';
 
-import gemIcon from '@/assets/svg/gem.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
-import memberIcon from '@/assets/svg/member-icon.svg';
+import memberIcon from '@/assets/svg/member-icon.svg?raw';
-import calendarIcon from '@/assets/svg/calendar.svg';
+import calendarIcon from '@/assets/svg/calendar.svg?raw';
 
 const TASK_KEYS_TO_REMOVE = ['_id', 'completed', 'date', 'dateCompleted', 'history', 'id', 'streak', 'createdAt', 'challenge'];
 

website/client/src/components/challenges/challengeItem.vue

@@ -106,7 +106,7 @@
 </template>
 
 <style lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
   // Have to use this, because v-markdown creates p element in h3. Scoping doesn't work with it.
   .challenge-title > p {
     display: -webkit-box;
@@ -127,7 +127,7 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .challenge {
     background-color: $white;
@@ -377,14 +377,14 @@ import categoryTags from '../categories/categoryTags';
 import markdownDirective from '@/directives/markdown';
 import { mapState } from '@/libs/store';
 
-import gemIcon from '@/assets/svg/gem.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
-import memberIcon from '@/assets/svg/member-icon.svg';
+import memberIcon from '@/assets/svg/member-icon.svg?raw';
-import calendarIcon from '@/assets/svg/calendar.svg';
+import calendarIcon from '@/assets/svg/calendar.svg?raw';
-import habitIcon from '@/assets/svg/habit.svg';
+import habitIcon from '@/assets/svg/habit.svg?raw';
-import todoIcon from '@/assets/svg/todo.svg';
+import todoIcon from '@/assets/svg/todo.svg?raw';
-import dailyIcon from '@/assets/svg/daily.svg';
+import dailyIcon from '@/assets/svg/daily.svg?raw';
-import rewardIcon from '@/assets/svg/reward.svg';
+import rewardIcon from '@/assets/svg/reward.svg?raw';
-import officialIcon from '@/assets/svg/official.svg';
+import officialIcon from '@/assets/svg/official.svg?raw';
 
 export default {
   components: {

website/client/src/components/challenges/challengeModal.vue

@@ -207,7 +207,7 @@
 </template>
 
 <style lang='scss'>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   #challenge-modal {
     h5 {

website/client/src/components/challenges/closeChallengeModal.vue

@@ -81,7 +81,7 @@
 </template>
 
 <style lang='scss'>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   #close-challenge-modal {
     h2 {
@@ -98,7 +98,7 @@
     }
 
     .support-habitica {
-      background-image: url('~@/assets/svg/for-css/support-habitica-gems.svg');
+      background-image: url('@/assets/svg/for-css/support-habitica-gems.svg?raw');
       width: 325px;
       height: 89px;
       margin: 0 auto;

website/client/src/components/challenges/findChallenges.vue

@@ -63,7 +63,7 @@
 </template>
 
 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   @media only screen and (max-width: 768px) {
     .header-row {
@@ -122,7 +122,7 @@ import challengeModal from './challengeModal';
 import externalLinks from '@/mixins/externalLinks';
 import challengeUtilities from '@/mixins/challengeUtilities';
 
-import positiveIcon from '@/assets/svg/positive.svg';
+import positiveIcon from '@/assets/svg/positive.svg?raw';
 
 export default {
   components: {

website/client/src/components/challenges/groupChallenges.vue

@@ -49,7 +49,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .no-challenge-section {
     padding: 2em;
@@ -84,7 +84,7 @@ import markdownDirective from '@/directives/markdown';
 import externalLinks from '../../mixins/externalLinks';
 
 import challengeItem from './challengeItem';
-import challengeIcon from '@/assets/svg/challenge.svg';
+import challengeIcon from '@/assets/svg/challenge.svg?raw';
 
 export default {
   components: {

website/client/src/components/challenges/myChallenges.vue

@@ -86,7 +86,7 @@
 </template>
 
 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   @media only screen and (max-width: 768px) {
     .header-row {
@@ -150,8 +150,8 @@ import challengeModal from './challengeModal';
 import challengeUtilities from '@/mixins/challengeUtilities';
 import externalLinks from '@/mixins/externalLinks';
 
-import challengeIcon from '@/assets/svg/challenge.svg';
+import challengeIcon from '@/assets/svg/challenge.svg?raw';
-import positiveIcon from '@/assets/svg/positive.svg';
+import positiveIcon from '@/assets/svg/positive.svg?raw';
 
 export default {
   components: {

website/client/src/components/challenges/reportChallengeModal.vue

@@ -102,7 +102,7 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .modal-body {
     padding: 0px 8px 0px 8px;
@@ -207,8 +207,8 @@ import { mapState } from '@/libs/store';
 import notifications from '@/mixins/notifications';
 import { userStateMixin } from '../../mixins/userState';
 import markdownDirective from '@/directives/markdown';
-import svgClose from '@/assets/svg/close.svg';
+import svgClose from '@/assets/svg/close.svg?raw';
-import svgReport from '@/assets/svg/report.svg';
+import svgReport from '@/assets/svg/report.svg?raw';
 
 export default {
   directives: {

website/client/src/components/chat/autoComplete.vue

@@ -34,8 +34,8 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/tiers.scss';
+  @import '@/assets/scss/tiers.scss';
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .autocomplete-results {
     padding: .5em;
@@ -74,16 +74,16 @@
 <script>
 import groupBy from 'lodash/groupBy';
 import styleHelper from '@/mixins/styleHelper';
-import tier1 from '@/assets/svg/tier-1.svg';
+import tier1 from '@/assets/svg/tier-1.svg?raw';
-import tier2 from '@/assets/svg/tier-2.svg';
+import tier2 from '@/assets/svg/tier-2.svg?raw';
-import tier3 from '@/assets/svg/tier-3.svg';
+import tier3 from '@/assets/svg/tier-3.svg?raw';
-import tier4 from '@/assets/svg/tier-4.svg';
+import tier4 from '@/assets/svg/tier-4.svg?raw';
-import tier5 from '@/assets/svg/tier-5.svg';
+import tier5 from '@/assets/svg/tier-5.svg?raw';
-import tier6 from '@/assets/svg/tier-6.svg';
+import tier6 from '@/assets/svg/tier-6.svg?raw';
-import tier7 from '@/assets/svg/tier-7.svg';
+import tier7 from '@/assets/svg/tier-7.svg?raw';
-import tier8 from '@/assets/svg/tier-mod.svg';
+import tier8 from '@/assets/svg/tier-mod.svg?raw';
-import tier9 from '@/assets/svg/tier-staff.svg';
+import tier9 from '@/assets/svg/tier-staff.svg?raw';
-import tierNPC from '@/assets/svg/tier-npc.svg';
+import tierNPC from '@/assets/svg/tier-npc.svg?raw';
 
 export default {
   mixins: [styleHelper],

website/client/src/components/chat/chatCard.vue

@@ -1,352 +0,0 @@
-<template>
-  <div>
-    <div
-      v-if="isUserMentioned"
-      class="mentioned-icon"
-    ></div>
-    <div
-      v-if="hasPermission(user, 'moderator') && msg.flagCount"
-      class="message-hidden"
-    >
-      {{ flagCountDescription }}
-    </div>
-    <div class="card-body">
-      <user-link
-        :user-id="msg.uuid"
-        :name="msg.user"
-        :backer="msg.backer"
-        :contributor="msg.contributor"
-      />
-      <p class="time">
-        <span
-          v-if="msg.username"
-          class="mr-1"
-        >@{{ msg.username }}</span>
-        <span
-          v-if="msg.username"
-          class="mr-1"
-        >•</span>
-        <span
-          v-b-tooltip.hover="messageDate"
-        >{{ msg.timestamp | timeAgo }}&nbsp;</span>
-        <span v-if="msg.client && user.contributor.level >= 4">({{ msg.client }})</span>
-      </p>
-      <div
-        ref="markdownContainer"
-        class="text markdown"
-        dir="auto"
-        v-html="parseMarkdown(msg.text)"
-      ></div>
-      <hr>
-      <div
-        v-if="msg.id"
-        class="d-flex"
-      >
-        <div
-          class="action d-flex align-items-center"
-          @click="copyAsTodo(msg)"
-        >
-          <div
-            class="svg-icon"
-            v-html="icons.copy"
-          ></div>
-          <div>{{ $t('copyAsTodo') }}</div>
-        </div>
-        <div
-          v-if="(user.flags.communityGuidelinesAccepted && msg.uuid !== 'system')
-            && (!isMessageReported || hasPermission(user, 'moderator'))"
-          class="action d-flex align-items-center"
-          @click="report(msg)"
-        >
-          <div
-            v-once
-            class="svg-icon"
-            v-html="icons.report"
-          ></div>
-          <div v-once>
-            {{ $t('report') }}
-          </div>
-        </div>
-        <div
-          v-if="msg.uuid === user._id || hasPermission(user, 'moderator')"
-          class="action d-flex align-items-center"
-          @click="remove()"
-        >
-          <div
-            v-once
-            class="svg-icon"
-            v-html="icons.delete"
-          ></div>
-          <div v-once>
-            {{ $t('delete') }}
-          </div>
-        </div>
-        <div
-          v-b-tooltip="{title: likeTooltip(msg.likes[user._id])}"
-          class="ml-auto d-flex"
-        >
-          <div
-            v-if="likeCount > 0"
-            class="action d-flex align-items-center mr-0"
-            :class="{activeLike: msg.likes[user._id]}"
-            @click="like()"
-          >
-            <div
-              class="svg-icon"
-              :title="$t('liked')"
-              v-html="icons.liked"
-            ></div>
-            +{{ likeCount }}
-          </div>
-          <div
-            v-if="likeCount === 0"
-            class="action d-flex align-items-center mr-0"
-            :class="{activeLike: msg.likes[user._id]}"
-            @click="like()"
-          >
-            <div
-              class="svg-icon"
-              :title="$t('like')"
-              v-html="icons.like"
-            ></div>
-          </div>
-        </div>
-        <span v-if="!msg.likes[user._id]">{{ $t('like') }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-  .at-highlight {
-    background-color: rgba(213, 200, 255, 0.32);
-    padding: 0.1rem;
-  }
-
-  .at-text {
-    color: #6133b4;
-  }
-</style>
-
-<style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
-
-  .mentioned-icon {
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    background-color: #bda8ff;
-    box-shadow: 0 1px 1px 0 rgba(26, 24, 29, 0.12);
-    position: absolute;
-    right: -.5em;
-    top: -.5em;
-  }
-
-  .message-hidden {
-    margin-left: 1.5em;
-    margin-top: 1em;
-    color: red;
-  }
-
-  hr {
-    margin-bottom: 0.5rem;
-    margin-top: 0.5rem;
-  }
-
-  .card-body {
-    padding: 0.75rem 1.25rem 0.75rem 1.25rem;
-
-    .time {
-      font-size: 12px;
-      color: #878190;
-      margin-bottom: 0.5rem;
-    }
-
-    .text {
-      font-size: 14px;
-      color: #4e4a57;
-      text-align: initial;
-      min-height: 0rem;
-    }
-  }
-
-  .action {
-    display: inline-block;
-    color: #878190;
-    margin-right: 1em;
-    font-size: 12px;
-
-    :hover {
-      cursor: pointer;
-    }
-
-    .svg-icon {
-      color: #A5A1AC;
-      margin-right: .2em;
-      width: 16px;
-    }
-  }
-
-  .activeLike {
-    color: $purple-300;
-
-    .svg-icon {
-      color: $purple-400;
-    }
-  }
-</style>
-
-<script>
-import moment from 'moment';
-import cloneDeep from 'lodash/cloneDeep';
-import escapeRegExp from 'lodash/escapeRegExp';
-
-import { CHAT_FLAG_LIMIT_FOR_HIDING, CHAT_FLAG_FROM_SHADOW_MUTE } from '@/../../common/script/constants';
-import renderWithMentions from '@/libs/renderWithMentions';
-import { userStateMixin } from '../../mixins/userState';
-import userLink from '../userLink';
-
-import deleteIcon from '@/assets/svg/delete.svg';
-import copyIcon from '@/assets/svg/copy.svg';
-import likeIcon from '@/assets/svg/like.svg';
-import likedIcon from '@/assets/svg/liked.svg';
-import reportIcon from '@/assets/svg/report.svg';
-
-export default {
-  components: { userLink },
-  filters: {
-    timeAgo (value) {
-      return moment(value).fromNow();
-    },
-    date (value) {
-      // @TODO: Vue doesn't support this so we cant user preference
-      return moment(value).toDate().toString();
-    },
-  },
-  mixins: [userStateMixin],
-  props: {
-    msg: {},
-    groupId: {},
-  },
-  data () {
-    return {
-      icons: Object.freeze({
-        like: likeIcon,
-        copy: copyIcon,
-        report: reportIcon,
-        delete: deleteIcon,
-        liked: likedIcon,
-      }),
-      reported: false,
-    };
-  },
-  computed: {
-    isUserMentioned () {
-      const message = this.msg;
-
-      if (message.highlight) return true;
-
-      const { user } = this;
-      const displayName = user.profile.name;
-      const { username } = user.auth.local;
-      const pattern = `@(${escapeRegExp(displayName)}|${escapeRegExp(username)})(\\b)`;
-      message.highlight = new RegExp(pattern, 'i').test(message.text);
-
-      return message.highlight;
-    },
-    likeCount () {
-      const message = this.msg;
-      if (!message.likes) return 0;
-
-      let likeCount = 0;
-      for (const key of Object.keys(message.likes)) {
-        const like = message.likes[key];
-        if (like) likeCount += 1;
-      }
-      return likeCount;
-    },
-    isMessageReported () {
-      return (this.msg.flags && this.msg.flags[this.user.id]) || this.reported;
-    },
-    flagCountDescription () {
-      if (!this.msg.flagCount) return '';
-      if (this.msg.flagCount < CHAT_FLAG_LIMIT_FOR_HIDING) return 'Message flagged once, not hidden';
-      if (this.msg.flagCount < CHAT_FLAG_FROM_SHADOW_MUTE) return 'Message hidden';
-      return 'Message hidden (shadow-muted)';
-    },
-    messageDate () {
-      const date = moment(this.msg.timestamp).toDate();
-      return date.toString();
-    },
-  },
-  mounted () {
-    const links = this.$refs.markdownContainer.getElementsByTagName('a');
-    for (let i = 0; i < links.length; i += 1) {
-      let link = links[i].pathname;
-
-      // Internet Explorer does not provide the leading slash character in the pathname
-      link = link.charAt(0) === '/' ? link : `/${link}`;
-
-      if (link.startsWith('/profile/')) {
-        links[i].onclick = ev => {
-          ev.preventDefault();
-          this.$router.push({ path: link });
-        };
-      }
-    }
-    this.CHAT_FLAG_LIMIT_FOR_HIDING = CHAT_FLAG_LIMIT_FOR_HIDING;
-    this.CHAT_FLAG_FROM_SHADOW_MUTE = CHAT_FLAG_FROM_SHADOW_MUTE;
-    this.$emit('chat-card-mounted', this.msg.id);
-  },
-  methods: {
-    async like () {
-      const message = cloneDeep(this.msg);
-
-      await this.$store.dispatch('chat:like', {
-        groupId: this.groupId,
-        chatId: message.id,
-      });
-
-      message.likes[this.user._id] = !message.likes[this.user._id];
-
-      this.$emit('message-liked', message);
-      this.$root.$emit('bv::hide::tooltip');
-    },
-    likeTooltip (likedStatus) {
-      if (!likedStatus) return this.$t('like');
-      return null;
-    },
-    copyAsTodo (message) {
-      this.$root.$emit('habitica::copy-as-todo', message);
-    },
-    report () {
-      this.$root.$on('habitica:report-result', data => {
-        if (data.ok) {
-          this.reported = true;
-        }
-
-        this.$root.$off('habitica:report-result');
-      });
-
-      this.$root.$emit('habitica::report-chat', {
-        message: this.msg,
-        groupId: this.groupId || 'privateMessage',
-      });
-    },
-    async remove () {
-      if (!window.confirm(this.$t('areYouSureDeleteMessage'))) return; // eslint-disable-line no-alert
-
-      const message = this.msg;
-      this.$emit('message-removed', message);
-
-      await this.$store.dispatch('chat:deleteChat', {
-        groupId: this.groupId,
-        chatId: message.id,
-      });
-    },
-    parseMarkdown (text) {
-      return renderWithMentions(text, this.user);
-    },
-  },
-};
-</script>

website/client/src/components/chat/chatMessages.vue

@@ -3,15 +3,6 @@
     ref="container"
     class="container-fluid"
   >
-    <div class="row">
-      <div class="col-12">
-        <copy-as-todo-modal
-          :group-type="groupType"
-          :group-name="groupName"
-          :group-id="groupId"
-        />
-      </div>
-    </div>
     <div class="row loadmore">
       <div v-if="canLoadMore">
         <div class="loadmore-divider"></div>
@@ -33,6 +24,8 @@
     <div
       v-for="msg in messages.filter(m => chat && canViewFlag(m))"
       :key="msg.id"
+      class="message-row"
+      :class="{ 'margin-right': user._id !== msg.uuid}"
     >
       <div class="d-flex">
         <avatar
@@ -45,16 +38,14 @@
           :override-top-padding="'14px'"
           @click.native="showMemberModal(msg.uuid)"
         />
-        <div class="card">
+        <message-card
-          <chat-card
+          :msg="msg"
-            :msg="msg"
+          :group-id="groupId"
-            :group-id="groupId"
+          :user-sent-message="user._id === msg.uuid"
-            @message-liked="messageLiked"
+          @message-liked="messageLiked"
-            @message-removed="messageRemoved"
+          @message-removed="messageRemoved"
-            @show-member-modal="showMemberModal"
+          @message-card-mounted="itemWasMounted"
-            @chat-card-mounted="itemWasMounted"
+        />
-          />
-        </div>
         <avatar
           v-if="user._id === msg.uuid"
           :class="{ invisible: avatarUnavailable(msg) }"
@@ -70,7 +61,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .avatar {
     width: 10%;
@@ -137,11 +128,27 @@
     margin-bottom: .5em;
     padding: 0rem;
     width: 90%;
+
+    &.system-message {
+      width: 100%;
+    }
   }
 
   .message-scroll .d-flex {
     min-width: 1px;
   }
+
+  .message-row {
+    margin-left: 12px;
+    margin-right: 0;
+    margin-bottom: 1.2rem;
+
+    &:not(.margin-right) {
+      .d-flex {
+        justify-content: flex-end;
+      }
+    }
+  }
 </style>
 
 <script>
@@ -152,13 +159,13 @@ import findIndex from 'lodash/findIndex';
 import { userStateMixin } from '../../mixins/userState';
 
 import Avatar from '../avatar';
-import copyAsTodoModal from './copyAsTodoModal';
+import MessageCard from '@/components/messages/messageCard.vue';
-import chatCard from './chatCard';
+
+// TODO merge chatMessages.vue (party message list) with messageList.vue (private message list)
 
 export default {
   components: {
-    copyAsTodoModal,
+    MessageCard,
-    chatCard,
     Avatar,
   },
   mixins: [userStateMixin],

website/client/src/components/chat/copyAsTodoModal.vue

@@ -1,105 +0,0 @@
-<template>
-  <b-modal
-    id="copyAsTodo"
-    :title="$t('copyMessageAsToDo')"
-    :hide-footer="true"
-    size="md"
-  >
-    <div class="form-group">
-      <input
-        v-model="task.text"
-        class="form-control"
-        type="text"
-      >
-    </div>
-    <div class="form-group">
-      <textarea
-        v-model="task.notes"
-        class="form-control"
-        rows="5"
-        focus-element="true"
-      ></textarea>
-    </div>
-    <hr>
-    <task
-      v-if="task._id"
-      :is-user="isUser"
-      :task="task"
-    />
-    <div class="modal-footer">
-      <button
-        class="btn btn-secondary"
-        @click="close()"
-      >
-        {{ $t('close') }}
-      </button>
-      <button
-        class="btn btn-primary"
-        @click="saveTodo()"
-      >
-        {{ $t('submit') }}
-      </button>
-    </div>
-  </b-modal>
-</template>
-
-<script>
-import taskDefaults from '@/../../common/script/libs/taskDefaults';
-import { mapActions } from '@/libs/store';
-import markdownDirective from '@/directives/markdown';
-import notificationsMixin from '@/mixins/notifications';
-import Task from '@/components/tasks/task';
-
-const baseUrl = 'https://habitica.com';
-
-export default {
-  directives: {
-    markdown: markdownDirective,
-  },
-  components: {
-    Task,
-  },
-  mixins: [notificationsMixin],
-  props: ['copyingMessage', 'groupType', 'groupName', 'groupId'],
-  data () {
-    return {
-      isUser: true,
-      task: {},
-    };
-  },
-  mounted () {
-    this.$root.$on('habitica::copy-as-todo', message => {
-      const notes = `${message.user || 'system message'}${message.user ? ' wrote' : ''} in [${this.groupName}](${this.groupPath()})`;
-      const newTask = {
-        text: message.text,
-        type: 'todo',
-        notes,
-      };
-      this.task = taskDefaults(newTask, this.$store.state.user.data);
-      this.$root.$emit('bv::show::modal', 'copyAsTodo');
-    });
-  },
-  beforeDestroy () {
-    this.$root.$off('habitica::copy-as-todo');
-  },
-  methods: {
-    ...mapActions({
-      createTask: 'tasks:create',
-    }),
-    groupPath () {
-      if (this.groupType === 'party') {
-        return `${baseUrl}/party`;
-      }
-      return `${baseUrl}/groups/guild/${this.groupId}`;
-    },
-    close () {
-      this.$root.$emit('bv::hide::modal', 'copyAsTodo');
-    },
-    saveTodo () {
-      this.createTask(this.task);
-      this.text(this.$t('messageAddedAsToDo'));
-      this.$root.$emit('bv::hide::modal', 'copyAsTodo');
-    },
-  },
-};
-</script>

website/client/src/components/chat/reportFlagModal.vue

@@ -95,7 +95,7 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
    .modal-body {
      padding: 0px 8px 0px 8px;
@@ -199,7 +199,7 @@
 import notifications from '@/mixins/notifications';
 import markdownDirective from '@/directives/markdown';
 import { userStateMixin } from '../../mixins/userState';
-import svgClose from '@/assets/svg/close.svg';
+import svgClose from '@/assets/svg/close.svg?raw';
 
 export default {
   directives: {

website/client/src/components/creatorIntro.vue

@@ -572,7 +572,7 @@
 </template>
 
 <style lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   $dialogMarginTop: 56px;
   $userCreationBgHeight:  105px;
@@ -671,7 +671,7 @@
     }
 
     .user-creation-bg {
-      background-image: url('~@/assets/creator/creator-hills-bg.png');
+      background-image: url('@/assets/creator/creator-hills-bg.png');
       height: $userCreationBgHeight;
       width: 219px;
       margin: 0 auto;
@@ -1001,18 +1001,18 @@ import hairSettings from './avatarModal/hair-settings';
 import extraSettings from './avatarModal/extra-settings';
 import closeX from './ui/closeX';
 
-import logoPurple from '@/assets/svg/logo-purple.svg';
+import logoPurple from '@/assets/svg/logo-purple.svg?raw';
-import bodyIcon from '@/assets/svg/body.svg';
+import bodyIcon from '@/assets/svg/body.svg?raw';
-import accessoriesIcon from '@/assets/svg/accessories.svg';
+import accessoriesIcon from '@/assets/svg/accessories.svg?raw';
-import skinIcon from '@/assets/svg/skin.svg';
+import skinIcon from '@/assets/svg/skin.svg?raw';
-import hairIcon from '@/assets/svg/hair.svg';
+import hairIcon from '@/assets/svg/hair.svg?raw';
-import backgroundsIcon from '@/assets/svg/backgrounds.svg';
+import backgroundsIcon from '@/assets/svg/backgrounds.svg?raw';
-import gem from '@/assets/svg/gem.svg';
+import gem from '@/assets/svg/gem.svg?raw';
-import hourglass from '@/assets/svg/hourglass.svg';
+import hourglass from '@/assets/svg/hourglass.svg?raw';
-import gold from '@/assets/svg/gold.svg';
+import gold from '@/assets/svg/gold.svg?raw';
-import arrowRight from '@/assets/svg/arrow_right.svg';
+import arrowRight from '@/assets/svg/arrow_right.svg?raw';
-import arrowLeft from '@/assets/svg/arrow_left.svg';
+import arrowLeft from '@/assets/svg/arrow_left.svg?raw';
-import svgClose from '@/assets/svg/close.svg';
+import svgClose from '@/assets/svg/close.svg?raw';
 import { avatarEditorUtilities } from '../mixins/avatarEditUtilities';
 import Sprite from './ui/sprite';
 

website/client/src/components/externalLinkModal.vue

@@ -60,7 +60,7 @@
 </template>
 
 <style lang="scss">
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
 
 #external-link-modal {
   &.modal {
@@ -174,8 +174,8 @@
 </style>
 
 <script>
-import exclamationIcon from '@/assets/svg/exclamation.svg';
+import exclamationIcon from '@/assets/svg/exclamation.svg?raw';
-import closeIcon from '@/assets/svg/new-close.svg';
+import closeIcon from '@/assets/svg/new-close.svg?raw';
 
 export default {
   data () {

website/client/src/components/faceAvatar.vue

@@ -39,7 +39,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .face-avatar {
     width: 36px;

website/client/src/components/group-plans/groupPlanCreationModal.vue

@@ -108,7 +108,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   h2 {
     color: $purple-300;
@@ -201,7 +201,7 @@
 
 </style>
 <style lang="scss">
-  @import '~@/assets/scss/mixins.scss';
+  @import '@/assets/scss/mixins.scss';
   #create-group {
     .modal-dialog {
       max-width: 448px;

website/client/src/components/group-plans/groupPlansUpdateModal.vue

@@ -28,9 +28,9 @@
       ></div>
       <img
         class="task-columns"
-        src="~@/assets/images/group-plans/task-columns.png"
+        src="@/assets/images/group-plans/task-columns.png"
-        srcset="~@/assets/images/group-plans/task-columns@2x.png 2x,
+        srcset="@/assets/images/group-plans/task-columns@2x.png 2x,
-          ~@/assets/images/group-plans/task-columns@3x.png 3x"
+          @/assets/images/group-plans/task-columns@3x.png 3x"
       >
     </div>
     <div
@@ -96,7 +96,7 @@
 </template>
 
 <style lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
   #group-plans-update {
     .modal-content {
       border-top-left-radius: 10px;
@@ -125,7 +125,7 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
   h2 {
     color: $white;
     line-height: 28px;
@@ -183,8 +183,8 @@
 </style>
 
 <script>
-import closeIcon from '@/assets/svg/close.svg';
+import closeIcon from '@/assets/svg/close.svg?raw';
-import sparkles from '@/assets/svg/sparkles-left.svg';
+import sparkles from '@/assets/svg/sparkles-left.svg?raw';
 
 export default {
   data () {

website/client/src/components/group-plans/taskInformation.vue

@@ -125,8 +125,8 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
-  @import '~@/assets/scss/create-task.scss';
+  @import '@/assets/scss/create-task.scss';
 
   h1 {
     color: $purple-300;
@@ -190,13 +190,13 @@ import toggleSwitch from '@/components/ui/toggleSwitch';
 
 import sync from '../../mixins/sync';
 
-import positiveIcon from '@/assets/svg/positive.svg';
+import positiveIcon from '@/assets/svg/positive.svg?raw';
-import filterIcon from '@/assets/svg/filter.svg';
+import filterIcon from '@/assets/svg/filter.svg?raw';
-import deleteIcon from '@/assets/svg/delete.svg';
+import deleteIcon from '@/assets/svg/delete.svg?raw';
-import habitIcon from '@/assets/svg/habit.svg';
+import habitIcon from '@/assets/svg/habit.svg?raw';
-import dailyIcon from '@/assets/svg/daily.svg';
+import dailyIcon from '@/assets/svg/daily.svg?raw';
-import todoIcon from '@/assets/svg/todo.svg';
+import todoIcon from '@/assets/svg/todo.svg?raw';
-import rewardIcon from '@/assets/svg/reward.svg';
+import rewardIcon from '@/assets/svg/reward.svg?raw';
 
 import * as Analytics from '@/libs/analytics';
 import { mapState } from '@/libs/store';

website/client/src/components/groups/chat.vue

@@ -22,13 +22,13 @@
           :placeholder="placeholder"
           :class="{'user-entry': newMessage}"
           :maxlength="MAX_MESSAGE_LENGTH"
-          @keydown="updateCarretPosition"
+          @keydown="autoCompleteMixinUpdateCarretPosition"
           @keyup.ctrl.enter="sendMessageShortcut()"
-          @keydown.tab="handleTab($event)"
+          @keydown.tab="autoCompleteMixinHandleTab($event)"
-          @keydown.up="selectPreviousAutocomplete($event)"
+          @keydown.up="autoCompleteMixinSelectPreviousAutocomplete($event)"
-          @keydown.down="selectNextAutocomplete($event)"
+          @keydown.down="autoCompleteMixinSelectNextAutocomplete($event)"
-          @keypress.enter="selectAutocomplete($event)"
+          @keypress.enter="autoCompleteMixinSelectAutocomplete($event)"
-          @keydown.esc="handleEscape($event)"
+          @keydown.esc="autoCompleteMixinHandleEscape($event)"
           @paste="disableMessageSendShortcut()"
         ></textarea>
         <span>{{ currentLength }} / {{ MAX_MESSAGE_LENGTH }}</span>
@@ -36,8 +36,8 @@
           ref="autocomplete"
           :text="newMessage"
           :textbox="textbox"
-          :coords="coords"
+          :coords="mixinData.autoComplete.coords"
-          :caret-position="caretPosition"
+          :caret-position="mixinData.autoComplete.caretPosition"
           :chat="group.chat"
           @select="selectedAutocomplete"
         />
@@ -74,7 +74,7 @@
       <slot name="additionRow"></slot>
       <div class="row">
         <div class="hr col-12"></div>
-        <chat-message
+        <chat-messages
           :chat.sync="group.chat"
           :group-type="group.type"
           :group-id="group._id"
@@ -86,16 +86,15 @@
 </template>
 
 <script>
-import debounce from 'lodash/debounce';
-
 import { MAX_MESSAGE_LENGTH } from '@/../../common/script/constants';
 import externalLinks from '../../mixins/externalLinks';
 
 import autocomplete from '../chat/autoComplete';
 import communityGuidelines from './communityGuidelines';
-import chatMessage from '../chat/chatMessages';
+import chatMessages from '../chat/chatMessages';
 import { mapState } from '@/libs/store';
 import markdownDirective from '@/directives/markdown';
+import { autoCompleteHelperMixin } from '@/mixins/autoCompleteHelper';
 
 export default {
   directives: {
@@ -104,23 +103,18 @@ export default {
   components: {
     autocomplete,
     communityGuidelines,
-    chatMessage,
+    chatMessages,
   },
-  mixins: [externalLinks],
+  mixins: [externalLinks, autoCompleteHelperMixin],
   props: ['label', 'group', 'placeholder'],
   data () {
     return {
       newMessage: '',
       sending: false,
-      caretPosition: 0,
       chat: {
         submitDisable: false,
         submitTimeout: null,
       },
-      coords: {
-        TOP: 0,
-        LEFT: 0,
-      },
       textbox: null,
       MAX_MESSAGE_LENGTH: MAX_MESSAGE_LENGTH.toString(),
     };
@@ -142,35 +136,6 @@ export default {
     this.handleExternalLinks();
   },
   methods: {
-    // https://medium.com/@_jh3y/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a
-    getCoord (e, text) {
-      this.caretPosition = text.selectionEnd;
-      const div = document.createElement('div');
-      const span = document.createElement('span');
-      const copyStyle = getComputedStyle(text);
-
-      [].forEach.call(copyStyle, prop => {
-        div.style[prop] = copyStyle[prop];
-      });
-
-      div.style.position = 'absolute';
-      document.body.appendChild(div);
-      div.textContent = text.value.substr(0, this.caretPosition);
-      span.textContent = text.value.substr(this.caretPosition) || '.';
-      div.appendChild(span);
-      this.coords = {
-        TOP: span.offsetTop,
-        LEFT: span.offsetLeft,
-      };
-      document.body.removeChild(div);
-    },
-    updateCarretPosition: debounce(function updateCarretPosition (eventUpdate) {
-      this._updateCarretPosition(eventUpdate);
-    }, 250),
-    _updateCarretPosition (eventUpdate) {
-      const text = eventUpdate.target;
-      this.getCoord(eventUpdate, text);
-    },
     async sendMessageShortcut () {
       // If the user recently pasted in the text field, don't submit
       if (!this.chat.submitDisable) {
@@ -221,50 +186,6 @@ export default {
       }, 500);
     },
 
-    handleTab (e) {
-      if (this.$refs.autocomplete.searchActive) {
-        e.preventDefault();
-        if (e.shiftKey) {
-          this.$refs.autocomplete.selectPrevious();
-        } else {
-          this.$refs.autocomplete.selectNext();
-        }
-      }
-    },
-
-    handleEscape (e) {
-      if (this.$refs.autocomplete.searchActive) {
-        e.preventDefault();
-        this.$refs.autocomplete.cancel();
-      }
-    },
-
-    selectNextAutocomplete (e) {
-      if (this.$refs.autocomplete.searchActive) {
-        e.preventDefault();
-        this.$refs.autocomplete.selectNext();
-      }
-    },
-
-    selectPreviousAutocomplete (e) {
-      if (this.$refs.autocomplete.searchActive) {
-        e.preventDefault();
-        this.$refs.autocomplete.selectPrevious();
-      }
-    },
-
-    selectAutocomplete (e) {
-      if (this.$refs.autocomplete.searchActive) {
-        if (this.$refs.autocomplete.selected !== null) {
-          e.preventDefault();
-          this.$refs.autocomplete.makeSelection();
-        } else {
-          // no autocomplete selected, newline instead
-          this.$refs.autocomplete.cancel();
-        }
-      }
-    },
-
     selectedAutocomplete (newText, newCaret) {
       this.newMessage = newText;
       // Wait for v-modal to update
@@ -273,7 +194,6 @@ export default {
         this.textbox.focus();
       });
     },
-
     fetchRecentMessages () {
       this.$emit('fetchRecentMessages');
     },
@@ -284,10 +204,7 @@ export default {
   beforeRouteUpdate (to, from, next) {
     // Reset chat
     this.newMessage = '';
-    this.coords = {
+    this.autoCompleteMixinResetCoordsPosition();
-      TOP: 0,
-      LEFT: 0,
-    };
 
     next();
   },
@@ -295,8 +212,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
-  @import '~@/assets/scss/variables.scss';
+  @import '@/assets/scss/variables.scss';
 
   .chat-actions {
     margin-top: 1em;

website/client/src/components/groups/communityGuidelines.vue

@@ -21,7 +21,7 @@
 </template>
 
 <style lang="scss">
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
 
 .community-guidelines {
   background-color: rgba(135, 129, 144, 0.84);

website/client/src/components/groups/createPartyModal.vue

@@ -114,7 +114,7 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .copy-icon {
     width: 1rem;
@@ -163,7 +163,7 @@
     width: 100%;
 
     .quest_screen {
-      background-image: url('~@/assets/images/group@3x.png');
+      background-image: url('@/assets/images/group@3x.png');
       background-size: cover;
       width: 100%;
       height: 246px;
@@ -196,7 +196,7 @@
   }
 
   .join-party {
-    background-image: url('~@/assets/images/party.png');
+    background-image: url('@/assets/images/party.png');
     background-size: cover;
     width: 203px;
     height: 66px;
@@ -244,7 +244,7 @@ import * as Analytics from '@/libs/analytics';
 import notifications from '@/mixins/notifications';
 import closeX from '../ui/closeX';
 
-import copyIcon from '@/assets/svg/copy.svg';
+import copyIcon from '@/assets/svg/copy.svg?raw';
 import copyToClipboard from '@/mixins/copyToClipboard';
 
 export default {

website/client/src/components/groups/discovery.vue

@@ -65,7 +65,7 @@ b-dropdown(:text="$t('sort')", right=true)
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .sort-select {
     margin: 2em;
@@ -95,7 +95,7 @@ import PublicGuildItem from './publicGuildItem';
 import Sidebar from './groupSidebar';
 import groupUtilities from '@/mixins/groupsUtilities';
 
-import positiveIcon from '@/assets/svg/positive.svg';
+import positiveIcon from '@/assets/svg/positive.svg?raw';
 
 function _mapCategories (guilds) {
   guilds.forEach(guild => {

website/client/src/components/groups/group.vue

@@ -115,7 +115,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   @media (min-width: 1300px) {
     .standard-page {
@@ -297,17 +297,17 @@ import markdownDirective from '@/directives/markdown';
 import chat from './chat';
 import userLink from '../userLink';
 
-import deleteIcon from '@/assets/svg/delete.svg';
+import deleteIcon from '@/assets/svg/delete.svg?raw';
-import copyIcon from '@/assets/svg/copy.svg';
+import copyIcon from '@/assets/svg/copy.svg?raw';
-import likeIcon from '@/assets/svg/like.svg';
+import likeIcon from '@/assets/svg/like.svg?raw';
-import likedIcon from '@/assets/svg/liked.svg';
+import likedIcon from '@/assets/svg/liked.svg?raw';
-import reportIcon from '@/assets/svg/report.svg';
+import reportIcon from '@/assets/svg/report.svg?raw';
-import gemIcon from '@/assets/svg/gem.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
-import questIcon from '@/assets/svg/quest.svg';
+import questIcon from '@/assets/svg/quest.svg?raw';
-import questBackground from '@/assets/svg/quest-background-border.svg';
+import questBackground from '@/assets/svg/quest-background-border.svg?raw';
-import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-small.svg';
+import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-small.svg?raw';
-import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-small.svg';
+import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-small.svg?raw';
-import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-small.svg';
+import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-small.svg?raw';
 import QuestDetailModal from './questDetailModal';
 import RightSidebar from '@/components/groups/rightSidebar';
 import InvitationListModal from './invitationListModal';

website/client/src/components/groups/groupFormModal.vue

@@ -312,7 +312,7 @@ label.custom-control-label(v-once) {{ $t('allowGuildInvitationsFromNonMembers')
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .custom-control-input {
     z-index: 1 !important;
@@ -376,8 +376,8 @@ import { MAX_SUMMARY_SIZE_FOR_GUILDS } from '@/../../common/script/constants';
 import CategoryOptions from '@/../../common/script/content/categoryOptions';
 import toggleSwitch from '@/components/ui/toggleSwitch';
 import markdownDirective from '@/directives/markdown';
-import gemIcon from '@/assets/svg/gem.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
-import informationIcon from '@/assets/svg/information.svg';
+import informationIcon from '@/assets/svg/information.svg?raw';
 
 import { userStateMixin } from '../../mixins/userState';
 

website/client/src/components/groups/invitationListModal.vue

@@ -79,7 +79,7 @@
 </template>
 
 <style lang='scss'>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   #invitation-list {
     .modal-header {
@@ -127,7 +127,7 @@
 </style>
 
 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .header-wrap {
     width: 100%;
@@ -242,8 +242,8 @@ import CloseIcon from '../shared/closeIcon';
 import ClassBadge from '../members/classBadge';
 import UserLabel from '../userLabel';
 
-import svgClose from '@/assets/svg/close.svg';
+import svgClose from '@/assets/svg/close.svg?raw';
-import svgCheck from '@/assets/svg/check.svg';
+import svgCheck from '@/assets/svg/check.svg?raw';
 
 export default {
   components: {

website/client/src/components/groups/inviteModal.vue

@@ -75,7 +75,7 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   a:not([href]) {
     font-size: 16px;
@@ -126,7 +126,7 @@ import isEmail from 'validator/es/lib/isEmail';
 import isUUID from 'validator/es/lib/isUUID';
 import { mapState } from '@/libs/store';
 import notifications from '@/mixins/notifications';
-import positiveIcon from '@/assets/svg/positive.svg';
+import positiveIcon from '@/assets/svg/positive.svg?raw';
 
 const INVITE_DEFAULTS = { text: '', error: null, valid: null };
 

website/client/src/components/groups/lookingForParty.vue

@@ -128,7 +128,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   h1 {
     color: $purple-300;
@@ -252,12 +252,12 @@ import Avatar from '../avatar';
 import userLink from '../userLink';
 import { mapState } from '@/libs/store';
 
-import syncIcon from '@/assets/svg/sync-2.svg';
+import syncIcon from '@/assets/svg/sync-2.svg?raw';
-import usersIcon from '@/assets/svg/users.svg';
+import usersIcon from '@/assets/svg/users.svg?raw';
-import warriorIcon from '@/assets/svg/warrior.svg';
+import warriorIcon from '@/assets/svg/warrior.svg?raw';
-import rogueIcon from '@/assets/svg/rogue.svg';
+import rogueIcon from '@/assets/svg/rogue.svg?raw';
-import healerIcon from '@/assets/svg/healer.svg';
+import healerIcon from '@/assets/svg/healer.svg?raw';
-import wizardIcon from '@/assets/svg/wizard.svg';
+import wizardIcon from '@/assets/svg/wizard.svg?raw';
 
 export default {
   components: {

website/client/src/components/groups/membersModal.vue

@@ -278,7 +278,7 @@
 </style>
 
 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .apply-options {
     padding: 1em;
@@ -372,10 +372,10 @@ import isEmpty from 'lodash/isEmpty';
 import removeMemberModal from '@/components/members/removeMemberModal';
 import loadingGryphon from '@/components/ui/loadingGryphon';
 import MemberDetails from '../memberDetails';
-import blockIcon from '@/assets/svg/block.svg';
+import blockIcon from '@/assets/svg/block.svg?raw';
-import messageIcon from '@/assets/members/message.svg';
+import messageIcon from '@/assets/members/message.svg?raw';
-import starIcon from '@/assets/members/star.svg';
+import starIcon from '@/assets/members/star.svg?raw';
-import dots from '@/assets/svg/dots.svg';
+import dots from '@/assets/svg/dots.svg?raw';
 import SelectList from '@/components/ui/selectList';
 import { PAGES } from '@/libs/consts';
 import { userStateMixin } from '../../mixins/userState';

website/client/src/components/groups/myGuilds.vue

@@ -81,7 +81,7 @@ b-dropdown(:text="$t('sort')", right=true)
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
   .sort-select {
     margin: 2em;
   }
@@ -115,8 +115,8 @@ import groupUtilities from '@/mixins/groupsUtilities';
 import PublicGuildItem from './publicGuildItem';
 import Sidebar from './groupSidebar';
 
-import greyBadgeIcon from '@/assets/svg/grey-badge.svg';
+import greyBadgeIcon from '@/assets/svg/grey-badge.svg?raw';
-import positiveIcon from '@/assets/svg/positive.svg';
+import positiveIcon from '@/assets/svg/positive.svg?raw';
 
 export default {
   components: { PublicGuildItem, Sidebar },

website/client/src/components/groups/participantListModal.vue

@@ -87,7 +87,7 @@
 </style>
 
 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .header-wrap {
     width: 100%;

website/client/src/components/groups/publicGuildItem.vue

@@ -109,7 +109,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .card-link {
     color: #4E4A57 !important;
@@ -218,10 +218,10 @@ import { mapState } from '@/libs/store';
 import categoryTags from '../categories/categoryTags';
 import groupUtilities from '@/mixins/groupsUtilities';
 import markdown from '@/directives/markdown';
-import gemIcon from '@/assets/svg/gem.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
-import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-large.svg';
+import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-large.svg?raw';
-import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-large.svg';
+import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-large.svg?raw';
-import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-large.svg';
+import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-large.svg?raw';
 
 export default {
   directives: {

website/client/src/components/groups/questDetailModal.vue

@@ -151,7 +151,7 @@
 </template>
 
 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   h2 {
     color: $purple-300;
@@ -308,7 +308,7 @@ import getItemInfo from '@/../../common/script/libs/getItemInfo';
 import { mapState } from '@/libs/store';
 import * as Analytics from '@/libs/analytics';
 
-import navigationBack from '@/assets/svg/navigation_back.svg';
+import navigationBack from '@/assets/svg/navigation_back.svg?raw';
 import questDialogContent from '../shops/quests/questDialogContent';
 import closeIcon from '../shared/closeIcon';
 import QuestRewards from '../shops/quests/questRewards';

website/client/src/components/groups/questSidebarSection.vue

@@ -269,7 +269,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .svg-icon {
     height: 25px;
@@ -645,10 +645,10 @@ import { mapState } from '@/libs/store';
 import sidebarSection from '../sidebarSection';
 import Sprite from '../ui/sprite';
 
-import questIcon from '@/assets/svg/quest.svg';
+import questIcon from '@/assets/svg/quest.svg?raw';
-import swordIcon from '@/assets/svg/sword.svg';
+import swordIcon from '@/assets/svg/sword.svg?raw';
-import rageIcon from '@/assets/svg/rage.svg';
+import rageIcon from '@/assets/svg/rage.svg?raw';
-import healthNoPaddingIcon from '@/assets/svg/health_no_padding.svg';
+import healthNoPaddingIcon from '@/assets/svg/health_no_padding.svg?raw';
 import questActionsMixin from '@/components/groups/questActions.mixin';
 
 export default {

website/client/src/components/groups/rightSidebar.vue

@@ -143,12 +143,12 @@ import questSidebarSection from '@/components/groups/questSidebarSection';
 import sidebarSection from '@/components/sidebarSection';
 import markdownDirective from '@/directives/markdown';
 
-import menuIcon from '@/assets/svg/menu.svg';
+import menuIcon from '@/assets/svg/menu.svg?raw';
-import sparklesIcon from '@/assets/svg/sparklesIcon.svg';
+import sparklesIcon from '@/assets/svg/sparklesIcon.svg?raw';
-import leaveIcon from '@/assets/svg/leave.svg';
+import leaveIcon from '@/assets/svg/leave.svg?raw';
-import editIcon from '@/assets/svg/edit.svg';
+import editIcon from '@/assets/svg/edit.svg?raw';
-import messageIcon from '@/assets/svg/message.svg';
+import messageIcon from '@/assets/svg/message.svg?raw';
-import usersIcon from '@/assets/svg/users.svg';
+import usersIcon from '@/assets/svg/users.svg?raw';
 
 export default {
   components: {
@@ -181,7 +181,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   @media (min-width: 1300px) {
     .sidebar {

website/client/src/components/groups/tavern.vue

@@ -157,12 +157,12 @@
                     <img
                       v-if="!group.quest.extra.worldDmg.seasonalShop"
                       class="rage-strike"
-                      src="~@/assets/images/world-boss/rage_strike@2x.png"
+                      src="@/assets/images/world-boss/rage_strike@2x.png"
                     >
                     <img
                       v-if="group.quest.extra.worldDmg.seasonalShop"
                       class="rage-strike-active"
-                      src="~@/assets/images/world-boss/rage_strike-seasonalShop@2x.png"
+                      src="@/assets/images/world-boss/rage_strike-seasonalShop@2x.png"
                     >
                   </div>
                   <div
@@ -172,12 +172,12 @@
                     <img
                       v-if="!group.quest.extra.worldDmg.market"
                       class="rage-strike"
-                      src="~@/assets/images/world-boss/rage_strike@2x.png"
+                      src="@/assets/images/world-boss/rage_strike@2x.png"
                     >
                     <img
                       v-if="group.quest.extra.worldDmg.market"
                       class="rage-strike-active"
-                      src="~@/assets/images/world-boss/rage_strike-market@2x.png"
+                      src="@/assets/images/world-boss/rage_strike-market@2x.png"
                     >
                   </div>
                   <div
@@ -187,12 +187,12 @@
                     <img
                       v-if="!group.quest.extra.worldDmg.quests"
                       class="rage-strike"
-                      src="~@/assets/images/world-boss/rage_strike@2x.png"
+                      src="@/assets/images/world-boss/rage_strike@2x.png"
                     >
                     <img
                       v-if="group.quest.extra.worldDmg.quests"
                       class="rage-strike-active"
-                      src="~@/assets/images/world-boss/rage_strike-quests@2x.png"
+                      src="@/assets/images/world-boss/rage_strike-quests@2x.png"
                     >
                   </div>
                 </div>
@@ -486,7 +486,7 @@
 </template>
 
 <style lang='scss' scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   h1 {
     color: $purple-200;
@@ -756,25 +756,25 @@ import worldBossRageModal from '../world-boss/worldBossRageModal';
 import sidebarSection from '../sidebarSection';
 import chat from './chat';
 
-import challengeIcon from '@/assets/svg/challenge.svg';
+import challengeIcon from '@/assets/svg/challenge.svg?raw';
-import chevronIcon from '@/assets/svg/chevron-red.svg';
+import chevronIcon from '@/assets/svg/chevron-red.svg?raw';
-import gemIcon from '@/assets/svg/gem.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
-import healthIcon from '@/assets/svg/health.svg';
+import healthIcon from '@/assets/svg/health.svg?raw';
-import informationIconRed from '@/assets/svg/information-red.svg';
+import informationIconRed from '@/assets/svg/information-red.svg?raw';
-import questBackground from '@/assets/svg/quest-background-border.svg';
+import questBackground from '@/assets/svg/quest-background-border.svg?raw';
-import rageIcon from '@/assets/svg/rage.svg';
+import rageIcon from '@/assets/svg/rage.svg?raw';
-import swordIcon from '@/assets/svg/sword.svg';
+import swordIcon from '@/assets/svg/sword.svg?raw';
 
-import tier1 from '@/assets/svg/tier-1.svg';
+import tier1 from '@/assets/svg/tier-1.svg?raw';
-import tier2 from '@/assets/svg/tier-2.svg';
+import tier2 from '@/assets/svg/tier-2.svg?raw';
-import tier3 from '@/assets/svg/tier-3.svg';
+import tier3 from '@/assets/svg/tier-3.svg?raw';
-import tier4 from '@/assets/svg/tier-4.svg';
+import tier4 from '@/assets/svg/tier-4.svg?raw';
-import tier5 from '@/assets/svg/tier-5.svg';
+import tier5 from '@/assets/svg/tier-5.svg?raw';
-import tier6 from '@/assets/svg/tier-6.svg';
+import tier6 from '@/assets/svg/tier-6.svg?raw';
-import tier7 from '@/assets/svg/tier-7.svg';
+import tier7 from '@/assets/svg/tier-7.svg?raw';
-import tierMod from '@/assets/svg/tier-mod.svg';
+import tierMod from '@/assets/svg/tier-mod.svg?raw';
-import tierNPC from '@/assets/svg/tier-npc.svg';
+import tierNPC from '@/assets/svg/tier-npc.svg?raw';
-import tierStaff from '@/assets/svg/tier-staff.svg';
+import tierStaff from '@/assets/svg/tier-staff.svg?raw';
 
 import staffList from '../../libs/staffList';
 import reportBug from '@/mixins/reportBug.js';

website/client/src/components/header/banners/base.vue

@@ -20,7 +20,7 @@ body.modal-open .habitica-top-banner {
 </style>
 
 <style lang="scss" scoped>
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
 
 .habitica-top-banner {
   width: 100%;

website/client/src/components/header/banners/birthdayBanner.vue

@@ -41,7 +41,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .announce-text {
     color: $purple-50;
@@ -56,7 +56,7 @@
       rgba(255,190,93,1) 25%,
       rgba(255,190,93,1) 75%,
       rgba(255,190,93,0) 100%),
-      url('~@/assets/images/glitter.png');
+      url('@/assets/images/glitter.png');
     cursor: pointer;
   }
 
@@ -86,8 +86,8 @@ import find from 'lodash/find';
 import { mapState } from '@/libs/store';
 import BaseBanner from './base';
 
-import giftsBirthday from '@/assets/svg/gifts-birthday.svg';
+import giftsBirthday from '@/assets/svg/gifts-birthday.svg?raw';
-import tenBirthday from '@/assets/svg/10th-birthday-linear.svg';
+import tenBirthday from '@/assets/svg/10th-birthday-linear.svg?raw';
 
 export default {
   components: {

website/client/src/components/header/banners/chatBanner.vue

@@ -17,7 +17,7 @@
 </template>
 
 <style lang="scss">
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .chat-banner {
     width: 100%;

website/client/src/components/header/banners/damagePaused.vue

@@ -28,7 +28,7 @@
 </template>
 
 <style lang="scss" scoped>
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
 
 .resting-banner {
   background-color: $blue-10;

website/client/src/components/header/banners/gemsPromo.vue

@@ -15,62 +15,62 @@
         v-if="eventName === 'fall_extra_gems'"
         class="d-none d-xl-block"
         srcset="
-    ~@/assets/images/gems/fall-confetti-left/confetti.png,
+    @/assets/images/gems/fall-confetti-left/confetti.png,
-    ~@/assets/images/gems/fall-confetti-left/confetti@2x.png 2x,
+    @/assets/images/gems/fall-confetti-left/confetti@2x.png 2x,
-    ~@/assets/images/gems/fall-confetti-left/confetti@3x.png 3x"
+    @/assets/images/gems/fall-confetti-left/confetti@3x.png 3x"
-        src="~@/assets/images/gems/fall-confetti-left/confetti.png"
+        src="@/assets/images/gems/fall-confetti-left/confetti.png"
       >
       <img
         v-else-if="eventName === 'spooky_extra_gems'"
         class="d-none d-xl-block"
         srcset="
-    ~@/assets/images/gems/spooky-confetti-left/confetti.png,
+    @/assets/images/gems/spooky-confetti-left/confetti.png,
-    ~@/assets/images/gems/spooky-confetti-left/confetti@2x.png 2x,
+    @/assets/images/gems/spooky-confetti-left/confetti@2x.png 2x,
-    ~@/assets/images/gems/spooky-confetti-left/confetti@3x.png 3x"
+    @/assets/images/gems/spooky-confetti-left/confetti@3x.png 3x"
-        src="~@/assets/images/gems/spooky-confetti-left/confetti.png"
+        src="@/assets/images/gems/spooky-confetti-left/confetti.png"
       >
       <div class="promo-test">
         <img
           v-if="eventName === 'fall_extra_gems'"
           srcset="
-      ~@/assets/images/gems/fall-text/text.png,
+      @/assets/images/gems/fall-text/text.png,
-      ~@/assets/images/gems/fall-text/text@2x.png 2x,
+      @/assets/images/gems/fall-text/text@2x.png 2x,
-      ~@/assets/images/gems/fall-text/text@3x.png 3x"
+      @/assets/images/gems/fall-text/text@3x.png 3x"
-          src="~@/assets/images/gems/fall-text/text.png"
+          src="@/assets/images/gems/fall-text/text.png"
         >
         <img
           v-else-if="eventName === 'spooky_extra_gems'"
           srcset="
-      ~@/assets/images/gems/spooky-text/text.png,
+      @/assets/images/gems/spooky-text/text.png,
-      ~@/assets/images/gems/spooky-text/text@2x.png 2x,
+      @/assets/images/gems/spooky-text/text@2x.png 2x,
-      ~@/assets/images/gems/spooky-text/text@3x.png 3x"
+      @/assets/images/gems/spooky-text/text@3x.png 3x"
-          src="~@/assets/images/gems/spooky-text/text.png"
+          src="@/assets/images/gems/spooky-text/text.png"
         >
       </div>
       <img
         v-if="eventName === 'fall_extra_gems'"
         class="d-none d-xl-block"
         srcset="
-    ~@/assets/images/gems/fall-confetti-right/confetti.png,
+    @/assets/images/gems/fall-confetti-right/confetti.png,
-    ~@/assets/images/gems/fall-confetti-right/confetti@2x.png 2x,
+    @/assets/images/gems/fall-confetti-right/confetti@2x.png 2x,
-    ~@/assets/images/gems/fall-confetti-right/confetti@3x.png 3x"
+    @/assets/images/gems/fall-confetti-right/confetti@3x.png 3x"
-        src="~@/assets/images/gems/fall-confetti-right/confetti.png"
+        src="@/assets/images/gems/fall-confetti-right/confetti.png"
       >
       <img
         v-else-if="eventName === 'spooky_extra_gems'"
         class="d-none d-xl-block"
         srcset="
-    ~@/assets/images/gems/spooky-confetti-right/confetti.png,
+    @/assets/images/gems/spooky-confetti-right/confetti.png,
-    ~@/assets/images/gems/spooky-confetti-right/confetti@2x.png 2x,
+    @/assets/images/gems/spooky-confetti-right/confetti@2x.png 2x,
-    ~@/assets/images/gems/spooky-confetti-right/confetti@3x.png 3x"
+    @/assets/images/gems/spooky-confetti-right/confetti@3x.png 3x"
-        src="~@/assets/images/gems/spooky-confetti-right/confetti.png"
+        src="@/assets/images/gems/spooky-confetti-right/confetti.png"
       >
     </div>
   </base-banner>
 </template>
 
 <style lang="scss" scoped>
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
 
 .gems-promo-banner-fall_extra_gems {
   background: $gray-10;

website/client/src/components/header/banners/giftPromo.vue

@@ -34,7 +34,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   .announce-text {
     color: $white;
@@ -67,7 +67,7 @@ import find from 'lodash/find';
 import { mapState } from '@/libs/store';
 import BaseBanner from './base';
 
-import gifts from '@/assets/svg/gifts.svg';
+import gifts from '@/assets/svg/gifts.svg?raw';
 
 export default {
   components: {

website/client/src/components/header/index.vue

@@ -74,7 +74,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
 
   #app-header {
     padding-left: 24px;

website/client/src/components/header/menu.vue

@@ -402,9 +402,9 @@ body.modal-open #habitica-menu {
 </style>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/colors.scss';
-  @import '~@/assets/scss/utils.scss';
+  @import '@/assets/scss/utils.scss';
-  @import '~@/assets/scss/variables.scss';
+  @import '@/assets/scss/variables.scss';
 
   .menu-toggle {
     border: none;
@@ -417,7 +417,7 @@ body.modal-open #habitica-menu {
 
   .topbar {
     z-index: 1080;
-    background: $purple-100 url(~@/assets/svg/for-css/bits.svg) right top no-repeat;
+    background: $purple-100 url(@/assets/svg/for-css/bits.svg) right top no-repeat;
     min-height: 56px;
     box-shadow: 0 1px 2px 0 rgba($black, 0.24);
 
@@ -740,12 +740,12 @@ body.modal-open #habitica-menu {
 import { mapState, mapGetters } from '@/libs/store';
 import { goToModForm } from '@/libs/modform';
 
-import gemIcon from '@/assets/svg/gem.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
-import goldIcon from '@/assets/svg/gold.svg';
+import goldIcon from '@/assets/svg/gold.svg?raw';
-import syncIcon from '@/assets/svg/sync.svg';
+import syncIcon from '@/assets/svg/sync.svg?raw';
-import svgHourglasses from '@/assets/svg/hourglass.svg';
+import svgHourglasses from '@/assets/svg/hourglass.svg?raw';
-import chevronDownIcon from '@/assets/svg/chevron-down.svg';
+import chevronDownIcon from '@/assets/svg/chevron-down.svg?raw';
-import melior from '@/assets/svg/melior.svg';
+import melior from '@/assets/svg/melior.svg?raw';
 
 import creatorIntro from '../creatorIntro';
 import notificationMenu from './notificationsDropdown';

website/client/src/components/header/messageCount.functional.vue

@@ -7,7 +7,7 @@
 </template>
 
 <style lang="scss">
-@import '~@/assets/scss/colors.scss';
+@import '@/assets/scss/colors.scss';
 
 .message-count {
   background-color: $red-50;