attempt implementing prerendering

tell vite to ignore browser-script url
fix setupNconf imports
2025-10-27 03:02:30 +01:00 · 2025-02-04 17:43:30 +01:00 · 2025-02-04 17:42:55 +01:00 · 2025-02-04 12:29:33 +01:00 · 2025-02-04 11:21:08 +01:00 · 2025-02-03 18:22:17 +01:00
343 changed files with 11122 additions and 11349 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -1,12 +1,12 @@
 {
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          "node": true
+    "presets": [
+      [
+        "@babel/preset-env",
+        {
+          "targets": {
+            "node": true
+          }
        }
-      }
+      ]
    ]
-  ]
-}
+  }
--- a/.gitignore
+++ b/.gitignore
@@ -47,5 +47,5 @@ webpack.webstorm.config

 # mongodb replica set for local dev
 mongodb-*.tgz
-/mongodb-data
+/mongodb-data*
 /.nyc_output
--- a/gulp/gulp-start.js
+++ b/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();
-});
--- a/gulp/gulp-tests.js
+++ b/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);
--- a/gulpfile.js
+++ b/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
--- a/2
+++ b/2
--- a/migrations/archive/api_v3/groups.js
+++ b/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');
--- a/migrations/archive/api_v3/users.js
+++ b/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');
--- a/migrations/migration-runner.js
+++ b/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();

--- a/package-lock.json
+++ b/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",
-      "resolved": "https://registry.npmjs.org/moment-recur/-/moment-recur-1.0.7.tgz",
-      "integrity": "sha512-jpBQn6H62gCnEYjtYdLfK/VdPZHEXo1t8RrVItHVVS67SRvByyJBNBa3WQSGTe+8H0smcYO/79FYTA9LGMVdQw==",
+      "version": "1.0.8",
+      "resolved": "git+ssh://git@github.com/HabitRPG/moment-recur.git#d3e8e6da0806f13b74dd2e4d7d9053e6a63db119",
+      "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",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.22.tgz",
-      "integrity": "sha512-B8YqaKMmyuCO7BowF1Z1/mkPqLk6cs/l63Ojtd6otKjMx47Dq1utxfRxcavH1I7VSaL8n5BUaoutadnsX3AAVQ==",
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.9.tgz",
+      "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",
-        "simple-update-notifier": "^1.0.7",
+        "semver": "^7.5.3",
+        "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",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.0.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz",
-      "integrity": "sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
-      "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.0.tgz",
+      "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",
--- a/package.json
+++ b/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"
--- a/test/api/v3/integration/members/POST-send_private_message.test.js
+++ b/test/api/v3/integration/members/POST-send_private_message.test.js
--- a/test/api/v3/integration/members/GET-members_username.test.js
+++ b/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;
+  });
+});
--- a/test/api/v4/members/POST-flag_private_message.test.js
+++ b/test/api/v4/members/POST-flag_private_message.test.js
--- a/test/api/v4/inbox/POST-inbox_message_like.test.js
+++ b/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);
+  });
+});
--- a/test/helpers/globals.helper.js
+++ b/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');
--- a/test/helpers/start-server.js
+++ b/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');
--- a/website/client/.eslintrc.js
+++ b/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',
-  },
 };
--- a/website/client/babel.config.js
+++ b/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',
-  ],
-};
--- a/website/client/index-static.html
+++ b/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>
--- a/website/client/public/index.html
+++ b/website/client/public/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>
--- a/website/client/localePlugin.js
+++ b/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)}`;
+      }
+    },
+  }
+}
--- a/website/client/package-lock.json
+++ b/website/client/package-lock.json
--- a/website/client/package.json
+++ b/website/client/package.json
@@ -3,28 +3,25 @@
  "version": "1.0.0",
  "private": true,
  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit --require ./tests/unit/helpers.js",
-    "lint": "vue-cli-service lint .",
-    "lint-no-fix": "vue-cli-service lint --no-fix .",
+    "serve": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:unit": "vitest run",
+    "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",
-    "@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",
+    "@vitejs/plugin-vue2": "^2.3.3",
    "@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"
  }
 }
--- a/website/client/src/app.vue
+++ b/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',
--- a/website/client/src/assets/css/sprites/spritesmith-main.css
+++ b/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;
--- a/website/client/src/assets/scss/banner.scss
+++ b/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;
--- a/website/client/src/assets/scss/bootstrap.scss
+++ b/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';
--- a/website/client/src/assets/scss/button.scss
+++ b/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;
 }
--- a/website/client/src/assets/scss/dropdown.scss
+++ b/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 {
--- a/website/client/src/assets/scss/faq.scss
+++ b/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;
--- a/website/client/src/assets/scss/form.scss
+++ b/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;
    }

--- a/website/client/src/assets/scss/iconalert.scss
+++ b/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;
 }

--- a/website/client/src/assets/scss/modal.scss
+++ b/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;
--- a/website/client/src/assets/scss/static.scss
+++ b/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;
--- a/website/client/src/components/404.vue
+++ b/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;
--- a/website/client/src/components/achievements/chooseClass.vue
+++ b/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 rogueIcon from '@/assets/svg/rogue.svg';
-import healerIcon from '@/assets/svg/healer.svg';
-import wizardIcon from '@/assets/svg/wizard.svg';
+import warriorIcon from '@/assets/svg/warrior.svg?raw';
+import rogueIcon from '@/assets/svg/rogue.svg?raw';
+import healerIcon from '@/assets/svg/healer.svg?raw';
+import wizardIcon from '@/assets/svg/wizard.svg?raw';

 export default {
  components: {
--- a/website/client/src/components/achievements/firstDrops.vue
+++ b/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 {
--- a/website/client/src/components/achievements/genericAchievement.vue
+++ b/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 {
--- a/website/client/src/components/achievements/levelUp.vue
+++ b/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 sparkles from '@/assets/svg/sparkles-left.svg';
+import starGroup from '@/assets/svg/star-group.svg?raw';
+import sparkles from '@/assets/svg/sparkles-left.svg?raw';

 const levelQuests = {
  15: 'atom1',
--- a/website/client/src/components/achievements/onboardingComplete.vue
+++ b/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 () {
--- a/website/client/src/components/achievements/wonChallenge.vue
+++ b/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 gem from '@/assets/svg/gem.svg';
-import stars from '@/assets/svg/sparkles-left.svg';
+import sparkles from '@/assets/svg/star-group.svg?raw';
+import gem from '@/assets/svg/gem.svg?raw';
+import stars from '@/assets/svg/sparkles-left.svg?raw';
 import { mapState } from '@/libs/store';

 export default {
--- a/website/client/src/components/admin-panel/search.vue
+++ b/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"
--- a/website/client/src/components/admin-panel/user-support/cronAndAuth.vue
+++ b/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>
--- a/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
+++ b/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;
--- a/website/client/src/components/appFooter.vue
+++ b/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 twitter from '@/assets/svg/twitter.svg';
-import facebook from '@/assets/svg/facebook.svg';
-import instagram from '@/assets/svg/instagram.svg';
-import tumblr from '@/assets/svg/tumblr.svg';
-import heart from '@/assets/svg/heart.svg';
+import melior from '@/assets/svg/melior.svg?raw';
+import twitter from '@/assets/svg/twitter.svg?raw';
+import facebook from '@/assets/svg/facebook.svg?raw';
+import instagram from '@/assets/svg/instagram.svg?raw';
+import tumblr from '@/assets/svg/tumblr.svg?raw';
+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 TIME_TRAVEL_ENABLED = process.env.TIME_TRAVEL_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 = 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: {
--- a/website/client/src/components/auth/authForm.vue
+++ b/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 appleIcon from '@/assets/svg/apple_black.svg';
+import googleIcon from '@/assets/svg/google.svg?raw';
+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: {
--- a/website/client/src/components/auth/registerLoginReset.vue
+++ b/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 gryphon from '@/assets/svg/gryphon.svg';
-import habiticaIcon from '@/assets/svg/logo-horizontal.svg';
-import googleIcon from '@/assets/svg/google.svg';
-import appleIcon from '@/assets/svg/apple_black.svg';
+import exclamation from '@/assets/svg/exclamation.svg?raw';
+import gryphon from '@/assets/svg/gryphon.svg?raw';
+import habiticaIcon from '@/assets/svg/logo-horizontal.svg?raw';
+import googleIcon from '@/assets/svg/google.svg?raw';
+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: {
--- a/website/client/src/components/avatar.vue
+++ b/website/client/src/components/avatar.vue
@@ -1,110 +1,125 @@
 <template>
-  <div
-    v-if="member.preferences"
-    class="avatar"
-    :style="{width, height, paddingTop}"
-    :class="backgroundClass"
-    @click.prevent="castEnd()"
-  >
+  <div class="avatar-wrapper">
    <div
-      class="character-sprites"
-      :style="{margin: spritesMargin}"
+      v-if="member.preferences"
+      class="avatar"
+      :style="{width, height, paddingTop}"
+      :class="topLevelClassList"
+      @click.prevent="castEnd()"
    >
-      <template v-if="!avatarOnly">
-        <!-- Mount Body-->
-        <span
-          v-if="member.items.currentMount"
-          :class="'Mount_Body_' + member.items.currentMount"
-        ></span>
-      </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']"
-        >
+      <div
+        class="character-sprites"
+        :style="{margin: spritesMargin}"
+      >
+        <template v-if="!avatarOnly">
+          <!-- Mount Body-->
          <span
-            :key="type"
-            :class="[hairClass(type), specialMountClass]"
+            v-if="member.items.currentMount"
+            :class="'Mount_Body_' + member.items.currentMount"
          ></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>
+        <!-- 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"
+              :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')"
-          :class="[getGearClass('shield'), specialMountClass]"
+          v-if="member.preferences.sleep"
+          class="zzz"
        ></span>
-        <span
-          v-if="!hideGear('weapon')"
-          :class="[getGearClass('weapon'), specialMountClass]"
-        ></span>
-      </template>
-      <!-- Resting-->
-      <span
-        v-if="member.preferences.sleep"
-        class="zzz"
-      ></span>
-      <template v-if="!avatarOnly">
-        <!-- Mount Head-->
-        <span
-          v-if="member.items.currentMount"
-          :class="'Mount_Head_' + member.items.currentMount"
-        ></span>
-        <!-- Pet-->
-        <span
-          class="current-pet"
-          :class="petClass"
-        ></span>
-      </template>
+        <template v-if="!avatarOnly">
+          <!-- Mount Head-->
+          <span
+            v-if="member.items.currentMount"
+            :class="'Mount_Head_' + member.items.currentMount"
+          ></span>
+          <!-- Pet-->
+          <span
+            class="current-pet"
+            :class="petClass"
+          ></span>
+        </template>
+      </div>
+      <class-badge
+        v-if="hasClass && !hideClassBadge"
+        class="under-avatar"
+        :member-class="member.stats.class"
+      />
    </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,
-      default: 140,
+      type: String,
+      default: '140px',
    },
    height: {
-      type: Number,
-      default: 147,
+      type: String,
+      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];

--- a/website/client/src/components/avatarModal/customize-banner.vue
+++ b/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 () {
--- a/website/client/src/components/avatarModal/customize-options.vue
+++ b/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
-            v-else
-            class="redline-outer"
-          >
-            <div class="redline"></div>
-          </div>
+        <div
+          v-else
+          class="redline-outer"
+        >
+          <div class="redline"></div>
+        </div>
      </div>
    </div>
  </div>
 </template>

 <script>
-import gem from '@/assets/svg/gem.svg';
-import gold from '@/assets/svg/gold.svg';
+import gem from '@/assets/svg/gem.svg?raw';
+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%;
--- a/website/client/src/components/avatarModal/sub-menu.vue
+++ b/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;
--- a/website/client/src/components/bannedAccountModal.vue
+++ b/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: {
--- a/website/client/src/components/bugReportModal.vue
+++ b/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;
--- a/website/client/src/components/bugReportSuccessModal.vue
+++ b/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 {
--- a/website/client/src/components/challenges/challengeDetail.vue
+++ b/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 memberIcon from '@/assets/svg/member-icon.svg';
-import calendarIcon from '@/assets/svg/calendar.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import memberIcon from '@/assets/svg/member-icon.svg?raw';
+import calendarIcon from '@/assets/svg/calendar.svg?raw';

 const TASK_KEYS_TO_REMOVE = ['_id', 'completed', 'date', 'dateCompleted', 'history', 'id', 'streak', 'createdAt', 'challenge'];

--- a/website/client/src/components/challenges/challengeItem.vue
+++ b/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 memberIcon from '@/assets/svg/member-icon.svg';
-import calendarIcon from '@/assets/svg/calendar.svg';
-import habitIcon from '@/assets/svg/habit.svg';
-import todoIcon from '@/assets/svg/todo.svg';
-import dailyIcon from '@/assets/svg/daily.svg';
-import rewardIcon from '@/assets/svg/reward.svg';
-import officialIcon from '@/assets/svg/official.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import memberIcon from '@/assets/svg/member-icon.svg?raw';
+import calendarIcon from '@/assets/svg/calendar.svg?raw';
+import habitIcon from '@/assets/svg/habit.svg?raw';
+import todoIcon from '@/assets/svg/todo.svg?raw';
+import dailyIcon from '@/assets/svg/daily.svg?raw';
+import rewardIcon from '@/assets/svg/reward.svg?raw';
+import officialIcon from '@/assets/svg/official.svg?raw';

 export default {
  components: {
--- a/website/client/src/components/challenges/challengeModal.vue
+++ b/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 {
--- a/website/client/src/components/challenges/closeChallengeModal.vue
+++ b/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;
--- a/website/client/src/components/challenges/findChallenges.vue
+++ b/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: {
--- a/website/client/src/components/challenges/groupChallenges.vue
+++ b/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: {
--- a/website/client/src/components/challenges/myChallenges.vue
+++ b/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 positiveIcon from '@/assets/svg/positive.svg';
+import challengeIcon from '@/assets/svg/challenge.svg?raw';
+import positiveIcon from '@/assets/svg/positive.svg?raw';

 export default {
  components: {
--- a/website/client/src/components/challenges/reportChallengeModal.vue
+++ b/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 svgReport from '@/assets/svg/report.svg';
+import svgClose from '@/assets/svg/close.svg?raw';
+import svgReport from '@/assets/svg/report.svg?raw';

 export default {
  directives: {
--- a/website/client/src/components/chat/autoComplete.vue
+++ b/website/client/src/components/chat/autoComplete.vue
@@ -34,8 +34,8 @@
 </template>

 <style lang="scss" scoped>
-  @import '~@/assets/scss/tiers.scss';
-  @import '~@/assets/scss/colors.scss';
+  @import '@/assets/scss/tiers.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 tier2 from '@/assets/svg/tier-2.svg';
-import tier3 from '@/assets/svg/tier-3.svg';
-import tier4 from '@/assets/svg/tier-4.svg';
-import tier5 from '@/assets/svg/tier-5.svg';
-import tier6 from '@/assets/svg/tier-6.svg';
-import tier7 from '@/assets/svg/tier-7.svg';
-import tier8 from '@/assets/svg/tier-mod.svg';
-import tier9 from '@/assets/svg/tier-staff.svg';
-import tierNPC from '@/assets/svg/tier-npc.svg';
+import tier1 from '@/assets/svg/tier-1.svg?raw';
+import tier2 from '@/assets/svg/tier-2.svg?raw';
+import tier3 from '@/assets/svg/tier-3.svg?raw';
+import tier4 from '@/assets/svg/tier-4.svg?raw';
+import tier5 from '@/assets/svg/tier-5.svg?raw';
+import tier6 from '@/assets/svg/tier-6.svg?raw';
+import tier7 from '@/assets/svg/tier-7.svg?raw';
+import tier8 from '@/assets/svg/tier-mod.svg?raw';
+import tier9 from '@/assets/svg/tier-staff.svg?raw';
+import tierNPC from '@/assets/svg/tier-npc.svg?raw';

 export default {
  mixins: [styleHelper],
--- a/website/client/src/components/chat/chatCard.vue
+++ b/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>
--- a/website/client/src/components/chat/chatMessages.vue
+++ b/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">
-          <chat-card
-            :msg="msg"
-            :group-id="groupId"
-            @message-liked="messageLiked"
-            @message-removed="messageRemoved"
-            @show-member-modal="showMemberModal"
-            @chat-card-mounted="itemWasMounted"
-          />
-        </div>
+        <message-card
+          :msg="msg"
+          :group-id="groupId"
+          :user-sent-message="user._id === msg.uuid"
+          @message-liked="messageLiked"
+          @message-removed="messageRemoved"
+          @message-card-mounted="itemWasMounted"
+        />
        <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 chatCard from './chatCard';
+import MessageCard from '@/components/messages/messageCard.vue';
+
+// TODO merge chatMessages.vue (party message list) with messageList.vue (private message list)

 export default {
  components: {
-    copyAsTodoModal,
-    chatCard,
+    MessageCard,
    Avatar,
  },
  mixins: [userStateMixin],
--- a/website/client/src/components/chat/copyAsTodoModal.vue
+++ b/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>
--- a/website/client/src/components/chat/reportFlagModal.vue
+++ b/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: {
--- a/website/client/src/components/creatorIntro.vue
+++ b/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 bodyIcon from '@/assets/svg/body.svg';
-import accessoriesIcon from '@/assets/svg/accessories.svg';
-import skinIcon from '@/assets/svg/skin.svg';
-import hairIcon from '@/assets/svg/hair.svg';
-import backgroundsIcon from '@/assets/svg/backgrounds.svg';
-import gem from '@/assets/svg/gem.svg';
-import hourglass from '@/assets/svg/hourglass.svg';
-import gold from '@/assets/svg/gold.svg';
-import arrowRight from '@/assets/svg/arrow_right.svg';
-import arrowLeft from '@/assets/svg/arrow_left.svg';
-import svgClose from '@/assets/svg/close.svg';
+import logoPurple from '@/assets/svg/logo-purple.svg?raw';
+import bodyIcon from '@/assets/svg/body.svg?raw';
+import accessoriesIcon from '@/assets/svg/accessories.svg?raw';
+import skinIcon from '@/assets/svg/skin.svg?raw';
+import hairIcon from '@/assets/svg/hair.svg?raw';
+import backgroundsIcon from '@/assets/svg/backgrounds.svg?raw';
+import gem from '@/assets/svg/gem.svg?raw';
+import hourglass from '@/assets/svg/hourglass.svg?raw';
+import gold from '@/assets/svg/gold.svg?raw';
+import arrowRight from '@/assets/svg/arrow_right.svg?raw';
+import arrowLeft from '@/assets/svg/arrow_left.svg?raw';
+import svgClose from '@/assets/svg/close.svg?raw';
 import { avatarEditorUtilities } from '../mixins/avatarEditUtilities';
 import Sprite from './ui/sprite';

--- a/website/client/src/components/externalLinkModal.vue
+++ b/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 closeIcon from '@/assets/svg/new-close.svg';
+import exclamationIcon from '@/assets/svg/exclamation.svg?raw';
+import closeIcon from '@/assets/svg/new-close.svg?raw';

 export default {
  data () {
--- a/website/client/src/components/faceAvatar.vue
+++ b/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;
--- a/website/client/src/components/group-plans/groupPlanCreationModal.vue
+++ b/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;
--- a/website/client/src/components/group-plans/groupPlansUpdateModal.vue
+++ b/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"
-        srcset="~@/assets/images/group-plans/task-columns@2x.png 2x,
-          ~@/assets/images/group-plans/task-columns@3x.png 3x"
+        src="@/assets/images/group-plans/task-columns.png"
+        srcset="@/assets/images/group-plans/task-columns@2x.png 2x,
+          @/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 sparkles from '@/assets/svg/sparkles-left.svg';
+import closeIcon from '@/assets/svg/close.svg?raw';
+import sparkles from '@/assets/svg/sparkles-left.svg?raw';

 export default {
  data () {
--- a/website/client/src/components/group-plans/taskInformation.vue
+++ b/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/create-task.scss';
+  @import '@/assets/scss/colors.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 filterIcon from '@/assets/svg/filter.svg';
-import deleteIcon from '@/assets/svg/delete.svg';
-import habitIcon from '@/assets/svg/habit.svg';
-import dailyIcon from '@/assets/svg/daily.svg';
-import todoIcon from '@/assets/svg/todo.svg';
-import rewardIcon from '@/assets/svg/reward.svg';
+import positiveIcon from '@/assets/svg/positive.svg?raw';
+import filterIcon from '@/assets/svg/filter.svg?raw';
+import deleteIcon from '@/assets/svg/delete.svg?raw';
+import habitIcon from '@/assets/svg/habit.svg?raw';
+import dailyIcon from '@/assets/svg/daily.svg?raw';
+import todoIcon from '@/assets/svg/todo.svg?raw';
+import rewardIcon from '@/assets/svg/reward.svg?raw';

 import * as Analytics from '@/libs/analytics';
 import { mapState } from '@/libs/store';
--- a/website/client/src/components/groups/chat.vue
+++ b/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.up="selectPreviousAutocomplete($event)"
-          @keydown.down="selectNextAutocomplete($event)"
-          @keypress.enter="selectAutocomplete($event)"
-          @keydown.esc="handleEscape($event)"
+          @keydown.tab="autoCompleteMixinHandleTab($event)"
+          @keydown.up="autoCompleteMixinSelectPreviousAutocomplete($event)"
+          @keydown.down="autoCompleteMixinSelectNextAutocomplete($event)"
+          @keypress.enter="autoCompleteMixinSelectAutocomplete($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"
-          :caret-position="caretPosition"
+          :coords="mixinData.autoComplete.coords"
+          :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 = {
-      TOP: 0,
-      LEFT: 0,
-    };
+    this.autoCompleteMixinResetCoordsPosition();

    next();
  },
@@ -295,8 +212,8 @@ export default {
 </script>

 <style scoped lang="scss">
-  @import '~@/assets/scss/colors.scss';
-  @import '~@/assets/scss/variables.scss';
+  @import '@/assets/scss/colors.scss';
+  @import '@/assets/scss/variables.scss';

  .chat-actions {
    margin-top: 1em;
--- a/website/client/src/components/groups/communityGuidelines.vue
+++ b/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);
--- a/website/client/src/components/groups/createPartyModal.vue
+++ b/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 {
--- a/website/client/src/components/groups/discovery.vue
+++ b/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 => {
--- a/website/client/src/components/groups/group.vue
+++ b/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 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';
-import gemIcon from '@/assets/svg/gem.svg';
-import questIcon from '@/assets/svg/quest.svg';
-import questBackground from '@/assets/svg/quest-background-border.svg';
-import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-small.svg';
-import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-small.svg';
-import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-small.svg';
+import deleteIcon from '@/assets/svg/delete.svg?raw';
+import copyIcon from '@/assets/svg/copy.svg?raw';
+import likeIcon from '@/assets/svg/like.svg?raw';
+import likedIcon from '@/assets/svg/liked.svg?raw';
+import reportIcon from '@/assets/svg/report.svg?raw';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import questIcon from '@/assets/svg/quest.svg?raw';
+import questBackground from '@/assets/svg/quest-background-border.svg?raw';
+import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-small.svg?raw';
+import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-small.svg?raw';
+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';
--- a/website/client/src/components/groups/groupFormModal.vue
+++ b/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 informationIcon from '@/assets/svg/information.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import informationIcon from '@/assets/svg/information.svg?raw';

 import { userStateMixin } from '../../mixins/userState';

--- a/website/client/src/components/groups/invitationListModal.vue
+++ b/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 svgCheck from '@/assets/svg/check.svg';
+import svgClose from '@/assets/svg/close.svg?raw';
+import svgCheck from '@/assets/svg/check.svg?raw';

 export default {
  components: {
--- a/website/client/src/components/groups/inviteModal.vue
+++ b/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 };

--- a/website/client/src/components/groups/lookingForParty.vue
+++ b/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 usersIcon from '@/assets/svg/users.svg';
-import warriorIcon from '@/assets/svg/warrior.svg';
-import rogueIcon from '@/assets/svg/rogue.svg';
-import healerIcon from '@/assets/svg/healer.svg';
-import wizardIcon from '@/assets/svg/wizard.svg';
+import syncIcon from '@/assets/svg/sync-2.svg?raw';
+import usersIcon from '@/assets/svg/users.svg?raw';
+import warriorIcon from '@/assets/svg/warrior.svg?raw';
+import rogueIcon from '@/assets/svg/rogue.svg?raw';
+import healerIcon from '@/assets/svg/healer.svg?raw';
+import wizardIcon from '@/assets/svg/wizard.svg?raw';

 export default {
  components: {
--- a/website/client/src/components/groups/membersModal.vue
+++ b/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 messageIcon from '@/assets/members/message.svg';
-import starIcon from '@/assets/members/star.svg';
-import dots from '@/assets/svg/dots.svg';
+import blockIcon from '@/assets/svg/block.svg?raw';
+import messageIcon from '@/assets/members/message.svg?raw';
+import starIcon from '@/assets/members/star.svg?raw';
+import dots from '@/assets/svg/dots.svg?raw';
 import SelectList from '@/components/ui/selectList';
 import { PAGES } from '@/libs/consts';
 import { userStateMixin } from '../../mixins/userState';
--- a/website/client/src/components/groups/myGuilds.vue
+++ b/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 positiveIcon from '@/assets/svg/positive.svg';
+import greyBadgeIcon from '@/assets/svg/grey-badge.svg?raw';
+import positiveIcon from '@/assets/svg/positive.svg?raw';

 export default {
  components: { PublicGuildItem, Sidebar },
--- a/website/client/src/components/groups/participantListModal.vue
+++ b/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%;
--- a/website/client/src/components/groups/publicGuildItem.vue
+++ b/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 goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-large.svg';
-import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-large.svg';
-import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-large.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-large.svg?raw';
+import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-large.svg?raw';
+import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-large.svg?raw';

 export default {
  directives: {
--- a/website/client/src/components/groups/questDetailModal.vue
+++ b/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';
--- a/website/client/src/components/groups/questSidebarSection.vue
+++ b/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 swordIcon from '@/assets/svg/sword.svg';
-import rageIcon from '@/assets/svg/rage.svg';
-import healthNoPaddingIcon from '@/assets/svg/health_no_padding.svg';
+import questIcon from '@/assets/svg/quest.svg?raw';
+import swordIcon from '@/assets/svg/sword.svg?raw';
+import rageIcon from '@/assets/svg/rage.svg?raw';
+import healthNoPaddingIcon from '@/assets/svg/health_no_padding.svg?raw';
 import questActionsMixin from '@/components/groups/questActions.mixin';

 export default {
--- a/website/client/src/components/groups/rightSidebar.vue
+++ b/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 sparklesIcon from '@/assets/svg/sparklesIcon.svg';
-import leaveIcon from '@/assets/svg/leave.svg';
-import editIcon from '@/assets/svg/edit.svg';
-import messageIcon from '@/assets/svg/message.svg';
-import usersIcon from '@/assets/svg/users.svg';
+import menuIcon from '@/assets/svg/menu.svg?raw';
+import sparklesIcon from '@/assets/svg/sparklesIcon.svg?raw';
+import leaveIcon from '@/assets/svg/leave.svg?raw';
+import editIcon from '@/assets/svg/edit.svg?raw';
+import messageIcon from '@/assets/svg/message.svg?raw';
+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 {
--- a/website/client/src/components/groups/tavern.vue
+++ b/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 chevronIcon from '@/assets/svg/chevron-red.svg';
-import gemIcon from '@/assets/svg/gem.svg';
-import healthIcon from '@/assets/svg/health.svg';
-import informationIconRed from '@/assets/svg/information-red.svg';
-import questBackground from '@/assets/svg/quest-background-border.svg';
-import rageIcon from '@/assets/svg/rage.svg';
-import swordIcon from '@/assets/svg/sword.svg';
+import challengeIcon from '@/assets/svg/challenge.svg?raw';
+import chevronIcon from '@/assets/svg/chevron-red.svg?raw';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import healthIcon from '@/assets/svg/health.svg?raw';
+import informationIconRed from '@/assets/svg/information-red.svg?raw';
+import questBackground from '@/assets/svg/quest-background-border.svg?raw';
+import rageIcon from '@/assets/svg/rage.svg?raw';
+import swordIcon from '@/assets/svg/sword.svg?raw';

-import tier1 from '@/assets/svg/tier-1.svg';
-import tier2 from '@/assets/svg/tier-2.svg';
-import tier3 from '@/assets/svg/tier-3.svg';
-import tier4 from '@/assets/svg/tier-4.svg';
-import tier5 from '@/assets/svg/tier-5.svg';
-import tier6 from '@/assets/svg/tier-6.svg';
-import tier7 from '@/assets/svg/tier-7.svg';
-import tierMod from '@/assets/svg/tier-mod.svg';
-import tierNPC from '@/assets/svg/tier-npc.svg';
-import tierStaff from '@/assets/svg/tier-staff.svg';
+import tier1 from '@/assets/svg/tier-1.svg?raw';
+import tier2 from '@/assets/svg/tier-2.svg?raw';
+import tier3 from '@/assets/svg/tier-3.svg?raw';
+import tier4 from '@/assets/svg/tier-4.svg?raw';
+import tier5 from '@/assets/svg/tier-5.svg?raw';
+import tier6 from '@/assets/svg/tier-6.svg?raw';
+import tier7 from '@/assets/svg/tier-7.svg?raw';
+import tierMod from '@/assets/svg/tier-mod.svg?raw';
+import tierNPC from '@/assets/svg/tier-npc.svg?raw';
+import tierStaff from '@/assets/svg/tier-staff.svg?raw';

 import staffList from '../../libs/staffList';
 import reportBug from '@/mixins/reportBug.js';
--- a/website/client/src/components/header/banners/base.vue
+++ b/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%;
--- a/website/client/src/components/header/banners/birthdayBanner.vue
+++ b/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 tenBirthday from '@/assets/svg/10th-birthday-linear.svg';
+import giftsBirthday from '@/assets/svg/gifts-birthday.svg?raw';
+import tenBirthday from '@/assets/svg/10th-birthday-linear.svg?raw';

 export default {
  components: {
--- a/website/client/src/components/header/banners/chatBanner.vue
+++ b/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%;
--- a/website/client/src/components/header/banners/damagePaused.vue
+++ b/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;
--- a/website/client/src/components/header/banners/gemsPromo.vue
+++ b/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@2x.png 2x,
-    ~@/assets/images/gems/fall-confetti-left/confetti@3x.png 3x"
-        src="~@/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@3x.png 3x"
+        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@2x.png 2x,
-    ~@/assets/images/gems/spooky-confetti-left/confetti@3x.png 3x"
-        src="~@/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@3x.png 3x"
+        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@2x.png 2x,
-      ~@/assets/images/gems/fall-text/text@3x.png 3x"
-          src="~@/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@3x.png 3x"
+          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@2x.png 2x,
-      ~@/assets/images/gems/spooky-text/text@3x.png 3x"
-          src="~@/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@3x.png 3x"
+          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@2x.png 2x,
-    ~@/assets/images/gems/fall-confetti-right/confetti@3x.png 3x"
-        src="~@/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@3x.png 3x"
+        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@2x.png 2x,
-    ~@/assets/images/gems/spooky-confetti-right/confetti@3x.png 3x"
-        src="~@/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@3x.png 3x"
+        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;
--- a/website/client/src/components/header/banners/giftPromo.vue
+++ b/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: {
--- a/website/client/src/components/header/index.vue
+++ b/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;
--- a/website/client/src/components/header/menu.vue
+++ b/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/utils.scss';
-  @import '~@/assets/scss/variables.scss';
+  @import '@/assets/scss/colors.scss';
+  @import '@/assets/scss/utils.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 goldIcon from '@/assets/svg/gold.svg';
-import syncIcon from '@/assets/svg/sync.svg';
-import svgHourglasses from '@/assets/svg/hourglass.svg';
-import chevronDownIcon from '@/assets/svg/chevron-down.svg';
-import melior from '@/assets/svg/melior.svg';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import goldIcon from '@/assets/svg/gold.svg?raw';
+import syncIcon from '@/assets/svg/sync.svg?raw';
+import svgHourglasses from '@/assets/svg/hourglass.svg?raw';
+import chevronDownIcon from '@/assets/svg/chevron-down.svg?raw';
+import melior from '@/assets/svg/melior.svg?raw';

 import creatorIntro from '../creatorIntro';
 import notificationMenu from './notificationsDropdown';
--- a/website/client/src/components/header/messageCount.functional.vue
+++ b/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;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Phillip Thelen	e10b7deb4b	attempt implementing prerendering	2025-02-04 17:43:30 +01:00
Phillip Thelen	d46fa98390	tell vite to ignore browser-script url	2025-02-04 17:42:55 +01:00
Phillip Thelen	3d6afa9f11	fix setupNconf imports	2025-02-04 12:29:33 +01:00
Phillip Thelen	e7616cae8d	setup nconf correctly for client build	2025-02-04 11:21:08 +01:00
Phillip Thelen	3a457f69a9	set serving url for vite content	2025-02-03 18:22:17 +01:00
Phillip Thelen	a4297283cb	fix lint	2025-02-03 17:45:09 +01:00
Phillip Thelen	ca08e3ef81	fix import	2025-02-03 17:41:41 +01:00
Phillip Thelen	c582dbd169	use vitest for client spec tests	2025-02-03 17:37:11 +01:00
Phillip Thelen	56ef07c8d2	fix various import issues	2025-02-03 16:05:03 +01:00
Phillip Thelen	896836f807	eslint fixes	2025-02-03 14:02:46 +01:00
Phillip Thelen	b5458bb604	remove gulp-nodemon and update nodemon	2025-02-03 14:00:04 +01:00
Phillip Thelen	2edb255e55	move from vue-cli-service/webpack to vite	2025-01-23 15:11:10 +01:00
Rafał Jagielski	200d917582	Fix intro guide (#15247 ) * Provide window.jquery to modules in vue.config.js * Fix curly-spacing lint error	2025-01-22 14:53:24 -06:00
negue	73082a8cf0	fix toggle disable icon position	2025-01-21 22:34:34 +01:00
Kalista Payne	dd08eee20c	chore(images): update css	2025-01-21 08:52:21 -06:00
negue	895241b7fa	show date tooltip above system / skill messages	2025-01-20 21:08:55 +01:00
negue	2535fd7095	Combined Message Pages/Redesign (#15310 ) * split component prepare new views / states * extract empty and disabled state as components * fix empty state mail icon * first logic switching between modes, move page to /private-messages/index.vue * extract autoCompleteHelper.js * style header + start new message input * style plus button + focus input * state logic, types for sanity * WIP PM new Message started * add /members/username test * first design changes to messageCard * delete private message or chat - based on the mode * copy as todo * mention links to modal * report chat or private message * WIP likeButton * likeButton styling * hide like on private message cards * fix unit test * replace copy as todo - to just a copy to clipboard * style changes * menu position + like button width * dropdown items background + like font * fix like button padding * move api endpoints and tests around to group inbox methods + like for inbox private messages * restyle system messages * Dropdown Radius and Padding * WIP system messages * fix lint * copy delta commit of allowing liking own private messages * enable liking private messages * fix menu non hovered item icon color * fix import path * ignore background on system messages * requested changes + migration * update migration to update the unique id to some messages and delete the duplicates * migration based on users pagination * fix(migration): use Promise.all * change to bulkWrites per User, and all messages in one run (of a user) * check for array * use rest operator ... * skip sorting to get the users * remove migration, disable like for private messages without uniqueMessageId * lean+bulkWrite for likes, add time checks for like and auth for further debugging * add a limit 2 get the messages by uniqueId * Adding a simple server start script * remove pinned nodemon dep * fix inbox controller/tests * fix / requested style changes * fix empty state padding / * hide avatar weapons on messages - fix avatar spacing on messages * Hourglass Simplification (#15323) * begin removing obsolete tests * begin refactoring * update cron tests * cleanup * finish basic implementation of new logic * add more subscription tests * subscription test improvements * return nextHourglassDate again * fix gem limit * fix(test): short circuit this. * fix(admin): correct logic and style for shrimple subs * WIP(frontend): draft of main subs page view * fix hourglass count * Fix hourglass logic for upgrades * fix admin panel display * WIP(subs): extant Stripe state * fix admin panel strings * fix missing transaction type * add new field for cumulative subscription count * show date for hourglass bonus if it was received * fix test * feat(subscription): max Gems progress readout * fix(css): correct and refactor heights and selection states * fix(subs): correct border-radius and redirect * fix(stripe): correct redirect after success * Admin panel display fixes * don’t give additional HG for new sub if they already got one this month * fix issue with promo hourglasses * fix(subscription): update layout when gifting * fix(subscriptions): more gift layout revisions * fix(subscriptions): minor visual updates * fix(subs): pass autoRenews through Stripe * fix(subs): gifts DON't renew * fix(lint): unnecessary ternary * fix(lint): do negate object ig * fix(subs): try again on gifts * fix(subs): unhovery and un-12-monthy * fix bug with incorrectly giving HG bonus * remove only * fix test * fix test * fix(subs): also redirect to subs after gift sub * fix(subs): fix typeError * fix(g1g1): don't try to find Gems promo during bogo --------- Co-authored-by: Phillip Thelen <phillip@habitica.com> Co-authored-by: Kalista Payne <sabe@habitica.com> * chore(sprites): update subproject * fix(layout): tighten cancellation note * fix(subs): Google wording and HG escape * chore(testing): fake g1g1 dates * fix(subs): don't hide HG preview entirely * fix(subs): center next hourglass message * working validatedTextInput.vue within start-new-conversation-input-header.vue 🎉 * fix(git): remove changes from old develop * Revert "fix(git): remove changes from old develop" This reverts commit `0e30f7df00`. * fix(git): no actually just this file i guesss * adding an empty loading state, hiding * fought the avatar arch nemesis again * fix chatMessages (party chat) message spacing * move disabled text back to above the input area - re-enable input area * show disabled private messages top panel * fix font color * fixing uiStates - removing disabled - moving the own user check to the last * fix(lint): add missing prop defaults * fix(lint): object default should be fn * fix(chat): correct grammar in error --------- Co-authored-by: SabreCat <sabe@habitica.com> Co-authored-by: Kalista Payne <sabrecat@gmail.com> Co-authored-by: Phillip Thelen <phillip@habitica.com>	2025-01-16 16:52:24 -06:00