Merge branch 'fiz/challenge-modal-fixes' into fiz/updated-end-challenge-modal

end challenge modal fixes
lint error fixes
2025-10-27 11:12:28 +01:00 · 2025-08-06 14:09:37 -05:00 · 2025-08-06 14:09:10 -05:00 · 2025-08-06 13:35:43 -05:00 · 2025-08-06 13:28:28 -05:00 · 2025-08-06 13:28:18 -05:00
17 changed files with 465 additions and 33 deletions
--- a/test/api/unit/libs/highlightMentions.test.js
+++ b/test/api/unit/libs/highlightMentions.test.js
@@ -47,6 +47,12 @@ describe('highlightMentions', () => {
    expect(result[0]).to.equal('[@user-dash](/profile/444): message [@user_underscore](/profile/555)');
  });

+  it('highlights users with case-insensitive matching', async () => {
+    const text = '@USER: message @User2 @USER3';
+    const result = await highlightMentions(text);
+    expect(result[0]).to.equal('[@USER](/profile/111): message [@User2](/profile/222) [@USER3](/profile/333)');
+  });
+
  it('doesn\'t highlight nonexisting users', async () => {
    const text = '@nouser message';
    const result = await highlightMentions(text);
--- a/test/api/v3/integration/chat/POST-chat.test.js
+++ b/test/api/v3/integration/chat/POST-chat.test.js
@@ -238,6 +238,18 @@ describe('POST /chat', () => {
    expect(groupMessages[0].id).to.exist;
  });

+  it('creates a chat with case-insensitive mentions', async () => {
+    const originalUsername = member.auth.local.username;
+    const uppercaseUsername = originalUsername.toUpperCase();
+    const messageWithMentions = `hi @${uppercaseUsername}`;
+    const newMessage = await user.post(`/groups/${groupWithChat._id}/chat`, { message: messageWithMentions });
+    const groupMessages = await user.get(`/groups/${groupWithChat._id}/chat`);
+
+    expect(newMessage.message.id).to.exist;
+    expect(newMessage.message.text).to.include(`[@${uppercaseUsername}](/profile/${member._id})`);
+    expect(groupMessages[0].id).to.exist;
+  });
+
  it('creates a chat with a max length of 3000 chars', async () => {
    const veryLongMessage = `
    123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789.
--- a/test/api/v3/integration/content/GET-content.test.js
+++ b/test/api/v3/integration/content/GET-content.test.js
@@ -1,6 +1,7 @@
 import {
  requester,
  translate as t,
+  generateUser,
 } from '../../../../helpers/api-integration/v3';
 import i18n from '../../../../../website/common/script/i18n';

@@ -56,4 +57,28 @@ describe('GET /content', () => {
    const res = await requester().get('/content?filter=backgroundsFlat,invalid');
    expect(res).to.not.have.property('backgroundsFlat');
  });
+
+  describe('authenticated user', () => {
+    let user;
+    it('returns content in user\'s preferred language when no language parameter is provided', async () => {
+      user = await generateUser({ 'preferences.language': 'de' });
+      const res = await user.get('/content');
+      expect(res).to.have.nested.property('backgrounds.backgrounds062014.beach');
+      expect(res.backgrounds.backgrounds062014.beach.text).to.equal(i18n.t('backgroundBeachText', 'de'));
+    });
+
+    it('respects language parameter over user\'s preferred language', async () => {
+      user = await generateUser({ 'preferences.language': 'de' });
+      const res = await user.get('/content?language=fr');
+      expect(res).to.have.nested.property('backgrounds.backgrounds062014.beach');
+      expect(res.backgrounds.backgrounds062014.beach.text).to.equal(i18n.t('backgroundBeachText', 'fr'));
+    });
+
+    it('falls back to English if user\'s preferred language is invalid', async () => {
+      user = await generateUser({ 'preferences.language': 'invalid_lang' });
+      const res = await user.get('/content');
+      expect(res).to.have.nested.property('backgrounds.backgrounds062014.beach');
+      expect(res.backgrounds.backgrounds062014.beach.text).to.equal(t('backgroundBeachText'));
+    });
+  });
 });
--- a/website/client/src/assets/svg/for-css/end_challenge_badge.svg
+++ b/website/client/src/assets/svg/for-css/end_challenge_badge.svg
--- a/website/client/src/assets/svg/for-css/orange100_red100_yellow100_gems.svg
+++ b/website/client/src/assets/svg/for-css/orange100_red100_yellow100_gems.svg
@@ -0,0 +1,29 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M58.1792 31.6843L46.8536 22.3769L23.918 28.6988L18.861 42.5218L44.341 58.5813L58.1792 31.6843Z" fill="#FF944C"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M46.6218 34.5148L46.1108 26.1328L36.2812 28.8422L46.6218 34.5148Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M30.2393 39.0304L26.4518 31.5515L36.2813 28.8422L30.2393 39.0304Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M46.6218 34.5148L36.2813 28.8422L30.2393 39.0304L46.6218 34.5148Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M53.8301 32.5279L46.1108 26.1328L46.6218 34.5148L53.8301 32.5279Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M23.0309 41.0173L26.4518 31.5516L30.2393 39.0304L23.0309 41.0173Z" fill="#FA8537"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M53.8301 32.5279L46.6218 34.5148L43.0424 53.79L53.8301 32.5279Z" fill="#FA8537"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M23.0309 41.0173L30.2393 39.0304L43.0425 53.79L23.0309 41.0173Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M46.6218 34.5148L30.2393 39.0304L43.0425 53.79L46.6218 34.5148Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.555 4.15937L47.026 0.420004L38.7773 1.59601L36.4144 6.17539L44.5675 12.8919L50.555 4.15937Z" fill="#FFBE5D"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M46.414 4.62854L46.6034 1.6924L43.0682 2.1964L46.414 4.62854Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M40.5221 5.46854L39.5331 2.7004L43.0682 2.1964L40.5221 5.46854Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M46.414 4.62854L43.0683 2.1964L40.5221 5.46855L46.414 4.62854Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M49.0064 4.25894L46.6034 1.6924L46.414 4.62854L49.0064 4.25894Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M37.9296 5.83815L39.5331 2.70041L40.5221 5.46855L37.9296 5.83815Z" fill="#FFA624"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M49.0064 4.25893L46.414 4.62853L44.3259 11.1688L49.0064 4.25893Z" fill="#FFA624"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M37.9297 5.83815L40.5221 5.46855L44.326 11.1688L37.9297 5.83815Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M46.414 4.62854L40.5221 5.46855L44.326 11.1688L46.414 4.62854Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.2986 16.7775L24.6513 8.36623L11.1016 3.94533L4.07056 9.19883L11.614 25.6769L27.2986 16.7775Z" fill="#FF6165"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M20.5864 14.3719L23.0573 10.0026L17.2502 8.10789L20.5864 14.3719Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M10.908 11.2141L11.4432 6.21322L17.2502 8.10789L10.908 11.2141Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M20.5864 14.3719L17.2502 8.10789L10.9081 11.2141L20.5864 14.3719Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M24.8449 15.7613L23.0573 10.0026L20.5864 14.3719L24.8449 15.7613Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M6.64955 9.82464L11.4432 6.21321L10.908 11.2141L6.64955 9.82464Z" fill="#F23035"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M24.8449 15.7613L20.5864 14.3719L12.5221 22.8464L24.8449 15.7613Z" fill="#F23035"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M6.64959 9.82464L10.9081 11.2141L12.5221 22.8463L6.64959 9.82464Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M20.5864 14.3719L10.9081 11.2141L12.5221 22.8463L20.5864 14.3719Z" fill="white"/>
+</svg>
--- a/website/client/src/assets/svg/for-css/purple200_green10_blue100_gems.svg
+++ b/website/client/src/assets/svg/for-css/purple200_green10_blue100_gems.svg
@@ -0,0 +1,29 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.82083 31.6843L17.1464 22.3769L40.082 28.6988L45.139 42.5218L19.659 58.5813L5.82083 31.6843Z" fill="#24CC8F"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17.3782 34.5148L17.8892 26.1328L27.7188 28.8422L17.3782 34.5148Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M33.7607 39.0304L37.5482 31.5515L27.7187 28.8422L33.7607 39.0304Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M17.3782 34.5148L27.7187 28.8422L33.7607 39.0304L17.3782 34.5148Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M10.1699 32.5279L17.8892 26.1328L17.3782 34.5148L10.1699 32.5279Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M40.9691 41.0173L37.5482 31.5516L33.7607 39.0304L40.9691 41.0173Z" fill="#1CA372"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M10.1699 32.5279L17.3782 34.5148L20.9576 53.79L10.1699 32.5279Z" fill="#1CA372"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M40.9691 41.0173L33.7607 39.0304L20.9575 53.79L40.9691 41.0173Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17.3782 34.5148L33.7607 39.0304L20.9575 53.79L17.3782 34.5148Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.445 4.15937L16.974 0.420004L25.2227 1.59601L27.5856 6.17539L19.4325 12.8919L13.445 4.15937Z" fill="#925CF3"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17.586 4.62854L17.3966 1.6924L20.9318 2.1964L17.586 4.62854Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M23.4779 5.46854L24.4669 2.7004L20.9318 2.1964L23.4779 5.46854Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M17.586 4.62854L20.9317 2.1964L23.4779 5.46855L17.586 4.62854Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M14.9936 4.25894L17.3966 1.6924L17.586 4.62854L14.9936 4.25894Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M26.0704 5.83815L24.4669 2.70041L23.4779 5.46855L26.0704 5.83815Z" fill="#4F2A93"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M14.9936 4.25893L17.586 4.62853L19.6741 11.1688L14.9936 4.25893Z" fill="#4F2A93"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M26.0703 5.83815L23.4779 5.46855L19.674 11.1688L26.0703 5.83815Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17.586 4.62854L23.4779 5.46855L19.674 11.1688L17.586 4.62854Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7014 16.7775L39.3487 8.36623L52.8984 3.94533L59.9294 9.19883L52.386 25.6769L36.7014 16.7775Z" fill="#50B5E9"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M43.4136 14.3719L40.9427 10.0026L46.7498 8.10789L43.4136 14.3719Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M53.092 11.2141L52.5568 6.21322L46.7498 8.10789L53.092 11.2141Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M43.4136 14.3719L46.7498 8.10789L53.0919 11.2141L43.4136 14.3719Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M39.1551 15.7613L40.9427 10.0026L43.4136 14.3719L39.1551 15.7613Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M57.3504 9.82464L52.5568 6.21321L53.092 11.2141L57.3504 9.82464Z" fill="#46A7D9"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M39.1551 15.7613L43.4136 14.3719L51.4779 22.8464L39.1551 15.7613Z" fill="#46A7D9"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M57.3504 9.82464L53.0919 11.2141L51.4779 22.8463L57.3504 9.82464Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M43.4136 14.3719L53.0919 11.2141L51.4779 22.8463L43.4136 14.3719Z" fill="white"/>
+</svg>
--- a/website/client/src/components/achievements/onboardingComplete.vue
+++ b/website/client/src/components/achievements/onboardingComplete.vue
@@ -117,7 +117,7 @@ export default {
    closeWithAction () {
      this.close();
      setTimeout(() => {
-        this.$router.push({ name: 'achievements' });
+        this.$router.push(`/profile/${this.$store.state.user.data._id}#achievements`);
      }, 200);
    },
  },
--- a/website/client/src/components/challenges/closeChallengeModal.vue
+++ b/website/client/src/components/challenges/closeChallengeModal.vue
@@ -4,6 +4,7 @@
      id="close-challenge-modal"
      :title="$t('endChallenge')"
      size="md"
+      :hide-header="false"
    >
      <div
        slot="modal-header"
@@ -15,6 +16,15 @@
        >
          {{ $t('endChallenge') }}
        </h2>
+        <button
+          class="close-button"
+          @click="$root.$emit('bv::hide::modal', 'close-challenge-modal')"
+        >
+          <div
+            class="svg-icon"
+            v-html="icons.close"
+          ></div>
+        </button>
      </div>
      <div class="row text-center">
        <span
@@ -28,28 +38,67 @@
          class="col-12"
        >
          <div class="col-12">
-            <div class="support-habitica">
-              <!-- @TODO: Add challenge achievement badge here-->
+            <div class="badge-section">
+              <div
+                class="gems-left"
+                v-html="icons.gemsOrange"
+              ></div>
+              <div
+                class="challenge-badge"
+                v-html="icons.endChallengeBadge"
+              ></div>
+              <div
+                class="gems-right"
+                v-html="icons.gemsPurple"
+              ></div>
            </div>
          </div>
          <div class="col-12">
            <strong v-once>{{ $t('selectChallengeWinnersDescription') }}</strong>
          </div>
          <div class="col-12">
-            <member-search-dropdown
-              :text="winnerText"
-              :members="members"
-              :challenge-id="challengeId"
-              @member-selected="selectMember"
-            />
+            <div class="search-input-wrapper">
+              <div
+                class="search-icon"
+                v-html="icons.search"
+              ></div>
+              <input
+                v-model="searchTerm"
+                class="search-input"
+                type="text"
+                :placeholder="'@' + $t('username')"
+                @input="searchMembers"
+                @focus="showResults = true"
+                @blur="handleBlur"
+              >
+              <div
+                v-if="showResults && filteredMembers.length > 0"
+                class="search-results"
+              >
+                <div
+                  v-for="member in filteredMembers"
+                  :key="member._id"
+                  class="search-result-item"
+                  @mousedown="selectMember(member)"
+                >
+                  {{ getMemberDisplayName(member) }}
+                </div>
+              </div>
+            </div>
          </div>
          <div class="col-12">
            <button
-              v-once
-              class="btn btn-primary"
+              class="btn award-winner-btn"
+              :class="{'has-winner': winner._id}"
+              :disabled="!winner._id"
              @click="closeChallenge"
            >
-              {{ $t('awardWinners') }}
+              <span>{{ $t('awardWinners') }}</span>
+              <div
+                class="gem-icon"
+                v-html="icons.gem"
+              ></div>
+              <span>{{ prize }} {{ prize === 1 ? $t('gem') : $t('gems') }}</span>
            </button>
          </div>
        </span>
@@ -60,14 +109,24 @@
          </div>
        </div>
        <div class="col-12">
-          <strong v-once>{{ $t('doYouWantedToDeleteChallenge') }}</strong>
+          <strong
+            v-once
+            class="delete-challenge-text"
+          >{{ $t('doYouWantedToDeleteChallenge') }}</strong>
+        </div>
+        <div class="col-12 refund-text">
+          {{ $t('deleteChallengeRefundDescription') }}
        </div>
        <div class="col-12">
          <button
            v-once
-            class="btn btn-danger"
+            class="btn btn-danger delete-challenge-btn"
            @click="deleteChallenge()"
          >
+            <div
+              class="delete-icon"
+              v-html="icons.deleteIcon"
+            ></div>
            {{ $t('deleteChallenge') }}
          </button>
        </div>
@@ -95,13 +154,185 @@
    .header-wrap {
      width: 100%;
      padding-top: 2em;
+      position: relative;
    }

-    .support-habitica {
-      background-image: url('@/assets/svg/for-css/support-habitica-gems.svg?raw');
-      width: 325px;
-      height: 89px;
+    .close-button {
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      background: none;
+      border: none;
+      padding: 0.5rem;
+      cursor: pointer;
+      opacity: 0.5;
+      transition: opacity 0.2s ease;
+
+      &:hover {
+        opacity: 1;
+      }
+
+      .svg-icon {
+        width: 16px;
+        height: 16px;
+        color: $gray-10;
+      }
+    }
+
+    .search-input-wrapper {
+      position: relative;
+      width: 384px;
      margin: 0 auto;
+
+      .search-icon {
+        position: absolute;
+        left: 12px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 16px;
+        height: 16px;
+        color: $gray-200;
+        pointer-events: none;
+      }
+
+      .search-input {
+        width: 100%;
+        height: 32px;
+        padding-left: 36px;
+        padding-right: 12px;
+        border: 2px solid $gray-400;
+        border-radius: 4px;
+        font-size: 14px;
+        transition: border-color 0.2s ease;
+
+        &:focus {
+          outline: none;
+          border-color: $purple-300;
+        }
+
+        &::placeholder {
+          color: $gray-300;
+        }
+      }
+
+      .search-results {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: $white;
+        border: 1px solid $gray-400;
+        border-top: none;
+        border-radius: 0 0 4px 4px;
+        max-height: 200px;
+        overflow-y: auto;
+        z-index: 1000;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+        .search-result-item {
+          padding: 8px 12px;
+          cursor: pointer;
+          transition: background-color 0.2s ease;
+
+          &:hover {
+            background-color: $gray-700;
+          }
+        }
+      }
+    }
+
+    .delete-challenge-text {
+      color: $maroon-50;
+    }
+
+    .refund-text {
+      font-family: 'Roboto', sans-serif;
+      font-size: 14px;
+      line-height: 24px;
+      font-weight: 400;
+      color: $gray-50;
+      margin-top: 0.5em !important;
+    }
+
+    .delete-challenge-btn {
+      font-family: 'Roboto', sans-serif;
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 24px;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+
+      .delete-icon {
+        width: 16px;
+        height: 16px;
+        display: inline-flex;
+        color: $white;
+      }
+    }
+
+    .award-winner-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      background-color: $white;
+      color: $gray-200;
+      border: 1px solid $gray-400;
+      box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+      transition: all 0.2s ease;
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        
+        &:hover {
+          background-color: $white;
+        }
+      }
+
+      &.has-winner {
+        background-color: $purple-200;
+        color: $white;
+        border-color: $purple-200;
+
+        .gem-icon {
+          color: $white;
+        }
+      }
+
+      &:hover:not(.has-winner):not(:disabled) {
+        background-color: $gray-700;
+      }
+
+      .gem-icon {
+        width: 20px;
+        height: 20px;
+        display: inline-flex;
+        align-items: center;
+        color: $gems-color;
+      }
+    }
+
+    .badge-section {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 1.5rem;
+      margin: 0 auto;
+      padding: 1rem 0;
+
+      .gems-left, .gems-right {
+        width: 64px;
+        height: 64px;
+        flex-shrink: 0;
+      }
+
+      .challenge-badge {
+        width: 48px;
+        height: 52px;
+        flex-shrink: 0;
+      }
    }

    .modal-footer, .modal-header {
@@ -123,21 +354,37 @@
      margin-right: auto;
      margin-left: auto;
      font-weight: bold;
+      color: $gray-100;
    }
  }
 </style>

 <script>
-import memberSearchDropdown from '@/components/members/memberSearchDropdown';
+import searchIcon from '@/assets/svg/for-css/search.svg?raw';
+import deleteIcon from '@/assets/svg/delete.svg?raw';
+import closeIcon from '@/assets/svg/close.svg?raw';
+import gemIcon from '@/assets/svg/gem.svg?raw';
+import endChallengeBadge from '@/assets/svg/for-css/end_challenge_badge.svg?raw';
+import gemsOrange from '@/assets/svg/for-css/orange100_red100_yellow100_gems.svg?raw';
+import gemsPurple from '@/assets/svg/for-css/purple200_green10_blue100_gems.svg?raw';

 export default {
-  components: {
-    memberSearchDropdown,
-  },
  props: ['challengeId', 'members', 'prize', 'flagCount'],
  data () {
    return {
      winner: {},
+      searchTerm: '',
+      showResults: false,
+      filteredMembers: [],
+      icons: Object.freeze({
+        search: searchIcon,
+        deleteIcon,
+        close: closeIcon,
+        gem: gemIcon,
+        endChallengeBadge,
+        gemsOrange,
+        gemsPurple,
+      }),
    };
  },
  computed: {
@@ -150,8 +397,35 @@ export default {
    },
  },
  methods: {
+    searchMembers () {
+      if (!this.searchTerm) {
+        this.filteredMembers = [];
+        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);
+    },
+    getMemberDisplayName (member) {
+      if (member.auth?.local?.username) {
+        return `@${member.auth.local.username}`;
+      }
+      return member.profile?.name || '';
+    },
    selectMember (member) {
      this.winner = member;
+      this.searchTerm = this.getMemberDisplayName(member);
+      this.showResults = false;
+    },
+    handleBlur () {
+      setTimeout(() => {
+        this.showResults = false;
+      }, 200);
    },
    async closeChallenge () {
      this.challenge = await this.$store.dispatch('challenges:selectChallengeWinner', {
--- a/website/client/src/components/header/notifications/onboardingComplete.vue
+++ b/website/client/src/components/header/notifications/onboardingComplete.vue
@@ -71,7 +71,7 @@ export default {
  props: ['notification', 'canRemove'],
  methods: {
    action () {
-      this.$router.push({ name: 'achievements' });
+      this.$router.push(`/profile/${this.$store.state.user.data._id}#achievements`);
    },
  },
 };
--- a/website/client/src/components/header/notifications/unallocatedStatsPoints.vue
+++ b/website/client/src/components/header/notifications/unallocatedStatsPoints.vue
@@ -43,7 +43,7 @@ export default {
  },
  methods: {
    action () {
-      this.$router.push({ name: 'stats' });
+      this.$router.push(`/profile/${this.$store.state.user.data._id}#stats`);
    },
  },
 };
--- a/website/client/src/components/header/userDropdown.vue
+++ b/website/client/src/components/header/userDropdown.vue
@@ -176,7 +176,12 @@ export default {
      }
    },
    showProfile (startingPage) {
-      this.$router.push({ name: startingPage });
+      const userId = this.$store.state.user.data._id;
+      let path = `/profile/${userId}`;
+      if (startingPage !== 'profile') {
+        path += `#${startingPage}`;
+      }
+      this.$router.push(path);
    },
    toLearnMore () {
      this.$router.push({ name: 'subscription' });
--- a/website/client/src/components/userMenu/profile.vue
+++ b/website/client/src/components/userMenu/profile.vue
@@ -1126,7 +1126,12 @@ export default {
    this.loadUser();
    this.oldTitle = this.$store.state.title;
    this.handleExternalLinks();
-    this.selectPage(this.startingPage);
+    // Check if there's a hash in the URL to determine the starting page
+    let pageToSelect = this.startingPage;
+    if (window.location.hash && (window.location.hash === '#stats' || window.location.hash === '#achievements')) {
+      pageToSelect = window.location.hash.substring(1);
+    }
+    this.selectPage(pageToSelect);
    this.$root.$on('habitica:report-profile-result', () => {
      this.loadUser();
    });
@@ -1211,10 +1216,15 @@ export default {
    },
    selectPage (page) {
      this.selectedPage = page || 'profile';
-      window.history.replaceState(null, null, '');
+      const profileUserId = this.userId || this.userLoggedIn._id;
+      let newPath = `/profile/${profileUserId}`;
+      if (page !== 'profile') {
+        newPath += `#${page}`;
+      }
+      window.history.replaceState(null, null, newPath);
      this.$store.dispatch('common:setTitle', {
        section: this.$t('user'),
-        subSection: this.$t(this.startingPage),
+        subSection: this.$t(page),
      });
    },
    getNextIncentive () {
--- a/website/client/src/router/index.js
+++ b/website/client/src/router/index.js
@@ -98,6 +98,9 @@ const router = new VueRouter({
      path: '/profile/:userId',
      props: true,
    },
+    { name: 'profile', path: '/user/profile' },
+    { name: 'stats', path: '/user/stats' },
+    { name: 'achievements', path: '/user/achievements' },
    {
      path: '/inventory',
      component: InventoryContainer,
@@ -332,6 +335,10 @@ router.beforeEach(async (to, from, next) => {
    if (to.params.startingPage !== undefined) {
      startingPage = to.params.startingPage;
    }
+    // Check if there's a hash in the URL for stats or achievements
+    if (to.hash === '#stats' || to.hash === '#achievements') {
+      startingPage = to.hash.substring(1);
+    }
    if (from.name === null) {
      store.state.postLoadModal = `profile/${to.params.userId}`;
      return next({ name: 'tasks' });
@@ -352,10 +359,18 @@ router.beforeEach(async (to, from, next) => {
  }

  if ((to.name === 'stats' || to.name === 'achievements' || to.name === 'profile') && from.name !== null) {
+    const userId = store.state.user.data._id;
+    let redirectPath = `/profile/${userId}`;
+    if (to.name === 'stats') {
+      redirectPath += '#stats';
+    } else if (to.name === 'achievements') {
+      redirectPath += '#achievements';
+    }
    router.app.$emit('habitica:show-profile', {
+      userId,
      startingPage: to.name,
      fromPath: from.path,
-      toPath: to.path,
+      toPath: redirectPath,
    });
    return null;
  }
--- a/website/common/locales/en/challenge.json
+++ b/website/common/locales/en/challenge.json
@@ -69,6 +69,7 @@
  "awardWinners": "Award Winner",
  "doYouWantedToDeleteChallenge": "Do you want to delete this Challenge?",
  "deleteChallenge": "Delete Challenge",
+  "deleteChallengeRefundDescription": "If you delete this Challenge, you will be refunded the Gem prize and the Challenge tasks will remain on the participants' task boards.",
  "challengeNamePlaceholder": "What is your Challenge name?",
  "challengeSummary": "Summary",
  "challengeSummaryPlaceholder": "Write a short description advertising your Challenge to other Habiticans. What is the main purpose of your Challenge and why should people join it? Try to include useful keywords in the description so that Habiticans can easily find it when they search!",
--- a/website/common/locales/en/generic.json
+++ b/website/common/locales/en/generic.json
@@ -51,6 +51,7 @@
  "notEnoughGems": "Not enough Gems",
  "alreadyHave": "Whoops! You already have this item. No need to buy it again!",
  "delete": "Delete",
+  "gem": "Gem",
  "gems": "Gems",
  "needMoreGems": "Need More Gems?",
  "needMoreGemsInfo": "Purchase Gems now, or become a subscriber to buy Gems with Gold, get monthly mystery items, enjoy increased drop caps and more!",
--- a/website/server/controllers/api-v3/content.js
+++ b/website/server/controllers/api-v3/content.js
@@ -1,6 +1,7 @@
 import nconf from 'nconf';
 import { langCodes } from '../../libs/i18n';
 import { serveContent } from '../../libs/content';
+import { authWithHeaders } from '../../middlewares/auth';

 const IS_PROD = nconf.get('IS_PROD');

@@ -66,12 +67,21 @@ api.getContent = {
  method: 'GET',
  url: '/content',
  noLanguage: true,
+  middlewares: [authWithHeaders({ optional: true })],
  async handler (req, res) {
    let language = 'en';
    const proposedLang = req.query.language;

    if (proposedLang && langCodes.includes(proposedLang)) {
      language = proposedLang;
+    } else if (res.locals.user
+      && res.locals.user.preferences
+      && res.locals.user.preferences.language
+    ) {
+      const userLang = res.locals.user.preferences.language;
+      if (langCodes.includes(userLang)) {
+        language = userLang;
+      }
    }

    let filter = req.query.filter || '';
--- a/website/server/libs/highlightMentions.js
+++ b/website/server/libs/highlightMentions.js
@@ -164,18 +164,24 @@ export default async function highlightMentions (text) {

  if (mentions && mentions.length <= 5) {
    const usernames = mentions.map(mention => mention.substr(1));
+    const usernameRegexes = usernames.map(username => new RegExp(`^${escapeRegExp(username)}$`, 'i'));
    members = await User
-      .find({ 'auth.local.username': { $in: usernames }, 'flags.verifiedUsername': true })
+      .find({
+        $or: usernameRegexes.map(regex => ({ 'auth.local.username': regex })),
+        'flags.verifiedUsername': true,
+      })
      .select(['auth.local.username', '_id', 'preferences.pushNotifications', 'pushDevices', 'party', 'guilds'])
      .lean()
      .exec();
    const baseUrl = determineBaseUrl();
    members.forEach(member => {
      const { username } = member.auth.local;
-      const regex = new RegExp(`@${username}(?![\\-\\w])`, 'g');
-      const replacement = `[@${username}](${baseUrl}/profile/${member._id})`;
+      const regex = new RegExp(`@${escapeRegExp(username)}(?![\\-\\w])`, 'gi');

-      textBlocks.transformValidBlocks(blockText => blockText.replace(regex, replacement));
+      textBlocks.transformValidBlocks(blockText => blockText.replace(regex, match => {
+        const mentionedUsername = match.substr(1);
+        return `[@${mentionedUsername}](${baseUrl}/profile/${member._id})`;
+      }));
    });
  }
Author	SHA1	Message	Date
Hafiz	2a69f98906	Merge branch 'fiz/challenge-modal-fixes' into fiz/updated-end-challenge-modal	2025-08-06 14:09:37 -05:00
Hafiz	5d1d70b72e	end challenge modal fixes	2025-08-06 14:09:10 -05:00
Hafiz	b9764ddfcf	lint error fixes	2025-08-06 13:35:43 -05:00
Hafiz	fdbae638bb	Merge branch 'fiz/updated-end-challenge-modal' into qa/monkey	2025-08-06 13:28:28 -05:00
Hafiz	949809a994	Merge branch 'fiz/profile-modal-tab-urls' into qa/monkey	2025-08-06 13:28:18 -05:00
Hafiz	ef59ecb3b1	Merge branch 'fiz/bounds-enhancements' into qa/monkey	2025-08-06 13:28:01 -05:00
Hafiz	4250fbc53f	Fix inconsistent profile URL format between own and other users' profiles - Update profile tab navigation to use consistent URL format for all users - Redirect old /user/* routes to new format for backward compatibility - Update all navigation points (dropdown menu, notifications) to use new URLs	2025-08-06 13:24:31 -05:00
Hafiz	1d48439528	Update End Challenge modal - Replace dropdown with searchable input (384x32px) for winner selection - Add visual badge state with gems icons for challenge completion - Update Delete Challenge flow with refund info and proper styling - Add close button (X) with opacity hover effect - Enhance Award Winner button with gem icon and dynamic prize display - Apply conditional styling based on winner selection state - Update text colors: Maroon/50 for delete warning, Gray/100 for "OR" text - Add proper translations for gem/gems and refund description	2025-08-06 12:59:33 -05:00
Hafiz	45e1b97ebd	Merge branch 'fiz/case-insensitive-mentions' into qa/monkey	2025-08-05 13:10:19 -05:00
Hafiz	c1ab9cb6ca	lint fixes	2025-08-05 13:10:07 -05:00
Hafiz	5cf07d75f5	Merge branch 'fiz/case-insensitive-mentions' into qa/monkey	2025-08-05 13:03:31 -05:00
Hafiz	375cafc781	Merge branch 'fiz/profile-modal-tab-urls' into qa/monkey	2025-08-05 12:53:44 -05:00
Hafiz	0c0dc20dcc	Fix undefined userId	2025-08-05 12:53:28 -05:00
Hafiz	ffa73698a5	Server now matches usernames case insensitively like client - Preserves original capitalization in mention text - Fixes profile links not working with wrong case mentions	2025-08-05 12:39:33 -05:00
Hafiz	f1ac0d5038	Merge branch 'fiz/profile-modal-tab-urls' into qa/monkey	2025-08-05 12:01:28 -05:00
Hafiz	c0508a2f22	Fix profile modal tab navigation URLs for both own and other users profiles - Add routes for /user/profile, /user/stats, and /user/achievements - Update selectPage() to properly update URLs when switching tabs - Own profile uses /user/{tab} format - Other users' profiles use /profile/{userId}#{tab} format - Parse hash fragments when navigating to other users' profile tabs - Ensure direct navigation to tab URLs opens correct tab	2025-08-05 11:59:11 -05:00
Hafiz	53aa960afd	fix lint	2025-08-04 13:08:16 -05:00
Hafiz	d16c9bc67a	Merge branch 'fiz/content-user-preferred-language' into qa/monkey	2025-08-04 13:03:51 -05:00
Hafiz	00a468bde9	Merge branch 'develop' into qa/monkey	2025-08-04 13:02:38 -05:00
Hafiz	c71528a478	Respect user language preference in content endpoint Content API now returns data in user's preferred language when authenticated without language parameter. No breaking changes - existing clients unaffected.	2025-08-04 12:56:32 -05:00
CuriousMagpie	338c633cdb	chore: fix typos	2025-06-20 13:56:20 -04:00
CuriousMagpie	b957d2a3b0	Merge branch 'develop' into 2025-08-content-build	2025-06-20 12:47:37 -04:00
CuriousMagpie	b2efb8286b	chore: 2025-08 content build	2025-06-19 15:20:30 -04:00