fix(snacks): reposition X in errors

.github/workflows/test.yml

@@ -82,7 +82,7 @@ jobs:
         CI: true
         NODE_ENV: test
     - run: npm run test:sanity
-
+  
   common:
     runs-on: ubuntu-latest
     strategy:
@@ -129,13 +129,13 @@ jobs:
         CI: true
         NODE_ENV: test
     - run: npm run test:content
-
+  
   api-unit:
     runs-on: ubuntu-latest
     strategy:
       matrix:
         node-version: [21.x]
-        mongodb-version: [7.0]
+        mongodb-version: [4.2]
     steps:
     - uses: actions/checkout@v4
       with:
@@ -144,13 +144,11 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-
     - name: Start MongoDB ${{ matrix.mongodb-version }} Replica Set
-      uses: supercharge/mongodb-github-action@1.11.0
+      uses: supercharge/mongodb-github-action@1.3.0
       with:
         mongodb-version: ${{ matrix.mongodb-version }}
         mongodb-replica-set: rs
-
     - run: sudo apt update
     - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
@@ -160,17 +158,15 @@ jobs:
       env:
         CI: true
         NODE_ENV: test
-
     - run: npm run test:api:unit
       env:
         REQUIRES_SERVER=true: true
-
   api-v3-integration:
     runs-on: ubuntu-latest
     strategy:
       matrix:
         node-version: [21.x]
-        mongodb-version: [7.0]
+        mongodb-version: [4.2]
     steps:
     - uses: actions/checkout@v4
       with:
@@ -180,11 +176,10 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - name: Start MongoDB ${{ matrix.mongodb-version }} Replica Set
-      uses: supercharge/mongodb-github-action@1.11.0
+      uses: supercharge/mongodb-github-action@1.3.0
       with:
         mongodb-version: ${{ matrix.mongodb-version }}
         mongodb-replica-set: rs
-
     - run: sudo apt update
     - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
@@ -194,18 +189,15 @@ jobs:
       env:
         CI: true
         NODE_ENV: test
-
     - run: npm run test:api-v3:integration
       env:
         REQUIRES_SERVER=true: true
-
   api-v4-integration:
     runs-on: ubuntu-latest
     strategy:
       matrix:
         node-version: [21.x]
-        mongodb-version: [7.0]
-
+        mongodb-version: [4.2]
     steps:
     - uses: actions/checkout@v4
       with:
@@ -215,11 +207,10 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - name: Start MongoDB ${{ matrix.mongodb-version }} Replica Set
-      uses: supercharge/mongodb-github-action@1.11.0
+      uses: supercharge/mongodb-github-action@1.3.0
       with:
         mongodb-version: ${{ matrix.mongodb-version }}
         mongodb-replica-set: rs
-
     - run: sudo apt update
     - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
@@ -229,7 +220,6 @@ jobs:
       env:
         CI: true
         NODE_ENV: test
-
     - run: npm run test:api-v4:integration
       env:
         REQUIRES_SERVER=true: true

.gitignore

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

config.json.example

@@ -46,7 +46,7 @@
   "MAINTENANCE_MODE": "false",
   "MONGODB_POOL_SIZE": "10",
   "MONGODB_SOCKET_TIMEOUT": "20000",
-  "NODE_DB_URI": "mongodb://localhost:27017/habitica-dev?replicaSet=rs&directConnection=true&readPreference=secondary",
+  "NODE_DB_URI": "mongodb://localhost:27017/habitica-dev?replicaSet=rs",
   "NODE_ENV": "development",
   "PATH": "bin:node_modules/.bin:/usr/local/bin:/usr/bin:/bin",
   "PAYPAL_BILLING_PLANS_basic_12mo": "basic_12mo",
@@ -75,6 +75,7 @@
   "S3_ACCESS_KEY_ID": "accessKeyId",
   "S3_BUCKET": "bucket",
   "S3_SECRET_ACCESS_KEY": "secretAccessKey",
+  "SESSION_SECRET_IV": "12345678912345678912345678912345",
   "SESSION_SECRET_KEY": "1234567891234567891234567891234567891234567891234567891234567891",
   "SESSION_SECRET": "YOUR SECRET HERE",
   "SITE_HTTP_AUTH_ENABLED": "false",
@@ -89,7 +90,7 @@
   "STRIPE_API_KEY": "aaaabbbbccccddddeeeeffff00001111",
   "STRIPE_PUB_KEY": "22223333444455556666777788889999",
   "STRIPE_WEBHOOKS_ENDPOINT_SECRET": "111111",
-  "TEST_DB_URI": "mongodb://localhost:27017/habitica-test?replicaSet=rs&directConnection=true&readPreference=secondary",
+  "TEST_DB_URI": "mongodb://localhost:27017/habitica-test?replicaSet=rs",
   "TIME_TRAVEL_ENABLED": "false",
   "TRUSTED_DOMAINS": "localhost,https://habitica.com",
   "WEB_CONCURRENCY": 1

docker-compose.dev.yml

@@ -0,0 +1,53 @@
+services:
+  client:
+    build:
+      context: .
+      dockerfile: ./Dockerfile-Dev
+    command: ["npm", "run", "client:dev"]
+    depends_on:
+      - server
+    environment:
+      - BASE_URL=http://server:3000
+    networks:
+      - habitica
+    ports:
+      - "8080:8080"
+    volumes:
+      - .:/usr/src/habitica
+      - /usr/src/habitica/node_modules
+      - /usr/src/habitica/website/client/node_modules
+  server:
+    build:
+      context: .
+      dockerfile: ./Dockerfile-Dev
+    command: ["npm", "start"]
+    depends_on:
+      mongo:
+        condition: service_healthy
+    environment:
+      - NODE_DB_URI=mongodb://mongo/habitrpg
+    networks:
+      - habitica
+    ports:
+      - "3000:3000"
+    volumes:
+      - .:/usr/src/habitica
+      - /usr/src/habitica/node_modules
+  mongo:
+    image: mongo:5.0.23
+    restart: unless-stopped
+    command: ["--replSet", "rs", "--bind_ip_all", "--port", "27017"]
+    healthcheck:
+      test: echo "try { rs.status() } catch (err) { rs.initiate() }" | mongosh --port 27017 --quiet
+      interval: 10s
+      timeout: 30s
+      start_period: 0s
+      start_interval: 1s
+      retries: 30
+    networks:
+      - habitica
+    ports:
+      - "27017:27017"
+networks:
+  habitica:
+    driver: bridge

docker-compose.mongo-only.yml

@@ -1,23 +0,0 @@
-networks:
-  mongodb-network:
-    name: "mongodb-network"
-    driver: bridge
-services:
-  mongodb:
-    image: "mongo:7.0"
-    container_name: "habitica-mongodb-only"
-    networks:
-      - mongodb-network
-    hostname: "mongodb"
-    ports:
-      - "27017:27017"
-    restart: "unless-stopped"
-    volumes:
-      - "./mongodb-data-docker:/data/db"
-    entrypoint: [ "/usr/bin/mongod", "--bind_ip_all", "--replSet", "rs" ]
-    healthcheck:
-      test: echo "try { rs.status() } catch (err) { rs.initiate() }" | mongosh --port 27017 --quiet
-      interval: 10s
-      timeout: 30s
-      start_period: 0s
-      retries: 30

docker-compose.mongo-test-local.yml

@@ -1,23 +0,0 @@
-networks:
-  mongodb-network:
-    name: "mongodb-network"
-    driver: bridge
-services:
-  mongodb:
-    image: "mongo:7.0"
-    container_name: "habitica-mongodb-test"
-    networks:
-      - mongodb-network
-    hostname: "mongodb"
-    ports:
-      - "27017:27017"
-    restart: "unless-stopped"
-    volumes:
-      - "./mongodb-data-docker-testing:/data/db"
-    entrypoint: [ "/usr/bin/mongod", "--bind_ip_all", "--replSet", "rs" ]
-    healthcheck:
-      test: echo "try { rs.status() } catch (err) { rs.initiate() }" | mongosh --port 27017 --quiet
-      interval: 10s
-      timeout: 30s
-      start_period: 0s
-      retries: 30

docker-compose.yml

@@ -1,56 +1,35 @@
+version: "3"
 services:
+
   client:
-    build:
-      context: .
-      dockerfile: ./Dockerfile-Dev
-    command: ["npm", "run", "client:dev:docker"]
-    depends_on:
-      - server
+    build: .
+    networks:
+      - habitica
     environment:
       - BASE_URL=http://server:3000
-    networks:
-      - habitica
     ports:
-      - "5173:5173"
-    volumes:
-      - .:/usr/src/habitica
-      - /usr/src/habitica/node_modules
-      - /usr/src/habitica/website/client/node_modules
-  server:
-    build:
-      context: .
-      dockerfile: ./Dockerfile-Dev
-    command: ["npm", "start"]
+        - "8080:8080"
+    command: ["npm", "run", "client:dev"]
     depends_on:
-      mongo:
-        condition: service_healthy
-    environment:
-      - NODE_DB_URI=mongodb://mongo/habitrpg
-    networks:
-      - habitica
+      - server
+
+  server:
+    build: .
     ports:
       - "3000:3000"
-    volumes:
-      - .:/usr/src/habitica
-      - /usr/src/habitica/node_modules
-  mongo:
-    image: "mongo:7.0"
-    container_name: "habitica-mongodb"
     networks:
       - habitica
-    hostname: "mongodb"
+    environment:
+      - NODE_DB_URI=mongodb://mongo/habitrpg
+    depends_on:
+      - mongo
+
+  mongo:
+    image: mongo:3.6
     ports:
       - "27017:27017"
-    restart: "unless-stopped"
-    volumes:
-      - "./mongodb-data-docker:/data/db"
-    entrypoint: [ "/usr/bin/mongod", "--bind_ip_all", "--replSet", "rs" ]
-    healthcheck:
-      test: echo "try { rs.status() } catch (err) { rs.initiate() }" | mongosh --port 27017 --quiet
-      interval: 10s
-      timeout: 30s
-      start_period: 0s
-      retries: 30
+    networks:
+      - habitica
 
 networks:
   habitica:

gulp/gulp-build.js

@@ -5,7 +5,7 @@ import path from 'path';
 import babel from 'gulp-babel';
 import os from 'os';
 import fs from 'fs';
-import spawn from 'cross-spawn';
+import spawn from 'cross-spawn'; // eslint-disable-line import/no-extraneous-dependencies
 import clean from 'rimraf';
 
 gulp.task('build:babel:server', () => gulp.src('website/server/**/*.js')
@@ -35,7 +35,7 @@ gulp.task('build:prod', gulp.series(
 // When used on windows `run-rs` must first be run without the `--keep` option
 // in order to be setup correctly, afterwards it can be used.
 
-const MONGO_PATH = path.join(__dirname, '/../mongodb-data-docker/');
+const MONGO_PATH = path.join(__dirname, '/../mongodb-data/');
 
 gulp.task('build:prepare-mongo', async () => {
   if (fs.existsSync(MONGO_PATH)) {
@@ -51,32 +51,29 @@ gulp.task('build:prepare-mongo', async () => {
   console.log('MongoDB data folder is missing, setting up.'); // eslint-disable-line no-console
 
   // use run-rs without --keep, kill it as soon as the replica set starts
-  const dockerMongoProcess = spawn('npm', ['run', 'docker:mongo:dev']);
+  const runRsProcess = spawn('run-rs', ['-v', '4.1.1', '-l', 'ubuntu1804', '--dbpath', 'mongodb-data', '--number', '1', '--quiet']);
 
-  let manuallyStopped = false;
-
-  for await (const chunk of dockerMongoProcess.stdout) {
+  for await (const chunk of runRsProcess.stdout) {
     const stringChunk = chunk.toString();
     console.log(stringChunk); // eslint-disable-line no-console
     // kills the process after the replica set is setup
-    if (stringChunk.includes('mongod startup complete')) {
+    if (stringChunk.includes('Started replica set')) {
       console.log('MongoDB setup correctly.'); // eslint-disable-line no-console
-      dockerMongoProcess.kill();
-      manuallyStopped = true;
+      runRsProcess.kill();
     }
   }
 
   let error = '';
-  for await (const chunk of dockerMongoProcess.stderr) {
+  for await (const chunk of runRsProcess.stderr) {
     const stringChunk = chunk.toString();
     error += stringChunk;
   }
 
   const exitCode = await new Promise(resolve => {
-    dockerMongoProcess.on('close', resolve);
+    runRsProcess.on('close', resolve);
   });
 
-  if (!manuallyStopped && (exitCode || error.length > 0)) {
+  if (exitCode || error.length > 0) {
     // remove any leftover files
     clean.sync(MONGO_PATH);
 

gulp/gulp-cache.js

@@ -6,21 +6,9 @@ gulp.task('cache:content', done => {
   // Requiring at runtime because these files access `common`
   // code which in production works only if transpiled so after
   // gulp build:babel:common has run
-  const {
-    CONTENT_CACHE_PATH,
-    getLocalizedContentResponse,
-    IOS_FILTER,
-    ANDROID_FILTER,
-    buildFilterObject,
-    hashForFilter,
-  } = require('../website/server/libs/content'); // eslint-disable-line global-require
+  const { CONTENT_CACHE_PATH, getLocalizedContentResponse } = require('../website/server/libs/content'); // eslint-disable-line global-require
   const { langCodes } = require('../website/server/libs/i18n'); // eslint-disable-line global-require
 
-  const iosHash = hashForFilter(IOS_FILTER);
-  const iosFilterObj = buildFilterObject(IOS_FILTER);
-  const androidHash = hashForFilter(ANDROID_FILTER);
-  const androidFilterObj = buildFilterObject(ANDROID_FILTER);
-
   try {
     // create the cache folder (if it doesn't exist)
     try {
@@ -38,18 +26,6 @@ gulp.task('cache:content', done => {
         getLocalizedContentResponse(langCode),
         'utf8',
       );
-
-      fs.writeFileSync(
-        `${CONTENT_CACHE_PATH}${langCode}${iosHash}.json`,
-        getLocalizedContentResponse(langCode, iosFilterObj),
-        'utf8',
-      );
-
-      fs.writeFileSync(
-        `${CONTENT_CACHE_PATH}${langCode}${androidHash}.json`,
-        getLocalizedContentResponse(langCode, androidFilterObj),
-        'utf8',
-      );
     });
     done();
   } catch (err) {
@@ -57,37 +33,26 @@ gulp.task('cache:content', done => {
   }
 });
 
-function safeMkdir (path) {
-  try {
-    fs.mkdirSync(path);
-  } catch (err) {
-    if (err.code !== 'EEXIST') throw err;
-  }
-}
-
 gulp.task('cache:i18n', done => {
   // Requiring at runtime because these files access `common`
   // code which in production works only if transpiled so after
   // gulp build:babel:common has run
-  const { BROWSER_SCRIPT_CACHE_PATH, geti18nCoreBrowserScript, geti18nContentBrowserScript } = require('../website/server/libs/i18n'); // eslint-disable-line global-require
+  const { BROWSER_SCRIPT_CACHE_PATH, geti18nBrowserScript } = require('../website/server/libs/i18n'); // eslint-disable-line global-require
   const { langCodes } = require('../website/server/libs/i18n'); // eslint-disable-line global-require
 
   try {
-    // create the cache folders (if they doesn't exist)
-    safeMkdir(BROWSER_SCRIPT_CACHE_PATH);
-    safeMkdir(`${BROWSER_SCRIPT_CACHE_PATH}core/`);
-    safeMkdir(`${BROWSER_SCRIPT_CACHE_PATH}content/`);
+    // create the cache folder (if it doesn't exist)
+    try {
+      fs.mkdirSync(BROWSER_SCRIPT_CACHE_PATH);
+    } catch (err) {
+      if (err.code !== 'EEXIST') throw err;
+    }
 
     // create and save the i18n browser script for each language
     langCodes.forEach(languageCode => {
       fs.writeFileSync(
-        `${BROWSER_SCRIPT_CACHE_PATH}core/${languageCode}.js`,
-        geti18nCoreBrowserScript(languageCode),
-        'utf8',
-      );
-      fs.writeFileSync(
-        `${BROWSER_SCRIPT_CACHE_PATH}content/${languageCode}.js`,
-        geti18nContentBrowserScript(languageCode),
+        `${BROWSER_SCRIPT_CACHE_PATH}${languageCode}.js`,
+        geti18nBrowserScript(languageCode),
         'utf8',
       );
     });

gulp/gulp-tests.js

@@ -53,11 +53,6 @@ gulp.task('test:prepare:mongo', cb => {
   const mongooseOptions = getDefaultConnectionOptions();
   const connectionUrl = getDevelopmentConnectionUrl(TEST_DB_URI);
 
-  console.info({
-    mongooseOptions,
-    connectionUrl,
-  });
-
   mongoose.connect(connectionUrl, mongooseOptions)
     .then(() => mongoose.connection.dropDatabase())
     .then(() => mongoose.connection.close()).then(() => {

migrations/users/take-this.js

@@ -73,7 +73,7 @@ export default async function processUsers () {
       break;
     } else {
       query._id = {
-        $gt: users[users.length - 1]._id,
+        $gt: users[users.length - 1],
       };
     }
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "5.47.2",
+  "version": "5.41.3",
   "main": "./website/server/index.js",
   "dependencies": {
     "@babel/core": "^7.22.10",
@@ -39,8 +39,7 @@
     "gulp-filter": "^7.0.0",
     "gulp-imagemin": "^7.1.0",
     "gulp.spritesmith": "^6.13.0",
-    "habitica-markdown": "^4.1.0",
-    "heapdump": "^0.3.15",
+    "habitica-markdown": "^3.0.0",
     "helmet": "^4.6.0",
     "in-app-purchase": "^1.11.3",
     "js2xmlparser": "^5.0.0",
@@ -49,12 +48,10 @@
     "lodash": "^4.17.21",
     "merge-stream": "^2.0.0",
     "method-override": "^3.0.0",
-    "micromustache": "^8.0.3",
     "moment": "^2.29.4",
     "moment-recur": "git://github.com/HabitRPG/moment-recur.git#d3e8e6da0806f13b74dd2e4d7d9053e6a63db119",
     "mongoose": "^8.9.5",
     "morgan": "^1.10.1",
-    "nan": "^2.25.0",
     "nconf": "^0.12.1",
     "node-gcm": "^1.0.5",
     "on-headers": "^1.1.0",
@@ -103,16 +100,13 @@
     "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:dev:docker": "cd website/client && npm run serve:docker",
     "client:build": "cd website/client && npm run build",
     "client:unit": "cd website/client && npm run test:unit",
     "start": "node --watch ./website/server/index.js",
+    "start:simple": "node ./website/server/index.js",
     "debug": "node --watch --inspect ./website/server/index.js",
-    "docker:aio": "docker compose -f docker-compose.yml up",
-    "docker:mongo:dev": "docker compose -f docker-compose.mongo-only.yml up",
-    "docker:mongo:dev:down": "docker compose -f docker-compose.mongo-only.yml down",
-    "docker:mongo:test": "docker compose -f docker-compose.mongo-test-local.yml up",
-    "mongo:test": "node scripts/start-local-mongo.mjs --test-db",
+    "mongo:dev": "run-rs -v 7.0.23 -l ubuntu2204 --keep --dbpath mongodb-data --number 1 --quiet",
+    "mongo:test": "run-rs -v 7.0.23 -l ubuntu2204 --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"
@@ -128,6 +122,7 @@
     "monk": "^7.3.4",
     "nyc": "^15.1.0",
     "require-again": "^2.0.0",
+    "run-rs": "^0.7.7",
     "sinon-chai": "^3.7.0",
     "sinon-stub-promise": "^4.0.0"
   }

test/api/unit/libs/payments/amazon/cancel.test.js

@@ -66,15 +66,13 @@ describe('Amazon Payments - Cancel Subscription', () => {
     group = generateGroup({
       name: 'test group',
       type: 'guild',
-      privacy: 'private',
+      privacy: 'public',
       leader: user._id,
     });
     group.purchased.plan.customerId = 'customer-id';
     group.purchased.plan.planId = subKey;
     group.purchased.plan.lastBillingDate = new Date();
     await group.save();
-    user.guilds.push(group._id);
-    await user.save();
 
     subscriptionBlock = common.content.subscriptionBlocks[subKey];
     subscriptionLength = subscriptionBlock.months * 30;

test/api/unit/libs/payments/amazon/subscribe.test.js

@@ -30,14 +30,12 @@ describe('Amazon Payments - Subscribe', () => {
     group = generateGroup({
       name: 'test group',
       type: 'guild',
-      privacy: 'private',
+      privacy: 'public',
       leader: user._id,
     });
     group.purchased.plan.customerId = 'customer-id';
     group.purchased.plan.planId = subKey;
     await group.save();
-    user.guilds.push(group._id);
-    await user.save();
 
     amount = common.content.subscriptionBlocks[subKey].price;
     billingAgreementId = 'billingAgreementId';
@@ -248,6 +246,11 @@ describe('Amazon Payments - Subscribe', () => {
     user.guilds.push(groupId);
     await user.save();
 
+    // Add existing users
+    user = new User();
+    user.guilds.push(groupId);
+    await user.save();
+
     // Set expected amount
     sub.key = 'group_monthly';
     sub.price = 9;

test/api/unit/libs/payments/group-plans/group-payments-create.test.js

@@ -128,12 +128,11 @@ describe('Purchasing a group plan for group', () => {
     expect(publicGroup.purchased.plan.planId).to.not.exist;
     data.groupId = publicGroup._id;
 
-    // Public Guilds are no longer even findable
     await expect(api.createSubscription(data))
       .to.eventually.be.rejected.and.to.eql({
-        httpCode: 404,
-        name: 'NotFound',
-        message: i18n.t('groupNotFound'),
+        httpCode: 401,
+        name: 'NotAuthorized',
+        message: i18n.t('onlyPrivateGuildsCanUpgrade'),
       });
 
     const updatedGroup = await Group.findById(publicGroup._id).exec();

test/api/unit/libs/payments/paypal/subscribe-cancel.test.js

@@ -30,15 +30,13 @@ describe('paypal - subscribeCancel', () => {
     group = generateGroup({
       name: 'test group',
       type: 'guild',
-      privacy: 'private',
+      privacy: 'public',
       leader: user._id,
     });
     group.purchased.plan.customerId = groupCustomerId;
     group.purchased.plan.planId = subKey;
     group.purchased.plan.lastBillingDate = new Date();
     await group.save();
-    user.guilds.push(group._id);
-    await user.save();
 
     nextBillingDate = new Date();
 

test/api/unit/libs/payments/stripe/checkout.test.js

@@ -236,7 +236,7 @@ describe('Stripe - Checkout', () => {
       const group = generateGroup({
         name: 'test group',
         type: 'guild',
-        privacy: 'private',
+        privacy: 'public',
         leader: user._id,
       });
       const groupId = group._id;
@@ -376,13 +376,11 @@ describe('Stripe - Checkout', () => {
         group = generateGroup({
           name: 'test group',
           type: 'guild',
-          privacy: 'private',
+          privacy: 'public',
           leader: user._id,
         });
         groupId = group._id;
         await group.save();
-        user.guilds.push(group._id);
-        await user.save();
       });
 
       it('throws if user is not allowed to change group plan', async () => {

test/api/unit/libs/payments/stripe/subscriptions.test.js

@@ -136,7 +136,7 @@ describe('Stripe - Subscriptions', () => {
       group = generateGroup({
         name: 'test group',
         type: 'guild',
-        privacy: 'private',
+        privacy: 'public',
         leader: user._id,
       });
       groupId = group._id;
@@ -315,14 +315,12 @@ describe('Stripe - Subscriptions', () => {
       group = generateGroup({
         name: 'test group',
         type: 'guild',
-        privacy: 'private',
+        privacy: 'public',
         leader: user._id,
       });
       group.purchased.plan.customerId = 'customer-id';
       group.purchased.plan.planId = subKey;
       await group.save();
-      user.guilds.push(group._id);
-      await user.save();
 
       groupId = group._id;
     });

test/api/unit/models/userNotification.test.js

@@ -50,59 +50,5 @@ describe('UserNotification Model', () => {
       expect(safeNotifications[0].type).to.equal('NEW_CHAT_MESSAGE');
       expect(safeNotifications[0].id).to.equal('123');
     });
-
-    it('removes duplicate STREAK_ACHIEVEMENT notifications', () => {
-      // Fixes issue #13325 - Users receiving duplicate streak achievement notifications
-      const notifications = [
-        new UserNotification({
-          type: 'STREAK_ACHIEVEMENT',
-          id: 123,
-          data: {},
-        }),
-        new UserNotification({
-          type: 'STREAK_ACHIEVEMENT',
-          id: 456,
-          data: {},
-        }),
-        new UserNotification({
-          type: 'CRON',
-          id: 789,
-          data: {},
-        }), // different type, should be kept
-      ];
-
-      const safeNotifications = UserNotification.cleanupCorruptData(notifications);
-      expect(safeNotifications.length).to.equal(2);
-      expect(safeNotifications[0].type).to.equal('STREAK_ACHIEVEMENT');
-      expect(safeNotifications[0].id).to.equal('123');
-      expect(safeNotifications[1].type).to.equal('CRON');
-      expect(safeNotifications[1].id).to.equal('789');
-    });
-
-    it('handles multiple STREAK_ACHIEVEMENT duplicates correctly', () => {
-      // Test case: 3 duplicate STREAK_ACHIEVEMENT notifications
-      const notifications = [
-        new UserNotification({
-          type: 'STREAK_ACHIEVEMENT',
-          id: 111,
-          data: {},
-        }),
-        new UserNotification({
-          type: 'STREAK_ACHIEVEMENT',
-          id: 222,
-          data: {},
-        }),
-        new UserNotification({
-          type: 'STREAK_ACHIEVEMENT',
-          id: 333,
-          data: {},
-        }),
-      ];
-
-      const safeNotifications = UserNotification.cleanupCorruptData(notifications);
-      expect(safeNotifications.length).to.equal(1);
-      expect(safeNotifications[0].type).to.equal('STREAK_ACHIEVEMENT');
-      expect(safeNotifications[0].id).to.equal('111'); // Keep first one
-    });
   });
 });

test/api/v3/integration/challenges/POST-challenges_challengeId_join.test.js

@@ -5,8 +5,6 @@ import {
   createAndPopulateGroup,
   translate as t,
 } from '../../../../helpers/api-integration/v3';
-import { model as Group } from '../../../../../website/server/models/group';
-import { TAVERN_ID } from '../../../../../website/common/script/constants';
 
 describe('POST /challenges/:challengeId/join', () => {
   it('returns error when challengeId is not a valid UUID', async () => {
@@ -29,37 +27,6 @@ describe('POST /challenges/:challengeId/join', () => {
     });
   });
 
-  context('public Guild', () => {
-    let group;
-    let groupLeader;
-    let members;
-    let challenge;
-    before(async () => {
-      ({ group, groupLeader, members } = await createAndPopulateGroup({
-        groupDetails: {
-          name: 'test group',
-          type: 'guild',
-          privacy: 'private',
-        },
-        members: 1,
-        upgradeToGroupPlan: true,
-      }));
-      challenge = await generateChallenge(groupLeader, group);
-      // Creation API is shut down, we need to simulate an extant public group
-      await Group.updateOne({ _id: group._id }, { $set: { privacy: 'public' }, $unset: { 'purchased.plan': 1 } }).exec();
-    });
-
-    it('returns error when challengeId is in an old public Guild', async () => {
-      const authorizedUser = members[0]; // eslint-disable-line prefer-destructuring
-
-      await expect(authorizedUser.post(`/challenges/${challenge._id}/join`)).to.eventually.be.rejected.and.eql({
-        code: 404,
-        error: 'NotFound',
-        message: t('challengeNotFound'),
-      });
-    });
-  });
-
   context('Joining a valid challenge', () => {
     let groupLeader;
     let group;
@@ -99,15 +66,6 @@ describe('POST /challenges/:challengeId/join', () => {
       expect(res.name).to.equal(challenge.name);
     });
 
-    it('succeeds when it\'s a Tavern challenge, even if the user isn\'t a "member" of Tavern', async () => {
-      const tavern = await groupLeader.get(`/groups/${TAVERN_ID}`);
-      const tavernChallenge = await generateChallenge(groupLeader, tavern, { prize: 1 });
-      const generalUser = await generateUser();
-
-      const res = await generalUser.post(`/challenges/${tavernChallenge._id}/join`);
-      expect(res.name).to.equal(tavernChallenge.name);
-    });
-
     it('returns challenge data', async () => {
       const res = await authorizedUser.post(`/challenges/${challenge._id}/join`);
 

test/api/v3/integration/chat/GET-chat.test.js

@@ -62,9 +62,9 @@ describe('GET /groups/:groupId/chat', () => {
 
     it('returns error if user attempts to fetch a sunset Guild', async () => {
       await expect(user.get(`/groups/${group._id}/chat`)).to.eventually.be.rejected.and.eql({
-        code: 404,
-        error: 'NotFound',
-        message: t('groupNotFound'),
+        code: 400,
+        error: 'BadRequest',
+        message: t('featureRetired'),
       });
     });
   });

test/api/v3/integration/chat/POST-chat.like.test.js

@@ -121,9 +121,9 @@ describe('POST /chat/:chatId/like', () => {
 
     await expect(user.post(`/groups/${groupWithChat._id}/chat/${message.message.id}/like`))
       .to.eventually.be.rejected.and.eql({
-        code: 404,
-        error: 'NotFound',
-        message: t('groupNotFound'),
+        code: 400,
+        error: 'BadRequest',
+        message: t('featureRetired'),
       });
   });
 });

test/api/v3/integration/chat/POST-chat.test.js

@@ -9,7 +9,7 @@ import {
 import {
   SPAM_MIN_EXEMPT_CONTRIB_LEVEL,
 } from '../../../../../website/server/models/group';
-import { MAX_MESSAGE_LENGTH, CHAT_FLAG_FROM_SHADOW_MUTE } from '../../../../../website/common/script/constants';
+import { MAX_MESSAGE_LENGTH } from '../../../../../website/common/script/constants';
 import * as email from '../../../../../website/server/libs/email';
 
 describe('POST /chat', () => {
@@ -80,20 +80,17 @@ describe('POST /chat', () => {
       member.updateOne({ 'flags.chatRevoked': false });
     });
 
-    it('errors when chat privileges are revoked when sending a message to a private guild', async () => {
+    it('does not error when chat privileges are revoked when sending a message to a private guild', async () => {
       await member.updateOne({
         'flags.chatRevoked': true,
       });
 
-      await expect(member.post(`/groups/${groupWithChat._id}/chat`, { message: testMessage }))
-        .to.eventually.be.rejected.and.eql({
-          code: 401,
-          error: 'NotAuthorized',
-          message: t('chatPrivilegesRevoked'),
-        });
+      const message = await member.post(`/groups/${groupWithChat._id}/chat`, { message: testMessage });
+
+      expect(message.message.id).to.exist;
     });
 
-    it('errors when chat privileges are revoked when sending a message to a party', async () => {
+    it('does not error when chat privileges are revoked when sending a message to a party', async () => {
       const { group, members } = await createAndPopulateGroup({
         groupDetails: {
           name: 'Party',
@@ -109,12 +106,9 @@ describe('POST /chat', () => {
         'auth.timestamps.created': new Date('2022-01-01'),
       });
 
-      await expect(privatePartyMemberWithChatsRevoked.post(`/groups/${group._id}/chat`, { message: testMessage }))
-        .to.eventually.be.rejected.and.eql({
-          code: 401,
-          error: 'NotAuthorized',
-          message: t('chatPrivilegesRevoked'),
-        });
+      const message = await privatePartyMemberWithChatsRevoked.post(`/groups/${group._id}/chat`, { message: testMessage });
+
+      expect(message.message.id).to.exist;
     });
   });
 
@@ -129,7 +123,7 @@ describe('POST /chat', () => {
       member.updateOne({ 'flags.chatShadowMuted': false });
     });
 
-    it('creates a chat with flagCount set when sending a message to a private guild', async () => {
+    it('creates a chat with zero flagCount when sending a message to a private guild', async () => {
       await member.updateOne({
         'flags.chatShadowMuted': true,
       });
@@ -137,10 +131,10 @@ describe('POST /chat', () => {
       const message = await member.post(`/groups/${groupWithChat._id}/chat`, { message: testMessage });
 
       expect(message.message.id).to.exist;
-      expect(message.message.flagCount).to.eql(CHAT_FLAG_FROM_SHADOW_MUTE);
+      expect(message.message.flagCount).to.eql(0);
     });
 
-    it('creates a chat with flagCount set when sending a message to a party', async () => {
+    it('creates a chat with zero flagCount when sending a message to a party', async () => {
       const { group, members } = await createAndPopulateGroup({
         groupDetails: {
           name: 'Party',
@@ -159,7 +153,7 @@ describe('POST /chat', () => {
       const message = await userWithChatShadowMuted.post(`/groups/${group._id}/chat`, { message: testMessage });
 
       expect(message.message.id).to.exist;
-      expect(message.message.flagCount).to.eql(CHAT_FLAG_FROM_SHADOW_MUTE);
+      expect(message.message.flagCount).to.eql(0);
     });
   });
 

test/api/v3/integration/dataexport/GET-export_avatar-memberId.html.test.js

@@ -0,0 +1,35 @@
+import { v4 as generateUUID } from 'uuid';
+import {
+  generateUser,
+  translate as t,
+} from '../../../../helpers/api-integration/v3';
+
+xdescribe('GET /export/avatar-:memberId.html', () => {
+  let user;
+
+  before(async () => {
+    user = await generateUser();
+  });
+
+  it('validates req.params.memberId', async () => {
+    await expect(user.get('/export/avatar-:memberId.html')).to.eventually.be.rejected.and.eql({
+      code: 400,
+      error: 'BadRequest',
+      message: t('invalidReqParams'),
+    });
+  });
+
+  it('handles non-existing members', async () => {
+    const dummyId = generateUUID();
+    await expect(user.get(`/export/avatar-${dummyId}.html`)).to.eventually.be.rejected.and.eql({
+      code: 404,
+      error: 'NotFound',
+      message: t('userWithIDNotFound', { userId: dummyId }),
+    });
+  });
+
+  it('returns an html page', async () => {
+    const res = await user.get(`/export/avatar-${user._id}.html`);
+    expect(res.substring(0, 100).indexOf('<!DOCTYPE html>')).to.equal(0);
+  });
+});

test/api/v3/integration/dataexport/GET-export_avatar-memberId.png.test.js

@@ -0,0 +1,3 @@
+// TODO how to test this route since it points to a file on AWS s3?
+
+describe('GET /export/avatar-:memberId.png', () => {});

test/api/v3/integration/dataexport/GET-export_inbox.html.test.js

@@ -38,7 +38,7 @@ describe('GET /export/inbox.html', () => {
   it('renders the markdown messages as html', async () => {
     const res = await user.get('/export/inbox.html');
 
-    expect(res).to.include('😄');
+    expect(res).to.include('img class="habitica-emoji"');
     expect(res).to.include('<h1>Hello!</h1>');
     expect(res).to.include('<li>list 1</li>');
   });
@@ -46,7 +46,7 @@ describe('GET /export/inbox.html', () => {
   it('sorts messages from newest to oldest', async () => {
     const res = await user.get('/export/inbox.html');
 
-    const emojiPosition = res.indexOf('😄');
+    const emojiPosition = res.indexOf('img class="habitica-emoji"');
     const headingPosition = res.indexOf('<h1>Hello!</h1>');
     const listPosition = res.indexOf('<li>list 1</li>');
 

test/api/v3/integration/groups/POST-groups_invite.test.js

@@ -61,24 +61,6 @@ describe('Post /groups/:groupId/invite', () => {
         });
     });
 
-    it('fakes sending an invite if user is shadow muted', async () => {
-      const inviterMuted = await inviter.updateOne({ 'flags.chatShadowMuted': true });
-      const userToInvite = await generateUser();
-
-      const response = await inviterMuted.post(`/groups/${group._id}/invite`, {
-        usernames: [userToInvite.auth.local.lowerCaseUsername],
-      });
-      expect(response).to.be.an('Array');
-      expect(response[0]).to.have.all.keys(['_id', 'id', 'name', 'inviter']);
-      expect(response[0]._id).to.be.a('String');
-      expect(response[0].id).to.eql(group._id);
-      expect(response[0].name).to.eql(groupName);
-      expect(response[0].inviter).to.eql(inviter._id);
-
-      await expect(userToInvite.get('/user'))
-        .to.eventually.not.have.nested.property('invitations.parties[0].id', group._id);
-    });
-
     it('invites a user to a group by username', async () => {
       const userToInvite = await generateUser();
 
@@ -227,24 +209,6 @@ describe('Post /groups/:groupId/invite', () => {
         });
     });
 
-    it('fakes sending an invite if user is shadow muted', async () => {
-      const inviterMuted = await inviter.updateOne({ 'flags.chatShadowMuted': true });
-      const userToInvite = await generateUser();
-
-      const response = await inviterMuted.post(`/groups/${group._id}/invite`, {
-        uuids: [userToInvite._id],
-      });
-      expect(response).to.be.an('Array');
-      expect(response[0]).to.have.all.keys(['_id', 'id', 'name', 'inviter']);
-      expect(response[0]._id).to.be.a('String');
-      expect(response[0].id).to.eql(group._id);
-      expect(response[0].name).to.eql(groupName);
-      expect(response[0].inviter).to.eql(inviter._id);
-
-      await expect(userToInvite.get('/user'))
-        .to.eventually.not.have.nested.property('invitations.parties[0].id', group._id);
-    });
-
     it('invites a user to a group by uuid', async () => {
       const userToInvite = await generateUser();
 
@@ -317,19 +281,6 @@ describe('Post /groups/:groupId/invite', () => {
         });
     });
 
-    it('fakes sending invite when inviter is shadow muted', async () => {
-      const inviterMuted = await inviter.updateOne({ 'flags.chatShadowMuted': true });
-      const res = await inviterMuted.post(`/groups/${group._id}/invite`, {
-        emails: [testInvite],
-        inviter: 'inviter name',
-      });
-
-      const updatedUser = await inviterMuted.sync();
-
-      expect(res).to.exist;
-      expect(updatedUser.invitesSent).to.eql(1);
-    });
-
     it('returns an error when invite is missing an email', async () => {
       await expect(inviter.post(`/groups/${group._id}/invite`, {
         emails: [{ name: 'test' }],
@@ -454,19 +405,6 @@ describe('Post /groups/:groupId/invite', () => {
         });
     });
 
-    it('fakes sending an invite if user is shadow muted', async () => {
-      const inviterMuted = await inviter.updateOne({ 'flags.chatShadowMuted': true });
-      const newUser = await generateUser();
-      const invite = await inviterMuted.post(`/groups/${group._id}/invite`, {
-        uuids: [newUser._id],
-        emails: [{ name: 'test', email: 'test@habitica.com' }],
-      });
-      const invitedUser = await newUser.get('/user');
-
-      expect(invitedUser.invitations.parties[0]).to.not.exist;
-      expect(invite).to.exist;
-    });
-
     it('invites users to a group by uuid and email', async () => {
       const newUser = await generateUser();
       const invite = await inviter.post(`/groups/${group._id}/invite`, {

test/api/v3/integration/inbox/GET-inbox_messages.test.js

@@ -47,7 +47,7 @@ describe('GET /inbox/messages', () => {
   it('returns four messages when using page-query ', async () => {
     const promises = [];
 
-    for (let i = 0; i < 50; i += 1) {
+    for (let i = 0; i < 10; i += 1) {
       promises.push(user.post('/members/send-private-message', {
         toUserId: user.id,
         message: 'fourth',

test/api/v3/integration/inbox/POST-send_private_message.test.js

@@ -43,7 +43,7 @@ describe('POST /members/send-private-message', () => {
     });
   });
 
-  it('returns error when recipient has blocked the sender', async () => {
+  it('returns error when to user has blocked the sender', async () => {
     const receiver = await generateUser({ 'inbox.blocks': [userToSendMessage._id] });
 
     await expect(userToSendMessage.post('/members/send-private-message', {
@@ -56,7 +56,7 @@ describe('POST /members/send-private-message', () => {
     });
   });
 
-  it('returns error when sender has blocked recipient', async () => {
+  it('returns error when sender has blocked to user', async () => {
     const receiver = await generateUser();
     const sender = await generateUser({ 'inbox.blocks': [receiver._id] });
 
@@ -70,7 +70,7 @@ describe('POST /members/send-private-message', () => {
     });
   });
 
-  it('returns error when recipient has opted out of messaging', async () => {
+  it('returns error when to user has opted out of messaging', async () => {
     const receiver = await generateUser({ 'inbox.optOut': true });
 
     await expect(userToSendMessage.post('/members/send-private-message', {
@@ -174,7 +174,7 @@ describe('POST /members/send-private-message', () => {
     expect(notification.data.excerpt).to.equal(messageExcerpt);
   });
 
-  it('allows admin to send when recipient has blocked the admin', async () => {
+  it('allows admin to send when sender has blocked the admin', async () => {
     userToSendMessage = await generateUser({
       'permissions.moderator': true,
     });
@@ -202,7 +202,7 @@ describe('POST /members/send-private-message', () => {
     expect(sendersMessageInSendersInbox).to.exist;
   });
 
-  it('allows admin to send when recipient has opted out of messaging', async () => {
+  it('allows admin to send when to user has opted out of messaging', async () => {
     userToSendMessage = await generateUser({
       'permissions.moderator': true,
     });
@@ -229,58 +229,4 @@ describe('POST /members/send-private-message', () => {
     expect(sendersMessageInReceiversInbox).to.exist;
     expect(sendersMessageInSendersInbox).to.exist;
   });
-
-  describe('sender is shadow muted', () => {
-    beforeEach(async () => {
-      userToSendMessage = await generateUser({
-        'flags.chatShadowMuted': true,
-      });
-    });
-
-    it('does not save the message in the receiver inbox', async () => {
-      const receiver = await generateUser();
-
-      const response = await userToSendMessage.post('/members/send-private-message', {
-        message: messageToSend,
-        toUserId: receiver._id,
-      });
-
-      expect(response.message.uuid).to.equal(receiver._id);
-
-      const updatedReceiver = await receiver.get('/user');
-      const updatedSender = await userToSendMessage.get('/user');
-
-      const sendersMessageInReceiversInbox = _.find(
-        updatedReceiver.inbox.messages,
-        message => message.uuid === userToSendMessage._id && message.text === messageToSend,
-      );
-
-      const sendersMessageInSendersInbox = _.find(
-        updatedSender.inbox.messages,
-        message => message.uuid === receiver._id && message.text === messageToSend,
-      );
-
-      expect(sendersMessageInReceiversInbox).to.not.exist;
-      expect(sendersMessageInSendersInbox).to.exist;
-    });
-
-    it('does not save the message message twice if recipient is sender', async () => {
-      const response = await userToSendMessage.post('/members/send-private-message', {
-        message: messageToSend,
-        toUserId: userToSendMessage._id,
-      });
-
-      expect(response.message.uuid).to.equal(userToSendMessage._id);
-
-      const updatedSender = await userToSendMessage.get('/user');
-
-      const sendersMessageInSendersInbox = _.find(
-        updatedSender.inbox.messages,
-        message => message.uuid === userToSendMessage._id && message.text === messageToSend,
-      );
-
-      expect(sendersMessageInSendersInbox).to.exist;
-      expect(Object.keys(updatedSender.inbox.messages).length).to.equal(1);
-    });
-  });
 });

test/api/v3/integration/user/auth/POST-user_auth_social.test.js

@@ -65,52 +65,6 @@ describe('POST /user/auth/social', () => {
       await expect(getProperty('users', response.id, 'profile.name')).to.eventually.equal('a google user');
     });
 
-    it('includes sanitized version of provided username', async () => {
-      const response = await api.post(endpoint, {
-        authResponse: { access_token: randomAccessToken }, // eslint-disable-line camelcase
-        network,
-        username: 'Google User Name',
-      });
-
-      await expect(getProperty('users', response.id, 'auth.local.username')).to.eventually.equal('GoogleUserName');
-      await expect(getProperty('users', response.id, 'auth.local.lowerCaseUsername')).to.eventually.equal('googleusername');
-    });
-
-    it('generates a random username if provided username contains only disallowed characters', async () => {
-      const response = await api.post(endpoint, {
-        authResponse: { access_token: randomAccessToken }, // eslint-disable-line camelcase
-        network,
-        username: 'Áîüè',
-      });
-
-      await expect(getProperty('users', response.id, 'auth.local.username')).to.eventually.contain('hb-');
-      await expect(getProperty('users', response.id, 'auth.local.lowerCaseUsername')).to.eventually.contain('hb-');
-    });
-
-    it('generates a random username if provided username contains a disallowed word', async () => {
-      const response = await api.post(endpoint, {
-        authResponse: { access_token: randomAccessToken }, // eslint-disable-line camelcase
-        network,
-        username: 'i am a TESTPLACEHOLDERSLURWORDHERE',
-      });
-
-      await expect(getProperty('users', response.id, 'auth.local.username')).to.eventually.contain('hb-');
-      await expect(getProperty('users', response.id, 'auth.local.lowerCaseUsername')).to.eventually.contain('hb-');
-    });
-
-    it('generates a random username if sanitized username conflicts with an extant user', async () => {
-      user = await generateUser({ 'auth.local.username': 'GoogleUserName' });
-
-      const response = await api.post(endpoint, {
-        authResponse: { access_token: randomAccessToken }, // eslint-disable-line camelcase
-        network,
-        username: 'Google User Name',
-      });
-
-      await expect(getProperty('users', response.id, 'auth.local.username')).to.eventually.contain('hb-');
-      await expect(getProperty('users', response.id, 'auth.local.lowerCaseUsername')).to.eventually.contain('hb-');
-    });
-
     it('fails if allowRegister is false and user does not exist', async () => {
       await expect(api.post(endpoint, {
         authResponse: { access_token: randomAccessToken }, // eslint-disable-line camelcase

test/api/v4/inbox/GET-inbox-conversations.test.js

@@ -66,7 +66,7 @@ describe('GET /inbox/conversations', () => {
   it('returns five messages when using page-query ', async () => {
     const promises = [];
 
-    for (let i = 0; i < 50; i += 1) {
+    for (let i = 0; i < 10; i += 1) {
       promises.push(user.post('/members/send-private-message', {
         toUserId: user.id,
         message: 'fourth',

test/common/libs/habiticaMarkdown.test.js

@@ -1,67 +0,0 @@
-import md from 'habitica-markdown';
-
-describe('habiticaMarkdown emoji plugin', () => {
-  it('renders standard emoji as Unicode', () => {
-    const result = md.render(':smile:');
-    expect(result).to.include('😄');
-    expect(result).not.to.include('img');
-  });
-
-  it('renders thumbsup emoji as Unicode', () => {
-    const result = md.render(':thumbsup:');
-    expect(result).to.include('👍');
-  });
-
-  it('renders +1 emoji as Unicode', () => {
-    const result = md.render(':+1:');
-    expect(result).to.include('👍');
-  });
-
-  it('renders melior as an img tag', () => {
-    const result = md.render(':melior:');
-    expect(result).to.include('<img class="habitica-emoji"');
-    expect(result).to.include('src="https://s3.amazonaws.com/habitica-assets/cdn/emoji/melior.png"');
-    expect(result).to.include('alt="melior"');
-  });
-
-  it('does NOT convert emoji inside markdown links', () => {
-    const result = md.render('[:smile: link](http://example.com)');
-    expect(result).to.include(':smile: link');
-    expect(result).not.to.include('😄');
-  });
-
-  it('converts emoji outside of links normally', () => {
-    const result = md.render(':smile: [link](http://example.com)');
-    expect(result).to.include('😄');
-    expect(result).to.include('link');
-  });
-
-  it('leaves removed custom emoji (bowtie) as literal text', () => {
-    const result = md.render(':bowtie:');
-    expect(result).to.include(':bowtie:');
-    expect(result).not.to.include('img');
-  });
-
-  it('leaves unknown shortcodes as literal text', () => {
-    const result = md.render(':nonexistent_emoji_xyz:');
-    expect(result).to.include(':nonexistent_emoji_xyz:');
-  });
-
-  it('renders new emoji not in the old dataset', () => {
-    const result = md.render(':yawning_face:');
-    expect(result).to.include('🥱');
-  });
-
-  it('supports unsafeHTMLRender', () => {
-    const result = md.unsafeHTMLRender('<b>bold</b> :smile:');
-    expect(result).to.include('<b>bold</b>');
-    expect(result).to.include('😄');
-  });
-
-  it('supports renderWithMentions', () => {
-    const result = md.renderWithMentions(':smile: @testuser', { userName: 'testuser' });
-    expect(result).to.include('😄');
-    expect(result).to.include('at-text');
-    expect(result).to.include('at-highlight');
-  });
-});

test/common/ops/rebirth.js

@@ -211,32 +211,22 @@ describe('shared.ops.rebirth', () => {
     expect(user.achievements.rebirthLevel).to.equal(2);
   });
 
-  it('increments rebirth achievements even when level is lower than previous', async () => {
+  it('does not increment rebirth achievements when level is lower than previous', async () => {
     user.stats.lvl = 2;
     user.achievements.rebirths = 1;
     user.achievements.rebirthLevel = 3;
 
     await rebirth(user);
 
-    expect(user.achievements.rebirths).to.equal(2);
+    expect(user.achievements.rebirths).to.equal(1);
     expect(user.achievements.rebirthLevel).to.equal(3);
   });
 
-  it('updates rebirthLevel when current level is higher than previous', async () => {
-    user.stats.lvl = 5;
-    user.achievements.rebirths = 1;
-    user.achievements.rebirthLevel = 3;
-
-    await rebirth(user);
-
-    expect(user.achievements.rebirths).to.equal(2);
-    expect(user.achievements.rebirthLevel).to.equal(5);
-  });
-
-  it('increments rebirth achievements when level is MAX_LEVEL', async () => {
+  it('always increments rebirth achievements when level is MAX_LEVEL', async () => {
     user.stats.lvl = MAX_LEVEL;
     user.achievements.rebirths = 1;
-    user.achievements.rebirthLevel = MAX_LEVEL;
+    // this value is not actually possible (actually capped at MAX_LEVEL) but makes a good test
+    user.achievements.rebirthLevel = MAX_LEVEL + 1;
 
     await rebirth(user);
 
@@ -244,10 +234,11 @@ describe('shared.ops.rebirth', () => {
     expect(user.achievements.rebirthLevel).to.equal(MAX_LEVEL);
   });
 
-  it('increments rebirth achievements when level is greater than MAX_LEVEL', async () => {
+  it('always increments rebirth achievements when level is greater than MAX_LEVEL', async () => {
     user.stats.lvl = MAX_LEVEL + 1;
     user.achievements.rebirths = 1;
-    user.achievements.rebirthLevel = MAX_LEVEL;
+    // this value is not actually possible (actually capped at MAX_LEVEL) but makes a good test
+    user.achievements.rebirthLevel = MAX_LEVEL + 2;
 
     await rebirth(user);
 

test/common/ops/unlock.test.js

@@ -20,9 +20,6 @@ describe('shared.ops.unlock', () => {
   beforeEach(() => {
     user = generateUser();
     user.balance = usersStartingGems;
-    user.pinnedItems.push({ type: 'background', path: 'backgrounds.backgrounds042016.giant_florals' });
-    user.pinnedItems.push({ type: 'haircolor', path: 'hair.color.rainbow' });
-    user.pinnedItems.push({ type: 'shirt', path: 'shirt.convict' });
     clock = sandbox.useFakeTimers(new Date('2024-04-10'));
   });
 
@@ -275,7 +272,6 @@ describe('shared.ops.unlock', () => {
   });
 
   it('unlocks an item (appearance)', async () => {
-    expect(user.pinnedItems.findIndex(item => item.type === 'shirt')).to.not.equal(-1);
     const path = unlockPath.split(',')[0];
     const initialShirts = Object.keys(user.purchased.shirt).length;
     const [, message] = await unlock(user, { query: { path } });
@@ -286,12 +282,11 @@ describe('shared.ops.unlock', () => {
     );
     expect(get(user.purchased, path)).to.be.true;
     expect(user.balance).to.equal(usersStartingGems - 0.5);
-    expect(user.pinnedItems.findIndex(item => item.type === 'shirt')).to.equal(-1);
   });
 
   it('unlocks an item (hair color)', async () => {
     user.purchased.hair.color = {};
-    expect(user.pinnedItems.findIndex(item => item.type === 'haircolor')).to.not.equal(-1);
+
     const path = hairUnlockPath.split(',')[0];
     const initialColorHair = Object.keys(user.purchased.hair.color).length;
     const [, message] = await unlock(user, { query: { path } });
@@ -302,7 +297,6 @@ describe('shared.ops.unlock', () => {
     );
     expect(get(user.purchased, path)).to.be.true;
     expect(user.balance).to.equal(usersStartingGems - 0.5);
-    expect(user.pinnedItems.findIndex(item => item.type === 'haircolor')).to.equal(-1);
   });
 
   it('unlocks an item (facial hair)', async () => {
@@ -340,7 +334,6 @@ describe('shared.ops.unlock', () => {
 
   it('unlocks an item (background)', async () => {
     const initialBackgrounds = Object.keys(user.purchased.background).length;
-    expect(user.pinnedItems.findIndex(item => item.type === 'background')).to.not.equal(-1);
     const [, message] = await unlock(user, {
       query: { path: backgroundUnlockPath },
     });
@@ -351,7 +344,6 @@ describe('shared.ops.unlock', () => {
     );
     expect(get(user.purchased, backgroundUnlockPath)).to.be.true;
     expect(user.balance).to.equal(usersStartingGems - 1.75);
-    expect(user.pinnedItems.findIndex(item => item.type === 'background')).to.equal(-1);
   });
 
   it('handles an invalid hair path gracefully', async () => {

test/content/aprilFools.test.js

@@ -1,41 +0,0 @@
-import { getMatchingSwap, makeSubstitutionMap } from '../../website/common/script/content/constants/aprilFools';
-
-describe('April Fools', () => {
-  describe('getMatchingSwap', () => {
-    it('returns Veggie for 2020', () => {
-      const swap = getMatchingSwap(new Date('2020-04-01'));
-      expect(swap).to.equal('Veggie');
-    });
-    it('returns Alien for 2026', () => {
-      const swap = getMatchingSwap(new Date('2026-04-01'));
-      expect(swap).to.equal('Alien');
-    });
-    it('Cycles through swaps correctly', () => {
-      const swap = getMatchingSwap(new Date('2027-04-01'));
-      expect(swap).to.equal('Veggie');
-    });
-  });
-
-  describe('makeSubstitutionMap', () => {
-    it('returns correct substitution for Veggie', () => {
-      const substitutions = makeSubstitutionMap('Veggie');
-      expect(substitutions.pets['Pet-Wolf-']).to.equal('Pet-Wolf-Veggie');
-      expect(substitutions.pets['Pet-TigerCub-']).to.equal('Pet-TigerCub-Veggie');
-      expect(substitutions.pets['Pet-Yarn-']).to.equal('Pet-BearCub-Veggie');
-      expect(substitutions.pets.default).to.equal('Pet-Dragon-Veggie');
-      expect(substitutions.pets.noPet).to.equal('Pet-Wolf-Veggie');
-      expect(substitutions.pets.noPetIOS).to.equal('Pet-TigerCub-Veggie');
-      expect(substitutions.pets.noPetAndroid).to.equal('Pet-Cactus-Veggie');
-    });
-
-    it('returns correct substitution for Cryptid', () => {
-      const substitutions = makeSubstitutionMap('Cryptid');
-      expect(substitutions.pets['Pet-Fox-']).to.equal('Pet-Fox-Cryptid');
-      expect(substitutions.pets['Pet-FlyingPig-']).to.equal('Pet-FlyingPig-Cryptid');
-      expect(substitutions.pets['Pet-Yarn-']).to.equal('Pet-BearCub-Cryptid');
-      expect(substitutions.pets.default).to.equal('Pet-Dragon-Cryptid');
-      expect(substitutions.pets.noPet).to.equal('Pet-Wolf-Cryptid');
-      expect(substitutions.pets.noPetAndroid).to.equal('Pet-Cactus-Cryptid');
-    });
-  });
-});

test/content/translator.js

@@ -1,7 +1,12 @@
-import { STRING_DOES_NOT_EXIST_MSG } from '../helpers/content.helper';
+import { STRING_ERROR_MSG, STRING_DOES_NOT_EXIST_MSG } from '../helpers/content.helper';
 import translator from '../../website/common/script/content/translation';
 
 describe('Translator', () => {
+  it('returns error message if string is not properly formatted', () => {
+    const improperlyFormattedString = translator('petName', { attr: 0 })();
+    expect(improperlyFormattedString).to.match(STRING_ERROR_MSG);
+  });
+
   it('returns an error message if string does not exist', () => {
     const stringDoesNotExist = translator('stringDoesNotExist')();
     expect(stringDoesNotExist).to.match(STRING_DOES_NOT_EXIST_MSG);

test/helpers/content.helper.js

@@ -1,8 +1,8 @@
 import i18n from '../../website/common/script/i18n';
 import './globals.helper';
-import { contentTranslations } from '../../website/server/libs/i18n';
+import { translations } from '../../website/server/libs/i18n';
 
-i18n.translations = contentTranslations;
+i18n.translations = translations;
 
 export const STRING_ERROR_MSG = /^Error processing the string ".*". Please see Help > Report a Bug.$/;
 export const STRING_DOES_NOT_EXIST_MSG = /^String '.*' not found.$/;

test/helpers/mongo.js

@@ -21,7 +21,6 @@ export async function getProperty (collectionName, id, path) {
 // Specifically helpful for the GET /groups tests,
 // resets the db to an empty state and creates a tavern document
 export async function resetHabiticaDB () {
-  console.info('Resetting Habitica DB');
   const groups = mongoose.connection.db.collection('groups');
   const users = mongoose.connection.db.collection('users');
   return mongoose.connection.dropDatabase()

website/client/index.html

@@ -32,6 +32,6 @@
 
     <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/core' vite-ignore></script>
+    <script type='text/javascript' src='/api/v4/i18n/browser-script' vite-ignore></script>
   </body>
 </html>

website/client/package.json

@@ -4,7 +4,6 @@
   "private": true,
   "scripts": {
     "serve": "vite",
-    "serve:docker": "npx vite --host 0.0.0.0",
     "build": "vite build",
     "preview": "vite preview",
     "test:unit": "vitest run",
@@ -28,13 +27,12 @@
     "eslint-config-habitrpg": "6.2.0",
     "eslint-plugin-mocha": "5.3.0",
     "eslint-plugin-vue": "7.20.0",
-    "habitica-markdown": "^4.0.0",
+    "habitica-markdown": "^3.0.0",
     "hellojs": "^1.20.0",
     "intro.js": "^7.2.0",
     "jquery": "^3.7.1",
     "lodash": "^4.17.21",
     "markdown-it": "^14.0.0",
-    "micromustache": "^8.0.3",
     "moment": "^2.29.4",
     "nconf": "^0.12.1",
     "sass": "^1.63.4",

website/client/src/app.vue

@@ -229,11 +229,6 @@ export default {
             }
             return Promise.resolve(error);
           }
-          if (error.response.status === 404
-            && error.response.config.method === 'get'
-            && error.response.config.url.indexOf('/api/v4/groups/party') !== -1) {
-            return Promise.reject(error);
-          }
         }
 
         const errorData = error.response.data;

website/client/src/assets/css/sprites.css

@@ -22,15 +22,8 @@
   height: 219px;
 }
 
-.quest_alien {
-  background: url("https://habitica-assets.s3.amazonaws.com/mobileApp/images/quest_alien.gif") no-repeat;
-  width: 219px;
-  height: 219px;
-}
-
 .Pet_HatchingPotion_Dessert, .Pet_HatchingPotion_Veggie, .Pet_HatchingPotion_Windup,
-.Pet_HatchingPotion_VirtualPet, .Pet_HatchingPotion_Fungi, .Pet_HatchingPotion_Cryptid,
-.Pet_HatchingPotion_Alien {
+.Pet_HatchingPotion_VirtualPet, .Pet_HatchingPotion_Fungi, .Pet_HatchingPotion_Cryptid {
   width: 68px;
   height: 68px;
 }
@@ -59,10 +52,6 @@
   background: url("https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet_HatchingPotion_Cryptid.gif") no-repeat;
 }
 
-.Pet_HatchingPotion_Alien {
-  background: url("https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet_HatchingPotion_Alien.gif") no-repeat;
-}
-
 .Gems {
   display:inline-block;
   margin-right:5px;

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

@@ -1055,16 +1055,6 @@
   width: 141px;
   height: 147px;
 }
-.background_elegant_palace {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_elegant_palace.png');
-  width: 141px;
-  height: 147px;
-}
-.background_elven_citadel {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_elven_citadel.png');
-  width: 141px;
-  height: 147px;
-}
 .background_enchanted_music_room {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_enchanted_music_room.png');
   width: 141px;
@@ -1761,11 +1751,6 @@
   width: 141px;
   height: 147px;
 }
-.background_nighttime_street_with_shops {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_nighttime_street_with_shops.png');
-  width: 141px;
-  height: 147px;
-}
 .background_ocean_sunrise {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_ocean_sunrise.png');
   width: 141px;
@@ -1801,11 +1786,6 @@
   width: 141px;
   height: 147px;
 }
-.background_on_a_strange_planet {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_on_a_strange_planet.png');
-  width: 141px;
-  height: 147px;
-}
 .background_on_tree_branch {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_on_tree_branch.png');
   width: 141px;
@@ -1941,11 +1921,6 @@
   width: 141px;
   height: 147px;
 }
-.background_riding_a_comet {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_riding_a_comet.png');
-  width: 141px;
-  height: 147px;
-}
 .background_rime_ice {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_rime_ice.png');
   width: 141px;
@@ -2442,11 +2417,6 @@
   width: 141px;
   height: 147px;
 }
-.background_waterfall_with_rainbow {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_waterfall_with_rainbow.png');
-  width: 141px;
-  height: 147px;
-}
 .background_wedding_arch {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_wedding_arch.png');
   width: 141px;
@@ -2467,11 +2437,6 @@
   width: 141px;
   height: 147px;
 }
-.background_winter_desert_with_saguaros {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_winter_desert_with_saguaros.png');
-  width: 141px;
-  height: 147px;
-}
 .background_winter_fireworks {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_winter_fireworks.png');
   width: 141px;
@@ -29490,11 +29455,6 @@
   width: 60px;
   height: 60px;
 }
-.back_armoire_harpsichord {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/back_armoire_harpsichord.png');
-  width: 114px;
-  height: 90px;
-}
 .body_armoire_clownsBowtie {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/body_armoire_clownsBowtie.png');
   width: 114px;
@@ -29820,11 +29780,6 @@
   width: 114px;
   height: 90px;
 }
-.broad_armor_armoire_handstandOutfit {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_handstandOutfit.png');
-  width: 114px;
-  height: 90px;
-}
 .broad_armor_armoire_hattersSuit {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_hattersSuit.png');
   width: 114px;
@@ -29890,11 +29845,6 @@
   width: 114px;
   height: 90px;
 }
-.broad_armor_armoire_loneCowpokeOutfit {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_loneCowpokeOutfit.png');
-  width: 114px;
-  height: 90px;
-}
 .broad_armor_armoire_lunarArmor {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_lunarArmor.png');
   width: 90px;
@@ -30100,11 +30050,6 @@
   width: 114px;
   height: 90px;
 }
-.broad_armor_armoire_softYellowSuit {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_softYellowSuit.png');
-  width: 114px;
-  height: 90px;
-}
 .broad_armor_armoire_springPetalYukata {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_springPetalYukata.png');
   width: 114px;
@@ -30415,11 +30360,6 @@
   width: 114px;
   height: 90px;
 }
-.head_armoire_floppyYellowHat {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_floppyYellowHat.png');
-  width: 114px;
-  height: 90px;
-}
 .head_armoire_flutteryWig {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_flutteryWig.png');
   width: 114px;
@@ -30540,11 +30480,6 @@
   width: 114px;
   height: 87px;
 }
-.head_armoire_loneCowpokeHat {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_loneCowpokeHat.png');
-  width: 114px;
-  height: 90px;
-}
 .head_armoire_lunarCrown {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_lunarCrown.png');
   width: 90px;
@@ -30740,11 +30675,6 @@
   width: 114px;
   height: 90px;
 }
-.head_armoire_verdantArmingCap {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_verdantArmingCap.png');
-  width: 114px;
-  height: 90px;
-}
 .head_armoire_vermilionArcherHelm {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_vermilionArcherHelm.png');
   width: 90px;
@@ -30860,11 +30790,6 @@
   width: 114px;
   height: 90px;
 }
-.shield_armoire_doubleBass {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_doubleBass.png');
-  width: 114px;
-  height: 90px;
-}
 .shield_armoire_dragonTamerShield {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_dragonTamerShield.png');
   width: 90px;
@@ -31070,11 +30995,6 @@
   width: 90px;
   height: 90px;
 }
-.shield_armoire_prettyPinkGiftBox {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_prettyPinkGiftBox.png');
-  width: 114px;
-  height: 90px;
-}
 .shield_armoire_ramHornShield {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_ramHornShield.png');
   width: 90px;
@@ -31160,11 +31080,6 @@
   width: 114px;
   height: 90px;
 }
-.shield_armoire_softYellowPillow {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_softYellowPillow.png');
-  width: 114px;
-  height: 90px;
-}
 .shield_armoire_spanishGuitar {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_spanishGuitar.png');
   width: 114px;
@@ -31215,11 +31130,6 @@
   width: 114px;
   height: 90px;
 }
-.shield_armoire_verdantBanner {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_verdantBanner.png');
-  width: 114px;
-  height: 90px;
-}
 .shield_armoire_vikingShield {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_vikingShield.png');
   width: 90px;
@@ -31490,11 +31400,6 @@
   width: 114px;
   height: 90px;
 }
-.slim_armor_armoire_handstandOutfit {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_handstandOutfit.png');
-  width: 114px;
-  height: 90px;
-}
 .slim_armor_armoire_hattersSuit {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_hattersSuit.png');
   width: 114px;
@@ -31560,11 +31465,6 @@
   width: 114px;
   height: 90px;
 }
-.slim_armor_armoire_loneCowpokeOutfit {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_loneCowpokeOutfit.png');
-  width: 114px;
-  height: 90px;
-}
 .slim_armor_armoire_lunarArmor {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_lunarArmor.png');
   width: 90px;
@@ -31770,11 +31670,6 @@
   width: 114px;
   height: 90px;
 }
-.slim_armor_armoire_softYellowSuit {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_softYellowSuit.png');
-  width: 114px;
-  height: 90px;
-}
 .slim_armor_armoire_springPetalYukata {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_springPetalYukata.png');
   width: 114px;
@@ -31865,11 +31760,6 @@
   width: 114px;
   height: 90px;
 }
-.weapon_armoire_bambooFlute {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_armoire_bambooFlute.png');
-  width: 114px;
-  height: 90px;
-}
 .weapon_armoire_barristerGavel {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_armoire_barristerGavel.png');
   width: 90px;
@@ -32280,11 +32170,6 @@
   width: 114px;
   height: 90px;
 }
-.weapon_armoire_prettyPinkParasol {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_armoire_prettyPinkParasol.png');
-  width: 114px;
-  height: 90px;
-}
 .weapon_armoire_pushBroom {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_armoire_pushBroom.png');
   width: 114px;
@@ -34175,81 +34060,6 @@
   width: 90px;
   height: 90px;
 }
-.back_mystery_202601 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/back_mystery_202601.png');
-  width: 114px;
-  height: 90px;
-}
-.back_mystery_202602 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/back_mystery_202602.png');
-  width: 114px;
-  height: 90px;
-}
-.back_mystery_202605 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/back_mystery_202605.png');
-  width: 114px;
-  height: 90px;
-}
-.broad_armor_mystery_202512 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_mystery_202512.png');
-  width: 114px;
-  height: 90px;
-}
-.broad_armor_mystery_202604 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_mystery_202604.png');
-  width: 114px;
-  height: 90px;
-}
-.head_mystery_202512 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_mystery_202512.png');
-  width: 114px;
-  height: 90px;
-}
-.head_mystery_202602 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_mystery_202602.png');
-  width: 114px;
-  height: 90px;
-}
-.head_mystery_202603 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_mystery_202603.png');
-  width: 114px;
-  height: 90px;
-}
-.head_mystery_202604 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_mystery_202604.png');
-  width: 114px;
-  height: 90px;
-}
-.shield_mystery_202605 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_mystery_202605.png');
-  width: 114px;
-  height: 90px;
-}
-.slim_armor_mystery_202512 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_mystery_202512.png');
-  width: 114px;
-  height: 90px;
-}
-.slim_armor_mystery_202604 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_mystery_202604.png');
-  width: 114px;
-  height: 90px;
-}
-.weapon_mystery_202512 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_mystery_202512.png');
-  width: 114px;
-  height: 90px;
-}
-.weapon_mystery_202601 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_mystery_202601.png');
-  width: 114px;
-  height: 90px;
-}
-.weapon_mystery_202603 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_mystery_202603.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;
@@ -36370,26 +36180,6 @@
   width: 114px;
   height: 90px;
 }
-.broad_armor_special_spring2026Healer {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_spring2026Healer.png');
-  width: 114px;
-  height: 90px;
-}
-.broad_armor_special_spring2026Mage {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_spring2026Mage.png');
-  width: 114px;
-  height: 90px;
-}
-.broad_armor_special_spring2026Rogue {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_spring2026Rogue.png');
-  width: 114px;
-  height: 90px;
-}
-.broad_armor_special_spring2026Warrior {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_spring2026Warrior.png');
-  width: 114px;
-  height: 90px;
-}
 .broad_armor_special_springHealer {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_springHealer.png');
   width: 90px;
@@ -36710,26 +36500,6 @@
   width: 114px;
   height: 90px;
 }
-.head_special_spring2026Healer {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_spring2026Healer.png');
-  width: 114px;
-  height: 90px;
-}
-.head_special_spring2026Mage {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_spring2026Mage.png');
-  width: 114px;
-  height: 90px;
-}
-.head_special_spring2026Rogue {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_spring2026Rogue.png');
-  width: 114px;
-  height: 90px;
-}
-.head_special_spring2026Warrior {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_spring2026Warrior.png');
-  width: 114px;
-  height: 90px;
-}
 .head_special_springHealer {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_springHealer.png');
   width: 90px;
@@ -36915,21 +36685,6 @@
   width: 114px;
   height: 90px;
 }
-.shield_special_spring2026Healer {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_special_spring2026Healer.png');
-  width: 114px;
-  height: 90px;
-}
-.shield_special_spring2026Rogue {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_special_spring2026Rogue.png');
-  width: 114px;
-  height: 90px;
-}
-.shield_special_spring2026Warrior {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_special_spring2026Warrior.png');
-  width: 114px;
-  height: 90px;
-}
 .shield_special_springHealer {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_special_springHealer.png');
   width: 90px;
@@ -37165,26 +36920,6 @@
   width: 114px;
   height: 90px;
 }
-.slim_armor_special_spring2026Healer {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_spring2026Healer.png');
-  width: 114px;
-  height: 90px;
-}
-.slim_armor_special_spring2026Mage {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_spring2026Mage.png');
-  width: 114px;
-  height: 90px;
-}
-.slim_armor_special_spring2026Rogue {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_spring2026Rogue.png');
-  width: 114px;
-  height: 90px;
-}
-.slim_armor_special_spring2026Warrior {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_spring2026Warrior.png');
-  width: 114px;
-  height: 90px;
-}
 .slim_armor_special_springHealer {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_springHealer.png');
   width: 90px;
@@ -37425,26 +37160,6 @@
   width: 114px;
   height: 90px;
 }
-.weapon_special_spring2026Healer {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_special_spring2026Healer.png');
-  width: 114px;
-  height: 90px;
-}
-.weapon_special_spring2026Mage {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_special_spring2026Mage.png');
-  width: 114px;
-  height: 90px;
-}
-.weapon_special_spring2026Rogue {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_special_spring2026Rogue.png');
-  width: 114px;
-  height: 90px;
-}
-.weapon_special_spring2026Warrior {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_special_spring2026Warrior.png');
-  width: 114px;
-  height: 90px;
-}
 .weapon_special_springHealer {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_special_springHealer.png');
   width: 90px;
@@ -38925,26 +38640,6 @@
   width: 114px;
   height: 90px;
 }
-.broad_armor_special_winter2026Healer {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_winter2026Healer.png');
-  width: 114px;
-  height: 90px;
-}
-.broad_armor_special_winter2026Mage {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_winter2026Mage.png');
-  width: 114px;
-  height: 90px;
-}
-.broad_armor_special_winter2026Rogue {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_winter2026Rogue.png');
-  width: 117px;
-  height: 120px;
-}
-.broad_armor_special_winter2026Warrior {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_winter2026Warrior.png');
-  width: 114px;
-  height: 90px;
-}
 .broad_armor_special_yeti {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_yeti.png');
   width: 90px;
@@ -39240,26 +38935,6 @@
   width: 114px;
   height: 90px;
 }
-.head_special_winter2026Healer {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_winter2026Healer.png');
-  width: 114px;
-  height: 90px;
-}
-.head_special_winter2026Mage {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_winter2026Mage.png');
-  width: 114px;
-  height: 90px;
-}
-.head_special_winter2026Rogue {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_winter2026Rogue.png');
-  width: 117px;
-  height: 120px;
-}
-.head_special_winter2026Warrior {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_winter2026Warrior.png');
-  width: 114px;
-  height: 90px;
-}
 .head_special_yeti {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_yeti.png');
   width: 90px;
@@ -39440,21 +39115,6 @@
   width: 114px;
   height: 90px;
 }
-.shield_special_winter2026Healer {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_special_winter2026Healer.png');
-  width: 114px;
-  height: 90px;
-}
-.shield_special_winter2026Rogue {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_special_winter2026Rogue.png');
-  width: 117px;
-  height: 120px;
-}
-.shield_special_winter2026Warrior {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_special_winter2026Warrior.png');
-  width: 114px;
-  height: 90px;
-}
 .shield_special_yeti {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_special_yeti.png');
   width: 90px;
@@ -39695,26 +39355,6 @@
   width: 114px;
   height: 90px;
 }
-.slim_armor_special_winter2026Healer {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_winter2026Healer.png');
-  width: 114px;
-  height: 90px;
-}
-.slim_armor_special_winter2026Mage {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_winter2026Mage.png');
-  width: 114px;
-  height: 90px;
-}
-.slim_armor_special_winter2026Rogue {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_winter2026Rogue.png');
-  width: 117px;
-  height: 120px;
-}
-.slim_armor_special_winter2026Warrior {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_winter2026Warrior.png');
-  width: 114px;
-  height: 90px;
-}
 .slim_armor_special_yeti {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_yeti.png');
   width: 90px;
@@ -39955,26 +39595,6 @@
   width: 114px;
   height: 90px;
 }
-.weapon_special_winter2026Healer {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_special_winter2026Healer.png');
-  width: 114px;
-  height: 90px;
-}
-.weapon_special_winter2026Mage {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_special_winter2026Mage.png');
-  width: 114px;
-  height: 90px;
-}
-.weapon_special_winter2026Rogue {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_special_winter2026Rogue.png');
-  width: 117px;
-  height: 120px;
-}
-.weapon_special_winter2026Warrior {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_special_winter2026Warrior.png');
-  width: 114px;
-  height: 90px;
-}
 .weapon_special_yeti {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_special_yeti.png');
   width: 90px;
@@ -53228,11 +52848,6 @@
   width: 81px;
   height: 99px;
 }
-.Pet-BearCub-Alien {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-BearCub-Alien.png');
-  width: 81px;
-  height: 99px;
-}
 .Pet-BearCub-Amber {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-BearCub-Amber.png');
   width: 81px;
@@ -53723,11 +53338,6 @@
   width: 81px;
   height: 99px;
 }
-.Pet-Cactus-Alien {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cactus-Alien.png');
-  width: 81px;
-  height: 99px;
-}
 .Pet-Cactus-Amber {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cactus-Amber.png');
   width: 81px;
@@ -54518,11 +54128,6 @@
   width: 81px;
   height: 99px;
 }
-.Pet-Dragon-Alien {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Dragon-Alien.png');
-  width: 81px;
-  height: 99px;
-}
 .Pet-Dragon-Amber {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Dragon-Amber.png');
   width: 81px;
@@ -55018,11 +54623,6 @@
   width: 81px;
   height: 99px;
 }
-.Pet-FlyingPig-Alien {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-FlyingPig-Alien.png');
-  width: 81px;
-  height: 99px;
-}
 .Pet-FlyingPig-Amber {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-FlyingPig-Amber.png');
   width: 81px;
@@ -55358,11 +54958,6 @@
   width: 81px;
   height: 99px;
 }
-.Pet-Fox-Alien {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Fox-Alien.png');
-  width: 81px;
-  height: 99px;
-}
 .Pet-Fox-Amber {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Fox-Amber.png');
   width: 81px;
@@ -56143,11 +55738,6 @@
   width: 81px;
   height: 99px;
 }
-.Pet-LionCub-Alien {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-LionCub-Alien.png');
-  width: 81px;
-  height: 99px;
-}
 .Pet-LionCub-Amber {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-LionCub-Amber.png');
   width: 81px;
@@ -56753,11 +56343,6 @@
   width: 81px;
   height: 99px;
 }
-.Pet-PandaCub-Alien {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-PandaCub-Alien.png');
-  width: 81px;
-  height: 99px;
-}
 .Pet-PandaCub-Amber {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-PandaCub-Amber.png');
   width: 81px;
@@ -58153,11 +57738,6 @@
   width: 81px;
   height: 99px;
 }
-.Pet-TigerCub-Alien {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-TigerCub-Alien.png');
-  width: 81px;
-  height: 99px;
-}
 .Pet-TigerCub-Amber {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-TigerCub-Amber.png');
   width: 81px;
@@ -58803,11 +58383,6 @@
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Alien {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Wolf-Alien.png');
-  width: 81px;
-  height: 99px;
-}
 .Pet-Wolf-Amber {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Wolf-Amber.png');
   width: 81px;

website/client/src/assets/scss/markdown.scss

@@ -58,11 +58,6 @@ h3.markdown {
   img {
     max-width: 100%;
   }
-
-  .emoji-native {
-    font-size: 0.85em;
-    vertical-align: middle;
-  }
   
   blockquote {
     padding: 0 16px;

website/client/src/assets/svg/purple-waves.svg

@@ -1,5 +0,0 @@
-<svg width="330" height="80" viewBox="0 0 330 80" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M159.797 60.5502C165.534 61.8466 171.631 62.7536 178.221 63.1767C208.94 65.1492 233.733 56.6838 260.68 47.483C282.33 40.091 305.37 32.2243 333.99 28.9144L336 16.3018C260.81 7.08865 233.373 23.1672 205.362 39.5825C192.037 47.3908 178.583 55.2753 159.797 60.5502Z" fill="#BDA8FF"/>
-<path d="M0 80L331.948 79.9998V29.1594C268.976 36.9871 233.03 66.6959 178.221 63.1767C112.951 58.9858 95.9516 7.31934 0.000104656 0L0 80Z" fill="#925CF3"/>
-<path d="M203.54 40.6496C166.339 36.8525 141.531 39.6251 122.334 45.4666C133.94 51.8989 145.792 57.3851 159.797 60.5502C177.727 55.5155 190.801 48.1036 203.54 40.6496Z" fill="#D5C8FF"/>
-</svg>

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

@@ -1,228 +1,53 @@
 <template>
   <b-modal
     id="rebirth"
-    size="sm"
-    :hide-header="true"
+    :title="$t('modalAchievement')"
+    size="md"
+    :hide-footer="true"
   >
-    <div
-      class="close-x"
-      @click.stop="close()"
-    >
-      <div
-        class="svg-icon svg-close"
-        v-html="icons.close"
-      ></div>
-    </div>
-    <div class="content text-center">
-      <h2
-        v-once
-        class="header"
-      >
-        {{ $t('rebirthNewAchievement') }}
-      </h2>
-      <div class="d-flex align-items-center justify-content-center icon-area">
-        <div
-          v-once
-          class="svg-icon sparkles mirror"
-          v-html="icons.starGroup"
-        ></div>
-        <Sprite
-          class="achievement-icon"
-          image-name="achievement-sun2x"
-        />
-        <div
-          v-once
-          class="svg-icon sparkles"
-          v-html="icons.starGroup"
-        ></div>
+    <div class="modal-body">
+      <div class="col-12">
+        <!-- @TODO: +achievementAvatar('sun',0)--><achievement-avatar class="avatar" />
+      </div><div class="col-6 offset-3 text-center">
+        <div v-if="user.achievements.rebirthLevel < 100">
+          {{ $t('rebirthAchievement', {
+            number: user.achievements.rebirths,
+            level: user.achievements.rebirthLevel}) }}
+        </div><div v-if="user.achievements.rebirthLevel >= 100">
+          {{ $t('rebirthAchievement100', {number: user.achievements.rebirths}) }}
+        </div><br><button
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('huzzah') }}
+        </button>
       </div>
-      <p class="subtitle">
-        {{ $t('rebirthNewAdventure') }}
-      </p>
-      <p
-        class="description"
-        v-html="achievementText"
-      ></p>
-      <p
-        v-once
-        class="stack-info"
-      >
-        {{ $t('rebirthStackInfo') }}
-      </p>
-      <button
-        v-once
-        class="btn btn-primary"
-        @click="close()"
-      >
-        {{ $t('onwards') }}
-      </button>
-    </div>
-    <div
-      slot="modal-footer"
-      class="footer-wave"
-      v-html="icons.purpleWaves"
-    ></div>
+    </div><achievement-footer />
   </b-modal>
 </template>
 
-<style lang="scss">
-  @import '@/assets/scss/colors.scss';
-
-  #rebirth {
-    .modal-dialog {
-      width: 330px;
-    }
-
-    .modal-content {
-      border: none;
-      border-radius: 8px;
-      overflow: hidden;
-      box-shadow: 0 14px 28px 0 rgba($black, 0.24), 0 10px 10px 0 rgba($black, 0.28);
-    }
-
-    .modal-body {
-      padding: 0;
-    }
-
-    .modal-footer {
-      padding: 0;
-      border-top: none;
-      border-radius: 0;
-      margin: 0;
-      line-height: 0;
-    }
-  }
-</style>
-
-<style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
-
-  .content {
-    padding: 24px 24px 0;
-  }
-
-  .header {
-    font-size: 1.25rem;
-    line-height: 1.4;
-    color: $purple-200;
-    margin-top: 8px;
-    margin-bottom: 16px;
-  }
-
-  .icon-area {
-    margin-bottom: 16px;
-  }
-
-  .sparkles {
-    width: 40px;
-    height: 64px;
-
-    &.mirror {
-      transform: scaleX(-1);
-    }
-  }
-
-  .close-x {
-    position: absolute;
-    right: 16px;
-    top: 16px;
-    cursor: pointer;
-    z-index: 2;
-
-    &:hover .svg-close {
-      opacity: 0.75;
-    }
-
-    .svg-close {
-      width: 16px;
-      height: 16px;
-      opacity: 0.5;
-      transition: opacity 0.2s ease;
-      pointer-events: none;
-    }
-  }
-
-  .achievement-icon {
-    margin: 0 24px;
-  }
-
-  .subtitle {
-    font-family: 'Roboto', sans-serif;
-    font-weight: 700;
-    font-style: normal;
-    font-size: 14px;
-    line-height: 24px;
-    letter-spacing: 0;
-    margin-bottom: 12px;
-    color: $gray-10;
-  }
-
-  .description {
-    font-size: 0.875rem;
-    line-height: 1.71;
-    margin-bottom: 12px;
-    color: $gray-50;
-  }
-
-  .stack-info {
-    font-size: 0.875rem;
-    line-height: 1.71;
-    color: $gray-50;
-    margin-bottom: 24px;
-  }
-
-  .btn-primary {
-    margin-bottom: 8px;
-  }
-
-  .footer-wave {
-    width: 100%;
-
-    ::v-deep svg {
-      display: block;
-      width: calc(100% + 8px);
-      height: auto;
-      margin: 0 -4px -4px;
-    }
+<style scoped>
+  .avatar {
+    width: 140px;
+    margin: 0 auto;
+    margin-bottom: 1.5em;
+    margin-top: 1.5em;
   }
 </style>
 
 <script>
-import closeIcon from '@/assets/svg/close.svg?raw';
-import Sprite from '@/components/ui/sprite';
-import starGroup from '@/assets/svg/star-group.svg?raw';
-import purpleWaves from '@/assets/svg/purple-waves.svg?raw';
+import achievementFooter from './achievementFooter';
+import achievementAvatar from './achievementAvatar';
+
 import { mapState } from '@/libs/store';
 
 export default {
   components: {
-    Sprite,
-  },
-  data () {
-    return {
-      icons: Object.freeze({
-        starGroup,
-        purpleWaves,
-        close: closeIcon,
-      }),
-    };
+    achievementFooter,
+    achievementAvatar,
   },
   computed: {
     ...mapState({ user: 'user.data' }),
-    achievementText () {
-      const rebirths = this.user.achievements.rebirths || 0;
-      const level = this.user.achievements.rebirthLevel || 0;
-
-      if (level >= 100) {
-        return this.$t('rebirthAchievement100', { number: rebirths, level });
-      }
-
-      if (rebirths === 1) {
-        return this.$t('rebirthAchievement', { number: rebirths, level });
-      }
-
-      return this.$t('rebirthAchievementPlural', { number: rebirths, level });
-    },
   },
   methods: {
     close () {

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

@@ -1,186 +1,41 @@
 <template>
   <b-modal
     id="rebirth-enabled"
-    size="sm"
-    :hide-header="true"
+    :title="$t('rebirthNew')"
+    size="md"
+    :hide-footer="true"
   >
-    <div
-      class="close-x"
-      @click.stop="close()"
-    >
-      <div
-        class="svg-icon svg-close"
-        v-html="icons.close"
-      ></div>
-    </div>
-    <div class="content text-center">
-      <h2
-        v-once
-        class="header"
-      >
-        {{ $t('rebirthUnlockedNewItem') }}
-      </h2>
-      <div class="d-flex align-items-center justify-content-center icon-area">
-        <div
-          v-once
-          class="svg-icon sparkles mirror"
-          v-html="icons.starGroup"
-        ></div>
-        <img
-          class="orb-icon"
-          src="@/assets/images/rebirth-orb.png"
-          alt="Orb of Rebirth"
-        >
-        <div
-          v-once
-          class="svg-icon sparkles"
-          v-html="icons.starGroup"
-        ></div>
+    <div class="modal-body">
+      <div class="col-12">
+        <div class="rebirth_orb"></div>
+        <p>
+          <span>{{ $t('rebirthUnlock') }}</span>
+        </p>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <div class="col-12 text-center">
+        <button
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('close') }}
+        </button>
       </div>
-      <p
-        v-once
-        class="subtitle"
-      >
-        {{ $t('rebirthUnlockedOrb') }}
-      </p>
-      <p
-        v-once
-        class="description"
-      >
-        {{ $t('rebirthUnlockedDesc') }}
-      </p>
-      <button
-        v-once
-        class="btn btn-primary"
-        @click="close()"
-      >
-        {{ $t('onwards') }}
-      </button>
     </div>
-    <div
-      slot="modal-footer"
-      class="clearfix"
-    ></div>
   </b-modal>
 </template>
 
-<style lang="scss">
-  @import '@/assets/scss/colors.scss';
-
-  #rebirth-enabled {
-    .modal-dialog {
-      width: 330px;
-    }
-
-    .modal-content {
-      border-radius: 8px;
-      overflow: hidden;
-      box-shadow: 0 14px 28px 0 rgba($black, 0.24), 0 10px 10px 0 rgba($black, 0.28);
-    }
-
-    .modal-body {
-      padding: 0;
-    }
-
-    .modal-footer {
-      padding: 0;
-      border-top: none;
-    }
-  }
-</style>
-
-<style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
-
-  .content {
-    padding: 24px 24px 0;
-  }
-
-  .header {
-    font-size: 1.25rem;
-    line-height: 1.4;
-    color: $purple-200;
-    margin-top: 8px;
-    margin-bottom: 12px;
-  }
-
-  .icon-area {
-    margin-bottom: 12px;
-  }
-
-  .sparkles {
-    width: 40px;
-    height: 64px;
-
-    &.mirror {
-      transform: scaleX(-1);
-    }
-  }
-
-  .close-x {
-    position: absolute;
-    right: 16px;
-    top: 16px;
-    cursor: pointer;
-    z-index: 2;
-
-    &:hover .svg-close {
-      opacity: 0.75;
-    }
-
-    .svg-close {
-      width: 16px;
-      height: 16px;
-      opacity: 0.5;
-      transition: opacity 0.2s ease;
-      pointer-events: none;
-    }
-  }
-
-  .orb-icon {
-    width: 62px;
-    height: 62px;
-    margin: 0 24px;
-    image-rendering: pixelated;
-  }
-
-  .subtitle {
-    font-family: 'Roboto', sans-serif;
-    font-weight: 700;
-    font-style: normal;
-    font-size: 14px;
-    line-height: 24px;
-    letter-spacing: 0;
-    margin-bottom: 12px;
-    color: $gray-50;
-  }
-
-  .description {
-    font-size: 0.875rem;
-    line-height: 1.71;
-    margin-bottom: 24px;
-    color: $gray-100;
-  }
-
-  .btn-primary {
-    margin-bottom: 24px;
+<style scoped>
+  .rebirth_orb {
+    margin: 0 auto;
   }
 </style>
 
 <script>
-import closeIcon from '@/assets/svg/close.svg?raw';
-import starGroup from '@/assets/svg/star-group.svg?raw';
 import { mapState } from '@/libs/store';
 
 export default {
-  data () {
-    return {
-      icons: Object.freeze({
-        starGroup,
-        close: closeIcon,
-      }),
-    };
-  },
   computed: {
     ...mapState({ user: 'user.data' }),
   },

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

@@ -311,7 +311,7 @@
         <input
           id="passwordInput"
           v-model="password"
-          class="form-control dark input-with-error"
+          class="form-control input-with-error"
           type="password"
           :placeholder="$t('password')"
           :class="{'input-invalid': passwordInvalid, 'input-valid': passwordValid}"
@@ -323,7 +323,7 @@
           {{ $t('minPasswordLength') }}
         </div>
       </div>
-      <div class="form-group mb-4">
+      <div class="form-group">
         <label
           v-once
           for="confirmPasswordInput"
@@ -331,7 +331,7 @@
         <input
           id="confirmPasswordInput"
           v-model="passwordConfirm"
-          class="form-control dark input-with-error"
+          class="form-control input-with-error"
           type="password"
           :placeholder="$t('confirmPasswordPlaceholder')"
           :class="{'input-invalid': passwordConfirmInvalid, 'input-valid': passwordConfirmValid}"
@@ -344,14 +344,13 @@
         </div>
       </div>
       <div class="text-center">
-        <button
-          class="btn btn-info w-100"
-          :disabled="!password || !passwordConfirm
-            || password !== passwordConfirm || resetPasswordSetNewOneData.hasError"
+        <div
+          class="btn btn-info"
+          :enabled="!resetPasswordSetNewOneData.hasError"
           @click="resetPasswordSetNewOneLink()"
         >
           {{ $t('setNewPass') }}
-        </button>
+        </div>
       </div>
     </form>
   </div>
@@ -673,7 +672,7 @@ export default {
 
       this.login();
     },
-    forgotPasswordLink: debounce(async function forgotPassLink () {
+    async forgotPasswordLink () {
       if (!this.username) {
         window.alert(this.$t('missingEmail')); // eslint-disable-line no-alert
         return;
@@ -684,7 +683,7 @@ export default {
       });
 
       window.alert(this.$t('newPassSent')); // eslint-disable-line no-alert
-    }, 500),
+    },
     async resetPasswordSetNewOneLink () {
       if (!this.password) {
         window.alert(this.$t('missingNewPassword')); // eslint-disable-line no-alert

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

@@ -43,14 +43,6 @@
           <p class="purple-600">
             {{ $t('usernameLimitations') }}
           </p>
-          <input
-            v-if="needsEmailField"
-            id="emailInput"
-            v-model="email"
-            class="form-control dark"
-            type="text"
-            :placeholder="$t('email')"
-          >
           <div class="custom-control custom-checkbox mb-4">
             <input
               id="privacyTOS"
@@ -173,7 +165,6 @@ export default {
       registrationMethod: null,
       username: '',
       usernameIssues: [],
-      needsEmailField: false,
     };
   },
   computed: {
@@ -192,30 +183,22 @@ export default {
     },
   },
   mounted () {
+    if (window.sessionStorage.getItem('apple-token')) {
+      this.registrationMethod = 'apple';
+    } else if (!this.$store.state.registrationOptions.registrationMethod) {
+      this.$router.push('/');
+    } else {
+      this.registrationMethod = this.$store.state.registrationOptions.registrationMethod;
+    }
     this.authData = this.$store.state.registrationOptions.authData;
     this.email = this.$store.state.registrationOptions.email;
     this.username = this.$store.state.registrationOptions.username;
     this.password = this.$store.state.registrationOptions.password;
     this.passwordConfirm = this.$store.state.registrationOptions.passwordConfirm;
 
-    if (window.sessionStorage.getItem('apple-token')) {
-      this.registrationMethod = 'apple';
-      if (!this.email) {
-        this.email = window.sessionStorage.getItem('apple-email');
-      }
-    } else if (!this.$store.state.registrationOptions.registrationMethod) {
-      this.$router.push('/');
-    } else {
-      this.registrationMethod = this.$store.state.registrationOptions.registrationMethod;
-    }
-
-    if (!this.email && this.registrationMethod !== 'apple') {
+    if (!this.email) {
       return;
     }
-
-    if ((!this.email || this.email === '') && this.registrationMethod === 'apple') {
-      this.needsEmailField = true;
-    }
     const usernameToCheck = this.email.split('@')[0].replace(/[^a-zA-Z0-9\-_]/g, '');
     this.$store.dispatch('auth:verifyUsername', {
       username: usernameToCheck,
@@ -254,7 +237,6 @@ export default {
           idToken: window.sessionStorage.getItem('apple-token'),
           name: window.sessionStorage.getItem('apple-name'),
           username: this.username,
-          email: this.email,
           allowRegister: true,
         });
       } else {

website/client/src/components/avatar.vue

@@ -321,11 +321,10 @@ export default {
       return null;
     },
     petClass () {
-      const substitutionEvent = this.currentEventList?.find(event => event.spriteSubstitutions
-        && moment().isBetween(event.start, event.end));
-      if (substitutionEvent && substitutionEvent.spriteSubstitutions.pets) {
-        return this.foolPet(`Pet-${this.member.items.currentPet}`,
-          substitutionEvent.spriteSubstitutions.pets);
+      const foolEvent = this.currentEventList?.find(event => event.aprilFools && moment()
+        .isBetween(event.start, event.end));
+      if (foolEvent) {
+        return this.foolPet(this.member.items.currentPet, foolEvent.aprilFools);
       }
       if (this.member?.items.currentPet) return `Pet-${this.member.items.currentPet}`;
       return '';

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

@@ -7,6 +7,7 @@
       @update-challenge="updateChallenge"
     />
     <close-challenge-modal
+      :members="members"
       :challenge-id="challenge._id"
       :prize="challenge.prize"
       :flag-count="challenge.flagCount"
@@ -696,6 +697,7 @@ export default {
       this.members = [];
     },
     closeChallenge () {
+      this.initialMembersLoad();
       this.$root.$emit('bv::show::modal', 'close-challenge-modal');
     },
     edit () {

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

@@ -12,39 +12,23 @@
         <label>
           <strong v-once>{{ $t('name') }} *</strong>
         </label>
-        <input
-          ref="nameInput"
+        <b-form-input
           v-model="workingChallenge.name"
-          class="form-control"
           type="text"
           :placeholder="$t('challengeNamePlaceholder')"
-          @focus="setActiveField('name')"
-          @keydown="onFieldKeydown($event)"
-          @keydown.tab="autoCompleteMixinHandleTab($event)"
-          @keydown.up="autoCompleteMixinSelectPreviousAutocomplete($event)"
-          @keydown.down="autoCompleteMixinSelectNextAutocomplete($event)"
-          @keypress.enter="autoCompleteMixinSelectAutocomplete($event)"
-          @keydown.esc="autoCompleteMixinHandleEscape($event)"
-        >
+          @keydown="enableSubmit"
+        />
       </div>
       <div class="form-group">
         <label>
           <strong v-once>{{ $t('shortName') }} *</strong>
         </label>
-        <input
-          ref="shortNameInput"
+        <b-form-input
           v-model="workingChallenge.shortName"
-          class="form-control"
           type="text"
           :placeholder="$t('shortNamePlaceholder')"
-          @focus="setActiveField('shortName')"
-          @keydown="onFieldKeydown($event)"
-          @keydown.tab="autoCompleteMixinHandleTab($event)"
-          @keydown.up="autoCompleteMixinSelectPreviousAutocomplete($event)"
-          @keydown.down="autoCompleteMixinSelectNextAutocomplete($event)"
-          @keypress.enter="autoCompleteMixinSelectAutocomplete($event)"
-          @keydown.esc="autoCompleteMixinHandleEscape($event)"
-        >
+          @keydown="enableSubmit"
+        />
       </div>
       <div class="form-group">
         <label>
@@ -56,17 +40,10 @@
           {{ $t('charactersRemaining', {characters: charactersRemaining}) }}
         </div>
         <textarea
-          ref="summaryTextarea"
           v-model="workingChallenge.summary"
           class="summary-textarea form-control"
           :placeholder="$t('challengeSummaryPlaceholder')"
-          @focus="setActiveField('summary')"
-          @keydown="onFieldKeydown($event)"
-          @keydown.tab="autoCompleteMixinHandleTab($event)"
-          @keydown.up="autoCompleteMixinSelectPreviousAutocomplete($event)"
-          @keydown.down="autoCompleteMixinSelectNextAutocomplete($event)"
-          @keypress.enter="autoCompleteMixinSelectAutocomplete($event)"
-          @keydown.esc="autoCompleteMixinHandleEscape($event)"
+          @keydown="enableSubmit"
         ></textarea>
       </div>
       <div class="form-group">
@@ -78,26 +55,11 @@
           class="float-right"
         ></a>
         <textarea
-          ref="descriptionTextarea"
           v-model="workingChallenge.description"
           class="description-textarea form-control"
           :placeholder="$t('challengeDescriptionPlaceholder')"
-          @focus="setActiveField('description')"
-          @keydown="onFieldKeydown($event)"
-          @keydown.tab="autoCompleteMixinHandleTab($event)"
-          @keydown.up="autoCompleteMixinSelectPreviousAutocomplete($event)"
-          @keydown.down="autoCompleteMixinSelectNextAutocomplete($event)"
-          @keypress.enter="autoCompleteMixinSelectAutocomplete($event)"
-          @keydown.esc="autoCompleteMixinHandleEscape($event)"
+          @keydown="enableSubmit"
         ></textarea>
-        <emoji-auto-complete
-          ref="emojiAutocomplete"
-          :text="activeFieldText"
-          :textbox="textbox"
-          :coords="mixinData.autoComplete.coords"
-          :caret-position="mixinData.autoComplete.caretPosition"
-          @select="selectedAutocomplete"
-        />
       </div>
       <div
         v-if="creating"
@@ -318,17 +280,12 @@ import { TAVERN_ID, MIN_SHORTNAME_SIZE_FOR_CHALLENGES, MAX_SUMMARY_SIZE_FOR_CHAL
 import CategoryOptions from '@/../../common/script/content/categoryOptions';
 import markdownDirective from '@/directives/markdown';
 import { userStateMixin } from '../../mixins/userState';
-import emojiAutoComplete from '@/components/chat/emojiAutoComplete';
-import { autoCompleteHelperMixin } from '@/mixins/autoCompleteHelper';
 
 export default {
-  components: {
-    emojiAutoComplete,
-  },
   directives: {
     markdown: markdownDirective,
   },
-  mixins: [userStateMixin, autoCompleteHelperMixin],
+  mixins: [userStateMixin],
   props: ['groupId'],
   data () {
     const categoryOptions = CategoryOptions;
@@ -362,14 +319,9 @@ export default {
       categoriesHashByKey,
       loading: false,
       groups: [],
-      textbox: null,
-      activeField: 'name',
     };
   },
   computed: {
-    activeFieldText () {
-      return this.workingChallenge[this.activeField] || '';
-    },
     creating () {
       return !this.workingChallenge.id;
     },
@@ -637,29 +589,6 @@ export default {
     toggleCategorySelect () {
       this.showCategorySelect = !this.showCategorySelect;
     },
-    setActiveField (field) {
-      this.activeField = field;
-      const refMap = {
-        name: 'nameInput',
-        shortName: 'shortNameInput',
-        summary: 'summaryTextarea',
-        description: 'descriptionTextarea',
-      };
-      this.textbox = this.$refs[refMap[field]] || null;
-    },
-    onFieldKeydown (e) {
-      this.enableSubmit();
-      this.autoCompleteMixinUpdateCarretPosition(e);
-    },
-    selectedAutocomplete (newText, newCaret) {
-      this.workingChallenge[this.activeField] = newText;
-      this.$nextTick(() => {
-        if (this.textbox) {
-          this.textbox.setSelectionRange(newCaret, newCaret);
-          this.textbox.focus();
-        }
-      });
-    },
     enableSubmit: throttle(function enableSubmit () {
       /* Enables the submit button if it was disabled */
       if (this.loading) {

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

@@ -350,7 +350,6 @@
 </style>
 
 <script>
-import debounce from 'lodash/debounce';
 import searchIcon from '@/assets/svg/for-css/search.svg?raw';
 import deleteIcon from '@/assets/svg/delete.svg?raw';
 import gemIcon from '@/assets/svg/gem.svg?raw';
@@ -363,14 +362,13 @@ export default {
   components: {
     closeX,
   },
-  props: ['challengeId', 'prize', 'flagCount'],
+  props: ['challengeId', 'members', 'prize', 'flagCount'],
   data () {
     return {
       winner: {},
       searchTerm: '',
       showResults: false,
       filteredMembers: [],
-      isSearching: false,
       icons: Object.freeze({
         search: searchIcon,
         deleteIcon,
@@ -390,42 +388,20 @@ export default {
       return this.flagCount > 0;
     },
   },
-  created () {
-    this.searchMembersDebounced = debounce(this.performSearch, 500);
-  },
   methods: {
     searchMembers () {
       if (!this.searchTerm) {
         this.filteredMembers = [];
-        this.isSearching = false;
         return;
       }
 
-      this.isSearching = true;
-      this.searchMembersDebounced();
-    },
-    async performSearch () {
-      if (!this.searchTerm) {
-        this.filteredMembers = [];
-        this.isSearching = false;
-        return;
-      }
-
-      const searchTerm = this.searchTerm.replace('@', '');
-
-      try {
-        const members = await this.$store.dispatch('members:getChallengeMembers', {
-          challengeId: this.challengeId,
-          searchTerm,
-          includeAllPublicFields: true,
-        });
-
-        this.filteredMembers = members.slice(0, 10);
-      } catch (err) {
-        this.filteredMembers = [];
-      } finally {
-        this.isSearching = false;
-      }
+      const searchLower = this.searchTerm.toLowerCase().replace('@', '');
+      this.filteredMembers = this.members.filter(member => {
+        const username = member.auth?.local?.username || '';
+        const displayName = member.profile?.name || '';
+        return username.toLowerCase().includes(searchLower)
+               || displayName.toLowerCase().includes(searchLower);
+      }).slice(0, 10);
     },
     getMemberDisplayName (member) {
       if (member.auth?.local?.username) {

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

@@ -1,282 +0,0 @@
-<template>
-  <div
-    v-if="searchResults.length > 0"
-    class="autocomplete-selection"
-    :style="autocompleteStyle"
-  >
-    <div
-      v-for="result in searchResults"
-      :key="result.shortcode"
-      class="autocomplete-results d-flex align-items-center"
-      :class="{'hover-background': result.hover}"
-      @click="select(result)"
-      @mouseenter="setHover(result)"
-      @mouseleave="resetSelection()"
-    >
-      <img
-        v-if="result.imageUrl"
-        class="emoji-img"
-        :src="result.imageUrl"
-        :alt="result.shortcode"
-      >
-      <span
-        v-else
-        class="emoji-char"
-      >{{ result.emoji }}</span>
-      <span
-        class="shortcode ml-2"
-        :class="{'hover-foreground': result.hover}"
-      >:{{ result.shortcode }}:</span>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
-
-  .autocomplete-results {
-    padding: .5em;
-  }
-
-  .autocomplete-selection {
-    box-shadow: 1px 1px 1px #efefef;
-  }
-
-  .hover-background {
-    background-color: rgba(213, 200, 255, 0.32);
-    cursor: pointer;
-  }
-
-  .hover-foreground {
-    color: $purple-300 !important;
-  }
-
-  .emoji-char {
-    font-size: 20px;
-    line-height: 1;
-  }
-
-  .emoji-img {
-    height: 20px;
-    width: 20px;
-  }
-
-  .shortcode {
-    color: $gray-200;
-    font-size: 14px;
-  }
-</style>
-
-<script>
-import habiticaMarkdown from 'habitica-markdown';
-
-export default {
-  props: ['text', 'caretPosition', 'coords', 'textbox'],
-  data () {
-    return {
-      colonRegex: /:([a-zA-Z0-9_+]*)$/,
-      currentSearch: '',
-      searchActive: false,
-      searchResults: [],
-      selected: null,
-      emojiList: [],
-      renderTick: 0,
-      internalCoords: { TOP: 0, LEFT: 0 },
-    };
-  },
-  computed: {
-    autocompleteStyle () {
-      // eslint-disable-next-line no-unused-vars
-      const _tick = this.renderTick;
-      const isTextarea = this.textbox.tagName === 'TEXTAREA';
-      const dropdownPA = (this.$el && this.$el.nodeType === 1) ? this.$el.offsetParent : null;
-      const textboxOP = this.textbox.offsetParent;
-      const needsRectCalc = dropdownPA && textboxOP && dropdownPA !== textboxOP;
-
-      let top;
-      let left;
-      const caretLeft = this.internalCoords.LEFT - (this.textbox.scrollLeft || 0);
-
-      if (needsRectCalc) {
-        const textboxRect = this.textbox.getBoundingClientRect();
-        const parentRect = dropdownPA.getBoundingClientRect();
-        const parentScrollTop = dropdownPA.scrollTop || 0;
-
-        if (isTextarea) {
-          const computedStyle = window.getComputedStyle(this.textbox);
-          const lineHeight = parseFloat(computedStyle.lineHeight)
-            || (parseFloat(computedStyle.fontSize) * 1.4);
-          const caretTopInTextbox = this.internalCoords.TOP
-            - (this.textbox.scrollTop || 0) + lineHeight;
-          const clamped = Math.min(Math.max(caretTopInTextbox, 0), this.textbox.offsetHeight);
-          top = (textboxRect.top - parentRect.top) + parentScrollTop + clamped + 2;
-        } else {
-          top = (textboxRect.bottom - parentRect.top) + parentScrollTop + 2;
-        }
-        left = (textboxRect.left - parentRect.left) + caretLeft;
-      } else {
-        if (isTextarea) {
-          const computedStyle = window.getComputedStyle(this.textbox);
-          const lineHeight = parseFloat(computedStyle.lineHeight)
-            || (parseFloat(computedStyle.fontSize) * 1.4);
-          const caretTopInTextbox = this.internalCoords.TOP
-            - (this.textbox.scrollTop || 0) + lineHeight;
-          const clamped = Math.min(Math.max(caretTopInTextbox, 0), this.textbox.offsetHeight);
-          top = this.textbox.offsetTop + clamped + 2;
-        } else {
-          top = this.textbox.offsetTop + this.textbox.offsetHeight + 2;
-        }
-        left = this.textbox.offsetLeft + caretLeft;
-      }
-
-      return {
-        top: `${top}px`,
-        left: `${left}px`,
-        position: 'absolute',
-        minWidth: '150px',
-        zIndex: 100,
-        backgroundColor: 'white',
-      };
-    },
-  },
-  watch: {
-    searchResults (results, oldResults) {
-      if (results.length > 0 && (!oldResults || oldResults.length === 0)) {
-        this.$nextTick(() => {
-          this.renderTick += 1;
-        });
-      }
-    },
-    text (newText, prevText) {
-      if (!this.textbox) return;
-      this._measureCaretCoords();
-      const delCharsBool = prevText.length > newText.length;
-      const caretPosition = this.textbox.selectionEnd;
-      const lastFocusChar = delCharsBool ? prevText[caretPosition] : newText[caretPosition - 1];
-      if (
-        newText.length === 0
-        || (lastFocusChar === ':' && delCharsBool)
-      ) {
-        this.cancel();
-      } else {
-        if (lastFocusChar === ':') this.searchActive = true;
-        if (this.searchActive) {
-          this.searchResults = this.solveSearchResults(newText.substring(0, caretPosition));
-        }
-      }
-    },
-  },
-  created () {
-    const defs = habiticaMarkdown.emojiDefs;
-    if (!defs) return;
-    const customEmojis = habiticaMarkdown.customEmojis || {};
-    const list = [];
-    const keys = Object.keys(defs);
-    keys.sort();
-    for (const key of keys) {
-      const entry = { shortcode: key, emoji: defs[key], hover: false };
-      if (customEmojis[key]) {
-        entry.imageUrl = customEmojis[key];
-      }
-      list.push(entry);
-    }
-    this.emojiList = list;
-  },
-  methods: {
-    solveSearchResults (textFocus) {
-      const regexRes = this.colonRegex.exec(textFocus);
-      if (!regexRes) {
-        this.cancel();
-        return [];
-      }
-      this.currentSearch = regexRes[1];
-
-      if (this.currentSearch.length === 0) return [];
-
-      const lowerSearch = this.currentSearch.toLowerCase();
-      return this.emojiList
-        .filter(entry => entry.shortcode.startsWith(lowerSearch))
-        .slice(0, 6)
-        .map(entry => ({ ...entry, hover: false }));
-    },
-    select (result) {
-      const { text } = this;
-      const targetName = `${result.shortcode}: `;
-      const oldCaret = this.caretPosition;
-      const escapedSearch = this.currentSearch.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-      let newText = text.substring(0, this.caretPosition)
-        .replace(new RegExp(`${escapedSearch}$`), targetName);
-      const newCaret = newText.length;
-      newText += text.substring(oldCaret, text.length);
-      this.$emit('select', newText, newCaret);
-
-      this.cancel();
-    },
-    setHover (result) {
-      this.resetSelection();
-      result.hover = true;
-    },
-    clearHover () {
-      for (const selection of this.searchResults) {
-        selection.hover = false;
-      }
-    },
-    resetSelection () {
-      this.clearHover();
-      this.selected = null;
-    },
-    selectNext () {
-      if (this.searchResults.length > 0) {
-        this.clearHover();
-        this.selected = this.selected === null
-          ? 0
-          : (this.selected + 1) % this.searchResults.length;
-        this.searchResults[this.selected].hover = true;
-      }
-    },
-    selectPrevious () {
-      if (this.searchResults.length > 0) {
-        this.clearHover();
-        this.selected = this.selected === null
-          ? this.searchResults.length - 1
-          : (this.selected - 1 + this.searchResults.length) % this.searchResults.length;
-        this.searchResults[this.selected].hover = true;
-      }
-    },
-    makeSelection () {
-      if (this.searchResults.length > 0 && this.selected !== null) {
-        const result = this.searchResults[this.selected];
-        this.select(result);
-      }
-    },
-    _measureCaretCoords () {
-      const el = this.textbox;
-      const caretPosition = el.selectionEnd;
-      const div = document.createElement('div');
-      const span = document.createElement('span');
-      const copyStyle = getComputedStyle(el);
-
-      [].forEach.call(copyStyle, prop => {
-        div.style[prop] = copyStyle[prop];
-      });
-
-      div.style.position = 'absolute';
-      div.style.visibility = 'hidden';
-      document.body.appendChild(div);
-      div.textContent = el.value.substr(0, caretPosition);
-      span.textContent = el.value.substr(caretPosition) || '.';
-      div.appendChild(span);
-      this.internalCoords = {
-        TOP: span.offsetTop,
-        LEFT: span.offsetLeft,
-      };
-      document.body.removeChild(div);
-    },
-    cancel () {
-      this.searchActive = false;
-      this.searchResults = [];
-      this.resetSelection();
-    },
-  },
-};
-</script>

website/client/src/components/creatorIntro.vue

@@ -187,8 +187,7 @@
           </div>
         </div>
         <div
-          v-if="user.purchased.background.birthday_bash
-            || user.purchased.background.on_a_strange_planet"
+          v-if="user.purchased.background.birthday_bash"
         >
           <div
             class="row justify-content-center title-row mb-3"

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

@@ -52,21 +52,17 @@
       <div
         v-if="!group.purchased.plan.dateTerminated
           && group.purchased.plan.paymentMethod === 'Stripe'"
-        class="btn btn-primary mb-3"
+        class="btn btn-primary"
         @click="redirectToStripeEdit({groupId: group.id})"
       >
         {{ $t('subUpdateCard') }}
       </div>
-      <div v-if="!group.purchased.plan.dateTerminated">
-        <div class="small gray-50 mb-3" v-once>
-          {{ $t('groupPlanBillingFYIShort') }}
-        </div>
-        <div
-          class="btn btn-sm btn-danger"
-          @click="cancelSubscriptionConfirm({group: group})"
-        >
-          {{ $t('cancelGroupSub') }}
-        </div>
+      <div
+        v-if="!group.purchased.plan.dateTerminated"
+        class="btn btn-sm btn-danger"
+        @click="cancelSubscriptionConfirm({group: group})"
+      >
+        {{ $t('cancelGroupSub') }}
       </div>
     </div>
   </div>

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

@@ -82,7 +82,9 @@
         <select-translated-array
           :items="[
             'groupParentChildren',
+            'groupCouple',
             'groupFriends',
+            'groupCoworkers',
             'groupManager',
             'groupTeacher'
           ]"

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

@@ -1,577 +0,0 @@
-<template>
-  <b-modal
-    id="group-plan-selection"
-    :hide-footer="true"
-    :hide-header="true"
-    size="md"
-    @show="loadData"
-    @hide="onHide"
-  >
-    <div class="selection-modal">
-      <div class="modal-header-row">
-        <h2 class="title">
-          {{ $t('chooseAnOption') }}
-        </h2>
-        <div class="header-actions">
-          <span
-            class="cancel-text"
-            @click="close"
-          >
-            {{ $t('cancel') }}
-          </span>
-          <button
-            class="btn btn-primary next-button"
-            :class="{ disabled: !selectedOption }"
-            :disabled="!selectedOption"
-            @click="continueFlow"
-          >
-            {{ $t('next') }}
-          </button>
-        </div>
-      </div>
-
-      <div
-        v-if="loading"
-        class="loading-container"
-      >
-        <div class="spinner-border text-secondary"></div>
-      </div>
-
-      <template v-else>
-        <div
-          v-if="hasUpgradeableGroups"
-          class="section-header"
-        >
-          {{ $t('upgradeExistingGroup') }}
-        </div>
-
-        <selectable-card
-          v-for="group in upgradeableGuilds"
-          :key="group._id"
-          class="option-card"
-          :selected="isSelected(group)"
-          @click="selectOption(group)"
-        >
-          <div class="option-content">
-            <div class="option-info">
-              <div class="option-name">
-                {{ group.name }}
-              </div>
-              <div class="option-members">
-                {{ formatMemberCount(group.memberCount) }}
-              </div>
-              <div class="option-label previously-upgraded">
-                <div
-                  class="svg-icon sparkle-icon"
-                  v-html="icons.sparkles"
-                ></div>
-                {{ $t('previouslyUpgradedGroup') }}
-              </div>
-            </div>
-            <div class="option-price">
-              ${{ calculatePrice(group.memberCount) }}.00/mo
-            </div>
-          </div>
-        </selectable-card>
-
-        <selectable-card
-          v-if="upgradeableParty"
-          class="option-card"
-          :class="{ 'has-pending-warning': partyPendingInviteCount > 0 }"
-          :selected="isSelected(upgradeableParty)"
-          @click="selectOption(upgradeableParty)"
-        >
-          <div class="option-content">
-            <div class="option-info">
-              <div class="option-name">
-                {{ upgradeableParty.name }}
-              </div>
-              <div class="option-members">
-                {{ formatMemberCount(upgradeableParty.memberCount) }}
-                <span
-                  v-if="partyPendingInviteCount > 0"
-                  class="pending-count"
-                >
-                  {{ $t('pendingCount', { count: partyPendingInviteCount }) }}
-                </span>
-              </div>
-              <div
-                v-if="isPartyPreviouslyUpgraded"
-                class="option-label previously-upgraded"
-              >
-                <div
-                  class="svg-icon sparkle-icon"
-                  v-html="icons.sparkles"
-                ></div>
-                {{ $t('previouslyUpgradedGroup') }}
-              </div>
-              <div
-                v-else
-                class="option-label your-party"
-              >
-                <div
-                  class="svg-icon member-icon"
-                  v-html="icons.member"
-                ></div>
-                {{ $t('yourParty') }}
-              </div>
-            </div>
-            <div class="option-price">
-              ${{ calculatePrice(upgradeableParty.memberCount) }}.00/mo
-            </div>
-          </div>
-          <div
-            v-if="partyPendingInviteCount > 0"
-            class="pending-warning-banner"
-          >
-            <div
-              class="svg-icon alert-icon"
-              v-html="icons.alert"
-            ></div>
-            <span class="warning-text">{{ $t('upgradeCancelsPendingInvites') }}</span>
-          </div>
-        </selectable-card>
-
-        <div
-          v-if="hasUpgradeableGroups"
-          class="or-divider"
-        >
-          <div class="divider-line"></div>
-          <span class="or-text">{{ $t('or') }}</span>
-          <div class="divider-line"></div>
-        </div>
-
-        <selectable-card
-          class="option-card create-new"
-          :selected="selectedOption === 'new'"
-          @click="selectOption('new')"
-        >
-          <div class="option-content">
-            <div class="option-info">
-              <div class="option-name">
-                {{ $t('createNewGroup') }}
-              </div>
-              <div class="option-description">
-                {{ $t('inviteOthersForAdditional') }}
-                <span class="price-highlight">${{ perMemberPrice }}.00</span>
-                {{ $t('perMember') }}.
-              </div>
-            </div>
-            <div class="option-price">
-              ${{ basePrice }}.00/mo
-            </div>
-          </div>
-        </selectable-card>
-
-        <div class="footer-note">
-          {{ $t('additionalMembersProrated') }}
-        </div>
-      </template>
-    </div>
-  </b-modal>
-</template>
-
-<style lang="scss" scoped>
-@import '@/assets/scss/colors.scss';
-
-.selection-modal {
-  padding: 24px;
-}
-
-.modal-header-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-}
-
-.title {
-  font-family: 'Roboto Condensed', sans-serif;
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 28px;
-  color: $purple-200;
-  margin: 0;
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-}
-
-.cancel-text {
-  color: $blue-10;
-  font-size: 0.875rem;
-  margin-right: 16px;
-  cursor: pointer;
-}
-
-.next-button {
-  min-width: 64px;
-
-  &.disabled {
-    background-color: $gray-300;
-    border-color: $gray-300;
-    cursor: not-allowed;
-  }
-}
-
-.loading-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 200px;
-}
-
-.section-header {
-  font-family: 'Roboto', sans-serif;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 24px;
-  color: $gray-10;
-  margin-bottom: 12px;
-}
-
-.option-card {
-  margin-bottom: 12px;
-
-  ::v-deep .option-name {
-    color: $gray-50;
-  }
-
-  &.selected ::v-deep .option-name {
-    color: $purple-200;
-  }
-}
-
-.pending-warning-banner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 32px;
-  background-color: $yellow-50;
-  border-radius: 0 0 6px 6px;
-  margin: 16px -16px 0 -16px;
-  gap: 4px;
-
-  .selected & {
-    margin: 15px -15px 0 -15px;
-  }
-
-  .alert-icon {
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-
-    ::v-deep path {
-      fill: $gray-10;
-    }
-  }
-
-  .warning-text {
-    font-family: 'Roboto', sans-serif;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 16px;
-    color: $gray-10;
-  }
-}
-
-.option-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding-left: 32px;
-  padding-right: 8px;
-}
-
-.option-info {
-  flex: 1;
-}
-
-.option-name {
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 24px;
-  margin-bottom: 4px;
-}
-
-.option-members {
-  font-family: 'Roboto', sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
-  color: $gray-100;
-  margin-bottom: 8px;
-
-  .pending-count {
-    font-weight: 700;
-    color: $yellow-5;
-  }
-}
-
-.option-label {
-  display: flex;
-  align-items: center;
-  font-family: 'Roboto', sans-serif;
-  font-size: 12px;
-  line-height: 16px;
-  gap: 4px;
-
-  &.previously-upgraded {
-    font-weight: 700;
-    color: $blue-10;
-  }
-
-  &.your-party {
-    font-weight: 700;
-    color: $gray-100;
-  }
-
-  .svg-icon {
-    width: 14px;
-    height: 14px;
-  }
-
-  .sparkle-icon {
-    color: $blue-10;
-  }
-
-  .member-icon {
-    color: $gray-100;
-
-    ::v-deep path {
-      fill: $gray-100;
-      stroke: $gray-100;
-      stroke-width: 0.5px;
-    }
-  }
-}
-
-.option-description {
-  font-family: 'Roboto', sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
-  color: $gray-100;
-
-  .price-highlight {
-    font-weight: 700;
-  }
-}
-
-.option-price {
-  font-family: 'Roboto', sans-serif;
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 24px;
-  color: $purple-200;
-  white-space: nowrap;
-}
-
-.or-divider {
-  display: flex;
-  align-items: center;
-  margin: 20px 0;
-
-  .divider-line {
-    flex: 1;
-    height: 1px;
-    background-color: $gray-500;
-  }
-
-  .or-text {
-    padding: 0 16px;
-    font-family: 'Roboto', sans-serif;
-    font-weight: 700;
-    font-size: 12px;
-    line-height: 16px;
-    letter-spacing: 0.2em;
-    text-transform: uppercase;
-    color: $gray-100;
-  }
-}
-
-.create-new {
-  .option-name {
-    margin-bottom: 8px;
-  }
-}
-
-.footer-note {
-  font-family: 'Roboto', sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
-  color: $gray-100;
-  text-align: center;
-  margin-top: 16px;
-  margin-left: 24px;
-  margin-right: 24px;
-}
-</style>
-
-<style lang="scss">
-#group-plan-selection {
-  .modal-dialog {
-    max-width: 504px;
-  }
-
-  .modal-content {
-    border-radius: 8px;
-    box-shadow: 0 14px 28px 0 rgba(26, 24, 29, 0.24), 0 10px 10px 0 rgba(26, 24, 29, 0.28);
-  }
-
-  .modal-body {
-    padding: 0;
-  }
-
-  .option-card.has-pending-warning.selectable-card {
-    padding-bottom: 0;
-  }
-}
-</style>
-
-<script>
-import axios from 'axios';
-import paymentsMixin from '@/mixins/payments';
-import { mapState } from '@/libs/store';
-import SelectableCard from '@/components/ui/selectableCard.vue';
-import svgSparkles from '@/assets/svg/sparkles.svg?raw';
-import svgMember from '@/assets/svg/member-icon.svg?raw';
-import svgAlert from '@/assets/svg/for-css/alert.svg?raw';
-
-export default {
-  components: {
-    SelectableCard,
-  },
-  mixins: [paymentsMixin],
-  data () {
-    return {
-      selectedOption: null,
-      userGuilds: [],
-      userParty: null,
-      activeGroupPlanIds: [],
-      loading: true,
-      basePrice: 9,
-      perMemberPrice: 3,
-      icons: Object.freeze({
-        sparkles: svgSparkles,
-        member: svgMember,
-        alert: svgAlert,
-      }),
-      partyPendingInviteCount: 0,
-    };
-  },
-  computed: {
-    ...mapState({ user: 'user.data' }),
-    upgradeableGuilds () {
-      return this.userGuilds.filter(group => {
-        const leaderId = group.leader?._id || group.leader;
-        if (leaderId !== this.user._id) return false;
-        const purchased = group.purchased;
-        if (!purchased?.wasUpgraded) return false;
-        if (this.activeGroupPlanIds.includes(group._id)) return false;
-        if (!purchased.dateTerminated) return false;
-        return new Date(purchased.dateTerminated) < new Date();
-      });
-    },
-    upgradeableParty () {
-      if (!this.userParty) return null;
-
-      const leaderId = this.userParty.leader?._id || this.userParty.leader;
-      if (leaderId !== this.user._id) return null;
-
-      if (this.activeGroupPlanIds.includes(this.userParty._id)) return null;
-
-      return this.userParty;
-    },
-    hasUpgradeableGroups () {
-      return this.upgradeableGuilds.length > 0 || this.upgradeableParty !== null;
-    },
-    isPartyPreviouslyUpgraded () {
-      if (!this.userParty) return false;
-      const purchased = this.userParty.purchased;
-      if (!purchased?.wasUpgraded) return false;
-      if (!purchased.dateTerminated) return false;
-      return new Date(purchased.dateTerminated) < new Date();
-    },
-  },
-  methods: {
-    async loadData () {
-      this.loading = true;
-      this.selectedOption = null;
-      this.partyPendingInviteCount = 0;
-
-      try {
-        const [guildsResponse, partyResponse] = await Promise.all([
-          axios.get('/api/v4/groups', { params: { type: 'guilds', includeExpiredPlans: 'true' } }),
-          axios.get('/api/v4/groups/party').catch(() => ({ data: { data: null } })),
-        ]);
-
-        this.userGuilds = guildsResponse.data.data || [];
-        this.userParty = partyResponse.data.data;
-
-        if (this.userParty) {
-          try {
-            const invitesResponse = await axios.get(`/api/v4/groups/${this.userParty._id}/invites`);
-            this.partyPendingInviteCount = invitesResponse.data.data?.length || 0;
-          } catch (e) {
-            this.partyPendingInviteCount = 0;
-          }
-        }
-
-        await this.$store.dispatch('guilds:getGroupPlans', true);
-        const groupPlans = this.$store.state.groupPlans?.data || [];
-        this.activeGroupPlanIds = groupPlans.map(g => g._id);
-      } catch (e) {
-        console.error('Error loading group data:', e);
-      }
-
-      this.loading = false;
-
-      this.$nextTick(() => {
-        if (this.upgradeableGuilds.length > 0) {
-          this.selectedOption = this.upgradeableGuilds[0];
-        } else if (this.upgradeableParty) {
-          this.selectedOption = this.upgradeableParty;
-        } else {
-          this.selectedOption = 'new';
-        }
-      });
-    },
-    selectOption (option) {
-      this.selectedOption = option;
-    },
-    isSelected (group) {
-      if (!this.selectedOption || this.selectedOption === 'new') return false;
-      return this.selectedOption._id === group._id;
-    },
-    calculatePrice (memberCount) {
-      return this.basePrice + (this.perMemberPrice * (memberCount - 1));
-    },
-    formatMemberCount (count) {
-      return count === 1 ? this.$t('oneMember') : this.$t('membersCount', { count });
-    },
-    continueFlow () {
-      if (!this.selectedOption) return;
-
-      const selection = this.selectedOption;
-      this.close();
-
-      if (selection === 'new') {
-        this.$root.$emit('bv::show::modal', 'create-group');
-      } else {
-        this.stripeGroup({ group: selection, upgrade: true });
-      }
-    },
-    close () {
-      this.$root.$emit('bv::hide::modal', 'group-plan-selection');
-    },
-    onHide () {
-      this.selectedOption = null;
-    },
-  },
-};
-</script>

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

@@ -41,14 +41,6 @@
           :chat="group.chat"
           @select="selectedAutocomplete"
         />
-        <emoji-auto-complete
-          ref="emojiAutocomplete"
-          :text="newMessage"
-          :textbox="textbox"
-          :coords="mixinData.autoComplete.coords"
-          :caret-position="mixinData.autoComplete.caretPosition"
-          @select="selectedAutocomplete"
-        />
       </div>
       <community-guidelines />
       <div class="row chat-actions">
@@ -98,7 +90,6 @@ import { MAX_MESSAGE_LENGTH } from '@/../../common/script/constants';
 import externalLinks from '../../mixins/externalLinks';
 
 import autocomplete from '../chat/autoComplete';
-import emojiAutoComplete from '../chat/emojiAutoComplete';
 import communityGuidelines from './communityGuidelines';
 import chatMessages from '../chat/chatMessages';
 import { mapState } from '@/libs/store';
@@ -111,7 +102,6 @@ export default {
   },
   components: {
     autocomplete,
-    emojiAutoComplete,
     communityGuidelines,
     chatMessages,
   },

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

@@ -25,61 +25,53 @@
         <div class="col-12 col-md-6">
           <div class="row icon-row">
             <div
-              class="item-with-icon p-2"
+              class="item-with-icon"
               tabindex="0"
               role="button"
               @keyup.enter="showMemberModal()"
               @click="showMemberModal()"
             >
-              <div class="box-content">
-                <div class="icon-number-row">
-                  <div
-                    v-if="group.memberCount > 1000"
-                    class="svg-icon shield"
-                    v-html="icons.goldGuildBadgeIcon"
-                  ></div>
-                  <div
-                    v-if="group.memberCount > 100 && group.memberCount < 999"
-                    class="svg-icon shield"
-                    v-html="icons.silverGuildBadgeIcon"
-                  ></div>
-                  <div
-                    v-if="group.memberCount < 100"
-                    class="svg-icon shield"
-                    v-html="icons.bronzeGuildBadgeIcon"
-                  ></div>
-                  <span class="number">{{ group.memberCount | abbrNum }}</span>
-                </div>
-                <div
-                  v-once
-                  class="details"
-                >
-                  {{ $t('memberList') }}
-                </div>
+              <div
+                v-if="group.memberCount > 1000"
+                class="svg-icon shield"
+                v-html="icons.goldGuildBadgeIcon"
+              ></div>
+              <div
+                v-if="group.memberCount > 100 && group.memberCount < 999"
+                class="svg-icon shield"
+                v-html="icons.silverGuildBadgeIcon"
+              ></div>
+              <div
+                v-if="group.memberCount < 100"
+                class="svg-icon shield"
+                v-html="icons.bronzeGuildBadgeIcon"
+              ></div>
+              <span class="number">{{ group.memberCount | abbrNum }}</span>
+              <div
+                v-once
+                class="member-list label"
+              >
+                {{ $t('memberList') }}
               </div>
             </div>
             <div v-if="!isParty">
               <div
-                class="item-with-icon p-2"
+                class="item-with-icon"
                 tabindex="0"
                 role="button"
                 @keyup.enter="showGroupGems()"
                 @click="showGroupGems()"
               >
-                <div class="box-content">
-                  <div class="icon-number-row">
-                    <div
-                      class="svg-icon gem"
-                      v-html="icons.gem"
-                    ></div>
-                    <span class="number">{{ group.balance * 4 }}</span>
-                  </div>
-                  <div
-                    v-once
-                    class="details"
-                  >
-                    {{ $t('guildBank') }}
-                  </div>
+                <div
+                  class="svg-icon gem"
+                  v-html="icons.gem"
+                ></div>
+                <span class="number">{{ group.balance * 4 }}</span>
+                <div
+                  v-once
+                  class="label"
+                >
+                  {{ $t('guildBank') }}
                 </div>
               </div>
             </div>
@@ -136,57 +128,35 @@
   }
 
   .item-with-icon {
-    display: inline-block;
     border-radius: 2px;
-    background-color: $white;
+    background-color: #ffffff;
     box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-    margin-left: 1em;
-    width: 120px;
-    height: 76px;
+    padding: 1em;
     text-align: center;
-    font-size: 20px;
-    vertical-align: bottom;
-    overflow: hidden;
-    position: relative;
+    min-width: 120px;
+    height: 76px;
+    margin-right: 1rem;
 
-    .box-content {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      width: 100%;
+    &:last-of-type {
+      margin-left: 0.5rem;
     }
 
-    .icon-number-row {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: 0.1em;
-
-      .number {
-        font-size: 18px;
-        font-weight: normal;
-        margin-left: 0.2em;
-      }
-    }
-
-    .svg-icon {
-      width: 24px;
-      height: 24px;
+    .svg-icon.shield, .svg-icon.gem {
+      width: 28px;
+      height: auto;
+      margin: 0 auto;
       display: inline-block;
       vertical-align: bottom;
+      margin-right: 0.5em;
     }
 
-    .details {
-      font-size: 11px;
-      color: $gray-200;
-      width: 100%;
-      padding: 0 4px;
-      line-height: 1.1;
-      word-break: break-word;
-      max-height: 2.2em;
-      overflow: visible;
+    .number {
+      font-size: 22px;
+      font-weight: bold;
+    }
+
+    .label {
+      margin-top: .5em;
     }
   }
 
@@ -245,6 +215,11 @@
   .icon-row {
     margin-top: 1em;
     justify-content: flex-end;
+
+    .number {
+      font-size: 22px;
+      font-weight: bold;
+    }
   }
 
   .chat-row {

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

@@ -218,19 +218,13 @@
     flex-direction: row;
     flex-wrap: wrap;
     gap: 0.5rem;
-    max-width: 400px;
-    width: 100%;
+
+    // somehow the browser felt like setting this 398px instead
+    // now its fixed to 400 :)
+    width: 400px;
+
     margin-bottom: 1.5rem;
 
-    @media (max-width: 589px) {
-      max-width: 100%;
-      justify-content: center;
-    }
-
-    @media (max-width: 353px) {
-      gap: 0.25rem;
-    }
-
     .quest-col {
       ::v-deep {
         .item-wrapper {
@@ -257,28 +251,6 @@
     ::v-deep & {
       .modal-dialog {
         width: 448px !important;
-        max-width: calc(100vw - 20px);
-        margin: 0.5rem auto;
-        display: flex;
-
-        @media (max-width: 468px) {
-          width: 100% !important;
-        }
-
-        @media (max-width: 353px) {
-          width: 100% !important;
-          margin: 0.25rem auto;
-        }
-      }
-
-      .modal-content {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-
-        @media (max-width: 300px) {
-          border-radius: 0;
-        }
       }
     }
 

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

@@ -1,8 +1,8 @@
 <template>
   <div
-    v-if="!hidden"
-    id="privacy-banner"
     class="banner d-flex align-items-center justify-content-between py-3 px-4"
+    id="privacy-banner"
+    v-if="!hidden"
   >
     <p
       class="mr-3 mb-0"

website/client/src/components/header/notifications/g1g1.vue

@@ -34,7 +34,7 @@
     >
     <div
       class="close-x"
-      @click.stop="remove()"
+      @click="remove()"
     >
       <div
         class="svg-icon svg-close"
@@ -140,7 +140,7 @@ export default {
   methods: {
     remove () {
       if (this.eventKey) {
-        window.localStorage.setItem(`hide-g1g1-${this.eventKey}`, 'true');
+        window.sessionStorage.setItem(`hide-g1g1-${this.eventKey}`, 'true');
       }
       this.$emit('notification-removed');
     },

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

@@ -318,7 +318,7 @@ export default {
     shouldShowG1g1 () {
       if (!this.currentG1g1Event) return false;
       const eventKey = this.g1g1EventKey;
-      if (eventKey && window.localStorage.getItem(`hide-g1g1-${eventKey}`) === 'true') {
+      if (eventKey && window.sessionStorage.getItem(`hide-g1g1-${eventKey}`) === 'true') {
         return false;
       }
       return !this.g1g1Hidden;

website/client/src/components/inventory/stable/petItem.vue

@@ -182,10 +182,12 @@ export default {
       return 'GreyedOut';
     },
     imageName () {
-      const substitutionEvent = this.currentEventList?.find(event => moment()
-        .isBetween(event.start, event.end) && event.spriteSubstitutions);
-      if (this.isOwned() && substitutionEvent && substitutionEvent.spriteSubstitutions.pets) {
-        return `stable_${this.foolPet(`Pet-${this.item.key}`, substitutionEvent.spriteSubstitutions.pets)}`;
+      const foolEvent = this.currentEventList?.find(event => moment()
+        .isBetween(event.start, event.end) && event.aprilFools);
+      if (this.isOwned() && foolEvent) {
+        if (this.isSpecial()) return `stable_${this.foolPet(this.item.key, foolEvent.aprilFools)}`;
+        const petString = `${this.item.eggKey}-${this.item.key}`;
+        return `stable_${this.foolPet(petString, foolEvent.aprilFools)}`;
       }
 
       if (this.isOwned() || (this.mountOwned() && this.isHatchable())) {

website/client/src/components/messages/messageCard.vue

@@ -491,9 +491,6 @@ export default {
   },
   methods: {
     mapProfileLinksToModal () {
-      if (!this.$refs?.markdownContainer) {
-        return;
-      }
       const links = this.$refs.markdownContainer.getElementsByTagName('a');
       for (let i = 0; i < links.length; i += 1) {
         let link = links[i].pathname;

website/client/src/components/news/modal.vue

@@ -10,9 +10,6 @@
   >
     <div class="modal-body">
       <news-content ref="newsContent" />
-      <close-x
-        @close="dismissAlert()"
-      />
     </div>
 
     <div class="modal-footer d-flex align-items-center pb-0">
@@ -33,18 +30,12 @@
 </template>
 
 <script>
-import { mapState } from '@/libs/store';
 import newsContent from './newsContent';
-import closeX from '../ui/closeX.vue';
 
 export default {
   components: {
-    closeX,
     newsContent,
   },
-  computed: {
-    ...mapState({ user: 'user.data' }),
-  },
   methods: {
     async onShow () {
       this.$refs.newsContent.getPosts();

website/client/src/components/notifications.vue

@@ -328,9 +328,6 @@ export default {
       alreadyReadNotification,
       nextCron: null,
       handledNotifications,
-      isInitialLoadComplete: false,
-      pendingRebirthNotification: null,
-      lastShownStreakCount: null, // Track last shown streak to prevent duplicates
     };
   },
   computed: {
@@ -456,18 +453,6 @@ export default {
 
       return this.runYesterDailies();
     },
-    async showPendingRebirthModal () {
-      if (this.pendingRebirthNotification) {
-        this.playSound('Achievement_Unlocked');
-        this.$root.$emit('bv::show::modal', 'rebirth');
-
-        await axios.post('/api/v4/notifications/read', {
-          notificationIds: [this.pendingRebirthNotification.id],
-        });
-
-        this.pendingRebirthNotification = null;
-      }
-    },
     showDeathModal () {
       this.playSound('Death');
       this.$root.$emit('bv::show::modal', 'death');
@@ -676,18 +661,6 @@ export default {
         this.showLevelUpNotifications(this.user.stats.lvl);
       }
       this.handleUserNotifications(this.user.notifications);
-
-      this.isInitialLoadComplete = true;
-
-      const hasRebirthConfirmationFlag = localStorage.getItem('show-rebirth-confirmation') === 'true';
-
-      if (hasRebirthConfirmationFlag) {
-        localStorage.removeItem('show-rebirth-confirmation');
-        this.playSound('Achievement_Unlocked');
-        this.$root.$emit('bv::show::modal', 'rebirth');
-      } else {
-        this.showPendingRebirthModal();
-      }
     },
     async handleUserNotifications (after) {
       if (this.$store.state.isRunningYesterdailies) return;
@@ -727,24 +700,10 @@ export default {
             this.$root.$emit('habitica:won-challenge', notification);
             break;
           case 'REBIRTH_ACHIEVEMENT':
-            if (localStorage.getItem('show-rebirth-confirmation') !== 'true') {
-              if (!this.isInitialLoadComplete) {
-                this.pendingRebirthNotification = notification;
-                markAsRead = false;
-              } else {
-                this.playSound('Achievement_Unlocked');
-                this.$root.$emit('bv::show::modal', 'rebirth');
-              }
-            }
+            this.playSound('Achievement_Unlocked');
+            this.$root.$emit('bv::show::modal', 'rebirth');
             break;
           case 'STREAK_ACHIEVEMENT':
-            // Client-side deduplication: prevent showing duplicate streak achievements
-            if (this.lastShownStreakCount === this.user.achievements.streak) {
-              // Same streak already shown, skip this notification
-              break;
-            }
-            this.lastShownStreakCount = this.user.achievements.streak;
-
             this.text(`${this.$t('streaks')}: ${this.user.achievements.streak}`, () => {
               this.$root.$emit('bv::show::modal', 'streak');
             }, this.user.preferences.suppressModals.streak);

website/client/src/components/payments/successModal.vue

@@ -197,7 +197,9 @@
         <select-translated-array
           :items="[
             'groupParentChildren',
+            'groupCouple',
             'groupFriends',
+            'groupCoworkers',
             'groupManager',
             'groupTeacher'
           ]"

website/client/src/components/secondaryMenu.vue

@@ -12,12 +12,6 @@
   box-shadow: 0 1px 2px 0 rgba($black, 0.2);
   z-index: 9;
   height: 3rem;
-  flex-wrap: wrap;
-
-  @media (max-width: 683px) {
-    height: auto;
-    min-height: 3rem;
-  }
 }
 
 .nav-link {
@@ -29,19 +23,6 @@
   padding: 0.75rem;
 
   color: $gray-50;
-  white-space: nowrap;
-
-  @media (max-width: 683px) {
-    padding: 0.5rem;
-    font-size: 13px;
-    flex: 1 1 auto;
-    min-width: fit-content;
-  }
-
-  @media (max-width: 576px) {
-    padding: 0.5rem 0.4rem;
-    font-size: 12px;
-  }
 
   &.active {
     color: $purple-300;

website/client/src/components/settings/privacyModal.vue

@@ -105,7 +105,7 @@ export default {
   },
   data () {
     return {
-      privacyConsent: false,
+      privacyConsent: true,
     };
   },
   methods: {

website/client/src/components/settings/subscription.vue

@@ -189,7 +189,6 @@
             >
             </p>
             <div
-              v-if="paymentMethodLogo.icon"
               class="svg svg-icon mb-4"
               :class="paymentMethodLogo.class"
               v-html="paymentMethodLogo.icon"
@@ -206,13 +205,6 @@
                 <div>{{ $t('subUpdateCard') }}</div>
               </button>
             </div>
-            <div
-              v-once
-              v-if="!hasGroupPlan"
-              class="small text-center mb-4"
-            >
-              {{ $t('subscriptionBillingFYIShort') }}
-            </div>
             <div
               v-if="purchasedPlanExtraMonthsDetails.months > 0"
               class="extra-months green-10 py-2 px-3 mb-4"
@@ -415,13 +407,6 @@
         <div class="purple-bar my-auto"></div>
       </div>
       <div class="d-flex flex-column align-items-center mt-3">
-        <div
-          v-once
-          v-if="!hasSubscription"
-          class="small gray-100 w-50 text-center mb-5"
-        >
-          {{ $t('subscriptionBillingFYI') }}
-        </div>
         <div
           v-once
           class="svg-icon svg-gift-box mb-2"
@@ -646,7 +631,7 @@
     background-color: $purple-400;
     height: 1px;
     width: 50%;
-    max-width: 417px;
+    max-width: 432px;
   }
 
   .purple-gradient {
@@ -669,12 +654,6 @@
     margin-bottom: 16px;
   }
 
-  .small {
-    font-size: 12px;
-    line-height: 1.67;
-    max-width: 874px;
-  }
-
   .stats-card {
     border-radius: 8px;
     width: 192px;

website/client/src/components/shops/buyModal.vue

@@ -42,7 +42,7 @@
               :hide-class-badge="true"
               :with-background="true"
               :override-avatar-gear="getAvatarOverrides(item)"
-              :sprites-margin="'0px auto 0px -2px'"
+              :sprites-margin="'0px auto 0px -24px'"
             />
           </div>
           <item
@@ -269,23 +269,12 @@
 
     .modal-dialog {
       width: 448px;
-      max-width: calc(100vw - 20px);
       box-sizing: border-box;
-      display: flex;
-
-      @media (max-width: 468px) {
-        width: 100%;
-      }
     }
 
     .badge-dialog {
       left: -8px;
       top: -8px;
-
-      .badge-pin {
-        width: 32px;
-        height: 32px;
-      }
     }
 
     .avatar {
@@ -357,23 +346,7 @@
 
     .content {
       text-align: center;
-      width: 100%;
-      max-width: 448px;
-      margin: 0 auto;
-
-      @media (max-width: 468px) {
-        max-width: 100%;
-      }
-    }
-
-    .modal-content {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-
-      @media (max-width: 300px) {
-        border-radius: 0;
-      }
+      width: 448px;
     }
 
     .item-wrapper {
@@ -591,7 +564,7 @@
 
     .limitedTime {
       height: 32px;
-      width: 100%;
+      width: 446px;
       font-size: 0.75rem;
       margin: 24px 0 0 0;
       background-color: $purple-300;
@@ -856,17 +829,10 @@ export default {
           - ownedMounts
           - ownedItems;
 
-        if (petsRemaining < 0) {
-          const confirmed = await new Promise(resolve => {
-            this.$root.$emit('habitica:purchase-confirm', {
-              message: this.$t('purchasePetItemConfirm', { itemText: this.item.text }),
-              currency: this.item.currency,
-              cost: this.item.value * this.selectedAmountToBuy,
-              resolve,
-            });
-          });
-          if (!confirmed) return;
-        }
+        if (
+          petsRemaining < 0
+          && !window.confirm(this.$t('purchasePetItemConfirm', { itemText: this.item.text })) // eslint-disable-line no-alert
+        ) return;
       }
 
       if (this.item.purchaseType === 'customization') {
@@ -878,23 +844,15 @@ export default {
         this.purchased(this.item.text);
       } else {
         const shouldConfirmPurchase = this.item.currency === 'gems' || this.item.currency === 'hourglasses';
-        if (shouldConfirmPurchase) {
-          const confirmed = await this.confirmPurchase(
-            this.item.currency,
-            this.item.value * this.selectedAmountToBuy,
-          );
-          if (!confirmed) {
-            return;
-          }
+        if (
+          shouldConfirmPurchase
+          && !this.confirmPurchase(this.item.currency, this.item.value * this.selectedAmountToBuy)
+        ) {
+          return;
         }
         if (this.genericPurchase) {
-          if (this.item.key === 'rebirth_orb') {
-            localStorage.setItem('show-rebirth-confirmation', 'true');
-          }
           await this.makeGenericPurchase(this.item, 'buyModal', this.selectedAmountToBuy);
-          if (this.item.key !== 'rebirth_orb') {
-            await this.purchased(this.item.text);
-          }
+          await this.purchased(this.item.text);
         }
       }
 
@@ -908,8 +866,8 @@ export default {
     purchaseGems () {
       this.$root.$emit('bv::show::modal', 'buy-gems');
     },
-    async togglePinned () {
-      this.isPinned = await this.$store.dispatch('user:togglePinnedItem', { type: this.item.pinType, path: this.item.path });
+    togglePinned () {
+      this.isPinned = this.$store.dispatch('user:togglePinnedItem', { type: this.item.pinType, path: this.item.path });
 
       if (!this.isPinned) {
         this.text(this.$t('unpinnedItem', { item: this.item.text }));

website/client/src/components/shops/customizations/index.vue

@@ -76,21 +76,7 @@
                 :empty-item="false"
                 :show-popover="Boolean(ctx.item.text)"
                 @click="selectItem(ctx.item)"
-              >
-                <template
-                  slot="itemBadge"
-                  slot-scope="slotProps"
-                >
-                  <span
-                    class="badge-top"
-                    @click.prevent.stop="togglePinned(slotProps.item)"
-                  >
-                    <pin-badge
-                      :pinned="slotProps.item.pinned"
-                    />
-                  </span>
-                </template>
-              </shop-item>
+              />
             </template>
           </item-rows>
         </div>
@@ -122,16 +108,6 @@
   }
 </style>
 
-<style lang="scss">
-  .market .badge-pin:not(.pinned) {
-    display: none;
-  }
-
-  .market .item:hover .badge-pin {
-    display: block;
-  }
-</style>
-
 <script>
 import find from 'lodash/find';
 import shops from '@/../../common/script/libs/shops';
@@ -142,9 +118,7 @@ import Checkbox from '@/components/ui/checkbox';
 import FilterGroup from '@/components/ui/filterGroup';
 import FilterSidebar from '@/components/ui/filterSidebar';
 import ItemRows from '@/components/ui/itemRows';
-import PinBadge from '@/components/ui/pinBadge';
 import ShopItem from '../shopItem';
-import pinUtils from '@/mixins/pinUtils';
 
 export default {
   components: {
@@ -152,10 +126,8 @@ export default {
     FilterGroup,
     FilterSidebar,
     ItemRows,
-    PinBadge,
     ShopItem,
   },
-  mixins: [pinUtils],
   data () {
     return {
       searchText: null,
@@ -212,12 +184,8 @@ export default {
   methods: {
     customizationsItems (options = {}) {
       const { category, searchBy } = options;
-      return category.items
-        .filter(item => !searchBy || item.text.toLowerCase().includes(searchBy))
-        .map(item => ({
-          ...item,
-          pinned: this.isPinned(item),
-        }));
+      return category.items.filter(item => !searchBy
+        || item.text.toLowerCase().includes(searchBy));
     },
     emptyClick (identifier, event) {
       if (event.target.tagName !== 'A') return;

website/client/src/components/shops/market/sellModal.vue

@@ -111,22 +111,6 @@
 
     .modal-dialog {
       width: 448px;
-      max-width: calc(100vw - 20px);
-      display: flex;
-
-      @media (max-width: 468px) {
-        width: 100%;
-      }
-    }
-
-    .modal-content {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-
-      @media (max-width: 300px) {
-        border-radius: 0;
-      }
     }
 
     .modal-body {

website/client/src/components/shops/purchaseConfirmModal.vue

@@ -1,207 +0,0 @@
-<template>
-  <b-modal
-    id="purchase-confirm-modal"
-    :hide-footer="true"
-    :hide-header="true"
-    modal-class="purchase-confirm-modal"
-    centered
-  >
-    <div class="modal-content-wrapper">
-      <div class="top-bar"></div>
-      <div class="modal-body-content">
-        <div
-          class="currency-chip"
-          :class="currency"
-        >
-          <span
-            class="svg-icon icon-24"
-            v-html="icons[currency]"
-          ></span>
-          <span class="cost-value">{{ cost }}</span>
-        </div>
-        <h2 class="modal-title">
-          {{ $t('confirmPurchase') }}
-        </h2>
-        <p class="modal-subtitle">
-          {{ confirmationMessage }}
-        </p>
-        <div class="button-wrapper">
-          <button
-            class="btn btn-primary"
-            @click="confirm()"
-          >
-            {{ $t('confirm') }}
-          </button>
-          <button
-            class="btn-cancel"
-            @click="cancel()"
-          >
-            {{ $t('cancel') }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </b-modal>
-</template>
-
-<script>
-import svgGem from '@/assets/svg/gem.svg?raw';
-import svgHourglass from '@/assets/svg/hourglass.svg?raw';
-
-export default {
-  data () {
-    return {
-      confirmationMessage: '',
-      currency: 'gems',
-      cost: 0,
-      resolveCallback: null,
-      icons: Object.freeze({
-        gems: svgGem,
-        hourglasses: svgHourglass,
-      }),
-    };
-  },
-  mounted () {
-    this.$root.$on('habitica:purchase-confirm', config => {
-      this.confirmationMessage = config.message;
-      this.currency = config.currency || 'gems';
-      this.cost = config.cost || 0;
-      this.resolveCallback = config.resolve;
-      this.$root.$emit('bv::show::modal', 'purchase-confirm-modal');
-    });
-  },
-  beforeDestroy () {
-    this.$root.$off('habitica:purchase-confirm');
-  },
-  methods: {
-    confirm () {
-      if (this.resolveCallback) {
-        this.resolveCallback(true);
-      }
-      this.close();
-    },
-    cancel () {
-      if (this.resolveCallback) {
-        this.resolveCallback(false);
-      }
-      this.close();
-    },
-    close () {
-      this.$root.$emit('bv::hide::modal', 'purchase-confirm-modal');
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import '@/assets/scss/colors.scss';
-
-::v-deep .purchase-confirm-modal {
-  .modal-dialog {
-    max-width: 330px;
-    margin: auto;
-  }
-
-  .modal-content {
-    border-radius: 8px;
-    overflow: hidden;
-    border: none;
-  }
-
-  .modal-body {
-    padding: 0;
-  }
-}
-
-.modal-content-wrapper {
-  display: flex;
-  flex-direction: column;
-}
-
-.top-bar {
-  height: 8px;
-  background-color: $purple-300;
-}
-
-.modal-body-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0 24px 24px;
-}
-
-.currency-chip {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 40px;
-  padding: 8px 20px;
-  border-radius: 20px;
-  font-size: 1.25rem;
-  font-weight: bold;
-  line-height: 1.4;
-
-  &.gems {
-    color: $gems-color;
-    background-color: rgba($green-10, 0.15);
-  }
-
-  &.hourglasses {
-    color: $hourglass-color;
-    background-color: rgba($blue-10, 0.15);
-  }
-
-  .icon-24 {
-    width: 24px;
-    height: 24px;
-  }
-}
-
-.modal-title {
-  margin-top: 16px;
-  margin-bottom: 0;
-  color: $purple-300;
-  font-family: 'Roboto Condensed', sans-serif;
-  font-weight: 700;
-  font-size: 20px;
-  text-align: center;
-}
-
-.modal-subtitle {
-  margin-top: 12px;
-  margin-bottom: 0;
-  font-family: Roboto, sans-serif;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 24px;
-  letter-spacing: 0;
-  text-align: center;
-  color: $gray-50;
-}
-
-.button-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  margin-top: 16px;
-  gap: 8px;
-}
-
-.btn-cancel {
-  background: none;
-  border: none;
-  color: $purple-300;
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 24px;
-  letter-spacing: 0;
-  cursor: pointer;
-  padding: 8px 16px;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-</style>

website/client/src/components/shops/quests/buyQuestModal.vue

@@ -163,38 +163,8 @@
     }
 
     .modal-dialog {
+      margin-top: 8%;
       width: 448px !important;
-      max-width: calc(100vw - 20px);
-      display: flex;
-
-      @media (max-width: 468px) {
-        width: 100% !important;
-        margin: 3rem auto 0.5rem;
-      }
-
-      @media (max-width: 353px) {
-        margin: 2.5rem auto 0.25rem;
-      }
-    }
-
-    .badge-dialog {
-      left: -8px;
-      top: -8px;
-
-      .badge-pin {
-        width: 32px;
-        height: 32px;
-      }
-    }
-
-    .modal-content {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-
-      @media (max-width: 300px) {
-        border-radius: 0;
-      }
     }
 
     .content {
@@ -515,12 +485,8 @@ export default {
       this.selectedAmountToBuy = 1;
       this.$emit('change', $event);
     },
-    async buyItem () {
-      const confirmed = await this.confirmPurchase(
-        this.item.currency,
-        this.item.value * this.selectedAmountToBuy,
-      );
-      if (!confirmed) {
+    buyItem () {
+      if (!this.confirmPurchase(this.item.currency, this.item.value * this.selectedAmountToBuy)) {
         return;
       }
       this.makeGenericPurchase(this.item, 'buyQuestModal', this.selectedAmountToBuy);

website/client/src/components/shops/seasonal/index.vue

@@ -498,13 +498,8 @@ export default {
 
     await this.triggerGetWorldState();
     this.currentEvent = _find(this.currentEventList, event => Boolean(event.season));
-    if (this.currentEvent.season === 'valentines') {
-      this.imageURLs.background = 'url(/static/npc/spring/seasonal_shop_opened_background.png)';
-      this.imageURLs.npc = 'url(/static/npc/spring/seasonal_shop_opened_npc.png)';
-    } else {
-      this.imageURLs.background = `url(/static/npc/${this.currentEvent.season}/seasonal_shop_opened_background.png)`;
-      this.imageURLs.npc = `url(/static/npc/${this.currentEvent.season}/seasonal_shop_opened_npc.png)`;
-    }
+    this.imageURLs.background = `url(/static/npc/${this.currentEvent.season}/seasonal_shop_opened_background.png)`;
+    this.imageURLs.npc = `url(/static/npc/${this.currentEvent.season}/seasonal_shop_opened_npc.png)`;
   },
   beforeDestroy () {
     this.$root.$off('buyModal::boughtItem');

website/client/src/components/snackbars/notification.vue

@@ -15,17 +15,17 @@
       </div>
 
       <div
-        class="notification callout pt-0"
+        class="notification callout py-2 ml-2"
         :class="classes"
       >
         <div
           v-if="notification.type === 'error'"
-          class="row"
+          class="row pr-4"
         >
           <div class="text">
             <div v-html="notification.text"></div>
           </div>
-          <close-icon />
+          <close-x />
         </div>
         <div
           v-if="notification.type === 'streak'"
@@ -52,7 +52,7 @@
           <div class="text">
             <div>{{ message }}</div>
           </div>
-          <div class="icon d-flex align-items-center">
+          <div class="icon d-flex align-items-center ml-3">
             <div
               v-if="notification.type === 'hp'"
               class="svg-icon"
@@ -74,7 +74,7 @@
               v-html="icons.mana"
             ></div>
             <div
-              class="icon-text"
+              class="icon-text ml-1"
               v-html="notification.text"
             ></div>
           </div>
@@ -86,13 +86,13 @@
           <div class="text">
             <div>{{ message }}</div>
           </div>
-          <div class="icon d-flex align-items-center">
+          <div class="icon d-flex align-items-center ml-3">
             <div
               class="svg-icon"
               v-html="icons.sword"
             ></div>
             <div
-              class="icon-text"
+              class="icon-text ml-1"
               v-html="notification.text"
             ></div>
           </div>
@@ -121,6 +121,15 @@
 <style lang="scss" scoped>
 @import '@/assets/scss/colors.scss';
 
+  ::v-deep .modal-close {
+    top: 11px;
+    right: 11px;
+
+    .svg-close {
+      color: $black;
+    }
+  }
+
   .notification-holder {
     display: flex;
     flex-direction: row;
@@ -132,14 +141,14 @@
   }
 
   .notification {
+    color: $black;
     max-width: 330px;
     border-radius: 4px;
-    background-color: $green-50;
+    padding-left: 12px;
+    padding-right: 12px;
+    background-color: $green-100;
     box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-    color: white;
-    margin-left: 0.5rem;
-    padding-left: 1rem !important;
-    padding-right: 1rem !important;
+    line-height: 1.714;
 
     transition: opacity .5s, top .5s;
 
@@ -149,45 +158,21 @@
   }
 
   .info {
-    background-color: $blue-50;
+    background-color: $blue-100;
     padding-top: .5rem;
   }
 
   .error {
-    background-color: $maroon-100;
-    color: $white;
+    background-color: $red-100;
     position: relative;
-    padding-right: 1.5rem !important;
     cursor: pointer;
-
-    ::v-deep button {
-      height: 9px;
-      width: 9px;
-      top: 0.525rem;
-      right: 0.525rem;
-      padding: 0;
-
-      opacity: 0.5;
-
-      svg path {
-        stroke: white;
-      }
-    }
-
-    &:hover {
-      ::v-deep button {
-        opacity: 1;
-      }
-    }
   }
 
   .negative {
-    background-color: $maroon-100;
+    background-color: $red-100;
   }
 
   .text {
-    padding: .5rem 0;
-
     ::v-deep p:last-of-type {
       margin-bottom: 0; // remove last markdown padding
     }
@@ -196,10 +181,10 @@
   .svg-icon {
     width: 24px;
     height: 24px;
-    margin: 0.35rem;
   }
 
   .drop {
+    color: $white;
     background-color: $gray-50;
   }
 
@@ -210,7 +195,6 @@
   }
 
   .icon-text {
-    color: $white;
     font-weight: bold;
   }
 
@@ -230,12 +214,12 @@ import gold from '@/assets/svg/gold.svg?raw';
 import star from '@/assets/svg/star.svg?raw';
 import mana from '@/assets/svg/mana.svg?raw';
 import sword from '@/assets/svg/sword.svg?raw';
-import CloseIcon from '../shared/closeIcon';
+import CloseX from '@/components/ui/closeX';
 import Sprite from '@/components/ui/sprite';
 
 export default {
   components: {
-    CloseIcon,
+    CloseX,
     Sprite,
   },
   props: ['notification', 'visibleAmount'],

website/client/src/components/static/appleRedirect.vue

@@ -37,7 +37,6 @@ export default {
       window.location.href = '/';
     } else {
       window.sessionStorage.setItem('apple-token', response.idToken);
-      window.sessionStorage.setItem('apple-email', response.email);
       window.location.href = '/username';
     }
   },

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

@@ -147,6 +147,7 @@
       </li>
       <li>
         {{ $t('commGuideAKA', {habitName: 'fizself', realName: 'Hafiz'}) }}
+        ({{ $t('commGuideOnGitHub', {gitHubName: 'hafizzle'}) }})
         - Developer
       </li>
     </ul>

website/client/src/components/static/groupPlans.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <group-plan-selection-modal />
     <group-plan-creation-modal />
     <div class="d-flex justify-content-center">
       <div
@@ -46,9 +45,6 @@
           <p class="gray-200">
             {{ $t('billedMonthly') }}
           </p>
-          <small class="gray-200">
-            {{ $t('groupPlanBillingFYI') }}
-          </small>
         </div>
         <div class="top-right"></div>
         <div class="d-flex justify-content-between align-items-middle w-100 gap-72 mb-100">
@@ -118,9 +114,6 @@
             <p class="gray-200">
               {{ $t('billedMonthly') }}
             </p>
-            <small class="gray-200">
-              {{ $t('groupPlanBillingFYI') }}
-            </small>
           </div>
           <div class="bot-right"></div>
         </div>
@@ -181,11 +174,6 @@
     line-height: 28px;
   }
 
-  small {
-    font-size: 12px;
-    line-height: 1.67;
-  }
-
   // Major layout elements
 
   .bottom-banner {
@@ -316,12 +304,10 @@
 import { setup as setupPayments } from '@/libs/payments';
 import paymentsMixin from '../../mixins/payments';
 import GroupPlanCreationModal from '../group-plans/groupPlanCreationModal.vue';
-import GroupPlanSelectionModal from '../group-plans/groupPlanSelectionModal.vue';
 
 export default {
   components: {
     GroupPlanCreationModal,
-    GroupPlanSelectionModal,
   },
   mixins: [paymentsMixin],
   data () {
@@ -362,7 +348,7 @@ export default {
       if (this.upgradingGroup._id) {
         return this.stripeGroup({ group: this.upgradingGroup, upgrade: true });
       }
-      return this.$root.$emit('bv::show::modal', 'group-plan-selection');
+      return this.$root.$emit('bv::show::modal', 'create-group');
     },
   },
 };

website/client/src/components/static/home.vue

@@ -11,12 +11,12 @@
     <privacy-banner
       class="privacy-banner"
     />
-    <div class="bg-purple-300 white pt-5">
+    <div class="bg-purple-300 white">
       <div>
         <div
           id="intro-signup"
         >
-          <div class="d-flex justify-content-center pb-5 mb-5">
+          <div class="d-flex justify-content-center">
             <div class="w-33 mr-5 mt-5">
               <img
                 src="@/assets/images/home/home-main@3x.png"

website/client/src/components/static/privacy.vue

@@ -64,11 +64,9 @@
       <li>sexual orientation; and</li>
       <li>information collected from a known child.</li>
     </ul>
-    <p>
-      <strong>
-        NOTE: Please do not provide us “sensitive personal information” or “sensitive personal data”, as those terms are defined under applicable privacy laws, unless we directly request that you do so. If you feel, after careful consideration, that it is necessary to provide us certain sensitive personal information or data, please provide us the minimum amount of such information or data that is necessary.
-      </strong>
-    </p>
+    <p><strong>
+      NOTE: Please do not provide us “sensitive personal information” or “sensitive personal data”, as those terms are defined under applicable privacy laws, unless we directly request that you do so. If you feel, after careful consideration, that it is necessary to provide us certain sensitive personal information or data, please provide us the minimum amount of such information or data that is necessary.
+    </strong></p>
     <h3 id="section_1_1">
       1.1 Information You Provide Directly
     </h3>
@@ -619,7 +617,7 @@
       7. General Audience Services
     </h2>
     <p>
-      The Service is intended for users 18 years or older; you are not permitted to access or use the Service if you are younger than 18. We do not knowingly collect personal information from children under the age of 18 through the Service. We encourage parents and legal guardians to monitor their children’s Internet usage and to help enforce our Privacy Policy by instructing their children to never provide personal information without their permission. If you have reason to believe that a child under the age of 18 has provided personal information to us, please contact us at <a href="mailto:privacy@habitica.com">privacy@habitica.com</a>, and we will delete that information from our databases.
+      The Service is intended for users 18 years or older; you are not permitted to access or use the Service if you are younger than 18. We do not knowingly collect personal information from children under the age of 18 through the Service. We encourage parents and legal guardians to monitor their children’s Internet usage and to help enforce our Privacy Policy by instructing their children to never provide personal information without their permission. If you have reason to believe that a child under the age of 18 has provided personal information to us, please contact us at <a href='mailto:privacy@habitica.com'>privacy@habitica.com</a>, and we will delete that information from our databases.
     </p>
 
     <h2 id="section_8">
@@ -710,7 +708,7 @@
 
     <p><strong><u>Nevada Residents</u></strong></p>
     <p>
-      Nevada residents may opt out of the sale of certain “covered information” collected by operators of websites or online services. We currently do not sell covered information, as “sale” is defined by such law, and do not have plans to do so. In accordance with Nevada law, you may submit to us a verified request instructing us not to sell your covered information by sending an email to <a href="mailto:privacy@habitica.com">privacy@habitica.com</a>.
+      Nevada residents may opt out of the sale of certain “covered information” collected by operators of websites or online services. We currently do not sell covered information, as “sale” is defined by such law, and do not have plans to do so. In accordance with Nevada law, you may submit to us a verified request instructing us not to sell your covered information by sending an email to <a href='mailto:privacy@habitica.com'>privacy@habitica.com</a>.
     </p>
     <p><strong><u>Notice to United Kingdom/European/Switzerland Residents.</u></strong></p>
     <p>

website/client/src/components/static/staticWrapper.vue

@@ -15,8 +15,8 @@
       <router-view />
     </div>
     <div
-      v-if="loginFlow"
       id="bottom-background"
+      v-if="loginFlow"
       class="bg-purple-300"
     >
       <div class="seamless_mountains_demo_repeat"></div>
@@ -31,10 +31,7 @@
       id="bottom-wrap"
       class="purple-4"
     >
-      <div
-        v-if="!loginFlow"
-        id="bottom-background"
-      >
+      <div id="bottom-background" v-if="!loginFlow">
         <div class="seamless_mountains_demo_repeat"></div>
         <div class="midground_foreground_extended2"></div>
       </div>
@@ -107,10 +104,9 @@
     footer, footer a {
       background: transparent;
       color: $purple-500;
-    }
-
-    footer a:hover {
-      color: $white;
+      &:hover {
+        color: $white;
+      }
     }
 
     h3 {
@@ -121,6 +117,10 @@
       border-top-color: $purple-100;
     }
 
+    .donate-text {
+      color: $purple-500;
+    }
+
     .logo {
       color: $purple-300;
     }
@@ -129,27 +129,42 @@
       color: $purple-500;
     }
 
-    .social .d-flex:hover {
-      a {
-        color: $white;
-      }
-      svg {
-        fill: $white;
-      }
-    }
-
     .social-circle {
       background: $purple-50;
       color: $purple-500;
 
-      svg {
+      .instagram svg {
         background-color: $purple-50;
         fill: $purple-500;
-        width: 24px;
-        height: 24px;
+        &:hover {
+          fill: $white;
+        }
+      }
+
+      .bluesky svg {
+        background-color: $purple-50;
+        fill: $purple-500;
+        &:hover {
+          fill: $white;
+        }
+      }
+
+      .facebook svg {
+        background-color: $purple-50;
+        fill: $purple-500;
+        &:hover {
+          fill: $white;
+        }
+      }
+
+      .tumblr svg {
+        background-color: $purple-50;
+        fill: $purple-500;
+        &:hover {
+          fill: $white;
+        }
       }
     }
-
     .btn-contribute {
       background: $white;
       box-shadow: none;
@@ -259,8 +274,7 @@ export default {
       return 'purple-footer';
     },
     loginFlow () {
-      const loginRoutes = ['forgotPassword', 'login', 'register', 'resetPassword', 'username'];
-      return loginRoutes.indexOf(this.$route.name) !== -1;
+      return ['login', 'register', 'username'].indexOf(this.$route.name) !== -1;
     },
     showContentWrap () {
       return this.$route.name !== 'news';

website/client/src/components/static/terms.vue

@@ -158,7 +158,7 @@
       BY PURCHASING PREMIUM YOU EXPRESSLY UNDERSTAND AND AGREE TO OUR REFUND POLICY:
     </p>
     <p>
-      YOU CAN REQUEST A REFUND OF YOUR MOST RECENT PAYMENT TO US BY CONTACTING US AT <a href="mailto:admin@habitica.com">ADMIN@HABITICA.COM</a>. THE AMOUNT OF YOUR REFUND, IF ANY, WILL BE BASED ON (1) THE AMOUNT OF YOUR PURCHASED BUT UNUSED SUBSCRIPTION BENEFITS AND (2) THE TERMS IMPOSED ON US BY OUR PAYMENT PROCESSING VENDORS (E.G., WITH RESPECT TO THE DURATION OF THE REFUND PERIOD).
+      YOU CAN REQUEST A REFUND OF YOUR MOST RECENT PAYMENT TO US BY CONTACTING US AT <a href='mailto:admin@habitica.com'>ADMIN@HABITICA.COM</a>. THE AMOUNT OF YOUR REFUND, IF ANY, WILL BE BASED ON (1) THE AMOUNT OF YOUR PURCHASED BUT UNUSED SUBSCRIPTION BENEFITS AND (2) THE TERMS IMPOSED ON US BY OUR PAYMENT PROCESSING VENDORS (E.G., WITH RESPECT TO THE DURATION OF THE REFUND PERIOD).
     </p>
     <p>
       FOR ANY CUSTOMER WHO PURCHASED PREMIUM IN APPLE INC.'s APP STORE ("APP STORE"), PLEASE CONTACT APPLE INC.'s SUPPORT TEAM: <a

website/client/src/components/tasks/brokenTaskModal.vue

@@ -1,45 +1,65 @@
 <template>
   <b-modal
     id="broken-task-modal"
+    title="Broken Challenge"
+    size="sm"
     :hide-footer="true"
-    :hide-header="true"
-    modal-class="broken-task-confirm-modal"
-    centered
   >
     <div
       v-if="brokenChallengeTask && brokenChallengeTask.challenge"
-      class="modal-content-wrapper"
+      class="modal-body"
     >
-      <div class="top-bar"></div>
-      <div class="modal-body-content">
-        <div
-          class="icon-wrapper"
-          v-html="icons.alertIcon"
-        ></div>
-        <h2 class="modal-title">
-          {{ modalTitle }}
-        </h2>
-        <p class="modal-subtitle">
-          {{ modalSubtitle }}
-        </p>
-        <div class="button-wrapper">
+      <div
+        v-if="brokenChallengeTask.challenge.broken === 'TASK_DELETED'
+          || brokenChallengeTask.challenge.broken === 'CHALLENGE_TASK_NOT_FOUND'"
+      >
+        <h2>{{ $t('brokenTask') }}</h2>
+        <div>
           <button
             class="btn btn-primary"
-            @click="keepAction()"
+            @click="unlink('keep')"
           >
-            {{ keepButtonText }}
+            {{ $t('keepIt') }}
           </button>
           <button
             class="btn btn-danger"
-            @click="removeAction()"
+            @click="removeTask(obj)"
           >
-            {{ removeButtonText }}
+            {{ $t('removeIt') }}
+          </button>
+        </div>
+      </div>
+      <div v-if="brokenChallengeTask.challenge.broken === 'CHALLENGE_DELETED'">
+        <h2>{{ $t('brokenChallenge') }}</h2>
+        <div>
+          <button
+            class="btn btn-primary"
+            @click="unlink('keep-all')"
+          >
+            {{ $t('keepTasks') }}
           </button>
           <button
-            class="btn-cancel"
-            @click="close()"
+            class="btn btn-danger"
+            @click="unlink('remove-all')"
           >
-            {{ $t('cancel') }}
+            {{ $t('removeTasks') }}
+          </button>
+        </div>
+      </div>
+      <div v-if="brokenChallengeTask.challenge.broken === 'CHALLENGE_CLOSED'">
+        <h2 v-html="$t('challengeCompleted', {user: brokenChallengeTask.challenge.winner})"></h2>
+        <div>
+          <button
+            class="btn btn-primary"
+            @click="unlink('keep-all')"
+          >
+            {{ $t('keepTasks') }}
+          </button>
+          <button
+            class="btn btn-danger"
+            @click="unlink('remove-all')"
+          >
+            {{ $t('removeTasks') }}
           </button>
         </div>
       </div>
@@ -47,175 +67,23 @@
   </b-modal>
 </template>
 
-<style lang="scss" scoped>
-@import '@/assets/scss/colors.scss';
-
-::v-deep .broken-task-confirm-modal {
-  .modal-dialog {
-    max-width: 330px;
-    margin: auto;
-  }
-
-  .modal-content {
-    border-radius: 8px;
-    overflow: hidden;
-    border: none;
-  }
-
+<style scoped>
   .modal-body {
-    padding: 0;
+    padding-bottom: 2em;
   }
-}
-
-.modal-content-wrapper {
-  display: flex;
-  flex-direction: column;
-}
-
-.top-bar {
-  height: 8px;
-  background-color: $maroon-100;
-}
-
-.modal-body-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0 24px 24px;
-}
-
-.icon-wrapper {
-  margin-top: 40px;
-  width: 48px;
-  height: 48px;
-
-  ::v-deep svg {
-    width: 48px;
-    height: 48px;
-
-    path {
-      fill: #DE3F3F;
-    }
-  }
-}
-
-.modal-title {
-  margin-top: 16px;
-  margin-bottom: 0;
-  color: $maroon-100;
-  font-family: 'Roboto Condensed', sans-serif;
-  font-weight: 700;
-  font-size: 20px;
-  text-align: center;
-}
-
-.modal-subtitle {
-  margin-top: 12px;
-  margin-bottom: 0;
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 24px;
-  letter-spacing: 0;
-  text-align: center;
-  color: $gray-50;
-}
-
-.button-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  margin-top: 16px;
-  gap: 8px;
-}
-
-.btn-cancel {
-  background: none;
-  border: none;
-  color: $purple-300;
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 24px;
-  letter-spacing: 0;
-  cursor: pointer;
-  padding: 8px 16px;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
 </style>
 
 <script>
 import { mapActions } from '@/libs/store';
 import notifications from '@/mixins/notifications';
-import alertIcon from '@/assets/svg/for-css/alert.svg?raw';
 
 export default {
   mixins: [notifications],
   data () {
     return {
       brokenChallengeTask: {},
-      icons: Object.freeze({
-        alertIcon,
-      }),
     };
   },
-  computed: {
-    brokenType () {
-      return this.brokenChallengeTask.challenge?.broken;
-    },
-    isSingleTask () {
-      return this.brokenType === 'TASK_DELETED'
-        || this.brokenType === 'CHALLENGE_TASK_NOT_FOUND';
-    },
-    brokenChallengeTaskCount () {
-      if (!this.brokenChallengeTask.challenge?.id) return 0;
-      const challengeId = this.brokenChallengeTask.challenge.id;
-      const tasksData = this.$store.state.tasks.data;
-      let count = 0;
-      ['habits', 'dailys', 'todos', 'rewards'].forEach(type => {
-        if (tasksData[type]) {
-          count += tasksData[type].filter(
-            t => t.challenge && t.challenge.id === challengeId,
-          ).length;
-        }
-      });
-      return count;
-    },
-    modalTitle () {
-      if (this.isSingleTask) {
-        return this.$t('brokenTask');
-      }
-      if (this.brokenType === 'CHALLENGE_CLOSED') {
-        return this.$t('challengeCompleted');
-      }
-      return this.$t('brokenChallenge');
-    },
-    modalSubtitle () {
-      if (this.isSingleTask) {
-        return this.$t('brokenTaskDescription');
-      }
-      if (this.brokenType === 'CHALLENGE_CLOSED') {
-        return this.$t('challengeCompletedDescription', { user: this.brokenChallengeTask.challenge?.winner });
-      }
-      return this.$t('brokenChallengeDescription');
-    },
-    keepButtonText () {
-      if (this.isSingleTask) {
-        return this.$t('keepIt');
-      }
-      return this.$t('keepTasks');
-    },
-    removeButtonText () {
-      if (this.isSingleTask) {
-        return this.$t('removeIt');
-      }
-      return this.$t('removeTasks');
-    },
-  },
   mounted () {
     this.$root.$on('handle-broken-task', task => {
       this.brokenChallengeTask = { ...task };
@@ -231,36 +99,8 @@ export default {
       unlinkOneTask: 'tasks:unlinkOneTask',
       unlinkAllTasks: 'tasks:unlinkAllTasks',
     }),
-    keepAction () {
-      if (this.isSingleTask) {
-        this.unlink('keep');
-      } else {
-        this.unlink('keep-all');
-      }
-    },
-    async removeAction () {
-      if (this.isSingleTask) {
-        await this.removeTask();
-      } else {
-        await this.unlink('remove-all');
-      }
-    },
     async unlink (keepOption) {
       if (keepOption.indexOf('-all') !== -1) {
-        if (keepOption === 'remove-all') {
-          const count = this.brokenChallengeTaskCount;
-          const confirmed = await new Promise(resolve => {
-            this.$root.$emit('habitica:delete-task-confirm', {
-              title: count === 1 ? this.$t('deleteTask') : this.$t('deleteXTasks', { count }),
-              description: this.$t('brokenChallengeTaskCount', { count }),
-              message: this.$t('confirmDeleteTasks'),
-              buttonText: count === 1 ? this.$t('deleteTask') : this.$t('deleteXTasks', { count }),
-              resolve,
-            });
-          });
-          if (!confirmed) return;
-        }
-
         await this.unlinkAllTasks({
           challengeId: this.brokenChallengeTask.challenge.id,
           keep: keepOption,
@@ -282,14 +122,8 @@ export default {
       });
       this.close();
     },
-    async removeTask () {
-      const confirmed = await new Promise(resolve => {
-        this.$root.$emit('habitica:delete-task-confirm', {
-          message: this.$t('sureDelete'),
-          resolve,
-        });
-      });
-      if (!confirmed) return;
+    removeTask () {
+      if (!window.confirm('Are you sure you want to delete this task?')) return; // eslint-disable-line no-alert
       this.destroyTask(this.brokenChallengeTask);
       this.close();
     },

website/client/src/components/tasks/column.vue

@@ -87,7 +87,7 @@
         ref="tasksList"
         class="sortable-tasks"
         :disabled="activeFilter.label === 'scheduled' || !canBeDragged()"
-        scroll-sensitivity="64"
+        scrollSensitivity="64"
         :delay-on-touch-only="true"
         :delay="100"
         @update="taskSorted"
@@ -348,6 +348,7 @@
 import throttle from 'lodash/throttle';
 import isEmpty from 'lodash/isEmpty';
 import draggable from 'vuedraggable';
+import { shouldDo } from '@/../../common/script/cron';
 import inAppRewards from '@/../../common/script/libs/inAppRewards';
 import taskDefaults from '@/../../common/script/libs/taskDefaults';
 import Task from './task';
@@ -481,10 +482,25 @@ export default {
       return this.$t('addATask', { type });
     },
     badgeCount () {
-      if (this.type === 'reward') {
-        return 0;
+      // 0 means the badge will not be shown
+      // It is shown for the all and due views of dailies
+      // and for the active and scheduled views of todos.
+      if (this.type === 'todo' && this.activeFilter.label !== 'complete2') {
+        return this.taskList.length;
+      } if (this.type === 'daily') {
+        if (this.activeFilter.label === 'due') {
+          return this.taskList.length;
+        } if (this.activeFilter.label === 'all') {
+          return this.taskList
+            .reduce(
+              (count, t) => (!t.completed
+                && shouldDo(new Date(), t, this.getUserPreferences) ? count + 1 : count),
+              0,
+            );
+        }
       }
-      return this.taskList.length;
+
+      return 0;
     },
   },
   watch: {

website/client/src/components/tasks/deleteTaskConfirmModal.vue

@@ -1,223 +0,0 @@
-<template>
-  <b-modal
-    id="delete-task-confirm-modal"
-    :hide-footer="true"
-    :hide-header="true"
-    modal-class="delete-confirm-modal"
-    centered
-  >
-    <div class="modal-content-wrapper">
-      <div class="top-bar"></div>
-      <div class="modal-body-content">
-        <div
-          class="icon-wrapper"
-          v-html="icons.alertIcon"
-        ></div>
-        <h2 class="modal-title">
-          {{ displayTitle }}
-        </h2>
-        <p
-          v-if="description"
-          class="modal-description"
-        >
-          {{ description }}
-        </p>
-        <p class="modal-subtitle">
-          {{ confirmationMessage }}
-        </p>
-        <div class="button-wrapper">
-          <button
-            class="btn btn-danger"
-            @click="confirm()"
-          >
-            {{ buttonText }}
-          </button>
-          <button
-            class="btn-cancel"
-            @click="cancel()"
-          >
-            {{ $t('cancel') }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </b-modal>
-</template>
-
-<script>
-import alertIcon from '@/assets/svg/for-css/alert.svg?raw';
-
-export default {
-  data () {
-    return {
-      confirmationMessage: '',
-      taskType: '',
-      description: '',
-      customTitle: '',
-      customButtonText: '',
-      resolveCallback: null,
-      icons: Object.freeze({
-        alertIcon,
-      }),
-    };
-  },
-  computed: {
-    displayTitle () {
-      if (this.customTitle) return this.customTitle;
-      return this.$t('deleteType', { type: this.taskType });
-    },
-    buttonText () {
-      if (this.customButtonText) return this.customButtonText;
-      return this.displayTitle;
-    },
-  },
-  mounted () {
-    this.$root.$on('habitica:delete-task-confirm', config => {
-      this.confirmationMessage = config.message;
-      this.taskType = config.taskType || '';
-      this.description = config.description || '';
-      this.customTitle = config.title || '';
-      this.customButtonText = config.buttonText || '';
-      this.resolveCallback = config.resolve;
-      this.$root.$emit('bv::show::modal', 'delete-task-confirm-modal');
-    });
-  },
-  beforeDestroy () {
-    this.$root.$off('habitica:delete-task-confirm');
-  },
-  methods: {
-    confirm () {
-      if (this.resolveCallback) {
-        this.resolveCallback(true);
-      }
-      this.close();
-    },
-    cancel () {
-      if (this.resolveCallback) {
-        this.resolveCallback(false);
-      }
-      this.close();
-    },
-    close () {
-      this.$root.$emit('bv::hide::modal', 'delete-task-confirm-modal');
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import '@/assets/scss/colors.scss';
-
-::v-deep .delete-confirm-modal {
-  .modal-dialog {
-    max-width: 330px;
-    margin: auto;
-  }
-
-  .modal-content {
-    border-radius: 8px;
-    overflow: hidden;
-    border: none;
-  }
-
-  .modal-body {
-    padding: 0;
-  }
-}
-
-.modal-content-wrapper {
-  display: flex;
-  flex-direction: column;
-}
-
-.top-bar {
-  height: 8px;
-  background-color: $maroon-100;
-}
-
-.modal-body-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0 24px 24px;
-}
-
-.icon-wrapper {
-  margin-top: 40px;
-  width: 48px;
-  height: 48px;
-
-  ::v-deep svg {
-    width: 48px;
-    height: 48px;
-
-    path {
-      fill: #DE3F3F;
-    }
-  }
-}
-
-.modal-title {
-  margin-top: 16px;
-  margin-bottom: 0;
-  color: $maroon-100;
-  font-family: 'Roboto Condensed', sans-serif;
-  font-weight: 700;
-  font-size: 20px;
-  text-align: center;
-}
-
-.modal-description {
-  margin-top: 12px;
-  margin-bottom: 0;
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 24px;
-  letter-spacing: 0;
-  text-align: center;
-  color: $gray-50;
-}
-
-.modal-description + .modal-subtitle {
-  margin-top: 16px;
-}
-
-.modal-subtitle {
-  margin-top: 12px;
-  margin-bottom: 0;
-  font-family: Roboto, sans-serif;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 24px;
-  letter-spacing: 0;
-  text-align: center;
-  color: $gray-50;
-}
-
-.button-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  margin-top: 16px;
-  gap: 8px;
-}
-
-.btn-cancel {
-  background: none;
-  border: none;
-  color: $purple-300;
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 24px;
-  letter-spacing: 0;
-  cursor: pointer;
-  padding: 8px 16px;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-</style>

website/client/src/components/tasks/modal-controls/checklist.vue

@@ -48,19 +48,11 @@
           />
 
           <input
-            :ref="'checklistItem-' + $index"
             v-model="item.text"
             class="inline-edit-input checklist-item form-control"
             type="text"
             :disabled="disabled || disableEdit"
             :class="summaryClass(item)"
-            @focus="setActiveItem($index)"
-            @keydown="autoCompleteMixinUpdateCarretPosition"
-            @keydown.tab="autoCompleteMixinHandleTab($event)"
-            @keydown.up="autoCompleteMixinSelectPreviousAutocomplete($event)"
-            @keydown.down="autoCompleteMixinSelectNextAutocomplete($event)"
-            @keypress.enter="autoCompleteMixinSelectAutocomplete($event)"
-            @keydown.esc="autoCompleteMixinHandleEscape($event)"
           >
           <span
             v-if="!disabled && !disableEdit"
@@ -89,30 +81,15 @@
         </span>
 
         <input
-          ref="newChecklistInput"
           v-model="newChecklistItem"
           class="inline-edit-input checklist-item form-control"
           type="text"
           :placeholder="$t('newChecklistItem')"
-          @focus="setActiveItem(-1)"
-          @keydown="autoCompleteMixinUpdateCarretPosition"
-          @keydown.tab="autoCompleteMixinHandleTab($event)"
-          @keydown.up="autoCompleteMixinSelectPreviousAutocomplete($event)"
-          @keydown.down="autoCompleteMixinSelectNextAutocomplete($event)"
-          @keypress.enter="newChecklistEnterHandler($event)"
+          @keypress.enter="setHasPossibilityOfIMEConversion(false)"
           @keyup.enter="addChecklistItem($event, true)"
-          @keydown.esc="autoCompleteMixinHandleEscape($event)"
           @blur="addChecklistItem($event, false)"
         >
       </div>
-      <emoji-auto-complete
-        ref="emojiAutocomplete"
-        :text="activeFieldText"
-        :textbox="textbox"
-        :coords="mixinData.autoComplete.coords"
-        :caret-position="mixinData.autoComplete.caretPosition"
-        @select="selectedAutocomplete"
-      />
     </b-collapse>
   </div>
 </template>
@@ -128,8 +105,6 @@ import chevronIcon from '@/assets/svg/chevron.svg?raw';
 import gripIcon from '@/assets/svg/grip.svg?raw';
 import checkbox from '@/components/ui/checkbox';
 import lockableLabel from './lockableLabel';
-import emojiAutoComplete from '@/components/chat/emojiAutoComplete';
-import { autoCompleteHelperMixin } from '@/mixins/autoCompleteHelper';
 
 export default {
   name: 'Checklist',
@@ -137,9 +112,7 @@ export default {
     checkbox,
     draggable,
     lockableLabel,
-    emojiAutoComplete,
   },
-  mixins: [autoCompleteHelperMixin],
   props: {
     disabled: {
       type: Boolean,
@@ -160,8 +133,6 @@ export default {
       showChecklist: true,
       hasPossibilityOfIMEConversion: true,
       newChecklistItem: null,
-      textbox: null,
-      activeItemIndex: -1,
       icons: Object.freeze({
         positive: positiveIcon,
         destroy: deleteIcon,
@@ -170,15 +141,6 @@ export default {
       }),
     };
   },
-  computed: {
-    activeFieldText () {
-      if (this.activeItemIndex === -1) {
-        return this.newChecklistItem || '';
-      }
-      const item = this.checklist[this.activeItemIndex];
-      return item ? item.text || '' : '';
-    },
-  },
   methods: {
     summaryClass (item) {
       if (!this.disableEdit) return '';
@@ -217,40 +179,6 @@ export default {
       this.checklist.splice(i, 1);
       this.updateChecklist();
     },
-    setActiveItem (index) {
-      this.activeItemIndex = index;
-      if (index === -1) {
-        this.textbox = this.$refs.newChecklistInput;
-      } else {
-        const refArr = this.$refs[`checklistItem-${index}`];
-        this.textbox = refArr ? refArr[0] || refArr : null;
-      }
-    },
-    newChecklistEnterHandler (e) {
-      const ac = this._getActiveAutocomplete();
-      if (ac && ac.selected !== null) {
-        e.preventDefault();
-        ac.makeSelection();
-      } else if (ac) {
-        ac.cancel();
-        this.setHasPossibilityOfIMEConversion(false);
-      } else {
-        this.setHasPossibilityOfIMEConversion(false);
-      }
-    },
-    selectedAutocomplete (newText, newCaret) {
-      if (this.activeItemIndex === -1) {
-        this.newChecklistItem = newText;
-      } else {
-        this.checklist[this.activeItemIndex].text = newText;
-      }
-      this.$nextTick(() => {
-        if (this.textbox) {
-          this.textbox.setSelectionRange(newCaret, newCaret);
-          this.textbox.focus();
-        }
-      });
-    },
   },
 };
 </script>
@@ -259,7 +187,6 @@ export default {
   @import '@/assets/scss/colors.scss';
 
   .checklist-component {
-    position: relative;
 
     .chevron-flip {
       transform: translateY(-5px) rotate(180deg);

website/client/src/components/tasks/modal-controls/selectMulti.vue

@@ -9,27 +9,12 @@
       @toggle="openOrClose($event)"
     >
       <b-dropdown-header>
-        <div class="mb-2 search-input-wrapper">
+        <div class="mb-2">
           <b-form-input
-            ref="searchInput"
             v-model="search"
             type="text"
             :placeholder="searchPlaceholder"
-            @focus="setTextbox"
-            @keydown="autoCompleteMixinUpdateCarretPosition"
-            @keydown.tab="autoCompleteMixinHandleTab($event)"
-            @keydown.up="autoCompleteMixinSelectPreviousAutocomplete($event)"
-            @keydown.down="autoCompleteMixinSelectNextAutocomplete($event)"
-            @keydown.enter="searchEnterHandler($event)"
-            @keydown.esc="searchEscHandler($event)"
-          />
-          <emoji-auto-complete
-            ref="emojiAutocomplete"
-            :text="search"
-            :textbox="textbox"
-            :coords="mixinData.autoComplete.coords"
-            :caret-position="mixinData.autoComplete.caretPosition"
-            @select="selectedAutocomplete"
+            @keyup.enter="handleSubmit"
           />
         </div>
 
@@ -56,7 +41,7 @@
         v-if="addNew || availableToSelect.length > 0"
         :class="{
           'item-group': true,
-          'add-new': search !== '' && !hasExactMatch,
+          'add-new': availableToSelect.length === 0 && search !== '',
           'scroll': availableToSelect.length > 5
         }"
       >
@@ -86,7 +71,7 @@
         </b-dropdown-item-button>
 
         <div
-          v-if="addNew && search !== '' && !hasExactMatch"
+          v-if="addNew"
           class="hint"
         >
           {{ $t('pressEnterToAddTag', { tagName: search }) }}
@@ -109,10 +94,6 @@ $itemHeight: 2rem;
 }
 
 .select-multi {
-  .search-input-wrapper {
-    position: relative;
-  }
-
   .dropdown-toggle {
     padding-left: 0.75rem;
   }
@@ -171,8 +152,7 @@ $itemHeight: 2rem;
     max-height: #{5*$itemHeight};
 
     &.add-new {
-      min-height: 30px;
-      height: auto;
+      height: 30px;
 
       .hint {
         display: block;
@@ -205,8 +185,6 @@ $itemHeight: 2rem;
 import Vue from 'vue';
 import MultiList from '@/components/tasks/modal-controls/multiList';
 import markdownDirective from '@/directives/markdown';
-import emojiAutoComplete from '@/components/chat/emojiAutoComplete';
-import { autoCompleteHelperMixin } from '@/mixins/autoCompleteHelper';
 
 export default {
   directives: {
@@ -214,9 +192,7 @@ export default {
   },
   components: {
     MultiList,
-    emojiAutoComplete,
   },
-  mixins: [autoCompleteHelperMixin],
   props: {
     addNew: {
       type: Boolean,
@@ -245,8 +221,6 @@ export default {
       wasTagAdded: false,
       selected: this.selectedItems,
       search: '',
-      textbox: null,
-      itemsAdded: [],
     };
   },
   computed: {
@@ -274,16 +248,6 @@ export default {
 
       return filteredItems;
     },
-    hasExactMatch () {
-      const searchTerm = this.search.trim().toLowerCase();
-      if (!searchTerm) return false;
-      if (this.itemsAdded.indexOf(searchTerm) !== -1) return true;
-      if (this.availableToSelect.length === 0) return false;
-      if (this.availableToSelect[0].name.toLowerCase() === searchTerm) {
-        return true;
-      }
-      return false;
-    },
   },
   watch: {
     selected () {
@@ -322,7 +286,6 @@ export default {
       this.closeSelectPopup();
     },
     selectItem (item) {
-      if (!item) return;
       this.selectedItems.push(item.id);
       this.$emit('toggle', item.id);
       this.preventHide = true;
@@ -349,51 +312,12 @@ export default {
         this.closeSelectPopup();
       }
     },
-    setTextbox () {
-      const ref = this.$refs.searchInput;
-      this.textbox = ref ? (ref.$el || ref) : null;
-    },
-    searchEnterHandler (e) {
-      const ac = this._getActiveAutocomplete();
-      if (ac && ac.selected !== null) {
-        e.preventDefault();
-        e.stopPropagation();
-        ac.makeSelection();
-      } else {
-        if (ac) ac.cancel();
-        this.handleSubmit();
-      }
-    },
-    searchEscHandler (e) {
-      const ac = this._getActiveAutocomplete();
-      if (ac && ac.searchActive) {
-        e.preventDefault();
-        e.stopPropagation();
-        ac.cancel();
-      }
-    },
-    selectedAutocomplete (newText, newCaret) {
-      this.search = newText;
-      this.$nextTick(() => {
-        if (this.textbox) {
-          this.textbox.setSelectionRange(newCaret, newCaret);
-          this.textbox.focus();
-        }
-      });
-    },
     handleSubmit () {
       if (!this.addNew) return;
       const { search } = this;
-      // If there is a existing tag
-      if (this.hasExactMatch) {
-        this.selectItem(this.availableToSelect[0]);
-        this.search = '';
-      } else {
-        // Creating a new tag as there is no existing tag present
-        this.$emit('addNew', search);
-        this.itemsAdded.push(search.toLowerCase());
-        this.search = '';
-      }
+      this.$emit('addNew', search);
+
+      this.search = '';
     },
   },
 };

website/client/src/components/tasks/task.vue

@@ -1177,16 +1177,9 @@ export default {
     moveToBottom () {
       this.$emit('moveTo', this.task, 'bottom');
     },
-    async destroy () {
+    destroy () {
       const type = this.$t(this.task.type);
-      const confirmed = await new Promise(resolve => {
-        this.$root.$emit('habitica:delete-task-confirm', {
-          message: this.$t('sureDeleteType', { type }),
-          taskType: type,
-          resolve,
-        });
-      });
-      if (!confirmed) return;
+      if (!window.confirm(this.$t('sureDeleteType', { type }))) return; // eslint-disable-line no-alert
       this.destroyTask(this.task);
       this.$emit('taskDestroyed', this.task);
     },

website/client/src/components/tasks/taskModal.vue

@@ -70,13 +70,6 @@
           spellcheck="true"
           :disabled="challengeAccessRequired"
           :placeholder="$t('addATitle')"
-          @focus="setActiveField('title')"
-          @keydown="autoCompleteMixinUpdateCarretPosition"
-          @keydown.tab="autoCompleteMixinHandleTab($event)"
-          @keydown.up="autoCompleteMixinSelectPreviousAutocomplete($event)"
-          @keydown.down="autoCompleteMixinSelectNextAutocomplete($event)"
-          @keypress.enter="titleEnterHandler($event)"
-          @keydown.esc="autoCompleteMixinHandleEscape($event)"
         >
       </div>
       <div
@@ -99,27 +92,11 @@
           </small>
         </div>
         <textarea
-          ref="notesTextarea"
           v-model="task.notes"
           class="form-control input-notes"
           :class="cssClass('input')"
           :placeholder="$t('addNotes')"
-          @focus="setActiveField('notes')"
-          @keydown="autoCompleteMixinUpdateCarretPosition"
-          @keydown.tab="autoCompleteMixinHandleTab($event)"
-          @keydown.up="autoCompleteMixinSelectPreviousAutocomplete($event)"
-          @keydown.down="autoCompleteMixinSelectNextAutocomplete($event)"
-          @keypress.enter="autoCompleteMixinSelectAutocomplete($event)"
-          @keydown.esc="autoCompleteMixinHandleEscape($event)"
         ></textarea>
-        <emoji-auto-complete
-          ref="emojiAutocomplete"
-          :text="activeFieldText"
-          :textbox="textbox"
-          :coords="mixinData.autoComplete.coords"
-          :caret-position="mixinData.autoComplete.caretPosition"
-          @select="selectedAutocomplete"
-        />
       </div>
     </div>
     <div
@@ -173,14 +150,14 @@
           <button
             type="button"
             class="habit-option-container no-transition
-            d-flex flex-column justify-content-center align-items-center"
+              d-flex flex-column justify-content-center align-items-center"
             :class="!task.up ? cssClass('habit-control-disabled') : ''"
             :disabled="challengeAccessRequired"
             @click="toggleUpDirection()"
           >
             <div
               class="habit-option-button no-transition
-              d-flex justify-content-center align-items-center mb-2"
+                d-flex justify-content-center align-items-center mb-2"
               :class="task.up ? cssClass('bg') : ''"
             >
               <div
@@ -199,14 +176,14 @@
           <button
             type="button"
             class="habit-option-container no-transition
-            d-flex flex-column justify-content-center align-items-center"
+              d-flex flex-column justify-content-center align-items-center"
             :class="!task.down ? cssClass('habit-control-disabled') : ''"
             :disabled="challengeAccessRequired"
             @click="toggleDownDirection()"
           >
             <div
               class="habit-option-button no-transition
-              d-flex justify-content-center align-items-center mb-2"
+                d-flex justify-content-center align-items-center mb-2"
               :class="task.down ? cssClass('bg') : ''"
             >
               <div
@@ -382,12 +359,6 @@
             </div>
           </div>
         </div>
-        <p
-          v-if="task.type === 'daily' && schedulingSummary"
-          class="scheduling-summary text-center mt-2 mb-0"
-        >
-          {{ schedulingSummary }}
-        </p>
         <div
           v-if="!groupId"
           class="tags-select option mt-3"
@@ -411,45 +382,6 @@
             </div>
           </div>
         </div>
-        <div
-          v-if="showStatAssignment"
-          class="stat-assignment option mt-3"
-        >
-          <div class="form-group row">
-            <label
-              v-once
-              class="col-12 mb-1"
-            >{{ $t('assignedStat') }}</label>
-            <div class="col-12">
-              <div class="stat-dropdown-container">
-                <select-list
-                  :items="statOptions"
-                  :value="task.attribute"
-                  key-prop="key"
-                  active-key-prop="key"
-                  @select="task.attribute = $event.key"
-                >
-                  <template #item="{ item, button }">
-                    <div class="stat-option-content">
-                      <span
-                        class="stat-option-title"
-                        :class="item.key"
-                      >
-                        {{ $t(item.label) }}
-                      </span>
-                      <span
-                        v-if="!button"
-                        class="stat-option-description"
-                      >
-                        {{ $t(item.description) }}
-                      </span>
-                    </div>
-                  </template>
-                </select-list>
-              </div>
-            </div>
-          </div>
-        </div>
         <div
           v-if="task.type === 'habit' && !groupId"
           class="option mt-3"
@@ -659,7 +591,7 @@
         >
           <button
             class="btn btn-primary btn-footer
-          d-flex align-items-center justify-content-center"
+            d-flex align-items-center justify-content-center"
             :class="{'btn-disabled': !canSave}"
             type="button"
             @click="submit()"
@@ -741,7 +673,6 @@
     }
 
     .task-modal-header {
-      position: relative;
       color: $white;
       width: 100%;
       border-top-left-radius: 8px;
@@ -980,87 +911,6 @@
   .streak-addon path {
     fill: $gray-200;
   }
-
-  .stat-dropdown-container {
-    .select-list {
-      .selectListItem {
-        margin-bottom: 0;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-
-      .selectListItem .dropdown-item {
-        padding: 8px 16px !important;
-        height: auto !important;
-        white-space: normal;
-        word-wrap: break-word;
-
-        &:hover,
-        &:focus {
-          background-color: rgba($purple-600, 0.25) !important;
-        }
-      }
-
-      .dropdown-toggle {
-        display: flex;
-        align-items: center;
-
-        .stat-option-content {
-          display: flex;
-          align-items: center;
-
-          .stat-option-title {
-            font-weight: normal;
-            color: $gray-50;
-            margin-bottom: 0;
-          }
-        }
-      }
-    }
-
-    .stat-option-content {
-      display: block;
-      width: 100%;
-
-      .stat-option-title {
-        display: block;
-        font-family: Roboto;
-        font-weight: 700;
-        font-size: 14px;
-        line-height: 1.71;
-        text-transform: capitalize;
-        margin-bottom: 4px;
-
-        &.str {
-          color: $maroon-100;
-        }
-
-        &.int {
-          color: $blue-50;
-        }
-
-        &.con {
-          color: $yellow-5;
-        }
-
-        &.per {
-          color: $purple-300;
-        }
-      }
-
-      .stat-option-description {
-        display: block;
-        font-family: Roboto;
-        font-weight: 400;
-        font-size: 12px;
-        line-height: 16px;
-        color: $gray-100;
-        margin-bottom: 0;
-      }
-    }
-  }
 </style>
 
 <style lang="scss" scoped>
@@ -1071,12 +921,6 @@
     height: 1rem;
   }
 
-  .scheduling-summary {
-    font-size: 12px;
-    line-height: 1.33;
-    color: $gray-200;
-  }
-
   label {
     display: inline-flex;
     align-items: center;
@@ -1179,6 +1023,7 @@
   .input-group-outer.disabled .input-group-text {
     color: $gray-200;
   }
+
 </style>
 
 <script>
@@ -1193,11 +1038,8 @@ import SelectMulti from './modal-controls/selectMulti';
 import selectDifficulty from '@/components/tasks/modal-controls/selectDifficulty';
 import selectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
 import lockableLabel from '@/components/tasks/modal-controls/lockableLabel';
-import selectList from '@/components/ui/selectList';
 
 import syncTask from '../../mixins/syncTask';
-import emojiAutoComplete from '@/components/chat/emojiAutoComplete';
-import { autoCompleteHelperMixin } from '@/mixins/autoCompleteHelper';
 
 import positiveIcon from '@/assets/svg/positive.svg?raw';
 import negativeIcon from '@/assets/svg/negative.svg?raw';
@@ -1219,19 +1061,15 @@ export default {
     selectTranslatedArray,
     toggleCheckbox,
     lockableLabel,
-    selectList,
-    emojiAutoComplete,
   },
   directives: {
     markdown: markdownDirective,
   },
-  mixins: [syncTask, autoCompleteHelperMixin],
+  mixins: [syncTask],
   // purpose is either create or edit, task is the task created or edited
   props: ['task', 'purpose', 'challengeId', 'groupId'],
   data () {
     return {
-      textbox: null,
-      activeField: 'title',
       showAssignedSelect: false,
       newChecklistItem: null,
       icons: Object.freeze({
@@ -1256,12 +1094,6 @@ export default {
         con: 'constitution',
         per: 'perception',
       },
-      statOptions: [
-        { key: 'str', label: 'strength', description: 'strTaskText' },
-        { key: 'int', label: 'intelligence', description: 'intTaskText' },
-        { key: 'con', label: 'constitution', description: 'conTaskText' },
-        { key: 'per', label: 'perception', description: 'perTaskText' },
-      ],
       calendarHighlights: { dates: [new Date()] },
     };
   },
@@ -1338,84 +1170,6 @@ export default {
       }
       return null;
     },
-    schedulingSummary () {
-      if (!this.task || this.task.type !== 'daily') return '';
-      const { task } = this;
-      const everyXValue = +task.everyX;
-
-      let interval;
-      if (task.frequency === 'daily') {
-        interval = everyXValue === 1 ? this.$t('everyDay') : `${this.$t('every')} ${everyXValue} ${this.$t('days')}`;
-      } else if (task.frequency === 'weekly') {
-        interval = everyXValue === 1 ? this.$t('everyWeek') : `${this.$t('every')} ${everyXValue} ${this.$t('weeks')}`;
-      } else if (task.frequency === 'monthly') {
-        interval = everyXValue === 1 ? this.$t('everyMonth') : this.$t('everyXMonths', { count: everyXValue });
-      } else if (task.frequency === 'yearly') {
-        interval = everyXValue === 1 ? this.$t('everyYear') : `${this.$t('every')} ${everyXValue} ${this.$t('years')}`;
-      } else {
-        return '';
-      }
-
-      let details = '';
-      if (task.frequency === 'weekly') {
-        const dayNames = {
-          su: 'Sunday',
-          m: 'Monday',
-          t: 'Tuesday',
-          w: 'Wednesday',
-          th: 'Thursday',
-          f: 'Friday',
-          s: 'Saturday',
-        };
-        const activeDays = Object.keys(task.repeat || {}).filter(d => task.repeat[d]);
-        if (activeDays.length > 0) {
-          details = ` on ${activeDays.map(d => dayNames[d]).join(', ')}`;
-        }
-      } else if (task.frequency === 'monthly' && task.startDate) {
-        const dayOfMonth = moment(task.startDate).date();
-        if (task.weeksOfMonth && task.weeksOfMonth.length > 0) {
-          const weekNum = task.weeksOfMonth[0] + 1;
-          const weekStr = String(weekNum);
-          const lastDigit = weekStr.slice(-1);
-          let suffix = 'th';
-          if (lastDigit === '1' && weekStr !== '11') suffix = 'st';
-          if (lastDigit === '2' && weekStr !== '12') suffix = 'nd';
-          if (lastDigit === '3' && weekStr !== '13') suffix = 'rd';
-          const dayName = moment(task.startDate).format('dddd');
-          details = ` on the ${weekNum}${suffix} ${dayName} of the month`;
-        } else if (task.daysOfMonth && task.daysOfMonth.length > 0) {
-          const dom = task.daysOfMonth[0];
-          const domStr = String(dom);
-          const lastDigit = domStr.slice(-1);
-          let suffix = 'th';
-          if (lastDigit === '1' && domStr !== '11') suffix = 'st';
-          if (lastDigit === '2' && domStr !== '12') suffix = 'nd';
-          if (lastDigit === '3' && domStr !== '13') suffix = 'rd';
-          details = ` on the ${dom}${suffix}`;
-        } else {
-          const domStr = String(dayOfMonth);
-          const lastDigit = domStr.slice(-1);
-          let suffix = 'th';
-          if (lastDigit === '1' && domStr !== '11') suffix = 'st';
-          if (lastDigit === '2' && domStr !== '12') suffix = 'nd';
-          if (lastDigit === '3' && domStr !== '13') suffix = 'rd';
-          details = ` on the ${dayOfMonth}${suffix}`;
-        }
-      } else if (task.frequency === 'yearly' && task.startDate) {
-        details = ` on ${moment(task.startDate).format('MMMM Do')}`;
-      }
-
-      let summary = `${this.$t('repeats')} ${interval}${details}`;
-
-      if (task.frequency === 'monthly'
-        && task.weeksOfMonth && task.weeksOfMonth.length > 0
-        && task.weeksOfMonth[0] === 4) {
-        const dayName = moment(task.startDate).format('dddd');
-        summary += `. ${this.$t('fifthWeekWarning', { day: dayName })}`;
-      }
-
-      return summary;
-    },
     repeatsOn: {
       get () {
         let repeatsOn = 'dayOfMonth';
@@ -1433,16 +1187,6 @@ export default {
     selectedTags () {
       return this.getTagsFor(this.task);
     },
-    activeFieldText () {
-      if (!this.task) return '';
-      return this.activeField === 'title' ? (this.task.text || '') : (this.task.notes || '');
-    },
-    showStatAssignment () {
-      return this.task.type !== 'reward'
-        && !this.groupId
-        && this.user.preferences.automaticAllocation === true
-        && this.user.preferences.allocationMode === 'taskbased';
-    },
   },
   watch: {
     task () {
@@ -1561,16 +1305,9 @@ export default {
       }
       this.$root.$emit('bv::hide::modal', 'task-modal');
     },
-    async destroy () {
+    destroy () {
       const type = this.$t(this.task.type);
-      const confirmed = await new Promise(resolve => {
-        this.$root.$emit('habitica:delete-task-confirm', {
-          message: this.$t('sureDeleteType', { type }),
-          taskType: type,
-          resolve,
-        });
-      });
-      if (!confirmed) return;
+      if (!window.confirm(this.$t('sureDeleteType', { type }))) return; // eslint-disable-line no-alert
       this.destroyTask(this.task);
       this.$emit('taskDestroyed', this.task);
       this.$root.$emit('bv::hide::modal', 'task-modal');
@@ -1612,35 +1349,6 @@ export default {
     },
     focusInput () {
       this.$refs.inputToFocus.focus();
-      this.setActiveField('title');
-    },
-    setActiveField (field) {
-      this.activeField = field;
-      if (field === 'title') {
-        this.textbox = this.$refs.inputToFocus;
-      } else {
-        this.textbox = this.$refs.notesTextarea;
-      }
-    },
-    titleEnterHandler (e) {
-      const ac = this._getActiveAutocomplete();
-      if (ac && ac.selected !== null) {
-        e.preventDefault();
-        ac.makeSelection();
-      } else if (ac) {
-        ac.cancel();
-      }
-    },
-    selectedAutocomplete (newText, newCaret) {
-      if (this.activeField === 'title') {
-        this.task.text = newText;
-      } else {
-        this.task.notes = newText;
-      }
-      this.$nextTick(() => {
-        this.textbox.setSelectionRange(newCaret, newCaret);
-        this.textbox.focus();
-      });
     },
     async addTag (name) {
       const tagResult = await this.createTag({ name });

website/client/src/components/tasks/taskSummary.vue

@@ -222,22 +222,14 @@ export default {
       return usernames;
     },
     summarySentence () {
-      let fifthWeekWarning = '';
-      if (this.task.type === 'daily' && this.task.frequency === 'monthly'
-        && this.task.weeksOfMonth && this.task.weeksOfMonth.length > 0
-        && this.task.weeksOfMonth[0] === 4) {
-        const activeDays = keys(pickBy(this.task.repeat, value => value === true));
-        const dayName = this.expandDayString[activeDays[0]];
-        fifthWeekWarning = ` ${this.$t('fifthWeekWarning', { day: dayName })}`;
-      }
       if (this.task.type === 'daily' && moment().isBefore(this.task.startDate)) {
         return `This is ${this.formattedDifficulty(this.task.priority)} task that will repeat
         ${this.formattedRepeatInterval(this.task.frequency, this.task.everyX)}${this.formattedDays(this.task.frequency, this.task.repeat, this.task.daysOfMonth, this.task.weeksOfMonth, this.task.startDate)}
-        starting on <strong>${moment(this.task.startDate).format('MM/DD/YYYY')}</strong>.${fifthWeekWarning}`;
+        starting on <strong>${moment(this.task.startDate).format('MM/DD/YYYY')}</strong>.`;
       }
       if (this.task.type === 'daily') {
         return `This is ${this.formattedDifficulty(this.task.priority)} task that repeats
-        ${this.formattedRepeatInterval(this.task.frequency, this.task.everyX)}${this.formattedDays(this.task.frequency, this.task.repeat, this.task.daysOfMonth, this.task.weeksOfMonth, this.task.startDate)}.${fifthWeekWarning}`;
+        ${this.formattedRepeatInterval(this.task.frequency, this.task.everyX)}${this.formattedDays(this.task.frequency, this.task.repeat, this.task.daysOfMonth, this.task.weeksOfMonth, this.task.startDate)}.`;
       }
       if (this.task.date) {
         return `This is ${this.formattedDifficulty(this.task.priority)} task that is due <strong>${moment(this.task.date).format('MM/DD/YYYY')}.`;
@@ -295,14 +287,25 @@ export default {
             });
             dayStringArray.push('</strong>');
           } else if (weeksOfMonth.length > 0) {
-            const weekNum = weeksOfMonth[0] + 1;
-            const weekNumStr = String(weekNum);
-            const lastDigit = weekNumStr.slice(-1);
-            let ordinalSuffix = 'th';
-            if (lastDigit === '1' && weekNumStr !== '11') ordinalSuffix = 'st';
-            if (lastDigit === '2' && weekNumStr !== '12') ordinalSuffix = 'nd';
-            if (lastDigit === '3' && weekNumStr !== '13') ordinalSuffix = 'rd';
-            dayStringArray.push(`${weekNum}${ordinalSuffix}`);
+            switch (weeksOfMonth[0]) {
+              case 0:
+                dayStringArray.push('first');
+                break;
+              case 1:
+                dayStringArray.push('second');
+                break;
+              case 2:
+                dayStringArray.push('third');
+                break;
+              case 3:
+                dayStringArray.push('fourth');
+                break;
+              case 4:
+                dayStringArray.push('fifth');
+                break;
+              default:
+                break;
+            }
             activeDays = keys(pickBy(repeat, value => value === true));
             dayStringArray.push(` ${this.expandDayString[activeDays[0]]} of the month</strong>`);
           }
@@ -340,8 +343,9 @@ export default {
           if (numericX === 2) return '<strong>every other week</strong>';
           return `<strong>every ${numericX} weeks</strong>`;
         case 'monthly':
-          if (numericX === 1) return `<strong>${this.$t('everyMonth')}</strong>`;
-          return `<strong>${this.$t('everyXMonths', { count: numericX })}</strong>`;
+          if (numericX === 1) return '<strong>every month</strong>';
+          if (numericX === 2) return '<strong>every other month</strong>';
+          return `<strong>every ${numericX} months</strong>`;
         case 'yearly':
           if (numericX === 1) return '<strong>every year</strong>';
           return `<strong>every ${everyX} years</strong>`;

website/client/src/components/tasks/user.vue

@@ -80,17 +80,9 @@
                             v-html="icons.drag"
                           ></div>
                           <input
-                            :ref="'tagInput-' + tagIndex"
                             v-model="tag.name"
                             class="tag-edit-input inline-edit-input form-control"
                             type="text"
-                            @focus="setActiveTag(tagIndex)"
-                            @keydown="autoCompleteMixinUpdateCarretPosition"
-                            @keydown.tab="autoCompleteMixinHandleTab($event)"
-                            @keydown.up="autoCompleteMixinSelectPreviousAutocomplete($event)"
-                            @keydown.down="autoCompleteMixinSelectNextAutocomplete($event)"
-                            @keypress.enter="autoCompleteMixinSelectAutocomplete($event)"
-                            @keydown.esc="autoCompleteMixinHandleEscape($event)"
                           >
                           <div
                             class="input-group-append"
@@ -108,18 +100,11 @@
                         class="col-6 dragSpace"
                       >
                         <input
-                          ref="newTagInput"
                           v-model="newTag"
                           class="new-tag-item edit-tag-item inline-edit-input form-control"
                           type="text"
                           :placeholder="$t('newTag')"
-                          @focus="setActiveTag(-1)"
-                          @keydown="autoCompleteMixinUpdateCarretPosition"
-                          @keydown.tab="autoCompleteMixinHandleTab($event)"
-                          @keydown.up="autoCompleteMixinSelectPreviousAutocomplete($event)"
-                          @keydown.down="autoCompleteMixinSelectNextAutocomplete($event)"
-                          @keypress.enter="newTagEnterHandler($event, tagsType.key)"
-                          @keydown.esc="autoCompleteMixinHandleEscape($event)"
+                          @keydown.enter="addTag($event, tagsType.key)"
                         >
                       </div>
                     </draggable>
@@ -149,15 +134,6 @@
                 </div>
               </div>
             </div>
-            <emoji-auto-complete
-              v-if="editingTags"
-              ref="emojiAutocomplete"
-              :text="activeTagText"
-              :textbox="textbox"
-              :coords="mixinData.autoComplete.coords"
-              :caret-position="mixinData.autoComplete.caretPosition"
-              @select="selectedTagAutocomplete"
-            />
             <div class="filter-panel-footer clearfix">
               <template v-if="editingTags === true">
                 <div class="text-center">
@@ -429,8 +405,6 @@ import dragIcon from '@/assets/svg/drag_indicator.svg?raw';
 
 import { mapState, mapActions } from '@/libs/store';
 import brokenTaskModal from './brokenTaskModal';
-import emojiAutoComplete from '@/components/chat/emojiAutoComplete';
-import { autoCompleteHelperMixin } from '@/mixins/autoCompleteHelper';
 
 export default {
   components: {
@@ -440,12 +414,10 @@ export default {
     spells,
     brokenTaskModal,
     draggable,
-    emojiAutoComplete,
   },
   directives: {
     markdown,
   },
-  mixins: [autoCompleteHelperMixin],
   data () {
     return {
       columns: ['habit', 'daily', 'todo', 'reward'],
@@ -473,19 +445,10 @@ export default {
       newTag: null,
       editingTask: null,
       creatingTask: null,
-      textbox: null,
-      activeTagIndex: -1,
     };
   },
   computed: {
     ...mapState({ user: 'user.data' }),
-    activeTagText () {
-      if (this.activeTagIndex === -1) {
-        return this.newTag || '';
-      }
-      const tag = this.tagsSnap.tags[this.activeTagIndex];
-      return tag ? tag.name || '' : '';
-    },
     tagsByType () {
       const userTags = this.user.tags;
       const tagsByType = {
@@ -551,43 +514,6 @@ export default {
       this.tagsSnap[key].push({ id: uuid(), name: this.newTag });
       this.newTag = null;
     },
-    setActiveTag (index) {
-      this.activeTagIndex = index;
-      if (index === -1) {
-        const refArr = this.$refs.newTagInput;
-        this.textbox = Array.isArray(refArr) ? refArr[0] : refArr;
-      } else {
-        const refArr = this.$refs[`tagInput-${index}`];
-        if (!refArr) {
-          this.textbox = null;
-        } else {
-          this.textbox = Array.isArray(refArr) ? refArr[0] : refArr;
-        }
-      }
-    },
-    newTagEnterHandler (e, key) {
-      const ac = this._getActiveAutocomplete();
-      if (ac && ac.selected !== null) {
-        e.preventDefault();
-        ac.makeSelection();
-      } else {
-        if (ac) ac.cancel();
-        this.addTag(e, key);
-      }
-    },
-    selectedTagAutocomplete (newText, newCaret) {
-      if (this.activeTagIndex === -1) {
-        this.newTag = newText;
-      } else {
-        this.tagsSnap.tags[this.activeTagIndex].name = newText;
-      }
-      this.$nextTick(() => {
-        if (this.textbox) {
-          this.textbox.setSelectionRange(newCaret, newCaret);
-          this.textbox.focus();
-        }
-      });
-    },
     removeTag (index, key) {
       const tagId = this.tagsSnap[key][index].id;
       const indexInSelected = this.selectedTags.indexOf(tagId);