ThingEngineering · madcowfred · Mar 18, 2026 · Mar 17, 2026 · Mar 18, 2026 · Mar 18, 2026
diff --git a/apps/frontend/admin/components/rename-requests/RenameRequests.svelte b/apps/frontend/admin/components/rename-requests/RenameRequests.svelte
@@ -5,7 +5,7 @@
     import { iconLibrary } from '@/shared/icons';
     import type { RenameRequest } from './types';
 
-    import IconifyIcon from '@/shared/components/images/IconifyIcon.svelte';
+    import IconifyWrapper from '@/shared/components/images/IconifyWrapper.svelte';
 
     let renameRequests: RenameRequest[];
 
@@ -65,7 +65,7 @@
            </tr>
        </thead>
        <tbody>
            {#each renameRequests as renameRequest}
                <tr>
                    <td class="id">{renameRequest.id}</td>
                    <td class="name">{renameRequest.userName}</td>
@@ -74,18 +74,18 @@
                     >
                     <td class="action status-success">
                         {#if !renameRequest.inUse}
-                            <IconifyIcon
+                            <IconifyWrapper
                                 icon={iconLibrary.mdiCheck}
                                 tooltip="Approve request"
-                                on:click={async () => await approveRequest(renameRequest.id)}
+                                onclick={async () => await approveRequest(renameRequest.id)}
                             />
                         {/if}
                     </td>
                     <td class="action status-fail">
-                        <IconifyIcon
+                        <IconifyWrapper
                             icon={iconLibrary.mdiClose}
                             tooltip="Decline request"
-                            on:click={async () => await declineRequest(renameRequest.id)}
+                            onclick={async () => await declineRequest(renameRequest.id)}
                         />
                     </td>
                 </tr>

diff --git a/apps/frontend/auctions/components/results/Selected.svelte b/apps/frontend/auctions/components/results/Selected.svelte
@@ -6,7 +6,7 @@
     import { wowthingData } from '@/shared/stores/data';
     import { leftPad } from '@/utils/formatting';
 
-    import IconifyIcon from '@/shared/components/images/IconifyIcon.svelte';
+    import IconifyWrapper from '@/shared/components/images/IconifyWrapper.svelte';
 
     export let selected: string;
 
@@ -69,7 +69,7 @@
                    <td class="price"></td>
                </tr>
            {:then auctions}
                {#each auctions as auction}
                    {@const realm = wowthingData.static.connectedRealmById.get(
                        auction.connectedRealmId
                    )}
@@ -79,7 +79,7 @@
                             {#if realm.region === Region.EU && euLocales[realm.locale]}
                                 {@const { icon: countryIcon, name: countryName } =
                                     euLocales[realm.locale]}
-                                <IconifyIcon
+                                <IconifyWrapper
                                     dropShadow={true}
                                     icon={countryIcon}
                                     tooltip={`EU: ${countryName}`}

diff --git a/apps/frontend/components/achievements/Achievement.svelte b/apps/frontend/components/achievements/Achievement.svelte
@@ -9,7 +9,7 @@
     import AchievementLink from '@/shared/components/links/AchievementLink.svelte';
     import Criteria from './Criteria.svelte';
     import FactionIcon from '@/shared/components/images/FactionIcon.svelte';
-    import IconifyIcon from '@/shared/components/images/IconifyIcon.svelte';
+    import IconifyWrapper from '@/shared/components/images/IconifyWrapper.svelte';
     import WowthingImage from '@/shared/components/images/sources/WowthingImage.svelte';
 
     export let achievementId: number;
@@ -267,7 +267,7 @@

        {#if chain.length > 0}
            <div class="chain">
                {#each chain as chainId}
                    {@const chainEarned = userState.achievements.achievementEarnedById.has(chainId)}
                    <div class="chain-icon" class:completed={chainEarned}>
                        <AchievementLink id={chainId}>
@@ -282,7 +282,7 @@
 
                         {#if chainId === achievementId}
                             <div class="abs-center chain-current drop-shadow">
-                                <IconifyIcon icon={iconStrings['arrow-up']} />
+                                <IconifyWrapper icon={iconStrings['arrow-up']} />
                             </div>
                         {/if}
                     </div>

diff --git a/apps/frontend/components/appearances/AppearancesItem.svelte b/apps/frontend/components/appearances/AppearancesItem.svelte
@@ -1,5 +1,3 @@
-<svelte:options immutable={true} />
-
 <script lang="ts">
     import { itemModifierMap } from '@/data/item-modifier';
     import { appearanceState } from '@/stores/local-storage';
@@ -9,28 +7,30 @@
     import WowheadLink from '@/shared/components/links/WowheadLink.svelte';
     import WowthingImage from '@/shared/components/images/sources/WowthingImage.svelte';
 
-    export let has: boolean;
-    export let modifiedAppearance: AppearanceDataModifiedAppearance;
-
-    let bonusId: number;
-    let difficulty: string;
-    let difficultyShort: string;
-    let imageName: string;
-    $: {
-        const mod = modifiedAppearance;
+    type Props = {
+        has: boolean;
+        modifiedAppearance: AppearanceDataModifiedAppearance;
+    };
+    let { has, modifiedAppearance }: Props = $props();
 
-        imageName = `item/${mod.itemId}`;
-        if (mod.modifier > 0) {
-            imageName += `_${mod.modifier}`;
-        }
+    let imageName = $derived(
+        'item/' +
+            [
+                modifiedAppearance.itemId.toString(),
+                ...(modifiedAppearance.modifier > 0
+                    ? [modifiedAppearance.modifier.toString()]
+                    : []
+                ).join('_'),
+            ]
+    );
 
-        if (itemModifierMap[mod.modifier]) {
-            [difficulty, difficultyShort, bonusId] = itemModifierMap[mod.modifier];
-        } else {
-            const modifierString = mod.modifier.toString();
-            [difficulty, difficultyShort, bonusId] = [modifierString, modifierString, 0];
-        }
-    }
+    let [difficulty, difficultyShort, bonusId] = $derived(
+        itemModifierMap[modifiedAppearance.modifier] || [
+            modifiedAppearance.modifier.toString(),
+            modifiedAppearance.modifier.toString(),
+            0,
+        ]
+    );
 </script>
 
 <style lang="scss">

diff --git a/apps/frontend/components/auctions/AuctionsExtraPets.svelte b/apps/frontend/components/auctions/AuctionsExtraPets.svelte
@@ -10,7 +10,7 @@
     import { getColumnResizer } from '@/utils/get-column-resizer';
     import petLocationTooltip from '@/utils/pet-location-tooltip';
 
-    import IconifyIcon from '@/shared/components/images/IconifyIcon.svelte';
+    import IconifyWrapper from '@/shared/components/images/IconifyWrapper.svelte';
     import Paginate from '@/shared/components/paginate/Paginate.svelte';
     import WowheadLink from '@/shared/components/links/WowheadLink.svelte';
     import WowthingImage from '@/shared/components/images/sources/WowthingImage.svelte';
@@ -99,7 +99,7 @@
 {:then things}
    <Paginate items={things} perPage={20} {page} let:paginated>
        <div class="wrapper" bind:this={wrapperDiv}>
            {#each paginated as thing}
                {@const auctions = $auctionState.limitToBestRealms
                    ? thing.auctions.slice(0, 5)
                    : thing.auctions}
@@ -153,8 +153,8 @@
                                                 data-location={pet.location}
                                                 data-tooltip={petLocationTooltip(pet)}
                                             >
-                                                <IconifyIcon
-                                                    extraClass="drop-shadow"
+                                                <IconifyWrapper
+                                                    cls="drop-shadow"
                                                     icon={itemLocationIcons[pet.location]}
                                                     scale="0.9"
                                                 />

diff --git a/apps/frontend/components/auctions/AuctionsMissing.svelte b/apps/frontend/components/auctions/AuctionsMissing.svelte
@@ -12,7 +12,7 @@
     import connectedRealmName from '@/utils/connected-realm-name';
     import { getColumnResizer } from '@/utils/get-column-resizer';
 
-    import IconifyIcon from '@/shared/components/images/IconifyIcon.svelte';
+    import IconifyWrapper from '@/shared/components/images/IconifyWrapper.svelte';
     import Paginate from '@/shared/components/paginate/Paginate.svelte';
     import RealmTooltip from './RealmTooltip.svelte';
     import WowheadLink from '@/shared/components/links/WowheadLink.svelte';
@@ -226,7 +226,7 @@
                                         {#if connectedRealm.region === Region.EU && euLocales[connectedRealm.locale]}
                                             {@const { icon: countryIcon, name: countryName } =
                                                 euLocales[connectedRealm.locale]}
-                                            <IconifyIcon
+                                            <IconifyWrapper
                                                 dropShadow={true}
                                                 icon={countryIcon}
                                                 tooltip={`EU: ${countryName}`}

diff --git a/apps/frontend/components/auctions/AuctionsMissingBigResults.svelte b/apps/frontend/components/auctions/AuctionsMissingBigResults.svelte
@@ -26,7 +26,7 @@
     import type { ItemDataItem } from '@/types/data/item';
 
     import FactionIcon from '@/shared/components/images/FactionIcon.svelte';
-    import IconifyIcon from '@/shared/components/images/IconifyIcon.svelte';
+    import IconifyWrapper from '@/shared/components/images/IconifyWrapper.svelte';
     import Paginate from '@/shared/components/paginate/Paginate.svelte';
     import ParsedText from '@/shared/components/parsed-text/ParsedText.svelte';
     import ProfessionIcon from '@/shared/components/images/ProfessionIcon.svelte';
@@ -403,15 +403,15 @@
 
                                         <span class="icons">
                                             {#if needSource && !needAppearance}
-                                                <IconifyIcon
-                                                    extraClass="status-shrug"
+                                                <IconifyWrapper
+                                                    cls="status-shrug"
                                                     icon={iconLibrary.mdiWizardHat}
                                                     scale="0.85"
                                                     tooltip="You have collected this appearance from another item"
                                                 />
                                             {:else if needAppearance}
-                                                <IconifyIcon
-                                                    extraClass="status-fail"
+                                                <IconifyWrapper
+                                                    cls="status-fail"
                                                     icon={iconLibrary.mdiWizardHat}
                                                     scale="0.85"
                                                     tooltip="You have not collected this appearance"
@@ -428,7 +428,7 @@
                                                         },
                                                     }}
                                                 >
-                                                    <IconifyIcon
+                                                    <IconifyWrapper
                                                         icon={iconLibrary.mdiAlertOutline}
                                                         scale="0.9"
                                                     />
@@ -440,7 +440,7 @@
                                                     onclick={() =>
                                                         navigator.clipboard.writeText(item.name)}
                                                 >
-                                                    <IconifyIcon
+                                                    <IconifyWrapper
                                                         icon={iconLibrary.mdiClipboardPlusOutline}
                                                         scale="0.9"
                                                     />
@@ -490,7 +490,7 @@
                                         {#if connectedRealm.region === Region.EU && euLocales[connectedRealm.locale]}
                                             {@const { icon: countryIcon, name: countryName } =
                                                 euLocales[connectedRealm.locale]}
-                                            <IconifyIcon
+                                            <IconifyWrapper
                                                 dropShadow={true}
                                                 icon={countryIcon}
                                                 tooltip={`EU: ${countryName}`}
@@ -542,7 +542,10 @@
                             data-tooltip="Copy shopping list to clipboard"
                             onclick={() => exportShoppingList()}
                         >
-                            <IconifyIcon icon={iconLibrary.mdiClipboardPlusOutline} scale="0.9" />
+                            <IconifyWrapper
+                                icon={iconLibrary.mdiClipboardPlusOutline}
+                                scale="0.9"
+                            />
                         </button>
                     </span>
                     <span

diff --git a/apps/frontend/components/auctions/RealmTooltip.svelte b/apps/frontend/components/auctions/RealmTooltip.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
     import sortBy from 'lodash/sortBy';
 
-    import { settingsState } from '@/shared/state/settings.svelte';
+    import CharacterTag from '@/user-home/components/character/CharacterTag.svelte';
     import { userState } from '@/user-home/state/user';
     import type { StaticDataConnectedRealm } from '@/shared/stores/static/types';
-    import CharacterTag from '@/user-home/components/character/CharacterTag.svelte';
 
     type Props = {
         ageInMinutes: number;

diff --git a/apps/frontend/components/auctions/commodities/Table.svelte b/apps/frontend/components/auctions/commodities/Table.svelte
@@ -8,7 +8,7 @@
     import type { CharacterCommodities } from './get-character-commodities';
     import type { CommodityData } from './store';
 
-    import IconifyIcon from '@/shared/components/images/IconifyIcon.svelte';
+    import IconifyWrapper from '@/shared/components/images/IconifyWrapper.svelte';
     import ParsedText from '@/shared/components/parsed-text/ParsedText.svelte';
     import WowheadLink from '@/shared/components/links/WowheadLink.svelte';
     import WowthingImage from '@/shared/components/images/sources/WowthingImage.svelte';
@@ -77,9 +77,9 @@
     <thead>
         <tr>
             <td class="character-realm" colspan="2">
-                <IconifyIcon
+                <IconifyWrapper
                     icon={isExpanded ? uiIcons.minus : uiIcons.plus}
-                    on:click={() =>
+                    onclick={() =>
                         ($commoditiesState.expanded[characterData.characterId] = !isExpanded)}
                     tooltip={isExpanded ? 'Collapse this character' : 'Expand this character'}
                 />

diff --git a/apps/frontend/components/character-table/head/BagSpace.svelte b/apps/frontend/components/character-table/head/BagSpace.svelte
@@ -2,7 +2,7 @@
     import { iconLibrary } from '@/shared/icons';
     import type { SortableProps } from '@/types/props';
 
-    import IconifyIcon from '@/shared/components/images/IconifyIcon.svelte';
+    import IconifyWrapper from '@/shared/components/images/IconifyWrapper.svelte';
 
     let { getSortState, setSortState }: SortableProps = $props();
 </script>
@@ -15,5 +15,5 @@
     onclick={() => setSortState()}
     data-tooltip="Free Bag Slots"
 >
-    <IconifyIcon icon={iconLibrary.gameBackpack} scale="0.9" />
+    <IconifyWrapper icon={iconLibrary.gameBackpack} scale="0.9" />
 </td>
diff --git a/apps/frontend/components/character-table/head/MovementSpeed.svelte b/apps/frontend/components/character-table/head/MovementSpeed.svelte
@@ -2,7 +2,7 @@
     import { iconLibrary } from '@/shared/icons';
     import type { SortableProps } from '@/types/props';
 
-    import IconifyIcon from '@/shared/components/images/IconifyIcon.svelte';
+    import IconifyWrapper from '@/shared/components/images/IconifyWrapper.svelte';
 
     let { getSortState, setSortState }: SortableProps = $props();
 </script>
@@ -15,5 +15,5 @@
     onclick={() => setSortState()}
     data-tooltip="Movement Speed"
 >
-    <IconifyIcon icon={iconLibrary.mdiRunFast} scale="0.9" />
+    <IconifyWrapper icon={iconLibrary.mdiRunFast} scale="0.9" />
 </td>
diff --git a/apps/frontend/components/character-table/row/VaultWorld.svelte b/apps/frontend/components/character-table/row/VaultWorld.svelte
@@ -10,6 +10,7 @@
     let { character }: CharacterProps = $props();
 
     let worldVault = $derived(character.isMaxLevel ? character.weekly?.vault?.worldProgress : []);
+    // tier 5 could be hard prey
 
     function qualityFunc(prog: CharacterWeeklyProgress): number {
         return getWorldTier(prog.level)[1];

diff --git a/apps/frontend/components/characters/professions/CharacterProfessionsProfession.svelte b/apps/frontend/components/characters/professions/CharacterProfessionsProfession.svelte
@@ -11,7 +11,7 @@
     import type {
         Character,
         CharacterSubProfession,
-        Expansion,
+        ExpansionData,
         MultiSlugParams,
         UserCount,
     } from '@/types';
@@ -25,7 +25,7 @@
     export let staticProfession: StaticDataProfession;
 
     let charSubProfession: CharacterSubProfession;
-    let expansion: Expansion;
+    let expansion: ExpansionData;
     let filteredCategories: Record<number, StaticDataProfessionAbility[]>;
     let hasFirstCraft: boolean;
     let knownRecipes: Set<number>;

diff --git a/...rontend/components/characters/professions/CharacterProfessionsProfessionSkillRanks.svelte b/...rontend/components/characters/professions/CharacterProfessionsProfessionSkillRanks.svelte
@@ -2,7 +2,7 @@
     import { uiIcons } from '@/shared/icons';
     import type { StaticDataProfessionAbility } from '@/shared/stores/static/types';
 
-    import IconifyIcon from '@/shared/components/images/IconifyIcon.svelte';
+    import IconifyWrapper from '@/shared/components/images/IconifyWrapper.svelte';
     import WowheadLink from '@/shared/components/links/WowheadLink.svelte';
 
     type Props = {
@@ -39,7 +39,7 @@
                 id={index === 0 ? ability.spellId : ability.extraRanks[index - 1][1]}
                 type="spell"
             >
-                <IconifyIcon
+                <IconifyWrapper
                     icon={index < currentRank && userHas ? uiIcons.starFull : uiIcons.starEmpty}
                 />
             </WowheadLink>

diff --git a/apps/frontend/components/characters/professions/CharacterProfessionsProfessionTable.svelte b/apps/frontend/components/characters/professions/CharacterProfessionsProfessionTable.svelte
@@ -13,7 +13,7 @@
 
     import CraftLevels from './CharacterProfessionsProfessionCraftLevels.svelte';
     import FactionIcon from '@/shared/components/images/FactionIcon.svelte';
-    import IconifyIcon from '@/shared/components/images/IconifyIcon.svelte';
+    import IconifyWrapper from '@/shared/components/images/IconifyWrapper.svelte';
     import ParsedText from '@/shared/components/parsed-text/ParsedText.svelte';
     import SkillRanks from './CharacterProfessionsProfessionSkillRanks.svelte';
     import WowheadLink from '@/shared/components/links/WowheadLink.svelte';
@@ -224,8 +224,8 @@
                                                 {@const hasCrafted = userState.quests.characterById
                                                     .get(character.id)
                                                     .hasQuestById.has(ability.firstCraftQuestId)}
-                                                <IconifyIcon
-                                                    extraClass={hasCrafted
+                                                <IconifyWrapper
+                                                    cls={hasCrafted
                                                         ? 'status-success'
                                                         : 'status-fail'}
                                                     icon={hasCrafted ? uiIcons.yes : uiIcons.no}

diff --git a/apps/frontend/components/characters/professions/CharacterProfessionsTraits.svelte b/apps/frontend/components/characters/professions/CharacterProfessionsTraits.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { expansionSlugMap } from '@/data/expansion';
-    import type { Character, Expansion, MultiSlugParams } from '@/types';
+    import type { Character, ExpansionData, MultiSlugParams } from '@/types';
     import type {
         StaticDataProfession,
         StaticDataSubProfession,
@@ -15,7 +15,7 @@
     export let staticProfession: StaticDataProfession;
 
     let charTraits: Record<number, number>;
-    let expansion: Expansion;
+    let expansion: ExpansionData;
     let subProfession: StaticDataSubProfession;
     $: {
         expansion = expansionSlugMap[params.slug5];