update group-plans info card styles

position dropdown below text

.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,12 @@ 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: [4.2]
     steps:
     - uses: actions/checkout@v4
       with:
@@ -144,11 +143,14 @@ 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.3.0
-      with:
-        mongodb-version: ${{ matrix.mongodb-version }}
-        mongodb-replica-set: rs
+
+    - name: Start MongoDB 7.0 Replica Set
+      run: |
+        docker run -d --name mongodb -p 27017:27017 mongo:7.0 --replSet rs
+        sleep 5
+        docker exec mongodb mongosh --quiet --eval "rs.initiate({_id: 'rs', members: [{_id: 0, host: 'localhost:27017'}]})"
+        sleep 3
+
     - run: sudo apt update
     - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
@@ -158,15 +160,16 @@ 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: [4.2]
     steps:
     - uses: actions/checkout@v4
       with:
@@ -175,11 +178,13 @@ 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.3.0
-      with:
-        mongodb-version: ${{ matrix.mongodb-version }}
-        mongodb-replica-set: rs
+    - name: Start MongoDB 7.0 Replica Set
+      run: |
+        docker run -d --name mongodb -p 27017:27017 mongo:7.0 --replSet rs
+        sleep 5
+        docker exec mongodb mongosh --quiet --eval "rs.initiate({_id: 'rs', members: [{_id: 0, host: 'localhost:27017'}]})"
+        sleep 3
+
     - run: sudo apt update
     - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
@@ -189,15 +194,17 @@ 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: [4.2]
+
     steps:
     - uses: actions/checkout@v4
       with:
@@ -206,11 +213,13 @@ 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.3.0
-      with:
-        mongodb-version: ${{ matrix.mongodb-version }}
-        mongodb-replica-set: rs
+    - name: Start MongoDB 7.0 Replica Set
+      run: |
+        docker run -d --name mongodb -p 27017:27017 mongo:7.0 --replSet rs
+        sleep 5
+        docker exec mongodb mongosh --quiet --eval "rs.initiate({_id: 'rs', members: [{_id: 0, host: 'localhost:27017'}]})"
+        sleep 3
+
     - run: sudo apt update
     - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
@@ -220,6 +229,7 @@ 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-data*
+/mongodb-*
 /.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",
+  "NODE_DB_URI": "mongodb://localhost:27017/habitica-dev?replicaSet=rs&directConnection=true&readPreference=secondary",
   "NODE_ENV": "development",
   "PATH": "bin:node_modules/.bin:/usr/local/bin:/usr/bin:/bin",
   "PAYPAL_BILLING_PLANS_basic_12mo": "basic_12mo",
@@ -90,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",
+  "TEST_DB_URI": "mongodb://localhost:27017/habitica-test?replicaSet=rs&directConnection=true&readPreference=secondary",
   "TIME_TRAVEL_ENABLED": "false",
   "TRUSTED_DOMAINS": "localhost,https://habitica.com",
   "WEB_CONCURRENCY": 1

docker-compose.dev.yml

@@ -1,53 +0,0 @@
-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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,23 @@
+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,35 +1,56 @@
-version: "3"
 services:
-
   client:
-    build: .
-    networks:
-      - habitica
-    environment:
-      - BASE_URL=http://server:3000
-    ports:
-        - "8080:8080"
-    command: ["npm", "run", "client:dev"]
+    build:
+      context: .
+      dockerfile: ./Dockerfile-Dev
+    command: ["npm", "run", "client:dev:docker"]
     depends_on:
       - server
-
-  server:
-    build: .
-    ports:
-      - "3000:3000"
+    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"]
+    depends_on:
+      mongo:
+        condition: service_healthy
     environment:
       - NODE_DB_URI=mongodb://mongo/habitrpg
-    depends_on:
-      - mongo
-
-  mongo:
-    image: mongo:3.6
-    ports:
-      - "27017:27017"
     networks:
       - habitica
+    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"
+    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:

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'; // eslint-disable-line import/no-extraneous-dependencies
+import spawn from 'cross-spawn';
 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/');
+const MONGO_PATH = path.join(__dirname, '/../mongodb-data-docker/');
 
 gulp.task('build:prepare-mongo', async () => {
   if (fs.existsSync(MONGO_PATH)) {
@@ -51,29 +51,32 @@ 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 runRsProcess = spawn('run-rs', ['-v', '4.1.1', '-l', 'ubuntu1804', '--dbpath', 'mongodb-data', '--number', '1', '--quiet']);
+  const dockerMongoProcess = spawn('npm', ['run', 'docker:mongo:dev']);
 
-  for await (const chunk of runRsProcess.stdout) {
+  let manuallyStopped = false;
+
+  for await (const chunk of dockerMongoProcess.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('Started replica set')) {
+    if (stringChunk.includes('mongod startup complete')) {
       console.log('MongoDB setup correctly.'); // eslint-disable-line no-console
-      runRsProcess.kill();
+      dockerMongoProcess.kill();
+      manuallyStopped = true;
     }
   }
 
   let error = '';
-  for await (const chunk of runRsProcess.stderr) {
+  for await (const chunk of dockerMongoProcess.stderr) {
     const stringChunk = chunk.toString();
     error += stringChunk;
   }
 
   const exitCode = await new Promise(resolve => {
-    runRsProcess.on('close', resolve);
+    dockerMongoProcess.on('close', resolve);
   });
 
-  if (exitCode || error.length > 0) {
+  if (!manuallyStopped && (exitCode || error.length > 0)) {
     // remove any leftover files
     clean.sync(MONGO_PATH);
 

gulp/gulp-cache.js

@@ -6,9 +6,21 @@ 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 } = require('../website/server/libs/content'); // eslint-disable-line global-require
+  const {
+    CONTENT_CACHE_PATH,
+    getLocalizedContentResponse,
+    IOS_FILTER,
+    ANDROID_FILTER,
+    buildFilterObject,
+    hashForFilter,
+  } = 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 {
@@ -26,33 +38,56 @@ gulp.task('cache:content', done => {
         getLocalizedContentResponse(langCode),
         'utf8',
       );
-    });
-    done();
-  } catch (err) {
-    done(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, 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 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}${languageCode}.js`,
-        geti18nBrowserScript(languageCode),
+        `${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) {
+    done(err);
+  }
+});
+
+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 { 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 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),
         'utf8',
       );
     });

gulp/gulp-tests.js

@@ -53,6 +53,11 @@ 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],
+        $gt: users[users.length - 1]._id,
       };
     }
 

package.json

@@ -1,13 +1,12 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "5.41.2",
+  "version": "5.44.2",
   "main": "./website/server/index.js",
   "dependencies": {
     "@babel/core": "^7.22.10",
     "@babel/preset-env": "^7.22.10",
     "@babel/register": "^7.22.15",
-    "@google-analytics/data": "^4.12.1",
     "@google-cloud/trace-agent": "^7.1.2",
     "@parse/node-apn": "^5.2.3",
     "@slack/webhook": "^6.1.0",
@@ -40,7 +39,8 @@
     "gulp-filter": "^7.0.0",
     "gulp-imagemin": "^7.1.0",
     "gulp.spritesmith": "^6.13.0",
-    "habitica-markdown": "^3.0.0",
+    "habitica-markdown": "^4.0.0",
+    "heapdump": "^0.3.15",
     "helmet": "^4.6.0",
     "in-app-purchase": "^1.11.3",
     "js2xmlparser": "^5.0.0",
@@ -49,10 +49,12 @@
     "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",
@@ -101,13 +103,16 @@
     "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",
-    "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",
+    "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",
     "postinstall": "git config --global url.\"https://\".insteadOf git:// && gulp build && cd website/client && npm install",
     "apidoc": "gulp apidoc",
     "heroku-postbuild": ".heroku/report_deploy.sh"
@@ -123,7 +128,6 @@
     "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/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 } from '../../../../../website/common/script/constants';
+import { MAX_MESSAGE_LENGTH, CHAT_FLAG_FROM_SHADOW_MUTE } from '../../../../../website/common/script/constants';
 import * as email from '../../../../../website/server/libs/email';
 
 describe('POST /chat', () => {
@@ -80,17 +80,20 @@ describe('POST /chat', () => {
       member.updateOne({ 'flags.chatRevoked': false });
     });
 
-    it('does not error when chat privileges are revoked when sending a message to a private guild', async () => {
+    it('errors when chat privileges are revoked when sending a message to a private guild', async () => {
       await member.updateOne({
         'flags.chatRevoked': true,
       });
 
-      const message = await member.post(`/groups/${groupWithChat._id}/chat`, { message: testMessage });
-
-      expect(message.message.id).to.exist;
+      await expect(member.post(`/groups/${groupWithChat._id}/chat`, { message: testMessage }))
+        .to.eventually.be.rejected.and.eql({
+          code: 401,
+          error: 'NotAuthorized',
+          message: t('chatPrivilegesRevoked'),
+        });
     });
 
-    it('does not error when chat privileges are revoked when sending a message to a party', async () => {
+    it('errors when chat privileges are revoked when sending a message to a party', async () => {
       const { group, members } = await createAndPopulateGroup({
         groupDetails: {
           name: 'Party',
@@ -106,9 +109,12 @@ describe('POST /chat', () => {
         'auth.timestamps.created': new Date('2022-01-01'),
       });
 
-      const message = await privatePartyMemberWithChatsRevoked.post(`/groups/${group._id}/chat`, { message: testMessage });
-
-      expect(message.message.id).to.exist;
+      await expect(privatePartyMemberWithChatsRevoked.post(`/groups/${group._id}/chat`, { message: testMessage }))
+        .to.eventually.be.rejected.and.eql({
+          code: 401,
+          error: 'NotAuthorized',
+          message: t('chatPrivilegesRevoked'),
+        });
     });
   });
 
@@ -123,7 +129,7 @@ describe('POST /chat', () => {
       member.updateOne({ 'flags.chatShadowMuted': false });
     });
 
-    it('creates a chat with zero flagCount when sending a message to a private guild', async () => {
+    it('creates a chat with flagCount set when sending a message to a private guild', async () => {
       await member.updateOne({
         'flags.chatShadowMuted': true,
       });
@@ -131,10 +137,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(0);
+      expect(message.message.flagCount).to.eql(CHAT_FLAG_FROM_SHADOW_MUTE);
     });
 
-    it('creates a chat with zero flagCount when sending a message to a party', async () => {
+    it('creates a chat with flagCount set when sending a message to a party', async () => {
       const { group, members } = await createAndPopulateGroup({
         groupDetails: {
           name: 'Party',
@@ -153,7 +159,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(0);
+      expect(message.message.flagCount).to.eql(CHAT_FLAG_FROM_SHADOW_MUTE);
     });
   });
 

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('img class="habitica-emoji"');
+    expect(res).to.include('😄');
     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('img class="habitica-emoji"');
+    const emojiPosition = res.indexOf('😄');
     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,6 +61,24 @@ 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();
 
@@ -209,6 +227,24 @@ 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();
 
@@ -281,6 +317,19 @@ 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' }],
@@ -405,6 +454,19 @@ 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 < 10; i += 1) {
+    for (let i = 0; i < 50; 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 to user has blocked the sender', async () => {
+  it('returns error when recipient 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 to user', async () => {
+  it('returns error when sender has blocked recipient', 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 to user has opted out of messaging', async () => {
+  it('returns error when recipient 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 sender has blocked the admin', async () => {
+  it('allows admin to send when recipient 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 to user has opted out of messaging', async () => {
+  it('allows admin to send when recipient has opted out of messaging', async () => {
     userToSendMessage = await generateUser({
       'permissions.moderator': true,
     });
@@ -229,4 +229,58 @@ 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-login-local.test.js

@@ -44,7 +44,7 @@ describe('POST /user/auth/local/login', () => {
     })).to.eventually.be.rejected.and.eql({
       code: 401,
       error: 'NotAuthorized',
-      message: t('accountSuspended', { communityManagerEmail: nconf.get('EMAILS_COMMUNITY_MANAGER_EMAIL'), userId: user._id }),
+      message: t('accountSuspended', { communityManagerEmail: nconf.get('EMAILS_COMMUNITY_MANAGER_EMAIL'), userId: user._id, username: user.auth.local.username }),
     });
   });
 

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

@@ -65,6 +65,52 @@ 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 < 10; i += 1) {
+    for (let i = 0; i < 50; i += 1) {
       promises.push(user.post('/members/send-private-message', {
         toUserId: user.id,
         message: 'fourth',

test/common/libs/habiticaMarkdown.test.js

@@ -0,0 +1,67 @@
+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/unlock.test.js

@@ -20,6 +20,9 @@ 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'));
   });
 
@@ -272,6 +275,7 @@ 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 } });
@@ -282,11 +286,12 @@ 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 } });
@@ -297,6 +302,7 @@ 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 () => {
@@ -334,6 +340,7 @@ 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 },
     });
@@ -344,6 +351,7 @@ 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/translator.js

@@ -1,12 +1,7 @@
-import { STRING_ERROR_MSG, STRING_DOES_NOT_EXIST_MSG } from '../helpers/content.helper';
+import { 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 { translations } from '../../website/server/libs/i18n';
+import { contentTranslations } from '../../website/server/libs/i18n';
 
-i18n.translations = translations;
+i18n.translations = contentTranslations;
 
 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,6 +21,7 @@ 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/browser-script' vite-ignore></script>
+    <script type='text/javascript' src='/api/v4/i18n/core' vite-ignore></script>
   </body>
 </html>

website/client/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "serve": "vite",
+    "serve:docker": "npx vite --host 0.0.0.0",
     "build": "vite build",
     "preview": "vite preview",
     "test:unit": "vitest run",
@@ -27,13 +28,13 @@
     "eslint-config-habitrpg": "6.2.0",
     "eslint-plugin-mocha": "5.3.0",
     "eslint-plugin-vue": "7.20.0",
-    "ga-gtag": "^1.2.0",
-    "habitica-markdown": "^3.0.0",
+    "habitica-markdown": "^4.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

@@ -203,6 +203,9 @@ export default {
 
       return response;
     }, error => { // Set up Error interceptors
+      if (!error.response) {
+        return Promise.reject(error);
+      }
       if (error.response.status >= 400) {
         const isBanned = this.checkForBannedUser(error);
         if (isBanned === true) return null; // eslint-disable-line consistent-return
@@ -226,6 +229,11 @@ 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/spritesmith-main.css

@@ -1055,6 +1055,11 @@
   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_enchanted_music_room {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_enchanted_music_room.png');
   width: 141px;
@@ -1751,6 +1756,11 @@
   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;
@@ -2437,6 +2447,11 @@
   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;
@@ -29455,6 +29470,11 @@
   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;
@@ -29845,6 +29865,11 @@
   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;
@@ -30480,6 +30505,11 @@
   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;
@@ -30790,6 +30820,11 @@
   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;
@@ -30995,6 +31030,11 @@
   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;
@@ -31465,6 +31505,11 @@
   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;
@@ -31760,6 +31805,11 @@
   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;
@@ -32170,6 +32220,11 @@
   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;
@@ -34060,6 +34115,46 @@
   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;
+}
+.broad_armor_mystery_202512 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_mystery_202512.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;
+}
+.slim_armor_mystery_202512 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_mystery_202512.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;
+}
 .back_mystery_201402 {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/back_mystery_201402.png');
   width: 90px;
@@ -38640,6 +38735,26 @@
   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;
@@ -38935,6 +39050,26 @@
   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;
@@ -39115,6 +39250,21 @@
   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;
@@ -39355,6 +39505,26 @@
   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;
@@ -39595,6 +39765,26 @@
   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;

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

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

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

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

@@ -43,9 +43,11 @@ export default {
       const AUTH_SETTINGS = localStorage.getItem(LOCALSTORAGE_AUTH_KEY);
       const parseSettings = JSON.parse(AUTH_SETTINGS);
       const userId = parseSettings ? parseSettings.auth.apiId : '';
+      const username = this.$store?.state?.user?.data?.auth?.local?.username || '';
 
       return this.$t('accountSuspended', {
         userId,
+        username,
         communityManagerEmail: COMMUNITY_MANAGER_EMAIL,
       });
     },

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

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

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

@@ -350,6 +350,7 @@
 </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';
@@ -362,13 +363,14 @@ export default {
   components: {
     closeX,
   },
-  props: ['challengeId', 'members', 'prize', 'flagCount'],
+  props: ['challengeId', 'prize', 'flagCount'],
   data () {
     return {
       winner: {},
       searchTerm: '',
       showResults: false,
       filteredMembers: [],
+      isSearching: false,
       icons: Object.freeze({
         search: searchIcon,
         deleteIcon,
@@ -388,20 +390,42 @@ export default {
       return this.flagCount > 0;
     },
   },
+  created () {
+    this.searchMembersDebounced = debounce(this.performSearch, 500);
+  },
   methods: {
     searchMembers () {
       if (!this.searchTerm) {
         this.filteredMembers = [];
+        this.isSearching = false;
         return;
       }
 
-      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);
+      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;
+      }
     },
     getMemberDisplayName (member) {
       if (member.auth?.local?.username) {

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

@@ -0,0 +1,186 @@
+<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()"
+    >
+      <span 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;
+  }
+
+  .shortcode {
+    color: $gray-200;
+    font-size: 14px;
+  }
+</style>
+
+<script>
+import emojiDefs from 'markdown-it-emoji/lib/data/full.json';
+
+export default {
+  props: ['text', 'caretPosition', 'coords', 'textbox'],
+  data () {
+    return {
+      colonRegex: /:([a-zA-Z0-9_+]*)$/,
+      currentSearch: '',
+      searchActive: false,
+      searchResults: [],
+      selected: null,
+      emojiList: [],
+    };
+  },
+  computed: {
+    autocompleteStyle () {
+      const top = this.textbox.offsetTop + this.textbox.offsetHeight + 2;
+      return {
+        top: `${top}px`,
+        left: `${this.textbox.offsetLeft}px`,
+        position: 'absolute',
+        minWidth: '150px',
+        zIndex: 100,
+        backgroundColor: 'white',
+      };
+    },
+  },
+  watch: {
+    text (newText, prevText) {
+      if (!this.textbox) return;
+      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 list = [];
+    const keys = Object.keys(emojiDefs);
+    keys.sort();
+    for (const key of keys) {
+      list.push({ shortcode: key, emoji: emojiDefs[key], hover: false });
+    }
+    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);
+      }
+    },
+    cancel () {
+      this.searchActive = false;
+      this.searchResults = [];
+      this.resetSelection();
+    },
+  },
+};
+</script>

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

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

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

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

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

@@ -0,0 +1,577 @@
+<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,6 +41,14 @@
           :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">
@@ -90,6 +98,7 @@ 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';
@@ -102,6 +111,7 @@ export default {
   },
   components: {
     autocomplete,
+    emojiAutoComplete,
     communityGuidelines,
     chatMessages,
   },

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

@@ -25,53 +25,61 @@
         <div class="col-12 col-md-6">
           <div class="row icon-row">
             <div
-              class="item-with-icon"
+              class="item-with-icon p-2"
               tabindex="0"
               role="button"
               @keyup.enter="showMemberModal()"
               @click="showMemberModal()"
             >
-              <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 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>
             </div>
             <div v-if="!isParty">
               <div
-                class="item-with-icon"
+                class="item-with-icon p-2"
                 tabindex="0"
                 role="button"
                 @keyup.enter="showGroupGems()"
                 @click="showGroupGems()"
               >
-                <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 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>
               </div>
             </div>
@@ -128,35 +136,57 @@
   }
 
   .item-with-icon {
+    display: inline-block;
     border-radius: 2px;
-    background-color: #ffffff;
+    background-color: $white;
     box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-    padding: 1em;
-    text-align: center;
-    min-width: 120px;
+    margin-left: 1em;
+    width: 120px;
     height: 76px;
-    margin-right: 1rem;
+    text-align: center;
+    font-size: 20px;
+    vertical-align: bottom;
+    overflow: hidden;
+    position: relative;
 
-    &:last-of-type {
-      margin-left: 0.5rem;
+    .box-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      width: 100%;
     }
 
-    .svg-icon.shield, .svg-icon.gem {
-      width: 28px;
-      height: auto;
-      margin: 0 auto;
+    .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;
       display: inline-block;
       vertical-align: bottom;
-      margin-right: 0.5em;
     }
 
-    .number {
-      font-size: 22px;
-      font-weight: bold;
-    }
-
-    .label {
-      margin-top: .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;
     }
   }
 
@@ -215,11 +245,6 @@
   .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,13 +218,19 @@
     flex-direction: row;
     flex-wrap: wrap;
     gap: 0.5rem;
-
-    // somehow the browser felt like setting this 398px instead
-    // now its fixed to 400 :)
-    width: 400px;
-
+    max-width: 400px;
+    width: 100%;
     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 {
@@ -251,6 +257,28 @@
     ::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
-    class="banner d-flex align-items-center justify-content-between py-3 px-4"
-    id="privacy-banner"
     v-if="!hidden"
+    id="privacy-banner"
+    class="banner d-flex align-items-center justify-content-between py-3 px-4"
   >
     <p
       class="mr-3 mb-0"

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

@@ -34,7 +34,7 @@
     >
     <div
       class="close-x"
-      @click="remove()"
+      @click.stop="remove()"
     >
       <div
         class="svg-icon svg-close"
@@ -140,7 +140,7 @@ export default {
   methods: {
     remove () {
       if (this.eventKey) {
-        window.sessionStorage.setItem(`hide-g1g1-${this.eventKey}`, 'true');
+        window.localStorage.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.sessionStorage.getItem(`hide-g1g1-${eventKey}`) === 'true') {
+      if (eventKey && window.localStorage.getItem(`hide-g1g1-${eventKey}`) === 'true') {
         return false;
       }
       return !this.g1g1Hidden;

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

@@ -491,6 +491,9 @@ 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/notifications.vue

@@ -328,6 +328,8 @@ export default {
       alreadyReadNotification,
       nextCron: null,
       handledNotifications,
+      isInitialLoadComplete: false,
+      pendingRebirthNotification: null,
     };
   },
   computed: {
@@ -453,6 +455,18 @@ 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');
@@ -661,6 +675,18 @@ 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;
@@ -700,8 +726,15 @@ export default {
             this.$root.$emit('habitica:won-challenge', notification);
             break;
           case 'REBIRTH_ACHIEVEMENT':
-            this.playSound('Achievement_Unlocked');
-            this.$root.$emit('bv::show::modal', 'rebirth');
+            if (localStorage.getItem('show-rebirth-confirmation') === 'true') {
+              markAsRead = false;
+            } else if (!this.isInitialLoadComplete) {
+              this.pendingRebirthNotification = notification;
+              markAsRead = false;
+            } else {
+              this.playSound('Achievement_Unlocked');
+              this.$root.$emit('bv::show::modal', 'rebirth');
+            }
             break;
           case 'STREAK_ACHIEVEMENT':
             this.text(`${this.$t('streaks')}: ${this.user.achievements.streak}`, () => {

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

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

website/client/src/components/secondaryMenu.vue

@@ -12,6 +12,12 @@
   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 {
@@ -23,6 +29,19 @@
   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: true,
+      privacyConsent: false,
     };
   },
   methods: {

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

@@ -189,6 +189,7 @@
             >
             </p>
             <div
+              v-if="paymentMethodLogo.icon"
               class="svg svg-icon mb-4"
               :class="paymentMethodLogo.class"
               v-html="paymentMethodLogo.icon"
@@ -205,6 +206,13 @@
                 <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"
@@ -407,6 +415,13 @@
         <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"
@@ -631,7 +646,7 @@
     background-color: $purple-400;
     height: 1px;
     width: 50%;
-    max-width: 432px;
+    max-width: 417px;
   }
 
   .purple-gradient {
@@ -654,6 +669,12 @@
     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/shared/faqSidebar.vue

@@ -12,14 +12,12 @@
           class="staff col-6 p-0"
         >
           <div class="d-flex">
-            <router-link
+            <div
               class="title"
-              :to="{'name': 'userProfile', 'params': {'userId': user.uuid}}"
             >
               {{ user.name }}
-            </router-link>
+            </div>
             <div
-              v-if="user.type === 'Staff'"
               class="svg-icon staff-icon ml-1"
               v-html="icons.tierStaff"
             ></div>

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

@@ -269,12 +269,23 @@
 
     .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 {
@@ -346,7 +357,23 @@
 
     .content {
       text-align: center;
-      width: 448px;
+      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;
+      }
     }
 
     .item-wrapper {
@@ -564,7 +591,7 @@
 
     .limitedTime {
       height: 32px;
-      width: 446px;
+      width: 100%;
       font-size: 0.75rem;
       margin: 24px 0 0 0;
       background-color: $purple-300;
@@ -829,10 +856,17 @@ export default {
           - ownedMounts
           - ownedItems;
 
-        if (
-          petsRemaining < 0
-          && !window.confirm(this.$t('purchasePetItemConfirm', { itemText: this.item.text })) // eslint-disable-line no-alert
-        ) return;
+        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 (this.item.purchaseType === 'customization') {
@@ -844,15 +878,23 @@ export default {
         this.purchased(this.item.text);
       } else {
         const shouldConfirmPurchase = this.item.currency === 'gems' || this.item.currency === 'hourglasses';
-        if (
-          shouldConfirmPurchase
-          && !this.confirmPurchase(this.item.currency, this.item.value * this.selectedAmountToBuy)
-        ) {
-          return;
+        if (shouldConfirmPurchase) {
+          const confirmed = await this.confirmPurchase(
+            this.item.currency,
+            this.item.value * this.selectedAmountToBuy,
+          );
+          if (!confirmed) {
+            return;
+          }
         }
         if (this.genericPurchase) {
-          this.makeGenericPurchase(this.item, 'buyModal', this.selectedAmountToBuy);
-          await this.purchased(this.item.text);
+          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);
+          }
         }
       }
 
@@ -866,8 +908,8 @@ export default {
     purchaseGems () {
       this.$root.$emit('bv::show::modal', 'buy-gems');
     },
-    togglePinned () {
-      this.isPinned = this.$store.dispatch('user:togglePinnedItem', { type: this.item.pinType, path: this.item.path });
+    async togglePinned () {
+      this.isPinned = await 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,7 +76,21 @@
                 :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>
@@ -108,6 +122,16 @@
   }
 </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';
@@ -118,7 +142,9 @@ 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: {
@@ -126,8 +152,10 @@ export default {
     FilterGroup,
     FilterSidebar,
     ItemRows,
+    PinBadge,
     ShopItem,
   },
+  mixins: [pinUtils],
   data () {
     return {
       searchText: null,
@@ -184,8 +212,12 @@ export default {
   methods: {
     customizationsItems (options = {}) {
       const { category, searchBy } = options;
-      return category.items.filter(item => !searchBy
-        || item.text.toLowerCase().includes(searchBy));
+      return category.items
+        .filter(item => !searchBy || item.text.toLowerCase().includes(searchBy))
+        .map(item => ({
+          ...item,
+          pinned: this.isPinned(item),
+        }));
     },
     emptyClick (identifier, event) {
       if (event.target.tagName !== 'A') return;

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

@@ -111,6 +111,22 @@
 
     .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

@@ -0,0 +1,207 @@
+<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,8 +163,38 @@
     }
 
     .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 {
@@ -485,8 +515,12 @@ export default {
       this.selectedAmountToBuy = 1;
       this.$emit('change', $event);
     },
-    buyItem () {
-      if (!this.confirmPurchase(this.item.currency, this.item.value * this.selectedAmountToBuy)) {
+    async buyItem () {
+      const confirmed = await this.confirmPurchase(
+        this.item.currency,
+        this.item.value * this.selectedAmountToBuy,
+      );
+      if (!confirmed) {
         return;
       }
       this.makeGenericPurchase(this.item, 'buyQuestModal', this.selectedAmountToBuy);

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

@@ -120,9 +120,9 @@
     >
     <ul>
       <li>
-        {{ $t('commGuideAKA', {habitName: 'heyeilatan', realName: 'Natalie'}) }}
-        ({{ $t('commGuideOnGitHub', {gitHubName: 'CuriousMagpie'}) }})
-        - Web Developer
+        {{ $t('commGuideAKA', {habitName: 'Viirus', realName: 'Phillip'}) }}
+        ({{ $t('commGuideOnGitHub', {gitHubName: 'phillipthelen'}) }})
+        - Developer
       </li>
       <li>
         {{ $t('commGuideAKA', {habitName: 'redphoenix', realName: 'Vicky'}) }}
@@ -133,10 +133,6 @@
         {{ $t('commGuideAKA', {habitName: 'Beffymaroo', realName: 'Beth'}) }}
         - Art, Community Management, Many Hats
       </li>
-      <li>
-        {{ $t('commGuideAKA', {habitName: 'SabreCat', realName: 'Sabe'}) }}
-        - Web Developer
-      </li>
       <li>
         {{ $t('commGuideAKA', {habitName: 'Apollo', realName: 'Tressley'}) }}
         - Designer
@@ -146,8 +142,12 @@
         - Mobile Designer
       </li>
       <li>
-        {{ $t('commGuideAKA', {habitName: 'Viirus', realName: 'Phillip'}) }}
-        - Mobile Developer
+        {{ $t('commGuideAKA', {habitName: 'SabreCat', realName: 'Kalista'}) }}
+        - Web Developer
+      </li>
+      <li>
+        {{ $t('commGuideAKA', {habitName: 'fizself', realName: 'Hafiz'}) }}
+        - Developer
       </li>
     </ul>
     <p v-html="$t('commGuidePara013')"></p>
@@ -156,7 +156,7 @@
       <em>
         Lemoness, lefnire, Slappybag, litenull, Shaner, Bobbyroberts99, wc8,
         Breadstrings, Megan, Blade, Daniel the Bard, deilann, shanaqui, Nakonana,
-        Dewines, Alys, Fox_town, MaybeSteveRogers, and Cantras.
+        Dewines, Alys, Fox_town, MaybeSteveRogers, Cantras, and heyeilatan.
       </em>
     </p>
     <h2 id="final">

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

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <group-plan-selection-modal />
     <group-plan-creation-modal />
     <div class="d-flex justify-content-center">
       <div
@@ -45,6 +46,9 @@
           <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">
@@ -114,6 +118,9 @@
             <p class="gray-200">
               {{ $t('billedMonthly') }}
             </p>
+            <small class="gray-200">
+              {{ $t('groupPlanBillingFYI') }}
+            </small>
           </div>
           <div class="bot-right"></div>
         </div>
@@ -174,6 +181,11 @@
     line-height: 28px;
   }
 
+  small {
+    font-size: 12px;
+    line-height: 1.67;
+  }
+
   // Major layout elements
 
   .bottom-banner {
@@ -304,10 +316,12 @@
 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 () {
@@ -348,7 +362,7 @@ export default {
       if (this.upgradingGroup._id) {
         return this.stripeGroup({ group: this.upgradingGroup, upgrade: true });
       }
-      return this.$root.$emit('bv::show::modal', 'create-group');
+      return this.$root.$emit('bv::show::modal', 'group-plan-selection');
     },
   },
 };

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

@@ -11,12 +11,12 @@
     <privacy-banner
       class="privacy-banner"
     />
-    <div class="bg-purple-300 white">
+    <div class="bg-purple-300 white pt-5">
       <div>
         <div
           id="intro-signup"
         >
-          <div class="d-flex justify-content-center">
+          <div class="d-flex justify-content-center pb-5 mb-5">
             <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,9 +64,11 @@
       <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>
@@ -617,7 +619,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">
@@ -708,7 +710,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
-      id="bottom-background"
       v-if="loginFlow"
+      id="bottom-background"
       class="bg-purple-300"
     >
       <div class="seamless_mountains_demo_repeat"></div>
@@ -31,7 +31,10 @@
       id="bottom-wrap"
       class="purple-4"
     >
-      <div id="bottom-background" v-if="!loginFlow">
+      <div
+        v-if="!loginFlow"
+        id="bottom-background"
+      >
         <div class="seamless_mountains_demo_repeat"></div>
         <div class="midground_foreground_extended2"></div>
       </div>
@@ -104,9 +107,10 @@
     footer, footer a {
       background: transparent;
       color: $purple-500;
-      &:hover {
-        color: $white;
-      }
+    }
+
+    footer a:hover {
+      color: $white;
     }
 
     h3 {
@@ -117,10 +121,6 @@
       border-top-color: $purple-100;
     }
 
-    .donate-text {
-      color: $purple-500;
-    }
-
     .logo {
       color: $purple-300;
     }
@@ -129,42 +129,27 @@
       color: $purple-500;
     }
 
+    .social .d-flex:hover {
+      a {
+        color: $white;
+      }
+      svg {
+        fill: $white;
+      }
+    }
+
     .social-circle {
       background: $purple-50;
       color: $purple-500;
 
-      .instagram svg {
+      svg {
         background-color: $purple-50;
         fill: $purple-500;
-        &: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;
-        }
+        width: 24px;
+        height: 24px;
       }
     }
+
     .btn-contribute {
       background: $white;
       box-shadow: none;
@@ -274,7 +259,8 @@ export default {
       return 'purple-footer';
     },
     loginFlow () {
-      return ['login', 'register', 'username'].indexOf(this.$route.name) !== -1;
+      const loginRoutes = ['forgotPassword', 'login', 'register', 'resetPassword', 'username'];
+      return loginRoutes.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,65 +1,45 @@
 <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-body"
+      class="modal-content-wrapper"
     >
-      <div
-        v-if="brokenChallengeTask.challenge.broken === 'TASK_DELETED'
-          || brokenChallengeTask.challenge.broken === 'CHALLENGE_TASK_NOT_FOUND'"
-      >
-        <h2>{{ $t('brokenTask') }}</h2>
-        <div>
+      <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">
           <button
             class="btn btn-primary"
-            @click="unlink('keep')"
+            @click="keepAction()"
           >
-            {{ $t('keepIt') }}
+            {{ keepButtonText }}
           </button>
           <button
             class="btn btn-danger"
-            @click="removeTask(obj)"
+            @click="removeAction()"
           >
-            {{ $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') }}
+            {{ removeButtonText }}
           </button>
           <button
-            class="btn btn-danger"
-            @click="unlink('remove-all')"
+            class="btn-cancel"
+            @click="close()"
           >
-            {{ $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') }}
+            {{ $t('cancel') }}
           </button>
         </div>
       </div>
@@ -67,23 +47,175 @@
   </b-modal>
 </template>
 
-<style scoped>
-  .modal-body {
-    padding-bottom: 2em;
+<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;
+  }
+
+  .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-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 };
@@ -99,8 +231,36 @@ 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,
@@ -122,8 +282,14 @@ export default {
       });
       this.close();
     },
-    removeTask () {
-      if (!window.confirm('Are you sure you want to delete this task?')) return; // eslint-disable-line no-alert
+    async removeTask () {
+      const confirmed = await new Promise(resolve => {
+        this.$root.$emit('habitica:delete-task-confirm', {
+          message: this.$t('sureDelete'),
+          resolve,
+        });
+      });
+      if (!confirmed) return;
       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()"
-        scrollSensitivity="64"
+        scroll-sensitivity="64"
         :delay-on-touch-only="true"
         :delay="100"
         @update="taskSorted"

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

@@ -0,0 +1,223 @@
+<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/task.vue

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

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

@@ -35,7 +35,7 @@
           </button>
           <button
             class="btn btn-secondary d-flex align-items-center justify-content-center"
-            :class="{disabled: !canSave}"
+            :class="{'btn-disabled': !canSave}"
             type="button"
             @click="submit()"
           >
@@ -70,6 +70,13 @@
           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
@@ -92,11 +99,27 @@
           </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
@@ -150,25 +173,25 @@
           <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
                 class="habit-option-icon svg-icon no-transition"
-                :class="task.up ? '' : 'disabled'"
+                :class="task.up ? '' : 'icon-disabled'"
                 v-html="icons.positive"
               ></div>
             </div>
             <div
               class="habit-option-label no-transition"
-              :class="task.up ? cssClass('icon') : 'disabled'"
+              :class="task.up ? cssClass('icon') : 'label-disabled'"
             >
               {{ $t('positive') }}
             </div>
@@ -176,25 +199,25 @@
           <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
                 class="habit-option-icon no-transition svg-icon negative mx-auto"
-                :class="task.down ? '' : 'disabled'"
+                :class="task.down ? '' : 'icon-disabled'"
                 v-html="icons.negative"
               ></div>
             </div>
             <div
               class="habit-option-label no-transition"
-              :class="task.down ? cssClass('icon') : 'disabled'"
+              :class="task.down ? cssClass('icon') : 'label-disabled'"
             >
               {{ $t('negative') }}
             </div>
@@ -382,6 +405,45 @@
             </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"
@@ -591,8 +653,8 @@
         >
           <button
             class="btn btn-primary btn-footer
-            d-flex align-items-center justify-content-center"
-            :class="{disabled: !canSave}"
+          d-flex align-items-center justify-content-center"
+            :class="{'btn-disabled': !canSave}"
             type="button"
             @click="submit()"
           >
@@ -673,6 +735,7 @@
     }
 
     .task-modal-header {
+      position: relative;
       color: $white;
       width: 100%;
       border-top-left-radius: 8px;
@@ -881,12 +944,14 @@
       }
     }
 
-    .disabled {
+    .btn-disabled {
       background-color: $white;
       border: 2px solid transparent;
       color: $gray-200;
       line-height: 1.714;
       box-shadow: 0px 1px 3px 0px rgba(26, 24, 29, 0.12), 0px 1px 2px 0px rgba(26, 24, 29, 0.24);
+      cursor: not-allowed;
+      opacity: 0.6;
 
       &:focus {
         background-color: $white;
@@ -909,6 +974,87 @@
   .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>
@@ -948,7 +1094,7 @@
       height: 10px;
       color: $white;
 
-      &.disabled {
+      &.icon-disabled {
         color: $gray-200;
       }
 
@@ -962,7 +1108,7 @@
       font-weight: bold;
       text-align: center;
 
-      &.disabled {
+      &.label-disabled {
         color: $gray-100;
         font-weight: normal;
       }
@@ -1018,10 +1164,9 @@
     border: 0;
   }
 
-  .disabled .input-group-text {
+  .input-group-outer.disabled .input-group-text {
     color: $gray-200;
   }
-
 </style>
 
 <script>
@@ -1036,8 +1181,11 @@ 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';
@@ -1059,15 +1207,19 @@ export default {
     selectTranslatedArray,
     toggleCheckbox,
     lockableLabel,
+    selectList,
+    emojiAutoComplete,
   },
   directives: {
     markdown: markdownDirective,
   },
-  mixins: [syncTask],
+  mixins: [syncTask, autoCompleteHelperMixin],
   // 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({
@@ -1092,6 +1244,12 @@ 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()] },
     };
   },
@@ -1185,6 +1343,16 @@ 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 () {
@@ -1303,9 +1471,16 @@ export default {
       }
       this.$root.$emit('bv::hide::modal', 'task-modal');
     },
-    destroy () {
+    async destroy () {
       const type = this.$t(this.task.type);
-      if (!window.confirm(this.$t('sureDeleteType', { type }))) return; // eslint-disable-line no-alert
+      const confirmed = await new Promise(resolve => {
+        this.$root.$emit('habitica:delete-task-confirm', {
+          message: this.$t('sureDeleteType', { type }),
+          taskType: type,
+          resolve,
+        });
+      });
+      if (!confirmed) return;
       this.destroyTask(this.task);
       this.$emit('taskDestroyed', this.task);
       this.$root.$emit('bv::hide::modal', 'task-modal');
@@ -1347,6 +1522,35 @@ 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/ui/pinBadge.vue

@@ -16,7 +16,7 @@
 
   .badge-pin {
     background-color: $white;
-    color: $gray-200;
+    color: $gray-100;
     transition: none;
     display: flex;
     cursor: pointer;
@@ -32,8 +32,8 @@
     }
 
     .svg-icon {
-      width: 100%;
-      height: 100%;
+      width: 16px;
+      height: 16px;
     }
   }
 

website/client/src/components/ui/selectList.vue

@@ -12,7 +12,7 @@
       <template #button-content>
         <slot
           name="item"
-          :item="selected || placeholder"
+          :item="selectedItem || placeholder"
           :button="true"
         >
           <!-- Fallback content -->
@@ -134,6 +134,14 @@ export default {
       }),
     };
   },
+  computed: {
+    selectedItem () {
+      if (this.activeKeyProp) {
+        return this.items.find(item => item[this.activeKeyProp] === this.selected);
+      }
+      return this.items.find(item => item === this.selected);
+    },
+  },
   methods: {
     getKeyProp (item) {
       return this.keyProp ? item[this.keyProp] : item.key || item.identifier;

website/client/src/components/ui/selectableCard.vue

@@ -0,0 +1,92 @@
+<template>
+  <div
+    class="selectable-card"
+    :class="{ selected }"
+    @click="$emit('click')"
+  >
+    <div
+      v-if="selected"
+      class="checkmark-corner"
+    >
+      <div
+        class="svg-icon check-icon"
+        v-html="icons.check"
+      ></div>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/colors.scss';
+
+.selectable-card {
+  position: relative;
+  background: $white;
+  border: 1px solid $gray-400;
+  border-radius: 8px;
+  padding: 16px;
+  cursor: pointer;
+  box-shadow: 0px 1px 2px 0px rgba(26, 24, 29, 0.08);
+
+  &:hover {
+    box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
+  }
+
+  &.selected {
+    border: 2px solid $purple-300;
+    padding: 15px;
+    box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
+  }
+}
+
+.checkmark-corner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 48px;
+  height: 48px;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-style: solid;
+    border-width: 48px 48px 0 0;
+    border-color: $purple-300 transparent transparent transparent;
+    border-radius: 6px 0 0 0;
+  }
+
+  .check-icon {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    width: 16px;
+    height: 16px;
+    color: $white;
+  }
+}
+</style>
+
+<script>
+import svgCheck from '@/assets/svg/check.svg?raw';
+
+export default {
+  props: {
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['click'],
+  data () {
+    return {
+      icons: Object.freeze({
+        check: svgCheck,
+      }),
+    };
+  },
+};
+</script>

website/client/src/components/ui/toggleSwitch.vue

@@ -25,8 +25,8 @@
           type="checkbox"
           :checked="isChecked"
           :value="value"
-          @change="handleChange"
           :disabled="disabled"
+          @change="handleChange"
         >
         <label
           class="toggle-switch-label"
@@ -116,7 +116,7 @@
   .toggle-switch-inner:before {
     content: "";
     padding-left: 10px;
-    background-color: $green-10;
+    background-color: $green-50;
   }
 
   .toggle-switch-inner:after {

website/client/src/components/userMenu/profile.vue

@@ -398,14 +398,29 @@
                 :placeholder="$t('imageUrl')"
               >
             </div>
-            <div class="form-group">
+            <div class="form-group" style="position: relative;">
               <label>{{ $t('about') }}</label>
               <textarea
+                ref="blurbTextarea"
                 v-model="editingProfile.blurb"
                 class="form-control"
                 rows="5"
                 :placeholder="$t('displayBlurbPlaceholder')"
+                @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="editingProfile.blurb"
+                :textbox="textbox"
+                :coords="mixinData.autoComplete.coords"
+                :caret-position="mixinData.autoComplete.caretPosition"
+                @select="selectedAutocomplete"
+              />
               <!-- include ../../shared/formatting-help-->
             </div>
           </div>
@@ -1001,6 +1016,8 @@ import mute from '@/assets/svg/mute.svg?raw';
 import shadowMute from '@/assets/svg/shadow-mute.svg?raw';
 import externalLinks from '../../mixins/externalLinks';
 import { userCustomStateMixin } from '../../mixins/userState';
+import emojiAutoComplete from '@/components/chat/emojiAutoComplete';
+import { autoCompleteHelperMixin } from '@/mixins/autoCompleteHelper';
 // @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
 const COMMUNITY_MANAGER_EMAIL = 'admin@habitica.com';
 
@@ -1012,8 +1029,9 @@ export default {
     MemberDetails,
     profileStats,
     toggleSwitch,
+    emojiAutoComplete,
   },
-  mixins: [externalLinks, userCustomStateMixin('userLoggedIn')],
+  mixins: [externalLinks, userCustomStateMixin('userLoggedIn'), autoCompleteHelperMixin],
   props: ['userId', 'startingPage'],
   data () {
     return {
@@ -1033,6 +1051,7 @@ export default {
         mute,
         shadowMute,
       }),
+      textbox: null,
       userIdToMessage: '',
       editing: false,
       editingProfile: {
@@ -1121,6 +1140,13 @@ export default {
     userLoggedIn () {
       this.loadUser();
     },
+    editing (val) {
+      if (val) {
+        this.$nextTick(() => {
+          this.textbox = this.$refs.blurbTextarea;
+        });
+      }
+    },
   },
   mounted () {
     this.loadUser();
@@ -1331,6 +1357,13 @@ export default {
       this.$emit('toggled', this.isOpened);
     },
 
+    selectedAutocomplete (newText, newCaret) {
+      this.editingProfile.blurb = newText;
+      this.$nextTick(() => {
+        this.textbox.setSelectionRange(newCaret, newCaret);
+        this.textbox.focus();
+      });
+    },
     reportPlayer () {
       this.$root.$emit('habitica::report-profile', {
         memberId: this.user._id,

website/client/src/libs/analytics.js

@@ -3,14 +3,10 @@ import isEqual from 'lodash/isEqual';
 import keys from 'lodash/keys';
 import pick from 'lodash/pick';
 import amplitude from 'amplitude-js';
-import { gtag, install } from 'ga-gtag';
 import Vue from 'vue';
 import getStore from '@/store';
 
 const AMPLITUDE_KEY = import.meta.env.AMPLITUDE_KEY;
-const DEBUG_ENABLED = import.meta.env.DEBUG_ENABLED === 'true';
-const GA_ID = import.meta.env.GA_ID;
-const IS_PRODUCTION = import.meta.env.NODE_ENV === 'production';
 const REQUIRED_FIELDS = ['eventCategory', 'eventAction'];
 
 let analyticsLoading = false;
@@ -69,10 +65,6 @@ function _gatherUserStats (properties) {
 export function safeSetup (userId) {
   if (analyticsLoading || analyticsReady) return;
   analyticsLoading = true;
-  install(GA_ID, {
-    debug_mode: DEBUG_ENABLED || !IS_PRODUCTION,
-    user_id: userId,
-  });
   amplitude.getInstance().init(AMPLITUDE_KEY, userId);
   analyticsReady = true;
   analyticsLoading = false;
@@ -90,7 +82,6 @@ export function track (properties, options = {}) {
     // Track events on the server by default
     if (trackOnClient === true) {
       amplitude.getInstance().logEvent(properties.eventAction, properties);
-      gtag('event', properties.eventAction, properties);
     } else {
       const store = getStore();
       store.dispatch('analytics:trackEvent', properties);
@@ -105,7 +96,6 @@ export function updateUser (properties = {}) {
   // Use nextTick to avoid blocking the UI
   Vue.nextTick(() => {
     _gatherUserStats(properties);
-    gtag('set', 'user_properties', properties);
     forEach(properties, (value, key) => {
       const identify = new amplitude.Identify().set(key, value);
       amplitude.getInstance().identify(identify);

website/client/src/libs/staffList.js

@@ -30,8 +30,8 @@ export default [
     uuid: '61b2c855-0a30-444c-bcc6-1cac876460b0',
   },
   {
-    name: 'heyeilatan',
+    name: 'fizself',
     type: 'Staff',
-    uuid: 'f4e5c6da-0617-48bf-b3bd-9f97636774a8',
+    uuid: 'e39ea3eb-28d2-48da-8568-7a5b0e64498e',
   },
 ];

website/client/src/mixins/autoCompleteHelper.js

@@ -15,46 +15,60 @@ export const autoCompleteHelperMixin = {
     };
   },
   methods: {
+    _getActiveAutocomplete () {
+      if (this.$refs.autocomplete && this.$refs.autocomplete.searchActive) {
+        return this.$refs.autocomplete;
+      }
+      if (this.$refs.emojiAutocomplete && this.$refs.emojiAutocomplete.searchActive) {
+        return this.$refs.emojiAutocomplete;
+      }
+      return null;
+    },
+
     autoCompleteMixinHandleTab (e) {
-      if (this.$refs.autocomplete.searchActive) {
+      const ac = this._getActiveAutocomplete();
+      if (ac) {
         e.preventDefault();
         if (e.shiftKey) {
-          this.$refs.autocomplete.selectPrevious();
+          ac.selectPrevious();
         } else {
-          this.$refs.autocomplete.selectNext();
+          ac.selectNext();
         }
       }
     },
 
     autoCompleteMixinHandleEscape (e) {
-      if (this.$refs.autocomplete.searchActive) {
+      const ac = this._getActiveAutocomplete();
+      if (ac) {
         e.preventDefault();
-        this.$refs.autocomplete.cancel();
+        ac.cancel();
       }
     },
 
     autoCompleteMixinSelectNextAutocomplete (e) {
-      if (this.$refs.autocomplete.searchActive) {
+      const ac = this._getActiveAutocomplete();
+      if (ac) {
         e.preventDefault();
-        this.$refs.autocomplete.selectNext();
+        ac.selectNext();
       }
     },
 
     autoCompleteMixinSelectPreviousAutocomplete (e) {
-      if (this.$refs.autocomplete.searchActive) {
+      const ac = this._getActiveAutocomplete();
+      if (ac) {
         e.preventDefault();
-        this.$refs.autocomplete.selectPrevious();
+        ac.selectPrevious();
       }
     },
 
     autoCompleteMixinSelectAutocomplete (e) {
-      if (this.$refs.autocomplete.searchActive) {
-        if (this.$refs.autocomplete.selected !== null) {
+      const ac = this._getActiveAutocomplete();
+      if (ac) {
+        if (ac.selected !== null) {
           e.preventDefault();
-          this.$refs.autocomplete.makeSelection();
+          ac.makeSelection();
         } else {
-          // no autocomplete selected, newline instead
-          this.$refs.autocomplete.cancel();
+          ac.cancel();
         }
       }
     },

website/client/src/mixins/buy.js

@@ -39,7 +39,15 @@ export default {
       };
 
       const purchaseForKey = currencyToPurchaseForKey[currency];
-      return window.confirm(this.$t(purchaseForKey, { cost })); // eslint-disable-line no-alert
+
+      return new Promise(resolve => {
+        this.$root.$emit('habitica:purchase-confirm', {
+          message: this.$t(purchaseForKey, { cost }),
+          currency,
+          cost,
+          resolve,
+        });
+      });
     },
   },
 };

website/client/src/pages/private-messages/index.vue

@@ -153,9 +153,23 @@
               :placeholder="$t('needsTextPlaceholder')"
               :maxlength="MAX_MESSAGE_LENGTH"
               :class="{'has-content': newMessage.trim() !== '', 'disabled': newMessageDisabled}"
+              @keydown="autoCompleteMixinUpdateCarretPosition"
               @keyup.ctrl.enter="sendPrivateMessage()"
+              @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="newMessage"
+              :textbox="textbox"
+              :coords="mixinData.autoComplete.coords"
+              :caret-position="mixinData.autoComplete.caretPosition"
+              @select="selectedAutocomplete"
+            />
           </div>
           <div
             class="sub-new-message-row d-flex"
@@ -540,6 +554,7 @@ h3 {
 }
 
 .new-message-row {
+  position: relative;
   width: 100%;
   padding-left: 1.5rem;
   padding-top: 1.5rem;
@@ -676,10 +691,12 @@ import PmNewMessageStarted from './pm-new-message-started.vue';
 import StartNewConversationInputHeader from './start-new-conversation-input-header.vue';
 import positiveIcon from '@/assets/svg/positive.svg?raw';
 import NotificationMixins from '@/mixins/notifications';
+import emojiAutoComplete from '@/components/chat/emojiAutoComplete';
+import { autoCompleteHelperMixin } from '@/mixins/autoCompleteHelper';
 
 // extract to a shared path
 const CONVERSATIONS_PER_PAGE = 10;
-const PM_PER_PAGE = 10;
+const PM_PER_PAGE = 50;
 
 const UI_STATES = Object.freeze({
   LOADING: 'LOADING',
@@ -700,13 +717,14 @@ export default defineComponent({
     toggleSwitch,
     userLink,
     faceAvatar,
+    emojiAutoComplete,
   },
   filters: {
     timeAgo (value) {
       return moment(new Date(value)).fromNow();
     },
   },
-  mixins: [styleHelper, NotificationMixins],
+  mixins: [styleHelper, NotificationMixins, autoCompleteHelperMixin],
   beforeRouteEnter (to, from, next) {
     next(vm => {
       const data = vm.$store.state.privateMessageOptions;
@@ -751,6 +769,7 @@ export default defineComponent({
       /** @type {Record<string, PrivateMessages.PrivateMessageEntry[]>} */
       messagesByConversation: {}, // cache {uuid: []}
 
+      textbox: null,
       newMessage: '',
       messages: [],
       messagesLoading: false,
@@ -963,6 +982,15 @@ export default defineComponent({
       }
     },
   },
+  watch: {
+    shouldShowInputPanel (val) {
+      if (val) {
+        this.$nextTick(() => {
+          this.textbox = this.$refs.textarea;
+        });
+      }
+    },
+  },
   async mounted () {
     this.$store.dispatch('common:setTitle', {
       section: this.$t('messages'),
@@ -1224,6 +1252,13 @@ export default defineComponent({
     triggerStartNewConversationState () {
       this.showStartNewConversationInput = true;
     },
+    selectedAutocomplete (newText, newCaret) {
+      this.newMessage = newText;
+      this.$nextTick(() => {
+        this.textbox.setSelectionRange(newCaret, newCaret);
+        this.textbox.focus();
+      });
+    },
     async startConversationByUsername (targetUserName) {
       // check if the target user exists in current conversations, select that conversation
       /** @type {PrivateMessages.ConversationSummaryMessageEntry} */

website/client/src/pages/settings/settingRows/classSetting.vue

@@ -217,8 +217,18 @@ export default {
       }
     },
     async changeClassAndClose () {
-      if (!this.classDisabled && !window.confirm(this.$t('changeClassConfirmCost'))) {
-        return;
+      if (!this.classDisabled) {
+        const confirmed = await new Promise(resolve => {
+          this.$root.$emit('habitica:purchase-confirm', {
+            message: this.$t('changeClassConfirmCost'),
+            currency: 'gems',
+            cost: 3,
+            resolve,
+          });
+        });
+        if (!confirmed) {
+          return;
+        }
       }
 
       this.$root.$once('bv::hide::modal', () => {

website/client/src/pages/settings/siteDataRows/privacyPreferencesRow.vue

@@ -1,7 +1,8 @@
 <template>
   <tr>
-    <td colspan="3"
+    <td
       v-if="!mixinData.inlineSettingMixin.modalVisible"
+      colspan="3"
     >
       <div class="d-flex justify-content-between align-items-center">
         <h3
@@ -18,8 +19,9 @@
         </a>
       </div>
     </td>
-    <td colspan="3"
+    <td
       v-if="mixinData.inlineSettingMixin.modalVisible"
+      colspan="3"
     >
       <h3
         v-once
@@ -59,8 +61,8 @@
               {{ $t('performanceAnalytics') }}
             </label>
             <toggle-switch
-              class="mb-auto"
               v-model="user.preferences.analyticsConsent"
+              class="mb-auto"
               @change="prefToggled()"
             />
           </div>
@@ -151,14 +153,14 @@ import { mapState } from '@/libs/store';
 import alert from '@/assets/svg/for-css/alert.svg?raw';
 
 export default {
-  mixins: [
-    GenericUserPreferencesMixin,
-    InlineSettingMixin,
-  ],
   components: {
     SaveCancelButtons,
     ToggleSwitch,
   },
+  mixins: [
+    GenericUserPreferencesMixin,
+    InlineSettingMixin,
+  ],
   data () {
     return {
       icons: Object.freeze({

website/client/src/pages/user-main.vue

@@ -14,6 +14,8 @@
     <bug-report-success-modal v-if="isUserLoaded" />
     <external-link-modal />
     <birthday-modal />
+    <purchase-confirm-modal v-if="isUserLoaded" />
+    <delete-task-confirm-modal v-if="isUserLoaded" />
     <template v-if="isUserLoaded">
       <privacy-banner />
       <chat-banner />
@@ -138,6 +140,8 @@ import paymentsSuccessModal from '@/components/payments/successModal';
 import subCancelModalConfirm from '@/components/payments/cancelModalConfirm';
 import subCanceledModal from '@/components/payments/canceledModal';
 import externalLinkModal from '@/components/externalLinkModal.vue';
+import purchaseConfirmModal from '@/components/shops/purchaseConfirmModal.vue';
+import deleteTaskConfirmModal from '@/components/tasks/deleteTaskConfirmModal.vue';
 
 import spellsMixin from '@/mixins/spells';
 import {
@@ -172,6 +176,8 @@ export default {
     bugReportModal,
     bugReportSuccessModal,
     externalLinkModal,
+    purchaseConfirmModal,
+    deleteTaskConfirmModal,
   },
   mixins: [notifications, spellsMixin],
   data () {
@@ -262,7 +268,6 @@ export default {
       this.$store.dispatch('user:fetch'),
       this.$store.dispatch('tasks:fetchUserTasks'),
     ]).then(() => {
-      this.$store.state.isUserLoaded = true;
       let analyticsConsent = localStorage.getItem('analyticsConsent');
       if (analyticsConsent !== null) {
         analyticsConsent = analyticsConsent === 'true';
@@ -270,31 +275,11 @@ export default {
           this.$store.dispatch('user:set', { 'preferences.analyticsConsent': analyticsConsent });
         }
       }
-      if (window && window['habitica-i18n']) {
-        if (this.user.preferences.language === window['habitica-i18n'].language.code) {
-          return null;
-        }
-      }
-      if (window && window['habitica-i18n']) {
-        if (this.user.preferences.language === window['habitica-i18n'].language.code) {
-          return null;
-        }
-      }
+
       Analytics.updateUser();
-      return axios.get(
-        '/api/v4/i18n/browser-script',
-        {
-          language: this.user.preferences.language,
-          headers: {
-            'Cache-Control': 'no-cache',
-            Pragma: 'no-cache',
-            Expires: '0',
-          },
-        },
-      );
+      return this.loadAllTranslations();
     }).then(() => {
-      const i18nData = window && window['habitica-i18n'];
-      this.$loadLocale(i18nData);
+      this.$store.state.isUserLoaded = true;
       this.hideLoadingScreen();
 
       // Adjust the timezone offset
@@ -310,6 +295,10 @@ export default {
         appState = JSON.parse(appState);
         if (appState.paymentCompleted) {
           removeLocalSetting(CONSTANTS.savedAppStateValues.SAVED_APP_STATE);
+          if (appState.paymentType === 'groupPlan') {
+            this.$store.state.upgradingGroup = {};
+            this.$store.dispatch('guilds:getGroupPlans', true);
+          }
           this.$root.$emit('habitica:payment-success', appState);
         }
       }
@@ -374,6 +363,36 @@ export default {
     hideLoadingScreen () {
       this.loading = false;
     },
+    async loadContentTranslations () {
+      const contentTranslations = await axios.get(
+        '/api/v4/i18n/content',
+        {
+          language: this.user.preferences.language,
+        },
+      );
+      const i18nData = window && window['habitica-i18n'];
+      i18nData.strings = { ...i18nData.strings, ...contentTranslations.data };
+      this.$loadLocale(i18nData);
+    },
+    async loadAllTranslations () {
+      if (window && window['habitica-i18n']) {
+        if (this.user.preferences.language === window['habitica-i18n'].language.code) {
+          return this.loadContentTranslations();
+        }
+      }
+      await axios.get(
+        '/api/v4/i18n/core',
+        {
+          language: this.user.preferences.language,
+          headers: {
+            'Cache-Control': 'no-cache',
+            Pragma: 'no-cache',
+            Expires: '0',
+          },
+        },
+      );
+      return this.loadContentTranslations();
+    },
   },
 };
 </script>

website/client/src/router/index.js

@@ -11,7 +11,6 @@ import { DEPRECATED_ROUTES } from '@/router/deprecated-routes';
 
 // NOTE: when adding a page make sure to implement the `common:setTitle` action
 
-const RegisterLoginReset = () => import(/* webpackChunkName: "auth" */'@/components/auth/registerLoginReset');
 const Logout = () => import(/* webpackChunkName: "auth" */'@/components/auth/logout');
 
 // Hall
@@ -79,11 +78,6 @@ const router = new VueRouter({
   // in the route component to set a specific subtitle for the page.
   routes: [
     { name: 'logout', path: '/logout', component: Logout },
-    {
-      name: 'resetPassword', path: '/reset-password', component: RegisterLoginReset, meta: { requiresLogin: false },
-    }, {
-      name: 'forgotPassword', path: '/forgot-password', component: RegisterLoginReset, meta: { requiresLogin: false },
-    },
     { name: 'tasks', path: '/', component: UserTasks },
     {
       name: 'userProfile',

website/client/src/router/static-routes.js

@@ -57,6 +57,9 @@ export const STATIC_ROUTES = {
     {
       name: 'features', path: 'features', component: FeaturesPage, meta: { requiresLogin: false },
     },
+    {
+      name: 'forgotPassword', path: '/forgot-password', component: RegisterLoginReset, meta: { requiresLogin: false },
+    },
     {
       name: 'front', path: 'front', component: HomePage, meta: { requiresLogin: false },
     },
@@ -90,6 +93,9 @@ export const STATIC_ROUTES = {
     {
       name: 'register', path: '/register', component: RegisterLoginReset, meta: { requiresLogin: false },
     },
+    {
+      name: 'resetPassword', path: '/reset-password', component: RegisterLoginReset, meta: { requiresLogin: false },
+    },
     {
       name: 'terms', path: 'terms', component: TermsPage, meta: { requiresLogin: false },
     },

website/client/src/store/actions/auth.js

@@ -1,8 +1,6 @@
 import axios from 'axios';
 import { authAsCredentialsState, LOCALSTORAGE_AUTH_KEY } from '@/libs/auth';
 
-const GA_ID = import.meta.env.GA_ID;
-
 function saveLocalDataAuth (store, apiId, apiToken) {
   const credentialsObj = {
     auth: {
@@ -123,9 +121,6 @@ export async function appleAuth (store, params) {
 export function logout (store, options = {}) {
   localStorage.clear();
   sessionStorage.clear();
-  if (window.gtag) {
-    window.gtag('config', GA_ID, { user_id: null });
-  }
   const query = options.redirectToLogin === true ? '?redirectToLogin=true' : '';
   window.location.href = `/logout-server${query}`;
 }

website/client/src/store/actions/chat.js

@@ -3,7 +3,7 @@ import Vue from 'vue';
 import * as Analytics from '@/libs/analytics';
 
 export async function getChat (store, payload) {
-  const response = await axios.get(`/api/v4/groups/${payload.groupId}/chat`);
+  const response = await axios.get(`/api/v4/groups/${payload.groupId}/chat?limit=400`);
 
   return response.data.data;
 }

website/client/vite.config.mjs

@@ -26,7 +26,6 @@ const envVars = [
   'EMAILS_COMMUNITY_MANAGER_EMAIL',
   'EMAILS_TECH_ASSISTANCE_EMAIL',
   'EMAILS_PRESS_ENQUIRY_EMAIL',
-  'GA_ID',
   'STRIPE_PUB_KEY',
   'GOOGLE_CLIENT_ID',
   'APPLE_AUTH_CLIENT_ID',

website/common/locales/bg/achievements.json

@@ -1,5 +1,5 @@
 {
-    "achievement": "Достижения",
+    "achievement": "Постижение",
     "onwards": "Напред!",
     "levelup": "Изпълнявайки целите си в истинския живот, Вие се качихте ниво и здравето Ви беше запълнено!",
     "reachedLevel": "Достигнахте Ниво <%= level %>",
@@ -106,5 +106,25 @@
     "achievementSeasonalSpecialist": "Сезонен експерт",
     "achievementRedLetterDayText": "Са събрали всички Червени животни.",
     "achievementSeeingRedModalText": "Събрали сте всички Червени любимци!",
-    "achievementSkeletonCrewText": "Събрали са всички Скелетни животни."
+    "achievementSkeletonCrewText": "Събрали са всички Скелетни животни.",
+    "achievementVioletsAreBlueText": "Събра всички сини пет-ове Памучен бонбон.",
+    "achievementWildBlueYonderModalText": "Ти укроти всички маунт-ове Памучен бонбон синьо!",
+    "achievementWildBlueYonderText": "Укроти всички маунт-ове Памучен бонбон синьо.",
+    "achievementVioletsAreBlue": "Розите са червени, Теменужките са сини",
+    "achievementVioletsAreBlueModalText": "Ти събра (или колекционира) всички домашни любимци (или пет-ове) от серията Памучен бонбон синьо!",
+    "achievementWildBlueYonder": "Дивото синьо небе",
+    "achievementSeasonalSpecialistText": "Завърши всички сезонни куестове от пролетта и зимата: Лов на яйца (Egg Hunt), Дядо Коледа-ловец (Trapper Santa) и Намери мечето (Find the Cub)!",
+    "achievementSeasonalSpecialistModalText": "Вие завършихте всичките сезонни куестове!",
+    "achievementDomesticatedModalText": "Ти събра (или колекционира) всички опитомени домашни любимци (пет-ове)!",
+    "achievementDomesticatedText": "Излюпи (или Отгледа) всички стандартни цветове на опитомени домашни любимци (пет-ове): пор, морско свинче, петел, летящо прасе), плъх, заек, кон и крава!",
+    "achievementShadyCustomerText": "Събра всички пет-ове Сянка.",
+    "achievementShadyCustomerModalText": "Събра всички пет-ове Сянка.",
+    "achievementShadyCustomer": "Сенчест тип",
+    "achievementDomesticated": "И-Я–И–Я–ЙО",
+    "achievementZodiacZookeeper": "Пазител на Зодиака",
+    "achievementShadeOfItAll": "В сянката на света",
+    "achievementShadeOfItAllText": "Опитоми всички сенчести коне.",
+    "achievementZodiacZookeeperText": "Излюпи всички стандартни животни(базов цвят) от зодиака: Плъх, Крава, Заек, Змия, Овца, Маймуна, Кокошка, Вълк, Тигър, Летящо прасе, и Дракон!",
+    "achievementZodiacZookeeperModalText": "Събрахте всички животни от зодиака!",
+    "achievementBirdsOfAFeather": "От една порода"
 }

website/common/locales/bg/challenge.json

@@ -2,11 +2,10 @@
     "challenge": "Предизвикателство",
     "challengeDetails": "Предизвикателствата са обществени събития, в които играчите се състезават и печелят награди като изпълняват няколко свързани по някакъв начин задачи.",
     "brokenChaLink": "Повредена връзка на предизвикателство",
-    "brokenTask": "Повредена връзка на предизвикателство: тази задача е била част от предизвикателство, но е била премахната от него. Какво бихте искали да направите?",
     "keepIt": "Запазване",
     "removeIt": "Премахване",
     "brokenChallenge": "Повредена връзка на предизвикателство: тази задача е била част от предизвикателство, но то (или групата) е било изтрито. Какво бихте искали да направите с останалите задачи?",
-    "challengeCompleted": "Това предизвикателство е приключило и победителят е <span class=\"badge\"><%- user %></span>! Какво искате да направите с останалите задачи?",
+    "challengeCompleted": "Това предизвикателство е приключило и победителят е <span class=\"badge\"><%= user %></span>! Какво искате да направите с останалите задачи?",
     "unsubChallenge": "Повредена връзка на предизвикателство: тази задача е била част от предизвикателство, но Вие сте се отписали от него. Какво искате да направите с останалите задачи?",
     "challenges": "Предизвикателства",
     "endDate": "Крайна дата",

website/common/locales/bg/content.json

@@ -182,7 +182,7 @@
     "questEggVelociraptorText": "Велоцираптор",
     "questEggVelociraptorMountText": "Велоцираптор",
     "questEggVelociraptorAdjective": "умен",
-    "eggNotes": "Намерете излюпваща отвара, която да излеете върху това яйце и от него ще се излюпи <%= eggAdjective(locale) %> <%= eggText(locale) %>.",
+    "eggNotes": "Намерете излюпваща отвара, която да излеете върху това яйце и от него ще се излюпи <%= eggAdjective %> <%= eggText %>.",
     "hatchingPotionBase": "Нормален цвят",
     "hatchingPotionWhite": "Бял цвят",
     "hatchingPotionDesert": "Пустинен цвят",
@@ -211,7 +211,7 @@
     "hatchingPotionGlow": "Светещо в тъмното",
     "hatchingPotionFrost": "Скреж",
     "hatchingPotionIcySnow": "Леден сняг",
-    "hatchingPotionNotes": "Излейте това върху яйце и от него ще се излюпи любимец с(ъс) <%= potText(locale) %>.",
+    "hatchingPotionNotes": "Излейте това върху яйце и от него ще се излюпи любимец с(ъс) <%= potText %>.",
     "foodMeat": "Месо",
     "foodMeatThe": "Месото",
     "foodMeatA": "Месо",

website/common/locales/bg/generic.json

@@ -190,7 +190,7 @@
     "messages": "Съобщения",
     "emptyMessagesLine1": "Нямате съобщения",
     "emptyMessagesLine2": "Можете да изпратите ново съобщение на потребител, като посетите профила им и докоснете бутона \"Съобщение\".",
-    "userSentMessage": "<span class=\"notification-bold\"><%- user %></span> Ви изпрати съобщение",
+    "userSentMessage": "<span class=\"notification-bold\"><%= user %></span> Ви изпрати съобщение",
     "letsgo": "Хойде!",
     "selected": "Избрано",
     "howManyToBuy": "Колко искате да купите?",

website/common/locales/bg/groups.json

@@ -24,14 +24,14 @@
     "userId": "Потребителски идентификатор",
     "invite": "Покана",
     "leave": "Напускане",
-    "invitedToParty": "Получихте покана за присъединяване към групата <span class=\"notification-bold\"><%- party %></span>",
-    "invitedToPrivateGuild": "Получихте покана за присъединяване към частната гилдия <span class=\"notification-bold\"><%- guild %></span>",
-    "invitedToPublicGuild": "Получихте покана за присъединяване към гилдията <span class=\"notification-bold-blue\"><%- guild %></span>",
+    "invitedToParty": "Получихте покана за присъединяване към групата <span class=\"notification-bold\"><%= party %></span>",
+    "invitedToPrivateGuild": "Получихте покана за присъединяване към частната гилдия <span class=\"notification-bold\"><%= guild %></span>",
+    "invitedToPublicGuild": "Получихте покана за присъединяване към гилдията <span class=\"notification-bold-blue\"><%= guild %></span>",
     "invitationAcceptedHeader": "Поканата Ви беше приета",
     "invitationAcceptedBody": "<%= username %> прие поканата Ви да се присъедини към <%= groupName %>!",
     "systemMessage": "Системно съобщение",
-    "newMsgGuild": "Има нови публикации в <span class=\"notification-bold-blue\"><%- name %></span>",
-    "newMsgParty": "Има нови публикации в групата Ви — <span class=\"notification-bold-blue\"><%- name %></span>",
+    "newMsgGuild": "Има нови публикации в <span class=\"notification-bold-blue\"><%= name %></span>",
+    "newMsgParty": "Има нови публикации в групата Ви — <span class=\"notification-bold-blue\"><%= name %></span>",
     "chat": "Съобщения",
     "sendChat": "Изпращане на съобщението",
     "group": "Група",
@@ -151,14 +151,14 @@
     "onlyGroupLeaderCanEditTasks": "Нямате право да управлявате задачите!",
     "onlyGroupTasksCanBeAssigned": "Само групови задачи могат да бъдат зададени",
     "assignedTo": "Назначена на",
-    "assignedToUser": "Назначена на <strong><%- userName %></strong>",
+    "assignedToUser": "Назначена на <strong><%= userName %></strong>",
     "assignedToMembers": "Назначена на <strong><%= userCount %> членове </strong>",
     "assignedToYouAndMembers": "Назначена на Вас и още <strong><%= userCount %> членове</strong>",
     "youAreAssigned": "Тази задача е назначена на Вас",
     "taskIsUnassigned": "Тази задача не е зададена на никого",
     "confirmUnClaim": "Наистина ли искате да оставите тази задача?",
     "confirmNeedsWork": "Наистина ли искате да отбележите, че тази задача се нуждае от още работа?",
-    "userRequestsApproval": "<strong><%- userName %></strong> иска одобрение",
+    "userRequestsApproval": "<strong><%= userName %></strong> иска одобрение",
     "userCountRequestsApproval": "<strong><%= userCount %> членове</strong> искат одобрение",
     "youAreRequestingApproval": "Вие искате одобрение",
     "chatPrivilegesRevoked": "Не можете да направите това, защото привилегиите Ви в чата са Ви били отнети. За детайли или запитване за връшане на привилегии, моля пратете email на нашия Обществен Оправител на admin@habitica.com или попитайте вашия родител или настойник да им прати email. Моля, напишете и потребителското си име в писмото. Ако модератор вече ви е казал че блокирането ви към чата е временно, няма нужда да пращате email.",
@@ -168,9 +168,9 @@
     "claim": "Вземане на Задача",
     "removeClaim": "Отказване от задачата",
     "onlyGroupLeaderCanManageSubscription": "Само водачът на групата може да управлява абонамента ѝ",
-    "yourTaskHasBeenApproved": "Задачата Ви <span class=\"notification-green notification-bold\"><%- taskText %></span>, беше одобрена.",
-    "taskNeedsWork": "<span class=\"notification-bold\"><%- managerName %></span> отбеляза, че задачата <span class=\"notification-bold\"><%- taskText %></span> се нуждае от още работа.",
-    "userHasRequestedTaskApproval": "<span class=\"notification-bold\"><%- user %></span> помоли следната задача да бъде одобрена: <span class=\"notification-bold\"><%- taskName %></span>",
+    "yourTaskHasBeenApproved": "Задачата Ви <span class=\"notification-green notification-bold\"><%= taskText %></span>, беше одобрена.",
+    "taskNeedsWork": "<span class=\"notification-bold\"><%= managerName %></span> отбеляза, че задачата <span class=\"notification-bold\"><%= taskText %></span> се нуждае от още работа.",
+    "userHasRequestedTaskApproval": "<span class=\"notification-bold\"><%= user %></span> помоли следната задача да бъде одобрена: <span class=\"notification-bold\"><%= taskName %></span>",
     "approve": "Одобряване",
     "approveTask": "Одобряване на задачата",
     "needsWork": "Нуждае се от още работа",
@@ -183,8 +183,8 @@
     "userIsClamingTask": "`<%= username %> пое:` <%= task %>",
     "approvalRequested": "Заявено е одобрение",
     "cantDeleteAssignedGroupTasks": "Не можете да изтриете груповите задачи, които са Ви разпределени.",
-    "groupPlanUpgraded": "<strong><%- groupName %></strong> премина към групов план!",
-    "groupPlanCreated": "Групата <strong><%- groupName %></strong> беше създадена!",
+    "groupPlanUpgraded": "<strong><%= groupName %></strong> премина към групов план!",
+    "groupPlanCreated": "Групата <strong><%= groupName %></strong> беше създадена!",
     "onlyGroupLeaderCanInviteToGroupPlan": "Само водачът на групата може да кани хора в група с абонамент.",
     "paymentDetails": "Подробности за разплащането",
     "aboutToJoinCancelledGroupPlan": "На път сте да се присъедините към група, чийто план е прекратен. НЯМА да получите безплатен абонамент.",
@@ -325,8 +325,8 @@
     "PMDisabled": "Деактивиране на лични съобщения",
     "groupActivityNotificationTitle": "<%= user %> публикува в <%= group %>",
     "suggestedGroup": "Предложено, защото сте нови в Habitica.",
-    "taskClaimed": "<%- userName %> взеха задачата <span class=\"notification-bold\"><%- taskText %></span>.",
-    "youHaveBeenAssignedTask": "<%- managerName %> ви присвои задачата <span class=\"notification-bold\"><%- taskText %></span>.",
+    "taskClaimed": "<%= userName %> взеха задачата <span class=\"notification-bold\"><%= taskText %></span>.",
+    "youHaveBeenAssignedTask": "<%= managerName %> ви присвои задачата <span class=\"notification-bold\"><%= taskText %></span>.",
     "userWithUsernameOrUserIdNotFound": "Потребителското име или Потребителският Идентификатор не бяха намерени.",
     "usernameOrUserId": "Потребителско име или Потребителски Идентификатор",
     "sendGiftToWhom": "На кой бихте искали да пратите подарък?",

website/common/locales/bg/npc.json

@@ -82,13 +82,12 @@
     "paymentMethods": "Купуване чрез",
     "paymentSuccessful": "Плащането Ви беше успешно!",
     "paymentYouReceived": "Получихте:",
-    "paymentYouSentGems": "Изпратихте на <strong><%- name %></strong>:",
-    "paymentYouSentSubscription": "Изпратихте на <strong><%- name %></strong> <%= months %>-месечен абонамент за Хабитика.",
+    "paymentYouSentGems": "Изпратихте на <strong><%= name %></strong>:",
+    "paymentYouSentSubscription": "Изпратихте на <strong><%= name %></strong> <%= months %>-месечен абонамент за Хабитика.",
     "paymentSubBilling": "Абонаментът Ви ще бъде таксуван с <strong>$<%= amount %></strong> всеки <strong><%= months %> месеца</strong>.",
     "success": "Готово!",
     "classGear": "Снаряжение за класа",
     "classGearText": "Поздравления за избора на клас! Добавих новата Ви основна екипировка в инвентара Ви. Погледнете по-долу, за да я екипирате!",
-    "autoAllocate": "Автоматично разпределяне",
     "spells": "Умения",
     "skillsTitle": "Умения",
     "toDo": "Задача",

website/common/locales/bg/pets.json

@@ -66,8 +66,8 @@
     "mountNotOwned": "Не притежавате този прево.",
     "feedPet": "Искате ли да дадете <%= text %> на <%= name %>?",
     "raisedPet": "Вие отгледахте <%= pet %>!",
-    "petName": "<%= egg(locale) %> с(ъс) <%= potion(locale) %>",
-    "mountName": "<%= mount(locale) %> с(ъс) <%= potion(locale) %>",
+    "petName": "<%= egg %> с(ъс) <%= potion %>",
+    "mountName": "<%= mount %> с(ъс) <%= potion %>",
     "keyToPets": "Ключ от зверилника за любимци",
     "keyToPetsDesc": "Освобождаване на всички стандартни любимци, за да можете да ги съберете отново. (Това не засяга любимците от мисии и редките любимци.)",
     "keyToMounts": "Ключ от зверилника за превози",

website/common/locales/cs/challenge.json

@@ -2,11 +2,10 @@
     "challenge": "Výzva",
     "challengeDetails": "Výzvy jsou komunitní události, ve kterých hráči soutěží a získávají odměny za plnění úkolů.",
     "brokenChaLink": "Nefunkční odkaz na výzvu",
-    "brokenTask": "Nefunkční odkaz na výzvu: tento úkol byl součástí výzvy, ale byl z ní odstraněn. Co chceš dělat?",
     "keepIt": "Ponechat",
     "removeIt": "Odstranit",
     "brokenChallenge": "Nefunkční odkaz na výzvu: tento úkol byl součástí výzvy, ale ta (nebo skupina, která ji vytvořila) byla odstraněna. Co chceš dělat s osiřelými úkoly?",
-    "challengeCompleted": "Výzva byla ukončena a vítězem se stal <span class=\"badge\"><%- user %></span>! Co chceš dělat s osiřelými úkoly?",
+    "challengeCompleted": "Výzva byla ukončena a vítězem se stal <span class=\"badge\"><%= user %></span>! Co chceš dělat s osiřelými úkoly?",
     "unsubChallenge": "Nefunkční odkaz na výzvu: tento úkol byl součástí výzvy, ze které jsi se odhlásil/a. Co chceš dělat s osiřelými úkoly?",
     "challenges": "Výzvy",
     "endDate": "Končí",

website/common/locales/cs/content.json

@@ -182,7 +182,7 @@
     "questEggVelociraptorText": "Velociraptor",
     "questEggVelociraptorMountText": "Velociraptor",
     "questEggVelociraptorAdjective": "chytrý",
-    "eggNotes": "Najdi líhnoucí lektvar, nalij ho na vejce a to se vylíhne v <%= eggAdjective(locale) %> <%= eggText(locale) %>.",
+    "eggNotes": "Najdi líhnoucí lektvar, nalij ho na vejce a to se vylíhne v <%= eggAdjective %> <%= eggText %>.",
     "hatchingPotionBase": "Základní",
     "hatchingPotionWhite": "Bílý",
     "hatchingPotionDesert": "Pouštní",
@@ -211,7 +211,7 @@
     "hatchingPotionGlow": "Ve tmě svítící",
     "hatchingPotionFrost": "Zmrzlý",
     "hatchingPotionIcySnow": "Ledově Sněhový",
-    "hatchingPotionNotes": "Nalij ho na vejce a vylíhne se ti <%= potText(locale) %> mazlíček.",
+    "hatchingPotionNotes": "Nalij ho na vejce a vylíhne se ti <%= potText %> mazlíček.",
     "foodMeat": "Maso",
     "foodMeatThe": "Maso",
     "foodMeatA": "Maso",