Deploy

apps/frontend/components/home/view-switcher/Delves.svelte

@@ -17,7 +17,7 @@
             dynamicDelves.map(({ poiId, story }) => [
                 delveMap[poiId],
                 story,
-                settingsState.value.delveRankings[`${poiId}:${story}`],
+                settingsState.value.delveRankings[`${poiId}:${story}`] || 0,
             ]) as [Delve, string, number][],
             ([delve, , ranking]) => `${9 - ranking}:${delve.shortName}`
         );

apps/frontend/shared/icons/ui.ts

@@ -8,6 +8,7 @@ export const uiIcons = {
     no: iconLibrary.mdiClose,
     plus: iconLibrary.mdiPlus,
     question: iconLibrary.mdiQuestionMark,
+    random: iconLibrary.gameDiceRandom,
     starEmpty: iconLibrary.mdiStarOutline,
     starHalf: iconLibrary.mdiStarHalfFull,
     starFull: iconLibrary.mdiStarFace,

apps/frontend/shared/state/browser.svelte.ts

@@ -125,6 +125,9 @@ interface BrowserStateIdk {
         showCollected: boolean;
         showUncollected: boolean;
     };
+    transmogSets: {
+        mythicOnly: boolean;
+    };
     vendors: {
         filtersExpanded: boolean;
 
@@ -282,6 +285,9 @@ const initialState: BrowserStateIdk = {
         showCollected: true,
         showUncollected: true,
     },
+    transmogSets: {
+        mythicOnly: false,
+    },
     vendors: {
         filtersExpanded: false,
         highlightMissing: true,

apps/frontend/user-home/components/transmog-sets/TableCategory.svelte

@@ -3,6 +3,7 @@
     import { Constants } from '@/data/constants';
     import { transmogSets } from '@/data/transmog';
     import { iconLibrary, uiIcons } from '@/shared/icons';
+    import { browserState } from '@/shared/state/browser.svelte';
     import { settingsState } from '@/shared/state/settings.svelte';
     import { userStore } from '@/stores';
     import { transmogSetsState } from '@/stores/local-storage';
@@ -15,6 +16,7 @@
 
     import { tradingPostKeys } from './data';
 
+    import CheckboxInput from '@/shared/components/forms/CheckboxInput.svelte';
     import ClassIcon from '@/shared/components/images/ClassIcon.svelte';
     import CovenantIcon from '@/shared/components/images/CovenantIcon.svelte';
     import IconifyWrapper from '@/shared/components/images/IconifyWrapper.svelte';
@@ -36,6 +38,11 @@
     );
     let setKey = $derived(slugs.join('--'));
 
+    let raidWithMythic = $derived(
+        (category.name === 'Raids' || slugs.includes('raids')) &&
+            category.groups.some((group) => group.sets.includes('Mythic'))
+    );
+
     const getTransmogSets = function (group: ManualDataTransmogGroup): TransmogSetData[] {
         if (group.type === 'multi') {
             return Object.keys(group.data).map(
@@ -157,9 +164,7 @@
         color: var(--color-success);
     }
     .percent {
-        position: absolute;
-        right: 0.5rem;
-        word-spacing: -0.2ch;
+        word-spacing: -0.3ch;
     }
     .percent-cell {
         --width: 3.4rem;
@@ -193,13 +198,23 @@
 
         <tr class="sticky">
             <td class="category-name" colspan="2">
-                {category.name}
-
-                {#if showPercent}
-                    <span class="drop-shadow percent {getPercentClass(categoryPercent)}">
-                        {Math.floor(categoryPercent).toFixed(0)} %
-                    </span>
-                {/if}
+                <div class="flex-wrapper">
+                    <span>{category.name}</span>
+
+                    {#if raidWithMythic}
+                        <CheckboxInput
+                            name="mythic_only"
+                            bind:value={browserState.current.transmogSets.mythicOnly}
+                            >Mythic only</CheckboxInput
+                        >
+                    {/if}
+
+                    {#if showPercent}
+                        <span class="drop-shadow percent {getPercentClass(categoryPercent)}">
+                            {Math.floor(categoryPercent).toFixed(0)} %
+                        </span>
+                    {/if}
+                </div>
             </td>
 
             {#if currentType === 'covenant'}
@@ -363,7 +378,7 @@
     {/if}
 
     {#if isExpanded}
-        {#each getFilteredSets(settingsState.value, $userStore, group) as [setShow, setName], setIndex}
+        {#each getFilteredSets(settingsState.value, $userStore, group, raidWithMythic) as [setShow, setName], setIndex}
             {#if setShow}
                 {@const setPercent = getPercent(groupIndex, setIndex)}
                 <tr class:faded={setName.endsWith('*')}>

apps/frontend/utils/transmog/get-filtered-sets.ts

@@ -1,3 +1,4 @@
+import { browserState } from '@/shared/state/browser.svelte';
 import type { Settings } from '@/shared/stores/settings/types';
 import type { UserData } from '@/types';
 import type { ManualDataTransmogGroup, ManualDataTransmogGroupData } from '@/types/data/manual';
@@ -6,12 +7,14 @@ export default function getFilteredSets(
     settings: Settings,
     userData: UserData,
     group: ManualDataTransmogGroup,
+    raidWithMythic: boolean
 ): [boolean, string][] {
     const ret: [boolean, string][] = [];
 
     const skipAlliance = !settings.transmog.showAllianceOnly;
     const skipHorde = !settings.transmog.showHordeOnly;
     const skipUnavailable = settings.collections.hideUnavailable;
+    const skipNonMythic = raidWithMythic && browserState.current.transmogSets.mythicOnly;
 
     for (let setIndex = 0; setIndex < group.sets.length; setIndex++) {
         const setName = group.sets[setIndex];
@@ -23,8 +26,9 @@ export default function getFilteredSets(
                     setName.endsWith('*') &&
                     !hasAnyOfSets(
                         userData,
-                        Object.values(group.data).map((datas) => datas[setIndex]),
-                    ))
+                        Object.values(group.data).map((datas) => datas[setIndex])
+                    )) ||
+                (skipNonMythic && setName !== 'Mythic')
             ),
             setName,
         ]);
@@ -36,7 +40,7 @@ export default function getFilteredSets(
 function hasAnyOfSets(userData: UserData, sets: ManualDataTransmogGroupData[]): boolean {
     return sets.some((set) =>
         Object.values(set.items || {}).some((itemIds) =>
-            itemIds.some((itemId) => userData.hasAppearance.has(itemId)),
-        ),
+            itemIds.some((itemId) => userData.hasAppearance.has(itemId))
+        )
     );
 }